<template>
    <div class="channelNewsSectorBox">
        <div>
            <div class="clearfix">
                <div>
                    <div class="index_1_top_box">
                        <h4 class="index_1_top_h4">
                            <span>行业聚焦</span>
                        </h4>
                    </div>
                </div>
                <div class="clearfix min_1200">
                    <div class="left_box_1">
                        <left1Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style" 
                        />
                    </div>
                    <div class="min_box_1">
                        <center1Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style" 
                        />
                    </div>
                    <div class="right_box_1">
                        <right1Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style" 
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//左侧组件皮肤1
import left1Style from '@/components/template/component/list/380x610/1.vue'
//中间组件皮肤1
import center1Style from '@/components/template/component/list/380x610/1_1.vue'
//右侧组件皮肤1
import right1Style from '@/components/template/component/list/380x610/1_2.vue'

//暂无数据
import nodata from '@/components/template/component/public/nodata.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData: Object,//新闻数据
});
//该栏目下有两个组件 此时需要提供children_count来判断是否跳转到频道页
const componentTitle1 = {
    alias: props.templateData[0].componentData.data.alias,
    aLIas_pinyin: props.templateData[0].componentData.data.pinyin,
    is_url: props.templateData[0].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[0].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[0].componentData.data.category_id
}
const componentTitle2 = {
    alias: props.templateData[1].componentData.data.alias,
    aLIas_pinyin: props.templateData[1].componentData.data.pinyin,
    is_url: props.templateData[1].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[1].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[1].componentData.data.category_id
}
const componentTitle3 = {
    alias: props.templateData[2].componentData.data.alias,
    aLIas_pinyin: props.templateData[2].componentData.data.pinyin,
    is_url: props.templateData[2].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[2].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[2].componentData.data.category_id
}
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.channelNewsSectorBox {
    width: 100%;
    height: 720px;
    box-sizing: content-box;
    margin-bottom: 30px;
    .channelNewsSector {
        width: 1200px;
        height: 600px;
        margin: 0 auto;
        .channelNewsSectorTitle {
            width: 1200px;
            height: 70px;
            line-height: 70px;
            margin-bottom: 30px;
        }
        .channelNewsSectorContent {
            width: 100%;
            height: 500px;
            display: flex;
            .channelNewsSectorLeft {
                width: 585px;
                height: 496px;
                position: relative;
                margin-right: 30px;
            }
            .channelNewsSectorRight {
                width: 585px;
                height: 496px;
                position: relative;
            }
        }
    }
}
.min_1200 {
    width: 1200px;
    margin: 0px auto;
    height: 720px;
    display: block;
}
.clearfix {
    overflow: hidden;
}
.box_line_1,
.box_line_2,
.box_line_3,
.box_line_4,
.box_line_5,
.box_line_6 {
    border: dashed 2px #999;
    box-sizing: border-box;
}
.box_line_2 {
    border-left: none;
    border-bottom: none;
    border-top: none;
}
.box_line_3 {
    border-bottom: none;
    border-top: none;
}
.box_line_4 {
    border-right: none;
    border-bottom: none;
    border-top: none;
}
.box_line_5 {
    border-right: none;
    border-bottom: none;
    border-top: none;
}
.box_line_6 {
    border-right: none;
    border-left: none;
    border-top: none;
}
.left_box_1 {
    width: 380px;
    height: 610px;
    position: relative;
    float: left;
    margin-right: 28px;
    overflow: hidden;
}
.min_box_1 {
    width: 380px;
    height: 610px;
    position: relative;
    float: left;
    overflow: hidden;
}
.right_box_1 {
    width: 380px;
    height: 610px;
    position: relative;
    float: right;
    overflow: hidden;
}
.index_1_top_box {
    height: 42px;
    text-align: center;
    margin: 20px auto 34px;
}
.index_1_top_h4 {
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 0px 20px;
    margin: 0px auto;
}
.index_1_top_h4::after {
    content: '';
    position: absolute;
    left: -440px;
    top: 14px;
    height: 20px;
    width: 440px;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px;
    background-size: auto 100%;
}
.index_1_top_h4::before {
    content: '';
    position: absolute;
    right: -440px;
    top: 14px;
    height: 20px;
    width: 440px;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px;
    background-size: auto 100%;

}
.index_1_top_box>* {
    text-align: center;
    height: 42px;
    line-height: 42px;
    color: #333;
    font-size: 32px;
    font-weight: normal;
}
//基本样式 end ---------------------------------------->
</style>
