feat: 为搜索页栏目添加图片缩略图功能

- 图片预览:产品与解决方案栏目添加缩略图功能
- 组件提取:在搜索结果页,将单个搜索结果单独提取为组件SearchResultCard
This commit is contained in:
2025-12-05 14:56:24 +08:00
parent 246a0b9d4f
commit c9b5b1fad9
5 changed files with 84 additions and 10 deletions

View File

@ -0,0 +1,72 @@
<template>
<el-card class="result-card">
<el-row>
<el-col :span="12">
<h3 class="result-title">{{ item.title }}</h3>
<p v-if="item.summary" class="result-summary">
{{ item.summary }}
</p>
<p v-if="item.type" class="result-type">
<span>{{ $t('search.section') }}: </span>
<span class="result-type-name">{{ typeLabel }}</span>
</p>
</el-col>
<el-col :span="12" class="image-col">
<el-image
v-if="item.thumbnail"
:src="item.thumbnail"
:alt="item.title"
style="width: 150px"
/>
</el-col>
</el-row>
</el-card>
</template>
<script setup lang="ts">
defineProps<{
item: SearchItemView;
typeLabel: string;
}>();
</script>
<style scoped>
.result-card {
border-radius: 12px;
transition: box-shadow 0.2s ease;
}
.result-card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}
.result-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--el-color-primary);
display: inline-block;
}
.result-summary {
font-size: 0.95rem;
color: var(--el-text-color-regular);
margin-bottom: 0.5rem;
line-height: 1.6;
}
.result-type {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
}
.result-type-name {
margin-left: 4px;
color: var(--el-color-primary);
}
.image-col {
display: flex;
justify-content: end;
align-items: center;
}
</style>