<template>
  <div>
    <div class="w-1200px m-auto mt-20px">
      <div class="flex justify-between">
        <div class="left w-860px">
          <ui-shadow-box class="relative h-50px flex items-center pl-16.5px ">
            <div
              class="w-80px h-3px absolute left-0 top--3px bg-primary rounded-full"
            ></div>

            <div class="font-thin text-[#000] text-size-20px">{{ $t("军事") }}</div>
          </ui-shadow-box>
          <div class="h-20px"></div>
          <div v-for="item in 5" :key="item">
            <ui-main-article></ui-main-article>
            <div class="h-20px"></div>
          </div>
          <ui-shadow-box class="w-full h-100px mb-20px">
            <img src="/imgs/split-pic-1.png" class="w-full h-full object-cover" />
          </ui-shadow-box>
          <div v-for="item in 5" :key="item">
            <ui-main-article></ui-main-article>
            <div class="h-20px"></div>
          </div>
          <ui-shadow-box class="w-full h-100px mb-20px">
            <img src="/imgs/split-pic-2.png" class="w-full h-full object-cover" />
          </ui-shadow-box>
          <div v-for="item in 5" :key="item">
            <ui-main-article></ui-main-article>
            <div class="h-20px"></div>
          </div>
        </div>
        <div class="right w-320px">
          <div class="px-20px bg-white">
            <div class="h-17px"></div>
            <div class="relative inline-flex mb-6.5px">
              <img src="/imgs/hot.png" class="w-24px h-auto mr-4px" />
              <div class="font-thin text-[#000] text-size-20px">{{ $t("热榜文章") }}</div>

              <div
                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
              ></div>
            </div>
            <ui-devider></ui-devider>
            <div class="h-21px"></div>
            <ui-swiper
              class="mb-20px"
              :items="[
                { url: '/imgs/article_cover1.png', title: '这是标题' },
              { url: '/imgs/article_cover1.png', title: '这是标题' },
              ]"
              titleClass="swiper-title"
            ></ui-swiper>
            <ui-devider></ui-devider>

            <div v-for="item in 9" :key="item">
              <ui-small-article></ui-small-article>
              <ui-devider></ui-devider>
            </div>
          </div>
          <div class="h-20px"></div>
          <div class="px-20px bg-white">
            <div class="h-17px"></div>
            <div class="relative flex mb-6.5px justify-between item-center">
              <div class="inline-flex">
                <img src="/imgs/vip.png" class="w-24px h-auto mr-4px" />
                <div class="font-thin text-[#000] text-size-20px">
                  {{ $t("VIP期刊") }}
                </div>
              </div>
              <el-button
                type="text"
                class="!p-0 !text-size-14px !font-normal !text-[#686868]"
                >查看更多</el-button
              >

              <div
                class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
              ></div>
            </div>
            <ui-devider></ui-devider>
            <div class="h-21px"></div>

            <ui-swiper
              class="mb-20px"
              :items="[
                { url: 'imgs/article_cover1.png', title: '这是标题' },
                { url: 'imgs/article_cover1.png', title: '这是标题' },
              ]"
              titleClass="swiper-title"
            ></ui-swiper>
            <ui-swiper
              class="mb-20px"
              :items="[
                { url: 'imgs/article_cover1.png', title: '这是标题' },
                { url: 'imgs/article_cover1.png', title: '这是标题' },
              ]"
              titleClass="swiper-title"
            ></ui-swiper>
            <ui-devider></ui-devider>
            <div v-for="item in 10" :key="item">
              <ui-vip-article></ui-vip-article>
              <ui-devider></ui-devider>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</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>
