<template>
    <div class="px-20px bg-white shadow-md ">
        <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 @click="$router.push('/vip')" type="text" class="!p-0 !text-size-14px !font-normal !text-[#686868]">{{$t('查看更多')}}
            </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-devider></ui-devider>
        <div v-for="vipMagazine in vipMagazines" :key="item" class="transform hover:scale-105 cursor-pointer">
            <ui-vip-article :item="vipMagazine"></ui-vip-article>
            <ui-devider></ui-devider>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                vipMagazines:[]
            }
        },
        async created() {

            let resp = await  this.$http.post(this.$api.cms.listVipMagazines);

            if(resp.data.status === 200){
                this.vipMagazines = resp.data.data.vipMagazines;
            }
        }
    }
</script>

<style scoped>

</style>