完成自助建站第一套皮肤的开发

完成自助建站第一套皮肤的开发

src/layout/components/template/componentMenu.vue

@@ -11,36 +11,47 @@
         </div>
         <div>
             <el-scrollbar wrap-class="scrollbar-wrapper">
-                <!--首页板块-->
+                <!--首页通栏-->
                 <div v-if="this.$store.state.template.pageStatus == 1">
                     <indexSector/>
                 </div>
-                <!--频道板块-->
+                <!--频道通栏-->
                 <div v-if="this.$store.state.template.pageStatus == 2">
                     <classSector/>
                 </div>
-
-
-
-                <!--列表板块-->
+                <!--列表通栏-->
                 <div v-if="this.$store.state.template.pageStatus == 3">
                     <listSector/>
                 </div>
-                <!--详情板块-->
+                <!--详情通栏-->
                 <div v-if="this.$store.state.template.pageStatus == 4">
                     <articleSector/>
                 </div>
+                <!--搜索通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 5">
+                    <searchSector/>
+                </div>
+                <!--底部列表通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 6">
+                    <sectorList/>
+                </div>
+                <!--底部详情通栏-->
+                <div v-if="this.$store.state.template.pageStatus == 7">
+                    <sectorArticle/>
+                </div>
             </el-scrollbar>
         </div>
     </div>
 </template>
 
 <script>
-//首页板块
 import indexSector from './pages/index/sector.vue';
 import classSector from './pages/class/sector.vue';
 import listSector from './pages/list/sector.vue';
 import articleSector from './pages/article/sector.vue';
+import searchSector from './pages/search/sector.vue';
+import sectorList from './pages/about/sectorList.vue';
+import sectorArticle from './pages/about/sectorArticle.vue';
 
 export default {
     name: 'componentMenu',
@@ -48,7 +59,10 @@ export default {
         indexSector,
         classSector,
         listSector,
-        articleSector
+        articleSector,
+        searchSector,
+        sectorList,
+        sectorArticle
     },
     props: {
         

src/layout/components/template/pages/about/sectorArticle.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('aboutArticleSector', 115, aboutArticleSector)" 
+            @drag="drag('aboutArticleSector', 115, aboutArticleSector)"
+            @dragend="dragend('aboutArticleSector', 115, aboutArticleSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750746198879072.jpg" />
+            </div>
+            <div class="sectorItemTitle">通用型单页详情</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //添加通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 end---------------------------------------->
+
+            //通用单页详情模块 start---------------------------------------->
+            aboutArticleSector: {
+                "sectorName": "aboutArticleSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "fcat_id": 1, 
+                            "listType": [
+                                "id",
+                                "list_title",
+                                "con_title",
+                                "content",
+                                "fcat_id",
+                                "created_at",
+                                "updated_at",
+                                "type_id"    
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                    }
+                ],
+            },
+            //通用单页详情模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

src/layout/components/template/pages/about/sectorList.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('aboutListSector', 132, aboutListSector)" 
+            @drag="drag('aboutListSector', 132, aboutListSector)"
+            @dragend="dragend('aboutListSector', 132, aboutListSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750746179192707.jpg" />
+            </div>
+            <div class="sectorItemTitle">通用型单页列表</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //通栏广告模块 end---------------------------------------->
+
+            //通栏广告模块 start---------------------------------------->
+            aboutListSector: {
+                "sectorName": "aboutListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "fcat_id": 7,
+                            "listType": [
+                                "id",
+                                "list_title",
+                                "con_title",
+                                "content",
+                                "fcat_id",
+                                "created_at",
+                                "updated_at",
+                                "type_id"
+                            ]
+                        }
+                    },
+                    {
+                        "component_type": 3,
+                        "component_style": 1,
+                        "sort": 1,
+                    }
+                ],
+            },
+            //通栏广告模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

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

@@ -1,392 +1,250 @@
 <template>
-  <div class="sectorBox">
-    <div class="sectorItemBox" @click="addModule('adSector',8,adSector)" @drag="drag('adSector',8,adSector)" @dragend="dragend('adSector',8,adSector)" >
-      <div class="sectorItem">
-        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
-      </div>
-      <div class="sectorItemTitle">通栏广告</div>
+    <div class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)"
+            @drag="drag('adSector', 12, adSector)" 
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('articleSector', 161, articleSector)"
+            @drag="drag('articleSector', 161, articleSector)" 
+            @dragend="dragend('articleSector', 161, articleSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750667986738371.jpg" />
+            </div>
+            <div class="sectorItemTitle">通用型文章详情</div>
+        </div>
     </div>
-    <div class="sectorItemBox" @click="addModule('mainArticle',122,mainArticle)" @drag="drag('mainArticle',33,mainArticle)" @dragend="dragend('mainArticle',33,mainArticle)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/articleSector.png"/>
-      </div>
-      <div class="sectorItemTitle">文章详情</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/newsSector.png"/>
-      </div>
-      <div class="sectorItemTitle">次级文章列表</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('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>
 
 <script>
 
 export default {
-  props: {
-    type: {
-     
-    },
-  },
-  data() {
-    return {
-      //添加通栏广告模块 start---------------------------------------->
-      adSector:{
-        sectorName:"adSector",//板块名称
-        componentList:[
-          {
-            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              ad_id:"",//广告位id
-              text:"通栏广告", //广告位名称
-              width:1200, //广告位宽度
-              height:60, //广告位高度
-            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
-          }
-        ]
-      },
-      //添加通栏广告模块 start---------------------------------------->
-
-      //添加banner模块 start---------------------------------------->
-      bannerSector:{
-        sectorName:"bannerSector",//板块名称
-        componentList:[
-          {
-            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"mainTitle",//组件名称
-            sort:1,//组件排序
-            componentData:{//该组件请求的数据
-              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
-              page:1,//请求第几页
-              pageSize:1,//请求的条数
-              listType:[//请求的数据应该包含哪些字段
-                "title",//标题
-                //"created_time",//创建时间
-                //"author",//作者
-                //"imgUrl",//缩略图片
-                //"introduce",//描述
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"banner",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "imgUrl"//缩略图片
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-                "introduce",//描述
-              ]
-            }
-          },
-        ]
-      },
-      //添加banner模块 end---------------------------------------->
+    props: {
+        type: {
 
-      //添加多图板块 start---------------------------------------->
-      manyPictureSector:{
-        sectorName:"manyPictureSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:6, //静态组件无需传递数据
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"fivePicture",
-            sort:2,
-            componentData:{}
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:4,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-        ]
-      },
-      //添加多图板块 end---------------------------------------->
-
-      //文章列表带评论板块 end---------------------------------------->
-      commentSector:{
-        sectorName:"commentSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:2,//该组件使用哪个展示样式
-            component_name:"tabsCalendarNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:6,
-              listType:[
-                "title",
-                "created_time",
-                "introduce"
-              ]
-            }
-          },
-          {
-            component_type:8,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"calendar", //评论组件无需提交数据
-            sort:3,
-            componentData:{}
-          },
-        ]
-      },
-      //文章列表带评论板块 end---------------------------------------->
-
-      //文章列表板块 start---------------------------------------->
-      listSector:{
-        sectorName:"listSector",//板块名称
-        componentList:[
-          {
-            component_type:7,//纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"listNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",
-                "created_time"
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"listNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",
-                "created_time"
-              ]
-            }
-          },
-        ]
-      },
-      //文章列表板块 end---------------------------------------->
+        },
+    },
+    data() {
+        return {
+            //模块1通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //模块1栏广告模块 end---------------------------------------->
 
-      //纯图片组合 start---------------------------------------->
-      onlyImgSector:{
-        sectorName:"onlyImgSector",//板块名称
-        componentList:[
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:7,
-              listType:[
-                "title",
-                "imgUrl"
-              ]
+            //模块2通用型文章详情模块 start---------------------------------------->
+            articleSector: {
+                "sectorName": "articleSector",
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "article_id":"",
+                            "listType": [
+                                "id",
+                                "catid",
+                                "title",
+                                "introduce",
+                                "tag",
+                                "keyword",
+                                "author",
+                                "copyfrom",
+                                "fromurl",
+                                "hits",
+                                "ip",
+                                "status",
+                                "islink",
+                                "linkurl",
+                                "imgurl",
+                                "admin_user_id",
+                                "cat_arr_id",
+                                "created_at",
+                                "updated_at",
+                                "is_original",
+                                "survey_id",
+                                "survey_name",
+                                "is_survey",
+                                "survey_type",
+                                "web_site_id",
+                                "ignore_ids",
+                                "reason",
+                                "department_arr_id",
+                                "department_id",
+                                "city_arr_id",
+                                "city_id",
+                                "level",
+                                "commend_id",
+                                "level_text",
+                                "article_id",
+                                "content",
+                                "category_id",
+                                "cat_name",
+                                "website_name",
+                                "suffix",
+                                "commendArticle"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"最新资讯",
+                            "level":4,
+                            "imgSize": 2,
+                            "textSize": 4,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"热点精选",
+                            "level":5,
+                            "imgSize": 0,
+                            "textSize": 8,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //模块2通用型文章详情模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          }
-        ]
-      },
-      //纯图片组合 end---------------------------------------->
-
-      //友情链接板块 start---------------------------------------->
-      friendShipLinkSector:{
-        sectorName:"friendShipLinkSector",//友情链接无需提交数据
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-          {
-            component_type:4,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{}
-          }
-        ]
-      },
-      //友情链接板块 end---------------------------------------->
-
-      //文章详情板块 start---------------------------------------->
-      mainArticle:{
-        sectorName:"mainArticle",//主文章列表
-        componentList:[
-          {
-            component_type:9, //页面必备组件
-            component_style:1, //文章详情
-            component_name:"mainArticle",
-            sort:1,
-            componentData:{
-              category_id:[], //文章详情
-              page:1,
-              pageSize:1,
-              listType:[
-                "details"//文章详情
-              ]
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
             }
-          },
-        ]
-      }
-      //文章详情板块 end---------------------------------------->
-
-    }
-  },
-  methods: {
-    //添加模块
-    addModule(type,h,jsonData){
-      let data = {
-        source:"click",//添加方式为点击
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      console.log(data);
-      this.$store.commit('template/addModule',data);
-    },
-    //拖拽开始
-    drag(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/drag',data);
-    },
-    //拖拽结束
-    dragend(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/dragend',data);
+            this.$store.commit('template/dragend', data);
+        }
     }
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .sectorBox {
+.sectorBox {
     height: 100%;
     .sectorItemBox {
-      box-sizing: border-box;
-      padding: 0 20px 40px 20px;
-      cursor: pointer;
-      .sectorItem {
-        border: 1px solid #333644;
-        padding: 10px;
-        border-radius: 8px;
-        &:hover {
-          background: #333644;
-          transform: scale(1.1);
-          transition: all 0.2s ease-in-out;
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+            img {
+                display: block;
+                width: 100%;
+            }
         }
-        img {
-          display: block;
-          width: 100%;
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
         }
-      }
-      .sectorItemTitle {
-        color: #fff;
-        font-size: 14px;
-        padding: 10px 0 0 0;
-        text-align: center;
-      }
     }
-  }
-</style>
+}
+</style>

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

@@ -0,0 +1,148 @@
+<template>
+    <div class="sectorBox">
+        <div class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)" 
+            @drag="drag('adSector', 12, adSector)"
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div class="sectorItemBox" 
+            @click="addModule('searchListSector', 133, searchListSector)" 
+            @drag="drag('searchListSector', 133, searchListSector)"
+            @dragend="dragend('searchListSector', 133, searchListSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750727451366122.jpg" />
+            </div>
+            <div class="sectorItemTitle">通用型搜索列表</div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        type: {
+
+        },
+    },
+    data() {
+        return {
+            //添加通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 end---------------------------------------->
+
+            //通用型搜索列表模块 start---------------------------------------->
+            searchListSector: {
+                "sectorName": "searchListSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 3,//组件类型 1=新闻 2=广告 3=静态组件
+                        "component_style": 1,
+                        "sort": 1,
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                    }
+                ],
+            },
+            //通用型搜索列表模块 end---------------------------------------->
+        }
+    },
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.sectorBox {
+    height: 100%;
+
+    .sectorItemBox {
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
+        }
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
+        }
+    }
+}
+</style>

