生成广告标识

生成广告标识

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

@@ -54,37 +54,28 @@
             </div>
             <div class="sectorItemTitle">新闻图文组合2</div>
         </div>
-        <div class="sectorItemBox" 
-            @click="addModule('listSector', 101, listSector)"
-            @drag="drag('listSector', 101, listSector)" 
-            @dragend="dragend('listSector', 101, listSector)"
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('listSector', 98, listSector)"
+            @drag="drag('listSector', 98, listSector)" 
+            @dragend="dragend('listSector', 98, listSector)"
         >
             <div class="sectorItem">
                 <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" />
             </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="sectorItemBox" 
+            @click="addModule('onlyImgSector', 51, onlyImgSector)"
+            @drag="drag('onlyImgSector', 51, onlyImgSector)" 
+            @dragend="dragend('onlyImgSector', 51, onlyImgSector)"
+        >
             <div class="sectorItem">
-                <img src="@/assets/template/sector/imgSector.png" />
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg" />
             </div>
-            <div class="sectorItemTitle">纯图片组合</div>
+            <div class="sectorItemTitle">带广告新闻组合</div>
         </div>
-        <div class="sectorItemBox" @click="addModule('friendShipLinkSector', 20, friendShipLinkSector)"
-            @drag="drag('friendShipLinkSector', 20, friendShipLinkSector)"
-            @dragend="dragend('friendShipLinkSector', 20, friendShipLinkSector)">
-            <div class="sectorItem">
-                <img src="@/assets/template/sector/linkSector.png" />
-            </div>
-            <div class="sectorItemTitle">友情链接</div>
-        </div> -->
     </div>
 </template>
 
@@ -106,19 +97,18 @@ export default {
                         "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
                         "component_style": 1,//组件选择了哪个版式
                         "sort": 1,
-                        "componentData": {
-                            "ad_tag": "zzjz_index_0001",//广告标识为 网站字符缩写+下划线+页面名称+下划线+广告位位置
-                            "ad_name": "通栏广告", //广告位名称
-                            "introduce": "",//广告位描述
-                            "image_src": "",//广告位图片
-                            "img_url": "",//广告位外链地址
-                            "image_alt": "",//广告位图片说明
-                            "thumb": "",//默认广告图 - 该广告图应该根据风格而变化
-                            "width": 1200, //广告位宽度
-                            "height": 90, //广告位高度
-                        }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+                        "componentData": {}
                     }
-                ]
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
             },
             //添加通栏广告模块 start---------------------------------------->
 
@@ -469,69 +459,53 @@ export default {
             },
             //两列新闻组合模块3 end---------------------------------------->
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-            //纯图片组合 start---------------------------------------->
+            //带广告新闻组合 start---------------------------------------->
             onlyImgSector: {
-                sectorName: "onlyImgSector",//板块名称
-                componentList: [
+                "sectorName": "onlyImgSector",//板块名称
+                "componentList": [
                     {
-                        component_type: 1,
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "",
-                        sort: 1,
-                        componentData: {
-                            category_id: [],
-                            page: 1,
-                            pageSize: 7,
-                            listType: [
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 4,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
                                 "title",
-                                "imgUrl"
-                            ]
-                        }
-                    }
-                ]
-            },
-            //纯图片组合 end---------------------------------------->
-
-            //友情链接板块 start---------------------------------------->
-            friendShipLinkSector: {
-                sectorName: "friendShipLinkSector",//友情链接无需提交数据
-                componentList: [
-                    {
-                        component_type: 7, //纯文本
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "styleTitle",
-                        sort: 1,
-                        componentData: {
-                            text: "板块标题"
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
                         }
                     },
-                    {
-                        component_type: 4,
-                        component_style: 1,//该组件使用哪个展示样式
-                        component_name: "",
-                        sort: 1,
-                        componentData: {}
-                    }
-                ]
+                ],
+                "ad": {
+                    "width": 450, //宽度
+                    "height": 290, //高度
+                    "name": "",//广告名称
+                    "website_id": "",//网站id
+                    "thumb": "http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
             }
-            //友情链接板块 end---------------------------------------->
-
+            //带广告新闻组合 end---------------------------------------->
         }
     },
     methods: {
@@ -575,7 +549,6 @@ export default {
     .sectorItemBox {
         box-sizing: border-box;
         padding: 0 20px 40px 20px;
-        height: 130px;
         cursor: pointer;
 
         .sectorItem {

src/store/modules/template.js

@@ -1,5 +1,5 @@
 //cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
-import { getSiteInfo, getSiteCategory, getFooterCategoryList, selectWebsiteArea, selectWebsiteDepartment } from '@/api/cms'
+import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms'
 //自助建站的接口 用于添加基本信息
 import {
     getWebsiteintel, addWebsiteTemplateintel, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel,
@@ -20,6 +20,7 @@ import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
 const state = {
     //0.全局配置 start------------------------------------------------------------> 
     editWebsiteId: "",//当前编辑网站的id
+    adKey: "",//当前编辑网站的缩写
     editWebsiteClass: "",//当前编辑网站的风格
     stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
     //0.全局配置 end------------------------------------------------------------>
@@ -30,7 +31,7 @@ const state = {
     previewStatus: false,//是否预览
     gridKey: 0,//使用gridKey来强制更新视图
     loading: false,//是否显示加载中
-    ad_id: "",//生成储存的广告id
+    ad_id: "",//生成储存的广告标识
     showPage: { //哪些页面可以被展示
         index: true,
         class: true,
@@ -41,9 +42,7 @@ const state = {
         aloneArticle: true
     },
     pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
-        index: [
-
-        ],//首页
+        index: [],//首页
         class: [],//分类页
         list: [],//列表页
         article: [],//详情页
@@ -119,7 +118,17 @@ const state = {
             article: [],//详情页
             search: [],//搜索页
             aloneList: [],//自定义列表页
-            aloneArticle: [],//自定义详情页
+            aloneArticle: []//自定义详情页
+        },
+        //4.广告位
+        ad: {
+            index: [],
+            class: [],
+            list: [],
+            article: [],
+            search: [],
+            aloneList: [],
+            aloneArticle: []
         }
     },
     canSubmit: false,//当前数据是否可以被提交
@@ -142,6 +151,10 @@ const mutations = {
     setEditWebsiteId(state, id) {
         state.editWebsiteId = id;
     },
+    //设置网站缩写
+    setAdKey(state, key) {
+        state.adKey = key;
+    },
     //设置网站的风格
     setClassNumber(state, id) {
         state.editWebsiteClass = id;
@@ -213,7 +226,8 @@ const mutations = {
             }
             //2=设置广告名称
             if (state.editComponentType == 2) {
-                state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+                //state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+                state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.ad.name;
             }
         }
         //pageStatus==2 分类页
@@ -254,19 +268,21 @@ const mutations = {
         //pageStatus==7 底部详情页
         if (state.pageStatus == 7) {}
     },
-    //生成一个随机的广告id
-    getRandomAdid(state) {
-        //网站id
-        const websiteId = state.editWebsiteId;
-        // 生成 3 个随机字母 (a-z)
-        const randomLettersOne = Math.random().toString(36).substring(2, 5);  // 生成随机字母并去除前面的 "0."
-        // 获取当前时间戳（毫秒级）
-        const timestamp = Date.now();
-        // 生成 5 个随机字母 (a-z)
-        const randomLettersTwo = Math.random().toString(36).substring(2, 7);  // 生成随机字母并去除前面的 "0."
-        // 拼接时间戳和随机字母生成唯一 ID
-        const ad_id = `${websiteId}${randomLettersOne}${timestamp}${randomLettersTwo}`;
-        state.ad_id = ad_id;
+    //生成广告id
+    getAdkey(state,sort) {
+        
+    },
+    //清空广告位
+    clearAd(state) {
+        state.webSiteData.ad = {
+            index: [],
+            class: [],
+            list: [],
+            article: [],
+            search: [],
+            aloneList: [],
+            aloneArticle: []
+        }
     },
     //0.全局配置 start------------------------------------------------------------>
     //1.配置模块 start------------------------------------------------------------>
@@ -298,36 +314,18 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.index.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 2) {
-                        this.commit("template/getRandomAdid")
-                        //添加板块id  
-                        state.pageData.index.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            adid: state.ad_id,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    } else {
-                        state.pageData.index.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    }
+                    state.pageData.index.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        content: data.jsonData,
+                        dataSort: dataSort,
+                    });
                     console.log("当前添加模块的dataSort为：" + dataSort);
                     //当前的页面构建数据
                     console.log(state.pageData.index);
@@ -347,36 +345,18 @@ const mutations = {
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.index.length;
                     //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 2) {
-                        this.commit("template/getRandomAdid")
-                        //添加板块id  
-                        state.pageData.index.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: data.y,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            adid: state.ad_id,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    } else {
-                        state.pageData.index.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: data.y,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    }
+                    state.pageData.index.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: data.y,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        content: data.jsonData,
+                        dataSort: dataSort,
+                    });
                     console.log("当前添加模块的dataSort为：" + dataSort);
                     //当前的页面构建数据
                     console.log(state.pageData.index);
@@ -413,37 +393,18 @@ const mutations = {
                     console.log(data);
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.list.length;
-                    //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 2) {
-                        this.commit("template/getRandomAdid")
-                        //添加板块id  
-                        state.pageData.list.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            adid: state.ad_id,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    } else {
-                        state.pageData.list.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    }
+                    state.pageData.list.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        content: data.jsonData,
+                        dataSort: dataSort,
+                    });
                 }
 
                 //drag=拖拽
@@ -459,37 +420,18 @@ const mutations = {
                     console.log(data);
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.list.length;
-                    //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 2) {
-                        this.commit("template/getRandomAdid")
-                        //添加板块id  
-                        state.pageData.list.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            adid: state.ad_id,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    } else {
-                        state.pageData.list.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    }
+                    state.pageData.list.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        content: data.jsonData,
+                        dataSort: dataSort,
+                    });
                     console.log("当前添加模块的dataSort为：" + dataSort);
                     //当前的页面构建数据
                     console.log(state.pageData.list);
