自助建站临时保存

自助建站临时保存

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

@@ -33,37 +33,43 @@
             </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="sectorItemBox" 
+            @click="addModule('manyPictureSector', 47, manyPictureSector)"
+            @drag="drag('manyPictureSector', 47, manyPictureSector)"
+            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
+        >
             <div class="sectorItem">
-                <img src="@/assets/template/sector/moreServicesSector.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749085058737998.jpg" />
             </div>
-            <div class="sectorItemTitle">多图菜单</div>
+            <div class="sectorItemTitle">新闻图文组合1</div>
         </div>
-        <div class="sectorItemBox" @click="addModule('commentSector', 44, commentSector)"
-            @drag="drag('commentSector', 44, commentSector)" @dragend="dragend('commentSector', 44, commentSector)">
+        <div 
+            class="sectorItemBox"
+            @click="addModule('commentSector', 47, commentSector)"
+            @drag="drag('commentSector', 47, commentSector)" 
+            @dragend="dragend('commentSector', 47, commentSector)">
             <div class="sectorItem">
-                <img src="@/assets/template/sector/commentSector.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749170683104422.jpg" />
             </div>
-            <div class="sectorItemTitle">文章列表带评论</div>
+            <div class="sectorItemTitle">新闻图文组合2</div>
         </div>
-        <div class="sectorItemBox" @click="addModule('listSector', 33, listSector)"
-            @drag="drag('listSector', 33, listSector)" @dragend="dragend('listSector', 33, listSector)">
+        <div class="sectorItemBox" 
+            @click="addModule('listSector', 101, listSector)"
+            @drag="drag('listSector', 101, listSector)" 
+            @dragend="dragend('listSector', 101, listSector)"
+        >
             <div class="sectorItem">
-                <img src="@/assets/template/sector/newsSector.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" />
             </div>
-            <div class="sectorItemTitle">文章列表</div>
+            <div class="sectorItemTitle">新闻图文组合3</div>
         </div>
+
+
+
+
+        <!-- 
+        
         <div class="sectorItemBox" @click="addModule('onlyImgSector', 32, onlyImgSector)"
             @drag="drag('onlyImgSector', 32, onlyImgSector)" @dragend="dragend('onlyImgSector', 32, onlyImgSector)">
             <div class="sectorItem">
@@ -78,7 +84,7 @@
                 <img src="@/assets/template/sector/linkSector.png" />
             </div>
             <div class="sectorItemTitle">友情链接</div>
-        </div>
+        </div> -->
     </div>
 </template>
 
@@ -222,157 +228,262 @@ export default {
             },
             //添加banner模块 end---------------------------------------->
 
-
-
-
-
-
-
-
-
-
-
-
-            //添加多图板块 start---------------------------------------->
+            //两列新闻组合模块1 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,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 9,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
                     },
                     {
-                        component_type: 1,
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "tabsNews",
-                        sort: 4,
-                        componentData: {
-                            category_id: [],
-                            page: 1,
-                            pageSize: 3,
-                            listType: [
-                                "title",//标题
-                                "created_time",//创建时间
-                            ]
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 6,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
-                    },
+                    }
                 ]
             },
-            //添加多图板块 end---------------------------------------->
+            //两列新闻组合模块1 end---------------------------------------->
 
