完成自助建站频道页开发

完成自助建站频道页开发

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

@@ -2,36 +2,36 @@
     <div class="sectorBox">
         <div 
             class="sectorItemBox" 
-            @click="addModule('adSector', 12, adSector)"
-            @drag="drag('adSector', 12, adSector)" 
-            @dragend="dragend('adSector', 12, adSector)"
+            @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/png/20250604/1748998088187321.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750311785239902.jpg" />
             </div>
-            <div class="sectorItemTitle">通栏广告</div>
+            <div class="sectorItemTitle">子导航菜单</div>
         </div>
         <div 
             class="sectorItemBox" 
-            @click="addModule('headLineSector', 17, headLineSector)" 
-            @drag="drag('headLineSector', 17, headLineSector)"
-            @dragend="dragend('headLineSector', 17, headLineSector)"
+            @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/20250603/1748914467583559.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
             </div>
-            <div class="sectorItemTitle">网站头条</div>
+            <div class="sectorItemTitle">通栏广告</div>
         </div>
         <div 
             class="sectorItemBox" 
-            @click="addModule('bannerSector', 44, bannerSector)"
-            @drag="drag('bannerSector', 44, bannerSector)" 
-            @dragend="dragend('bannerSector', 44, bannerSector)"
+            @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/png/20250604/174899892158949.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750312139660006.jpg" />
             </div>
-            <div class="sectorItemTitle">焦点图</div>
+            <div class="sectorItemTitle">滚动图文组合</div>
         </div>
         <div 
             class="sectorItemBox" 
@@ -65,17 +65,6 @@
             </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" />
-            </div>
-            <div class="sectorItemTitle">带广告新闻组合</div>
-        </div>
     </div>
 </template>
 