src/store/modules/template.js

@@ -345,7 +345,7 @@ const mutations = {
         }
         //pageStatus==2 分类页 class
         if (state.pageStatus == 2) { 
-            if (state.pageData.index.length >= 10) {
+            if (state.pageData.class.length >= 10) {
                 Message.error('最多只能添加10个通栏！');
                 return;
             } else {
@@ -354,7 +354,7 @@ const mutations = {
         }
         //pageStatus==3 列表页 list
         if (state.pageStatus == 3) { 
-            if (state.pageData.index.length >= 10) {
+            if (state.pageData.list.length >= 10) {
                 Message.error('最多只能添加10个通栏！');
                 return;
             } else {
@@ -362,13 +362,41 @@ const mutations = {
             }
         }
         //pageStatus==4 详情页 article
-        if (state.pageStatus == 4) { }
+        if (state.pageStatus == 4) {
+            if (state.pageData.article.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
         //pageStatus==5 搜索页 search
-        if (state.pageStatus == 5) { }
+        if (state.pageStatus == 5) {
+            if (state.pageData.search.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+         }
         //pageStatus==6 自定义列表页 aloneList
-        if (state.pageStatus == 6) { }
+        if (state.pageStatus == 6) {
+            if (state.pageData.aloneList.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+         }
         //pageStatus==7 自定义详情页 aloneArticle
-        if (state.pageStatus == 7) { }
+        if (state.pageStatus == 7) { 
+            if (state.pageData.aloneArticle.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                this.commit('template/pushModule', data);
+            }
+        }
     },
     //该数据可以添加到画布
     pushModule(state, data) {

src/views/template/page/pageAboutArticle.vue

@@ -0,0 +1,312 @@
+<template>
+    <div>
+        <!-- 1.页头板块 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <headSector />
+        </div>
+        <!-- 全局组件：导航 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <menuSector />
+        </div>
+        <!--使用gridKey来强制更新视图-->
+        <div 
+            id="content" 
+            class="canvasBox"
+        >
+            <grid-layout 
+            :auto-size="true"
+                :class="this.$store.state.template.pageData.aloneArticle.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                ref="gridlayout" 
+                :layout="this.$store.state.template.pageData.aloneArticle"
+                :layout.sync="this.$store.state.template.pageData.aloneArticle" 
+                :col-num="12" 
+                :row-height="rowHeight"
+                :margin="[0, 0]" 
+                :is-draggable="true" 
+                :is-resizable="true" 
+                :key="this.$store.state.template.gridKey
+            ">
+                <grid-item 
+                    v-for="(item, index) in this.$store.state.template.pageData.aloneArticle" 
+                    :key="item.i" 
+                    :i="item.i"
+                    :x="item.x" 
+                    :y="item.y" 
+                    :w="item.w" 
+                    :h="item.h" 
+                    :is-resizable="false"
+                >
+                    <div class="grid-item-content">
+                        <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
+                            <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
+                        </div>
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <div v-if="item.type == 'aboutArticleSector'" class="moduleBox">
+                            <aboutArticleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                    </div>
+                </grid-item>
+            </grid-layout>
+        </div>
+        <!-- 全局组件：页尾 -->
+        <div class="FixedModuleBoxBottom">
+            <footerSector />
+        </div>
+    </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import { GridLayout, GridItem } from "vue-grid-layout";
+//1.页面公用组件 end------------------------------------------------------------>
+
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
+//顶部
+import headSector from '../style/sector/head/1.vue';
+//一级菜单导肮
+import menuSector from '../style/sector/menu/1.vue';
+//列表页是固定的
+import aboutArticleSector from '../style/sector/body/about/1200x1150/1.vue';
+//底部
+import footerSector from '../style/sector/foot/1.vue';
+//通栏组件 开始：
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
+//2.引入自助建站组件 end------------------------------------------------------------>
+
+export default {
+    components: {
+        GridLayout,//画布
+        GridItem,//画布组件
+        headSector,//全局页头
+        menuSector,//全局导航
+        adSector,//通栏广告
+        aboutArticleSector,//固定列表
+        footerSector
+    },
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            rowHeight: 10,
+            //0.全局配置 end------------------------------------------------------------>
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            editModule: "",//待编辑的模块
+            //1.编辑模块 end------------------------------------------------------------>
+        }
+    },
+    mounted() {
+        //必备操作
+        //1.获得vuex中的鼠标对象
+        let mouseObj = this.$store.state.template.mouseXY;
+        //2.获得gridlayout对象
+        this.$store.commit('template/setGridlayoutObj', this.$refs.gridlayout);
+        //3.监听鼠标按住以后的移动事件
+        document.addEventListener("dragover", function (e, store) {
+            mouseObj.x = e.clientX;
+            mouseObj.y = e.clientY;
+            // mouseXY.x = e.clientX;
+            // mouseXY.y = e.clientY;
+        }, false);
+    },
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //0.1上一步  
+        goStyle() {
+            this.$router.push({
+                path: '/templateStyle',
+                query: {
+                    id: this.editId
+                }
+            });
+        },
+        //0.2下一步
+        gotoList() {
+            this.$router.push({
+                path: '/templateList'
+            });
+        },
+        //0.全局操作 end ------------------------------------------------------------>
+
+        //1.模块操作 start ------------------------------------------------------------>
+        //1.1 移动模块
+        moveModule(i, moveType) {
+            this.$store.commit('template/moveModule', { i: i, moveType: moveType });
+        },
+        //1.2 删除模块
+        deleteModule(i, dataSort) {
+            let data = {
+                i: i,
+                dataSort: dataSort
+            }
+            this.$store.commit('template/deleteModule', data);
+        },
+        //1.3 打开弹出框
+        openWindow(item) {
+            this.editModule = item.i;
+            this.windowStatus = true;
+        },
+        //1.4 关闭弹出框
+        closeWindow() {
+            this.windowStatus = false;
+        }
+        //1.模块操作 end ------------------------------------------------------------>
+    }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
+}
+
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+    border: 2px dashed #eee;
+}
+
+.moduleBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    //border: 2px dashed #eee;
+}
+
+.moduleBoxBorder {
+    border: 2px dashed #eee;
+}
+
+//固定的模块
+.FixedModuleBox {
+    width: 100%;
+    //margin-bottom: 20px;
+    //border: 2px dashed #eee;
+}
+
+.FixedModuleBoxBottom {
+    width: 100%;
+}
+
+.FixedMainModuleBox {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+
+    img {
+        margin-bottom: 20px;
+    }
+
+    padding: 100px;
+    //background: #F5F7FB;
+    //margin-bottom: 20px;
+}
+
+.FixedMainModuleBoxBorder {
+    border: 2px dashed #eee;
+}
+
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+
+.grid-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .grid-tools-menu {
+        position: absolute;
+        top: 0;
+        right:10px;
+        z-index: 99;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            width: 38px;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            font-size: 30px;
+            cursor: pointer;
+            color: #999;
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
+            transition: all 0.3s;
+
+            &:hover {
+                color: #333;
+            }
+        }
+    }
+}
+
+.grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+}
+
+//画布调整
+.canvasBox {
+    margin-top: 20px;
+}
+
+.FixedMainModuleBox {
+  min-height: 450px;
+  background-color: #fff;
+  background: url('../../../assets/template/creat.png') no-repeat center center;
+}
+
+.FixedMainModuleBoxAuto {
+  min-height: 450px;
+  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 {
+    line-height: 140px !important;
+}
+
+::v-deep .custom-textarea .el-textarea__inner {
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .custom-align-right .el-form-item__label {
+    text-align: right;
+    /* 设置标签文字右对齐 */
+}
+
+::v-deep .shadowBox .el-button--mini.is-circle {
+    border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageAboutList.vue

@@ -0,0 +1,306 @@
+<template>
+    <div>
+        <!-- 1.页头板块 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <headSector />
+        </div>
+        <!-- 全局组件：导航 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <menuSector />
+        </div>
+        <!--使用gridKey来强制更新视图-->
+        <div 
+            id="content" 
+            class="canvasBox"
+        >
+            <grid-layout 
+                :auto-size="true"
+                :class="this.$store.state.template.pageData.aloneList.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                ref="gridlayout" 
+                :layout="this.$store.state.template.pageData.aloneList"
+                :layout.sync="this.$store.state.template.pageData.aloneList" 
+                :col-num="12" 
+                :row-height="rowHeight"
+                :margin="[0, 0]" 
+                :is-draggable="true" 
+                :is-resizable="true" 
+                :key="this.$store.state.template.gridKey
+            ">
+                <grid-item 
+                    v-for="(item, index) in this.$store.state.template.pageData.aloneList" 
+                    :key="item.i" 
+                    :i="item.i"
+                    :x="item.x" 
+                    :y="item.y" 
+                    :w="item.w" 
+                    :h="item.h" 
+                    :is-resizable="false"
+                >
+                    <div class="grid-item-content">
+                        <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
+                            <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
+                        </div>
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <div v-if="item.type == 'aboutListSector'" class="moduleBox">
+                            <aboutListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                    </div>
+                </grid-item>
+            </grid-layout>
+        </div>
+        <!-- 全局组件：页尾 -->
+        <div class="FixedModuleBoxBottom">
+            <footerSector />
+        </div>
+    </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import { GridLayout, GridItem } from "vue-grid-layout";
+//1.页面公用组件 end------------------------------------------------------------>
+
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
+import headSector from '../style/sector/head/1.vue';
+import menuSector from '../style/sector/menu/1.vue';
+import aboutListSector from '../style/sector/body/about/1200x1290/1.vue';
+import footerSector from '../style/sector/foot/1.vue';
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
+//2.引入自助建站组件 end------------------------------------------------------------>
+
+export default {
+    components: {
+        GridLayout,
+        GridItem,
+        headSector,
+        menuSector,
+        adSector,
+        aboutListSector,
+        footerSector
+    },
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            rowHeight: 10,
+            //0.全局配置 end------------------------------------------------------------>
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            editModule: "",//待编辑的模块
+            //1.编辑模块 end------------------------------------------------------------>
+        }
+    },
+    mounted() {
+        //必备操作
+        //1.获得vuex中的鼠标对象
+        let mouseObj = this.$store.state.template.mouseXY;
+        //2.获得gridlayout对象
+        this.$store.commit('template/setGridlayoutObj', this.$refs.gridlayout);
+        //3.监听鼠标按住以后的移动事件
+        document.addEventListener("dragover", function (e, store) {
+            mouseObj.x = e.clientX;
+            mouseObj.y = e.clientY;
+            // mouseXY.x = e.clientX;
+            // mouseXY.y = e.clientY;
+        }, false);
+    },
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //0.1上一步  
+        goStyle() {
+            this.$router.push({
+                path: '/templateStyle',
+                query: {
+                    id: this.editId
+                }
+            });
+        },
+        //0.2下一步
+        gotoList() {
+            this.$router.push({
+                path: '/templateList'
+            });
+        },
+        //0.全局操作 end ------------------------------------------------------------>
+
+        //1.模块操作 start ------------------------------------------------------------>
+        //1.1 移动模块
+        moveModule(i, moveType) {
+            this.$store.commit('template/moveModule', { i: i, moveType: moveType });
+        },
+        //1.2 删除模块
+        deleteModule(i, dataSort) {
+            let data = {
+                i: i,
+                dataSort: dataSort
+            }
+            this.$store.commit('template/deleteModule', data);
+        },
+        //1.3 打开弹出框
+        openWindow(item) {
+            this.editModule = item.i;
+            this.windowStatus = true;
+        },
+        //1.4 关闭弹出框
+        closeWindow() {
+            this.windowStatus = false;
+        }
+        //1.模块操作 end ------------------------------------------------------------>
+    }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
+}
+
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+    border: 2px dashed #eee;
+}
+
+.moduleBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    //border: 2px dashed #eee;
+}
+
+.moduleBoxBorder {
+    border: 2px dashed #eee;
+}
+
+//固定的模块
+.FixedModuleBox {
+    width: 100%;
+    //margin-bottom: 20px;
+    //border: 2px dashed #eee;
+}
+
+.FixedModuleBoxBottom {
+    width: 100%;
+}
+
+.FixedMainModuleBox {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+
+    img {
+        margin-bottom: 20px;
+    }
+
+    padding: 100px;
+    //background: #F5F7FB;
+    //margin-bottom: 20px;
+}
+
+.FixedMainModuleBoxBorder {
+    border: 2px dashed #eee;
+}
+
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+
+.grid-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .grid-tools-menu {
+        position: absolute;
+        top: 0;
+        right:10px;
+        z-index: 99;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            width: 38px;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            font-size: 30px;
+            cursor: pointer;
+            color: #999;
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
+            transition: all 0.3s;
+
+            &:hover {
+                color: #333;
+            }
+        }
+    }
+}
+
+.grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+}
+
+//画布调整
+.canvasBox {
+    margin-top: 20px;
+}
+
+.FixedMainModuleBox {
+  min-height: 450px;
+  background-color: #fff;
+  background: url('../../../assets/template/creat.png') no-repeat center center;
+}
+
+.FixedMainModuleBoxAuto {
+  min-height: 450px;
+  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 {
+    line-height: 140px !important;
+}
+
+::v-deep .custom-textarea .el-textarea__inner {
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .custom-align-right .el-form-item__label {
+    text-align: right;
+    /* 设置标签文字右对齐 */
+}
+
+::v-deep .shadowBox .el-button--mini.is-circle {
+    border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageArticle.vue

@@ -1,319 +1,265 @@
 <template>
-  <div>
-    <!-- 1.页头板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <headSector />
+    <div>
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <headSector />
+        </div>
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <menuSector />
+        </div>
+        <div 
+            id="content" 
+            class="canvasBox"
+        >
+            <grid-layout 
+                :auto-size="true"
+                :class="this.$store.state.template.pageData.article.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                ref="gridlayout" 
+                :layout="this.$store.state.template.pageData.article"
+                :layout.sync="this.$store.state.template.pageData.article" 
+                :col-num="12" 
+                :row-height="rowHeight"
+                :margin="[0,0]" 
+                :is-draggable="true" 
+                :is-resizable="true" 
+                :key="this.$store.state.template.gridKey"
+            >
+                <grid-item 
+                    v-for="(item, index) in this.$store.state.template.pageData.article" 
+                    :key="item.i" 
+                    :i="item.i"
+                    :x="item.x" 
+                    :y="item.y" 
+                    :w="item.w" 
+                    :h="item.h" 
+                    :is-resizable="false"
+                >
+                    <div class="grid-item-content">
+                        <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
+                            <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
+                        </div>
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <div v-if="item.type == 'articleSector'" class="moduleBox">
+                            <articleSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                    </div>
+                </grid-item>
+            </grid-layout>
+        </div>
+        <div class="FixedModuleBoxBottom">
+            <footerSector />
+        </div>
     </div>
-    <!-- 2.导航板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <menuSector />
-    </div>
-    <!-- 无内容占位符 -->
-    <!-- <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.article.length == 0">
-      <img src="@/assets/template/creat.png">
-      <div>请点击一个左侧板块，开始您的网站创建</div>
-    </div> -->
-    <!--使用gridKey来强制更新视图-->
-    <div 
-        id="content" 
-        class="canvasBox"
-    >
-      <grid-layout 
-        :auto-size="true"
-        :class="this.$store.state.template.pageData.article.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
-        ref="gridlayout"
-        :layout="this.$store.state.template.pageData.article" 
-        :layout.sync="this.$store.state.template.pageData.article"
-        :col-num="12" 
-        :row-height="rowHeight" 
-        :margin="[0,0]" 
-        :is-draggable="true" 
-        :is-resizable="true" 
-        :key="this.$store.state.template.gridKey
-        ">
-        <grid-item 
-          v-for="(item, index) in this.$store.state.template.pageData.article" 
-          :key="item.i" 
-          :i="item.i" 
-          :x="item.x" 
-          :y="item.y" 
-          :w="item.w" 
-          :h="item.h" 
-          :is-resizable="false">
-          <div class="grid-item-content">
-            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-              <!-- 移动板块-->
-              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
-              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
-              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
-            </div>
-            <!-- 4.广告模块 -->
-            <div v-if="item.type == 'adSector'" class="moduleBox">
-              <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-            <!-- 5.焦点图模块 -->
-            <div v-if="item.type == 'bannerSector'" class="moduleBox">
-              <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-            <!-- 6.多图模块 -->
-            <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-              <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-            <!-- 7.评论模块 -->
-            <div v-if="item.type == 'commentSector'" class="moduleBox">
-              <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-            <!-- 8.双联文章列表模块 -->
-            <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">
-              <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>
-            <!-- 11.文章详情 --> 
-            <div v-if="item.type == 'mainArticle'" class="moduleBox">
-              <mainArticle :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-            </div>
-          </div>
-        </grid-item>
-      </grid-layout>
-    </div>
-    <div class="FixedModuleBoxBottom">
-      <!-- 3.页尾模块 -->
-      <footerSector />
-    </div>
-  </div>
 </template>
 
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
-import {GridLayout, GridItem} from "vue-grid-layout";
-//页面公用组件 end------------------------------------------------------------>
+import { GridLayout, GridItem } from "vue-grid-layout";
+//1.页面公用组件 end------------------------------------------------------------>
 
-//自助建站组件 start------------------------------------------------------------>
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
 //顶部
 import headSector from '../style/sector/head/1.vue';
 //一级菜单导肮
 import menuSector from '../style/sector/menu/1.vue';
 //底部
 import footerSector from '../style/sector/foot/1.vue';
-//通栏组件
 //通栏广告
 import adSector from '../style/sector/body/ad/1200x90/1.vue';
-
-
-
-// import manyPictureSector from '../style/sector/6.vue';//多图
-// import commentSector from '../style/sector/7.vue';//评论
-// import listSector from '../style/sector/8.vue';//文章列表
-// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
-// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
-// import mainArticle from '../style/sector/12.vue';//文章详情
-//自助建站组件 end------------------------------------------------------------>
-
+//通用型文章详情
+import articleSector from '../style/sector/body/article/article/1200x1710/1.vue';
+//2.引入自助建站组件 end------------------------------------------------------------>
 
 export default {
-  components: {
-    GridLayout,
-    GridItem,
-    //板块组件 style1
-    headSector,
-    menuSector,
-    adSector,
-    // manyPictureSector,
-    // commentSector,
-    // listSector,
-    // onlyImgSector,
-    // friendShipLinkSector,
-    //mainArticle
-    footerSector,
-  },
-  data() {
-    return {
-      //0.全局配置 start------------------------------------------------------------>
-      windowStatus: false,
-      rowHeight:10,
-      //0.全局配置 end------------------------------------------------------------>
-      //1.编辑模块 start------------------------------------------------------------>
-      formLabelWidth: '120px',
-      editModule: "",//待编辑的模块
-      //1.编辑模块 end------------------------------------------------------------>
-    }
-  },
-  mounted() {
-    //必备操作
-    //1.获得vuex中的鼠标对象
-    let mouseObj = this.$store.state.template.mouseXY;
-    //2.获得gridlayout对象
-    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
-    //3.监听鼠标按住以后的移动事件
-    document.addEventListener("dragover", function (e,store) {
-      mouseObj.x = e.clientX;
-      mouseObj.y = e.clientY;
-      // mouseXY.x = e.clientX;
-      // mouseXY.y = e.clientY;
-    },false);
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //0.1上一步  
-    goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
+    components: {
+        GridLayout,//画布
+        GridItem,//画布组件
+        headSector,//全局页头
+        menuSector,//全局导航
+        adSector,//通栏广告
+        articleSector,//通用型文章详情
+        footerSector
+    },
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            rowHeight: 10,
+            //0.全局配置 end------------------------------------------------------------>
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            editModule: "",//待编辑的模块
+            //1.编辑模块 end------------------------------------------------------------>
         }
-      });
     },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
+    mounted() {
+        //必备操作
+        //1.获得vuex中的鼠标对象
+        let mouseObj = this.$store.state.template.mouseXY;
+        //2.获得gridlayout对象
+        this.$store.commit('template/setGridlayoutObj', this.$refs.gridlayout);
+        //3.监听鼠标按住以后的移动事件
+        document.addEventListener("dragover", function (e, store) {
+            mouseObj.x = e.clientX;
+            mouseObj.y = e.clientY;
+            // mouseXY.x = e.clientX;
+            // mouseXY.y = e.clientY;
+        }, false);
     },
-    //0.全局操作 end ------------------------------------------------------------>
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //0.1上一步  
+        goStyle() {
+            this.$router.push({
+                path: '/templateStyle',
+                query: {
+                    id: this.editId
+                }
+            });
+        },
+        //0.2下一步
+        gotoList() {
+            this.$router.push({
+                path: '/templateList'
+            });
+        },
+        //0.全局操作 end ------------------------------------------------------------>
 
-    //1.模块操作 start ------------------------------------------------------------>
-    //1.1 移动模块
-    moveModule(i,moveType){
-      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
-    },
-    //1.2 删除模块
-    deleteModule(i,dataSort){
-      let data = {
-        i:i,
-        dataSort:dataSort
-      }
-      this.$store.commit('template/deleteModule',data);
-    },
-    //1.3 打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
-    },
-    //1.4 关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
+        //1.模块操作 start ------------------------------------------------------------>
+        //1.1 移动模块
+        moveModule(i, moveType) {
+            this.$store.commit('template/moveModule', { i: i, moveType: moveType });
+        },
+        //1.2 删除模块
+        deleteModule(i, dataSort) {
+            let data = {
+                i: i,
+                dataSort: dataSort
+            }
+            this.$store.commit('template/deleteModule', data);
+        },
+        //1.3 打开弹出框
+        openWindow(item) {
+            this.editModule = item.i;
+            this.windowStatus = true;
+        },
+        //1.4 关闭弹出框
+        closeWindow() {
+            this.windowStatus = false;
+        }
+        //1.模块操作 end ------------------------------------------------------------>
     }
