<template>
    <div class="bannerBigBox">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle2 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--新闻列表皮肤7-->
            <div v-if="skinId==7">
                <listStyle7
                    :componentStyle="templateData[1].component_style" 
                    :templateData="templateData[1].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
</template>

<script setup>
//轮播图组件皮肤2
import swiperStyle2 from '@/components/template/component/banner/swiper/720x480/1.vue'
//列表组件皮肤4
import listStyle7 from '@/components/template/component/banner/list/450x480/1.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: 480px;
    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: 480px;
        position: relative;
        .templateEditBtnBox {
            right: 0;
        }
    }
    .NewsListBox {
        width: 450px;
        height: 480px;
        position: relative;
        .templateEditBtnBox {
            right: 0;
        }
    }
}
//基本样式 end ---------------------------------------->
</style>