@@ -89,7 +78,22 @@ export default {
     },
     data() {
         return {
-            //模块1通栏广告模块 start---------------------------------------->
+            //模块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": [
@@ -112,57 +116,23 @@ export default {
                     "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                 }
             },
-            //添加通栏广告模块 start---------------------------------------->
+            //模块2栏广告模块 end---------------------------------------->
 
-            //添加头条广告模块 start---------------------------------------->
-            headLineSector: {
-                "sectorName": "headLineSector",//板块名称
+            //模块3滚动图文组合 start---------------------------------------->
+            scrollTextSector: {
+                "sectorName": "scrollTextSector",//板块名称
                 "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,
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"自动生成",
+                            "level": "",
                             "imgSize": 5,
-                            "textSize": 0,
+                            "textSize": 9,
                             "child": {
                                 "id": "",
                                 "imgSize": "",
@@ -184,40 +154,11 @@ export default {
                             ],
                         }
                     },
-                    {
-                        "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---------------------------------------->
+            //模块3滚动图文组合 end---------------------------------------->
 
-            //两列新闻组合模块1 start---------------------------------------->
+            //模块4两列新闻组合模块1 start---------------------------------------->
             manyPictureSector: {
                 sectorName: "manyPictureSector",//板块名称
                 componentList: [
@@ -228,7 +169,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 3,
                             "textSize": 9,
@@ -260,7 +201,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 3,
                             "textSize": 6,
@@ -287,9 +228,9 @@ export default {
                     }
                 ]
             },
-            //两列新闻组合模块1 end---------------------------------------->
+            //模块4两列新闻组合模块1 end---------------------------------------->
 
-            //两列新闻组合模块2 end---------------------------------------->
+            //模块5两列新闻组合模块2 end---------------------------------------->
             commentSector: {
                 sectorName: "commentSector",//板块名称
                 componentList: [
@@ -300,7 +241,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 2,
                             "textSize": 12,
@@ -332,7 +273,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 1,
                             "textSize": 3,
@@ -359,9 +300,9 @@ export default {
                     }
                 ]
             },
-            //两列新闻组合模块2 end---------------------------------------->
+            //模块5两列新闻组合模块2 end---------------------------------------->
 
-            //两列新闻组合模块3 start---------------------------------------->
+            //模块5两列新闻组合模块3 start---------------------------------------->
             listSector: {
                 sectorName: "listSector",//板块名称
                 componentList: [
@@ -372,7 +313,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 2,
                             "textSize": 12,
@@ -404,7 +345,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 1,
                             "textSize": 3,
@@ -436,7 +377,7 @@ export default {
                         "componentData": {
                             "category_id":"",
                             "category_arr":"",
-                            "name":"请选择导航..",
+                            "name":"自动生成",
                             "level":"",
                             "imgSize": 1,
                             "textSize": 3,
@@ -463,58 +404,7 @@ export default {
                     }
                 ]
             },
-            //两列新闻组合模块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---------------------------------------->
+            //模块5两列新闻组合模块3 end---------------------------------------->
         }
     },
     methods: {

src/store/modules/template.js

@@ -344,7 +344,14 @@ const mutations = {
             }
         }
         //pageStatus==2 分类页 class
-        if (state.pageStatus == 2) { }
+        if (state.pageStatus == 2) { 
+            if (state.pageData.index.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
         //pageStatus==3 列表页 list
         if (state.pageStatus == 3) { }
         //pageStatus==4 详情页 article
@@ -698,9 +705,8 @@ const mutations = {
         // 取出每个通栏中的广告，并保存到state.webSiteData.ad中
         for (let index in clonedData.data) {
             if(clonedData.data[index].content.ad){
-                let pageName = getPageName();
                 let ad_index = Number(index)+1;
-                let ad_tag = `${state.adKey}_${pageName}_${ad_index}`;
+                let ad_tag = `${state.adKey}_${data.type}_${ad_index}`;
                 clonedData.data[index].content.ad.website_id = state.editWebsiteId;
                 clonedData.data[index].content.ad.ad_tag = ad_tag;
                 state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
@@ -761,13 +767,15 @@ const mutations = {
             // 获得当前页面板块数量
             state.pageDataStatus[pageName].sector = data.data[pageName].length;
             
-            // 获得当前页面没有设置导航池的板块数量
+            // 获得当前页面没有设置导航池的板块数量 - 只检查首页
             let noCid = 0;
-            for(let index in data.data[pageName]){
-                for(let i in data.data[pageName][index].content.componentList){
-                    if(data.data[pageName][index].content.componentList[i].componentData.category_id != undefined){
-                        if(data.data[pageName][index].content.componentList[i].componentData.category_id == ""){
-                            noCid++;
+            if (pageName === 'index') {
+                for(let index in data.data[pageName]){
+                    for(let i in data.data[pageName][index].content.componentList){
+                        if(data.data[pageName][index].content.componentList[i].componentData.category_id != undefined){
+                            if(data.data[pageName][index].content.componentList[i].componentData.category_id == ""){
+                                noCid++;
+                            }
                         }
                     }
                 }
@@ -797,7 +805,7 @@ const mutations = {
             state.pageDataStatus[pageName].adPrice = noAdPrice;
         });
         
-        // 全局广告特殊处理（只处理一次）
+        // 全局广告特殊处理（只处理一次） 全局广告是算到首页里面的
         if(state.webSiteData.ad.top.name == ""){
             state.pageDataStatus.index.ad++;
         }

src/styles/theme/head/style1.less

@@ -57,6 +57,9 @@
                 img{
                     display: block;
                 }
+                .templateEditBtnBox {
+                    right: 0;
+                }
             }
         }
     }

src/views/template/page/pageClass.vue

@@ -16,8 +16,8 @@
                 :auto-size="true"
                 :class="this.$store.state.template.pageData.class.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
                 ref="gridlayout" 
-                :layout="this.$store.state.template.pageData.index"
-                :layout.sync="this.$store.state.template.pageData.index" 
+                :layout="this.$store.state.template.pageData.class"
+                :layout.sync="this.$store.state.template.pageData.class" 
                 :col-num="12" 
                 :row-height="rowHeight"
                 :margin="[0,0]" 
@@ -47,13 +47,13 @@
                         <div v-if="item.type == 'adSector'" class="moduleBox">
                             <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                         <!-- 2.头条通栏 -->
-                         <div v-if="item.type == 'headLineSector'" class="moduleBox">
-                            <headLineSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        <!-- 2.频道菜单 -->
+                        <div v-if="item.type == 'channelMenu'" class="moduleBox">
+                            <channelMenu :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        <!-- 3.焦点图通栏 -->
-                        <div v-if="item.type == 'bannerSector'" class="moduleBox">
-                            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        <!-- 3.滚动图文组合 -->
+                        <div v-if="item.type == 'scrollTextSector'" class="moduleBox">
+                            <scrollTextSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
                         <!-- 4.新闻多图组合1 -->
                         <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
@@ -67,10 +67,6 @@
                         <div v-if="item.type == 'listSector'" class="moduleBox">
                             <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        <!-- 7.带广告新闻组合 -->
-                        <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-                            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div>
                     </div>
                 </grid-item>
             </grid-layout>
@@ -101,21 +97,18 @@ import footerSector from '../style/sector/foot/1.vue';
 //通栏组件 开始：
 //通栏广告
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
-//首页头条
-import headLineSector from '../style/sector/body/index/headLine/1200x140/1.vue';
-//焦点图
-import bannerSector from '../style/sector/body/index/banner/1200x410/1.vue';
 //新闻图文组合1
 import manyPictureSector from '../style/sector/body/index/list/1200x470/1.vue';
 //新闻图文组合2
 import commentSector from '../style/sector/body/index/list/1200x470/2.vue';
 //新闻图文组合3
 import listSector from '../style/sector/body/index/list/1200x980/1.vue';
-//带广告图文组合
-import onlyImgSector from '../style/sector/body/index/list/1200x480/1.vue';
+//频道菜单
+import channelMenu from '../style/sector/body/class/menu/1200x100/1.vue';
+//滚动图文组合
+import scrollTextSector from '../style/sector/body/class/banner/1200x410/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
-
 export default {
     components: {
         GridLayout,//画布
@@ -123,12 +116,11 @@ export default {
         headSector,//全局页头
         menuSector,//全局导航
         adSector,//通栏广告
-        headLineSector,//首页头条
-        bannerSector,//焦点图
         manyPictureSector,//新闻图文组合1
         commentSector,//新闻图文组合2
         listSector,//新闻图文组合3
-        onlyImgSector,
+        channelMenu,//频道菜单
+        scrollTextSector,//滚动图文组合
         footerSector
     },
     data() {

src/views/template/public/checkWindow.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="editWindowBox">
         <div class="checkWindowBoxContent">
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
                 <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.index.cid>0 || this.$store.state.template.pageDataStatus.index.ad>0">
                     <div class="cWBTitle">首页</div>
@@ -11,11 +12,14 @@
                     <div class="cWBStatusContent">
                         <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.cid}}<span>个</span></div>
-                            <div class="cWBStatusContentTitle">缺少广告位名称</div>
-                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.ad}}<span>个</span></div>
-                            <div class="cWBStatusContentTitle">缺少广告位价格</div>
-                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.adPrice}}<span>个</span></div>
+                        <div class="cWBStatusContentItem" v-if="this.$store.state.template.pageDataStatus.index.cid!=0">{{this.$store.state.template.pageDataStatus.index.cid}}<span>个</span></div>
+                        <div class="cWBStatusContentItem" v-else><span class="cWBStatusContentItemSucess">已选择</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem" v-if="this.$store.state.template.pageDataStatus.index.ad!=0">{{this.$store.state.template.pageDataStatus.index.ad}}<span>个</span></div>
+                        <div class="cWBStatusContentItem" v-else><span class="cWBStatusContentItemSucess">已添加</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem" v-if="this.$store.state.template.pageDataStatus.index.adPrice!=0">{{this.$store.state.template.pageDataStatus.index.adPrice}}<span>个</span></div>
+                        <div class="cWBStatusContentItem" v-else><span class="cWBStatusContentItemSucess">已添加</span></div>
                     </div>
                 </div>
                 <div class="cWBStatusContentSucess" v-else>
@@ -34,17 +38,33 @@
                     </div>
                 </div>
             </div>
+            <!--复制 end-->
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
-                <div class="cWBStatusContentSucess">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.class.cid>0 || this.$store.state.template.pageDataStatus.class.ad>0">
+                    <div class="cWBTitle">频道页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-close"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem"><span class="cWBStatusContentItemSucess">已自动选择</span></div>
+                            <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.class.ad}}<span>个</span></div>
+                            <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.class.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
+                <div class="cWBStatusContentSucess" v-else>
                     <div class="cWBTitle">频道页</div>
                     <div class="cWBIcon">
                         <span class="el-icon-check"></span>
                     </div>
                     <div class="cWBStatus">已通过</div>
                     <div class="cWBStatusContent">
-                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
                         <div class="cWBStatusContentItem">0<span>个</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
@@ -52,17 +72,33 @@
                     </div>
                 </div>
             </div>
+            <!--复制 end-->
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
-                <div class="cWBStatusContentSucess">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.list.cid>0 || this.$store.state.template.pageDataStatus.list.ad>0">
+                    <div class="cWBTitle">列表页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-close"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.list.ad}}<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.list.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
+                <div class="cWBStatusContentSucess" v-else>
                     <div class="cWBTitle">列表页</div>
                     <div class="cWBIcon">
                         <span class="el-icon-check"></span>
                     </div>
                     <div class="cWBStatus">已通过</div>
                     <div class="cWBStatusContent">
-                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
                         <div class="cWBStatusContentItem">0<span>个</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
@@ -70,8 +106,25 @@
                     </div>
                 </div>
             </div>
+            <!--复制 end-->
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
-                <div class="cWBStatusContentSucess">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.article.cid>0 || this.$store.state.template.pageDataStatus.article.ad>0">
+                    <div class="cWBTitle">详情页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-close"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.article.ad}}<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.article.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
+                <div class="cWBStatusContentSucess" v-else>
                     <div class="cWBTitle">详情页</div>
                     <div class="cWBIcon">
                         <span class="el-icon-check"></span>
@@ -80,7 +133,7 @@
                     <div class="cWBStatusContent">
                         <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
                         <div class="cWBStatusContentItem">0<span>个</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
@@ -88,7 +141,24 @@
                     </div>
                 </div>
             </div>
+            <!--复制 end-->
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.search.cid>0 || this.$store.state.template.pageDataStatus.search.ad>0">
+                    <div class="cWBTitle">搜索页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.search.ad}}<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.search.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
                 <div class="cWBStatusContentSucess">
                     <div class="cWBTitle">搜索页</div>
                     <div class="cWBIcon">
@@ -98,7 +168,7 @@
                     <div class="cWBStatusContent">
                         <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
                         <div class="cWBStatusContentItem">0<span>个</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
@@ -106,7 +176,24 @@
                     </div>
                 </div>
             </div>
+            <!--复制 end-->
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.aloneList.cid>0 || this.$store.state.template.pageDataStatus.aloneList.ad>0">
+                    <div class="cWBTitle">底部列表页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.aloneList.ad}}<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.aloneList.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
                 <div class="cWBStatusContentSucess">
                     <div class="cWBTitle">底部列表页</div>
                     <div class="cWBIcon">
@@ -114,9 +201,8 @@
                     </div>
                     <div class="cWBStatus">已通过</div>
                     <div class="cWBStatusContent">
-                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
                         <div class="cWBStatusContentItem">0<span>个</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
@@ -124,7 +210,24 @@
                     </div>
                 </div>
             </div>
+            <!--复制 end-->
+            <!--复制 start-->
             <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.aloneArticle.cid>0 || this.$store.state.template.pageDataStatus.aloneArticle.ad>0">
+                    <div class="cWBTitle">底部详情页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.aloneArticle.ad}}<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.aloneArticle.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
                 <div class="cWBStatusContentSucess">
                     <div class="cWBTitle">底部详情页</div>
                     <div class="cWBIcon">
