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

<template>
    <div class="sectorBox">
        <div 
            v-if="this.$store.state.template.sectorList.channelMenu"
            class="sectorItemBox" 
            @click="addModule('channelMenu', 13, channelMenu)"
            @drag="drag('channelMenu', 13, channelMenu)" 
            @dragend="dragend('channelMenu', 13, channelMenu)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelMenu.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.channelMenu.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelMenu.sectorName}}</div>
        </div>
        <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.scrollTextSector"
            class="sectorItemBox" 
            @click="addModule('scrollTextSector', 44, scrollTextSector)" 
            @drag="drag('scrollTextSector', 44, scrollTextSector)"
            @dragend="dragend('scrollTextSector', 44, scrollTextSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.scrollTextSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.scrollTextSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.scrollTextSector.sectorName}}</div>
        </div>
        <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.channelNewsSector"
            class="sectorItemBox" 
            @click="addModule('channelNewsSector', 63, channelNewsSector)"
            @drag="drag('channelNewsSector', 63, channelNewsSector)"
            @dragend="dragend('channelNewsSector', 63, channelNewsSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelNewsSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.channelNewsSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelNewsSector.sectorName}}</div>
        </div>
        <!-- 新的新闻图文组合1 -->
        <div 
            v-if="this.$store.state.template.sectorList.newsPhotoSector"
            class="sectorItemBox" 
            @click="addModule('newsPhotoSector', 46, newsPhotoSector)"
            @drag="drag('newsPhotoSector', 46, newsPhotoSector)"
            @dragend="dragend('newsPhotoSector', 46, newsPhotoSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newsPhotoSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newsPhotoSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newsPhotoSector.sectorName}}</div>
        </div>
        <!-- 带标题文字新闻通栏 -->
        <div 
            v-if="this.$store.state.template.sectorList.channelTextSector"
            class="sectorItemBox" 
            @click="addModule('channelTextSector', 53, channelTextSector)"
            @drag="drag('channelTextSector', 53, channelTextSector)"
            @dragend="dragend('channelTextSector', 53, channelTextSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelTextSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.channelTextSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelTextSector.sectorName}}</div>
        </div>
        <!-- 新的新闻图文组合2 -->
        <div 
            v-if="this.$store.state.template.sectorList.newListPhotoSector"
            class="sectorItemBox" 
            @click="addModule('newListPhotoSector', 53, newListPhotoSector)"
            @drag="drag('newListPhotoSector', 53, newListPhotoSector)"
            @dragend="dragend('newListPhotoSector', 53, newListPhotoSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.newListPhotoSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.newListPhotoSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.newListPhotoSector.sectorName}}</div>
        </div>
        <!-- 皮肤6 带标题图文组合1 -->
        <div 
            v-if="this.$store.state.template.sectorList.ChannelNewsPhotoSector"
            class="sectorItemBox" 
            @click="addModule('ChannelNewsPhotoSector', 48, ChannelNewsPhotoSector)"
            @drag="drag('ChannelNewsPhotoSector', 48, ChannelNewsPhotoSector)"
            @dragend="dragend('ChannelNewsPhotoSector', 48, ChannelNewsPhotoSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.ChannelNewsPhotoSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.ChannelNewsPhotoSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.ChannelNewsPhotoSector.sectorName}}</div>
        </div>
        <!-- 皮肤6 不带标题的图文组合1 -->
        <div 
            v-if="this.$store.state.template.sectorList.ChannelNewsSector"
            class="sectorItemBox" 
            @click="addModule('ChannelNewsSector', 36, ChannelNewsSector)"
            @drag="drag('ChannelNewsSector', 36, ChannelNewsSector)"
            @dragend="dragend('ChannelNewsSector', 36, ChannelNewsSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.ChannelNewsSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.ChannelNewsSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.ChannelNewsSector.sectorName}}</div>
        </div>
        <!-- 皮肤6 带标题图文组合2 -->
        <div 
            v-if="this.$store.state.template.sectorList.ChannelNewsPhoto"
            class="sectorItemBox" 
            @click="addModule('ChannelNewsPhoto', 45, ChannelNewsPhoto)"
            @drag="drag('ChannelNewsPhoto', 45, ChannelNewsPhoto)"
            @dragend="dragend('ChannelNewsPhoto', 45, ChannelNewsPhoto)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.ChannelNewsPhoto.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.ChannelNewsPhoto.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.ChannelNewsPhoto.sectorName}}</div>
        </div>
        <!-- 皮肤6 不带标题的图文组合2 -->
        <div 
            v-if="this.$store.state.template.sectorList.ChannelNewsAndPhoto"
            class="sectorItemBox" 
            @click="addModule('ChannelNewsAndPhoto', 51, ChannelNewsAndPhoto)"
            @drag="drag('ChannelNewsAndPhoto', 51, ChannelNewsAndPhoto)"
            @dragend="dragend('ChannelNewsAndPhoto', 51, ChannelNewsAndPhoto)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.ChannelNewsAndPhoto.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.ChannelNewsAndPhoto.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.ChannelNewsAndPhoto.sectorName}}</div>
        </div>
        <!-- <div 
            class="sectorItemBox" 
            @click="addModule('channelMenu', 13, channelMenu)"
            @drag="drag('channelMenu', 13, channelMenu)" 
            @dragend="dragend('channelMenu', 13, channelMenu)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750311785239902.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750839704883892.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">子导航菜单</div>
        </div>
        <div 
            class="sectorItemBox" 
            @click="addModule('adSector', 12, adSector)"
            @drag="drag('adSector', 12, adSector)" 
            @dragend="dragend('adSector', 12, adSector)"
        >
            <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('scrollTextSector', 44, scrollTextSector)" 
            @drag="drag('scrollTextSector', 44, scrollTextSector)"
            @dragend="dragend('scrollTextSector', 44, scrollTextSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750312139660006.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750820773336300.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/1750820905439306.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/1750820973808775.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/1750822186600939.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">新闻图文组合3</div>
        </div> -->



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


        <!-- 14 皮肤7-----热点关注 -->
        <div 
            v-if="this.$store.state.template.sectorList.skinSevenNewsHyjjSector"
            class="sectorItemBox" 
            @click="addModule('skinSevenNewsHyjjSector', 140, skinSevenNewsHyjjSector)"
            @drag="drag('skinSevenNewsHyjjSector', 140, skinSevenNewsHyjjSector)" 
            @dragend="dragend('skinSevenNewsHyjjSector', 140, skinSevenNewsHyjjSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.skinSevenNewsHyjjSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.skinSevenNewsHyjjSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.skinSevenNewsHyjjSector.sectorName}}</div>

        </div>


        <div 
            v-if="this.$store.state.template.sectorList.scrollTextImgSevenSkinchannelSector"
            class="sectorItemBox" 
            @click="addModule('scrollTextImgSevenSkinchannelSector', 51, scrollTextImgSevenSkinchannelSector)"
            @drag="drag('scrollTextImgSevenSkinchannelSector', 51, scrollTextImgSevenSkinchannelSector)" 
            @dragend="dragend('scrollTextImgSevenSkinchannelSector', 51, scrollTextImgSevenSkinchannelSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.scrollTextImgSevenSkinchannelSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.scrollTextImgSevenSkinchannelSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.scrollTextImgSevenSkinchannelSector.sectorName}}</div>
        </div>

        <div 
        
            v-if="this.$store.state.template.sectorList.channelNavigationSector"
            class="sectorItemBox" 
            @click="addModule('channelNavigationSector', 13, channelNavigationSector)"
            @drag="drag('channelNavigationSector', 13, channelNavigationSector)" 
            @dragend="dragend('channelNavigationSector', 13, channelNavigationSector)"
            @mouseenter="componentPreviewStatus(true, $store.state.template.sectorList.channelNavigationSector.sectorImg)"
            @mouseleave="componentPreviewStatus(false,'')"
        >
            <div class="sectorItem">
                <img :src="this.$store.state.template.sectorList.channelNavigationSector.sectorImg"/>
            </div>
            <div class="sectorItemTitle">{{this.$store.state.template.sectorList.channelNavigationSector.sectorName}}</div>
        </div>
        


    </div>