-    //1.模块操作 end ------------------------------------------------------------>
-  }
 }
 </script>
 
 <style scoped lang="less">
 //拖拽demo
 .droppable-element {
-  width: 150px;
-  text-align: center;
-  background: #fdd;
-  border: 1px solid black;
-  margin: 10px 0;
-  padding: 10px;
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
 }
+
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
-  border: 2px dashed #eee;
+    border: 2px dashed #eee;
 }
+
 .moduleBox {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  justify-content: space-between;
-  box-sizing: border-box;
-  //border: 2px dashed #eee;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    //border: 2px dashed #eee;
 }
+
 .moduleBoxBorder {
-  border: 2px dashed #eee;
+    border: 2px dashed #eee;
 }
+
 //固定的模块
 .FixedModuleBox {
-  width: 100%;
-  margin-bottom: 20px;
-  //border: 2px dashed #eee;
+    width: 100%;
+    //margin-bottom: 20px;
+    //border: 2px dashed #eee;
 }
+
 .FixedModuleBoxBottom {
-  width: 100%;
+    width: 100%;
 }
-// .FixedMainModuleBox {
-//   width: 100%;
-//   font-size: 18px;
-//   color: #999;
-//   text-align: center;
-//   img {
-//     margin-bottom: 20px;
-//   }
-//   padding: 100px;
-//   //background: #F5F7FB;
-//   margin-bottom: 20px;
-// }
+
+.FixedMainModuleBox {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+
+    img {
+        margin-bottom: 20px;
+    }
+
+    padding: 100px;
+    //background: #F5F7FB;
+    //margin-bottom: 20px;
+}
+
 .FixedMainModuleBoxBorder {
-  border: 2px dashed #eee;
+    border: 2px dashed #eee;
 }
