admin_home/src/layout/components/template/pages/index/sector.vue

<template>
    <div class="sectorBox">
        <div 
            v-if="this.$store.state.template.sectorList.adSector"
            class="sectorItemBox" 
            @click="addModule('adSector', 12, adSector)"
            @drag="drag('adSector', 12, adSector)" 
            @dragend="dragend('adSector', 12, adSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.adSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.adSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.adSector.sectorName}}</div>
        </div>
        <div 
            v-if="this.$store.state.template.sectorList.headLineSector"
            class="sectorItemBox" 
            @click="addModule('headLineSector', 17, headLineSector)" 
            @drag="drag('headLineSector', 17, headLineSector)"
            @dragend="dragend('headLineSector', 17, headLineSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.headLineSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.headLineSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.headLineSector.sectorName}}</div>
        </div>
        <!-- 首页轮播图 -->
        <div 
            v-if="this.$store.state.template.sectorList.bannerSector"
            class="sectorItemBox" 
            @click="addModule('bannerSector', 44, bannerSector)"
            @drag="drag('bannerSector', 44, bannerSector)" 
            @dragend="dragend('bannerSector', 44, bannerSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.bannerSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.bannerSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.bannerSector.sectorName}}</div>
        </div>
        <!-- 首页轮播图新版式 -->
        <div 
            v-if="this.$store.state.template.sectorList.bannerSectorMerge"
            class="sectorItemBox" 
            @click="addModule('bannerSectorMerge', 44, bannerSectorMerge)"
            @drag="drag('bannerSectorMerge', 44, bannerSectorMerge)" 
            @dragend="dragend('bannerSectorMerge', 44, bannerSectorMerge)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.bannerSectorMerge.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.bannerSectorMerge.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.bannerSectorMerge.sectorName}}</div>
        </div>
        <!-- 外链面板 start -->
        <div 
            v-if="this.$store.state.template.sectorList.linkSector"
            class="sectorItemBox" 
            @click="addModule('linkSector', 26, linkSector)"
            @drag="drag('linkSector', 26, linkSector)" 
            @dragend="dragend('linkSector', 26, linkSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.linkSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.linkSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.linkSector.sectorName}}</div>
        </div>
        <!-- 外链面板 end -->

        <!-- 新外链面板 start -->
        <div 
            v-if="this.$store.state.template.sectorList.linkCxfwSector"
            class="sectorItemBox" 
            @click="addModule('linkCxfwSector', 28, linkCxfwSector)"
            @drag="drag('linkCxfwSector', 28, linkCxfwSector)" 
            @dragend="dragend('linkCxfwSector', 28, linkCxfwSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.linkCxfwSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.linkCxfwSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.linkCxfwSector.sectorName }}</div>
        </div>
        <!-- 新外链面板 end -->
        <div 
            v-if="this.$store.state.template.sectorList.manyPictureSector"
            class="sectorItemBox" 
            @click="addModule('manyPictureSector', 47, manyPictureSector)"
            @drag="drag('manyPictureSector', 47, manyPictureSector)"
            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.manyPictureSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.manyPictureSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.manyPictureSector.sectorName}}</div>
        </div>
        <div 
            v-if="this.$store.state.template.sectorList.commentSector"
            class="sectorItemBox"
            @click="addModule('commentSector', 47, commentSector)"
            @drag="drag('commentSector', 47, commentSector)" 
            @dragend="dragend('commentSector', 47, commentSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.commentSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.commentSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.commentSector.sectorName}}</div>
        </div>
        <div 
            v-if="this.$store.state.template.sectorList.listSector"
            class="sectorItemBox" 
            @click="addModule('listSector', 98, listSector)"
            @drag="drag('listSector', 98, listSector)" 
            @dragend="dragend('listSector', 98, listSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.listSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.listSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.listSector.sectorName}}</div>
        </div>
        <div 
            v-if="this.$store.state.template.sectorList.onlyImgSector"
            class="sectorItemBox" 
            @click="addModule('onlyImgSector', 51, onlyImgSector)"
            @drag="drag('onlyImgSector', 51, onlyImgSector)" 
            @dragend="dragend('onlyImgSector', 51, onlyImgSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.onlyImgSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.onlyImgSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.onlyImgSector.sectorName}}</div>
        </div>
        <!--选项卡-->
        <div 
            v-if="this.$store.state.template.sectorList.newsTabsSector"
            class="sectorItemBox" 
            @click="addModule('newsTabsSector', 38, newsTabsSector)"
            @drag="drag('newsTabsSector', 38, newsTabsSector)" 
            @dragend="dragend('newsTabsSector', 38, newsTabsSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTabsSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTabsSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsTabsSector.sectorName}}</div>
        </div>
        <!--选项卡_广告混合通栏-->
        <div 
            v-if="this.$store.state.template.sectorList.newsTabsAdSector"
            class="sectorItemBox" 
            @click="addModule('newsTabsAdSector', 40, newsTabsAdSector)"
            @drag="drag('newsTabsAdSector', 40, newsTabsAdSector)"
            @dragend="dragend('newsTabsAdSector', 40, newsTabsAdSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTabsAdSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTabsAdSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.newsTabsAdSector.sectorName }}</div>
        </div>
        <!-- 单个资讯通栏带标题 -->
        <div 
            v-if="this.$store.state.template.sectorList.NewsHyjjSector"
            class="sectorItemBox" 
            @click="addModule('NewsHyjjSector', 56, NewsHyjjSector)"
            @drag="drag('NewsHyjjSector', 56, NewsHyjjSector)" 
            @dragend="dragend('NewsHyjjSector', 56, NewsHyjjSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.NewsHyjjSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.NewsHyjjSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.NewsHyjjSector.sectorName }}</div>
        </div>
        <!-- 文字资讯通栏1 -->
        <div 
            v-if="this.$store.state.template.sectorList.newsTextSector"
            class="sectorItemBox" 
            @click="addModule('newsTextSector', 43, newsTextSector)"
            @drag="drag('newsTextSector', 43, newsTextSector)"
            @dragend="dragend('newsTextSector', 43, newsTextSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTextSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTextSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsTextSector.sectorName}}</div>
        </div>
        <!-- 选项卡文字通栏 -->
        <div 
            v-if="this.$store.state.template.sectorList.newsTabsTextSector"
            class="sectorItemBox" 
            @click="addModule('newsTabsTextSector', 28, newsTabsTextSector)"
            @drag="drag('newsTabsTextSector', 28, newsTabsTextSector)" 
            @dragend="dragend('newsTabsTextSector', 28, newsTabsTextSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTabsTextSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTabsTextSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsTabsTextSector.sectorName}}</div>
        </div>
        <!-- 图片通栏 -->
        <div 
            v-if="this.$store.state.template.sectorList.newsAllPictureSector"
            class="sectorItemBox" 
            @click="addModule('newsAllPictureSector', 41, newsAllPictureSector)"
            @drag="drag('newsAllPictureSector', 41, newsAllPictureSector)" 
            @dragend="dragend('newsAllPictureSector', 41, newsAllPictureSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsAllPictureSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsAllPictureSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.newsAllPictureSector.sectorName }}</div>
        </div>
        <!-- 皮肤6 带标题带选项卡图文组合 -->
        <div 
            v-if="this.$store.state.template.sectorList.newsTextTabsSector"
            class="sectorItemBox" 
            @click="addModule('newsTextTabsSector', 47, newsTextTabsSector)"
            @drag="drag('newsTextTabsSector', 47, newsTextTabsSector)" 
            @dragend="dragend('newsTextTabsSector', 47, newsTextTabsSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTextTabsSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTextTabsSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.newsTextTabsSector.sectorName }}</div>
        </div>
        <!-- 皮肤6 选项卡图文组合通栏 -->
        <div 
            v-if="this.$store.state.template.sectorList.TabsTextPhotoSector"
            class="sectorItemBox" 
            @click="addModule('TabsTextPhotoSector', 51, TabsTextPhotoSector)"
            @drag="drag('TabsTextPhotoSector', 51, TabsTextPhotoSector)" 
            @dragend="dragend('TabsTextPhotoSector', 51, TabsTextPhotoSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.TabsTextPhotoSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.TabsTextPhotoSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.TabsTextPhotoSector.sectorName }}</div>
        </div>
        <!--皮肤6 带标题的混合通栏 -->
        <div 
            v-if="this.$store.state.template.sectorList.newsTitleTabsSector"
            class="sectorItemBox" 
            @click="addModule('newsTitleTabsSector', 58, newsTitleTabsSector)"
            @drag="drag('newsTitleTabsSector', 58, newsTitleTabsSector)" 
            @dragend="dragend('newsTitleTabsSector', 58, newsTitleTabsSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTitleTabsSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTitleTabsSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.newsTitleTabsSector.sectorName }}</div>
        </div>
        <!-- 皮肤6 选项卡图文组合通栏2 -->
         <div 
            v-if="this.$store.state.template.sectorList.TabsTextPhotoTwo"
            class="sectorItemBox" 
            @click="addModule('TabsTextPhotoTwo', 51, TabsTextPhotoTwo)"
            @drag="drag('TabsTextPhotoTwo', 51, TabsTextPhotoTwo)" 
            @dragend="dragend('TabsTextPhotoTwo', 51, TabsTextPhotoTwo)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.TabsTextPhotoTwo.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.TabsTextPhotoTwo.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.TabsTextPhotoTwo.sectorName }}</div>
        </div>
        <!-- 皮肤6 纯图片选项卡通栏 -->
         <div 
            v-if="this.$store.state.template.sectorList.photoTabsSector"
            class="sectorItemBox" 
            @click="addModule('photoTabsSector', 46, photoTabsSector)"
            @drag="drag('photoTabsSector', 46, photoTabsSector)" 
            @dragend="dragend('photoTabsSector', 46, photoTabsSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.photoTabsSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false, '')">
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.photoTabsSector.sectorImg" />
            </div>
            <div class="sectorItemTitle">{{ this.$store.state.template.sectorList.photoTabsSector.sectorName }}</div>
        </div>
        <!-- <div 
            class="sectorItemBox" 
            @click="addModule('adSector', 12, adSector)"
            @drag="drag('adSector', 12, adSector)" 
            @dragend="dragend('adSector', 12, adSector)"
            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png')"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">通栏广告</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('headLineSector', 17, headLineSector)" 
            @drag="drag('headLineSector', 17, headLineSector)"
            @dragend="dragend('headLineSector', 17, headLineSector)"
            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png')"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750819803899738.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">网站头条</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('bannerSector', 44, bannerSector)"
            @drag="drag('bannerSector', 44, bannerSector)" 
            @dragend="dragend('bannerSector', 44, bannerSector)"
            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png')"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750819938475436.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">焦点图</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('linkSector', 26, linkSector)"
            @drag="drag('linkSector', 26, linkSector)" 
            @dragend="dragend('linkSector', 26, linkSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250709/1752025989873169.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750921543723236.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">外链面板</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('manyPictureSector', 47, manyPictureSector)"
            @drag="drag('manyPictureSector', 47, manyPictureSector)"
            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749085058737998.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/175082020060857.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">新闻图文组合1</div>
        </div>
        <div 
            class="sectorItemBox"
            @click="addModule('commentSector', 47, commentSector)"
            @drag="drag('commentSector', 47, commentSector)" 
            @dragend="dragend('commentSector', 47, commentSector)">
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749170683104422.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820111536544.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">新闻图文组合2</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('listSector', 98, listSector)"
            @drag="drag('listSector', 98, listSector)" 
            @dragend="dragend('listSector', 98, listSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820339495190.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">新闻图文组合3</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('onlyImgSector', 51, onlyImgSector)"
            @drag="drag('onlyImgSector', 51, onlyImgSector)" 
            @dragend="dragend('onlyImgSector', 51, onlyImgSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820413450978.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">带广告新闻组合</div>
        </div> -->


        
        <!-- 皮肤7-通栏版式-带选项卡图文组合 newsTextTabsImgSector 热点关注-->
        <div 
            v-if="this.$store.state.template.sectorList.newsTextTabsImgSector"
            class="sectorItemBox" 
            @click="addModule('newsTextTabsImgSector', 118, newsTextTabsImgSector)"
            @drag="drag('newsTextTabsImgSector', 118, newsTextTabsImgSector)" 
            @dragend="dragend('newsTextTabsImgSector', 118, newsTextTabsImgSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsTextTabsImgSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsTextTabsImgSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsTextTabsImgSector.sectorName}}</div>
        </div>
        
        <!-- 皮肤7-通栏版式-带选项卡图文组合 -->




    </div>