@@ -134,7 +237,7 @@
                     <div class="cWBStatusContent">
                         <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
                         <div class="cWBStatusContentTitle">未选择导航</div>
-                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentItem"><span>已自动选择</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位名称</div>
                         <div class="cWBStatusContentItem">0<span>个</span></div>
                         <div class="cWBStatusContentTitle">缺少广告位价格</div>
@@ -142,7 +245,7 @@
                     </div>
                 </div>
             </div>
-
+            <!--复制 end-->
         </div>
         <div class="editWindowBoxContent">
             <div class="editWebsiteTemplateJsonBox">
@@ -153,7 +256,22 @@
             <el-button 
                 type="primary" 
                 @click="submitPageJson"
-                :disabled="this.$store.state.template.pageDataStatus.index.cid>0 || this.$store.state.template.pageDataStatus.index.ad>0"
+                :disabled="
+                    this.$store.state.template.pageDataStatus.index.cid>0 || 
+                    this.$store.state.template.pageDataStatus.index.ad>0 ||
+                    this.$store.state.template.pageDataStatus.class.cid>0 ||
+                    this.$store.state.template.pageDataStatus.class.ad>0 ||
+                    this.$store.state.template.pageDataStatus.list.cid>0 ||
+                    this.$store.state.template.pageDataStatus.list.ad>0 ||
+                    this.$store.state.template.pageDataStatus.article.cid>0 ||
+                    this.$store.state.template.pageDataStatus.article.ad>0 ||
+                    this.$store.state.template.pageDataStatus.search.cid>0 ||
+                    this.$store.state.template.pageDataStatus.search.ad>0 ||
+                    this.$store.state.template.pageDataStatus.aloneList.cid>0 ||
+                    this.$store.state.template.pageDataStatus.aloneList.ad>0 ||
+                    this.$store.state.template.pageDataStatus.aloneArticle.cid>0 ||
+                    this.$store.state.template.pageDataStatus.aloneArticle.ad>0
+                "
             >
                 保存模板
             </el-button>
