<template>
    <div class="px-20px bg-white shadow-md">
        <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-banner
                   flag="热榜文章"
                   bannerClass=" mb-20px" titleClass="swiper-title">

        </ui-banner>

        <ui-devider></ui-devider>

        <div v-for="item in cmsArticles" :key="item">
            <ui-small-article :item="item"></ui-small-article>
            <ui-devider></ui-devider>
        </div>
    </div>
</template>

<script>
    export default {

        data(){
            return {
                cmsArticles:[]
            }
        },
        async created() {

            let resp = await  this.$http.post(this.$api.cms.articles);
            if(resp.data.status === 200){
                this.cmsArticles = resp.data.data.cmsArticles;
            }

        }

    }
</script>

<style  scoped>

</style>