@@ -510,14 +452,6 @@ const mutations = {
                 Message.error('最多只能添加10个模块！');
                 return;
             } else {
-                //判断添加的是否为广告模块 如果是 添加一个ad_id
-                if (data.jsonData.componentList[0].component_type == 2) {
-                    //生成一个随机的ad_id给广告模块
-                    this.commit("template/getRandomAdid");
-                    console.log("添加广告模块！id为：" + state.ad_id)
-                    data.jsonData.componentList[0].componentData.ad_id = state.ad_id;
-                }
-
                 //判断是拖拽的还是点击添加进来的 click=点击
                 if (data.source == "click") {
                     console.log("通过点击添加一个板块");
@@ -530,37 +464,18 @@ const mutations = {
                     console.log(data);
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.article.length;
-                    //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 2) {
-                        this.commit("template/getRandomAdid")
-                        //添加板块id  
-                        state.pageData.article.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            adid: state.ad_id,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    } else {
-                        state.pageData.article.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    }
+                    state.pageData.article.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        content: data.jsonData,
+                        dataSort: dataSort,
+                    });
                 }
 
                 //drag=拖拽
@@ -576,37 +491,18 @@ const mutations = {
                     console.log(data);
                     //设置数据在构建json中的位置
                     let dataSort = state.pageData.article.length;
-                    //判断添加的是否为广告模块 如果是 添加一个ad_id
-                    if (data.jsonData.componentList[0].component_type == 2) {
-                        this.commit("template/getRandomAdid")
-                        //添加板块id  
-                        state.pageData.article.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            adid: state.ad_id,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    } else {
-                        state.pageData.article.push({
-                            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-                            i: id,
-                            x: 0,
-                            y: maxY + 1,
-                            w: 12,
-                            h: data.h,
-                            type: data.type,
-                            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-                            content: data.jsonData,
-                            dataSort: dataSort,
-                        });
-                    }
+                    state.pageData.article.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        content: data.jsonData,
+                        dataSort: dataSort,
+                    });
                     console.log("当前添加模块的dataSort为：" + dataSort);
                     //当前的页面构建数据
                     console.log(state.pageData.article);
@@ -864,10 +760,14 @@ const mutations = {
             //2=广告
             if (state.editComponentType == 2) {
                 let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
-                module.content.componentList[data.sort].componentData.text = data.data.adName;
+                //module.content.componentList[data.sort].componentData.text = data.data.adName;
+                module.content.ad.name = data.data.adName;
                 Vue.set(state.pageData.index, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.index);
+                //设置用于回显的广告名，否则会导致回显的广告名和实际的广告名不一致
+                //因为广告名没有默认值，这会导致watch监听不到，所以这里需要手动设置
+                state.componentViewData.adName = data.data.adName;
             }
             //开始复制 end------------------------------------------------------------>
         }
