115 lines
2.6 KiB
Vue
115 lines
2.6 KiB
Vue
<template>
|
|
<div class="content">
|
|
<BannerTop :options="bannerTopOptions"/>
|
|
<div class="container">
|
|
<section class="article-page-list">
|
|
<nuxt-link
|
|
class="article-page-item box_shadow row mt-4"
|
|
:to="`/${jumpUrl(item.dataType)}/${item.id}?catgId=${item.catgId}&maxCatgId=${item.maxCatgId}`"
|
|
v-for="item in pordObj.records"
|
|
:key="item.id"
|
|
>
|
|
<img
|
|
class="col-md-4 cover"
|
|
:src="item.mainPic"
|
|
:alt="item.title"
|
|
>
|
|
</img>
|
|
<article class="col-md-8">
|
|
<h3 class="title text-ellipsis">
|
|
{{ item.title }}
|
|
</h3>
|
|
<p class="article-page-content text-ellipsis" v-html="item.description"></p>
|
|
<div>
|
|
<span>{{ item.createTime }}</span>
|
|
<img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
|
|
</div>
|
|
</article>
|
|
</nuxt-link>
|
|
|
|
<SeoPagination class="mt-4" :total="pordObj.total" />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'search-result',
|
|
watchQuery: ['str','pageNum'],
|
|
data() {
|
|
return {
|
|
bannerTopOptions: {
|
|
title: this.$t('common.fulltextsearch'),
|
|
img: require('../assets/image/banner/aboutus-banner.png')
|
|
}
|
|
}
|
|
},
|
|
async asyncData({$axios, query}) {
|
|
console.log(query.str);
|
|
const params = {
|
|
pageNum: query.pageNum || 1,
|
|
pageSize: 10,
|
|
text: query.str
|
|
}
|
|
let {data: pordObj} = await $axios('/web/searchText', {params})
|
|
|
|
return {
|
|
pordObj
|
|
}
|
|
},
|
|
methods: {
|
|
jumpUrl(val) {
|
|
const routeMap = {
|
|
'news': 'article-page', // 文章栏目
|
|
'product': 'products' // 产品栏目
|
|
}
|
|
|
|
return routeMap[val]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.article-page-list {
|
|
box-sizing: border-box;
|
|
.article-page-item {
|
|
margin: 0;
|
|
height: min-content;
|
|
min-height: 12.875rem;
|
|
border: 1px solid #e6e8ec;
|
|
.cover {
|
|
height: 13.75rem;
|
|
object-fit: cover;
|
|
}
|
|
article {
|
|
padding: 1.125rem;
|
|
font-size: .875rem;
|
|
.title {
|
|
margin-top: .9375rem;
|
|
color: #212222;
|
|
font-size: .875rem;
|
|
}
|
|
.article-page-content {
|
|
margin: 1.25rem 0;
|
|
height: 5rem;
|
|
color: #878b90;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
>div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #878b90;
|
|
img {
|
|
width: 1.6875rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |