<template>

  <ui-page-layout :showLeft="false" title="杂志期刊">
    <template v-slot:search>
      <div class=" flex justify-center pb-22rem">
        <van-field class="!w-702rem !h-70rem !p-0 !rounded-full">
          <template v-slot:left-icon>
            <div class="h-full w-full flex justify-center items-center">
              <img src="/imgs/h5-search-icon.png" class="w-36rem ml-24rem" />
            </div>
          </template>
        </van-field>
      </div>
    </template>
    <ui-scroll-view>
      <van-tabs v-model="active" background="#FFFFFF" color="#124026" class="h-full">
        <van-tab :title="$t('首页')" class="h-full flex-1">
          <div class="px-24rem pt-12rem">
            <div>
              <ui-swiper :showPagination="true" :items="banner1" class="w-full h-390rem"></ui-swiper>
            </div>
            <div class="flex justify-around mt-24rem mb-24rem">
              <div class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/recommend-type.png" />
                <div>首页</div>
              </div>
              <div @click="$router.push('/realtime-news')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/news-type.png" />
                <div>实时新闻</div>
              </div>
              <div @click="$router.push('/hot')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/hot-type.png" />
                <div>热榜文章</div>
              </div>
              <div @click="$router.push('/vip')" class="type-item">
                <img class="w-68rem h-68rem object-contain" src="/imgs/vip-type.png" />
                <div>VIP周刊</div>
              </div>
            </div>
            <div class="home-pics-group mb-32rem">



              <ui-mask-picture class="h-192rem"></ui-mask-picture>
              <ui-mask-picture class="h-192rem"></ui-mask-picture>
              <ui-mask-picture class="h-192rem"></ui-mask-picture>
              <ui-mask-picture class="h-192rem"></ui-mask-picture>


            </div>
            <home-new></home-new>
            <div class="h-24rem"></div>
            <UiMainArticle v-for="index in 8"></UiMainArticle>
            <div class="home-pics-group mb-32rem">



              <ui-mask-picture class="h-192rem"></ui-mask-picture>
              <ui-mask-picture class="h-192rem"></ui-mask-picture>
              <ui-mask-picture class="h-192rem"></ui-mask-picture>
              <ui-mask-picture class="h-192rem"></ui-mask-picture>


            </div>

            <UiMainArticle v-for="index in 8"></UiMainArticle>
            <img src="/imgs/split-pic-2.png" />
            <UiMainArticle v-for="index in 8"></UiMainArticle>
          </div>
        </van-tab>
        <van-tab :key="index" v-for="index in 10" :title="'标签 ' + index" class="h-full flex-1">
          <div class="px-24rem pt-12rem">




            <UiMainArticle v-for="index in 18"></UiMainArticle>

          </div>
        </van-tab>
      </van-tabs>
    </ui-scroll-view>

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

<script>
export default {
  data() {
    return {
      active: 0,
      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: "這裏是輪播圖推薦內容標題" },
      ],
    };
  },
};
</script>
<style>
.type-item {
  @apply flex flex-col items-center text-size-24rem;
}

.type-item>img {
  @apply mb-16rem;
}

.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;
}

.van-tabs__content {
  @apply h-full;
}

.home-pics-group {
  display: grid;
  grid-row-gap: 10rem;
  grid-column-gap: 10rem;
  grid-template-columns: repeat(2, 1fr);

}
</style>
