120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<template>
|
|
<!-- 文章模块 -->
|
|
<section class="article-page-list">
|
|
<div v-html="prodUp"></div>
|
|
<nuxt-link
|
|
class="article-page-item box_shadow row mt-4"
|
|
:to="`/article-page/${item.id}?maxCatgId=${item.maxCatgId}&catgId=${item.catgId}`"
|
|
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>
|
|
<div v-html="prodDown"></div>
|
|
<SeoPagination class="mt-4" :total="pordObj.total" />
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'article-page-list',
|
|
watchQuery: ['pageNum', 'catgId', 'maxCatgId'],
|
|
data() {
|
|
return {
|
|
bannerTopOptions: {
|
|
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
prodUp() {
|
|
return this.$store.state.device === '手机端' ? this.catgInfo.prodUpApp : this.catgInfo.prodUp
|
|
},
|
|
prodDown() {
|
|
return this.$store.state.device === '手机端' ? this.catgInfo.prodDownApp : this.catgInfo.prodDown
|
|
}
|
|
},
|
|
async asyncData({$axios,query}) {
|
|
let params = {
|
|
pageNum: query.pageNum || 1,
|
|
pageSize: 6,
|
|
catgId: query.catgId || query.maxCatgId ||'',
|
|
}
|
|
let {data: pordObj} = await $axios('/web/newsPageList', {params})
|
|
|
|
let catgInfo = {}
|
|
if (params.catgId) {
|
|
var {data: catgInfoRes} = await $axios.get(`/web/categoryInfo?id=${query.catgId || query.maxCatgId ||''}`)
|
|
catgInfo = catgInfoRes
|
|
}
|
|
console.log(catgInfo);
|
|
|
|
|
|
return {
|
|
pordObj,
|
|
catgInfo
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</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> |