132 lines
2.5 KiB
Vue
132 lines
2.5 KiB
Vue
<script>
|
||
export default {
|
||
props: {
|
||
config: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
categorySlug: {
|
||
type: String,
|
||
default: '',
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
goToToolDetail() {
|
||
if (this.config.slug && this.categorySlug) {
|
||
this.recordToolClick(this.config);
|
||
this.$router.push(`/detail?tool_slug=${this.config.slug}&category_slug=${this.categorySlug}`);
|
||
}
|
||
},
|
||
// 记录点击次数
|
||
async recordToolClick(item) {
|
||
if (item.id) {
|
||
await this.$api.tool.recordToolClickNum(item.id);
|
||
}
|
||
},
|
||
/**
|
||
* 检测文本是否包含有效的HTML标签
|
||
* @param {string} text - 要检测的文本
|
||
* @returns {boolean} - 是否包含有效的HTML标签
|
||
*/
|
||
containsHtml(text) {
|
||
if (!text || typeof text !== 'string') {
|
||
return false;
|
||
}
|
||
// 简单检测常见HTML标签格式，实际项目中可能需要更复杂的验证
|
||
const htmlRegex = /<[^>]*>/;
|
||
return htmlRegex.test(text);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="card-caontainer" @click="goToToolDetail">
|
||
<div class="title">
|
||
<div class="icon">
|
||
<img :src="config.iconUrl || '/'" alt="" />
|
||
</div>
|
||
<span class="title-text">
|
||
{{ config.name || '' }}
|
||
</span>
|
||
</div>
|
||
<div class="text">
|
||
{{ config.memo ? config.memo : '' }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.card-caontainer {
|
||
background: #FFFFFF;
|
||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
border: 1px solid #E2E8F0;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
|
||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||
}
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
.title-text {
|
||
font-size: 18px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 6px;
|
||
background: #f9fafc;
|
||
padding: 6px;
|
||
img {
|
||
width: 28px;
|
||
height: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
span {
|
||
color: $main-font-color;
|
||
font-size: $big-font-size;
|
||
font-weight: 600;
|
||
font-family: 'Poppins-SemiBold', serif;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
color: $grey-color;
|
||
font-family: 'Poppins-Regular', serif;
|
||
margin-top: 4px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
</style>
|