+
 //模块 end------------------------------------------------------------> 
 //栅格布局 start------------------------------------------------------------> 
+
 .grid-item-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  
-  .grid-tools-menu {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 99;
     display: flex;
     align-items: center;
     justify-content: center;
-    span {
-      width: 38px;
-      height: 38px;
-      line-height: 38px;
-      text-align: center;
-      font-size: 30px;
-      cursor: pointer;
-      color: #999;
-      // display: flex;
-      // align-items: center;
-      // justify-content: center;
-      // cursor: pointer;
-      // margin: 5px;
-      // color: #000;
-      // background: #fff;
-      // border: 1px solid #000;
-      // border-radius: 5px;
-      // width: 24px;
-      // height: 24px;
-      // line-height: 24px;
-      // text-align: center;
-      // font-size: 14px;
-      // transition: all 0.3s;
-      // &:hover {
-      //   color: #fff;
-      //   background: #000;
-      // }
-      transition: all 0.3s;
-      &:hover {
-        color: #333;
-      }
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .grid-tools-menu {
+        position: absolute;
+        top: 0;
+        right:10px;
+        z-index: 99;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            width: 38px;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            font-size: 30px;
+            cursor: pointer;
+            color: #999;
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
+            transition: all 0.3s;
+
+            &:hover {
+                color: #333;
+            }
+        }
     }
-  }
 }
 
 .grid-layout {
-  grid-gap: 0;
-  row-gap: 0;
+    grid-gap: 0;
+    row-gap: 0;
 }
 
 //画布调整