</template>

<script>

export default {
    props: {
        type: {

        },
    },
    data() {
        return {
            //模块1频道菜单 start---------------------------------------->
            channelMenu: {
                "sectorName": "channelMenu",//板块名称
                "componentList": [
                    {
                        "component_type": 3,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 3=静态组件
                        "component_style": 1,//组件选择了哪个版式
                        "sort": 1,
                        "componentData": {}
                    }
                ],
            },
            //模块1频道菜单 end---------------------------------------->


            //模块2通栏广告模块 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
                }
            },
            //模块2栏广告模块 end---------------------------------------->

            //模块3滚动图文组合 start---------------------------------------->
            scrollTextSector: {
                "sectorName": "scrollTextSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"自动生成",
                            "level": "",
                            "imgSize": 5,
                            "textSize": 9,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                ]
            },
            //模块3滚动图文组合 end---------------------------------------->

            //模块4两列新闻组合模块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"
                            ],
                        }
                    }
                ]
            },
            //模块4两列新闻组合模块1 end---------------------------------------->

            //模块5两列新闻组合模块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"
                            ],
                        }
                    }
                ]
            },
            //模块5两列新闻组合模块2 end---------------------------------------->

            //模块5两列新闻组合模块3 start---------------------------------------->
            listSector: {
                sectorName: "listSector",//板块名称
                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"
                            ],
                        }
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 3,
                        "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"
                            ],
                        }
                    }
                ]
            },
            //模块5两列新闻组合模块3 end---------------------------------------->

            //模块6带标题新闻图文组合 start---------------------------------------->
            channelNewsSector: {
                sectorName: "channelNewsSector",//板块名称
                componentList: [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"自动生成",
                            "level":"",
                            "imgSize": 5,
                            "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": 5,
                            "textSize": 5,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //模块6带标题新闻图文组合 end---------------------------------------->

            //模块7新的新闻图文组合1 start---------------------------------------->
            newsPhotoSector: {
                "sectorName": "newsPhotoSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "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"
                            ],
                        }
                    },
                ]
            },
            //模块7新的新闻图文组合1 end---------------------------------------->

            //模块8带标题文字新闻通栏 start---------------------------------------->
            channelTextSector: {
                sectorName: "channelTextSector",//板块名称
                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"
                            ],
                        }
                    }
                ]
            },
            //模块8带标题文字新闻通栏 end---------------------------------------->

            //模块9新的新闻图文组合2 start---------------------------------------->
            newListPhotoSector: {
                sectorName: "newListPhotoSector",//板块名称
                componentList: [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"自动生成",
                            "level":"",
                            "imgSize": 2,
                            "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": 2,
                            "textSize": 5,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //模块9新的新闻图文组合2 end---------------------------------------->

            //模块10 皮肤6 带标题新闻图文组合1 start---------------------------------------->
            ChannelNewsPhotoSector: {
                sectorName: "ChannelNewsPhotoSector",//板块名称
                componentList: [
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "componentData": {
                            "category_id":"",
                            "category_arr":"",
                            "name":"自动生成",
                            "level":"",
                            "imgSize": 2,
                            "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": 2,
                            "textSize": 5,
                            "child":{
                                "id":"",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    }
                ]
            },
            //模块10 皮肤6 带标题新闻图文组合1 end---------------------------------------->

            //模块11 皮肤6不带标题图文组合1 start---------------------------------------->
            ChannelNewsSector: {
                "sectorName": "ChannelNewsSector",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "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"
                            ],
                        }
                    },
                ]
            },
            //模块11 皮肤6不带标题图文组合1 end---------------------------------------->

            //模块12 皮肤6 带标题新闻图文组合1 start---------------------------------------->
            ChannelNewsPhoto: {
                sectorName: "ChannelNewsPhoto",//板块名称
                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,
                        "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"
                            ],
                        }
                    }
                ]
            },
            //模块12 皮肤6 带标题新闻图文组合1 end---------------------------------------->

            //模块13 皮肤6不带标题图文组合2 start---------------------------------------->
            ChannelNewsAndPhoto: {
                "sectorName": "ChannelNewsAndPhoto",//板块名称
                "componentList": [
                    {
                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "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"
                            ],
                        }
                    },
                ]
            },
            //模块13 皮肤6不带标题图文组合2 end---------------------------------------->

            
            //选项卡-新闻图文组合4-皮肤7 start-行业聚焦--------------------------------------->
            newsTextTabsImgSectorClass: {
                "sectorName": "newsTextTabsImgSectorClass",//板块名称
                "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": 3,
                            "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,
                        "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"
                            ],
                        }
                    },
                    {
                        "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"
                            ],
                        }
                    }
                ]
            },
            // 皮肤7-热点关注
            skinSevenNewsHyjjSector: {

                "sectorName": "skinSevenNewsHyjjSector",//板块名称
                "componentList": [
                    {

                        "component_type": 1,
                        "component_style": 1,
                        "sort": 1,
                        "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"
                            ],
                        },
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "自动生成",
                            "level": "",
                            "imgSize": 3,
                            "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,
                        "component_style": 1,
                        "sort": 3,
                        "componentData": {
                            "category_id": "",
                            "category_arr": "",
                            "name": "自动生成",
                            "level": "",
                            "imgSize": 10,
                            "textSize": 10,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        },
                    },
                
                ],
            },
            
            //新banner模块 皮肤7 轮播图 start---------------------------------------->
            scrollTextImgSevenSkinchannelSector: {

                "sectorName": "scrollTextImgSevenSkinchannelSector",//板块名称
                 "componentList": [
                    {

                        "component_type": 1,//组件类型 1=新闻 2=广告
                        "component_style": 1,//该组件使用哪个展示样式
                        "sort": 1,//排序位置
                        "componentData": {
                            "name": "自动选择",
                            "level": 2,
                            "imgSize": 6,
                            "textSize": 9,
                            "child": {
                                "id": "",
                                "imgSize": "",
                                "textSize": ""
                            },
                            "listType": [
                                "id",
                                "title",
                                "imgurl",
                                "author",
                                "updated_at",
                                "introduce",
                                "islink",
                                "linkurl",
                                "copyfrom",
                                "cat_arr_id",
                                "catid",
                                "pinyin"
                            ],
                        }
                    },
                     
                ]
            },
                          
            //皮肤7模块1频道菜单 start----------------------------------------channelMenu>
            channelNavigationSector: {
                "sectorName": "channelNavigationSector",//板块名称
                "componentList": [
                    {
                        "component_type": 3,// 子导航菜单
                        "component_style": 1,//组件选择了哪个版式
                        "sort": 1,
                        "componentData": {}
                    }
                ],
            },     
        }
    },
    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: 2//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>