122 lines
2.3 KiB
Vue
122 lines
2.3 KiB
Vue
<template>
|
||
<div class="search-result-item" @click="handleClick">
|
||
<!-- 分类标签 -->
|
||
<span class="category-tag" :style="categoryStyle">
|
||
{{ result.category }}
|
||
</span>
|
||
|
||
<!-- 标题 -->
|
||
<h3 class="title" v-html="result.title"></h3>
|
||
|
||
<!-- 日期 -->
|
||
<div class="meta">
|
||
<span class="date">{{ result.publishTime }}</span>
|
||
<span class="source" v-if="result.source">{{ result.source }}</span>
|
||
</div>
|
||
|
||
<!-- 摘要 -->
|
||
<p class="summary" v-html="result.summary"></p>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SearchResultItem',
|
||
props: {
|
||
result: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
},
|
||
computed: {
|
||
categoryStyle() {
|
||
if (this.result.categoryType === 'news') {
|
||
return { backgroundColor: '#e8f3ff', color: '#072ca6' };
|
||
} else if (this.result.categoryType === 'carbon_cert') {
|
||
return { backgroundColor: '#fff7e6', color: '#d25f00' };
|
||
} else if (this.result.categoryType === 'service') {
|
||
return { backgroundColor: '#e6fff0', color: '#00b42a' };
|
||
}
|
||
return { backgroundColor: '#f5f5f5', color: '#666' };
|
||
},
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
if (this.result.url) {
|
||
// 后端返回的URL已包含id参数，直接跳转
|
||
window.location.href = this.result.url;
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.search-result-item {
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
cursor: pointer;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.category-tag {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin: 0 0 8px 0;
|
||
line-height: 1.5;
|
||
|
||
:deep(em) {
|
||
color: #00b42a;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.meta {
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
|
||
.date {
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.source {
|
||
&::before {
|
||
content: '来源：';
|
||
}
|
||
}
|
||
}
|
||
|
||
.summary {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.8;
|
||
margin: 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
|
||
:deep(em) {
|
||
color: #00b42a;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
</style>
|