@@ -332,19 +278,31 @@ 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 {
-  line-height: 140px !important;
+::v-deep .custom-form-item>.el-form-item__label {
+    line-height: 140px !important;
 }
+
 ::v-deep .custom-textarea .el-textarea__inner {
-  resize: none; /* 禁止用户拖拽调整大小 */
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
 }
+
 ::v-deep .custom-align-right .el-form-item__label {
-  text-align: right; /* 设置标签文字右对齐 */
+    text-align: right;
+    /* 设置标签文字右对齐 */
 }
+
 ::v-deep .shadowBox .el-button--mini.is-circle {
-  border-radius: 50% !important;
+    border-radius: 50% !important;
 }
+
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
 </style>

src/views/template/page/pageSearch.vue

@@ -0,0 +1,314 @@
+<template>
+    <div>
+        <!-- 1.页头板块 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <headSector />
+        </div>
+        <!-- 全局组件：导航 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <menuSector />
+        </div>
+        <!--使用gridKey来强制更新视图-->
+        <div 
+            id="content" 
+            class="canvasBox"
+        >
+            <grid-layout 
+            :auto-size="true"
+                :class="this.$store.state.template.pageData.search.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                ref="gridlayout" 
+                :layout="this.$store.state.template.pageData.search"
+                :layout.sync="this.$store.state.template.pageData.search" 
+                :col-num="12" 
+                :row-height="rowHeight"
+                :margin="[0, 0]" 
+                :is-draggable="true" 
+                :is-resizable="true" 
+                :key="this.$store.state.template.gridKey
+            ">
+                <grid-item 
+                    v-for="(item, index) in this.$store.state.template.pageData.search" 
+                    :key="item.i" 
+                    :i="item.i"
+                    :x="item.x" 
+                    :y="item.y" 
+                    :w="item.w" 
+                    :h="item.h" 
+                    :is-resizable="false"
+                >
+                    <div class="grid-item-content">
+                        <div class="grid-tools-menu" v-if="$store.state.template.previewStatus == false">
+                            <span @click="deleteModule(item.i, item.dataSort)"><i class="el-icon-close"></i></span>
+                        </div>
+                        <!-- 1.广告通栏 -->
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <!-- 2.固定列表 -->
+                        <div v-if="item.type == 'searchListSector'" class="moduleBox">
+                            <searchListSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                    </div>
+                </grid-item>
+            </grid-layout>
+        </div>
+        <!-- 全局组件：页尾 -->
+        <div class="FixedModuleBoxBottom">
+            <footerSector />
+        </div>
+    </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import { GridLayout, GridItem } from "vue-grid-layout";
+//1.页面公用组件 end------------------------------------------------------------>
+
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
+//顶部
+import headSector from '../style/sector/head/1.vue';
+//一级菜单导肮
+import menuSector from '../style/sector/menu/1.vue';
+//列表页是固定的
+import searchListSector from '../style/sector/body/search/list/1200x1300/1.vue';
+//底部
+import footerSector from '../style/sector/foot/1.vue';
+//通栏组件 开始：
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
+//2.引入自助建站组件 end------------------------------------------------------------>
+
+export default {
+    components: {
+        GridLayout,//画布
+        GridItem,//画布组件
+        headSector,//全局页头
+        menuSector,//全局导航
+        adSector,//通栏广告
+        searchListSector,//固定列表
+        footerSector
+    },
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            rowHeight: 10,
+            //0.全局配置 end------------------------------------------------------------>
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            editModule: "",//待编辑的模块
+            //1.编辑模块 end------------------------------------------------------------>
+        }
+    },
+    mounted() {
+        //必备操作
+        //1.获得vuex中的鼠标对象
+        let mouseObj = this.$store.state.template.mouseXY;
+        //2.获得gridlayout对象
+        this.$store.commit('template/setGridlayoutObj', this.$refs.gridlayout);
+        //3.监听鼠标按住以后的移动事件
+        document.addEventListener("dragover", function (e, store) {
+            mouseObj.x = e.clientX;
+            mouseObj.y = e.clientY;
+            // mouseXY.x = e.clientX;
+            // mouseXY.y = e.clientY;
+        }, false);
+    },
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //0.1上一步  
+        goStyle() {
+            this.$router.push({
+                path: '/templateStyle',
+                query: {
+                    id: this.editId
+                }
+            });
+        },
+        //0.2下一步
+        gotoList() {
+            this.$router.push({
+                path: '/templateList'
+            });
+        },
+        //0.全局操作 end ------------------------------------------------------------>
+
+        //1.模块操作 start ------------------------------------------------------------>
+        //1.1 移动模块
+        moveModule(i, moveType) {
+            this.$store.commit('template/moveModule', { i: i, moveType: moveType });
+        },
+        //1.2 删除模块
+        deleteModule(i, dataSort) {
+            let data = {
+                i: i,
+                dataSort: dataSort
+            }
+            this.$store.commit('template/deleteModule', data);
+        },
+        //1.3 打开弹出框
+        openWindow(item) {
+            this.editModule = item.i;
+            this.windowStatus = true;
+        },
+        //1.4 关闭弹出框
+        closeWindow() {
+            this.windowStatus = false;
+        }
+        //1.模块操作 end ------------------------------------------------------------>
+    }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
+}
+
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+    border: 2px dashed #eee;
+}
+
+.moduleBox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+    box-sizing: border-box;
+    //border: 2px dashed #eee;
+}
+
+.moduleBoxBorder {
+    border: 2px dashed #eee;
+}
+
+//固定的模块
+.FixedModuleBox {
+    width: 100%;
+    //margin-bottom: 20px;
+    //border: 2px dashed #eee;
+}
+
+.FixedModuleBoxBottom {
+    width: 100%;
+}
+
+.FixedMainModuleBox {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+
+    img {
+        margin-bottom: 20px;
+    }
+
+    padding: 100px;
+    //background: #F5F7FB;
+    //margin-bottom: 20px;
+}
+
+.FixedMainModuleBoxBorder {
+    border: 2px dashed #eee;
+}
+
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+
+.grid-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .grid-tools-menu {
+        position: absolute;
+        top: 0;
+        right:10px;
+        z-index: 99;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            width: 38px;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            font-size: 30px;
+            cursor: pointer;
+            color: #999;
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
+            transition: all 0.3s;
+
+            &:hover {
+                color: #333;
+            }
+        }
+    }
+}
+
+.grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+}
+
+//画布调整
+.canvasBox {
+    margin-top: 20px;
+}
+
+.FixedMainModuleBox {
+  min-height: 450px;
+  background-color: #fff;
+  background: url('../../../assets/template/creat.png') no-repeat center center;
+}
+
+.FixedMainModuleBoxAuto {
+  min-height: 450px;
+  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 {
+    line-height: 140px !important;
+}
+
+::v-deep .custom-textarea .el-textarea__inner {
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .custom-align-right .el-form-item__label {
+    text-align: right;
+    /* 设置标签文字右对齐 */
+}
+
+::v-deep .shadowBox .el-button--mini.is-circle {
+    border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/public/atWork.vue

@@ -2,13 +2,13 @@
     <div class="atWorkBox">
         <div class="atWorkStyle1" v-if="dataStyle == 1" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
             <div class="atWorkImgBox">
-                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中" >
                 <div class="atWorkTitle">此样式开发中，暂不可用！</div>
             </div>
         </div>
         <div class="atWorkStyle2" v-if="dataStyle == 2" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
             <div class="atWorkImgBox">
-                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中" v-show="dataHeight>80">
                 <div class="atWorkTitle">此样式开发中，暂不可用！</div>
             </div>
         </div>
@@ -34,6 +34,9 @@ export default {
     data() {
         return {};
     },
+    mounted() {
+
+    }
 };
 </script>
 

src/views/template/public/componentWindow.vue

@@ -592,6 +592,137 @@
                     </div>
                 </div>
                 <!--15.热点精选 end---------------------------------------->
+
+                <!--搜索页-->
+                <!--16.搜索框 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 17" class="componentScrollBoxStyle1">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750728922706490.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/20250624/1750728937165859.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/20250624/1750728952370749.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/20250624/1750728959101334.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/20250624/1750729001145123.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/20250624/1750729028870817.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色背景加放大镜图标</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 7 ? 'active' : '']" @click="selectUseStyleNumber(7)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750729041119093.jpg"/>
+                            <div class="componentScrollBoxItemTitle">线框加黑色图标</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 8 ? 'active' : '']" @click="selectUseStyleNumber(8)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750729050939655.jpg"/>
+                            <div class="componentScrollBoxItemTitle">线框加主题色图标</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 9 ? 'active' : '']" @click="selectUseStyleNumber(9)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750729075806292.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图标加文字在左侧</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 10 ? 'active' : '']" @click="selectUseStyleNumber(10)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750729084367036.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图标加文字在右侧</div>
+                        </div>
+                    </div>
+                </div>
+                <!--16.搜索框 end---------------------------------------->
+
+                <!--单页列表和单页详情 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 18" 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/png/20250624/1750749103943773.png"/>
+                            <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/20250624/1750749121350038.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/20250624/1750749128481518.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/20250624/175074913477500.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/20250624/1750749141679762.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/20250624/1750749152760605.jpg"/>
+                            <div class="componentScrollBoxItemTitle">线框添加背景</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 7 ? 'active' : '']" @click="selectUseStyleNumber(7)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750749157461275.jpg"/>
+                            <div class="componentScrollBoxItemTitle">线框选中高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 8 ? 'active' : '']" @click="selectUseStyleNumber(8)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750749165401195.jpg"/>
+                            <div class="componentScrollBoxItemTitle">线框选中高亮</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 9 ? 'active' : '']" @click="selectUseStyleNumber(9)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750749173113799.jpg"/>
+                            <div class="componentScrollBoxItemTitle">虚线线框</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 10 ? 'active' : '']" @click="selectUseStyleNumber(10)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/17507491859079.jpg"/>
+                            <div class="componentScrollBoxItemTitle">选中取消线框</div>
+                        </div>
+                    </div>
+                </div>
+                <!--单页列表和单页详情 end---------------------------------------->
             </div>
         </div>
         <div class="componentWindowBoxFooter">

