自助建站临时保存

自助建站临时保存

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

@@ -1,8 +1,8 @@
 <template>
   <div class="sectorBox">
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+    <div class="sectorItemBox" @click="addModule('adSector',8,adSector)" @drag="drag('adSector',8,adSector)" @dragend="dragend('adSector',8,adSector)" >
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png"/>
+        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
@@ -38,8 +38,8 @@ export default {
   data() {
     return {
       //添加通栏广告模块 start---------------------------------------->
-      imgTitleSector:{
-        sectorName:"imgTitleSector",//板块名称
+      adSector:{
+        sectorName:"adSector",//板块名称
         componentList:[
           {
             component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论

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

@@ -1,407 +1,495 @@
 <template>
-  <div class="sectorBox">
-    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/headSector.png" />
-      </div>
-      <div class="sectorItemTitle">页头</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('menuSector',2)">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/menuSector.png" />
-      </div>
-      <div class="sectorItemTitle">网站导航</div>
-    </div> -->
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',9,imgTitleSector)" @drag="drag('imgTitleSector',9,imgTitleSector)" @dragend="dragend('imgTitleSector',9,imgTitleSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png"/>
-      </div>
-      <div class="sectorItemTitle">通栏广告</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/bannerSector.png"/>
-      </div>
-      <div class="sectorItemTitle">焦点图</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/moreServicesSector.png"/>
-      </div>
-      <div class="sectorItemTitle">多图菜单</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png"/>
-      </div>
-      <div class="sectorItemTitle">文章列表带评论</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/newsSector.png"/>
-      </div>
-      <div class="sectorItemTitle">文章列表</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/imgSector.png"/> 
-      </div>
-      <div class="sectorItemTitle">纯图片组合</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/linkSector.png"/>
-      </div>
-      <div class="sectorItemTitle">友情链接</div>
+    <div class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)"
+            @drag="drag('adSector', 12, adSector)" 
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('headLineSector', 17, headLineSector)" 
+            @drag="drag('headLineSector', 17, headLineSector)"
+            @dragend="dragend('headLineSector', 17, headLineSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" />
+            </div>
+            <div class="sectorItemTitle">网站头条</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('bannerSector', 44, bannerSector)"
+            @drag="drag('bannerSector', 44, bannerSector)" 
+            @dragend="dragend('bannerSector', 44, bannerSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" />
+            </div>
+            <div class="sectorItemTitle">焦点图</div>
+        </div>
+
+
+
+
+
+
+
+
+
+        <div class="sectorItemBox" @click="addModule('manyPictureSector', 49, manyPictureSector)"
+            @drag="drag('manyPictureSector', 49, manyPictureSector)"
+            @dragend="dragend('manyPictureSector', 49, manyPictureSector)">
+            <div class="sectorItem">
+                <img src="@/assets/template/sector/moreServicesSector.png" />
+            </div>
+            <div class="sectorItemTitle">多图菜单</div>
+        </div>
+        <div class="sectorItemBox" @click="addModule('commentSector', 44, commentSector)"
+            @drag="drag('commentSector', 44, commentSector)" @dragend="dragend('commentSector', 44, commentSector)">
+            <div class="sectorItem">
+                <img src="@/assets/template/sector/commentSector.png" />
+            </div>
+            <div class="sectorItemTitle">文章列表带评论</div>
+        </div>
+        <div class="sectorItemBox" @click="addModule('listSector', 33, listSector)"
+            @drag="drag('listSector', 33, listSector)" @dragend="dragend('listSector', 33, listSector)">
+            <div class="sectorItem">
+                <img src="@/assets/template/sector/newsSector.png" />
+            </div>
+            <div class="sectorItemTitle">文章列表</div>
+        </div>
+        <div class="sectorItemBox" @click="addModule('onlyImgSector', 32, onlyImgSector)"
+            @drag="drag('onlyImgSector', 32, onlyImgSector)" @dragend="dragend('onlyImgSector', 32, onlyImgSector)">
+            <div class="sectorItem">
+                <img src="@/assets/template/sector/imgSector.png" />
+            </div>
+            <div class="sectorItemTitle">纯图片组合</div>
+        </div>
+        <div class="sectorItemBox" @click="addModule('friendShipLinkSector', 20, friendShipLinkSector)"
+            @drag="drag('friendShipLinkSector', 20, friendShipLinkSector)"
+            @dragend="dragend('friendShipLinkSector', 20, friendShipLinkSector)">
+            <div class="sectorItem">
+                <img src="@/assets/template/sector/linkSector.png" />
+            </div>
+            <div class="sectorItemTitle">友情链接</div>
+        </div>
     </div>
-    <!-- <div class="sectorItemBox">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
-      </div>
-      <div class="sectorItemTitle">页尾板块</div>
-    </div> -->
-  </div>
 </template>
 
 <script>
 
 export default {
-  props: {
-    type: {
-     
+    props: {
+        type: {
+
+        },
     },
-  },
-  data() {
-    return {
-      //添加通栏广告模块 start---------------------------------------->
-      imgTitleSector:{
-        sectorName:"imgTitleSector",//板块名称
-        componentList:[
-          {
-            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              ad_id:"",//广告位id
-              text:"通栏广告", //广告位名称
-              width:1200, //广告位宽度
-              height:60, //广告位高度
-            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
-          }
-        ]
-      },
-      //添加通栏广告模块 start---------------------------------------->
-
-      //添加banner模块 start---------------------------------------->
-      bannerSector:{
-        sectorName:"bannerSector",//板块名称
-        componentList:[
-          {
-            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"mainTitle",//组件名称
-            sort:1,//组件排序
-            componentData:{//该组件请求的数据
-              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
-              page:1,//请求第几页
-              pageSize:1,//请求的条数
-              listType:[//请求的数据应该包含哪些字段
-                "title",//标题
-                //"created_time",//创建时间
-                //"author",//作者
-                //"imgUrl",//缩略图片
-                //"introduce",//描述
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"banner",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "imgUrl"//缩略图片
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-                "introduce",//描述
-              ]
-            }
-          },
-        ]
-      },
-      //添加banner模块 end---------------------------------------->
-
-      //添加多图板块 start---------------------------------------->
-      manyPictureSector:{
-        sectorName:"manyPictureSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:6, //静态组件无需传递数据
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"fivePicture",
-            sort:2,
-            componentData:{}
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:4,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-        ]
-      },
-      //添加多图板块 end---------------------------------------->
-
-      //文章列表带评论板块 end---------------------------------------->
-      commentSector:{
-        sectorName:"commentSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:2,//该组件使用哪个展示样式
-            component_name:"tabsCalendarNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:6,
-              listType:[
-                "title",
-                "created_time",
-                "introduce"
-              ]
-            }
-          },
-          {
-            component_type:8,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"calendar", //评论组件无需提交数据
-            sort:3,
-            componentData:{}
-          },
-        ]
-      },
-      //文章列表带评论板块 end---------------------------------------->
-
-      //文章列表板块 start---------------------------------------->
-      listSector:{
-        sectorName:"listSector",//板块名称
-        componentList:[
-          {
-            component_type:7,//纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"listNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",
-                "created_time"
-              ]
+    data() {
+        return {
+            //模块1通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {
+                            "ad_tag": "zzjz_index_0001",//广告标识为 网站字符缩写+下划线+页面名称+下划线+广告位位置
+                            "ad_name": "通栏广告", //广告位名称
+                            "introduce": "",//广告位描述
+                            "image_src": "",//广告位图片
+                            "img_url": "",//广告位外链地址
+                            "image_alt": "",//广告位图片说明
+                            "thumb": "",//默认广告图 - 该广告图应该根据风格而变化
+                            "width": 1200, //广告位宽度
+                            "height": 90, //广告位高度
+                        }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+                    }
+                ]
+            },
+            //添加通栏广告模块 start---------------------------------------->
+
+            //添加头条广告模块 start---------------------------------------->
+            headLineSector: {
+                "sectorName": "headLineSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "category_id": "",
+                            "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": {
+                            "category_id": "",
+                            "level": 2,
+                            "imgSize": 5,
+                            "textSize": 0,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 2,//排序位置
+                        "componentData": {
+                            "category_id": "",
+                            "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---------------------------------------->
+
+
+
+
+
+
+
+
+
+
+
+
+            //添加多图板块 start---------------------------------------->
+            manyPictureSector: {
+                sectorName: "manyPictureSector",//板块名称
+                componentList: [
+                    {
+                        component_type: 7, //纯文本
+                        component_style: 1,
+                        component_name: "styleTitle",
+                        sort: 1,
+                        componentData: {
+                            text: "板块标题"
+                        }
+                    },
+                    {
+                        component_type: 6, //静态组件无需传递数据
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "fivePicture",
+                        sort: 2,
+                        componentData: {}
+                    },
+                    {
+                        component_type: 1,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "tabsNews",
+                        sort: 3,
+                        componentData: {
+                            category_id: [],
+                            page: 1,
+                            pageSize: 3,
+                            listType: [
+                                "title",//标题
+                                "created_time",//创建时间
+                            ]
+                        }
+                    },
+                    {
+                        component_type: 1,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "tabsNews",
+                        sort: 4,
+                        componentData: {
+                            category_id: [],
+                            page: 1,
+                            pageSize: 3,
+                            listType: [
+                                "title",//标题
+                                "created_time",//创建时间
+                            ]
+                        }
+                    },
+                ]
+            },
+            //添加多图板块 end---------------------------------------->
+
+            //文章列表带评论板块 end---------------------------------------->
+            commentSector: {
+                sectorName: "commentSector",//板块名称
+                componentList: [
+                    {
+                        component_type: 7, //纯文本
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "styleTitle",
+                        sort: 1,
+                        componentData: {
+                            text: "板块标题"
+                        }
+                    },
+                    {
+                        component_type: 1,
+                        component_style: 2,//该组件使用哪个展示样式
+                        component_name: "tabsCalendarNews",
+                        sort: 2,
+                        componentData: {
+                            category_id: [],
+                            page: 1,
+                            pageSize: 6,
+                            listType: [
+                                "title",
+                                "created_time",
+                                "introduce"
+                            ]
+                        }
+                    },
+                    {
+                        component_type: 8,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "calendar", //评论组件无需提交数据
+                        sort: 3,
+                        componentData: {}
+                    },
+                ]
+            },
+            //文章列表带评论板块 end---------------------------------------->
+
+            //文章列表板块 start---------------------------------------->
+            listSector: {
+                sectorName: "listSector",//板块名称
+                componentList: [
+                    {
+                        component_type: 7,//纯文本
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "styleTitle",
+                        sort: 1,
+                        componentData: {
+                            text: "板块标题"
+                        }
+                    },
+                    {
+                        component_type: 1,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "listNews",
+                        sort: 2,
+                        componentData: {
+                            category_id: [],
+                            page: 1,
+                            pageSize: 5,
+                            listType: [
+                                "title",
+                                "created_time"
+                            ]
+                        }
+                    },
+                    {
+                        component_type: 1,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "listNews",
+                        sort: 3,
+                        componentData: {
+                            category_id: [],
+                            page: 1,
+                            pageSize: 5,
+                            listType: [
+                                "title",
+                                "created_time"
+                            ]
+                        }
+                    },
+                ]
+            },
+            //文章列表板块 end---------------------------------------->
+
+            //纯图片组合 start---------------------------------------->
+            onlyImgSector: {
+                sectorName: "onlyImgSector",//板块名称
+                componentList: [
+                    {
+                        component_type: 1,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "",
+                        sort: 1,
+                        componentData: {
+                            category_id: [],
+                            page: 1,
+                            pageSize: 7,
+                            listType: [
+                                "title",
+                                "imgUrl"
+                            ]
+                        }
+                    }
+                ]
+            },
+            //纯图片组合 end---------------------------------------->
+
+            //友情链接板块 start---------------------------------------->
+            friendShipLinkSector: {
+                sectorName: "friendShipLinkSector",//友情链接无需提交数据
+                componentList: [
+                    {
+                        component_type: 7, //纯文本
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "styleTitle",
+                        sort: 1,
+                        componentData: {
+                            text: "板块标题"
+                        }
+                    },
+                    {
+                        component_type: 4,
+                        component_style: 1,//该组件使用哪个展示样式
+                        component_name: "",
+                        sort: 1,
+                        componentData: {}
+                    }
+                ]
             }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"listNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",
-                "created_time"
-              ]
+            //友情链接板块 end---------------------------------------->
+
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-        ]
-      },
-      //文章列表板块 end---------------------------------------->
-
-      //纯图片组合 start---------------------------------------->
-      onlyImgSector:{
-        sectorName:"onlyImgSector",//板块名称
-        componentList:[
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:7,
-              listType:[
-                "title",
-                "imgUrl"
-              ]
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          }
-        ]
-      },
-      //纯图片组合 end---------------------------------------->
-
-      //友情链接板块 start---------------------------------------->
-      friendShipLinkSector:{
-        sectorName:"friendShipLinkSector",//友情链接无需提交数据
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-          {
-            component_type:4,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{}
-          }
-        ]
-      }
-      //友情链接板块 end---------------------------------------->
-
-    }
-  },
-  methods: {
-    //添加模块
-    addModule(type,h,jsonData){
-      let data = {
-        source:"click",//添加方式为点击
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      console.log(data);
-      this.$store.commit('template/addModule',data);
-    },
-    //拖拽开始
-    drag(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/drag',data);
-    },
-    //拖拽结束
-    dragend(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/dragend',data);
+            this.$store.commit('template/dragend', data);
+        }
     }
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .sectorBox {
+.sectorBox {
     height: 100%;
+
     .sectorItemBox {
-      box-sizing: border-box;
-      padding: 0 20px 40px 20px;
-      height: 130px;
-      cursor: pointer;
-      .sectorItem {
-        border: 1px solid #333644;
-        padding: 10px;
-        border-radius: 8px;
-        &:hover {
-          background: #333644;
-          transform: scale(1.1);
-          transition: all 0.2s ease-in-out;
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        height: 130px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
         }
-        img {
-          display: block;
-          width: 100%;
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
         }
-      }
-      .sectorItemTitle {
-        color: #fff;
-        font-size: 14px;
-        padding: 10px 0 0 0;
-        text-align: center;
-      }
     }
-  }
+}
 </style>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="sectorBox">
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+    <div class="sectorItemBox" @click="addModule('adSector',8,adSector)" @drag="drag('adSector',8,adSector)" @dragend="dragend('adSector',8,adSector)" >
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png"/>
+        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
@@ -38,8 +38,8 @@ export default {
   data() {
     return {
       //添加通栏广告模块 start---------------------------------------->
-      imgTitleSector:{
-        sectorName:"imgTitleSector",//板块名称
+      adSector:{
+        sectorName:"adSector",//板块名称
         componentList:[
           {
             component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论

src/store/modules/template.js

@@ -97,7 +97,8 @@ const state = {
     editDataSort: 0,//当前正在编辑的数据位置
     editComponentSort: 0,//当前正在编辑的组件id
     editComponentType: 0,//当前正在编辑的组件类型
-    editComponentSize: 0,//当前组件展示的条数
+    editComponentSize: 0,//当前组件文字新闻数量
+    editComponentSizeImg:0,//当前组件图片新闻数量
     editComponentStyle: 0,//当前编辑的组件样式
     editWebsiteCategory: [],//当前网站全部关联导航
     webSiteData: {
@@ -127,7 +128,8 @@ const state = {
     //5.组件回显数据 start------------------------------------------------------------>
     componentViewData: {
         pid_arr: [],//导航池
-        pageSize: "",//展示条数
+        pageSize: "",//展示文字新闻条数
+        pageSizeImg: "",//展示图片新闻条数
         adName: "",//广告名称
         titleName: "",//标题名称
     }
@@ -169,6 +171,7 @@ const mutations = {
         state.editComponentSort = data.sort;
         state.editComponentType = data.type;
         state.editComponentSize = data.size;
+        state.editComponentSizeImg = data.sizeImg;
     },
     //关闭编辑组件弹出框
     closeEditWindowStatus(state) {
@@ -201,78 +204,55 @@ const mutations = {
         if (state.pageStatus == 1) {
             //找到要修改的板块
             const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
-            //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+            //判断组件类型 1=新闻 2=广告
+            //1=新闻 需要设置导航id
             if (state.editComponentType == 1) {
                 state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
                 state.componentViewData.pageSize = state.editComponentSize;
+                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
             }
-            //2=tabs新闻选项卡
+            //2=设置广告名称
             if (state.editComponentType == 2) {
-                state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
-                state.componentViewData.pageSize = state.editComponentSize;
-            }
-            //3=广告名称
-            if (state.editComponentType == 3) {
                 state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
             }
-            //7=标题
-            if (state.editComponentType == 7) {
-                state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
-            }
         }
         //pageStatus==2 分类页
-        if (state.pageStatus == 2) { }
+        if (state.pageStatus == 2) {}
         //pageStatus==3 列表页
         if (state.pageStatus == 3) {
             const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
-            //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+            //判断组件类型 1=新闻 2=广告
+            //1=新闻 需要设置导航id
             if (state.editComponentType == 1) {
                 state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
                 state.componentViewData.pageSize = state.editComponentSize;
+                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
             }
-            //2=tabs新闻选项卡
+            //2=设置广告名称
             if (state.editComponentType == 2) {
-                state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
-                state.componentViewData.pageSize = state.editComponentSize;
-            }
-            //3=广告名称
-            if (state.editComponentType == 3) {
                 state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
             }
-            //7=标题
-            if (state.editComponentType == 7) {
-                state.componentViewData.titleName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
-            }
         }
         //pageStatus==4 详情页
         if (state.pageStatus == 4) {
-
             const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
-            //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+            //判断组件类型 1=新闻 2=广告
+            //1=新闻 需要设置导航id
             if (state.editComponentType == 1) {
                 state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
                 state.componentViewData.pageSize = state.editComponentSize;
             }
-            //2=tabs新闻选项卡
+            //2=设置广告名称
             if (state.editComponentType == 2) {
-                state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
-                state.componentViewData.pageSize = state.editComponentSize;
-            }
-            //3=广告名称
-            if (state.editComponentType == 3) {
                 state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
             }
-            //7=标题
-            if (state.editComponentType == 7) {
-                state.componentViewData.titleName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
-            }
         }
         //pageStatus==5 搜索页
-        if (state.pageStatus == 5) { }
-        //pageStatus==6 自定义列表页
-        if (state.pageStatus == 6) { }
-        //pageStatus==7 自定义详情页
-        if (state.pageStatus == 7) { }
+        if (state.pageStatus == 5) {}
+        //pageStatus==6 底部列表页
+        if (state.pageStatus == 6) {}
+        //pageStatus==7 底部详情页
+        if (state.pageStatus == 7) {}
     },
     //生成一个随机的广告id
     getRandomAdid(state) {
@@ -318,7 +298,7 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.index.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 3) {
+                    if (data.jsonData.componentList[0].component_type == 2) {
                         this.commit("template/getRandomAdid")
                         //添加板块id  
                         state.pageData.index.push({
@@ -367,7 +347,7 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.index.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 3) {
+                    if (data.jsonData.componentList[0].component_type == 2) {
                         this.commit("template/getRandomAdid")
                         //添加板块id  
                         state.pageData.index.push({
@@ -434,7 +414,7 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.list.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 3) {
+                    if (data.jsonData.componentList[0].component_type == 2) {
                         this.commit("template/getRandomAdid")
                         //添加板块id  
                         state.pageData.list.push({
@@ -480,7 +460,7 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.list.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 3) {
+                    if (data.jsonData.componentList[0].component_type == 2) {
                         this.commit("template/getRandomAdid")
                         //添加板块id  
                         state.pageData.list.push({
@@ -531,7 +511,7 @@ const mutations = {
                 return;
             } else {
                 //判断添加的是否为广告模块 如果是 添加一个ad_id
-                if (data.jsonData.componentList[0].component_type == 3) {
+                if (data.jsonData.componentList[0].component_type == 2) {
                     //生成一个随机的ad_id给广告模块
                     this.commit("template/getRandomAdid");
                     console.log("添加广告模块！id为：" + state.ad_id)
@@ -551,7 +531,7 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.article.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 3) {
+                    if (data.jsonData.componentList[0].component_type == 2) {
                         this.commit("template/getRandomAdid")
                         //添加板块id  
                         state.pageData.article.push({
@@ -597,7 +577,7 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.article.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 3) {
+                    if (data.jsonData.componentList[0].component_type == 2) {
                         this.commit("template/getRandomAdid")
                         //添加板块id  
                         state.pageData.article.push({
@@ -654,19 +634,43 @@ const mutations = {
         if (state.pageStatus == 1) {
             //开始复制 start------------------------------------------------------------>
             //必须通过重新查找id的方式来删除
-            const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
-            if (indexToRemove !== -1) {
-                state.pageData.index.splice(indexToRemove, 1);
-                Message.success('模块已删除！');
-                console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
-            } else {
-                Message.warning('未找到要删除的模块！');
-            }
+            // const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
+            // if (indexToRemove !== -1) {
+            //     state.pageData.index.splice(indexToRemove, 1);
+            //     Message.success('模块已删除！');
+            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
+            // } else {
+            //     Message.warning('未找到要删除的模块！');
+            // }
             //开始复制 end------------------------------------------------------------>
             // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
             // state.pageData.index.splice(data.dataSort,1);
             // Message.success('模块已删除！');
             // console.log(state.pageData.index);
+            // 深拷贝整个数组
+            try {
+                // 1. 先找到要删除的模块
+                const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
+                if (indexToRemove === -1) {
+                    Message.warning('未找到要删除的模块！');
+                    return;
+                }
+                // 2. 创建新的数组，不包含要删除的模块
+                const newModules = state.pageData.index.filter(item => item.i !== data.i);
+                // 3. 重新计算所有模块的 dataSort
+                newModules.forEach((module, index) => {
+                    module.dataSort = index;
+                });
+                // 4. 使用 Vue.set 更新整个数组
+                Vue.set(state.pageData, 'index', newModules);
+                // 5. 强制更新 gridKey 以触发视图重新渲染
+                state.gridKey += 1;
+                Message.success('模块已删除！');
+                console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
+            } catch (error) {
+                console.error('删除模块时发生错误:', error);
+                Message.error('删除模块时发生错误，请重试！');
+            }
         }
         //pageStatus==2 分类页
         if (state.pageStatus == 2) { }
@@ -674,13 +678,36 @@ const mutations = {
         if (state.pageStatus == 3) {
             //开始复制 start------------------------------------------------------------>
             //必须通过重新查找id的方式来删除
-            const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
-            if (indexToRemove !== -1) {
-                state.pageData.list.splice(indexToRemove, 1);
+            // const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
+            // if (indexToRemove !== -1) {
+            //     state.pageData.list.splice(indexToRemove, 1);
+            //     Message.success('模块已删除！');
+            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
+            // } else {
+            //     Message.warning('未找到要删除的模块！');
+            // }
+            try {
+                // 1. 先找到要删除的模块
+                const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
+                if (indexToRemove === -1) {
+                    Message.warning('未找到要删除的模块！');
+                    return;
+                }
+                // 2. 创建新的数组，不包含要删除的模块
+                const newModules = state.pageData.list.filter(item => item.i !== data.i);
+                // 3. 重新计算所有模块的 dataSort
+                newModules.forEach((module, index) => {
+                    module.dataSort = index;
+                });
+                // 4. 使用 Vue.set 更新整个数组
+                Vue.set(state.pageData, 'list', newModules);
+                // 5. 强制更新 gridKey 以触发视图重新渲染
+                state.gridKey += 1;
                 Message.success('模块已删除！');
                 console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
-            } else {
-                Message.warning('未找到要删除的模块！');
+            } catch (error) {
+                console.error('删除模块时发生错误:', error);
+                Message.error('删除模块时发生错误，请重试！');
             }
             //开始复制 end------------------------------------------------------------>
         }
@@ -688,15 +715,38 @@ const mutations = {
         if (state.pageStatus == 4) {
             //开始复制 start------------------------------------------------------------>
             //必须通过重新查找id的方式来删除
-            const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
-            if (indexToRemove !== -1) {
-                state.pageData.article.splice(indexToRemove, 1);
+            // const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
+            // if (indexToRemove !== -1) {
+            //     state.pageData.article.splice(indexToRemove, 1);
+            //     Message.success('模块已删除！');
+            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
+            // } else {
+            //     Message.warning('未找到要删除的模块！');
+            // }
+            //开始复制 end------------------------------------------------------------>
+            try {
+                // 1. 先找到要删除的模块
+                const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
+                if (indexToRemove === -1) {
+                    Message.warning('未找到要删除的模块！');
+                    return;
+                }
+                // 2. 创建新的数组，不包含要删除的模块
+                const newModules = state.pageData.article.filter(item => item.i !== data.i);
+                // 3. 重新计算所有模块的 dataSort
+                newModules.forEach((module, index) => {
+                    module.dataSort = index;
+                });
+                // 4. 使用 Vue.set 更新整个数组
+                Vue.set(state.pageData, 'list', newModules);
+                // 5. 强制更新 gridKey 以触发视图重新渲染
+                state.gridKey += 1;
                 Message.success('模块已删除！');
                 console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
-            } else {
-                Message.warning('未找到要删除的模块！');
+            } catch (error) {
+                console.error('删除模块时发生错误:', error);
+                Message.error('删除模块时发生错误，请重试！');
             }
-            //开始复制 end------------------------------------------------------------>
         }
         //pageStatus==5 搜索页
         if (state.pageStatus == 5) { }
@@ -789,69 +839,45 @@ const mutations = {
             console.log("要修改的模块id为：") //找到要修改的板块
             console.log(data.sort) //找到要修改的板块
             console.log(targetModuleIndex) //找到要修改的板块
-            //console.log(targetModuleIndex) //找到要修改的板块
-            //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件 
-            //data.data.pid_arr //导航池
-            //state.editComponentSize //展示条数
 
-            //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
-            //1=普通新闻
+            //组件类型 1=新闻 2=广告
+            
             //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
             //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
             //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
+
+            //1=新闻
             if (state.editComponentType == 1) {
                 // 获取当前模块数据并进行深拷贝
                 let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
                 // 更新 category_id 和 pageSize
                 module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
+
                 // 使用Vue.set来强制视图更新
                 Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.index);
             }
-            //2=tabs新闻选项卡
+            //2=广告
             if (state.editComponentType == 2) {
-                // 获取当前模块数据并进行深拷贝
-                let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
-                // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
-                // 使用Vue.set来强制视图更新
-                Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.index);
-            }
-            //3=广告
-            if (state.editComponentType == 3) {
-                ;
                 let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
                 module.content.componentList[data.sort].componentData.text = data.data.adName;
                 Vue.set(state.pageData.index, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.index);
             }
-            //4=友情链接
-            //if(state.editComponentType == 4){}
-            //6=静态组件
-            //if(state.editComponentType == 6){}
-            //7=文本
-            if (state.editComponentType == 7) {
-                let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
-                module.content.componentList[data.sort].componentData.text = data.data.titleName;
-                Vue.set(state.pageData.index, targetModuleIndex, module);
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.index);
-            }
-            //8=评论
-            //if(state.editComponentType == 8){}
             //开始复制 end------------------------------------------------------------>
         }
-        //pageStatus==2 分类页
-        if (state.pageStatus == 2) { }
+
+        //pageStatus==2 频道页
+        if (state.pageStatus == 2) {}
+
         //pageStatus==3 列表页
         if (state.pageStatus == 3) {
             //开始复制 start------------------------------------------------------------>
+            //1=新闻
             const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
             console.log("要修改的模块id为：") //找到要修改的板块
             console.log(data.sort) //找到要修改的板块
@@ -861,43 +887,26 @@ const mutations = {
                 let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
                 // 更新 category_id 和 pageSize
                 module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
+
                 // 使用Vue.set来强制视图更新
                 Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.list);
             }
-            //2=tabs新闻选项卡
+            //2=广告
             if (state.editComponentType == 2) {
-                // 获取当前模块数据并进行深拷贝
-                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
-                // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
-                // 使用Vue.set来强制视图更新
-                Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.list);
-            }
-            //3=广告
-            if (state.editComponentType == 3) {
-                ;
                 let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
                 module.content.componentList[data.sort].componentData.text = data.data.adName;
                 Vue.set(state.pageData.list, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.list);
             }
-            //7=文本
-            if (state.editComponentType == 7) {
-                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
-                module.content.componentList[data.sort].componentData.text = data.data.titleName;
-                Vue.set(state.pageData.list, targetModuleIndex, module);
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.list);
-            }
             //开始复制 end------------------------------------------------------------>
         }
+
+
         //pageStatus==4 详情页
         if (state.pageStatus == 4) {
             //开始复制 start------------------------------------------------------------>
@@ -910,49 +919,30 @@ const mutations = {
                 let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
                 // 更新 category_id 和 pageSize
                 module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
+
                 // 使用Vue.set来强制视图更新
                 Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.article);
             }
-            //2=tabs新闻选项卡
+            //2=广告
             if (state.editComponentType == 2) {
-                // 获取当前模块数据并进行深拷贝
-                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
-                // 更新 category_id 和 pageSize
-                module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
-                module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
-                // 使用Vue.set来强制视图更新
-                Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.article);
-            }
-            //3=广告
-            if (state.editComponentType == 3) {
-                ;
                 let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
                 module.content.componentList[data.sort].componentData.text = data.data.adName;
                 Vue.set(state.pageData.article, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.article);
             }
-            //7=文本
-            if (state.editComponentType == 7) {
-                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
-                module.content.componentList[data.sort].componentData.text = data.data.titleName;
-                Vue.set(state.pageData.article, targetModuleIndex, module);
-                console.log("当前的板块数据为：");
-                console.log(state.pageData.article);
-            }
             //开始复制 end------------------------------------------------------------>
         }
         //pageStatus==5 搜索页
-        if (state.pageStatus == 5) { }
-        //pageStatus==6 自定义列表页
-        if (state.pageStatus == 6) { }
-        //pageStatus==7 自定义详情页
-        if (state.pageStatus == 7) { }
+        if (state.pageStatus == 5) {}
+        //pageStatus==6 底部列表页
+        if (state.pageStatus == 6) {}
+        //pageStatus==7 底部详情页
+        if (state.pageStatus == 7) {}
     },
     //通过按钮移动板块 (暂时停用)
     moveModule(state, data) {

src/styles/theme/body/index/banner/list/style1.less

@@ -0,0 +1,108 @@
+.bannerItemBox {
+    position: relative;
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        left: 60px;
+        bottom: 16px;
+        height: 30px;
+        line-height: 30px;
+        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: 100;
+        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: -32px;
+        }
+        /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: -32px;
+        }
+        /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;
+    }
+}

src/styles/theme/body/index/headLine/style1.less

@@ -0,0 +1,37 @@
+.headLineStyle1 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #004564;
+        margin-bottom: 10px;
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color:#333333;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+

src/styles/theme/body/index/headLine/style2.less

@@ -0,0 +1,35 @@
+.headLineStyle2 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #004564;
+        margin-bottom: 10px;
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color:#333333;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}

src/styles/theme/foot/style1.less

@@ -0,0 +1,129 @@
+.componentBorder {
+    border: 2px dashed #999;
+}
+.footerStyle1 {
+    width: 100%;
+    margin:0 auto;
+    .imgLinkBox {
+        width:1200px;
+        height:140px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        overflow: hidden;
+        margin:0 auto;
+        margin-bottom: 20px;
+        box-sizing: content-box;
+        img {
+            width:170px;
+            height:60px;
+            margin-right: 36px;
+            display: block;
+            margin-bottom: 20px;
+            &:nth-child(6n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .textLinkBox {
+        width: 1200px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        box-sizing: content-box;
+        .textLinkBoxLeft {
+            color: #333;
+            font-weight: bold;
+            span {
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+        .textLinkBoxRight {
+            width: 1083px;
+            color:#333;
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            span {
+                margin-right: 50px;
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .footerMenuBox {
+        border-bottom: none;
+        background-color: #1C5468;
+        .footerMenu {
+            width: 1200px;
+            margin:0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            div{
+                color:#fff;
+                font-size: 14px;
+                font-weight: bold;
+                width: 200px;
+                border-right: 1px solid #193D4A;
+                text-align: center;
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .footerInfoBox {
+        width:1200px;
+        padding-bottom: 30px;
+        margin:0 auto;
+        box-sizing: content-box;
+        .footerInfoBoxContent {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .footerInfoBoxContentLeft {
+                width: 10%;
+                box-sizing: border-box;
+                padding-right: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+            .footerInfoBoxContentMain {
+                padding-top: 40px;
+                font-size: 14px;
+                text-align: center;
+                div {
+                    text-align: center;
+                    padding-bottom: 10px;
+                    color: #333;
+                }
+            }
+            .footerInfoBoxContentRight {
+                width: 10%;
+                box-sizing: border-box;
+                padding-left: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+        .footerInfoBoxBottom {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 40px;
+            img {
+                width: 10%;
+                display: block;
+                margin-right: 10px;
+            }
+        }
+    }
+}

src/styles/theme/foot/style2.less

@@ -0,0 +1,129 @@
+.componentBorder {
+    border: 2px dashed #999;
+}
+.footerStyle2 {
+    width: 100%;
+    margin:0 auto;
+    .imgLinkBox {
+        width:1200px;
+        height:140px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        overflow: hidden;
+        margin:0 auto;
+        margin-bottom: 20px;
+        box-sizing: content-box;
+        img {
+            width:170px;
+            height:60px;
+            margin-right: 36px;
+            display: block;
+            margin-bottom: 20px;
+            &:nth-child(6n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .textLinkBox {
+        width: 1200px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        box-sizing: content-box;
+        .textLinkBoxLeft {
+            color: #333;
+            font-weight: bold;
+            span {
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+        .textLinkBoxRight {
+            width: 1083px;
+            color:#333;
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            span {
+                margin-right: 50px;
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .footerMenuBox {
+        border-bottom: none;
+        background-color: #2F7ADD;
+        .footerMenu {
+            width: 1200px;
+            margin:0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            div{
+                color:#fff;
+                font-size: 14px;
+                font-weight: bold;
+                width: 200px;
+                text-align: center;
+                border-right: 1px solid #1962C3;
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .footerInfoBox {
+        width:1200px;
+        padding-bottom: 30px;
+        margin:0 auto;
+        box-sizing: content-box;
+        .footerInfoBoxContent {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .footerInfoBoxContentLeft {
+                width: 10%;
+                box-sizing: border-box;
+                padding-right: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+            .footerInfoBoxContentMain {
+                padding-top: 40px;
+                font-size: 14px;
+                text-align: center;
+                div {
+                    text-align: center;
+                    padding-bottom: 10px;
+                    color: #333;
+                }
+            }
+            .footerInfoBoxContentRight {
+                width: 10%;
+                box-sizing: border-box;
+                padding-left: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+        .footerInfoBoxBottom {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 40px;
+            img {
+                width: 10%;
+                display: block;
+                margin-right: 10px;
+            }
+        }
+    }
+}

src/styles/theme/head/style1.less

@@ -0,0 +1,62 @@
+//编辑边框
+.componentBorder {
+    border: 2px dashed #999;
+}
+//风格1
+.headStyle1 {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    .headTopBox {
+        width: 100%;
+        height: 200px;
+        background: url('http://img.bjzxtw.org.cn/pre/image/png/20250527/174830610715978.png') top repeat-x;
+        .headTopBoxBg {
+            width: 1200px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            margin: 0 auto;
+            color: #666666;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .headTopInfoLeft {
+                font-size: 12px;
+                color:#666666;
+            }
+            .headTopInfoRight {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .headInfoItem {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 10px;
+                    cursor: pointer;
+                    img {
+                        margin-right: 5px;
+                    }
+                }
+                .headInfoItem:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        .headLogoBox {
+            width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            height: 170px;
+            align-items: center;
+            justify-content: space-between;
+            .headAdTopBox {
+                img{
+                    display: block;
+                }
+            }
+        }
+    }
+}

src/styles/theme/menu/style1.less

@@ -0,0 +1,80 @@
+.menuStyle1 {
+    width: 100%;
+    height: 130px;
+    background: #1C5468;
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+    .menuBoxBg {
+        width: 1200px;
+        height: 130px;
+        background: #1C5468;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .menuBox {
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            div {
+                width: 12.5%;
+                cursor: pointer;
+                box-sizing: border-box;
+                font-size: 14px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-align: center;
+                color: #fff;
+                background: #1C5468;
+                border-right: #002D41 1px solid;
+                border-left: #29799D 1px solid;
+                margin-bottom: 15px;
+                /* 当是第17个及以后的div时去掉margin-bottom */
+                &:nth-child(n+17) {
+                    margin-bottom: 0;
+                }
+                /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                &:nth-child(8n+1) {
+                    border-left: none;
+                }
+                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                &:nth-child(8n) {
+                    border-right: none;
+                }
+                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+            input {
+                margin-right: 10px;
+            }
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}

src/styles/theme/menu/style2.less

@@ -0,0 +1,80 @@
+.menuStyle2 {
+    width: 100%;
+    height: 130px;
+    background: #2F7ADD;
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+    .menuBoxBg {
+        width: 1200px;
+        height: 130px;
+        background: #2F7ADD;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .menuBox {
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            div {
+                width: 12.5%;
+                cursor: pointer;
+                box-sizing: border-box;
+                font-size: 14px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-align: center;
+                color: #fff;
+                background: #2F7ADD;
+                border-right: #1A63C4 1px solid;
+                border-left: #4C92EF 1px solid;
+                margin-bottom: 15px;
+                /* 当是第17个及以后的div时去掉margin-bottom */
+                &:nth-child(n+17) {
+                    margin-bottom: 0;
+                }
+                /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                &:nth-child(8n+1) {
+                    border-left: none;
+                }
+                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                &:nth-child(8n) {
+                    border-right: none;
+                }
+                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+            input {
+                margin-right: 10px;
+            }
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}

src/views/template/page/pageArticle.vue

@@ -48,8 +48,8 @@
               <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
             </div>
             <!-- 4.广告模块 -->
-            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-              <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            <div v-if="item.type == 'adSector'" class="moduleBox">
+              <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
             </div>
             <!-- 5.焦点图模块 -->
             <div v-if="item.type == 'bannerSector'" class="moduleBox">
@@ -104,12 +104,12 @@ import headSector from '../style/sector/head/1.vue';
 import menuSector from '../style/sector/menu/1.vue';
 //底部
 import footerSector from '../style/sector/foot/1.vue';
+//通栏组件
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
 
 
 
-
-import imgTitleSector from '../style/sector/4.vue';//广告
-import bannerSector from '../style/sector/5.vue';//焦点图
 import manyPictureSector from '../style/sector/6.vue';//多图
 import commentSector from '../style/sector/7.vue';//评论
 import listSector from '../style/sector/8.vue';//文章列表
@@ -126,8 +126,7 @@ export default {
     //板块组件 style1
     headSector,
     menuSector,
-    imgTitleSector,
-    bannerSector,
+    adSector,
     manyPictureSector,
     commentSector,
     listSector,

src/views/template/page/pageIndex.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <!-- 1.页头板块 -->
+        <!-- 全局组件：页头 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
             <headSector />
         </div>
-        <!-- 2.导航板块 -->
+        <!-- 全局组件：导航 -->
         <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
             <menuSector />
         </div>
@@ -27,7 +27,7 @@
                 :layout.sync="this.$store.state.template.pageData.index" 
                 :col-num="12" 
                 :row-height="rowHeight"
-                :margin="[0, 0]" 
+                :margin="[0,0]" 
                 :is-draggable="true" 
                 :is-resizable="true" 
                 :key="this.$store.state.template.gridKey"
@@ -43,20 +43,29 @@
                     :is-resizable="false"
                 >
                     <div class="grid-item-content">
+                        <!--右侧悬浮按钮-->
                         <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
                             <!-- 移动板块-->
                             <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
                             <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
                         </div>
-                        <!-- 4.广告模块 -->
-                        <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-                            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        <!-- 1.广告通栏 -->
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        <!-- 5.焦点图模块 -->
+                         <!-- 2.头条通栏 -->
+                         <div v-if="item.type == 'headLineSector'" class="moduleBox">
+                            <headLineSector :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" />
                         </div>
+
+
+
+
                         <!-- 6.多图模块 -->
                         <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
                             <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
@@ -81,8 +90,9 @@
                 </grid-item>
             </grid-layout>
         </div>
+
+        <!-- 全局组件：页尾 -->
         <div class="FixedModuleBoxBottom">
-            <!-- 3.页尾模块 -->
             <footerSector />
         </div>
     </div>
@@ -93,37 +103,50 @@
 //引入公用样式
 import '@/styles/global.less';
 import { GridLayout, GridItem } from "vue-grid-layout";
-//页面公用组件 end------------------------------------------------------------>
+//1.页面公用组件 end------------------------------------------------------------>
 
-//自助建站组件 start------------------------------------------------------------>
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
 //顶部
 import headSector from '../style/sector/head/1.vue';
 //一级菜单导肮
 import menuSector from '../style/sector/menu/1.vue';
 //底部
 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';
+
+
+
+
 
 
 
 
-import imgTitleSector from '../style/sector/4.vue';//广告
-import bannerSector from '../style/sector/5.vue';//焦点图
 import manyPictureSector from '../style/sector/6.vue';//多图
 import commentSector from '../style/sector/7.vue';//评论
 import listSector from '../style/sector/8.vue';//文章列表
 import onlyImgSector from '../style/sector/9.vue';//纯图片组合
 import friendShipLinkSector from '../style/sector/10.vue';//友情链接
-//自助建站组件 end------------------------------------------------------------>
+//2.引入自助建站组件 end------------------------------------------------------------>
 
 
 export default {
     components: {
-        GridLayout,
-        GridItem,
-        //板块组件 style1
-        headSector,
-        menuSector,
-        imgTitleSector,
+        GridLayout,//画布
+        GridItem,//画布组件
+        headSector,//全局页头
+        menuSector,//全局导航
+        adSector,//通栏广告
+        headLineSector,//首页头条
+
+
+
         bannerSector,
         manyPictureSector,
         commentSector,
@@ -266,6 +289,7 @@ export default {
 
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
+
 .grid-item-content {
     display: flex;
     align-items: center;
@@ -278,7 +302,7 @@ export default {
     .grid-tools-menu {
         position: absolute;
         top: 0;
-        right: 0;
+        right:10px;
         z-index: 99;
         display: flex;
         align-items: center;
@@ -292,6 +316,9 @@ export default {
             font-size: 30px;
             cursor: pointer;
             color: #999;
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
             // display: flex;
             // align-items: center;
             // justify-content: center;

src/views/template/page/pageList.vue

@@ -50,8 +50,8 @@
                             <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
                         </div>
                         <!-- 4.广告模块 -->
-                        <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-                            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
                         <!-- 8.双联文章列表模块 -->
                         <div v-if="item.type == 'listSector'" class="moduleBox">
@@ -90,13 +90,12 @@ import headSector from '../style/sector/head/1.vue';
 import menuSector from '../style/sector/menu/1.vue';
 //底部
 import footerSector from '../style/sector/foot/1.vue';
+//通栏组件
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
 
 
 
-
-
-import imgTitleSector from '../style/sector/4.vue';//广告
-import bannerSector from '../style/sector/5.vue';//焦点图
 import manyPictureSector from '../style/sector/6.vue';//多图
 import commentSector from '../style/sector/7.vue';//评论
 import listSector from '../style/sector/8.vue';//文章列表
@@ -113,8 +112,8 @@ export default {
         //板块组件 style1
         headSector,
         menuSector,
-        imgTitleSector,
-        bannerSector,
+        adSector,
+        
         manyPictureSector,
         commentSector,
         listSector,

src/views/template/public/atWork.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="atWorkBox">
+        <div class="atWorkStyle1" v-if="dataStyle == 1" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
+            <div class="atWorkImgBox">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中">
+                <div class="atWorkTitle">此样式开发中，暂不可用！</div>
+            </div>
+        </div>
+        <div class="atWorkStyle2" v-if="dataStyle == 2" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
+            <div class="atWorkImgBox">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中">
+                <div class="atWorkTitle">此样式开发中，暂不可用！</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataStyle: {
+            type: Number,
+            default: 0
+        },
+        dataWidth: {
+            type: Number,
+            default: 0
+        },
+        dataHeight: {
+            type: Number,
+            default: 0 
+        },
+    },
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .atWorkBox {
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        .atWorkStyle1 {
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                display: block;
+                margin: 0 auto;
+                margin-bottom: 20px;
+            }
+            .atWorkTitle {
+                font-size: 16px;
+                color: #999;
+                font-weight: bold;
+                text-align: center;
+            }
+        }
+        .atWorkStyle2 {
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            .atWorkImgBox {
+                display:flex;
+                align-items: center;
+                justify-content: center;
+            }
+            img {
+                display: block;
+                margin-right: 20px;
+            }
+            .atWorkTitle {
+                font-size: 16px;
+                color: #999;
+                font-weight: bold;
+                text-align: center;
+            }
+        }
+    }
+</style>

src/views/template/public/componentWindow.vue

@@ -1,232 +1,127 @@
 <template>
-  <div class="componentWindowBox">
-    <!--开发助手-->
-   <div class="testAssistant">
-      <div class="testAssistantTitle">
-        代码助手：
-      </div>
-      <div class="testAssistantContent">
-        <div class="testAssistantContentItem">
-          <div>当前板块id:</div>
-          <div>{{this.$store.state.template.editSectorId}}</div>
-        </div>
-        <div class="testAssistantContentItem">
-          <div>当前板块所在的页面:</div>
-          <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
-          <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
-          <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
-          <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
-          <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
-          <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
-          <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
-        </div>
-        <div class="testAssistantContentItem">
-          <div>当前组件在此板块中的位置:</div>
-          <div>{{this.$store.state.template.editComponentSort}}</div>
-        </div>
-        <div class="testAssistantContentItem">
-          <div>当前板块在Json数据中的位置:</div>
-          <div>{{this.$store.state.template.editDataSort}}</div>
-        </div>
-        <!--base0.0.1 如果展示原组件样式 会导致删除的时候 找不到content的数据非常奇怪 但是什么都不影响-->
-        <!-- <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div> -->
-        <div class="testAssistantContentItem">
-          <div>当前组件样式:</div>
-          <div>{{this.$store.state.template.editComponentStyle}}</div>
-        </div>
-      </div>
-    </div>
-    <div class="componentStyleBox">
-      <div class="componentStyleBoxContent">
-        <!--1.网站核心大标题组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/mainStyle1.png"/>
+    <div class="componentWindowBox">
+        <!--开发助手-->
+        <!-- <div class="testAssistant">
+            <div class="testAssistantTitle">
+                代码助手：
+            </div>
+            <div class="testAssistantContent">
+                <div class="testAssistantContentItem">
+                    <div>当前板块id:</div>
+                    <div>{{this.$store.state.template.editSectorId}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/mainStyle2.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前板块所在的页面:</div>
+                    <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 6">底部列表页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 7">底部详情页</div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--1.网站核心大标题组件 end---------------------------------------->
-        <!--2.板块文字标题 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/title1.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--2.板块文字标题 end---------------------------------------->
-        <!--3.广告组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/style1imgTitle.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前组件在此板块中的位置:</div>
+                    <div>{{this.$store.state.template.editComponentSort}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/style2imgTitle.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前板块在Json数据中的位置:</div>
+                    <div>{{this.$store.state.template.editDataSort}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
-                  <img src="@/assets/template/component/style3imgTitle.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前组件样式:</div>
+                    <div>{{this.$store.state.template.editComponentStyle}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
-                  <img src="@/assets/template/component/style4imgTitle.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--4.banner组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/banner_pic1.png"/>
-                </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/banner_pic2.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--4.banner组件 end---------------------------------------->
-        <!--5.tabs start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/tabsList1.png"/>
-                </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/tabsList2.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--5.tabs end---------------------------------------->
-        <!--6.list列表组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/list1.png"/>
-                </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/list2.png"/>
-                </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
-                  <img src="@/assets/template/component/list3.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--6.list列表组件 end---------------------------------------->
-        <!--7.staticHtml静态组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/fivePicture.png"/>
+            </div>
+        </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)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png"/>
+                        <div class="componentScrollBoxItemTitle">大标题带三个子标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748935989462533.png"/>
+                        <div class="componentScrollBoxItemTitle">大标题带二个子标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748936908630352.png"/>
+                        <div class="componentScrollBoxItemTitle">大标题一个子标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748936918177835.png"/>
+                        <div class="componentScrollBoxItemTitle">只显示大标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748937475668303.png"/>
+                        <div class="componentScrollBoxItemTitle">滚动显示三个大标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748937484282250.png"/>
+                        <div class="componentScrollBoxItemTitle">滚动显示两个大标题</div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--7.staticHtml静态组件 end---------------------------------------->
-        <!--8.表单组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/form1.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--8.表单组件 end---------------------------------------->
-        <!--9.友情链接组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 9" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/linkStyle1.png"/>
+                <!--1.头条组件 end---------------------------------------->
+
+                <!--2.焦点图组件 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBoxStyle2">
+                    <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/20250604/174901939842760.jpg"/>
+                            <div class="componentScrollBoxItemTitle">底部显示当前页码</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--9.友情链接组件 end---------------------------------------->
-        <!--10.列表页-主文章列表 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/list/list3style.png"/>
+                <!--2.焦点图组件 end---------------------------------------->
+
+                <!--3.焦点图组件 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBoxStyle3">
+                    <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/20250604/1749019582186582.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/20250604/1749019602825563.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/20250604/1749019612825652.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/20250604/1749019620385462.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/20250604/174901963225883.jpg"/>
+                            <div class="componentScrollBoxItemTitle">不加粗标题</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
+                <!--3.焦点图组件 start---------------------------------------->
+
+
+
+
+
+            </div>
         </div>
-        <!--10.列表页-主文章列表 end---------------------------------------->
-        <!--11.详情页-主文章详情 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 11" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/article/article1style.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
+        <div class="componentWindowBoxFooter">
+            <el-button type="info" @click="closeEditWindow">取消</el-button>
+            <el-button type="primary" @click="submitData">确定</el-button>
         </div>
-        <!--11.详情页-主文章详情 end---------------------------------------->
-      </div>
-    </div>
-    <div class="componentWindowBoxFooter">
-      <el-button type="info" @click="closeEditWindow">取消</el-button>
-      <el-button type="primary" @click="submitData">确定</el-button>
     </div>
-  </div>
 </template>
 
 <script>
@@ -266,46 +161,135 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .componentWindowBox {
-    .componentStyleBox {
-      height: 220px;
-      margin-bottom: 20px;
-      overflow-x: auto;
-      overflow-y: hidden;
-      clear: both;
-      .componentScrollBox {
-        height: 200px;
-        display: flex; /* 使用 flex */
-        flex-wrap: wrap; /* 换行 */
-        .componentScrollBoxItem {
-          width: 200px;
-          height: 200px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin-right: 10px;
-          background: #F5F7FB;
-          border:1px solid #F5F7FB;
-          overflow: hidden;
-          img {
-            width: 200px;
-            display: block;
-          }
-          &:hover {
-            border:1px solid #19499F;
-            background: #e5e5ff;
-            cursor: pointer;
-          }
-          transition: all 0.3s;
+.componentWindowBoxFooter {
+    text-align: right;
+}
+
+//1.头条样式选择
+.componentStyleBox {
+    .componentStyleBoxContent {
+        height: 400px;
+        margin-bottom: 30px;
+        overflow-y: auto;
+        padding-right: 10px;
+
+        //样式 一行一个
+        .componentScrollBoxStyle1 {
+            .componentScrollBoxItem {
+                box-sizing: border-box;
+                cursor: pointer;
+                border:2px solid #fff;
+                padding: 8px;
+                background: #fff;
+                margin-bottom: 20px;
+                .componentScrollBoxItemTitle {
+                    text-align: center;
+                    font-size: 14px;
+                    color: #333;
+                    margin-top: 10px;
+                    font-weight: bold;
+                }
+                img {
+                    display: block;
+                    width: 100%;
+                }
+            }
+            .active {
+                border:2px dashed #5570F1;
+                padding: 8px;
+                background: #e5e5ff;
+                transition: all 0.5s;
+            }
         }
-        .active {
-          border:1px solid #19499F;
-          background: #e5e5ff;
+
+        //一行两个
+        .componentScrollBoxStyle2 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            .componentScrollbigBog{
+                width: 50%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                &:nth-child(odd) {
+                    padding-right: 10px;
+                }
+                &:nth-child(even) {
+                    padding-left: 10px;
+                }
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
+        }
+
+        //一行三个
+        .componentScrollBoxStyle3 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            .componentScrollbigBog{
+                width: 33%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                &:nth-child(odd) {
+                    padding-right: 10px;
+                }
+                &:nth-child(even) {
+                    padding-left: 10px;
+                }
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
         }
-      }
-    }
-    .componentWindowBoxFooter {
-      text-align: right;
     }
-  }
+}
+
 </style>

src/views/template/public/convertBtn.vue

@@ -31,31 +31,65 @@ export default {
   },
   methods: {
     openComponentListWindow(){
-      //判断编辑的是哪个页面的组件style
-      let style = 0;
-      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==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){}
 
-      let data = {
-        id:this.id,
-        dataSort:this.dataSort,
-        sort:this.sort,
-        type:this.type,
-        style:style
-      }
-      console.log(data);
-      this.$store.commit('template/setComponentStyleStatus',data);
+        //遇到过莫名其妙获取不到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)
+        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==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){}
+
+        let data = {
+            id:this.id,
+            dataSort:this.dataSort,
+            sort:this.sort,
+            type:this.type,
+            style:style
+        }
+        console.log(data);
+        this.$store.commit('template/setComponentStyleStatus',data);
     }
   },
   mounted() {
@@ -75,11 +109,12 @@ export default {
     cursor: pointer;
     margin: 5px;
     color: #666;
-    background: rgba(255,255,255,0.5);
-    border-radius: 5px;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
+    border: 2px dashed #999;
+    border-radius: 8px;
+    background-color: #fff1cc;
+    width: 38px;
+    height: 38px;
+    line-height: 38px;
     text-align: center;
     font-size: 30px;
     transition: all 0.3s;

src/views/template/public/editBtn.vue

@@ -19,7 +19,7 @@ export default {
       type:Number,
       default:0
     },
-    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+    type:{//组件类型 1=新闻 2=广告 
       type:Number,
       default:0
     },
@@ -27,6 +27,10 @@ export default {
       type:Number,
       default:0
     },
+    sizeImg:{
+      type:Number,
+      default:0
+    },
     y: {
       type:Number,
       default:0
@@ -45,6 +49,7 @@ export default {
         sort:this.sort,
         type:this.type,
         size:this.size,
+        sizeImg:this.sizeImg,
         y:this.y
       }
       console.log(data);
@@ -52,8 +57,8 @@ export default {
       this.$store.commit('template/setEditWindowStatus',data);
       //设置组件回显数据
       this.$store.commit('template/setComponentViewData',data);
-      //获取全部导航
-      this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
+    //   //获取全部导航
+    //   this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
     }
   },
   mounted() {
@@ -73,16 +78,16 @@ export default {
     cursor: pointer;
     margin: 5px;
     color: #666;
-    //border: 1px solid #000;
-    border-radius: 5px;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
+    border: 2px dashed #999;
+    border-radius: 8px;
+    background-color: #fff1cc;
+    width: 38px;
+    height: 38px;
+    line-height: 38px;
     text-align: center;
     font-size: 30px;
     transition: all 0.3s;
     z-index: 999;
-    background: rgba(255,255,255,0.5);
     &:hover {
       color: #333;
     }

src/views/template/public/editWindow.vue

@@ -19,8 +19,8 @@
             <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
             <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
             <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
-            <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
-            <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+            <div v-if="this.$store.state.template.pageStatus == 6">底部列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 7">底部详情页</div>
           </div>
           <div class="testAssistantContentItem">
             <div>当前组件在此板块中的位置:</div>
@@ -37,13 +37,13 @@
           <div class="testAssistantContentItem">
             <div>当前组件的数据类型:</div>
             <div v-if="this.$store.state.template.editComponentType == 1">新闻列表</div>
-            <div v-if="this.$store.state.template.editComponentType == 2">新闻选项卡</div>
-            <div v-if="this.$store.state.template.editComponentType == 3">广告</div>
-            <div v-if="this.$store.state.template.editComponentType == 4">友情链接</div>
+            <div v-if="this.$store.state.template.editComponentType == 2">广告</div>
+            <!-- <div v-if="this.$store.state.template.editComponentType == 3">新闻选项卡</div> -->
+            <!-- <div v-if="this.$store.state.template.editComponentType == 4">友情链接</div>
             <div v-if="this.$store.state.template.editComponentType == 6">静态html组件</div>
             <div v-if="this.$store.state.template.editComponentType == 7">文本</div>
             <div v-if="this.$store.state.template.editComponentType == 8">评论组件</div>
-            <div v-if="this.$store.state.template.editComponentType == 9">页面必备组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 9">页面必备组件</div> -->
           </div>
           <div class="testAssistantContentItem">
             <div>展示条数:</div>
@@ -74,12 +74,11 @@
         </el-form>
       </div>
       <!--2.tabs类型-->
-      <div v-if="this.$store.state.template.editComponentType == 2">
+      <!-- <div v-if="this.$store.state.template.editComponentType == 2">
         <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="新闻选项卡" disabled/>
           </el-form-item>
-          <!-- {{ this.$store.state.template.editWebsiteCategory }} -->
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
             <el-select v-model="form.type2data.pid_arr" multiple placeholder="请选择">
               <el-option
@@ -89,15 +88,14 @@
                 :value="item.value">
               </el-option>
             </el-select>
-            <!-- <el-cascader :key="moreParentKey" @change="handleCascaderChange" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader> -->
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
           </el-form-item>
         </el-form>
-      </div>
+      </div> -->
       <!--3.广告-->
-      <div v-if="this.$store.state.template.editComponentType == 3">
+      <div v-if="this.$store.state.template.editComponentType == 2">
         <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="广告" disabled/>
@@ -108,23 +106,23 @@
         </el-form>
       </div>
       <!--4.友情链接-->
-      <div v-if="this.$store.state.template.editComponentType == 4">
+      <!-- <div v-if="this.$store.state.template.editComponentType == 4">
         <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="友情链接暂不支持编辑" disabled/>
           </el-form-item>
         </el-form>
-      </div>
+      </div> -->
       <!--6.静态-->
-      <div v-if="this.$store.state.template.editComponentType == 6">
+      <!-- <div v-if="this.$store.state.template.editComponentType == 6">
         <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="静态组件暂不支持编辑" disabled/>
           </el-form-item>
         </el-form>
-      </div>
+      </div> -->
       <!--7.文字-->
-      <div v-if="this.$store.state.template.editComponentType == 7">
+      <!-- <div v-if="this.$store.state.template.editComponentType == 7">
         <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="文本" disabled/>
@@ -133,23 +131,23 @@
             <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
           </el-form-item>
         </el-form>
-      </div>
+      </div> -->
       <!--8.评论组件-->
-      <div v-if="this.$store.state.template.editComponentType == 8">
+      <!-- <div v-if="this.$store.state.template.editComponentType == 8">
         <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="评论组件暂不支持编辑" disabled/>
           </el-form-item>
         </el-form>
-      </div>
+      </div> -->
       <!--9.页面必备组件-->
-      <div v-if="this.$store.state.template.editComponentType == 9">
+      <!-- <div v-if="this.$store.state.template.editComponentType == 9">
         <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="页面必备组件不支持编辑" disabled/>
           </el-form-item>
         </el-form>
-      </div>
+      </div> -->
     </div>
     <div class="editWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>

src/views/template/style/components/banner/1.vue

@@ -1,69 +1,59 @@
 <template>
-  <div class="bannerItemBox">
-    <el-carousel height="226px">
-      <el-carousel-item :key="1">
-        <div class="bannerItemPositioningBox">
-          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
-          <img src="@/assets/template/component/banner1.png" /> 
-        </div>
-      </el-carousel-item>
-      <el-carousel-item :key="2">
-        <div class="bannerItemPositioningBox">
-          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
-          <img src="@/assets/template/component/banner2.png" /> 
-        </div>
-      </el-carousel-item>
-      <el-carousel-item :key="3">
-        <div class="bannerItemPositioningBox">
-          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
-          <img src="@/assets/template/component/banner3.png" /> 
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-  </div>
+    <div class="bannerItemBox">
+        <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>
 </template>
 
 <script>
+import '@/styles/theme/body/index/banner/style1.less';
 export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
+    props: {
 
-  },
+    },
+    data() {
+        return {
+            roll_num_this: 0,
+            roll_num_lang: 3,
+            imagelist: [
+                {
+                    id: 1,
+                    imgurl: 'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png',
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 2,
+                    imgurl: 'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png',
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+                {
+                    id: 3,
+                    imgurl: 'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png',
+                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
+                },
+            ]
+        };
+    },
+    methods: {
+        change_fun(the_1) {
+            this.roll_num_this = the_1
+        }
+    },
+    mounted() {
+
+    },
 };
 </script>
 
 <style scoped lang="less">
-  .bannerItemBox {
-    width: 100%;
-    .bannerItemPositioningBox {
-      position: relative;
-      height: 100%;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-      .shadowBox {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        width: 100%;
-        left: 0;
-        background: rgba(0,0,0,0.5);
-        color: #fff;
-        font-size: 14px;
-        padding: 10px;
-      }
-    }
-  }
-</style>
 
+</style>

src/views/template/style/components/banner/2.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="bannerItemBox">
-    <el-carousel height="226px">
-      <el-carousel-item :key="1">
-        <img src="@/assets/template/component/banner5.png" /> 
-      </el-carousel-item>
-      <el-carousel-item :key="2">
-        <img src="@/assets/template/component/banner4.png" />
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .bannerItemBox {
-    width: 100%;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>
-

src/views/template/style/components/banner/list/1.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="BannerListBoxStyle1">
+        <div>贵州大方县发生山体滑坡救援处置各项工作正在...</div>
+        <div>神舟二十号航天员乘组圆满完成第一次出舱活动</div>
+        <div>2025届济南市大学生毕业典礼举行 以城之名许“此城...</div>
+        <div>支持小微企业融资 国家金融监管总局等八部门联合发文</div>
+        <div>自然资源部对安徽湖北重庆启动地质灾害防御Ⅳ级响应</div>
+        <div>2025年1-4月职工医保个人账户共济人次1.33亿</div>
+        <div>多家平台调整“仅退款”规则，消费者权益会受影响吗？</div>
+        <div>中东欧国家博览会暨国际消费品博览会开幕式并致辞</div>
+        <div>减重如此艰难？那些年胖过的自己，为何还在影响现在...</div>
+        <div>中国团队研发出非接触式房颤检测系统 助心律失常早发...</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .BannerListBoxStyle1 {
+        div {
+            cursor: pointer;
+            font-size:18px;
+            color: #333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            height:26px;
+            line-height: 26px;
+            margin-bottom: 16px;
+            &:nth-child(1),&:nth-child(6){
+                color: #004564;
+                font-weight: bold;
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/banner/list/2.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="BannerListBoxStyle1">
+        <div>贵州大方县发生山体滑坡救援处置各项工作正在...</div>
+        <div>神舟二十号航天员乘组圆满完成第一次出舱活动</div>
+        <div>2025届济南市大学生毕业典礼举行 以城之名许“此城...</div>
+        <div>支持小微企业融资 国家金融监管总局等八部门联合发文</div>
+        <div>自然资源部对安徽湖北重庆启动地质灾害防御Ⅳ级响应</div>
+        <div>2025年1-4月职工医保个人账户共济人次1.33亿</div>
+        <div>多家平台调整“仅退款”规则，消费者权益会受影响吗？</div>
+        <div>中东欧国家博览会暨国际消费品博览会开幕式并致辞</div>
+        <div>减重如此艰难？那些年胖过的自己，为何还在影响现在...</div>
+        <div>中国团队研发出非接触式房颤检测系统 助心律失常早发...</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .BannerListBoxStyle1 {
+        div {
+            cursor: pointer;
+            font-size:18px;
+            color: #333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            height:26px;
+            line-height: 26px;
+            margin-bottom: 16px;
+            &:nth-child(1),&:nth-child(6){
+                color: #333333;
+                font-weight: bold;
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/headLine/1.vue

@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <div class="headLineStyle1">
+            <div class="headLineTitle">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+                <div>抢抓人工智能发展的历史性机遇</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/styles/theme/body/index/headLine/style1.less'
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    
+</style>
+

src/views/template/style/components/headLine/2.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="headLineStyle2">
+            <div class="headLineTitle">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748932387576488.png"/>
+                深入推进周边命运共同体建设 以人工智能引领科研范式变革
+            </div>
+            <div class="headLineContent">
+                <div>深刻理解新形势下中国周边工作的理念与行动</div>
+                <div>构建周边命运共同体 携手开创亚洲新未来</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/styles/theme/body/index/headLine/style2.less'
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    
+</style>
+

src/views/template/style/sector/5.vue

@@ -1,133 +0,0 @@
-<template>
-  <div :class="['bannerBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-    <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="1" :y="y"/>
-      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <mainTitleStyle1 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-        <mainTitleStyle2 />
-      </div>
-    </div>
-    <div class="itemBottomBox">
-      <div class="bannerLayerBox">
-        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="3" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="4"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-          <banner1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
-          <banner2Style />
-        </div>
-      </div>
-      <div :class="['NewsListBox', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort"  :sort="2" :type="2" :size="5" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="5"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
-          <tabs1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
-          <tabs2Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import mainTitleStyle1 from '../components/mainTitle/1.vue'
-import mainTitleStyle2 from '../components/mainTitle/2.vue'
-//banner组件
-import banner from '../components/banner.vue'
-import banner1Style from '../components/banner/1.vue'
-import banner2Style from '../components/banner/2.vue'
-//tabs组件
-import tabs1Style from '../components/tabs/1.vue'
-import tabs2Style from '../components/tabs/2.vue'
-
-export default {
-  components: {
-    //mainTitle,
-    banner,
-    editBtn,
-    convertBtn,
-    mainTitleStyle1,
-    mainTitleStyle2,
-    banner1Style,
-    banner2Style,
-    tabs1Style,
-    tabs2Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    },
-    y:{
-      type:Number,
-      default:0
-    },
-    dataSort:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .bannerBox {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 314px;
-    .componentBorder{
-      border: 2px dashed #999;
-    }
-    .itemTopBox {
-      position: relative;
-      //border: 2px dashed #999;
-      width: 80%;
-    }
-    .itemBottomBox {
-      width: 80%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 0 0 0;
-      padding-top: 20px;
-      .bannerLayerBox {
-        position: relative;
-        //border: 2px dashed #999;
-        width: 55%;
-        height: 226px;
-      }
-      .NewsListBox {
-        position: relative;
-        width: 45%;
-        //border: 2px dashed #999;
-        box-sizing: border-box;
-        padding-left: 20px;
-        height: 226px;
-      }
-    }
-    
-  }
-</style>

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

@@ -1,7 +1,7 @@
 <template>
-    <div :class="['imgTitleSectorBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
-        <div class="imgSectorBox">
-            <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1" :y="y" />
+    <div :class="['adSectorBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+        <div class="imgBox">
+            <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="2" :size="1" :y="y" />
             <div>
                 <div class="imgSector" v-if="this.$store.state.template.editWebsiteClass==1">
                     <img src="http://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png" alt="自助建站广告示例图">
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import editBtn from '../../public/editBtn.vue'
+import editBtn from '../../../../../public/editBtn.vue'
 
 export default {
     components: {
-        editBtn
+        editBtn,
     },
     props: {
         id: {
@@ -47,13 +47,16 @@ export default {
 .buildingBorder {
     border: 2px dashed #999;
 }
-.imgTitleSectorBox {
-    width: 100%;
+.adSectorBox {
+    width: 1200px;
+    height: 90px;
+    margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    box-sizing: content-box;
 
-    .imgSectorBox {
+    .imgBox {
         //border: 2px dashed #999;
         width: 1200px;
         position: relative;

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

@@ -0,0 +1,111 @@
+<template>
+    <div :class="['bannerBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+        <div :class="['bannerLayerBox', {componentBorder1: $store.state.template.previewStatus==false}]">
+            <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                <banner1Style/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 1">
+                <atWork :dataStyle="1" :dataWidth="720" :dataHeight="405" />
+            </div>
+        </div>
+        <!--新闻列表-->
+        <div :class="['NewsListBox', {componentBorder2: $store.state.template.previewStatus==false}]">
+            <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="3"/>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                <list1Style/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                <list2Style/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                <atWork :dataStyle="1" :dataWidth="450" :dataHeight="405" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import convertBtn from '../../../../../../public/convertBtn.vue'
+import banner1Style from '../../../../../../style/components/banner/1.vue'
+import list1Style from '../../../../../../style/components/banner/list/1.vue'
+import list2Style from '../../../../../../style/components/banner/list/2.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        convertBtn,
+        banner1Style,
+        list1Style,
+        list2Style,
+        atWork//组件研发中
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .buildingBorder{
+        border: 2px dashed #999;
+    }
+    .bannerBigBox{
+        width: 1200px;
+        height: 410px;
+        position: relative;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: content-box;
+
+        .componentBorder1,.componentBorder2 {
+            border: 2px dashed #999;
+        }
+        .componentBorder1 {
+            border-left: 0;
+            border-top: 0;
+            border-bottom: 0;
+        }
+        .componentBorder2 {
+            border-right: 0;
+            border-top: 0;
+            border-bottom: 0;
+        }
+
+        .bannerLayerBox {
+            width: 720px;
+            height: 410px;
+            .templateEditBtnBox {
+                left: 0;
+            }
+        }
+
+        .NewsListBox {
+            width: 450px;
+            height: 410px;
+            position: relative;
+            .templateEditBtnBox {
+                left: 0;
+            }
+        }
+    }
+</style>

src/views/template/style/sector/body/index/headLine/1200x140/1.vue

@@ -0,0 +1,65 @@
+<template>
+    <div :class="['headLineBigBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
+        <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+            <headLineStyle1/>
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+            <headLineStyle2/>
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+            <atWork :dataStyle="2" :dataWidth="1200" :dataHeight="135" />
+        </div>
+    </div>
+</template>
+
+<script>
+import convertBtn from '../../../../../../public/convertBtn.vue'
+import headLineStyle1 from '../../../../../../style/components/headLine/1.vue'
+import headLineStyle2 from '../../../../../../style/components/headLine/2.vue'
+
+import atWork from '../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        convertBtn,
+        headLineStyle1,
+        headLineStyle2,
+        atWork//组件研发中
+    },
+    props: {
+        id: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        dataSort: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.headLineBigBox {
+    width: 1200px;
+    height: 140px;
+    position: relative;
+    margin: 0 auto;
+    .templateEditBtnBox {
+        left: 0;
+    }
+}
+</style>

src/views/template/style/sector/foot/1.vue

@@ -93,6 +93,8 @@
 </template>
 
 <script>
+import '@/styles/theme/foot/style1.less';
+import '@/styles/theme/foot/style2.less';
 export default {
     props: {},
     components: {},
@@ -101,270 +103,9 @@ export default {
     },
     methods: {},
     mounted(){
-       //this.$store.state.template.webSiteFooterInfo
     }
 };
 </script>
 
 <style scoped lang="less">
-.componentBorder {
-    border: 2px dashed #999;
-}
-//风格1 start ---------------------------------------->
-.footerStyle1 {
-    width: 100%;
-    margin:0 auto;
-    .imgLinkBox {
-        width:1200px;
-        height:140px;
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        overflow: hidden;
-        margin:0 auto;
-        margin-bottom: 20px;
-        box-sizing: content-box;
-        img {
-            width:170px;
-            height:60px;
-            margin-right: 36px;
-            display: block;
-            margin-bottom: 20px;
-            &:nth-child(6n) {
-                margin-right: 0;
-            }
-        }
-    }
-    .textLinkBox {
-        width: 1200px;
-        margin:0 auto;
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        box-sizing: content-box;
-        .textLinkBoxLeft {
-            color: #333;
-            font-weight: bold;
-            span {
-                display: block;
-                margin-bottom: 20px;
-            }
-        }
-        .textLinkBoxRight {
-            width: 1083px;
-            color:#333;
-            display: flex;
-            align-items: flex-start;
-            flex-wrap: wrap;
-            span {
-                margin-right: 50px;
-                display: block;
-                margin-bottom: 20px;
-            }
-        }
-    }
-    .footerMenuBox {
-        border-bottom: none;
-        background-color: #1C5468;
-        .footerMenu {
-            width: 1200px;
-            margin:0 auto;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 50px;
-            div{
-                color:#fff;
-                font-size: 14px;
-                font-weight: bold;
-                width: 200px;
-                border-right: 1px solid #193D4A;
-                text-align: center;
-                &:last-child {
-                    border-right: none;
-                }
-            }
-        }
-    }
-    .footerInfoBox {
-        width:1200px;
-        padding-bottom: 30px;
-        margin:0 auto;
-        box-sizing: content-box;
-        .footerInfoBoxContent {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .footerInfoBoxContentLeft {
-                width: 10%;
-                box-sizing: border-box;
-                padding-right: 10px;
-                img {
-                    width: 100%;
-                    display: block;
-                }
-            }
-            .footerInfoBoxContentMain {
-                padding-top: 40px;
-                font-size: 14px;
-                text-align: center;
-                div {
-                    text-align: center;
-                    padding-bottom: 10px;
-                    color: #333;
-                }
-            }
-            .footerInfoBoxContentRight {
-                width: 10%;
-                box-sizing: border-box;
-                padding-left: 10px;
-                img {
-                    width: 100%;
-                    display: block;
-                }
-            }
-        }
-        .footerInfoBoxBottom {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-top: 40px;
-            img {
-                width: 10%;
-                display: block;
-                margin-right: 10px;
-            }
-        }
-    }
-}
-//风格1 end ---------------------------------------->
-
-//风格2 start ---------------------------------------->
-.footerStyle2 {
-    width: 100%;
-    margin:0 auto;
-    .imgLinkBox {
-        width:1200px;
-        height:140px;
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        overflow: hidden;
-        margin:0 auto;
-        margin-bottom: 20px;
-        box-sizing: content-box;
-        img {
-            width:170px;
-            height:60px;
-            margin-right: 36px;
-            display: block;
-            margin-bottom: 20px;
-            &:nth-child(6n) {
-                margin-right: 0;
-            }
-        }
-    }
-    .textLinkBox {
-        width: 1200px;
-        margin:0 auto;
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        box-sizing: content-box;
-        .textLinkBoxLeft {
-            color: #333;
-            font-weight: bold;
-            span {
-                display: block;
-                margin-bottom: 20px;
-            }
-        }
-        .textLinkBoxRight {
-            width: 1083px;
-            color:#333;
-            display: flex;
-            align-items: flex-start;
-            flex-wrap: wrap;
-            span {
-                margin-right: 50px;
-                display: block;
-                margin-bottom: 20px;
-            }
-        }
-    }
-    .footerMenuBox {
-        border-bottom: none;
-        background-color: #2F7ADD;
-        .footerMenu {
-            width: 1200px;
-            margin:0 auto;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 50px;
-            div{
-                color:#fff;
-                font-size: 14px;
-                font-weight: bold;
-                width: 200px;
-                text-align: center;
-                border-right: 1px solid #1962C3;
-                &:last-child {
-                    border-right: none;
-                }
-            }
-        }
-    }
-    .footerInfoBox {
-        width:1200px;
-        padding-bottom: 30px;
-        margin:0 auto;
-        box-sizing: content-box;
-        .footerInfoBoxContent {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .footerInfoBoxContentLeft {
-                width: 10%;
-                box-sizing: border-box;
-                padding-right: 10px;
-                img {
-                    width: 100%;
-                    display: block;
-                }
-            }
-            .footerInfoBoxContentMain {
-                padding-top: 40px;
-                font-size: 14px;
-                text-align: center;
-                div {
-                    text-align: center;
-                    padding-bottom: 10px;
-                    color: #333;
-                }
-            }
-            .footerInfoBoxContentRight {
-                width: 10%;
-                box-sizing: border-box;
-                padding-left: 10px;
-                img {
-                    width: 100%;
-                    display: block;
-                }
-            }
-        }
-        .footerInfoBoxBottom {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-top: 40px;
-            img {
-                width: 10%;
-                display: block;
-                margin-right: 10px;
-            }
-        }
-    }
-}
-//风格2 end ---------------------------------------->
 </style>

src/views/template/style/sector/head/1.vue

@@ -21,6 +21,8 @@
 </template>
 
 <script>
+import '@/styles/theme/head/style1.less';
+
 export default {
     props: {},
     data() {
@@ -36,66 +38,4 @@ export default {
 </script>
 
 <style scoped lang="less">
-//编辑边框
-.componentBorder {
-    border: 2px dashed #999;
-}
-//风格1
-.headStyle1 {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    .headTopBox {
-        width: 100%;
-        height: 200px;
-        background: url('http://img.bjzxtw.org.cn/pre/image/png/20250527/174830610715978.png') top repeat-x;
-        .headTopBoxBg {
-            width: 1200px;
-            height: 30px;
-            line-height: 30px;
-            font-size: 12px;
-            margin: 0 auto;
-            color: #666666;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .headTopInfoLeft {
-                font-size: 12px;
-                color:#666666;
-            }
-            .headTopInfoRight {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                .headInfoItem {
-                    display: flex;
-                    align-items: center;
-                    margin-right: 10px;
-                    cursor: pointer;
-                    img {
-                        margin-right: 5px;
-                    }
-                }
-                .headInfoItem:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
-        .headLogoBox {
-            width: 1200px;
-            margin: 0 auto;
-            display: flex;
-            height: 170px;
-            align-items: center;
-            justify-content: space-between;
-            .headAdTopBox {
-                img{
-                    display: block;
-                }
-            }
-        }
-    }
-}
 </style>

src/views/template/style/sector/menu/1.vue

@@ -24,6 +24,11 @@
 </template>
 
 <script>
+//样式1
+import '@/styles/theme/menu/style1.less';
+//样式2
+import '@/styles/theme/menu/style2.less';
+
 export default {
     props: {},
     data() {
@@ -41,169 +46,4 @@ export default {
 </script>
 
 <style scoped lang="less">
-//风格1 start ---------------------------------------->
-.menuStyle1 {
-    width: 100%;
-    height: 130px;
-    background: #1C5468;
-    .componentBorder {
-        border-left: 2px dashed #999;
-        border-right: 2px dashed #999;
-    }
-    .menuBoxBg {
-        width: 1200px;
-        height: 130px;
-        background: #1C5468;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .menuBox {
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            div {
-                width: 12.5%;
-                cursor: pointer;
-                box-sizing: border-box;
-                font-size: 14px;
-                height: 22px;
-                line-height: 22px;
-                text-align: center;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                text-align: center;
-                color: #fff;
-                background: #1C5468;
-                border-right: #002D41 1px solid;
-                border-left: #29799D 1px solid;
-                margin-bottom: 15px;
-                /* 当是第17个及以后的div时去掉margin-bottom */
-                &:nth-child(n+17) {
-                    margin-bottom: 0;
-                }
-                /* 每行的第一个（第1、9、17...个）去掉左边框 */
-                &:nth-child(8n+1) {
-                    border-left: none;
-                }
-                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
-                &:nth-child(8n) {
-                    border-right: none;
-                }
-                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
-                &:last-child {
-                    border-right: none;
-                }
-            }
-        }
-    }
-    .menuSectorInputBox {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 14px;
-        width: 80%;
-        margin: 0 auto;
-        border-top: none;
-        height: 50px;
-        .menuSectorInputBoxItem {
-            padding: 0 10px;
-            input {
-                margin-right: 10px;
-            }
-            .el-select {
-                margin-right: 10px;
-            }
-        }
-    }
-    .componentMenuBorder {
-        border: 2px dashed #999;
-    }
-}
-//风格1 end ---------------------------------------->
-
-//风格2 start ---------------------------------------->
-.menuStyle2 {
-    width: 100%;
-    height: 130px;
-    background: #2F7ADD;
-    .componentBorder {
-        border-left: 2px dashed #999;
-        border-right: 2px dashed #999;
-    }
-    .menuBoxBg {
-        width: 1200px;
-        height: 130px;
-        background: #2F7ADD;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .menuBox {
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            div {
-                width: 12.5%;
-                cursor: pointer;
-                box-sizing: border-box;
-                font-size: 14px;
-                height: 22px;
-                line-height: 22px;
-                text-align: center;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                text-align: center;
-                color: #fff;
-                background: #2F7ADD;
-                border-right: #1A63C4 1px solid;
-                border-left: #4C92EF 1px solid;
-                margin-bottom: 15px;
-                /* 当是第17个及以后的div时去掉margin-bottom */
-                &:nth-child(n+17) {
-                    margin-bottom: 0;
-                }
-                /* 每行的第一个（第1、9、17...个）去掉左边框 */
-                &:nth-child(8n+1) {
-                    border-left: none;
-                }
-                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
-                &:nth-child(8n) {
-                    border-right: none;
-                }
-                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
-                &:last-child {
-                    border-right: none;
-                }
-            }
-        }
-    }
-    .menuSectorInputBox {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 14px;
-        width: 80%;
-        margin: 0 auto;
-        border-top: none;
-        height: 50px;
-        .menuSectorInputBoxItem {
-            padding: 0 10px;
-            input {
-                margin-right: 10px;
-            }
-            .el-select {
-                margin-right: 10px;
-            }
-        }
-    }
-    .componentMenuBorder {
-        border: 2px dashed #999;
-    }
-}
-//风格2 end ---------------------------------------->
 </style>