@@ -332,9 +450,11 @@ export default {
                         margin-bottom: 5px;
                         span {
                             font-size: 12px;
-                            color:#666;
                         }
                     }
+                    .cWBStatusContentItemSucess {
+                        color:#67C23A;
+                    }
                 }
             }
             .cWBStatus {

src/views/template/public/componentWindow.vue

@@ -36,6 +36,7 @@
         </div> -->
         <div class="componentStyleBox">
             <div class="componentStyleBoxContent">
+                <!--首页-->
                 <!--1.头条组件 start---------------------------------------->
                 <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBoxStyle1">
                     <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
@@ -409,6 +410,71 @@
                 </div>
                 <!--11.带广告图文组合 end---------------------------------------->
 
+                <!--频道页-->
+                <!--12.频道菜单 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 12" class="componentScrollBoxStyle1">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750322353282870.jpg"/>
+                            <div class="componentScrollBoxItemTitle">居中标题，带分割线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750322363602937.jpg"/>
+                            <div class="componentScrollBoxItemTitle">居中标题，不带分割线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750322373134764.jpg"/>
+                            <div class="componentScrollBoxItemTitle">居中标题，选中项加横线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/175032238049115.jpg"/>
+                            <div class="componentScrollBoxItemTitle">标题居左，带分割线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750322387978404.jpg"/>
+                            <div class="componentScrollBoxItemTitle">标题居左，不带分割线</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750322395388544.jpg"/>
+                            <div class="componentScrollBoxItemTitle">标题居左，选中项加横线</div>
+                        </div>
+                    </div>
+                </div>
+                <!--12.频道菜单 end---------------------------------------->
+
+                <!--13.滚动图文组合 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 13" class="componentScrollBoxStyle1">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750323726771115.jpg"/>
+                            <div class="componentScrollBoxItemTitle">标题不加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750323764774081.jpg"/>
+                            <div class="componentScrollBoxItemTitle">黑色标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250619/1750323772524230.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色标题加粗</div>
+                        </div>
+                    </div>
+                </div>
+                <!--13.滚动图文组合 end---------------------------------------->
+
             </div>
         </div>
         <div class="componentWindowBoxFooter">

src/views/template/public/convertBtn.vue

@@ -31,55 +31,30 @@ export default {
   },
   methods: {
     openComponentListWindow(){
-
-        //遇到过莫名其妙获取不到content的情况，此时使用这个方法
-        //     let that = this;
-        //   setTimeout(() => {
-        //         //判断编辑的是哪个页面的组件style
-        //     let style = 0;
-        //     console.log(that.dataSort)
-        //     console.log(that.$store.state.template.pageData.index[that.dataSort].content.componentList[that.sort].component_style)
-        //     if(that.$store.state.template.pageStatus==1){
-        //         style = that.$store.state.template.pageData.index[that.dataSort].content.componentList[that.sort].component_style;
-        //     }
-        //     if(that.$store.state.template.pageStatus==2){}
-        //     if(that.$store.state.template.pageStatus==3){
-        //         style = that.$store.state.template.pageData.list[that.dataSort].content.componentList[that.sort].component_style;
-        //     }
-        //     if(that.$store.state.template.pageStatus==4){
-        //         style = that.$store.state.template.pageData.article[that.dataSort].content.componentList[that.sort].component_style;
-        //     }
-        //     if(that.$store.state.template.pageStatus==5){}
-        //     if(that.$store.state.template.pageStatus==6){}
-        //     if(that.$store.state.template.pageStatus==7){}
-
-        //     let data = {
-        //         id:that.id,
-        //         dataSort:that.dataSort,
-        //         sort:that.sort,
-        //         type:that.type,
-        //         style:style
-        //     }
-        //     console.log(data);
-        //     that.$store.commit('template/setComponentStyleStatus',data);
-        //   },200)
-
         let style = 0;
-        console.log(this.dataSort)
-        console.log(this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style)
+        // console.log(this.dataSort)
+        // console.log(this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style)
         if(this.$store.state.template.pageStatus==1){
             style = this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style;
         }
-        if(this.$store.state.template.pageStatus==2){}
+        if(this.$store.state.template.pageStatus==2){
+            style = this.$store.state.template.pageData.class[this.dataSort].content.componentList[this.sort].component_style;
+        }
         if(this.$store.state.template.pageStatus==3){
             style = this.$store.state.template.pageData.list[this.dataSort].content.componentList[this.sort].component_style;
         }
         if(this.$store.state.template.pageStatus==4){
             style = this.$store.state.template.pageData.article[this.dataSort].content.componentList[this.sort].component_style;
         }
-        if(this.$store.state.template.pageStatus==5){}
-        if(this.$store.state.template.pageStatus==6){}
-        if(this.$store.state.template.pageStatus==7){}
+        if(this.$store.state.template.pageStatus==5){
+            style = this.$store.state.template.pageData.search[this.dataSort].content.componentList[this.sort].component_style;
+        }
+        if(this.$store.state.template.pageStatus==6){
+            style = this.$store.state.template.pageData.aloneList[this.dataSort].content.componentList[this.sort].component_style;
+        }
+        if(this.$store.state.template.pageStatus==7){
+            style = this.$store.state.template.pageData.aloneArticle[this.dataSort].content.componentList[this.sort].component_style;
+        }
 
         let data = {
             id:this.id,
@@ -102,7 +77,7 @@ export default {
   .templateEditBtnBox {
     position: absolute;
     top: 0;
-    right: 50px;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;

src/views/template/public/editBtn.vue

@@ -71,7 +71,7 @@ export default {
     .templateEditBtnBox {
         position: absolute;
         top: 0;
-        right: 0;
+        right: 50px;
         display: flex;
         align-items: center;
         justify-content: center;

src/views/template/public/editWindow.vue

@@ -43,12 +43,12 @@
                     <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input value="广告" disabled/>
                     </el-form-item>
-                    <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
+                    <!-- <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.width" disabled/>
                     </el-form-item>
                     <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.height" disabled/>
-                    </el-form-item>
+                    </el-form-item> -->
                     <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input value="图片" disabled/>
                     </el-form-item>
@@ -69,12 +69,12 @@
                     <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input value="广告" disabled/>
                     </el-form-item>
-                    <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
+                    <!-- <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input v-model="this.$store.state.template.webSiteData.ad.top.width" disabled/>
                     </el-form-item>
                     <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input v-model="this.$store.state.template.webSiteData.ad.top.height" disabled/>
-                    </el-form-item>
+                    </el-form-item> -->
                     <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input value="图片" disabled/>
                     </el-form-item>

src/views/template/style/components/list/1200x410/1.vue

@@ -0,0 +1,255 @@
+<template>
+    <div class="scrollTextSectorBox">
+        <div class="scrollTextSectorLeft">
+            <el-carousel :interval="3333" height="405px" indicator-position="none" arrow="always" @change="change_fun">
+                <el-carousel-item v-for="item in imagelist" :key="item.id">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749003080588921.jpg">
+                    <span class="swiper_dot1 dot1">
+                        {{ item.title }}
+                    </span>
+                </el-carousel-item>
+                <div class="roll_num_box">
+                    <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
+                </div>
+            </el-carousel>
+        </div>
+        <div class="scrollTextSectorRight">
+            <div class="listNewsTitle">
+                {{name}}
+            </div>
+            <div class="scrollTextSectorList">
+                <div><span>[国际贸易]</span>神舟二十号航天员乘组圆满完成第一次出...</div>
+                <div><span>[国际贸易]</span>2025届济南市大学生毕业典礼举行以环保...</div>
+                <div><span>[国际贸易]</span>支持小微企业融资 国家金融监管总局发布...</div>
+                <div><span>[国际贸易]</span>自然资源部对安徽湖北重庆启动地质勘探...</div>
+                <div><span>[国际贸易]</span>多家平台调整“仅退款”规则，消费者享...</div>
+                <div><span>[国际贸易]</span>中东欧国家博览会暨国际消费品博览会如...</div>
+                <div><span>[国际贸易]</span>减重如此艰难？那些年胖过的自己，今年...</div>
+                <div><span>[国际贸易]</span>中国团队研发出非接触式房颤检测系统将...</div>
+                <div><span>[国际贸易]</span>抗日老兵滕西远13岁投身抗战，受过大小...</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import editBtn from '../../../../public/editBtn.vue'
+export default {
+    components: {
+        editBtn
+    },
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        id:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        }
+
+    },
+    data() {
+        return {
+            roll_num_this: 0,
+            roll_num_lang: 5,
+            imagelist: [
+                {
+                    id: 1,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 2,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 3,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 4,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 5,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                }
+            ]
+        };
+    },
+    methods: {
+        change_fun(the_1) {
+            this.roll_num_this = the_1
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .buildingBorder {
+        border: 2px dashed #999;
+        border-bottom: none;
+        border-right: none;
+    }
+    .scrollTextSectorBox {
+        width: 1200px;
+        height: 410px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .scrollTextSectorLeft {
+            width: 720px;
+            height: 405px;
+        }
+        .scrollTextSectorRight {
+            width: 450px;
+            height: 405px;
+            .listNewsTitle {
+                font-size:22px;
+                font-weight:bold;
+                height: 40px;
+                line-height: 40px;
+                border-bottom: 2px solid #004564;
+                color:#004564;
+                margin-bottom: 20px;
+                box-sizing: border-box;
+            }
+            .scrollTextSectorList {
+                div{
+                    font-size: 18px;
+                    height: 24px;
+                    line-height: 24px;
+                    margin-bottom: 16px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    span {
+                        margin-right: 5px;
+                    }
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        left: 60px;
+        bottom: 5px;
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        font-size: 16px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        padding: 0 144px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+        /deep/.el-carousel__arrow--left {
+            position: absolute;
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            left: 9px;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -36px;
+        }
+        /deep/.el-carousel__arrow--right {
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            position: absolute;
+            right: 9;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -36px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 10px;
+            height: 10px;
+            border: none;
+            border-radius: 5px;
+            background: #fff;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #255590;
+            width: 25px;
+            opacity: 1;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #DD7D18;
+        width: 58px;
+        opacity: 1;
+    }
+</style>
+

src/views/template/style/components/list/1200x410/2.vue

@@ -0,0 +1,262 @@
+<template>
+    <div class="scrollTextSectorBox">
+        <div class="scrollTextSectorLeft">
+            <el-carousel :interval="3333" height="405px" indicator-position="none" arrow="always" @change="change_fun">
+                <el-carousel-item v-for="item in imagelist" :key="item.id">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749003080588921.jpg">
+                    <span class="swiper_dot1 dot1">
+                        {{ item.title }}
+                    </span>
+                </el-carousel-item>
+                <div class="roll_num_box">
+                    <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
+                </div>
+            </el-carousel>
+        </div>
+        <div class="scrollTextSectorRight">
+            <div class="listNewsTitle">
+                {{name}}
+            </div>
+            <div class="scrollTextSectorList">
+                <div><span>[国际贸易]</span>贵州大方县发生山体滑坡救援处置各项工作正在...</div>
+                <div><span>[国际贸易]</span>2025届济南市大学生毕业典礼举行以环保...</div>
+                <div><span>[国际贸易]</span>支持小微企业融资 国家金融监管总局发布...</div>
+                <div><span>[国际贸易]</span>自然资源部对安徽湖北重庆启动地质勘探...</div>
+                <div><span>[国际贸易]</span>多家平台调整“仅退款”规则，消费者享...</div>
+                <div><span>[国际贸易]</span>中东欧国家博览会暨国际消费品博览会如...</div>
+                <div><span>[国际贸易]</span>减重如此艰难？那些年胖过的自己，今年...</div>
+                <div><span>[国际贸易]</span>中国团队研发出非接触式房颤检测系统将...</div>
+                <div><span>[国际贸易]</span>抗日老兵滕西远13岁投身抗战，受过大小...</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import editBtn from '../../../../public/editBtn.vue'
+export default {
+    components: {
+        editBtn
+    },
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        id:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        }
+
+    },
+    data() {
+        return {
+            roll_num_this: 0,
+            roll_num_lang: 5,
+            imagelist: [
+                {
+                    id: 1,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 2,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 3,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 4,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 5,
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                }
+            ]
+        };
+    },
+    methods: {
+        change_fun(the_1) {
+            this.roll_num_this = the_1
+        }
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .buildingBorder {
+        border: 2px dashed #999;
+        border-bottom: none;
+        border-right: none;
+    }
+    .scrollTextSectorBox {
+        width: 1200px;
+        height: 410px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .scrollTextSectorLeft {
+            width: 720px;
+            height: 405px;
+        }
+        .scrollTextSectorRight {
+            width: 450px;
+            height: 405px;
+            .listNewsTitle {
+                font-size:22px;
+                font-weight:bold;
+                height: 40px;
+                line-height: 40px;
+                border-bottom: 2px solid #004564;
+                color:#004564;
+                margin-bottom: 20px;
+                box-sizing: border-box;
+            }
+            .scrollTextSectorList {
+                div{
+                    font-size: 18px;
+                    height: 24px;
+                    line-height: 24px;
+                    margin-bottom: 16px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color: #333333;
+                    span {
+                        margin-right: 5px;
+                    }
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child {
+                        span{
+                            display: none;
+                        }
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        left: 60px;
+        bottom: 5px;
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        font-size: 16px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        padding: 0 144px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+        /deep/.el-carousel__arrow--left {
+            position: absolute;
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            left: 9px;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -36px;
+        }
+        /deep/.el-carousel__arrow--right {
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            position: absolute;
+            right: 9;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -36px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 10px;
+            height: 10px;
+            border: none;
+            border-radius: 5px;
+            background: #fff;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #255590;
+            width: 25px;
+            opacity: 1;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #DD7D18;
+        width: 58px;
+        opacity: 1;
+    }
+</style>
+

src/views/template/style/components/list/1200x480/1.vue

@@ -236,6 +236,9 @@ export default {
                         width: 450px;
                         height: 290px;
                     }
+                    .templateEditBtnBox {
+                        right: 0;
+                    }
                 }
             }
         }

src/views/template/style/components/list/1200x480/2.vue

@@ -236,6 +236,9 @@ export default {
                         width: 450px;
                         height: 290px;
                     }
+                    .templateEditBtnBox {
+                        right: 0;
+                    }
                 }
             }
         }

src/views/template/style/components/menu/1200x100/1.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <div class="channelMenuTitle">
+            一级导航名称
+        </div>
+        <div class="channelMenuList">
+            <div>二级导航名称1</div>
+            <div>二级导航名称2</div>
+            <div>二级导航名称3</div>
+            <div>二级导航名称4</div>
+            <div>二级导航名称5</div>
+            <div>二级导航名称6</div>
+            <div>二级导航名称7</div>
+            <div>二级导航名称8</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .channelMenuTitle {
+        width: 1200px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 24px;
+        color:#1C5468;
+        font-weight: bold;
+        text-align: center;
+        background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250620/1750381219965589.jpg') no-repeat center center;
+        margin-bottom: 25px;
+    }
+    .channelMenuList {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #333;
+        border-bottom: 2px solid #004564;
+        padding-bottom: 15px;
+        div {
+            font-size: 16px;
+            font-weight: bold;
+            width: 120px;
+            height: 22px;
+            line-height: 22px;
+            &:first {
+                color: #004564;
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/menu/1200x100/2.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <div class="channelMenuTitle">
+            一级导航名称
+        </div>
+        <div class="channelMenuList">
+            <div>二级导航名称1</div>
+            <div>二级导航名称2</div>
+            <div>二级导航名称3</div>
+            <div>二级导航名称4</div>
+            <div>二级导航名称5</div>
+            <div>二级导航名称6</div>
+            <div>二级导航名称7</div>
+            <div>二级导航名称8</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .channelMenuTitle {
+        width: 1200px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 24px;
+        color:#1C5468;
+        font-weight: bold;
+        text-align: center;
+        background: url('http://img.bjzxtw.org.cn/pre/image/jpeg/20250620/1750381219965589.jpg') no-repeat center center;
+        margin-bottom: 25px;
+    }
+    .channelMenuList {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #333;
+        padding-bottom: 15px;
+        div {
+            font-size: 16px;
+            font-weight: bold;
+            width: 120px;
+            height: 22px;
+            line-height: 22px;
+            &:first {
+                color: #004564;
+            }
+        }
+    }
+</style>
+

src/views/template/style/sector/body/ad/1200x90/1.vue

@@ -68,5 +68,9 @@ export default {
             display: block;
         }
     }
+
+    .templateEditBtnBox {
+        right: 0;
+    }
 }
 </style>

src/views/template/style/sector/body/class/banner/1200x410/1.vue

@@ -0,0 +1,74 @@
+<template>
+    <div :class="['imgNewsBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="13"/>
+        <!-- <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="NewsData.text" :sizeImg="NewsData.img" :y="y"/> -->
+        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+            <news1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+        </div>
+        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+            <news2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+        </div>
+        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style > 2">
+            <atWork :dataStyle="2" :dataWidth="1200" :dataHeight="410" />
+        </div>
+    </div>
+</template>
+
+<script>
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+import news1Style from '../../../../../../style/components/list/1200x410/1.vue'
+import news2Style from '../../../../../../style/components/list/1200x410/2.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        convertBtn,
+        news1Style,
+        news2Style,
+        editBtn,
+        atWork//组件研发中
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            NewsData:{
+                text:9,
+                img:5
+            }
+        };
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .buildingBorder{
+        border: 2px dashed #999;
+    }
+    .imgNewsBigBox{
+        width: 1200px;
+        height: 410px;
+        position: relative;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: content-box;
+
+        
+    }
+</style>

src/views/template/style/sector/body/class/menu/1200x100/1.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="channelMenuBox">
+        <div :class="['channelMenuSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="12"/>
+            <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+                <menu1Style/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+                <menu2Style/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style > 2">
+                <atWork :dataStyle="2" :dataWidth="1200" :dataHeight="100" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//1200x100
+import menu1Style from '../../../../../../style/components/menu/1200x100/1.vue'
+import menu2Style from '../../../../../../style/components/menu/1200x100/2.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        menu1Style,
+        menu2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.channelMenuBox {
+    width: 100%;
+    height: 100px;
+    box-sizing: content-box;
+    .channelMenuSector {
+        width: 1200px;
+        height: 100px;
+        margin: 0 auto;
+        position: relative;
+        .templateEditBtnBox {
+            right: 0;
+        }
+    }
+}
+</style>
+

src/views/template/style/sector/body/index/list/1200x470/1.vue

@@ -1,30 +1,63 @@
 <template>
     <div class="manyPictureSectorBox">
+        <!-- 
+            注意 ，该组件可以在首页与频道页中通用
+         -->
         <div :class="['manyPictureSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
             <div :class="['manyPictureSectorLeft', {componentBorder1: this.$store.state.template.previewStatus==false}]">
                 <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="4"/>
-                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y"/>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-                    <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                <!-- 首页 -->
+                <div v-if="this.$store.state.template.pageStatus == 1">
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                        <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                        <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                    </div>
                 </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-                    <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
-                </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
-                    <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                <!-- 频道页 -->
+                <div v-if="this.$store.state.template.pageStatus == 2">
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+                        <left1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+                        <left2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                    </div>
                 </div>
             </div>
             <div :class="['manyPictureSectorRight', {componentBorder2: this.$store.state.template.previewStatus==false}]">
                 <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="5"/>
-                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
-                </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
-                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                <!-- 首页 -->
+                <div v-if="this.$store.state.template.pageStatus == 1">
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                        <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                        <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                    </div>
                 </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
-                    <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                <!-- 频道页 -->
+                <div v-if="this.$store.state.template.pageStatus == 2">
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style == 1">
+                        <right1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style == 2">
+                        <right2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -43,16 +76,6 @@ import right1Style from '../../../../../../style/components/list/450x440/1.vue'
 import right2Style from '../../../../../../style/components/list/450x440/2.vue'
 //组件研发中
 import atWork from '../../../../../../public/atWork.vue'
-
-// //标题组件
-// import title1Style from '../components/title/1.vue'
-// //静态组件
-// import staticHtml1Style from '../components/staticHtml/1.vue'
-// //新闻列表组件
-// import list1Style from '../components/list/1.vue'
-// import list2Style from '../components/list/2.vue'
-// import list3Style from '../components/list/3.vue'
-
 export default {
     components: {
         editBtn,

src/views/template/style/sector/body/index/list/1200x470/2.vue

@@ -1,30 +1,63 @@
 <template>
     <div class="manyPictureSectorBox">
+        <!-- 
+            注意 ，该组件可以在首页与频道页中通用
+         -->
         <div :class="['manyPictureSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
             <div :class="['manyPictureSectorLeft', {componentBorder1: this.$store.state.template.previewStatus==false}]">
                 <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="6"/>
-                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y"/>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-                    <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                <!-- 首页 -->
+                <div v-if="this.$store.state.template.pageStatus == 1">
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                        <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                        <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                    </div>
                 </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-                    <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
-                </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
-                    <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                <!-- 频道页 -->
+                <div v-if="this.$store.state.template.pageStatus == 2">
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+                        <left1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+                        <left2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                    </div>
                 </div>
             </div>
             <div :class="['manyPictureSectorRight', {componentBorder2: this.$store.state.template.previewStatus==false}]">
                 <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="7"/>
-                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
-                </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
-                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                <!-- 首页 -->
+                <div v-if="this.$store.state.template.pageStatus == 1">
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                        <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                        <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                    </div>
                 </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
-                    <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                <!-- 频道页 -->
+                <div v-if="this.$store.state.template.pageStatus == 2">
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style == 1">
+                        <right1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style == 2">
+                        <right2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                    </div>
                 </div>
             </div>
         </div>

src/views/template/style/sector/body/index/list/1200x980/1.vue

@@ -1,45 +1,93 @@
 <template>
     <div class="commentSectorBox">
+        <!-- 
+            注意 ，该组件可以在首页与频道页中通用
+         -->
         <div :class="['commentSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
             <div class="commentSectorLeft">
                 <div :class="['commentSectorLeftTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
                     <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="8"/>
-                    <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftDataTop.text" :sizeImg="leftDataTop.img" :y="y"/>
-                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-                        <leftTop1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftDataTop.text" :sizeImg="leftDataTop.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                    <!-- 首页 -->
+                    <div v-if="this.$store.state.template.pageStatus == 1">
+                        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                            <leftTop1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                            <leftTop2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                            <atWork :dataStyle="1" :dataWidth="720" :dataHeight="300" />
+                        </div>
                     </div>
-                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-                        <leftTop2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
-                    </div>
-                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
-                        <atWork :dataStyle="1" :dataWidth="720" :dataHeight="300" />
+                    <!-- 频道页 -->
+                    <div v-if="this.$store.state.template.pageStatus == 2">
+                        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 1">
+                            <leftTop1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style == 2">
+                            <leftTop2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[0].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[0].component_style > 2">
+                            <atWork :dataStyle="1" :dataWidth="720" :dataHeight="300" />
+                        </div>
                     </div>
                 </div>
                 <div :class="['commentSectorLeftBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
                     <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
-                    <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="leftDataBottom.text" :sizeImg="leftDataBottom.img" :y="y"/>
-                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-                        <leftBottom1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
-                    </div>
-                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
-                        <leftBottom2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="leftDataBottom.text" :sizeImg="leftDataBottom.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                    <!-- 首页 -->
+                    <div v-if="this.$store.state.template.pageStatus == 1">
+                        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                            <leftBottom1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                            <leftBottom2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                            <atWork :dataStyle="1" :dataWidth="720" :dataHeight="620" />
+                        </div>
                     </div>
-                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
-                        <atWork :dataStyle="1" :dataWidth="720" :dataHeight="620" />
+                    <!-- 频道页 -->
+                    <div v-if="this.$store.state.template.pageStatus == 2">
+                        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style == 1">
+                            <leftBottom1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style == 2">
+                            <leftBottom2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[1].componentData.name"/>
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[1].component_style > 2">
+                            <atWork :dataStyle="1" :dataWidth="720" :dataHeight="620" />
+                        </div>
                     </div>
                 </div>
             </div>
             <div :class="['commentSectorRight', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
                 <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="10"/>
-                <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
-                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
-                </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
-                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y" v-if="this.$store.state.template.pageStatus==1"/>
+                <!-- 首页 -->
+                <div v-if="this.$store.state.template.pageStatus == 1">
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
+                        <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
+                        <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style > 2">
+                        <atWork :dataStyle="1" :dataWidth="450" :dataHeight="950" />
+                    </div>
                 </div>
-                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style > 2">
-                    <atWork :dataStyle="1" :dataWidth="450" :dataHeight="950" />
+                <!-- 频道页 -->
+                <div v-if="this.$store.state.template.pageStatus == 2">
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[2].component_style == 1">
+                        <right1Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[2].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[2].component_style == 2">
+                        <right2Style :name="this.$store.state.template.pageData.class[dataSort].content.componentList[2].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.class[dataSort].content.componentList[2].component_style > 2">
+                        <atWork :dataStyle="1" :dataWidth="450" :dataHeight="950" />
+                    </div>
                 </div>
             </div>
         </div>