</template>

<script>

export default {
    props: {
        type: {

        },
    },
    data() {
        return {
            sectorData: [],
            //模块1通栏广告模块 start---------------------------------------->
            adSector: {
                "sectorName": "adSector",//板块名称
                "componentList": [
                    {
                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
                        "component_style": 1,//组件选择了哪个样式
                        "sort": 1,
                        "componentData": {}
                    }
                ],
                "ad": {
                    "width": 1200, //宽度
                    "height": 90, //高度
                    "name": "",//广告名称
                    "price": 0,//价格
                    "introduce": "",//介绍
                    "website_id": "",//网站id
                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                    "typeid": 2,//广告类型 - 2 图片
                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                }
            },
            //添加通栏广告模块 start---------------------------------------->

            //添加头条广告模块 start---------------------------------------->
            headLineSector: {
                "sectorName": "headLineSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "level": 1,
                            "imgSize": 0,
                            "textSize": 4,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //添加头条广告模块 start---------------------------------------->

            //添加banner模块 start---------------------------------------->
            bannerSector: {
                "sectorName": "bannerSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "level": 2,
                            "imgSize": 5,
                            "textSize": 0,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 2,//排序位置
                        "componentData": {
                            "level": 6,
                            "imgSize": 0,
                            "textSize": 10,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //添加banner模块 end---------------------------------------->

            //新banner模块 start---------------------------------------->
            bannerSectorMerge: {
                "sectorName": "bannerSectorMerge",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "level": 2,
                            "imgSize": 5,
                            "textSize": 7,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //新banner模块 end---------------------------------------->

            //两列新闻组合模块1 start---------------------------------------->
            manyPictureSector: {
                "sectorName": "manyPictureSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 3,
                            "textSize": 9,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 3,
                            "textSize": 6,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //两列新闻组合模块1 end---------------------------------------->

            //两列新闻组合模块2 end---------------------------------------->
            commentSector: {
                "sectorName": "commentSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 2,
                            "textSize": 12,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 1,
                            "textSize": 3,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //两列新闻组合模块2 end---------------------------------------->

            //两列新闻组合模块3 start---------------------------------------->
            listSector: {
                "sectorName": "listSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 2,
                            "textSize": 6,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 2,
                            "textSize": 14,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 3,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 7,
                            "textSize": 0,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //两列新闻组合模块3 end---------------------------------------->

            //带广告新闻组合 start---------------------------------------->
            onlyImgSector: {
                "sectorName": "onlyImgSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 3,
                            "textSize": 4,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                ],
                "ad": {
                    "width": 450, //宽度
                    "height": 290, //高度
                    "name": "",//广告名称
                    "price": 0,//价格
                    "introduce": "",//介绍
                    "website_id": "",//网站id
                    "thumb": "http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png",//示例图 - 默认值
                    "typeid": 2,//广告类型 - 2 图片
                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                }
            },
            //带广告新闻组合 end---------------------------------------->

            //外链面板 start---------------------------------------->
            linkSector: {
                "sectorName": "linkSector",
                "componentList": [
                    {
                        "component_type": 3,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {}
                    }
                ]
            },
            //外链面板 end---------------------------------------->

            // 新外链面板 start---------------------------------------->
            linkCxfwSector: {
                "sectorName": "linkCxfwSector",
                "componentList": [
                    {
                        "component_type": 3,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {}
                    }
                ]
            },
            //新外链面板 end---------------------------------------->

            //添加通栏广告模块 start---------------------------------------->
            globalAdSector: {
                "sectorName": "globalAdSector",
                "componentList": [
                    {
                        "component_type": 2,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {}
                    }
                ]
            },
            //添加通栏广告模块 end---------------------------------------->

            //选项卡-带热点新闻 start---------------------------------------->
            newsTabsSector: {
                "sectorName": "newsTabsSector",
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告 3=全局广告 4=选项卡
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 0,
                            "textSize": 5,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        },
                    },
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告 3=全局广告 4=选项卡
                        "component_style": 1,
                        "sort": 2,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 5,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 5,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            //选项卡-带热点新闻 end---------------------------------------->

            // 选项卡-广告混合通栏 start---------------------------------------->
            newsTabsAdSector: {
                "sectorName": "newsTabsAdSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 6,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 6,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ],
                "ad": [
                    {
                        "width": 380, //宽度
                        "height": 148, //高度
                        "name": "",//广告名称
                        "price": 0,//价格
                        "introduce": "",//介绍
                        "website_id": "",//网站id
                        "thumb": "http://192.168.1.234:19000/pre/image/jpeg/20251224/1766536894928122.jpg",//示例图 - 默认值
                        "typeid": 2,//广告类型 - 2 图片
                        "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                    },
                    {
                        "width": 380, //宽度
                        "height": 148, //高度
                        "name": "",//广告名称
                        "price": 0,//价格
                        "introduce": "",//介绍
                        "website_id": "",//网站id
                        "thumb": "http://192.168.1.234:19000/pre/image/jpeg/20251224/1766536894928122.jpg",//示例图 - 默认值
                        "typeid": 2,//广告类型 - 2 图片
                        "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                    }
                ]
            },
            // 选项卡-广告混合通栏 end---------------------------------------->
            // 单个资讯通栏带标题  start---------------------------------------->
            NewsHyjjSector: {
                "sectorName": "NewsHyjjSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 1,
                            "textSize": 9,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        },
                    },
                ],
            },
            // 单个资讯通栏带标题 end---------------------------------------->
            // 文字资讯通栏1 start---------------------------------------->
            newsTextSector: {
                "sectorName": "newsTextSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 0,
                            "textSize": 6,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 0,
                            "textSize": 6,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            // 文字资讯通栏1 end---------------------------------------->
            //选项卡-带热点新闻 start---------------------------------------->
            newsTabsTextSector: {
                "sectorName": "newsTabsTextSector",//板块名称
                "componentList": [
                    {
                        "component_type": 4,//组件类型 1=新闻 2=广告 3=全局广告 4=选项卡
                        "component_style": 1,
                        "sort": 1,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 5,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 5,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 5,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 5,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            //选项卡-带热点新闻 end---------------------------------------->
            // 单个图片通栏  start---------------------------------------->
            newsAllPictureSector: {
                "sectorName": "newsAllPictureSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 7,
                            "textSize": 0,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        },
                    },
                ],
            },
            // 单个资讯通栏带标题 end---------------------------------------->
            // 带标题带选项卡图文组合  start---------------------------------------->
            newsTextTabsSector: {
                "sectorName": "newsTextTabsSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 0,
                            "textSize": 6,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "请选择导航..",
                            "level": "",
                            "imgSize": 2,
                            "textSize": 3,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告 3=全局广告 4=选项卡
                        "component_style": 1,
                        "sort": 3,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 1,
                                "textSize": 0,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 1,
                                "textSize": 0,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            // 带标题带选项卡图文组合 end---------------------------------------->
            // 皮肤6 选项卡图文组合通栏 start---------------------------------------->
            TabsTextPhotoSector: {
                "sectorName": "TabsTextPhotoSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 7,
                                "textSize": 8,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 7,
                                "textSize": 8,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            // 皮肤6 选项卡图文组合通栏 end---------------------------------------->
            // 皮肤6 带标题的混合通栏 start---------------------------------------->
            newsTitleTabsSector: {
                "sectorName": "newsTitleTabsSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 4,
                                "textSize": 12,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 4,
                                "textSize": 12,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            // 皮肤6 带标题的混合通栏 end---------------------------------------->
            // 皮肤6 选项卡图文组合通栏 start---------------------------------------->
            TabsTextPhotoTwo: {
                "sectorName": "TabsTextPhotoTwo",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 5,
                                "textSize": 12,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 5,
                                "textSize": 12,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            // 皮肤6 选项卡图文组合通栏 end---------------------------------------->
            // 皮肤6 纯图片选项卡通栏 start---------------------------------------->
            photoTabsSector: {
                "sectorName": "photoTabsSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 5,
                                "textSize": 0,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 5,
                                "textSize": 0,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                ]
            },
            // 皮肤6 纯图片选项卡通栏 end---------------------------------------->

            
            //选项卡-新闻图文组合4-皮肤7 start-  热点关注--------------------------------------->
            newsTextTabsImgSector: {
                "sectorName": "newsTextTabsImgSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 
                        "component_style": 1,
                        "sort": 1,
                        "componentData": 
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 0,
                                "textSize": 10,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                             
                        
                    },
                    {


                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": 
                            {

                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 1,
                                "textSize": 11,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                          
                    },
                    {
                        //选项卡-皮肤7
                        "component_type": 4,
                        "component_style": 1,
                        "sort": 3,
                        "componentData": [
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 3,
                                "textSize": 10,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                            {

                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 3,
                                "textSize": 10,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            }
                        ]
                    },
                    {


                        "component_type": 1,
                        "component_style": 1,
                        "sort": 4,
                        "componentData": 
                            {
                                "category_id": "",
                                "category_arr": "",
                                "name": "请选择导航..",
                                "level": "",
                                "imgSize": 4,
                                "textSize": 8,
                                "child": {
                                    "id": "",
                                    "imgSize": "",
                                    "textSize": ""
                                },
                                "listType": [
                                    "id",
                                    "title",
                                    "imgurl",
                                    "author",
                                    "updated_at",
                                    "introduce",
                                    "islink",
                                    "linkurl",
                                    "copyfrom",
                                    "cat_arr_id",
                                    "catid",
                                    "pinyin"
                                ],
                            },
                    },
                ]
            },


        }
    },
    methods: {
        //添加模块
        addModule(type, h, jsonData) {
            let data = {
                source: "click",//添加方式为点击
                type: type,
                h: h,
                jsonData: jsonData
            }
            console.log(data);
            this.$store.commit('template/addModule', data);
        },
        //拖拽开始
        drag(type, h, jsonData) {
            let data = {
                type: type,
                h: h,
                jsonData: jsonData
            }
            this.$store.commit('template/drag', data);
        },
        //拖拽结束
        dragend(type, h, jsonData) {
            let data = {
                type: type,
                h: h,
                jsonData: jsonData
            }
            this.$store.commit('template/dragend', data);
        },
        //设置组件预览状态
        componentPreviewStatus(status, src) {
            let setData = {
                status: status,
                img: src
            }
            this.$store.commit('template/setComponentPreviewStatus', setData);
        }
    },
    mounted() {
        let data = {
            template_id: this.$route.query.style,
            page_type: 1//1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=底部列表页 7=底部详情页 
        }
        //获得本页的通栏数据
        this.$store.dispatch('template/getAllSector', data)
    }
}
</script>

<style scoped lang="less">
.sectorBox {
    height: 100%;

    .sectorItemBox {
        box-sizing: border-box;
        padding: 0 20px 40px 20px;
        cursor: pointer;

        .sectorItem {
            border: 1px solid #333644;
            padding: 10px;
            border-radius: 8px;

            &:hover {
                background: #333644;
                transform: scale(1.1);
                transition: all 0.2s ease-in-out;
            }

            img {
                display: block;
                width: 100%;
                min-height: 20px;
            }
        }

        .sectorItemTitle {
            color: #fff;
            font-size: 14px;
            padding: 10px 0 0 0;
            text-align: center;
        }
    }
}
</style>