src/views/template/style/components/article/900x1384/1.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="articleBox">
+        <div class="articleTitle">七部门印发意见促进创业带动就业落实税收优惠和一次性创业补贴政策</div>
+        <div class="articleInfo">
+            <div>来源：新华网</div>
+            <div>作者：李鑫</div>
+            <div>时间：2024-10-10</div>
+        </div>
+        <div class="articleContent">
+            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250623/1750669694926167.jpg">
+            <div class="fontBold">“逆周期调节”是什么？</div>
+            <div>这次发布会将重点聚焦“财政政策逆周期调节力度”，那什么是逆周期调节？</div>
+            <div>逆周期调节是指政府根据经济周期阶段，通过政策工具和措施让整个经济周期的波动性平缓‌，更好促进经济发展。财政政策就是其中的重要一类。</div>
+            <div>当前，我国经济的基本面及市场广阔、经济韧性强、潜力大等有利条件并未改变。同时，经济运行出现一些新的情况和问题。为了更好促进经济发展，近年来，我国坚持实施积极的财政政策，通过增加财政支出、实施减税降费等方式，实现政府投资的扩大和消费潜能的释放，促进了经济增长、增加就业和扩大内需等。</div>
+            <div>专家认为，财政政策逆周期调节对于稳定经济增长、促进就业、控制通胀和稳定金融市场具有重要意义。随着国民经济发展不断变化，相应的，财政政策也会根据经济形势的变化来灵活调整，这样才能更好实现经济的平稳发展。</div>
+            <div class="fontBold">积极财政政策持续加力 推动经济高质量发展</div>
+            <div>今年，我国继续实施积极的财政政策，通过组合运用多种政策工具，促进经济持续回升向好。那么，财政政策工具箱里都有哪些“宝贝”  国家的钱袋子又投向了哪些领域呢？</div>
+            <div class="fontBold">政策亮点——超长期特别国债</div>
+            <div>说到财政政策工具箱，今年最大的亮点要数超长期特别国债。10000亿元超长期特别国债，专项用于“两重”，也就是国家重大战略实施和重点领域安全能力建设。截至7月底，超长期特别国债已累计发行4180亿元。</div>
+            <div>不仅如此，为了更好支持大规模设备更新和消费品以旧换新行动，万亿超长期特别国债中有约3000亿元加力支持重点领域设备更新，进一步提升地方消费品以旧换新的能力。</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .articleBox {
+        width: 900px;
+        margin: 0 auto;
+        .articleTitle {
+            font-size:30px;
+            color:#333333;
+            font-weight:bold;
+        }
+        .articleInfo {
+            color:#999999;
+            font-size:14px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 30px;
+            div{
+                margin-right: 40px;
+            }
+        }
+        .articleContent {
+            padding-top:60px;
+            font-size:20px;
+            img{
+                display: block;
+                margin: 0 auto;
+                margin-bottom: 60px;
+            }
+            .fontBold {
+                font-weight:bold;
+            }
+            div {
+                text-indent: 2em;
+                margin-bottom: 28px;
+            }
+        }
+    }  
+</style>
+

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

@@ -65,6 +65,9 @@ export default {
             span {
                 float: right;
             }
+            &:last-child {
+                margin-bottom: 0;
+            }
         }
     }
 </style>

src/views/template/style/components/list/900x1050/2.vue

@@ -63,6 +63,9 @@ export default {
             span {
                 float: right;
             }
+            &:last-child {
+                margin-bottom: 0;
+            }
         }
     }
 </style>

src/views/template/style/components/main/1200x1120/1.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <div class="mainTopBg"></div>
+        <div class="mainBox">
+            <div class="mainTitle">农副产品供销网简介</div>
+            <div>农副产品供销网是全国三农信息一体化应用平台----中农兴业网团核心网站之一，是贯彻落实国家《2006-2020年国家信息化发展战略》总体部署和农业部《全国农业和农村信息化建设总体框架(2007-2015)》的重点工程。农副产品供销网自2006年创建以来，社会效益和会员经济效益贡献突出。</div>
+            <div>农副产品供销网是由农业部信息中心、中国互联网协会、中国电子商务协会通过社会公众评选和行业专家评审，认定的中国农业百强网站--农副产品类网站全国10强之一。共设频道43个，各类导航栏目244个，各类导引栏目54个。其中“农产信息”频道和“农副商城”版块为核心传递全国农副产品商贸资讯的产购销一体化应用平台，同时也是覆盖全国所有乡镇及行政村的农副产品商贸门户网站。在百度、360等众多搜索引擎网站中自然排名笫一。</div>
+            <div>农副产品供销网是为全国各地农副产品市场传递、交流、发布资讯信息，以及为全国各类农民组织提供全方位农副产品资讯的开放式信息化互动平台。旨在科学、系统、真实、准确地反映并服务于全国农副产品市场的资讯信息，并使之快捷有效地与全社会互动交流。</div>
+            <div>农副产品供销网采用会员制模式，细分为乡村行政会员、生产制造会员、商贸流通会员、行政职能会员及与农副产品市场相关的其它类会员，各会员分别拥有近百个农副产品动态信息和电子商贸栏目的信息发布及管理平台，是面向全国的开放式权威农副产品电子商务平台;特别是其独特的群会员间信息封闭式互动交流平台，可实现一对一、一对多、多对多等多项会员之间的信息互动交流，充分实现了按农副产品市场体系的独立完整、安全高效的信息化互动。有极高的实用值价和社会综合效益。</div>
+            <div>农副产品供销网面向全国科教文单位、媒体和各级政府职能部门采用公益型会员制的管理模式，以实名制免费注册会员，其公益型会员拥有近百个栏目可自主发布相应资讯信息。旨在为政府涉农职能部门、科研技术单位、文化教育单位、传媒机构提供与全国广大乡村及全国各类农副产品生产及供销一体化的信息交流服务平台。</div>
+            <div>农副产品供销网向全国各类涉农经济组织及农户采用直补型会员制的管理模式，即中农兴业网团会员，以实名制补贴式注册会员，同时会员同步拥有7个网站数百个栏目可自主发布相应资讯信息。旨在为上述会员与全社会交流提供多角度全方位信息一体化平台。从而更好地为我国60余万个行政村农户及各类涉农组织提供全方位农副产品资讯信息。</div>
+            <div>农副产品供销网在各地县政府所在地设立中农兴业资讯中心及全国三农信息一体化工作站，并同时无偿向县以上党政机关与农副产品相关各部门提供三农信息发布应用平台、以及本县所属党政机关各个部门会员、乡镇政府会员、行政村会员的信息一体化工作交流互动平台，为全国各地县政府职能机构及其县域经济发展提供三农信息县域一体化服务。</div>
+        </div>
+        <div class="mainBottomBg"></div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+    .mainBox {
+        box-sizing: border-box;
+        padding:27px 80px;
+        .mainTitle {
+            font-size: 26px;
+            color:#1C5468;
+            height: 65px;
+            font-weight: bold;
+            text-align: center;
+            border-bottom: 1px solid #D9D9D9;
+            margin-bottom: 40px;
+        }
+        div {
+            text-indent: 2em;
+            font-size: 20px;
+            line-height: 36px;
+            color:#333;
+        }
+        background:url('http://img.bjzxtw.org.cn/pre/image/png/20250624/1750754885628516.png') repeat-y;
+    }
+    .mainTopBg {
+        width: 1200px;
+        height: 7px;
+        background: url('http://img.bjzxtw.org.cn/pre/image/png/20250624/1750754872561241.png') no-repeat;
+        margin-top: 28px;
+    }
+    .mainBottomBg {
+        width: 1200px;
+        height: 7px;
+        background: url('http://img.bjzxtw.org.cn/pre/image/png/20250624/1750754893326585.png') no-repeat center center;
+    }
+</style>

src/views/template/style/components/menu/144x365/1.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="floatMenuBox">
+        <div class="title">导航列表</div>
+        <div>关于我们</div>
+        <div>本网概况</div>
+        <div class="active">联系我们</div>
+        <div>网站地图</div>
+        <div>会员服务</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .floatMenuBox {
+        div {
+            height: 60px;
+            line-height: 60px;
+            text-align: center; 
+            color:#333;
+        }
+        .title {
+            color:#004564;
+        }
+        .active {
+            background: #004564;
+            color:#fff;
+        }
+    }
+</style>
+

src/views/template/style/components/menu/144x365/2.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="floatMenuBox">
+        <div class="title">导航列表</div>
+        <div>关于我们</div>
+        <div>本网概况</div>
+        <div class="active">联系我们</div>
+        <div>网站地图</div>
+        <div>会员服务</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+        
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .floatMenuBox {
+        div {
+            height: 60px;
+            line-height: 60px;
+            text-align: center; 
+            color:#333;
+        }
+        .title {
+            background: #004564;
+            color:#fff;
+        }
+        .active {
+            background: #004564;
+            color:#fff;
+        }
+    }
+</style>

