98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<template>
|
|
<!-- 新闻列表 -->
|
|
<section class="news-list">
|
|
<nuxt-link
|
|
class="news-item box_shadow row mt-4"
|
|
:to="`/news/${item.id}`"
|
|
v-for="item in pordObj.records"
|
|
:key="item.id"
|
|
>
|
|
<b-img
|
|
class="col-md-4"
|
|
:src="item.mainPic"
|
|
:alt="item.title"
|
|
>
|
|
</b-img>
|
|
<article class="col-md-8">
|
|
<h3 class="title text-ellipsis">
|
|
{{ item.title }}
|
|
</h3>
|
|
<p class="news-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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'news-list',
|
|
watchQuery: ['pageNum', 'catgId'],
|
|
data() {
|
|
return {
|
|
bannerTopOptions: {
|
|
|
|
},
|
|
}
|
|
},
|
|
async asyncData({$axios,query}) {
|
|
let params = {
|
|
pageNum: query.pageNum || 1,
|
|
pageSize: 6,
|
|
catgId: query.catgId || '',
|
|
}
|
|
let {data: pordObj} = await $axios('/web/newsPageList', {params})
|
|
|
|
return {
|
|
pordObj
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.news-list {
|
|
box-sizing: border-box;
|
|
.news-item {
|
|
margin: 0;
|
|
height: min-content;
|
|
min-height: 12.875rem;
|
|
border: 1px solid #e6e8ec;
|
|
article {
|
|
padding: 1.125rem;
|
|
font-size: .875rem;
|
|
.title {
|
|
margin-top: .9375rem;
|
|
color: #212222;
|
|
font-size: .875rem;
|
|
}
|
|
.news-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> |