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

<template>
    <!-- 样式1 -->
    <div class="bannerBigBox" v-if="componentStyle == 1">
        <div class="bannerLayerBox">
            <swiperStyle1 :skinId="skinId" :templateData="templateData[0].componentData.data.imgnum" />
        </div>
        <div class="NewsListBox">
            <div>
                <listStyle6 :componentStyle="templateData[0].component_style"
                    :templateData="templateData[0].componentData.data.textnum" />
            </div>
        </div>
    </div>
    <!-- 样式2 -->
    <div class="bannerBigBox" v-if="componentStyle == 2">
        <div class="bannerLayerBox">
            <swiperStyle1 :skinId="skinId" :templateData="templateData[0].componentData.data.imgnum" />
        </div>
        <div class="NewsListBox">
            <div>
                <listStyle6 :componentStyle="templateData[0].component_style"
                    :templateData="templateData[0].componentData.data.textnum" />
            </div>
        </div>
    </div>
    <!-- 样式3 -->
    <div class="bannerBigBox" v-if="componentStyle == 3">
        <div class="NewsListBox">
            <div>
                <listStyle6 :componentStyle="templateData[0].component_style"
                    :templateData="templateData[0].componentData.data.textnum" />
            </div>
        </div>
        <div class="bannerLayerBox">
            <swiperStyle1 :skinId="skinId" :templateData="templateData[0].componentData.data.imgnum" />
        </div>
    </div>
    <!-- 样式4 -->
    <div class="bannerBigBox" v-if="componentStyle == 4">
        <div class="NewsListBox">
            <div>
                <listStyle6 :componentStyle="templateData[0].component_style"
                    :templateData="templateData[0].componentData.data.textnum" />
            </div>
        </div>
        <div class="bannerLayerBox">
            <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 listStyle6 from '@/components/template/component/banner/list/450x405/6.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>