@@ -900,10 +800,12 @@ const mutations = {
             //2=广告
             if (state.editComponentType == 2) {
                 let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
-                module.content.componentList[data.sort].componentData.text = data.data.adName;
+                //module.content.componentList[data.sort].componentData.text = data.data.adName;
+                module.content.ad.name = data.data.adName;
                 Vue.set(state.pageData.list, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.list);
+                state.componentViewData.adName = data.data.adName;
             }
             //开始复制 end------------------------------------------------------------>
         }
@@ -933,10 +835,12 @@ const mutations = {
             //2=广告
             if (state.editComponentType == 2) {
                 let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
-                module.content.componentList[data.sort].componentData.text = data.data.adName;
+                //module.content.componentList[data.sort].componentData.text = data.data.adName;
+                module.content.ad.name = data.data.adName;
                 Vue.set(state.pageData.article, targetModuleIndex, module);
                 console.log("当前的板块数据为：");
                 console.log(state.pageData.article);
+                state.componentViewData.adName = data.data.adName;
             }
             //开始复制 end------------------------------------------------------------>
         }
@@ -1317,17 +1221,32 @@ const mutations = {
     },
     //格式化模板信息
     formatTemplateInfo(state, data) {
+        //1.处理广告位
+        //先把广告位的数据清空，再重新获取
+        //this.commit('template/clearAd');
         // 深拷贝数据，避免直接修改原数据
         let clonedData = JSON.parse(JSON.stringify(data));
-        // 把ad_id传进去
-        for (let item of clonedData.data) {
-            if (item.adid) {
-                item.content.componentList[0].componentData.ad_id = item.adid;
-            }
-        }
         // 按照 clonedData.data.y 的大小排序
         clonedData.data.sort((a, b) => a.y - b.y);
-        //console.log(clonedData, clonedData);
+        // 取出每个通栏中的广告，并保存到state.webSiteData.ad中
+        for (let index in clonedData.data) {
+            if(clonedData.data[index].content.ad){
+                let pageName = "";
+                if(state.pageStatus==1){pageName = "index";}
+                if(state.pageStatus==2){pageName = "category";}
+                if(state.pageStatus==3){pageName = "list";}
+                if(state.pageStatus==4){pageName = "detail";}
+                if(state.pageStatus==5){pageName = "search";}
+                if(state.pageStatus==6){pageName = "page";}
+                if(state.pageStatus==7){pageName = "page";}
+                let ad_index = Number(index)+1;
+                let ad_tag = `${state.adKey}_${pageName}_${ad_index}`;
+                clonedData.data[index].content.ad.website_id = state.editWebsiteId;
+                clonedData.data[index].content.ad.ad_tag = ad_tag;
+                state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
+            }
+        }
+
         let websiteData = [];
         // 获取板块的 sort
         for (let index = 0; index < clonedData.data.length; index++) {
@@ -1356,6 +1275,8 @@ const mutations = {
         //临时展示保存的数据 后期移除
         state.editWebsiteTemplateJsonWindow = true;
         //调用mutations中的方法无需使用$store
+        //每次格式化之前先清理广告位数据
+        this.commit('template/clearAd');
         //格式化index的信息
         this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" });
         //格式化list的信息
@@ -1576,28 +1497,6 @@ const actions = {
             })
         })
     },
-    //1.4 获取行政区划
-    selectWebsiteArea({ commit }, data) {
-        return new Promise((resolve, reject) => {
-            selectWebsiteArea(data).then(response => {
-                commit('setArea', response.data);
-                resolve(response)
-            }).catch(error => {
-                reject(error)
-            })
-        })
-    },
-    //1.5 获取所有职能部门
-    selectWebsiteDepartment({ commit }, data) {
-        return new Promise((resolve, reject) => {
-            selectWebsiteDepartment(data).then(response => {
-                commit('setDepartment', response.data);
-                resolve(response)
-            }).catch(error => {
-                reject(error)
-            })
-        })
-    },
     //1.显示画板组件数据 end------------------------------------------------------------>
 
     //2.构建网站json start------------------------------------------------------------>
