<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>