<template>
    <ui-page-layout title="热榜文章">



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