-            //文章列表带评论板块 end---------------------------------------->
+            //两列新闻组合模块2 end---------------------------------------->
             commentSector: {
                 sectorName: "commentSector",//板块名称
                 componentList: [
                     {
-                        component_type: 7, //纯文本
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "styleTitle",
-                        sort: 1,
-                        componentData: {
-                            text: "板块标题"
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
                     },
                     {
-                        component_type: 1,
-                        component_style: 2,//该组件使用哪个展示样式
-                        component_name: "tabsCalendarNews",
-                        sort: 2,
-                        componentData: {
-                            category_id: [],
-                            page: 1,
-                            pageSize: 6,
-                            listType: [
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
                                 "title",
-                                "created_time",
-                                "introduce"
-                            ]
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
-                    },
-                    {
-                        component_type: 8,
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "calendar", //评论组件无需提交数据
-                        sort: 3,
-                        componentData: {}
-                    },
+                    }
                 ]
             },
-            //文章列表带评论板块 end---------------------------------------->
+            //两列新闻组合模块2 end---------------------------------------->
 
-            //文章列表板块 start---------------------------------------->
+            //两列新闻组合模块3 start---------------------------------------->
             listSector: {
                 sectorName: "listSector",//板块名称
                 componentList: [
                     {
-                        component_type: 7,//纯文本
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "styleTitle",
-                        sort: 1,
-                        componentData: {
-                            text: "板块标题"
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
                     },
                     {
-                        component_type: 1,
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "listNews",
-                        sort: 2,
-                        componentData: {
-                            category_id: [],
-                            page: 1,
-                            pageSize: 5,
-                            listType: [
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
                                 "title",
-                                "created_time"
-                            ]
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
                     },
                     {
-                        component_type: 1,
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "listNews",
-                        sort: 3,
-                        componentData: {
-                            category_id: [],
-                            page: 1,
-                            pageSize: 5,
-                            listType: [
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
                                 "title",
-                                "created_time"
-                            ]
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
-                    },
+                    }
                 ]
             },
-            //文章列表板块 end---------------------------------------->
+            //两列新闻组合模块3 end---------------------------------------->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
             //纯图片组合 start---------------------------------------->
             onlyImgSector: {

src/store/modules/template.js

@@ -852,6 +852,7 @@ const mutations = {
                 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.name = data.data.name; //设置导航池名字
                 module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                 module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
 
@@ -887,6 +888,7 @@ 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.name = data.data.name; //设置导航池名字
                 module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                 module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
 
@@ -919,6 +921,7 @@ 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.name = data.data.name; //设置导航池名字
                 module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
                 module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
 

src/styles/theme/head/style1.less

@@ -53,6 +53,7 @@
             align-items: center;
             justify-content: space-between;
             .headAdTopBox {
+                position: relative;
                 img{
                     display: block;
                 }

src/views/template/page/pageArticle.vue

@@ -110,12 +110,12 @@ import adSector from '../style/sector/body/ad/1200x90/1.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';//友情链接
-import mainArticle from '../style/sector/12.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';//友情链接
+// import mainArticle from '../style/sector/12.vue';//文章详情
 //自助建站组件 end------------------------------------------------------------>
 
 
@@ -127,13 +127,13 @@ export default {
     headSector,
     menuSector,
     adSector,
-    manyPictureSector,
-    commentSector,
-    listSector,
-    onlyImgSector,
-    friendShipLinkSector,
+    // manyPictureSector,
+    // commentSector,
+    // listSector,
+    // onlyImgSector,
+    // friendShipLinkSector,
+    //mainArticle
     footerSector,
-    mainArticle
   },
   data() {
     return {

src/views/template/page/pageIndex.vue

@@ -62,30 +62,34 @@
                         <div v-if="item.type == 'bannerSector'" class="moduleBox">
                             <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-
-
-
-
-                        <!-- 6.多图模块 -->
+                        <!-- 4.新闻多图组合1 -->
                         <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
                             <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        <!-- 7.评论模块 -->
+                        <!-- 5.新闻多图组合2 -->
                         <div v-if="item.type == 'commentSector'" class="moduleBox">
                             <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
-                        <!-- 8.双联文章列表模块 -->
+                        <!-- 6.新闻多图组合3 -->
                         <div v-if="item.type == 'listSector'" class="moduleBox">
                             <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                         </div>
+
+
+
+
+                        
+                        
+
+
                         <!-- 9.纯图片组合模块 -->
-                        <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+                        <!-- <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
                             <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div>
+                        </div> -->
                         <!-- 10.友情链接模块 -->
-                        <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+                        <!-- <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
                             <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div>
+                        </div> -->
                     </div>
                 </grid-item>
             </grid-layout>
@@ -120,19 +124,18 @@ import adSector from '../style/sector/body/ad/1200x90/1.vue';
 import headLineSector from '../style/sector/body/index/headLine/1200x140/1.vue';
 //焦点图
 import bannerSector from '../style/sector/body/index/banner/1200x410/1.vue';
+//新闻图文组合1
+import manyPictureSector from '../style/sector/body/index/list/1200x470/1.vue';
+//新闻图文组合2
+import commentSector from '../style/sector/body/index/list/1200x470/2.vue';
+//新闻图文组合3
+import listSector from '../style/sector/body/index/list/1200x980/1.vue';
 
 
 
 
-
-
-
-
-import 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';//友情链接
+// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
+// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
 //2.引入自助建站组件 end------------------------------------------------------------>
 
 
@@ -144,15 +147,12 @@ export default {
         menuSector,//全局导航
         adSector,//通栏广告
         headLineSector,//首页头条
-
-
-
-        bannerSector,
-        manyPictureSector,
-        commentSector,
-        listSector,
-        onlyImgSector,
-        friendShipLinkSector,
+        bannerSector,//焦点图
+        manyPictureSector,//新闻图文组合1
+        commentSector,//新闻图文组合2
+        listSector,//新闻图文组合3
+        // onlyImgSector,
+        // friendShipLinkSector,
         footerSector
     },
     data() {

src/views/template/page/pageList.vue

@@ -96,12 +96,12 @@ import adSector from '../style/sector/body/ad/1200x90/1.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';//友情链接
-import mainListSector from '../style/sector/11.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';//友情链接
+// import mainListSector from '../style/sector/11.vue';//主文章列表
 //自助建站组件 end------------------------------------------------------------>
 
 
@@ -114,12 +114,12 @@ export default {
         menuSector,
         adSector,
         
-        manyPictureSector,
-        commentSector,
-        listSector,
-        mainListSector,
-        onlyImgSector,
-        friendShipLinkSector,
+        // manyPictureSector,
+        // commentSector,
+        // listSector,
+        // mainListSector,
+        // onlyImgSector,
+        // friendShipLinkSector,
         footerSector
     },
     data() {

src/views/template/public/componentWindow.vue

@@ -111,8 +111,172 @@
                 </div>
                 <!--3.焦点图组件 start---------------------------------------->
 
+                <!--4.两列布局新闻组件1 左侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 4" 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/20250605/1749102223295015.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/20250605/1749102232438519.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/20250605/1749102631511603.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/20250605/1749102640761677.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧标题加粗,右侧小图在上大图在下</div>
+                        </div>
+                    </div>
+                </div>
+                <!--4.两列布局新闻组件1 左侧 end---------------------------------------->
+
+                <!--5.两列布局新闻组件1 右侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 5" 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/20250605/1749112729438904.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/20250605/1749113028559940.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/20250605/1749113088790743.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/20250605/1749113088790743.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/20250605/1749114491210881.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,右侧标题带黑色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115022871339.jpg"/>
+                            <div class="componentScrollBoxItemTitle">右侧图片,左侧标题带黑色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 7 ? 'active' : '']" @click="selectUseStyleNumber(7)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115161954033.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,左侧标题不带标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 8 ? 'active' : '']" @click="selectUseStyleNumber(8)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115171142913.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,左侧标题不带标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 9 ? 'active' : '']" @click="selectUseStyleNumber(9)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/174911518234957.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文交错摆放样式1</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 10 ? 'active' : '']" @click="selectUseStyleNumber(10)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115193168545.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文交错摆放样式2</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 11 ? 'active' : '']" @click="selectUseStyleNumber(11)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115201985672.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文交错摆放样式3</div>
+                        </div>
+                    </div>
+                </div>
+                <!--5.两列布局新闻组件1 右侧 end---------------------------------------->
+
+                <!--6.两列布局新闻组件2 左侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 6" 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/20250606/1749176134863144.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/20250606/1749176145666694.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/20250606/1749176153747911.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/20250606/1749176160202729.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混合右下左上</div>
+                        </div>
+                    </div>
+                </div>
+                <!--6.两列布局新闻组件2 左侧 end---------------------------------------->
 
+                <!--7.两列布局新闻组件2 右侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 7" 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/20250606/1749178122927942.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/20250606/1749178130533785.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/20250606/1749178137907893.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/20250606/1749178143998493.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，标题在上</div>
+                        </div>
+                    </div>
+                </div>
+                <!--7.两列布局新闻组件2 右侧 end---------------------------------------->
+
+                <!--8.两列布局新闻组件3 左侧上半部分 start---------------------------------------->
+                <!--8.两列布局新闻组件3 左侧上半部分 end---------------------------------------->
+
+                <!--9.两列布局新闻组件3 左侧下半部分 start---------------------------------------->
+                <!--9.两列布局新闻组件3 左侧下半部分 end---------------------------------------->
 
+                <!--10.两列布局新闻组件3 右侧部分 start---------------------------------------->
+                <!--10.两列布局新闻组件3 右侧部分 end---------------------------------------->
 
 
             </div>
@@ -251,16 +415,11 @@ export default {
             display: flex;
             align-items: center;
             flex-wrap: wrap;
+            gap: 2%;  // 使用gap属性来控制元素之间的间距
             .componentScrollbigBog{
-                width: 33%;
+                width: 32%;
                 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;

src/views/template/public/convertBtn.vue

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

src/views/template/public/editBtn.vue

@@ -1,95 +1,95 @@
 <template>
-  <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
-    <i class="el-icon-setting"></i>
-  </div>
+    <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
+        <i class="el-icon-setting"></i>
+    </div>
 </template>
 
 <script>
 export default {
-  props: {
-    id: {
-      type:Number,
-      default:0
+    props: {
+        id: {
+            type:Number,
+            default:0
+        },
+        dataSort: {
+            type:Number,
+            default:0
+        },
+        sort:{
+            type:Number,
+            default:0
+        },
+        type:{//组件类型 1=新闻 2=广告 
+            type:Number,
+            default:0
+        },
+        size:{
+            type:Number,
+            default:0
+        },
+        sizeImg:{
+            type:Number,
+            default:0
+        },
+        y: {
+            type:Number,
+            default:0
+        }
     },
-    dataSort: {
-      type:Number,
-      default:0
+    data() {
+        return {
+        
+        };
     },
-    sort:{
-      type:Number,
-      default:0
+    methods: {
+        openEditWindow(){
+            let data = {
+                id:this.id,
+                dataSort:this.dataSort,
+                sort:this.sort,
+                type:this.type,
+                size:this.size,
+                sizeImg:this.sizeImg,
+                y:this.y
+            }
+            console.log(data);
+            //小助手
+            this.$store.commit('template/setEditWindowStatus',data);
+            //设置组件回显数据
+            this.$store.commit('template/setComponentViewData',data);
+            //   //获取全部导航
+            //   this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
+        }
     },
-    type:{//组件类型 1=新闻 2=广告 
-      type:Number,
-      default:0
+    mounted() {
+        
     },
-    size:{
-      type:Number,
-      default:0
-    },
-    sizeImg:{
-      type:Number,
-      default:0
-    },
-    y: {
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    openEditWindow(){
-      let data = {
-        id:this.id,
-        dataSort:this.dataSort,
-        sort:this.sort,
-        type:this.type,
-        size:this.size,
-        sizeImg:this.sizeImg,
-        y:this.y
-      }
-      console.log(data);
-      //小助手
-      this.$store.commit('template/setEditWindowStatus',data);
-      //设置组件回显数据
-      this.$store.commit('template/setComponentViewData',data);
-    //   //获取全部导航
-    //   this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
-    }
-  },
-  mounted() {
-    
-  },
 };
 </script>
 
 <style scoped lang="less">
-  .templateEditBtnBox {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    margin: 5px;
-    color: #666;
-    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;
-    &:hover {
-      color: #333;
+    .templateEditBtnBox {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin: 5px;
+        color: #666;
+        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;
+        &:hover {
+            color: #333;
+        }
     }
-  }
 </style>

src/views/template/public/editWindow.vue

@@ -1,434 +1,239 @@
 <template>
-  <div class="editWindowBox">
-    <div class="editWindowBoxContent">
-      <!--组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论-->
-      <!--开发助手-->
-      <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>当前组件在此画布中的位置:</div>
-            <div>{{this.$store.state.template.editSectorY}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>当前板块在Json数据中的位置:</div>
-            <div>{{this.$store.state.template.editDataSort}}</div>
-          </div>
-          <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 == 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>
-          <div class="testAssistantContentItem">
-            <div>展示条数:</div>
-            <div>{{this.$store.state.template.editComponentSize}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>回显导航池:</div>
-            <div v-if="this.$store.state.template.editComponentType == 1||this.$store.state.template.editComponentType == 2">
-              <span v-if="this.$store.state.template.componentViewData.pid_arr.length == 0">暂未选择导航</span>
-              <span v-else>{{this.$store.state.template.componentViewData.pid_arr}}</span>
+    <div class="editWindowBox">
+        <div class="editWindowBoxContent">
+            <!--组件类型 1=新闻 2=评论-->
+            <!--1.新闻-->
+            <div v-if="this.$store.state.template.editComponentType == 1">
+                <el-form :model="form.type1data" 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-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+                        <el-select v-model="form.type1data.pid_arr" filterable placeholder="请选择导航.." @change="changeNav">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.id"
+                                :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </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-item label="图片新闻条数：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.editComponentSizeImg" placeholder="请输入请求的条数" disabled/>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <!--2.广告-->
+            <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/>
+                    </el-form-item>
+                    <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+                        <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
+                    </el-form-item>
+                </el-form>
             </div>
-            <div v-else>无需回显</div>
-          </div>
         </div>
-      </div>
-      <!--1.普通新闻类型-->
-      <div v-if="this.$store.state.template.editComponentType == 1">
-        <el-form :model="form.type1data" 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-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-cascader :key="oneParentKey" v-model="form.type1data.pid_arr" placeholder="请选择网站导航" :props="oneParentData" 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>
-      <!--2.tabs类型-->
-      <!-- <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>
-          <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
-                v-for="item in this.$store.state.template.editWebsiteCategory"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </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> -->
-      <!--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/>
-          </el-form-item>
-          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
-            <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!--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> -->
-      <!--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> -->
-      <!--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/>
-          </el-form-item>
-          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="titleName" class="custom-align-right">
-            <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
-          </el-form-item>
-        </el-form>
-      </div> -->
-      <!--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> -->
-      <!--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 class="editWindowBoxFooter">
-      <el-button type="info" @click="closeEditWindow">取消</el-button>
-      <el-button type="primary" @click="submitData">确定</el-button>
+        <div class="editWindowBoxFooter">
+            <el-button type="info" @click="closeEditWindow">取消</el-button>
+            <el-button type="primary" @click="submitData">确定</el-button>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import Vue from 'vue';  // 导入 Vue
 //监听vuex中的值
 export default {
-  props: {
+    props: {
 
-  },
-  data() {
-    let self = this;
-    const validatePid = (rule,value,callback) => {
-      console.log(value.length)
-      if (value.length === 0) {
-        callback(new Error('必须选择一个导航！'))
-      } else {
-        callback()
-      }
-    }
-    const validateEmpty = (rule,value,callback) => {
-      if (!value || value.trim() === "") {
-        callback(new Error('该项不能为空！'));
-      } else {
-        callback();
-      }
-    }
-    return {
-      formLabelWidth:"120px",
-      form:{
-        //单导航新闻
-        type1data:{
-          pid_arr:[],
-          pageSize:""
-        },
-        //tabs多导航新闻
-        type2data:{
-          pid_arr:[],
-          pageSize:""
-        },
-        //广告
-        type3data:{
-          adName:""
-        },
-        //文字
-        type7data:{
-          titleName:""
+    },
+    data() {
+        const validatePid = (rule,value,callback) => {
+            console.log(value.length)
+            if (value.length === 0) {
+                callback(new Error('必须选择一个导航！'))
+            } else {
+                callback()
+            }
         }
-      },
-      formRules:{
-        pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
-        adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
-        titleName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}]
-      },
-      //获取单个导航id start---------------------------------------->
-      oneParentKey:0,
-      oneParentData: {
-        checkStrictly: true,
-        lazy: true,
-        async lazyLoad (node, resolve) {
-          const { level, data } = node;
-          if (data && data.children && data.children.length !== 0) {
-            return resolve(node)
-          }
-          console.log(level)
-          let parentId = level == 0 ? 0 : data.value
-          let parames = {
-            'pid':parentId
-          }
-          self.$store.dispatch('pool/categoryList',parames).then(res=> {
-            if (res.data) {
-              const nodes = res.data.map(item => ({
-                value: item.id,
-                label: item.name,
-                leaf: level >= 3,
-                children: []
-              }))
-              resolve(nodes)
+        const validateEmpty = (rule,value,callback) => {
+            if (!value || value.trim() === "") {
+                callback(new Error('该项不能为空！'));
+            } else {
+                callback();
             }
-          })
         }
-      },
-      //获取单个导航id end---------------------------------------->
-      //获取多个导航id start---------------------------------------->
-      moreParen:[],
-      // base 0.0.1 无法回显多选导航池
-      // 这里不能使用级联选择器，因为这里只能选择同级导航，你选了不同级的导航后端就乱套了
-      // moreParentData: {
-      //   checkStrictly: true,
-      //   multiple: true,
-      //   lazy: true,
-      //   async lazyLoad (node, resolve) {
-      //     const { level, data } = node;
-      //     if (data && data.children && data.children.length !== 0) {
-      //       return resolve(node)
-      //     }
-      //     console.log(level)
-      //     let parentId = level == 0 ? 0 : data.value
-      //     let parames = {
-      //       'pid':parentId
-      //     }
-      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
-      //       if (res.data) {
-      //         const nodes = res.data.map(item => ({
-      //           value: item.id,
-      //           label: item.name,
-      //           leaf: level >= 3,
-      //           children: []
-      //         }))
-      //         resolve(nodes)
-      //       }
-      //     })
-      //   }
-      // },
-      //获取导航id end---------------------------------------->
-    };
-  },
-  computed: {
-    // 映射 Vuex 的 state 到计算属性
-    // 监听导航池变化用于回显
-    getPid() {
-      return this.$store.state.template.componentViewData.pid_arr;
-    },
-    getadName(){
-      return this.$store.state.template.componentViewData.adName;
-    },
-    gettitleName(){
-      return this.$store.state.template.componentViewData.titleName;
-    }
-  },
-  watch: {
-    getPid(newVal, oldVal) {
-      console.log("导航池改变了！")
-      console.log(newVal, oldVal)
-      // 回显导航池 判断一下是单导航还是多导航
-      if(this.$store.state.template.editComponentType==1){
-        //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
-        this.form.type1data.pid_arr = newVal;
-        this.loadCascaderPath(newVal);
-      }
-      if(this.$store.state.template.editComponentType==2){ 
-        this.form.type2data.pid_arr = newVal;
-      }
-    },
-    getadName(newVal, oldVal) {
-      console.log("广告文字改变了！")
-      console.log(newVal, oldVal)
-      this.form.type3data.adName = newVal;
-    },
-    gettitleName(newVal, oldVal) {
-      console.log("标题文字改变了！")
-      console.log(newVal, oldVal)
-      this.form.type7data.titleName = newVal;
-    } 
-  },
-  methods: {
-    closeEditWindow(){
-      this.$store.commit('template/closeEditWindowStatus');
-    },
-    submitData(){
-      //验证表单
-      this.$refs.form.validate(valid => {
-        //构建提交的数据
-        let data = {
-          id:this.$store.state.template.editSectorId,//组件id
-          sort:this.$store.state.template.editComponentSort,//组件位置
-          dataSort:this.$store.state.template.editDataSort,//数据位置
-          type:this.$store.state.template.editComponentType,//组件类型
-          data:""//提交的数据
+        return {
+            formLabelWidth:"120px",
+            form:{
+                //单导航新闻
+                type1data:{
+                    pid_arr:"",
+                    name:"",
+                },
+                //广告
+                type3data:{
+                    adName:""
+                },
+            },
+            formRules:{
+                pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
+                adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
+            },
+            options:[],//网站导航
         }
-        if (valid) {
-          //判断当前提交的数据类型
-          //1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
-          if(this.$store.state.template.editComponentType == 1){
-            data.data = this.form.type1data;
-          }
-          //2=tabs新闻选项卡
-          if(this.$store.state.template.editComponentType == 2){
-            data.data = this.form.type2data;
-          }
-          //3=广告
-          if(this.$store.state.template.editComponentType == 3){
-            data.data = this.form.type3data;
-          }
-          //7=文本
-          if(this.$store.state.template.editComponentType == 7){
-            data.data = this.form.type7data;
-          }
-          //第二步：提交数据
-          this.$store.commit('template/saveComponentData',data);
-          //第三步：关闭编辑窗口
-          this.$store.commit('template/closeEditWindowStatus');
+    },
+    computed: {
+        // 映射 Vuex 的 state 到计算属性
+        // 监听导航池变化用于回显
+        getPid() {
+            return this.$store.state.template.componentViewData.pid_arr;
+        },
+        getadName(){
+            return this.$store.state.template.componentViewData.adName;
+        },
+        gettitleName(){
+            return this.$store.state.template.componentViewData.titleName;
         }
-      })
     },
-    //回显级联选择器
-    async loadCascaderPath(path, type) {
-      this.oneParentKey+=1;
-      // 如果是单选类型，path 是普通数组
-      for (let i = 0; i < path.length; i++) {
-        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
-        const level = i; // 当前层级的索引
-        await this.$store.dispatch('pool/categoryList',{pid:parentId}).then((res)=>{
-          const nodes = res.data.map(item => ({
-            value: item.id,
-            label: item.name,
-            leaf: level >= 4,
-            checked: true
-          }));
-          // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
-          if (level === path.length - 1) {
-            this.$nextTick(() => {
-              this.form.type1data.pid_arr = path;
+    watch: {
+        getPid(newVal, oldVal) {
+            console.log("导航池改变了！")
+            console.log(newVal, oldVal)
+            // 回显导航池 判断一下是单导航还是多导航
+            if(this.$store.state.template.editComponentType==1){
+                //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
+                this.form.type1data.pid_arr = newVal;
+            }
+            if(this.$store.state.template.editComponentType==2){ 
+                this.form.type2data.pid_arr = newVal;
+            }
+        },
+        getadName(newVal, oldVal) {
+            console.log("广告文字改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.adName = newVal;
+        },
+    },
+    methods: {
+        closeEditWindow(){
+            this.$store.commit('template/closeEditWindowStatus');
+        },
+        getNavList(){
+            let data = {
+                website_id:this.$store.state.template.editWebsiteId,
+                pid:0,
+                type:1
+            }
+            this.$store.dispatch('news/getWebsiteNavList',data).then((res)=>{
+                if(res.code==200){
+                    this.options = res.data.map(item => ({
+                        id: item.id,
+                        value: item.category_id,
+                        label: item.alias,
+                    }));
+                }else{
+                    this.$message.error(res.msg);
+                }
             });
-          }
-        });
-      }
+        },
+        changeNav(val){
+            // 通过 val 找到对应的选项
+            const selectedOption = this.options.find(item => item.value === val);
+            if (selectedOption) {
+                //选中导航池后，获得导航池的名字
+                this.form.type1data.name = selectedOption.label;
+            }
+        },
+        submitData(){
+            //验证表单
+            this.$refs.form.validate(valid => {
+                //构建提交的数据
+                let data = {
+                    id:this.$store.state.template.editSectorId,//组件id
+                    sort:this.$store.state.template.editComponentSort,//组件位置
+                    dataSort:this.$store.state.template.editDataSort,//数据位置
+                    type:this.$store.state.template.editComponentType,//组件类型
+                    data:""//提交的数据
+                }
+                if (valid) {
+                    //判断当前提交的数据类型
+                    //1=新闻
+                    if(this.$store.state.template.editComponentType == 1){
+                        data.data = this.form.type1data;
+                        data.data.name = this.form.type1data.name;
+                    }
+                    //2=广告
+                    if(this.$store.state.template.editComponentType == 2){
+                        data.data = this.form.type2data;
+                    }
+                    //第二步：提交数据
+                    this.$store.commit('template/saveComponentData',data);
+                    //第三步：关闭编辑窗口
+                    this.$store.commit('template/closeEditWindowStatus');
+                    //第四步：初始化下拉列表
+                    this.form.type1data.pid_arr = "";
+                }
+            })
+        },
+    },
+    mounted() { 
+        //获得站点下的导航池
+        this.getNavList();
     },
-  },
-  mounted() { 
-    
-  },
 };
 </script>
 
 <style scoped lang="less">
-  .editWindowBox {
-    .editWindowBoxContent {
-      width: 100%;
-      padding: 20px;
-    }
-    .editWindowBoxFooter {
-      text-align: right;
+    .editWindowBox {
+        .editWindowBoxContent {
+            width: 100%;
+            padding: 20px;
+        }
+        .editWindowBoxFooter {
+            text-align: right;
+        }
     }
-  }
 
-  .testAssistant {
-    border: 1px solid #dfe4ed;
-    padding: 20px;
-    margin-bottom: 20px;
-    background: #F5F7FA;
-    border-radius: 4px;
-    .testAssistantTitle {
-        font-size: 16px;
-        font-weight: bold;
-        padding-bottom: 10px;
+    .testAssistant {
+        border: 1px solid #dfe4ed;
+        padding: 20px;
         margin-bottom: 20px;
-        border-bottom: 1px solid #dfe4ed;
-    }
-    .testAssistantContentItem {
-        display: flex;
-        font-size: 16px;
-        margin-bottom: 10px;
-        div:nth-child(1) {
-            color: #666;
-            margin-right: 20px;
+        background: #F5F7FA;
+        border-radius: 4px;
+        .testAssistantTitle {
+            font-size: 16px;
             font-weight: bold;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #dfe4ed;
         }
-        div:nth-child(2) {
-            color: #666;
+        .testAssistantContentItem {
+            display: flex;
+            font-size: 16px;
+            margin-bottom: 10px;
+            div:nth-child(1) {
+                color: #666;
+                margin-right: 20px;
+                font-weight: bold;
+            }
+            div:nth-child(2) {
+                color: #666;
+            }
         }
     }
-  }
-
-
-
 
-
-
-
-  //表单微调 start------------------------------------------------------------>
-  ::v-deep .editWindowBoxContent .el-cascader{
-    width: 100% !important;
-  }
-  ::v-deep .editWindowBoxContent .el-select--medium {
-    width: 100% !important;
-  }
-  //表单微调 end------------------------------------------------------------>
+    //表单微调 start------------------------------------------------------------>
+    ::v-deep .editWindowBoxContent .el-cascader{
+        width: 100% !important;
+    }
+    ::v-deep .editWindowBoxContent .el-select--medium {
+        width: 100% !important;
+    }
+    //表单微调 end------------------------------------------------------------>
 </style>

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

@@ -27,17 +27,14 @@ export default {
             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: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
                 },
             ]
@@ -55,5 +52,112 @@ export default {
 </script>
 
 <style scoped lang="less">
+.bannerItemBox {
+    position: relative;
+}
+.roll_num_box {
+    position: absolute;
+    z-index: 2;
+    left: 60px;
+    bottom: 5px;
+    height: 60px;
+    line-height: 60px;
+    color: #fff;
+    font-size: 16px;
+    .roll_num_box_new {
+        font-size: 20px;
+    }
+}
+.dot1 {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.swiper_dot1 {
+    display: block;
+    width: 100%;
+    line-height: 60px;
+    height: 60px;
+    color: #fff;
+    font-size: 18px;
+    text-indent: 20px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    box-sizing: border-box;
+    padding: 0 144px;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+}
+.el-carousel {
+    /deep/.el-carousel__arrow i {
+        font-size: 33px !important;
+    }
+    .roll_1_box {
+        position: relative;
+    }
+    /deep/.el-carousel__arrow--left {
+        position: absolute;
+        width: 35px;
+        height: 57px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0);
+        left: 9px;
+        border: none;
+        border-radius: 0;
+        top: 100%;
+        margin-top: -36px;
+    }
+    /deep/.el-carousel__arrow--right {
+        width: 35px;
+        height: 57px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0);
+        position: absolute;
+        right: 9;
+        border: none;
+        border-radius: 0;
+        top: 100%;
+        margin-top: -36px;
+    }
+    /deep/ .el-carousel__indicators {
+        // 指示器
+        left: unset;
+        transform: unset;
+        right: 10px;
+        bottom: 11px;
+    }
+    /deep/ .el-carousel__button {
+        // 指示器按钮
+        width: 10px;
+        height: 10px;
+        border: none;
+        border-radius: 5px;
+        background: #fff;
+        opacity: 1;
+    }
+    /deep/ .is-active .el-carousel__button {
+        // 指示器激活按钮
+        background: #255590;
+        width: 25px;
+        opacity: 1;
 
+    }
+    /deep/ .el-carousel__container {
+        height: 100%;
+    }
+}
+.custom-indicator button {
+    background-color: #fff;
+    opacity: 1;
+    width: 8px;
+    height: 8px;
+}
+.custom-indicator button.is-active {
+    background-color: #DD7D18;
+    width: 58px;
+    opacity: 1;
+}
 </style>

src/views/template/style/components/list/450x440/1.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            <div class="listNewsStyleBorder">{{name}}</div>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749092002100038.png" />
+                    <div class="listNewsContentItemTitle">国际工商界聚焦贸易投资</div>
+                </div>
+                <div class="listNewsContentItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749092009318908.png" />
+                    <div class="listNewsContentItemTitle">甘肃张掖：采收莴笋 销...</div>
+                </div>
+                <div class="listNewsContentItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749092018916256.png" />
+                    <div class="listNewsContentItemTitle">国家级非物质文化遗产...</div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div>中老铁路货物运输量突破6000万吨 运输需求逐年攀升</div>
+                <div>长三角铁路端午小长假预计发送旅客1700万人次，较去年...</div>
+                <div>完善无障碍服务，别让“刷脸”困住尊严</div>
+                <div>2025年国际生物多样性日宣传活动在伊春市举行</div>
+                <div>全国游泳冠军赛：潘展乐、汪顺、孙杨携手接力摘金</div>
+                <div>国际工商界聚焦贸易投资：中国仍是关键所在</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                margin-right: 15px;
+                .listNewsContentItem {
+                    position: relative;
+                    margin-bottom: 20px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    img {
+                        display: block;
+                    }
+                    .listNewsContentItemTitle {
+                        position: absolute;
+                        bottom:0;
+                        z-index:1;
+                        width: 100%;
+                        color:#fff;
+                        height: 50px;
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                        box-sizing: border-box;
+                        padding:0 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 65px;
+                    }
+                }
+            }
+            .listNewsContentRight {
+                div{
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left 9px;
+                    font-size:18px;
+                    color:#333333;
+                    line-height: 24px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    margin-bottom: 10px;
+                    &:nth-child(2),&:nth-child(4) {
+                        margin-bottom: 26px;
+                    }
+                }
+            }
+        }  
+    }
+</style>
+

src/views/template/style/components/list/450x440/2.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            <div class="listNewsStyleBorder">{{name}}</div>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentRight">
+                <div>中老铁路货物运输量突破6000万吨 运输需求逐年攀升</div>
+                <div>长三角铁路端午小长假预计发送旅客1700万人次，较去年...</div>
+                <div>完善无障碍服务，别让“刷脸”困住尊严</div>
+                <div>2025年国际生物多样性日宣传活动在伊春市举行</div>
+                <div>全国游泳冠军赛：潘展乐、汪顺、孙杨携手接力摘金</div>
+                <div>国际工商界聚焦贸易投资：中国仍是关键所在</div>
+            </div>
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749092002100038.png" />
+                    <div class="listNewsContentItemTitle">国际工商界聚焦贸易投资</div>
+                </div>
+                <div class="listNewsContentItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749092009318908.png" />
+                    <div class="listNewsContentItemTitle">甘肃张掖：采收莴笋 销...</div>
+                </div>
+                <div class="listNewsContentItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749092018916256.png" />
+                    <div class="listNewsContentItemTitle">国家级非物质文化遗产...</div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                margin-right: 15px;
+                .listNewsContentItem {
+                    position: relative;
+                    margin-bottom: 20px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    img {
+                        display: block;
+                    }
+                    .listNewsContentItemTitle {
+                        position: absolute;
+                        bottom:0;
+                        z-index:1;
+                        width: 100%;
+                        color:#fff;
+                        height: 50px;
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                        box-sizing: border-box;
+                        padding:0 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 65px;
+                    }
+                }
+            }
+            .listNewsContentRight {
+                div{
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left 9px;
+                    font-size:18px;
+                    color:#333333;
+                    line-height: 24px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    margin-bottom: 10px;
+                    &:nth-child(2),&:nth-child(4) {
+                        margin-bottom: 26px;
+                    }
+                }
+            }
+        }  
+    }
+</style>
+

src/views/template/style/components/list/450x440/3.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            <div class="listNewsStyleBorder">{{name}}</div>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentTop">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749174653580220.jpg">
+                <div class="listNewsContentTopTitle">内蒙古扎赉特旗：水稻迎来插秧季</div>
+            </div>
+            <div class="listNewsContentBottom">
+                <div>全国首单水生野生动物制品批量进口审批办结</div>
+                <div>中央财政下达农业防灾救灾资金14亿元支持各地病虫害...</div>
+                <div>农业农村部公布乡村振兴资金使用监管突出问题专项整...</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            .listNewsContentTop {
+                position: relative;
+                width: 450px;
+                height: 245px;
+                margin-bottom: 17px;
+                img {
+                    display: block;
+                    width: 450px;
+                    height: 245px;
+                }
+                .listNewsContentTopTitle {
+                    position: absolute;
+                    font-size: 18px;
+                    height: 44px;
+                    line-height: 44px;
+                    padding:0 10px;
+                    box-sizing: border-box;
+                    width: 100%;
+                    bottom: 0;
+                    color:#fff;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                }
+            }
+            .listNewsContentBottom {
+                div{
+                    height: 24px;
+                    line-height: 24px;
+                    margin-bottom: 20px;
+                    font-size: 18px;
+                    color: #333333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child {
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/450x440/4.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            <div class="listNewsStyleBorder">{{name}}</div>
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentBottom">
+                <div>全国首单水生野生动物制品批量进口审批办结</div>
+                <div>中央财政下达农业防灾救灾资金14亿元支持各地病虫害...</div>
+                <div>农业农村部公布乡村振兴资金使用监管突出问题专项整...</div>
+            </div>
+            <div class="listNewsContentTop">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749174653580220.jpg">
+                <div class="listNewsContentTopTitle">内蒙古扎赉特旗：水稻迎来插秧季</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            .listNewsContentTop {
+                position: relative;
+                width: 450px;
+                height: 245px;
+                margin-top: 17px;
+                img {
+                    display: block;
+                    width: 450px;
+                    height: 245px;
+                }
+                .listNewsContentTopTitle {
+                    position: absolute;
+                    font-size: 18px;
+                    height: 44px;
+                    line-height: 44px;
+                    padding:0 10px;
+                    box-sizing: border-box;
+                    width: 100%;
+                    bottom: 0;
+                    color:#fff;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                }
+            }
+            .listNewsContentBottom {
+                div{
+                    height: 24px;
+                    line-height: 24px;
+                    margin-bottom: 20px;
+                    font-size: 18px;
+                    color: #333333;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child {
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/450x950/1.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            3333
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 350px;
+                height: 380px;
+                img {
+                    display: block;
+                }
+                .listNewsContentLeftTop {
+                    margin-bottom: 20px;
+                    position: relative;
+                }
+                .listNewsContentLeftBottom {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    position: relative;
+                    &>div {
+                        position: relative;
+                    }
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                    box-sizing: border-box;
+                    padding:0 8px;
+                }
+            }
+            .listNewsContentRight {
+                width: 350px;
+                height: 380px;
+                div {
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color:#333333;
+                    font-size:18px;
+                    margin-bottom: 20px;
+                    height: 24px;
+                    line-height: 24px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child,&:nth-child(4),&:nth-child(7) {
+                        color:#333333;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/720x300/1.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            1111
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 350px;
+                height: 380px;
+                img {
+                    display: block;
+                }
+                .listNewsContentLeftTop {
+                    margin-bottom: 20px;
+                    position: relative;
+                }
+                .listNewsContentLeftBottom {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    position: relative;
+                    &>div {
+                        position: relative;
+                    }
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                    box-sizing: border-box;
+                    padding:0 8px;
+                }
+            }
+            .listNewsContentRight {
+                width: 350px;
+                height: 380px;
+                div {
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color:#333333;
+                    font-size:18px;
+                    margin-bottom: 20px;
+                    height: 24px;
+                    line-height: 24px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child,&:nth-child(4),&:nth-child(7) {
+                        color:#333333;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/720x440/1.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentLeftTop">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749091973108528.jpg" />
+                    <div class="listNewsContentLeftTopTitle">天津港集疏运专用货运通道建设加快</div>
+                </div>
+                <div class="listNewsContentLeftBottom">
+                    <div>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749091987757588.png" />
+                        <div class="listNewsContentLeftTopTitle">大柴旦红崖火星地貌景区</div>
+                    </div>
+                    <div>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749091995315004.jpg" />
+                        <div class="listNewsContentLeftTopTitle">国际文化产业博览交易...</div>
+                    </div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div>西南财经大学教授刘锡良：金融服务实...</div>
+                <div>北京大学国家发展研究院院长黄益平：...</div>
+                <div>完善国家战略规划体系和政策统筹协调...</div>
+                <div>健全促进实体经济和数字经济深度融合...</div>
+                <div>我国首个海上二氧化碳捕集、利用与封...</div>
+                <div>绿色化智能化趋势明显 家居行业加速规...</div>
+                <div>第九个全国科技工作者日将至！数千场...</div>
+                <div>外贸规模创历史同期新高 中国—中东欧...</div>
+                <div>前四月宁波对中东欧国家进出口总额同...</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 350px;
+                height: 380px;
+                img {
+                    display: block;
+                }
+                .listNewsContentLeftTop {
+                    margin-bottom: 20px;
+                    position: relative;
+                }
+                .listNewsContentLeftBottom {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    position: relative;
+                    &>div {
+                        position: relative;
+                    }
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                    box-sizing: border-box;
+                    padding:0 8px;
+                }
+            }
+            .listNewsContentRight {
+                width: 350px;
+                height: 380px;
+                div {
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color:#333333;
+                    font-size:18px;
+                    margin-bottom: 20px;
+                    height: 24px;
+                    line-height: 24px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child,&:nth-child(4),&:nth-child(7) {
+                        color:#333333;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/720x440/2.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentRight">
+                <div>西南财经大学教授刘锡良：金融服务实...</div>
+                <div>北京大学国家发展研究院院长黄益平：...</div>
+                <div>完善国家战略规划体系和政策统筹协调...</div>
+                <div>健全促进实体经济和数字经济深度融合...</div>
+                <div>我国首个海上二氧化碳捕集、利用与封...</div>
+                <div>绿色化智能化趋势明显 家居行业加速规...</div>
+                <div>第九个全国科技工作者日将至！数千场...</div>
+                <div>外贸规模创历史同期新高 中国—中东欧...</div>
+                <div>前四月宁波对中东欧国家进出口总额同...</div>
+            </div>
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentLeftTop">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749091973108528.jpg" />
+                    <div class="listNewsContentLeftTopTitle">天津港集疏运专用货运通道建设加快</div>
+                </div>
+                <div class="listNewsContentLeftBottom">
+                    <div>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250605/1749091987757588.png" />
+                        <div class="listNewsContentLeftTopTitle">大柴旦红崖火星地貌景区</div>
+                    </div>
+                    <div>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749091995315004.jpg" />
+                        <div class="listNewsContentLeftTopTitle">国际文化产业博览交易...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 350px;
+                height: 380px;
+                img {
+                    display: block;
+                }
+                .listNewsContentLeftTop {
+                    margin-bottom: 20px;
+                    position: relative;
+                }
+                .listNewsContentLeftBottom {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    position: relative;
+                    &>div {
+                        position: relative;
+                    }
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                    box-sizing: border-box;
+                    padding:0 8px;
+                }
+            }
+            .listNewsContentRight {
+                width: 350px;
+                height: 380px;
+                div {
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color:#333333;
+                    font-size:18px;
+                    margin-bottom: 20px;
+                    height: 24px;
+                    line-height: 24px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child,&:nth-child(4),&:nth-child(7) {
+                        color:#333333;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/720x440/3.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentTop">
+                <div class="listNewsContentTopItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749172582460084.jpg">
+                    <div class="listNewsContentTopItemTitle">上海合作组织减贫和可持续发展论坛举行</div>
+                </div>
+                <div class="listNewsContentTopItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749172593276804.jpg">
+                    <div class="listNewsContentTopItemTitle">解放军驻澳门部队举行第十九次军营开放活动</div>
+                </div>
+            </div>
+            <div class="listNewsContentBottom">
+                <div>日本和歌山县4只大熊猫将于6月28日送返...</div>
+                <div>国家防灾减灾救灾委员会针对贵州启动国...</div>
+                <div>国家发改委紧急安排2000万元重点支持贵...</div>
+                <div>4月我国航空运输规模增势良好 国际航线...</div>
+                <div>中国科学家揭示水稻冷适应调控机制 实证...</div>
+                <div>广西一大学科研赋能 “炒出”产教融合柳...</div>
+                <div>外交部副部长马朝旭同美国常务副国务卿...</div>
+                <div>长三角铁路端午小长假预计发送旅客1700...</div>
+                <div>首届全球领导力论坛举办 中外嘉宾共商全...</div>
+                <div>开放新格局下如何走稳全球路？专家为浙...</div>
+                <div>中国航天员创空间站建成后入轨出舱间隔...</div>
+                <div>新规实施两年多已完成242家境内企业境外...</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            .listNewsContentTop {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 20px;
+                .listNewsContentTopItem {
+                    width: 350px;
+                    height: 110px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    img {
+                        display: block;
+                        width: 170px;
+                        height: 110px;
+                    }
+                    .listNewsContentTopItemTitle {
+                        font-size: 18px;
+                        color: #333333;
+                        margin-left: 8px;
+                        margin-right: 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 3;
+                    }
+                }
+            }
+            .listNewsContentBottom {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                div {
+                    width: 350px;
+                    height: 24px;
+                    line-height: 24px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: 18px;
+                    margin-bottom: 20px;
+                    color: #333333;
+                    &:nth-last-child(-n+2) {
+                        margin-bottom: 0;
+                    }
+                    &:nth-child(1),
+                    &:nth-child(2),
+                    &:nth-child(7),
+                    &:nth-child(8) {
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/720x440/4.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentBottom">
+                <div>日本和歌山县4只大熊猫将于6月28日送返...</div>
+                <div>国家防灾减灾救灾委员会针对贵州启动国...</div>
+                <div>国家发改委紧急安排2000万元重点支持贵...</div>
+                <div>4月我国航空运输规模增势良好 国际航线...</div>
+                <div>中国科学家揭示水稻冷适应调控机制 实证...</div>
+                <div>广西一大学科研赋能 “炒出”产教融合柳...</div>
+                <div>外交部副部长马朝旭同美国常务副国务卿...</div>
+                <div>长三角铁路端午小长假预计发送旅客1700...</div>
+                <div>首届全球领导力论坛举办 中外嘉宾共商全...</div>
+                <div>开放新格局下如何走稳全球路？专家为浙...</div>
+                <div>中国航天员创空间站建成后入轨出舱间隔...</div>
+                <div>新规实施两年多已完成242家境内企业境外...</div>
+            </div>
+            <div class="listNewsContentTop">
+                <div class="listNewsContentTopItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749172582460084.jpg">
+                    <div class="listNewsContentTopItemTitle">上海合作组织减贫和可持续发展论坛举行</div>
+                </div>
+                <div class="listNewsContentTopItem">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749172593276804.jpg">
+                    <div class="listNewsContentTopItemTitle">解放军驻澳门部队举行第十九次军营开放活动</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            .listNewsContentTop {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 20px;
+                .listNewsContentTopItem {
+                    width: 350px;
+                    height: 110px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    img {
+                        display: block;
+                        width: 170px;
+                        height: 110px;
+                    }
+                    .listNewsContentTopItemTitle {
+                        font-size: 18px;
+                        color: #333333;
+                        margin-left: 8px;
+                        margin-right: 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 3;
+                    }
+                }
+            }
+            .listNewsContentBottom {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                div {
+                    width: 350px;
+                    height: 24px;
+                    line-height: 24px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: 18px;
+                    margin-bottom: 20px;
+                    color: #333333;
+                    &:nth-last-child(-n+2) {
+                        margin-bottom: 0;
+                    }
+                    &:nth-child(1),
+                    &:nth-child(2),
+                    &:nth-child(7),
+                    &:nth-child(8) {
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/list/720x620/1.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            2222
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        name:{
+            type:String,
+            default:""
+        }
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .listNewsBox {
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 350px;
+                height: 380px;
+                img {
+                    display: block;
+                }
+                .listNewsContentLeftTop {
+                    margin-bottom: 20px;
+                    position: relative;
+                }
+                .listNewsContentLeftBottom {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    position: relative;
+                    &>div {
+                        position: relative;
+                    }
+                }
+                .listNewsContentLeftTopTitle {
+                    position: absolute;
+                    bottom:0;
+                    z-index:1;
+                    width: 100%;
+                    color:#fff;
+                    height: 50px;
+                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    line-height: 65px;
+                    box-sizing: border-box;
+                    padding:0 8px;
+                }
+            }
+            .listNewsContentRight {
+                width: 350px;
+                height: 380px;
+                div {
+                    padding-left: 16px;
+                    box-sizing: border-box;
+                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color:#333333;
+                    font-size:18px;
+                    margin-bottom: 20px;
+                    height: 24px;
+                    line-height: 24px;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                    &:first-child,&:nth-child(4),&:nth-child(7) {
+                        color:#333333;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

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

@@ -1,146 +0,0 @@
-<template>
-  <div :class="['manyPictureSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-    <div :class="['manyPictureSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
-      <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">
-        <title1Style />
-      </div>
-    </div>
-    <div class="manyPictureImgBox">
-      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="6" :y="y"/>
-      <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="7"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-        <staticHtml1Style />
-      </div>
-    </div>
-    <div class="manyPictureNewsBox">
-      <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-      <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="3" :type="1" :size="5" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="3" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import title1Style from '../components/title/1.vue'
-//静态组件
-import staticHtml1Style from '../components/staticHtml/1.vue'
-//新闻列表组件
-import list1Style from '../components/list/1.vue'
-import list2Style from '../components/list/2.vue'
-import list3Style from '../components/list/3.vue'
-
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    title1Style,
-    staticHtml1Style,
-    list1Style,
-    list2Style,
-    list3Style
-  },
-  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">
-  .manyPictureSectorBox {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width:100%;
-    position: relative;
-    height: 475px;
-    .componentBorder{
-      border: 2px dashed #999;
-    }
-    .manyPictureImgBox {
-      width: 80%;
-      position: relative;
-    }
-    .manyPictureSectorBoxTitle {
-      width: 80%;
-      //border: 2px dashed #999;
-      height: 41px;
-      position: relative;
-    }
-    .manyPictureSectorBox {
-      width: 80%;
-      //border: 1px dashed #999;
-    }
-    .manyPictureNewsBox {
-      width: 80%;
-      //border: 1px dashed #999;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .manyPictureNewsItem {
-        width: 50%;
-        //border: 2px dashed #999;
-        box-sizing: border-box;
-        position: relative;
-      }
-      .manyPictureNewsItem:nth-child(1) {
-        padding-right: 10px;
-      }
-      .manyPictureNewsItem:nth-child(2) {
-        padding-left: 10px;
-      }
-    }
-  }
-</style>
-

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

@@ -94,8 +94,9 @@ export default {
         .bannerLayerBox {
             width: 720px;
             height: 410px;
+            position: relative;
             .templateEditBtnBox {
-                left: 0;
+                right: 0;
             }
         }
 
@@ -104,7 +105,7 @@ export default {
             height: 410px;
             position: relative;
             .templateEditBtnBox {
-                left: 0;
+                right: 0;
             }
         }
     }

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

@@ -59,7 +59,7 @@ export default {
     position: relative;
     margin: 0 auto;
     .templateEditBtnBox {
-        left: 0;
+        right: 0;
     }
 }
 </style>

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

@@ -0,0 +1,136 @@
+<template>
+    <div class="manyPictureSectorBox">
+        <div :class="['manyPictureSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div :class="['manyPictureSectorLeft', {componentBorder1: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="4"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y"/>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                    <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                    <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+            </div>
+            <div :class="['manyPictureSectorRight', {componentBorder2: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="5"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//720x440 
+import left1Style from '../../../../../../style/components/list/720x440/1.vue'
+import left2Style from '../../../../../../style/components/list/720x440/2.vue'
+//450x440
+import right1Style from '../../../../../../style/components/list/450x440/1.vue'
+import right2Style from '../../../../../../style/components/list/450x440/2.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+
+// //标题组件
+// import title1Style from '../components/title/1.vue'
+// //静态组件
+// import staticHtml1Style from '../components/staticHtml/1.vue'
+// //新闻列表组件
+// import list1Style from '../components/list/1.vue'
+// import list2Style from '../components/list/2.vue'
+// import list3Style from '../components/list/3.vue'
+
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        left1Style,
+        left2Style,
+        right1Style,
+        right2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.manyPictureSectorBox {
+    width: 100%;
+    height: 470px;
+    box-sizing: content-box;
+    .manyPictureSector {
+        width: 1200px;
+        height: 440px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .componentBorder1 {
+        border-right: 2px dashed #999;
+        
+    }
+    .componentBorder2 {
+        border-left: 2px dashed #999;
+    }
+    .manyPictureSectorLeft {
+        width: 720px;
+        height: 440px;
+        position: relative;
+    }
+    .manyPictureSectorRight {
+        width: 450px;
+        height:440px;
+        position: relative;
+    }
+}
+</style>
+

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

@@ -0,0 +1,127 @@
+<template>
+    <div class="manyPictureSectorBox">
+        <div :class="['manyPictureSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div :class="['manyPictureSectorLeft', {componentBorder1: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="6"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y"/>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                    <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                    <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+            </div>
+            <div :class="['manyPictureSectorRight', {componentBorder2: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="7"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//720x440 
+import left1Style from '../../../../../../style/components/list/720x440/3.vue'
+import left2Style from '../../../../../../style/components/list/720x440/4.vue'
+//450x440
+import right1Style from '../../../../../../style/components/list/450x440/3.vue'
+import right2Style from '../../../../../../style/components/list/450x440/4.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        left1Style,
+        left2Style,
+        right1Style,
+        right2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:12,
+                img:2
+            },
+            rightData:{
+                text:3,
+                img:1
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.manyPictureSectorBox {
+    width: 100%;
+    height: 470px;
+    box-sizing: content-box;
+    .manyPictureSector {
+        width: 1200px;
+        height: 440px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .componentBorder1 {
+        border-right: 2px dashed #999;
+        
+    }
+    .componentBorder2 {
+        border-left: 2px dashed #999;
+    }
+    .manyPictureSectorLeft {
+        width: 720px;
+        height: 440px;
+        position: relative;
+    }
+    .manyPictureSectorRight {
+        width: 450px;
+        height:440px;
+        position: relative;
+    }
+}
+</style>
+

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

@@ -0,0 +1,174 @@
+<template>
+    <!-- <div class="manyPictureCCBox">
+        <div :class="['manyPictureSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div :class="['manyPictureSectorLeft', {componentBorder1: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="4"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftData.text" :sizeImg="leftData.img" :y="y"/>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                    <left1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                    <left2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="720" :dataHeight="440" />
+                </div>
+            </div>
+            <div :class="['manyPictureSectorRight', {componentBorder2: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="5"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="450" :dataHeight="440" />
+                </div>
+            </div>
+        </div>
+    </div> -->
+    <div class="commentSectorBox">
+        <div :class="['commentSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div class="commentSectorLeft">
+                <div :class="['commentSectorLeftTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="8"/>
+                    <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="leftDataTop.text" :sizeImg="leftDataTop.img" :y="y"/>
+
+
+                    <leftTop1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                </div>
+                <div :class="['commentSectorLeftBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
+                    <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="leftDataBottom.text" :sizeImg="leftDataBottom.img" :y="y"/>
+
+                    <leftBottom1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                </div>
+            </div>
+            <div :class="['commentSectorRight', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="10"/>
+                <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="rightData.text" :sizeImg="rightData.img" :y="y"/>
+
+                <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//720x300
+import leftTop1Style from '../../../../../../style/components/list/720x300/1.vue'
+//720x620
+import leftBottom1Style from '../../../../../../style/components/list/720x620/1.vue'
+//450x950
+import right1Style from '../../../../../../style/components/list/450x950/1.vue'
+
+// //450x440
+// import right1Style from '../../../../../../style/components/list/450x440/1.vue'
+// import right2Style from '../../../../../../style/components/list/450x440/2.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        leftTop1Style,
+        leftBottom1Style,
+        right1Style,
+        // right2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftDataTop:{
+                text:6,
+                img:2
+            },
+            leftDataBottom:{
+                text:14,
+                img:2
+            },
+            rightData:{
+                text:0,
+                img:7
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder,.buildingBorder2,.buildingBorder3,.buildingBorder4 {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border-right: none;
+    border-top: none;
+}
+.buildingBorder3 {
+    border-left: none;
+    border-top: none;
+}
+.buildingBorder4 {
+    border-left: none;
+}
+.commentSectorBox {
+    width:100%;
+    height: 980px;
+    display: flex;
+    .commentSector {
+        width: 1200px;
+        height: 980px;
+        margin: 0 auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .commentSectorLeft {
+            width: 720px;
+            height: 950px;
+            .commentSectorLeftTop {
+                width: 720px;
+                height: 300px;
+                margin-bottom: 30px;
+                position: relative;
+            }
+            .commentSectorLeftBottom {
+                width: 720px;
+                height: 620px;
+                position: relative;
+            }
+        }
+        .commentSectorRight {
+            width: 450px;
+            height: 950px;
+            position: relative;
+        }
+    }
+}
+</style>
+

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

@@ -13,6 +13,7 @@
             <div class="headLogoBox">
                 <img :src="this.$store.state.template.webSiteInfo.logo" class="logo">
                 <div :class="['headAdTopBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+                    <editBtn  />
                     <img src="http://img.bjzxtw.org.cn/pre/image/png/20250527/1748332370111555.png">
                 </div>
             </div>
@@ -22,8 +23,12 @@
 
 <script>
 import '@/styles/theme/head/style1.less';
+import editBtn from '../../../public/editBtn.vue'
 
 export default {
+    components: {
+        editBtn,
+    },
     props: {},
     data() {
         return {};