
<template>
  <ui-page-layout title="推荐新闻">
    <template v-slot:search>
      <ui-search></ui-search>
    </template>
    <ui-mask-picture flag="推荐" bannerClass="w-full h-136rem"></ui-mask-picture>

    <div class="pl-22rem pr-22rem pt-22rem">
      <UiMainArticle v-for="art in latestArts" :item="art"></UiMainArticle>
    </div>


  </ui-page-layout>
</template>

<script>
  export default {
    data() {
      return {
        banner1: [
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
          { url: "/imgs/banner1.png", title: "這裏是輪播圖推薦內容標題" },
        ],
        latestArts: [],
        pageIndex: 1
      };
    },
    methods: {
      async loadLatestArts(pageIndex) {
        let resp = await this.$http.post(this.$api.cms.articles, this.$qs.stringify(Object.assign(this.$route.query,{pageIndex: pageIndex})));
        if (resp.data.status === 200) {
          if(pageIndex === 1){
            this.latestArts = resp.data.data.cmsArticles;
          }else{
            this.latestArts.push(...resp.data.data.cmsArticles);
          }
        }
      }
    },
    async created() {
      this.loadLatestArts(this.pageIndex);
    }
  };
</script>
<style>
  .swiper-group {
    display: grid;
    grid-template-columns: repeat(2, 290px);
    grid-template-rows: repeat(2, 163px);
    grid-gap: 10px;
  }

  .swiper {
    @apply w-290px;

    /* align-items: end; */
    /* @apply w-290px h-163px; */
  }

  .swiper-title {
    @apply bottom-17px left-17px text-size-16px;
  }
</style>
