<template>
  <ui-page-layout 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-mask-picture class="w-full h-136rem"></ui-mask-picture>
    
    <UiMainArticle v-for="index in 8"></UiMainArticle>

  </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: "這裏是輪播圖推薦內容標題" },
      ],
    };
  },
};
</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>