@@ -1626,6 +1525,7 @@ const actions = {
         return new Promise((resolve, reject) => {
             getAdminSiteInfo(data).then(response => {
                 commit('setWebsiteInfo', response.data);
+                commit('setAdKey', response.data.ad_key);
                 resolve(response)
             }).catch(error => {
                 reject(error)

src/views/template/page/pageIndex.vue

@@ -74,22 +74,10 @@
                         <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">
+                        <!-- 7.带广告新闻组合 -->
+                        <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
                             <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
-                        </div> -->
-                        <!-- 10.友情链接模块 -->
-                        <!-- <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>
@@ -130,12 +118,8 @@ import manyPictureSector from '../style/sector/body/index/list/1200x470/1.vue';
 import commentSector from '../style/sector/body/index/list/1200x470/2.vue';
 //新闻图文组合3
 import listSector from '../style/sector/body/index/list/1200x980/1.vue';
-
-
-
-
-// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
-// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
+//带广告图文组合
+import onlyImgSector from '../style/sector/body/index/list/1200x480/1.vue';
 //2.引入自助建站组件 end------------------------------------------------------------>
 
 
@@ -151,8 +135,7 @@ export default {
         manyPictureSector,//新闻图文组合1
         commentSector,//新闻图文组合2
         listSector,//新闻图文组合3
-        // onlyImgSector,
-        // friendShipLinkSector,
+        onlyImgSector,
         footerSector
     },
     data() {
@@ -368,6 +351,12 @@ export default {
   background-color: #fff;
 }
 
+//占位元素颜色
+::v-deep .vue-grid-placeholder {
+  background: #ccc !important;
+  opacity: 0.3;
+}
+
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {

src/views/template/public/componentWindow.vue

@@ -270,14 +270,144 @@
                 <!--7.两列布局新闻组件2 右侧 end---------------------------------------->
 
                 <!--8.两列布局新闻组件3 左侧上半部分 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 8" 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/1749203040403256.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/1749203054268297.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/1749203136861391.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/png/20250606/1749203144218891.png"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表主题色标识</div>
+                        </div>
+                    </div>
+                </div>
                 <!--8.两列布局新闻组件3 左侧上半部分 end---------------------------------------->
 
                 <!--9.两列布局新闻组件3 左侧下半部分 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 9" 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/20250609/1749429181784621.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/20250609/1749430114351294.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/20250609/1749430122219615.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/20250609/1749430130962786.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表主题色标识</div>
+                        </div>
+                    </div>
+                </div>
                 <!--9.两列布局新闻组件3 左侧下半部分 end---------------------------------------->
 
                 <!--10.两列布局新闻组件3 右侧部分 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBoxStyle4">
+                    <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/20250609/1749430470981307.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/20250609/1749430717156318.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/20250609/1749430731348410.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/20250609/1749430739421252.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/20250609/174943074887033.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/20250609/1749430757268221.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标与右侧保持间距</div>
+                        </div>
+                    </div>
+                </div>
                 <!--10.两列布局新闻组件3 右侧部分 end---------------------------------------->
 
+                <!--11.带广告图文组合 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 11" 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/20250609/1749451127220319.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/20250609/1749453960887626.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/20250609/1749453969223756.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/20250609/174945397556612.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/20250609/1749453982118601.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/20250609/1749453996190138.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在上，不加粗</div>
+                        </div>
+                    </div>
+                </div>
+                <!--11.带广告图文组合 end---------------------------------------->
 
             </div>
         </div>
@@ -448,6 +578,84 @@ export default {
                 }
             }
         }
+
+        //一行四个
+        .componentScrollBoxStyle4 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 2%;  // 使用gap属性来控制元素之间的间距
+            .componentScrollbigBog{
+                width: 23%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
+        }
+
+        //一行五个
+        .componentScrollBoxStyle4 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1.5%;  // 使用gap属性来控制元素之间的间距
+            .componentScrollbigBog{
+                width: 18.5%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
+        }
     }
 }
 

src/views/template/public/editWindow.vue

@@ -32,6 +32,15 @@
                     <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
                         <el-input value="广告" disabled/>
                     </el-form-item>
+                    <el-form-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.width" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.height" disabled/>
+                    </el-form-item>
+                    <el-form-item 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>
@@ -111,7 +120,7 @@ export default {
                 this.form.type1data.pid_arr = newVal;
             }
             if(this.$store.state.template.editComponentType==2){ 
-                this.form.type2data.pid_arr = newVal;
+                this.form.type3data.pid_arr = newVal;
             }
         },
         getadName(newVal, oldVal) {
@@ -170,7 +179,7 @@ export default {
                     }
                     //2=广告
                     if(this.$store.state.template.editComponentType == 2){
-                        data.data = this.form.type2data;
+                        data.data = this.form.type3data;
                     }
                     //第二步：提交数据
                     this.$store.commit('template/saveComponentData',data);

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

@@ -57,6 +57,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid #D9D9D9;
+      box-sizing: border-box;
       .listNewsStyleBorder {
         border-bottom: 2px solid #19499F;
         padding-bottom: 18px;

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

@@ -0,0 +1,244 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsImgNewsBox">
+                    <div class="listNewsImgNewsItem">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749457205768472.jpg">
+                        <div class="listNewsImgNewsItemTitle">
+                            浦江奔涌传薪火 海派融新纳百川
+                        </div>
+                    </div>
+                    <div class="listNewsImgNewsItem">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749457234678535.jpg">
+                        <div class="listNewsImgNewsItemTitle">
+                            国际生物多样性日宣传活动在黑龙江省伊春市举行
+                        </div>
+                    </div>
+                </div>
+                <div class="listNewsImgNewsUl">
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">四部门发布《2025年数字乡村发展工作要点》 加快推进智慧农业发展</div>
+                   </div>
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">外贸规模创历史同期新高 中国—中东欧国家合作跑出“加速度”</div>
+                   </div>
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">外贸规模创历史同期新高 中国—中东欧国家合作跑出“加速度”</div>
+                   </div>
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">外贸规模创历史同期新高 中国—中东欧国家合作跑出“加速度”</div>
+                   </div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div class="listNewsImgNewsBox">
+                    <div class="listNewsImgNewsItem">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749457244350725.jpg">
+                        <div class="listNewsImgNewsItemTitle">
+                            五月的云南省保山市昌宁县街头蓝花楹正用一袭温柔的紫 编织着属于小城的浪漫。
+                        </div>
+                    </div>
+                </div>
+                <div class="adBox" :class="{buildingBorder: this.$store.state.template.previewStatus==false}">
+                    <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="2" :y="y"/>
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import editBtn from '../../../../public/editBtn.vue'
+export default {
+    components: {
+        editBtn
+    },
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        id:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        }
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .buildingBorder {
+        border: 2px dashed #999;
+        border-bottom: none;
+        border-right: none;
+    }
+    .listNewsBox {
+        width: 1200px;
+        height: 480px;
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 720px;
+                height: 420px;
+                .listNewsImgNewsBox {
+                    width: 720px;
+                    height: 110px;
+                    display: flex;
+                    align-items: flex-start;
+                    justify-content: space-between;
+                    margin-bottom: 20px;
+                    .listNewsImgNewsItem {
+                        width: 350px;
+                        height: 110px;
+                        background: #F9FAFB;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        box-sizing: border-box;
+                        .listNewsImgNewsItemTitle {
+                            color: #333333;
+                            font-size: 18px;
+                            box-sizing: border-box;
+                            padding: 15px 8px;
+                        }
+                        img {
+                            display: block;
+                        }
+                    }
+                }
+                .listNewsImgNewsUl {
+                    .listNewsImgNewsLi {
+                        width: 720px;
+                        height: 62px;
+                        background: #F9FAFB;
+                        display: flex;
+                        margin-bottom: 14px;
+                        .listNewsImgNewsMark {
+                            background: #004564;
+                            color: #fff;
+                            width: 50px;
+                            height: 62px;
+                            box-sizing: border-box;
+                            padding: 15px 10px;
+                            font-size: 12px;
+                            font-weight: bold;
+                            margin-right: 10px;
+                            div {
+                                margin-bottom: 5px;
+                                &:last-child {
+                                    margin-bottom: 0;
+                                }
+                            }
+                        }
+                        .listNewsImgNewsTitle {
+                            flex:1;
+                            color:#333;
+                            font-size: 18px;
+                            height: 62px;
+                            line-height: 62px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                        &:first-child {
+                            .listNewsImgNewsTitle {
+                                font-weight: bold;
+                            }
+                        }
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+            .listNewsContentRight {
+                width: 450px;
+                height: 420px;
+                .listNewsImgNewsBox {
+                    margin-bottom: 20px;
+                    .listNewsImgNewsItem {
+                        width: 450px;
+                        height: 110px;
+                        background: #F9FAFB;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        .listNewsImgNewsItemTitle {
+                            color: #333333;
+                            font-size: 18px;
+                            box-sizing: border-box;
+                            padding: 15px 8px;
+                        }
+                        img {
+                            display: block;
+                        }
+                    }
+                }
+                .adBox {
+                    box-sizing: border-box;
+                    position: relative;
+                    img {
+                        display: block;
+                        width: 450px;
+                        height: 290px;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

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

@@ -0,0 +1,244 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsImgNewsUl">
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">四部门发布《2025年数字乡村发展工作要点》 加快推进智慧农业发展</div>
+                   </div>
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">外贸规模创历史同期新高 中国—中东欧国家合作跑出“加速度”</div>
+                   </div>
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">外贸规模创历史同期新高 中国—中东欧国家合作跑出“加速度”</div>
+                   </div>
+                   <div class="listNewsImgNewsLi">
+                        <div class="listNewsImgNewsMark">
+                            <div>重 点</div>
+                            <div>关 注</div>
+                        </div>
+                        <div class="listNewsImgNewsTitle">外贸规模创历史同期新高 中国—中东欧国家合作跑出“加速度”</div>
+                   </div>
+                </div>
+                <div class="listNewsImgNewsBox">
+                    <div class="listNewsImgNewsItem">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749457205768472.jpg">
+                        <div class="listNewsImgNewsItemTitle">
+                            浦江奔涌传薪火 海派融新纳百川
+                        </div>
+                    </div>
+                    <div class="listNewsImgNewsItem">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749457234678535.jpg">
+                        <div class="listNewsImgNewsItemTitle">
+                            国际生物多样性日宣传活动在黑龙江省伊春市举行
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div class="listNewsImgNewsBox">
+                    <div class="listNewsImgNewsItem">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749457244350725.jpg">
+                        <div class="listNewsImgNewsItemTitle">
+                            五月的云南省保山市昌宁县街头蓝花楹正用一袭温柔的紫 编织着属于小城的浪漫。
+                        </div>
+                    </div>
+                </div>
+                <div class="adBox" :class="{buildingBorder: this.$store.state.template.previewStatus==false}">
+                    <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="2" :y="y"/>
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import editBtn from '../../../../public/editBtn.vue'
+export default {
+    components: {
+        editBtn
+    },
+    props: {
+        name:{
+            type:String,
+            default:""
+        },
+        id:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        }
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .buildingBorder {
+        border: 2px dashed #999;
+        border-bottom: none;
+        border-right: none;
+    }
+    .listNewsBox {
+        width: 1200px;
+        height: 480px;
+        position: relative;
+        .listNewsTitle {
+            font-size:22px;
+            font-weight:bold;
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 2px solid #004564;
+            color:#004564;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .listNewsContent {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            .listNewsContentLeft {
+                width: 720px;
+                height: 420px;
+                .listNewsImgNewsBox {
+                    width: 720px;
+                    height: 110px;
+                    display: flex;
+                    align-items: flex-start;
+                    justify-content: space-between;
+                    .listNewsImgNewsItem {
+                        width: 350px;
+                        height: 110px;
+                        background: #F9FAFB;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        box-sizing: border-box;
+                        .listNewsImgNewsItemTitle {
+                            color: #333333;
+                            font-size: 18px;
+                            box-sizing: border-box;
+                            padding: 15px 8px;
+                        }
+                        img {
+                            display: block;
+                        }
+                    }
+                }
+                .listNewsImgNewsUl {
+                    margin-bottom: 20px;
+                    .listNewsImgNewsLi {
+                        width: 720px;
+                        height: 62px;
+                        background: #F9FAFB;
+                        display: flex;
+                        margin-bottom: 14px;
+                        .listNewsImgNewsMark {
+                            background: #004564;
+                            color: #fff;
+                            width: 50px;
+                            height: 62px;
+                            box-sizing: border-box;
+                            padding: 15px 10px;
+                            font-size: 12px;
+                            font-weight: bold;
+                            margin-right: 10px;
+                            div {
+                                margin-bottom: 5px;
+                                &:last-child {
+                                    margin-bottom: 0;
+                                }
+                            }
+                        }
+                        .listNewsImgNewsTitle {
+                            flex:1;
+                            color:#333;
+                            font-size: 18px;
+                            height: 62px;
+                            line-height: 62px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                        &:first-child {
+                            .listNewsImgNewsTitle {
+                                font-weight: bold;
+                            }
+                        }
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+            .listNewsContentRight {
+                width: 450px;
+                height: 420px;
+                .listNewsImgNewsBox {
+                    margin-bottom: 20px;
+                    .listNewsImgNewsItem {
+                        width: 450px;
+                        height: 110px;
+                        background: #F9FAFB;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        .listNewsImgNewsItemTitle {
+                            color: #333333;
+                            font-size: 18px;
+                            box-sizing: border-box;
+                            padding: 15px 8px;
+                        }
+                        img {
+                            display: block;
+                        }
+                    }
+                }
+                .adBox {
+                    box-sizing: border-box;
+                    position: relative;
+                    img {
+                        display: block;
+                        width: 450px;
+                        height: 290px;
+                    }
+                }
+            }
+        }
+    }
+</style>
+

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

@@ -63,6 +63,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             display: flex;

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

@@ -64,6 +64,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             display: flex;

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

@@ -50,6 +50,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             .listNewsContentTop {

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

@@ -50,6 +50,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             .listNewsContentTop {

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

@@ -4,7 +4,57 @@
             {{name}}
         </div>
         <div class="listNewsContent">
-            3333
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174943770744771.jpg" />
+                    <span>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437491337294.jpg" />
+                    </span>
+                </div>
+                <div class="listNewsContentItemRight">河南黄泛区集团：抓好后期管理 冲刺夏粮丰收</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250609/1749437723457836.png" />
+                    <span>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437499146137.jpg" />
+                    </span>
+                </div>
+                <div class="listNewsContentItemRight">云南耿马县孟定镇：党建长廊固边疆 产业写足增收账</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437729980126.jpg" />
+                    <span>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437506412478.jpg" />
+                    </span>
+                </div>
+                <div class="listNewsContentItemRight">智慧双手铸就毫米精度 智能建造助力乡村振兴</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437736135772.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">贵州龙里县湾滩河镇喜迎丰收</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437743486800.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">甘肃民乐县：传统手面“挂”出好日子</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174943775111784.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">莱西市望城街道凯盛浩丰现代设施农业产业园</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437760652265.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">第二届东日马超邀请赛在西藏拉萨市当雄县赛马场举行</div>
+            </div>
         </div>
     </div>
 </template>
@@ -42,69 +92,36 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .listNewsContentLeft {
-                width: 350px;
-                height: 380px;
-                img {
-                    display: block;
+            background: #F9FAFB;
+            .listNewsContentItem {
+                display: flex;
+                width: 450px;
+                height: 110px;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
                 }
-                .listNewsContentLeftTop {
-                    margin-bottom: 20px;
+                .listNewsContentItemLeft {
+                    width: 170px;
+                    height: 110px;
                     position: relative;
-                }
-                .listNewsContentLeftBottom {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    position: relative;
-                    &>div {
-                        position: relative;
+                    span {
+                        position: absolute;
+                        top: -3px;
+                        left: 10px;
                     }
-                }
-                .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;
+                    img {
+                        display: block;
                     }
                 }
+                .listNewsContentItemRight {
+                    padding:15px 8px;
+                    font-size: 18px;
+                    color: #333333;
+                }
             }
         }
     }

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

@@ -0,0 +1,129 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174943770744771.jpg" />
+                    <span>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437491337294.jpg" />
+                    </span>
+                </div>
+                <div class="listNewsContentItemRight">河南黄泛区集团：抓好后期管理 冲刺夏粮丰收</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250609/1749437723457836.png" />
+                    <span>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437499146137.jpg" />
+                    </span>
+                </div>
+                <div class="listNewsContentItemRight">云南耿马县孟定镇：党建长廊固边疆 产业写足增收账</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437729980126.jpg" />
+                    <span>
+                        <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437506412478.jpg" />
+                    </span>
+                </div>
+                <div class="listNewsContentItemRight">智慧双手铸就毫米精度 智能建造助力乡村振兴</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437736135772.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">贵州龙里县湾滩河镇喜迎丰收</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437743486800.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">甘肃民乐县：传统手面“挂”出好日子</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174943775111784.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">莱西市望城街道凯盛浩丰现代设施农业产业园</div>
+            </div>
+            <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749437760652265.jpg" />
+                </div>
+                <div class="listNewsContentItemRight">第二届东日马超邀请赛在西藏拉萨市当雄县赛马场举行</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;
+            box-sizing: border-box;
+        }
+        .listNewsContent {
+            background: #F9FAFB;
+            .listNewsContentItem {
+                display: flex;
+                width: 450px;
+                height: 110px;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                .listNewsContentItemLeft {
+                    width: 170px;
+                    height: 110px;
+                    position: relative;
+                    span {
+                        position: absolute;
+                        top: 0;
+                        left: 10px;
+                    }
+                    img {
+                        display: block;
+                    }
+                }
+                .listNewsContentItemRight {
+                    padding:15px 8px;
+                    font-size: 18px;
+                    color: #333333;
+                }
+            }
+        }
+    }
+</style>
+

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

@@ -4,7 +4,28 @@
             {{name}}
         </div>
         <div class="listNewsContent">
-            1111
+           <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749433057911626.jpg"/>
+                    <div class="listNewsContentItemLeftTitle">海南海口三门坡：荔枝...</div>
+                </div>
+                <div class="listNewsContentItemRight">
+                    <div>山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</div>
+                    <div>两部门启动应急物资政社协同保障机制 支持陕西、河南等省做...</div>
+                    <div>物流成本高、基础设施不足 偏远地区农产品出村“最初一公里”</div>
+                </div>
+           </div>
+           <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250609/1749433088499697.png"/>
+                    <div class="listNewsContentItemLeftTitle">海南海口三门坡：荔枝...</div>
+                </div>
+                <div class="listNewsContentItemRight">
+                    <div>山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</div>
+                    <div>两部门启动应急物资政社协同保障机制 支持陕西、河南等省做...</div>
+                    <div>物流成本高、基础设施不足 偏远地区农产品出村“最初一公里”</div>
+                </div>
+           </div>
         </div>
     </div>
 </template>
@@ -42,67 +63,61 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .listNewsContentLeft {
-                width: 350px;
-                height: 380px;
-                img {
-                    display: block;
+            .listNewsContentItem {
+                display: flex;
+                background: #F9FAFB;
+                align-items: flex-start;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
                 }
-                .listNewsContentLeftTop {
-                    margin-bottom: 20px;
+                .listNewsContentItemLeft {
+                    width: 170px;
+                    height: 110px;
                     position: relative;
-                }
-                .listNewsContentLeftBottom {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    position: relative;
-                    &>div {
-                        position: relative;
+                    img {
+                        display: block;
+                        width: 170px;
+                        height: 110px;
+                    }
+                    .listNewsContentItemLeftTitle {
+                        position: absolute;
+                        bottom: 0;
+                        z-index: 1;
+                        width: 100%;
+                        color: #fff;
+                        height: 28px;
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                        box-sizing: border-box;
+                        padding: 0 5px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 28px;
+                        font-size: 14px;
                     }
                 }
-                .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;
+                .listNewsContentItemRight {
+                    padding: 10px;
                     box-sizing: border-box;
-                    background: url('http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png') no-repeat left center;
+                    flex: 1;
+                    height: 110px;
                     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) {
+                    div {
+                        box-sizing: border-box;
+                        height: 24px;
+                        line-height: 24px;
+                        padding-left: 16px;
+                        font-size: 18px;
                         color:#333333;
-                        font-weight: bold;
+                        margin-bottom: 10px;
+                        background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
                     }
                 }
             }

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

@@ -0,0 +1,127 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+           <div class="listNewsContentItem">
+                <div class="listNewsContentItemRight">
+                    <div>山体滑坡发生前会有哪些征兆？如何科学避险？一文了解</div>
+                    <div>两部门启动应急物资政社协同保障机制 支持陕西、河南等省做...</div>
+                    <div>物流成本高、基础设施不足 偏远地区农产品出村“最初一公里”</div>
+                </div>
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749433057911626.jpg"/>
+                    <div class="listNewsContentItemLeftTitle">海南海口三门坡：荔枝...</div>
+                </div>
+           </div>
+           <div class="listNewsContentItem">
+                <div class="listNewsContentItemLeft">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/png/20250609/1749433088499697.png"/>
+                    <div class="listNewsContentItemLeftTitle">海南海口三门坡：荔枝...</div>
+                </div>
+                <div class="listNewsContentItemRight">
+                    <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;
+            box-sizing: border-box;
+        }
+        .listNewsContent {
+            .listNewsContentItem {
+                display: flex;
+                background: #F9FAFB;
+                align-items: flex-start;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                .listNewsContentItemLeft {
+                    width: 170px;
+                    height: 110px;
+                    position: relative;
+                    img {
+                        display: block;
+                        width: 170px;
+                        height: 110px;
+                    }
+                    .listNewsContentItemLeftTitle {
+                        position: absolute;
+                        bottom: 0;
+                        z-index: 1;
+                        width: 100%;
+                        color: #fff;
+                        height: 28px;
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                        box-sizing: border-box;
+                        padding: 0 5px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 28px;
+                        font-size: 14px;
+                    }
+                }
+                .listNewsContentItemRight {
+                    padding: 10px;
+                    box-sizing: border-box;
+                    flex: 1;
+                    height: 110px;
+                    overflow: hidden;
+                    div {
+                        box-sizing: border-box;
+                        height: 24px;
+                        line-height: 24px;
+                        padding-left: 16px;
+                        font-size: 18px;
+                        color:#333333;
+                        margin-bottom: 10px;
+                        background: url(http://img.bjzxtw.org.cn/pre/image/png/20250605/1749100871349444.png) no-repeat left center;
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
+

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

@@ -68,6 +68,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             display: flex;

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

@@ -68,6 +68,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             display: flex;

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

@@ -65,6 +65,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             .listNewsContentTop {

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

@@ -65,6 +65,7 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             .listNewsContentTop {

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

@@ -4,7 +4,36 @@
             {{name}}
         </div>
         <div class="listNewsContent">
-            2222
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentLeftTop">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749433301210488.jpg">
+                    <div class="listNewsContentLeftTopTitle">河南光山：抢收小麦 颗粒归仓</div>
+                </div>
+                <div class="listNewsContentLeftBottom">
+                    <div>河南黄泛区集团：抓好后期管理 冲刺夏粮...</div>
+                    <div>安徽农垦夹沟农场：为产出小麦良种“加...</div>
+                    <div>新疆生产建设兵团第四师可克达拉市67团...</div>
+                    <div>51.7亿元里的强村“致富经”——浙江嘉...</div>
+                    <div>从现代农业产业园打造农文旅融合样板房...</div>
+                    <div>天津市抓实保障“四要素”持续推动设施...</div>
+                    <div>陕西实施“千亿级设施农业工程”加快推...</div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div class="listNewsContentLeftTop">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749433323323871.jpg">
+                    <div class="listNewsContentLeftTopTitle">浙江湖州：“红色引擎”驱动农业生产...</div>
+                </div>
+                <div class="listNewsContentRightBottom">
+                    <div>棉花应对高温天气生产技术指导意见并对...</div>
+                    <div>果菜茶应对高温干旱生产技术指导意见建议</div>
+                    <div>生猪全域数智节粮应用技术在青岛发布相...</div>
+                    <div>河南修武：富硒蛋孵出乡村振兴增收金钥匙</div>
+                    <div>内蒙古科左中旗舍伯吐镇格根仓嘎查驻村...</div>
+                    <div>山东莒南：大豆玉米带状复合种植开启新...</div>
+                    <div>湖南祁阳：推广大豆玉米复合种植 2.1万亩...</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -42,67 +71,55 @@ export default {
             border-bottom: 2px solid #004564;
             color:#004564;
             margin-bottom: 20px;
+            box-sizing: border-box;
         }
         .listNewsContent {
             display: flex;
-            align-items: center;
             justify-content: space-between;
-            .listNewsContentLeft {
+            .listNewsContentLeft,.listNewsContentRight {
                 width: 350px;
-                height: 380px;
-                img {
-                    display: block;
-                }
+                height: 560px;
                 .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;
+                    img {
+                        width: 350px;
+                        height: 245px;
+                        display: block;
                     }
-                    &:first-child,&:nth-child(4),&:nth-child(7) {
+                    .listNewsContentLeftTopTitle {
+                        position: absolute;
+                        bottom: 0;
+                        z-index: 1;
+                        width: 100%;
+                        color: #fff;
+                        height: 44px;
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                        box-sizing: border-box;
+                        padding: 0 10px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 44px;
+                        font-size: 18px;
+                    }
+                }
+                .listNewsContentLeftBottom,.listNewsContentRightBottom {
+                    div {
                         color:#333333;
-                        font-weight: bold;
+                        font-size:18px;
+                        line-height: 24px;
+                        height: 24px;
+                        margin-bottom: 20px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                        &:nth-child(1),&:nth-child(4){
+                            font-weight: bold;
+                        }
                     }
                 }
             }

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

@@ -0,0 +1,129 @@
+<template>
+    <div class="listNewsBox">
+        <div class="listNewsTitle">
+            {{name}}
+        </div>
+        <div class="listNewsContent">
+            <div class="listNewsContentLeft">
+                <div class="listNewsContentLeftBottom">
+                    <div>河南黄泛区集团：抓好后期管理 冲刺夏粮...</div>
+                    <div>安徽农垦夹沟农场：为产出小麦良种“加...</div>
+                    <div>新疆生产建设兵团第四师可克达拉市67团...</div>
+                    <div>51.7亿元里的强村“致富经”——浙江嘉...</div>
+                    <div>从现代农业产业园打造农文旅融合样板房...</div>
+                    <div>天津市抓实保障“四要素”持续推动设施...</div>
+                    <div>陕西实施“千亿级设施农业工程”加快推...</div>
+                </div>
+                <div class="listNewsContentLeftTop">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749433301210488.jpg">
+                    <div class="listNewsContentLeftTopTitle">河南光山：抢收小麦 颗粒归仓</div>
+                </div>
+            </div>
+            <div class="listNewsContentRight">
+                <div class="listNewsContentRightBottom">
+                    <div>棉花应对高温天气生产技术指导意见并对...</div>
+                    <div>果菜茶应对高温干旱生产技术指导意见建议</div>
+                    <div>生猪全域数智节粮应用技术在青岛发布相...</div>
+                    <div>河南修武：富硒蛋孵出乡村振兴增收金钥匙</div>
+                    <div>内蒙古科左中旗舍伯吐镇格根仓嘎查驻村...</div>
+                    <div>山东莒南：大豆玉米带状复合种植开启新...</div>
+                    <div>湖南祁阳：推广大豆玉米复合种植 2.1万亩...</div>
+                </div>
+                <div class="listNewsContentLeftTop">
+                    <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749433323323871.jpg">
+                    <div class="listNewsContentLeftTopTitle">浙江湖州：“红色引擎”驱动农业生产...</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;
+            box-sizing: border-box;
+        }
+        .listNewsContent {
+            display: flex;
+            justify-content: space-between;
+            .listNewsContentLeft,.listNewsContentRight {
+                width: 350px;
+                height: 560px;
+                .listNewsContentLeftTop {
+                    position: relative;
+                    img {
+                        width: 350px;
+                        height: 245px;
+                        display: block;
+                    }
+                    .listNewsContentLeftTopTitle {
+                        position: absolute;
+                        bottom: 0;
+                        z-index: 1;
+                        width: 100%;
+                        color: #fff;
+                        height: 44px;
+                        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+                        box-sizing: border-box;
+                        padding: 0 10px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 44px;
+                        font-size: 18px;
+                    }
+                }
+                .listNewsContentLeftBottom,.listNewsContentRightBottom {
+                    margin-bottom: 20px;
+                    div {
+                        color:#333333;
+                        font-size:18px;
+                        line-height: 24px;
+                        height: 24px;
+                        margin-bottom: 20px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                        &:nth-child(1),&:nth-child(4){
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
+

src/views/template/style/components/listNews.vue

@@ -71,6 +71,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid #D9D9D9;
+      box-sizing: border-box;
       .listNewsStyleBorder {
         border-bottom: 2px solid #19499F;
         padding-bottom: 18px;

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

@@ -0,0 +1,84 @@
+<template>
+    <div class="onlyImgSectorBox">
+        <div :class="['onlyImgSector', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="11"/>
+            <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="mainData.text" :sizeImg="mainData.img" :y="y"/>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                <main1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name" :dataSort="dataSort" :id="id" :y="y"/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                <main2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name" :dataSort="dataSort" :id="id" :y="y"/>
+            </div>
+            <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                <atWork :dataStyle="2" :dataWidth="1200" :dataHeight="480" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//1200x480
+import main1Style from '../../../../../../style/components/list/1200x480/1.vue'
+import main2Style from '../../../../../../style/components/list/1200x480/2.vue'
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        main1Style,
+        main2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            mainData:{
+                text:4,
+                img:3
+            },
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.onlyImgSectorBox {
+    width: 100%;
+    height: 480px;
+    .onlyImgSector {
+        width: 1200px;
+        height: 480px;
+        margin: 0 auto;
+        box-sizing: content-box;
+        position: relative;
+    }
+}
+</style>
+

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

@@ -1,56 +1,46 @@
 <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 v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+                        <leftTop1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+                        <leftTop2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[0].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="1" :dataWidth="720" :dataHeight="300" />
+                    </div>
                 </div>
                 <div :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 v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+                        <leftBottom1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+                        <leftBottom2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[1].componentData.name"/>
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style > 2">
+                        <atWork :dataStyle="1" :dataWidth="720" :dataHeight="620" />
+                    </div>
                 </div>
             </div>
             <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 v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
+                    <right1Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
+                    <right2Style :name="this.$store.state.template.pageData.index[dataSort].content.componentList[2].componentData.name"/>
+                </div>
+                <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style > 2">
+                    <atWork :dataStyle="1" :dataWidth="450" :dataHeight="950" />
+                </div>
             </div>
         </div>
     </div>
@@ -62,14 +52,13 @@ import editBtn from '../../../../../../public/editBtn.vue'
 import convertBtn from '../../../../../../public/convertBtn.vue'
 //720x300
 import leftTop1Style from '../../../../../../style/components/list/720x300/1.vue'
+import leftTop2Style from '../../../../../../style/components/list/720x300/2.vue'
 //720x620
 import leftBottom1Style from '../../../../../../style/components/list/720x620/1.vue'
+import leftBottom2Style from '../../../../../../style/components/list/720x620/2.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 right2Style from '../../../../../../style/components/list/450x950/2.vue'
 //组件研发中
 import atWork from '../../../../../../public/atWork.vue'
 
@@ -78,9 +67,11 @@ export default {
         editBtn,
         convertBtn,
         leftTop1Style,
+        leftTop2Style,
         leftBottom1Style,
+        leftBottom2Style,
         right1Style,
-        // right2Style,
+        right2Style,
         atWork
     },
     props: {
@@ -136,6 +127,7 @@ export default {
 }
 .buildingBorder4 {
     border-left: none;
+    border-bottom: none;
 }
 .commentSectorBox {
     width:100%;
@@ -143,19 +135,21 @@ export default {
     display: flex;
     .commentSector {
         width: 1200px;
-        height: 980px;
+        height: 950px;
         margin: 0 auto;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
+        box-sizing: content-box;
         .commentSectorLeft {
             width: 720px;
             height: 950px;
             .commentSectorLeftTop {
                 width: 720px;
                 height: 300px;
-                margin-bottom: 30px;
+                margin-bottom: 28px;
                 position: relative;
+                box-sizing: content-box;
             }
             .commentSectorLeftBottom {
                 width: 720px;
@@ -166,6 +160,7 @@ export default {
         .commentSectorRight {
             width: 450px;
             height: 950px;
+            box-sizing: content-box;
             position: relative;
         }
     }

src/views/template/templateCreat.vue

@@ -183,10 +183,6 @@ export default {
     this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
     //5.获取网站底部信息
     this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId});
-    //获取行政区划
-    //this.$store.dispatch('template/selectWebsiteArea',{});
-    //获取行政职能
-    //this.$store.dispatch('template/selectWebsiteDepartment',{});
   }
 }
 </script>