src/views/template/style/components/search/700x46/1.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="searchInputBox">
+        <div class="searchInputBorder">
+            <input type="text" placeholder="请输入搜索内容" />
+        </div>
+        <div class="searchBtn">
+            搜索
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .searchInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .searchInputBorder {
+            width: 582px;
+            height: 46px;
+            input {
+                width: 582px;
+                height: 46px;
+                font-size:16px;
+                color:#333333;
+                border:1px solid #E6E6E6;
+                outline: none;
+                box-sizing: border-box;
+                padding:20px 13px;
+            }
+        }
+        .searchBtn {
+            width: 120px;
+            height: 46px;
+            text-align: center;
+            line-height: 46px;
+            color:#fff;
+            background: #1C5468;
+            cursor: pointer;
+        }
+    }
+</style>
+

src/views/template/style/components/search/700x46/2.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="searchInputBox">
+        <div class="searchInputBorder">
+            <input type="text" placeholder="请输入搜索内容" />
+        </div>
+        <div class="searchBtn">
+            搜索
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .searchInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .searchInputBorder {
+            width: 582px;
+            height: 46px;
+            input {
+                width: 582px;
+                height: 46px;
+                font-size:16px;
+                color:#333333;
+                border:1px solid #E6E6E6;
+                outline: none;
+                box-sizing: border-box;
+                padding:20px 13px;
+            }
+            box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
+        }
+        .searchBtn {
+            width: 120px;
+            height: 46px;
+            text-align: center;
+            line-height: 46px;
+            color:#333333;
+            cursor: pointer;
+            border:1px solid #E6E6E6;
+            box-sizing: border-box;
+            border-left: none;
+            box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
+        }
+    }
+</style>
+

src/views/template/style/sector/body/about/1200x1150/1.vue

@@ -0,0 +1,187 @@
+<template>
+    <div class="alongArticleBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div class="listRouterBox">
+                当前位置：首页 > <span>关于我们</span>
+            </div>
+            <div class="listContentBox">
+                <div :class="['listContentBoxLeft', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                    <aboutArticle1Style />
+                </div>
+            </div>
+            <div :class="['aboutMenu', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="18"/>
+                <div v-if="this.$store.state.template.pageData.aloneArticle[dataSort].content.componentList[1].component_style == 1">
+                    <menu1Style />
+                </div>
+                <div v-if="this.$store.state.template.pageData.aloneArticle[dataSort].content.componentList[1].component_style == 2">
+                    <menu2Style />
+                </div>
+                <div v-if="this.$store.state.template.pageData.aloneArticle[dataSort].content.componentList[1].component_style > 2">
+                    <atWork :dataStyle="1" :dataWidth="144" :dataHeight="363" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../public/convertBtn.vue'
+import aboutArticle1Style from '../../../../../style/components/main/1200x1120/1.vue'
+import menu1Style from '../../../../../style/components/menu/144x365/1.vue'
+import menu2Style from '../../../../../style/components/menu/144x365/2.vue'
+
+//组件研发中
+import atWork from '../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        aboutArticle1Style,
+        menu1Style,
+        menu2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border-top: 2px dashed #999;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.listNewsTitle {
+    font-size: 22px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 2px solid #004564;
+    color: #004564;
+    box-sizing: border-box;
+    margin-top: 28px;
+}
+.alongArticleBigBox{
+    width: 100%;
+    height: 1120px;
+    .listBox{
+        width: 1200px;
+        height: 1120px;
+        margin: 0 auto;
+        position: relative;
+        box-sizing: content-box;
+        .listRouterBox{
+            height: 52px;
+            border-bottom: 1px solid #D9D9D9;
+            font-size:16px;
+            color:#999999;
+            span{
+                color:#333333;
+            }
+        }
+        .listContentBox {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .listContentBoxLeft {
+                width: 1200px;
+                height: 1060px;
+                position: relative;
+            }
+        }
+        .paginationBox {
+            height: 100px;
+            .paginationBoxLeft {
+                width: 1200px;
+                height: 100px;
+                padding-top: 33px;
+                box-sizing: border-box;
+                text-align: center;
+            }
+        }
+    }
+    .aboutMenu {
+        width: 144px;
+        height: 365px;
+        position: absolute;
+        top: 100px;
+        left: -164px;
+    }
+}
+.paginationBoxLeft {
+    width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #004564;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+        background-color: #F6F6F6;
+        border: #EAEAEA 1px solid;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+        line-height: 34px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+        background-color: #004564;
+        color: #fff;
+    }
+}
+</style>
+

src/views/template/style/sector/body/about/1200x1290/1.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="alongListBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div class="listRouterBox">
+                当前位置：首页 > <span>关于我们</span>
+            </div>
+            <div class="listNewsTitle">自动生成</div>
+            <div class="listContentBox">
+                <div :class="['listContentBoxLeft', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="14"/>
+                    <div v-if="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[0].component_style == 1">
+                        <list1Style />
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[0].component_style == 2">
+                        <list2Style />
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[0].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="1196" :dataHeight="1060" />
+                    </div>
+                </div>
+            </div>
+            <div class="paginationBox">
+                <div class="paginationBoxLeft">
+                    <el-pagination 
+                        size="small" 
+                        background 
+                        layout="prev, pager, next" 
+                        :total="100" 
+                        :page-size="1" 
+                        :current-page="1" 
+                        prev-text="上一页" 
+                        next-text="下一页"
+                     />
+                </div>
+            </div>
+            <div :class="['aboutMenu', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="18"/>
+                <div v-if="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[1].component_style == 1">
+                    <menu1Style />
+                </div>
+                <div v-if="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[1].component_style == 2">
+                    <menu2Style />
+                </div>
+                <div v-if="this.$store.state.template.pageData.aloneList[dataSort].content.componentList[1].component_style > 2">
+                    <atWork :dataStyle="1" :dataWidth="144" :dataHeight="363" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../public/convertBtn.vue'
+import list1Style from '../../../../../style/components/list/900x1050/1.vue'
+import list2Style from '../../../../../style/components/list/900x1050/2.vue'
+import menu1Style from '../../../../../style/components/menu/144x365/1.vue'
+import menu2Style from '../../../../../style/components/menu/144x365/2.vue'
+
+//组件研发中
+import atWork from '../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        list1Style,
+        list2Style,
+        menu1Style,
+        menu2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border: 2px dashed #999;
+    border-left: none;
+    border-right: none;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.listNewsTitle {
+    font-size: 22px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 2px solid #004564;
+    color: #004564;
+    box-sizing: border-box;
+    margin-top: 28px;
+}
+.alongListBigBox{
+    width: 100%;
+    height: 1290px;
+    .listBox{
+        width: 1200px;
+        height: 1290px;
+        margin: 0 auto;
+        position: relative;
+        .listRouterBox{
+            height: 52px;
+            border-bottom: 1px solid #D9D9D9;
+            font-size:16px;
+            color:#999999;
+            span{
+                color:#333333;
+            }
+        }
+        .listContentBox {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .listContentBoxLeft {
+                width: 1200px;
+                height: 1060px;
+                position: relative;
+            }
+        }
+        .paginationBox {
+            height: 100px;
+            .paginationBoxLeft {
+                width: 1200px;
+                height: 100px;
+                padding-top: 33px;
+                box-sizing: border-box;
+                text-align: center;
+            }
+        }
+    }
+    .aboutMenu {
+        width: 144px;
+        height: 365px;
+        position: absolute;
+        top: 100px;
+        left: -164px;
+    }
+}
+.paginationBoxLeft {
+    width: 800px;
+    height: 34px;
+    margin-left: 141px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #004564;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+        background-color: #F6F6F6;
+        border: #EAEAEA 1px solid;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+        line-height: 34px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+        background-color: #004564;
+        color: #fff;
+    }
+}
+</style>
+

