zizhujianzhan_web/components/template/sector/body/index/banner/1200x410/1.vue

<template>
    <div class="bannerBigBox">
        <div class="bannerLayerBox">
            <swiperStyle1 
                v-if="templateData.componentList[0].data.img.length > 0" 
                :skinId="skinId" 
                :templateData="templateData.componentList[0].data.img" 
            />
            <nodata v-else :dataStyle="1" :dataWidth="720" :dataHeight="405" />
        </div>
        <!--新闻列表-->
        <div class="NewsListBox">
            <div v-if="templateData.componentList[0].component_style.toString()=='1'">
                <listStyle1
                    v-if="templateData.componentList[0].data.text.length > 0" 
                    :skinId="skinId" 
                    :templateData="templateData.componentList[0].data.text" 
                />
                <nodata v-else :dataStyle="1" :dataWidth="720" :dataHeight="405" />
            </div>
            <div v-if="templateData.componentList[0].component_style.toString()=='2'">
                <listStyle2
                    v-if="templateData.componentList[0].data.text.length > 0" 
                    :skinId="skinId" 
                    :templateData="templateData.componentList[0].data.text" 
                />
                <nodata v-else :dataStyle="1" :dataWidth="720" :dataHeight="405" />
            </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'
//暂无数据
import nodata from '@/components/template/component/public/nodata.vue'

const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
</script>

<style lang="less" scoped>
.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;
        }
    }
}
</style>