zizhujianzhan_web/components/template/component/banner/1200x410/1.vue

<template>
    <!-- 样式1 -->
    <div class="bannerBigBox" v-if="componentStyle==1">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
    <!-- 样式2 -->
    <div class="bannerBigBox" v-if="componentStyle==2">
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
    </div>
    <!-- 样式3 -->
    <div class="bannerBigBox" v-if="componentStyle==3">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
    <!-- 样式4 -->
    <div class="bannerBigBox" v-if="componentStyle==4">
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
    </div>
    <!-- 样式5 -->
    <div class="bannerBigBox" v-if="componentStyle==5">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
    <!-- 样式6 -->
    <div class="bannerBigBox" v-if="componentStyle==6">
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
    </div>
    <!-- 样式7 -->
    <div class="bannerBigBox" v-if="componentStyle==7">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
    <!-- 样式8 -->
    <div class="bannerBigBox" v-if="componentStyle==8">
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
    </div>
    <!-- 样式9 -->
    <div class="bannerBigBox" v-if="componentStyle==9">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
    <!-- 样式10 -->
    <div class="bannerBigBox" v-if="componentStyle==10">
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
    </div>
    <!-- 样式11 -->
    <div class="bannerBigBox" v-if="componentStyle==11">
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
    </div>
    <!-- 样式12 -->
    <div class="bannerBigBox" v-if="componentStyle==12">
        <div class="NewsListBox">
            <!--皮肤5-->
            <div v-if="skinId==5">
                <listStyle5
                    :componentStyle="templateData[0].component_style" 
                    :templateData="templateData[0].componentData.data.textnum" 
                />
            </div>
        </div>
        <div class="bannerLayerBox">
            <!--轮播图皮肤1-->
            <swiperStyle1 
                :skinId="skinId" 
                :templateData="templateData[0].componentData.data.imgnum" 
            />
        </div>
    </div>
</template>

<script setup>
//轮播图组件皮肤1
import swiperStyle1 from '@/components/template/component/banner/swiper/720x450/1.vue'
//列表组件皮肤1
import listStyle5 from '@/components/template/component/banner/list/450x405/5.vue'
//暂无数据
import nodata from '@/components/template/component/public/nodata.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
const componentStyle = computed(()=>{
    return props.templateData[0].component_style
})
</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>