<template>
    <div class="bannerBigBox">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--新闻列表皮肤1-->
            <div v-if="skinId==1">
                <listStyle1
                    :componentStyle="templateData[1].component_style" 
                    :templateData="templateData[1].componentData.data.textnum" 
                />
            </div>
            <!--新闻列表皮肤2-->
            <div v-if="skinId==2">
                <listStyle2
                    :componentStyle="templateData[1].component_style" 
                    :templateData="templateData[1].componentData.data.textnum" 
                />
            </div>
            <!--新闻列表皮肤3-->
            <div v-if="skinId==3">
                <listStyle3
                    :componentStyle="templateData[1].component_style" 
                    :templateData="templateData[1].componentData.data.textnum" 
                />
            </div>
            <!--新闻列表皮肤4-->
            <div v-if="skinId==4">
                <listStyle4
                    :componentStyle="templateData[1].component_style" 
                    :templateData="templateData[1].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
</template>

<script setup>
//轮播图组件皮肤1
import swiperStyle1 from '@/components/template/component/banner/swiper/720x450/1.vue'
//列表组件皮肤1
import listStyle1 from '@/components/template/component/banner/list/450x405/1.vue'
//列表组件皮肤2
import listStyle2 from '@/components/template/component/banner/list/450x405/2.vue'
//列表组件皮肤3
import listStyle3 from '@/components/template/component/banner/list/450x405/3.vue'
//列表组件皮肤4
import listStyle4 from '@/components/template/component/banner/list/450x405/4.vue'
//暂无数据
import nodata from '@/components/template/component/public/nodata.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.bannerBigBox{
    width: 1200px;
    height: 410px;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;
    margin-bottom: 30px;
    .bannerLayerBox {
        width: 720px;
        height: 410px;
        position: relative;
        .templateEditBtnBox {
            right: 0;
        }
    }
    .NewsListBox {
        width: 450px;
        height: 410px;
        position: relative;
        .templateEditBtnBox {
            right: 0;
        }
    }
}
//基本样式 end ---------------------------------------->
</style>