src/views/template/style/sector/body/article/article/1200x1710/1.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="listBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div class="listRouterBox">
+                当前位置：首页 > 新闻资讯 > <span> 七部门印发意见促进创业带动就业落实税收优惠和一次性创业补贴政策</span>
+            </div>
+            <div class="listContentBox">
+                <div :class="['listContentBoxLeft', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                    <article1Style />
+                </div>
+                <div class="listContentBoxRight">
+                    <div :class="['listContentBoxRightTop', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="15"/>
+                        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 1">
+                            <news1style :name="this.$store.state.template.pageData.article[dataSort].content.componentList[1].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 2">
+                            <news2style :name="this.$store.state.template.pageData.article[dataSort].content.componentList[1].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style > 2">
+                            <atWork :dataStyle="2" :dataWidth="270" :dataHeight="440" />
+                        </div>
+                    </div>
+                    <div :class="['listContentBoxRightBottom', {buildingBorder4: this.$store.state.template.previewStatus==false}]">
+                        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="16"/>
+                        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 1">
+                            <hotNews1style :name="this.$store.state.template.pageData.article[dataSort].content.componentList[2].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 2">
+                            <hotNews2style :name="this.$store.state.template.pageData.article[dataSort].content.componentList[2].componentData.name" />
+                        </div>
+                        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style > 2">
+                            <atWork :dataStyle="2" :dataWidth="270" :dataHeight="580" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="statementBox">
+                <div class="statementBoxLeft">
+                    <div>原文链接：http://nmyj.xlgl.gov.cn/xzxk/zsyz/202112/t20211201_2771045.html</div>
+                    <div>[免责声明] 本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其它问题，请在30日内与本网联系，我们将在第一时间处理。</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//720x440 
+import article1Style from '../../../../../../style/components/article/900x1384/1.vue'
+//270x450
+import news1style from '../../../../../../style/components/list/270x450/1.vue'
+import news2style from '../../../../../../style/components/list/270x450/2.vue'
+//270x580
+import hotNews1style from '../../../../../../style/components/list/270x580/1.vue'
+import hotNews2style from '../../../../../../style/components/list/270x580/2.vue'
+
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        article1Style,
+        news1style,
+        news2style,
+        hotNews1style,
+        hotNews2style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border: 2px dashed #999;
+    border-left: none;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.buildingBorder4 {
+    border: 2px dashed #999;
+    border-right: none;
+}
+.listBigBox{
+    width: 100%;
+    height: 1587px;
+    .listBox{
+        width: 1200px;
+        height: 1587px;
+        margin: 0 auto;
+        .listRouterBox{
+            height: 52px;
+            border-bottom: 1px solid #D9D9D9;
+            font-size:16px;
+            color:#999999;
+            span{
+                color:#333333;
+            }
+        }
+        .listContentBox {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-top: 17px;
+            .listContentBoxLeft {
+                width: 900px;
+                height: 1384px;
+                position: relative;
+            }
+            .listContentBoxRight {
+                width: 270px;
+                height: 1050px;
+                .listContentBoxRightTop {
+                    width: 270px;
+                    height: 440px;
+                    margin-bottom: 30px;
+                    position: relative;
+                }
+                .listContentBoxRightBottom {
+                    width: 270px;
+                    height: 580px;
+                    position: relative;
+                }
+            }
+        }
+        .statementBox {
+            height: 143px;
+            border-top: 1px solid #D9D9D9;
+            .statementBoxLeft {
+                width: 900px;
+                height: 143px;
+                padding-top: 40px;
+                text-align: left;
+                box-sizing: border-box;
+                font-size:20px;
+                color:#999999;
+            }
+        }
+    }
+}
+</style>
+

src/views/template/style/sector/body/search/list/1200x1300/1.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="searchListBigBox">
+        <div :class="['listBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+            <div :class="['searchInputBox', {buildingBorder2: this.$store.state.template.previewStatus==false}]">
+                <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="17"/>
+                <div v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 1">
+                    <searchInput1Style />
+                </div>
+                <div v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style == 2">
+                    <searchInput2Style />
+                </div>
+                <div v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[0].component_style > 2">
+                    <atWork :dataStyle="2" :dataWidth="1200" :dataHeight="46" />
+                </div>
+            </div>
+            <div class="listRouterBox">
+                当前位置：首页 > <span>搜索</span>
+            </div>
+            <div class="listContentBox">
+                <div :class="['listContentBoxLeft', {buildingBorder3: this.$store.state.template.previewStatus==false}]">
+                    <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="14"/>
+                    <div v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[1].component_style == 1">
+                        <list1Style />
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[1].component_style == 2">
+                        <list2Style />
+                    </div>
+                    <div v-if="this.$store.state.template.pageData.search[dataSort].content.componentList[1].component_style > 2">
+                        <atWork :dataStyle="2" :dataWidth="1196" :dataHeight="1040" />
+                    </div>
+                </div>
+            </div>
+            <div class="paginationBox">
+                <div class="paginationBoxLeft">
+                    <el-pagination 
+                        size="small" 
+                        background 
+                        layout="prev, pager, next" 
+                        :total="100" 
+                        :page-size="1" 
+                        :current-page="1" 
+                        prev-text="上一页" 
+                        next-text="下一页"
+                     />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../../../../public/editBtn.vue'
+import convertBtn from '../../../../../../public/convertBtn.vue'
+//1200x1040 
+import list1Style from '../../../../../../style/components/list/900x1050/1.vue'
+import list2Style from '../../../../../../style/components/list/900x1050/2.vue'
+//1200x1040
+import searchInput1Style from '../../../../../../style/components/search/700x46/1.vue'
+import searchInput2Style from '../../../../../../style/components/search/700x46/2.vue'
+
+//组件研发中
+import atWork from '../../../../../../public/atWork.vue'
+export default {
+    components: {
+        editBtn,
+        convertBtn,
+        list1Style,
+        list2Style,
+        searchInput1Style,
+        searchInput2Style,
+        atWork
+    },
+    props: {
+        id:{
+            type:Number,
+            default:0
+        },
+        y:{
+            type:Number,
+            default:0
+        },
+        dataSort:{
+            type:Number,
+            default:0
+        }
+    },
+    data() {
+        return {
+            leftData:{
+                text:0,
+                img:3
+            },
+            rightData:{
+                text:9,
+                img:0
+            }
+        };
+    },
+    methods: {
+        
+    },
+    mounted() {
+        
+    },
+};
+</script>
+
+<style scoped lang="less">
+.buildingBorder {
+    border: 2px dashed #999;
+}
+.buildingBorder2 {
+    border-bottom:2px dashed #999;
+}
+.buildingBorder3 {
+    border: 2px dashed #999;
+    border-left: none;
+    border-right: none;
+}
+
+.searchListBigBox{
+    width: 100%;
+    height: 1300px;
+    .listBox{
+        width: 1200px;
+        height: 1300px;
+        margin: 0 auto;
+        .searchInputBox{
+            height: 46px;
+            margin: 0 auto;
+            margin-bottom: 30px;
+            box-sizing: border-box;
+            position: relative;
+            box-sizing: content-box;
+        }
+        .listRouterBox{
+            height: 52px;
+            border-bottom: 1px solid #D9D9D9;
+            font-size:16px;
+            color:#999999;
+            span{
+                color:#333333;
+            }
+        }
+        .listContentBox {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 17px;
+            .listContentBoxLeft {
+                width: 1200px;
+                height: 1040px;
+                position: relative;
+            }
+        }
+    }
+    .paginationBox {
+        height: 100px;
+        .paginationBoxLeft {
+            height: 100px;
+            padding-top: 33px;
+            box-sizing: border-box;
+            text-align: center;
+        }
+    }
+}
+.paginationBoxLeft {
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #004564;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+        background-color: #F6F6F6;
+        border: #EAEAEA 1px solid;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+        line-height: 34px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li:not(.disabled).active {
+        background-color: #004564;
+        color: #fff;
+    }
+}
+</style>
+

src/views/template/templateCreat.vue

@@ -36,6 +36,9 @@
             <pageClass v-if="this.$store.state.template.pageStatus == 2"/>
             <pageList v-if="this.$store.state.template.pageStatus == 3"/>
             <pageArticle v-if="this.$store.state.template.pageStatus == 4"/>
+            <pageSearch v-if="this.$store.state.template.pageStatus == 5"/>
+            <pageAboutList v-if="this.$store.state.template.pageStatus == 6"/>
+            <pageAboutArticle v-if="this.$store.state.template.pageStatus == 7"/>
         </div>
         <!-- 画布 end ---------------------------------------->
 
@@ -48,14 +51,6 @@
             <componentWindow />
         </el-dialog>
         <el-dialog title="模板检查" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
-            <!-- <div class="editWebsiteTemplateJsonBox">
-                <pre>{{this.$store.state.template.webSiteData}}</pre>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <div class="footerBtnbox">
-                <el-button type="primary" @click="gotoList">保存并退出</el-button>
-                </div>
-            </div> -->
             <checkWindow />
         </el-dialog>
         <!-- 弹出框 start ---------------------------------------->
@@ -75,6 +70,9 @@ import pageIndex from './page/pageIndex.vue';
 import pageClass from './page/pageClass.vue';
 import pageList from './page/pageList.vue';
 import pageArticle from './page/pageArticle.vue';
+import pageSearch from './page/pageSearch.vue';
+import pageAboutList from './page/pageAboutList.vue';
+import pageAboutArticle from './page/pageAboutArticle.vue';
 //页面组件 end------------------------------------------------------------>
 
 export default {
@@ -84,6 +82,9 @@ export default {
         pageClass,
         pageList,
         pageArticle,
+        pageSearch,
+        pageAboutList,
+        pageAboutArticle,
         editWindow,
         componentWindow,
         checkWindow
@@ -247,37 +248,6 @@ export default {
     }
 }
 
-//菜单 start------------------------------------------------------------> 
-// .layerTabsBox {
-//     margin: 30px;
-//     border-radius: 20px;
-//     background: #fff;
-//     border: 1px solid #d3d3d3;
-//     -webkit-box-sizing: border-box;
-//     box-sizing: border-box;
-//     display: flex;
-//     align-items: center;
-//     justify-content: space-between;
-//     overflow: hidden;
-//     .layerTabsItem {
-//         width: 33.33%; /* 每个占3分之一的空间 */
-//         padding: 10px 20px;
-//         cursor: pointer;
-//         text-align: center;
-//         font-size: 14px;
-//         border-right: 1px solid #d3d3d3;
-//         background: #fff;
-//     }
-//     .active {
-//         background: #5570F1;
-//         color: #fff;
-//     }
-// }
-// .layerBox {
-//     padding-bottom: 10px;
-// }
-//菜单 end------------------------------------------------------------> 
-
 //模块 start------------------------------------------------------------> 
 .moduleBox {
     display: flex;