Merge branch '12_4_dangyunlong' into dev

src/api/chat.js

@@ -199,6 +199,15 @@ export function updateGroupMembers(data) {
     data
   })
 }
+
+//5.9 退出群聊
+export function quitGroup(data) {
+  return request({
+    url: '/chat/quitGroup',
+    method: 'post',
+    data
+  })
+}
 //5.群聊 end ------------------------------------->
 
 //6.商圈 start ------------------------------------->
@@ -282,4 +291,13 @@ export function topicStatus(data) {
     data
   })
 }
+
+//6.10 审核话题
+export function applyTopic(data) {
+  return request({
+    url: '/chat/applyTopic',
+    method: 'post',
+    data
+  })
+}
 //6.商圈 end ------------------------------------->

src/api/cms.js

@@ -92,4 +92,12 @@ export function getAllDepartment(params) {
   })
 }
 
+//2.1 获得所有1级网站导航
+export function getWebsiteCategory(params) {
+  return request({
+    url: '/web/getWebsiteCategory',
+    method: 'get',
+    params
+  })
+}
 //C端网站请求无需token start ------------------------------------->

src/api/complaint.js

@@ -64,4 +64,14 @@ export function downloadFile(params) {
     params
   })
 }
+
+//1.7 删除投诉举报
+export function delLetterOfComplaint(data) {
+  return request({
+    url: '/public/delLetterOfComplaint',
+    method: 'post',
+    data
+  })
+}
+
 //1.投诉举报信息 end ------------------------------------->

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

@@ -1,162 +0,0 @@
-<template>
-  <div class="componentMenuBox" id="componentMenuBox">
-    <div class="componentMenuTitle">
-      <div v-if="type == 'sector'">可选板块：</div>
-      <div v-if="type == 'component'">可选组件：</div>
-    </div>
-    <div v-if="type == 'sector'">
-      <el-scrollbar wrap-class="scrollbar-wrapper">
-        <div class="sectorBox">
-          <div class="sectorItemBox" @click="addModule('headSector',19)">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/headSector.png" />
-            </div>
-            <div class="sectorItemTitle">页头</div>
-          </div>
-          <div class="sectorItemBox" @click="addModule('menuSector',2)">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/menuSector.png" />
-            </div>
-            <div class="sectorItemTitle">网站导航</div>
-          </div>
-          <div class="sectorItemBox" @click="addModule('imgTitleSector',6)">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/imgTitleSector.png" />
-            </div>
-            <div class="sectorItemTitle">图片标题</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/bannerSector.png" @click="addModule('bannerSector',34)"/>
-            </div>
-            <div class="sectorItemTitle">焦点图</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/moreServicesSector.png" @click="addModule('manyPictureSector',41)"/>
-            </div>
-            <div class="sectorItemTitle">多图菜单</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/commentSector.png" @click="addModule('commentSector',40)"/>
-            </div>
-            <div class="sectorItemTitle">文章列表带评论</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/newsSector.png" @click="addModule('listSector',28)"/>
-            </div>
-            <div class="sectorItemTitle">文章列表</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/imgSector.png" @click="addModule('onlyImgSector',24)"/>
-            </div>
-            <div class="sectorItemTitle">纯图片组合</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/linkSector.png" @click="addModule('friendShipLinkSector',15)"/>
-            </div>
-            <div class="sectorItemTitle">友情链接</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
-            </div>
-            <div class="sectorItemTitle">页尾板块</div>
-          </div>
-        </div>
-      </el-scrollbar>
-    </div>
-    <!-- <div v-if="type == 'component'" class="componentBox">
-      组件
-    </div> -->
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'componentMenu',
-  props: {
-    type: {
-      type: String, //sector component
-      required: true
-    },
-  },
-  data() {
-    return {
-      data: null
-    }
-  },
-  methods: {
-    addModule(type,h){
-      let data = {
-        type: type,
-        h: h
-      }
-      console.log(data);
-      this.$store.commit('template/addModule',data);
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-  .componentMenuBox {
-    transition: width 0.28s;
-    width: 290px !important;
-    background: #2F2F2F;
-    height: 100%;
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-    .sectorBox {
-      height: 100%;
-    }
-    .el-scrollbar {
-      height: calc(100vh - 100px);
-    }
-    .componentMenuTitle {
-      padding: 37px 0 30px 0;
-      color: #fff;
-      font-size: 18px;
-      div {
-        border-left: 3px solid #5570F1;
-        padding-left: 25px;
-      }
-    }
-    .sectorItemBox {
-      box-sizing: border-box;
-      padding: 0 20px 40px 20px;
-      height: 130px;
-      cursor: pointer;
-      .sectorItem {
-        border: 1px solid #333644;
-        padding: 10px;
-        border-radius: 8px;
-        &:hover {
-          background: #333644;
-          transform: scale(1.1);
-          transition: all 0.2s ease-in-out;
-        }
-        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/index/sector.vue

@@ -1,54 +1,54 @@
 <template>
   <div class="sectorBox">
-    <!-- <div class="sectorItemBox" @click="addIndexModule('headSector',19)">
+    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/headSector.png" />
       </div>
       <div class="sectorItemTitle">页头</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('menuSector',2)">
+    <div class="sectorItemBox" @click="addModule('menuSector',2)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/menuSector.png" />
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6,imgTitleSector)">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('bannerSector',34,bannerSector)">
+    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/bannerSector.png"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('manyPictureSector',41,manyPictureSector)">
+    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('commentSector',40,commentSector)">
+    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/commentSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('listSector',28,listSector)">
+    <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="addIndexModule('onlyImgSector',24,onlyImgSector)">
+    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgSector.png"/> 
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('friendShipLinkSector',15,friendShipLinkSector)">
+    <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>
@@ -56,7 +56,7 @@
     </div>
     <!-- <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/footerSector.png" @click="addIndexModule('footerSector',38)"/>
+        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
       </div>
       <div class="sectorItemTitle">页尾板块</div>
     </div> -->
@@ -82,7 +82,11 @@ export default {
             component_style:1,//该组件使用哪个展示样式
             component_name:"",
             sort:1,
-            componentList:[]//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+            componentData:{
+              text:"通栏广告", //广告位名称
+              width:1200, //广告位宽度
+              height:60, //广告位高度
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
           }
         ]
       },
@@ -120,7 +124,8 @@ export default {
               page:1,
               pageSize:3,
               listType:[
-                "imgUrl"
+                "title",//标题
+                "imgUrl"//缩略图片
               ]
             }
           },
@@ -134,8 +139,9 @@ export default {
               page:1,
               pageSize:5,
               listType:[
-                "imgUrl",
-                "created_time",
+                "title",//标题
+                "created_time",//创建时间
+                "introduce",//描述
               ]
             }
           },
@@ -212,7 +218,7 @@ export default {
           },
           {
             component_type:1,
-            component_style:1,//该组件使用哪个展示样式
+            component_style:2,//该组件使用哪个展示样式
             component_name:"tabsCalendarNews",
             sort:2,
             componentData:{
@@ -242,7 +248,7 @@ export default {
         sectorName:"listSector",//板块名称
         componentList:[
           {
-            component_type:7, //纯文本
+            component_type:7,//纯文本
             component_style:1,//该组件使用哪个展示样式
             component_name:"styleTitle",
             sort:1,
@@ -311,6 +317,15 @@ export default {
       friendShipLinkSector:{
         sectorName:"friendShipLinkSector",//友情链接无需提交数据
         componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
           {
             component_type:4,
             component_style:1,//该组件使用哪个展示样式
@@ -325,14 +340,34 @@ export default {
     }
   },
   methods: {
-    addIndexModule(type,h,jsonData){
+    //添加模块
+    addModule(type,h,jsonData){
       let data = {
+        source:"click",//添加方式为点击
         type: type,
         h: h,
         jsonData: jsonData
       }
       console.log(data);
-      this.$store.commit('template/addIndexModule',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);
     }
   }
 }

src/store/modules/chat.js

@@ -2,7 +2,7 @@ import {getTalkSessionList,addFriend,getFriendsList,delFriend,updateFriend,getFr
   applyFriend,isFriend,getConversation,getChatRecords,addGroup,getGroupMembers,searchFriend,getFriendInfo,
   getGroupList,getGroupInfo,joinGroup,getGroupChatRecords,delGroup,updateGroup,
   getTopicsList,addTopic,getTopicInfo,updateTopic,delTopic,addReply,getTopicReply,topicType,
-  topicStatus,updateGroupMembers
+  topicStatus,updateGroupMembers,quitGroup,applyTopic
 } from '@/api/chat'
 
 const state = {
@@ -224,6 +224,15 @@ const actions = {
       })
     })
   },
+  quitGroup({commit},data) {
+    return new Promise((resolve, reject) => {
+      quitGroup(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   //5.群聊 end ------------------------------------->
 
   //6.商圈 start ------------------------------------->
@@ -307,6 +316,15 @@ const actions = {
         reject(error)
       })
     })
+  },
+  applyTopic({commit},data) {
+    return new Promise((resolve, reject) => {
+      applyTopic(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
   //6.商圈 end ------------------------------------->
 }

src/store/modules/cms.js

@@ -1,4 +1,4 @@
-import {getAllDepartment} from '@/api/cms'
+import {getAllDepartment,getWebsiteCategory} from '@/api/cms'
 
 const state = {
 
@@ -9,7 +9,7 @@ const mutations = {
 }
 
 const actions = {
-  //1.获取所有职能 start ---------------------------------------->
+  //1.获取所有职能
   getAllDepartment({commit},data) {
     return new Promise((resolve, reject) => {
       getAllDepartment(data).then(response => {
@@ -19,7 +19,16 @@ const actions = {
       })
     })
   },
-  //获取所有职能 end ---------------------------------------->
+  //2.获得所有1级网站导航
+  getWebsiteCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      getWebsiteCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
 }
 
 

src/store/modules/complaint.js

@@ -1,5 +1,5 @@
 import {getComplaint,getLetterOfComplaintInfo,addComplaint,upComplaint,
-  getLetterType,checkMeasure,downloadFile} from '@/api/complaint'
+  getLetterType,checkMeasure,downloadFile,delLetterOfComplaint} from '@/api/complaint'
 
 const state = {
 
@@ -80,8 +80,18 @@ const actions = {
         reject(error)
       })
     })
+  },
+  //删除投诉举报
+  delLetterOfComplaint({commit},data) {
+    return new Promise((resolve, reject) => {
+      delLetterOfComplaint(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
-  //资讯中心 end ---------------------------------------->
+  //投诉管理 end ---------------------------------------->
 }
 
 

src/store/modules/template.js

@@ -1,8 +1,14 @@
 import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
-  selectWebsiteArticleInfo} from '@/api/cms'
+  selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
+import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
+//所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
+
+//引入随机模板json
+import randomTemplateJson from '@/utils/templateJson/index/1.js';//首页
+
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
   editWebsiteId: "",//当前编辑网站的id
@@ -12,12 +18,14 @@ const state = {
   //1.画布数据 start------------------------------------------------------------>
   pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
   menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
+  previewStatus:false,//是否预览
+  gridKey:0,//使用gridKey来强制更新视图
   pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
     index:[
       
     ],//首页
     class:[],//分类页
-    list:[],//列表页
+    list:[],//列表页bang
     article:[],//详情页
     search:[],//搜索页
     aloneList:[],//自定义列表页
@@ -42,16 +50,35 @@ const state = {
   departmentList:"",//职能部门
   //2.站点数据 end------------------------------------------------------------>
 
-  //3.网站数据 start------------------------------------------------------------>
+  //3.画布构造 start------------------------------------------------------------>
+  editSectorY:0,//当前组件在画布中的位置
+  mouseXY:{//鼠标位置
+    "x": 12, 
+    "y": 33
+  },
+  DragPos:{//创建的占位符大小
+    "x": null, 
+    "y": null, 
+    "w": 12, 
+    "h": 2, 
+    "i": null
+  },
+  //获得gridlayout对象
+  gridlayoutObj:null,
+  //3.画布构造 end------------------------------------------------------------>
+
+  //4.构造的网站数据 start------------------------------------------------------------>
   editWindowStatus:false,//编辑组件弹出框是否显示
   editComponentWindowStatus:false,//选择组件样式弹出框是否显示
+  editWebsiteTemplateJsonWindow:false,//当前准备提交的数据 后期删除
   editWindowTitle:"",//编辑弹出框标题
   editSectorId:0,//当前正在编辑的板块id
+  editDataSort:0,//当前正在编辑的数据位置
   editComponentSort:0,//当前正在编辑的组件id
   editComponentType:0,//当前正在编辑的组件类型
   editComponentSize:0,//当前组件展示的条数
   editComponentStyle:0,//当前编辑的组件样式
-
+  editWebsiteCategory:[],//当前网站全部关联导航
   webSiteData:{
     //1.base网站基本信息
     base:{
@@ -72,13 +99,22 @@ const state = {
       aloneList:[],//自定义列表页
       aloneArticle:[],//自定义详情页
     }
+  },
+  //4.构造的网站数据 end------------------------------------------------------------>
+
+  //5.组件回显数据 start------------------------------------------------------------>
+  componentViewData:{
+    pid_arr:[],//导航池
+    pageSize:"",//展示条数
+    adName:"",//广告名称
+    titleName:"",//标题名称
   }
-  //3.网站数据 end------------------------------------------------------------>
+  //5.组件回显数据 start------------------------------------------------------------>
 }
 
 const mutations = {
   //0.全局配置 start------------------------------------------------------------>
-  //设置创建网站的id
+  //设置网站的id
   setEditWebsiteId(state,id){
     state.editWebsiteId = id;
   },
@@ -90,14 +126,20 @@ const mutations = {
   hiddenStepStatus(state){
     state.stepStatus = false;
   },
+  //设置步骤
   setPageStatus(state,num){
     state.pageStatus = num;
   },
+  //设置预览状态
+  setPreviewStatus(state){
+    state.previewStatus = !state.previewStatus;
+  },
   //打开编辑组件弹出框
   setEditWindowStatus(state,data){
-    console.log(data);
     state.editWindowStatus = true;
     state.editSectorId = data.id;
+    state.editSectorY = data.y;
+    state.editDataSort = data.dataSort;
     state.editComponentSort = data.sort;
     state.editComponentType = data.type;
     state.editComponentSize = data.size;
@@ -105,15 +147,12 @@ const mutations = {
   //关闭编辑组件弹出框
   closeEditWindowStatus(state){
     state.editWindowStatus = false;
-    state.editSectorId = "";
-    state.editComponentSort = "";
-    state.editComponentType = "";
-    state.editComponentSize = "";
   },
   //打开选择组件样式弹出框
   setComponentStyleStatus(state,data){
     state.editComponentWindowStatus = true;
     state.editSectorId = data.id;
+    state.editDataSort = data.dataSort;
     state.editComponentSort = data.sort;
     state.editComponentType = data.type;
     state.editComponentStyle = data.style;
@@ -121,202 +160,574 @@ const mutations = {
   //关闭选择组件样式弹出框
   closeComponentStyleStatus(state){
     state.editComponentWindowStatus = false;
-    state.editSectorId = "";
-    state.editComponentSort = "";
-    state.editComponentType = "";
-    state.editComponentStyle = "";
+  },
+  //关闭提交数据弹出框
+  closeEditWebsiteTemplateJsonWindow(state){
+    state.editWebsiteTemplateJsonWindow = false;
+  },
+  //选择组件样式
+  selectComponentStyleNumber(state,data){
+    state.editComponentStyle = data;
+  },
+  //设置组件回显数据
+  setComponentViewData(state,data){
+    //首页
+    if(state.pageStatus == 1){
+      //找到要修改的板块
+      const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
   },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
-  //添加首页板块
-  addIndexModule(state,data){
-    //判断当前一共有多少个模块最多能添加10个
-    if(state.pageData.index.length >= 10){
-      Message.error('最多只能添加10个模块！');
-      return;
-    }else{
-      //data.type 组件名称 data.h 模块高度 
-      //计算当前布局的最大 y 值
-      const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
-      //添加板块id  
-      state.pageData.index.push({
-        i: state.pageData.index.length, 
-        x: 0, 
-        y: maxY + 1, 
-        w: 12, 
-        h: data.h, 
-        type: data.type,
-        content:"",
-        sectorData:data.jsonData
-      });
-      console.log("当前添加的板块id：" + state.pageData.index.length);
-      data.jsonData.sectorId = state.pageData.index.length;
-      console.log("添加完毕后的数据：");
-      console.log(state.pageData.index);
+  //获得gridlayout对象
+  setGridlayoutObj(state,data){
+    state.gridlayoutObj = data;
+  },
+  //添加板块
+  addModule(state,data){
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.index.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //判断是拖拽的还是点击添加进来的 click=点击
+        if(data.source == "click"){
+          console.log("通过点击添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.index.length;
+          //添加板块id  
+          state.pageData.index.push({
+            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: 0, 
+            y: maxY + 1, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.index);
+        }
+
+        //drag=拖拽
+        if(data.source == "drag"){
+          //拖拽添加
+          console.log("通过拖拽添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.index.length;
+          //添加板块id  
+          state.pageData.index.push({
+            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: data.x, 
+            y: data.y, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.index);
+          //需要调查一下这里最后的1，1
+          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
+          try {
+            state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
+          } catch {}
+        }
+
+      }
     }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
   },
-  //删除首页板块
-  deleteIndexModule(state,data){
-    for(let i = 0; i < state.pageData.index.length; i++) {
-      if(state.pageData.index[i].i == data.i) {
-        state.pageData.index.splice(i, 1);
+  //删除板块
+  deleteModule(state,data){
+    //data.i = id
+    //data.dataSort = dataSort
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      //必须通过重新查找id的方式来删除
+      const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
+      if (indexToRemove !== -1) {
+        state.pageData.index.splice(indexToRemove, 1);
+        Message.success('模块已删除！');
+        console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
+      } else {
+        Message.warning('未找到要删除的模块！');
       }
+      // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
+      // state.pageData.index.splice(data.dataSort,1);
+      // Message.success('模块已删除！');
+      // console.log(state.pageData.index);
     }
-    Message.success('模块已删除！');
-    console.log("删除后的数据结构：");
-    console.log(state.pageData.index);
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
   },
-  //修改首页板块高度
-  setIndexModuleHeight(state,data){
-    console.log(data);
-    state.pageData.index[data.i].h = data.h;
-    console.log(state.pageData.index[data.i]);
-  },
-  moveIndexModule(state, data) {
-    const moveType = data.moveType;
-    const moduleId = data.i;
-    const modules = state.pageData.index;
-    // 查找模块在数组中的实际索引
-    const thisIndex = modules.findIndex(module => module.i === moduleId);
-    if (thisIndex === -1) {
-      Message.error('模块未找到！');
-      return;
+  //设置组件样式
+  setComponentStyleNumber(state,data){
+    let id = state.editSectorId;
+    let dataSort = state.editDataSort;
+    let sort = state.editComponentSort;
+    let num = state.editComponentStyle;
+    console.log(id,dataSort,sort,num);
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      // 获取当前模块数据并进行深拷贝
+      let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort]));
+      //module.content.componentList[sort].component_style = num;
+      //确保修改属性时 Vue 能监控到变化
+      Vue.set(module.content.componentList, sort, {
+        ...module.content.componentList[sort],
+        component_style: num
+      });
+      // 拷贝后直接替换原来的板块
+      //state.pageData.index[id] = module;
+      // 使用Vue.set来强制视图更新
+      Vue.set(state.pageData.index, dataSort, module);
+      console.log("当前的板块数据为：");
+      console.log(state.pageData.index);
     }
-    const thisY = modules[thisIndex].y;
-    
-    if (moveType === 'up') {
-      // 查找比当前模块 y 值小的最大的 y 值
-      const thatY = Math.max(
-        ...modules
-          .filter(item => item.y < thisY)
-          .map(item => item.y)
-      );
-      if (thatY === -Infinity) {
-        Message.error('已经是顶部了！');
-        return;
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
+  //保存组件设置的数据
+  saveComponentData(state,data){
+    //传入的板块id
+    console.log("当前编辑板块：" + data.id)
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
+      console.log("要修改的模块id为：") //找到要修改的板块
+      console.log(data.sort) //找到要修改的板块
+      console.log(targetModuleIndex) //找到要修改的板块
+      //console.log(targetModuleIndex) //找到要修改的板块
+      //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件 
+      //data.data.pid_arr //导航池
+      //state.editComponentSize //展示条数
+
+      //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      //1=普通新闻
+      //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
+      //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
+      //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
+      if(state.editComponentType == 1){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
       }
-      // 查找具有 thatY 的模块索引
-      const thatIndex = modules.findIndex(item => item.y === thatY);
-      if (thatIndex === -1) {
-        Message.error('上方模块未找到！');
-        return;
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
       }
-      // 交换 y 值
-      [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
-
-    } else if (moveType === 'down') {
-      // 查找比当前模块 y 值大的最小的 y 值
-      const thatY = Math.min(
-        ...modules
-          .filter(item => item.y > thisY)
-          .map(item => item.y)
-      );
-      if (thatY === Infinity) {
-        Message.error('已经是底部了！');
-        return;
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.index, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
       }
-      // 查找具有 thatY 的模块索引
-      const thatIndex = modules.findIndex(item => item.y === thatY);
-      if (thatIndex === -1) {
-        Message.error('下方模块未找到！');
-        return;
+      //4=友情链接
+      //if(state.editComponentType == 4){}
+      //6=静态组件
+      //if(state.editComponentType == 6){}
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.index, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
       }
-      // 交换 y 值
-      [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
+      //8=评论
+      //if(state.editComponentType == 8){}
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
+  //通过按钮移动板块 (暂时停用)
+  moveModule(state, data) {
+    Message.error("该功能暂时禁用")
+    // pageStatus == 1 首页
+    // if (state.pageStatus == 1) {
+    //   const moveType = data.moveType;
+    //   const moduleId = data.i;
+    //   const modules = state.pageData.index;
+  
+    //   // 深拷贝 modules，避免直接操作原数据
+    //   const newModules = JSON.parse(JSON.stringify(modules));
+  
+    //   // 查找模块在数组中的实际索引
+    //   const thisIndex = newModules.findIndex(module => module.i === moduleId);
+    //   if (thisIndex === -1) {
+    //     Message.error('模块未找到！');
+    //     return;
+    //   }
+    //   const thisY = newModules[thisIndex].y;
+    //   let thatY;
+  
+    //   if (moveType === 'up') {
+    //     thatY = Math.max(
+    //       ...newModules.filter(item => item.y < thisY).map(item => item.y)
+    //     );
+    //     if (thatY === -Infinity) {
+    //       Message.error('已经是顶部了！');
+    //       return;
+    //     }
+    //     const thatIndex = newModules.findIndex(item => item.y === thatY);
+    //     if (thatIndex === -1) {
+    //       Message.error('上方模块未找到！');
+    //       return;
+    //     }
+    //     // 交换y值
+    //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
+  
+    //   } else if (moveType === 'down') {
+    //     thatY = Math.min(
+    //       ...newModules.filter(item => item.y > thisY).map(item => item.y)
+    //     );
+    //     if (thatY === Infinity) {
+    //       Message.error('已经是底部了！');
+    //       return;
+    //     }
+    //     const thatIndex = newModules.findIndex(item => item.y === thatY);
+    //     if (thatIndex === -1) {
+    //       Message.error('下方模块未找到！');
+    //       return;
+    //     }
+    //     // 交换y值
+    //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
+    //   } else {
+    //     Message.error('未知的移动类型！');
+    //     return;
+    //   }
+  
+    //   // 交换后对模块进行排序以确保顺序一致
+    //   newModules.sort((a, b) => a.y - b.y);
       
-    } else {
-      Message.error('未知的移动类型！');
-      return;
+    //   // 使用 Vue.set 强制更新数组，确保视图更新
+    //   //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
+    //   state.pageData.index = newModules;
+    //   //state.gridKey+=1;
+  
+    //   console.log(state.pageData.index); // 打印查看是否已修改
+    // }
+  
+    // // pageStatus == 2 分类页
+    // if (state.pageStatus == 2) {}
+    // // pageStatus == 3 列表页
+    // if (state.pageStatus == 3) {}
+    // // pageStatus == 4 详情页
+    // if (state.pageStatus == 4) {}
+    // // pageStatus == 5 搜索页
+    // if (state.pageStatus == 5) {}
+    // // pageStatus == 6 自定义列表页
+    // if (state.pageStatus == 6) {}
+    // // pageStatus == 7 自定义详情页
+    // if (state.pageStatus == 7) {}
+  },
+  //从外部拖拽板块
+  drag(state, data) {
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //console.log(parentRect); 获取画布
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+      }
+      //state.gridlayoutObj
+      //如果没有占位符就创建一个
+      if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
+        state.pageData.index.push({
+          x: (state.pageData.index.length * 2) % (this.colNum || 12),
+          y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
+          w: 12,
+          h: 2,
+          i: 'drop',
+        });
+      }
+      //如果已经存在占位符
+      let index = state.pageData.index.findIndex(item => item.i === 'drop');
+      if (index !== -1) {
+        try {
+          state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
+        } catch {
+
+        }
+        let el = state.gridlayoutObj.$children[index];
+        el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
+        let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+
+        if (mouseInGrid === true) {
+          state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.DragPos.i = String(index);
+          state.DragPos.x = state.pageData.index[index].x;
+          state.DragPos.y = state.pageData.index[index].y;
+        }
+        if (mouseInGrid === false) {
+          state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+        }
+      }
     }
-    // 交换后对模块进行排序以确保顺序一致
-    state.pageData.index.sort((a, b) => a.y - b.y);
-  },
-  //添加模块
-  // addModule(state,data) {
-  //   //data.type 组件名称 data.h 模块高度 
-  //   // 计算当前布局的最大 y 值
-  //   const maxY = Math.max(...state.layout.map(item => item.y), 0);
-  //   state.layout.push({
-  //     i: state.layout.length, 
-  //     x: 0, 
-  //     y: maxY + 1, 
-  //     w: 12, 
-  //     h: data.h, 
-  //     type: data.type,
-  //     content:""
-  //   });
-  // },
-  //删除模块
-  // deleteModule(item) {
-  //   //找到对应的模块删除掉
-  //   for(let i = 0; i < state.layout.length; i++) {
-  //     if(state.layout[i].i == item.i) {
-  //       state.layout.splice(i, 1);
-  //     }
-  //   }
-  // },
-  //移动模块
-  // moveIndexModule(state,data){
-  //   console.log(state.pageData.index[data.i]);
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
+  //拖拽结束 定位落点
+  dragend(state, data) {
 
-  //   if(data.moveType == 'up'){
-      
-  //   }else{
-      
-  //     if(state.pageData.index[data.i].y === Math.max(...state.pageData.index.map(item => item.y))){
-  //       Message.error('已经是底部了！');
-  //     }else{
-  //       console.log(state.pageData.index);
-  //       //当前选择的模块
-  //       let thisIndex = data.i;
-  //       let thisY = state.pageData.index[thisIndex].y;
-        
-  //       //找到下方的模块的y值
-  //       //注意，这里不能用i去定位，因为模块是通过y值去排序的，跟数据的位置，i的位置都没有关系
-  //       const thatY = Math.min(...state.pageData.index
-  //         .filter(item => item.y > thisY)
-  //         .map(item => item.y), 
-  //         Infinity);
-  //       //再通过y值找到对应的模块i
-  //       const thatIndex = state.pageData.index.findIndex(item => item.y === thatY);
-        
-  //       //最后交换位置
-  //       state.pageData.index[thisIndex].y = thatY;
-  //       state.pageData.index[thatIndex].y = thisY;
-  //     }
-      
-  //   }
-  // },
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      //获取画布尺寸
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //判断是否在画布内
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+          mouseInGrid = true;
+      }
+      //如果在画布内，开始创建元素
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+        state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
+        state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+        let sendData = {
+          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
+          type:data.type,
+          h:data.h,
+          jsonData:data.jsonData,
+          x: state.DragPos.x,
+          y: state.DragPos.y,
+          w: 12,
+        }
+        //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
+        this.commit('template/addModule',sendData);
+
+      }
+    }
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
+  //修改首页板块高度
+  setModuleHeight(state,data){
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      console.log(data);
+      state.pageData.index[data.i].h = data.h;
+      console.log(state.pageData.index[data.i]);
+    }
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
   //格式化模板信息
   formatTemplateInfo(state, data) {
-    //console.log(data.type);
-    //按照data.data.y的大小排序
-    data.data.sort((a, b) => a.y - b.y);
-    console.log(data,data);
+    // 深拷贝数据，避免直接修改原数据
+    let clonedData = JSON.parse(JSON.stringify(data));
+    // 按照 clonedData.data.y 的大小排序
+    clonedData.data.sort((a, b) => a.y - b.y);
+    //console.log(clonedData, clonedData);
     let websiteData = [];
-    //获取板块的sort
-    for (let index in data.data) {
-      console.log(data.data[index].sectorData);
-      data.data[index].sectorData.sort = Number(index)+1;
-      if(data.type=="index"){
-        //不要把数据直接保存到state.webSiteData.template中，否则无法删除
-        websiteData.push(data.data[index].sectorData)
+    // 获取板块的 sort
+    for (let index = 0; index < clonedData.data.length; index++) {
+      console.log(clonedData.data[index].content);
+      // 使用 Vue.set 来确保属性变更能被 Vue 追踪
+      Vue.set(clonedData.data[index].content, 'sort', Number(index) + 1);
+      if (data.type == "index") {
+        // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除
+        websiteData.push(clonedData.data[index].content);
       }
     }
-    //保存到对应的页面json中
-    if(data.type=="index"){
+    // 保存到对应的页面 json 中
+    if (data.type == "index") {
       state.webSiteData.template.index = websiteData;
     }
-
   },
   //保存模板
   saveTemplate(state) {
+    //临时展示保存的数据 后期移除
+    state.editWebsiteTemplateJsonWindow = true;
     //调用mutations中的方法无需使用$store
     //格式化index的信息
     this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
-    
     console.log(state.webSiteData);
   },
+  //随机生成模板
+  randomTemplate(state){
+    console.log("随机生成模板");
+    const randomIndex = Math.floor(Math.random() * 3); // Generates a random number between 1 and 2
+    console.log(`随机生成的数字是: ${randomIndex}`);
+
+    Message.warning("该功能研发中");
+
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {}
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
   //1.配置模块 end------------------------------------------------------------>
 
   //2.获取站点信息 start------------------------------------------------------------>
@@ -343,6 +754,19 @@ const mutations = {
       state.area.county = data.region;
     }
   },
+  //获取全部导航
+  setWebsiteCategory(state,data){
+    let arrayData = []
+    for(let item of data){
+      let options = {
+        key:item.id,
+        label:item.name,
+        value:item.id
+      }
+      arrayData.push(options);
+    }
+    state.editWebsiteCategory = arrayData;
+  },
   //2.获取站点信息 end------------------------------------------------------------>
 }
 
@@ -400,7 +824,18 @@ const actions = {
         reject(error)
       })
     })
-  }
+  },
+  //获取全部导航池
+  getWebsiteCategory({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteCategory(data).then(response => {
+        commit('setWebsiteCategory', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   //1.站点数据 end------------------------------------------------------------>
 }
 

src/store/modules/user.js

@@ -8,7 +8,8 @@ const state = {
   avatar: '',
   introduction: '',
   roles: [],
-  userid:''
+  userid:'',
+  role_id:''
 }
 
 const mutations = {
@@ -24,6 +25,9 @@ const mutations = {
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
   },
+  SET_ROLE_ID: (state, role_id) => {
+    state.role_id = role_id
+  },
   SET_ROLES: (state, roles) => {
     state.roles = roles
   },
@@ -65,7 +69,7 @@ const actions = {
         // }
         // 所有用户的身份都为admin
         const roles = ['admin']
-        const { real_name, avatar, introduction } = data
+        const { nickname, avatar, introduction,role_id } = data
         data.roles = roles
         // roles must be a non-empty array
         // 判断是否包含权限
@@ -74,9 +78,10 @@ const actions = {
         // }
         commit('SET_ROLES', roles)
         commit('SET_USERID', data.id)
-        commit('SET_NAME', real_name)
+        commit('SET_NAME', nickname)
         commit('SET_AVATAR', avatar)
         commit('SET_INTRODUCTION', introduction)
+        commit('SET_ROLE_ID', role_id)
         resolve(data)
       }).catch(error => {
         reject(error)

src/styles/global.less

@@ -282,7 +282,7 @@
   background: #E9EDF7;
   margin-bottom: 30px;
   .testAssistantTitle {
-    font-size: 12px;
+    font-size: 14px;
     font-weight: bold;
     color: #19499F;
   }
@@ -292,17 +292,31 @@
       padding-top: 5px;
       color: #19499F;
       font-weight: bold;
-      span {
-        font-weight: bold;
-        font-size: 14px;
-        color: #333;
-        margin-right: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 30px;
+      line-height: 30px;
+      border-bottom:1px dashed #19499F;
+      &:last-child {
+        border-bottom:none;
       }
+      // span {
+      //   font-weight: bold;
+      //   font-size: 14px;
+      //   color: #333;
+      //   margin-right: 10px;
+      // }
     }
   }
 }
 /*测试助手 正式版本移除 end------------------------------------------------------------>*/
 
+//自助建站 构建虚线
+.buildingBorder {
+  border: 2px dashed #eee;
+}
+
 
 /*页面布局 end------------------------------------------------------------>*/
 

src/utils/request.js

@@ -81,7 +81,7 @@ service.interceptors.response.use(
     Message({
       message: error.message,
       type: 'error',
-      duration: 5 * 10000
+      duration: 20 * 1000
     })
     return Promise.reject(error)
   }

src/utils/templateJson/index/1.js

@@ -0,0 +1,994 @@
+const json = [
+  //1.正常布局
+  [
+    {
+      "i": 0,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 33,
+      "type": "bannerSector",
+      "content": {
+        "sectorName": "bannerSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "mainTitle",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 1,
+              "listType": [
+                "title"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "banner",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "imgUrl",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 1
+      },
+      "moved": false
+    },
+    {
+      "i": 1,
+      "x": 0,
+      "y": 33,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    },
+    {
+      "i": 2,
+      "x": 0,
+      "y": 41,
+      "w": 12,
+      "h": 49,
+      "type": "manyPictureSector",
+      "content": {
+        "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"
+              ]
+            }
+          }
+        ],
+        "sort": 3
+      },
+      "moved": false
+    },
+    {
+      "i": 3,
+      "x": 0,
+      "y": 90,
+      "w": 12,
+      "h": 44,
+      "type": "commentSector",
+      "content": {
+        "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": {}
+          }
+        ],
+        "sort": 4
+      },
+      "moved": false
+    },
+    {
+      "i": 4,
+      "x": 0,
+      "y": 134,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 2,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 5
+      },
+      "moved": false
+    },
+    {
+      "i": 5,
+      "x": 0,
+      "y": 142,
+      "w": 12,
+      "h": 33,
+      "type": "listSector",
+      "content": {
+        "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"
+              ]
+            }
+          }
+        ],
+        "sort": 6
+      },
+      "moved": false
+    },
+    {
+      "i": 6,
+      "x": 0,
+      "y": 175,
+      "w": 12,
+      "h": 32,
+      "type": "onlyImgSector",
+      "content": {
+        "sectorName": "onlyImgSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 7,
+              "listType": [
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ],
+        "sort": 7
+      },
+      "moved": false
+    },
+    {
+      "i": 7,
+      "x": 0,
+      "y": 207,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    },
+    {
+      "i": 8,
+      "x": 0,
+      "y": 215,
+      "w": 12,
+      "h": 20,
+      "type": "friendShipLinkSector",
+      "content": {
+        "sectorName": "friendShipLinkSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 4,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {}
+          }
+        ],
+        "sort": 9
+      },
+      "moved": false
+    }
+  ],
+  //2.绿色布局
+  [
+    {
+      "i": 2,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 49,
+      "type": "manyPictureSector",
+      "content": {
+        "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"
+              ]
+            }
+          }
+        ],
+        "sort": 1
+      },
+      "moved": false
+    },
+    {
+      "i": 0,
+      "x": 0,
+      "y": 49,
+      "w": 12,
+      "h": 33,
+      "type": "bannerSector",
+      "content": {
+        "sectorName": "bannerSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "mainTitle",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 1,
+              "listType": [
+                "title"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "banner",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "imgUrl",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 2
+      },
+      "moved": false
+    },
+    {
+      "i": 1,
+      "x": 0,
+      "y": 82,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 3
+      },
+      "moved": false
+    },
+    {
+      "i": 3,
+      "x": 0,
+      "y": 90,
+      "w": 12,
+      "h": 44,
+      "type": "commentSector",
+      "content": {
+        "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": {}
+          }
+        ],
+        "sort": 4
+      },
+      "moved": false
+    },
+    {
+      "i": 4,
+      "x": 0,
+      "y": 134,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 4,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 5
+      },
+      "moved": false
+    },
+    {
+      "i": 6,
+      "x": 0,
+      "y": 142,
+      "w": 12,
+      "h": 32,
+      "type": "onlyImgSector",
+      "content": {
+        "sectorName": "onlyImgSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 7,
+              "listType": [
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ],
+        "sort": 6
+      },
+      "moved": false
+    },
+    {
+      "i": 5,
+      "x": 0,
+      "y": 174,
+      "w": 12,
+      "h": 33,
+      "type": "listSector",
+      "content": {
+        "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"
+              ]
+            }
+          }
+        ],
+        "sort": 7
+      },
+      "moved": false
+    },
+    {
+      "i": 7,
+      "x": 0,
+      "y": 207,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    },
+    {
+      "i": 8,
+      "x": 0,
+      "y": 215,
+      "w": 12,
+      "h": 20,
+      "type": "friendShipLinkSector",
+      "content": {
+        "sectorName": "friendShipLinkSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 1,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 4,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {}
+          }
+        ],
+        "sort": 9
+      },
+      "moved": false
+    }
+  ],
+  //3.广告放到顶部
+  [
+    {
+      "i": 1,
+      "x": 0,
+      "y": 0,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 1
+      },
+      "moved": false
+    },
+    {
+      "i": 0,
+      "x": 0,
+      "y": 8,
+      "w": 12,
+      "h": 33,
+      "type": "bannerSector",
+      "content": {
+        "sectorName": "bannerSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 2,
+            "component_name": "mainTitle",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 1,
+              "listType": [
+                "title"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "banner",
+            "sort": 2,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 3,
+              "listType": [
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            "component_type": 1,
+            "component_style": 1,
+            "component_name": "tabsNews",
+            "sort": 3,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 5,
+              "listType": [
+                "imgUrl",
+                "created_time"
+              ]
+            }
+          }
+        ],
+        "sort": 2
+      },
+      "moved": false
+    },
+    {
+      "i": 6,
+      "x": 0,
+      "y": 41,
+      "w": 12,
+      "h": 32,
+      "type": "onlyImgSector",
+      "content": {
+        "sectorName": "onlyImgSector",
+        "componentList": [
+          {
+            "component_type": 1,
+            "component_style": 4,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {
+              "category_id": [],
+              "page": 1,
+              "pageSize": 7,
+              "listType": [
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ],
+        "sort": 3
+      },
+      "moved": false
+    },
+    {
+      "i": 4,
+      "x": 0,
+      "y": 73,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 4,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 4
+      },
+      "moved": false
+    },
+    {
+      "i": 3,
+      "x": 0,
+      "y": 81,
+      "w": 12,
+      "h": 44,
+      "type": "commentSector",
+      "content": {
+        "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": {}
+          }
+        ],
+        "sort": 5
+      },
+      "moved": false
+    },
+    {
+      "i": 7,
+      "x": 0,
+      "y": 125,
+      "w": 12,
+      "h": 8,
+      "type": "imgTitleSector",
+      "content": {
+        "sectorName": "imgTitleSector",
+        "componentList": [
+          {
+            "component_type": 3,
+            "component_style": 3,
+            "component_name": "",
+            "sort": 1,
+            "componentData": []
+          }
+        ],
+        "sort": 6
+      },
+      "moved": false
+    },
+    {
+      "i": 5,
+      "x": 0,
+      "y": 133,
+      "w": 12,
+      "h": 33,
+      "type": "listSector",
+      "content": {
+        "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"
+              ]
+            }
+          }
+        ],
+        "sort": 7
+      },
+      "moved": false
+    },
+    {
+      "i": 8,
+      "x": 0,
+      "y": 166,
+      "w": 12,
+      "h": 20,
+      "type": "friendShipLinkSector",
+      "content": {
+        "sectorName": "friendShipLinkSector",
+        "componentList": [
+          {
+            "component_type": 7,
+            "component_style": 3,
+            "component_name": "styleTitle",
+            "sort": 1,
+            "componentData": {
+              "text": "板块标题"
+            }
+          },
+          {
+            "component_type": 4,
+            "component_style": 1,
+            "component_name": "",
+            "sort": 1,
+            "componentData": {}
+          }
+        ],
+        "sort": 8
+      },
+      "moved": false
+    }
+  ]
+
+]
+
+export default json;

src/views/chat/contacts.vue

@@ -30,7 +30,7 @@
           <div class="newFriendImg">
             <img src="@/assets/chat/newcontacts.png">
           </div>
-          <div class="newFriendText">
+          <div class="newFriendText" @click="searchFriend">
             搜索：{{searchUserName}}
           </div>
           <div class="searchFriendBox" v-if="searchWindowStatus==true">
@@ -41,7 +41,7 @@
               </div>
               <div class="searchFriendInfo">
                 <div class="searchFriendName">
-                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null">{{searchFriendList.remark}}</div>
+                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
                   <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
                   <!--性别-->
                   <!-- <div class="gender"><img src="@/assets/chat/girl.png"></div> -->
@@ -70,8 +70,9 @@
               <div class="searchFriendLineContent">通过账号添加</div>
             </div> -->
             <div class="searchFriendButton">
-              <el-button type="primary" v-if="searchFriendList.showBtn==false" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
-              <el-button type="danger" v-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
+              <el-button type="primary" v-if="searchFriendList.showBtn==false&&searchFriendList.id!=this.$store.state.user.userid" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
+              <el-button type="danger" v-else-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
+              <el-button type="primary" disabled v-else>添加到通讯录</el-button>
             </div>
             <!-- <div class="searchFriendButton">
               <div class="searchFriendButtonItem">
@@ -184,7 +185,7 @@
             <div class="userInfoMainLineTitle">备注</div>
             <div class="userInfoMainLineContent">
               <div class="userInfoMainLineContentItem" @click="openEditWindow">
-                <div v-if="friendInfo.remark!=null">{{friendInfo.remark}}</div>
+                <div v-if="friendInfo.remark!=null&&friendInfo.remark!=''">{{friendInfo.remark}}</div>
                 <div v-else>暂无备注</div>
                 <div><i class="el-icon-edit"></i></div>
               </div>
@@ -309,10 +310,10 @@ export default {
       //2.好友列表 end------------------------------------------------------------>
       //3.通过好友申请 start------------------------------------------------------------>
       form:{
-        //好友id
+        //好友的用户id
         id:"",
-        //好友申请
-        remark:"",
+        //好友id
+        friend_id:"",
         //状态
         status:2,
         //申请id
@@ -390,6 +391,7 @@ export default {
         console.log(res);
         //保存好友信息
         this.friendInfo = res.data;
+        this.remark = res.data.remark;
       }).catch(() => {
         this.$message.error('获得好友身份详情失败!')
       })
@@ -505,11 +507,15 @@ export default {
       }
       //this.editFriendId
       this.$store.dispatch('chat/updateFriend',data).then(res=> {
-        this.$message.success('修改备注名成功!')
-        this.pagestatus = 1;
-        this.editWindowStatus = false;
-        this.getUserFriendList();
-        this.remark = "";
+        if(res.code==200){
+          this.$message.success('修改备注名成功!')
+          this.pagestatus = 1;
+          this.editWindowStatus = false;
+          this.getUserFriendList();
+          this.remark = "";
+        }else{
+          this.$message.error(res.message)
+        }
       }).catch(() => {
         this.$message.error('修改备注名失败!')
       })
@@ -554,6 +560,7 @@ export default {
     //用户菜单操作
     openWindow(item){
       this.form.id = item.id;
+      this.form.friend_id = item.friend_id;
       this.friendInfo = item;
       //打开弹出框
       this.friendWindowStatus = true;

src/views/chat/creatTopic.vue

@@ -34,14 +34,14 @@
               </div>
             </el-form-item>
             <el-form-item label="建立群聊：" prop="is_group" class="custom-align-right">
-              <el-radio-group v-model="form.is_group" :disabled="groupStatus">
+              <el-radio-group v-model="form.is_group" :disabled="this.$route.query.id!=undefined">
                 <el-radio :label="'1'">是</el-radio>
                 <el-radio :label="'0'">否</el-radio>
               </el-radio-group>
             </el-form-item>
             <div>
               <el-form-item label="群聊名称：" prop="group_name" class="custom-align-right" v-if="form.is_group=='1'">
-                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="groupStatus"></el-input>
+                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="groupStatus" maxlength="20"></el-input>
               </el-form-item>
               <el-form-item label="作者：" class="custom-align-right">
                 <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者名"></el-input>
@@ -274,7 +274,7 @@ export default {
         this.form.content = res.data.content;
         this.form.is_group = res.data.is_group;
         this.form.group_name = res.data.group_name;
-        this.form.author = res.data.user_name;
+        this.form.author = res.data.author;
         //如果已经创建了群聊，阻止其修改
         if(res.data.is_group=="1"){
           this.groupStatus = true;

src/views/chat/hall.vue

@@ -101,7 +101,7 @@
         <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
           <div class="userName">{{ messageTitle }}</div>
           <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
-          <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''">{{groupProfile}}</div>
+          <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
           <div v-if="groupId==''">
             <div class="shareCardIcon" @click="openShareCard">
               <i class="el-icon-postcard"></i>
@@ -276,7 +276,7 @@
                   <img src="@/assets/chat/user/admin.png" v-else>
                 </div>
                 <div class="otherUserMessageText">
-                  <div class="messageGroupInvite" @click="openGroupInviteWindow">
+                  <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
                     <div class="messageGroupInviteTop">
                       <div class="messageGroupInviteIcon">
                         <img src="@/assets/chat/user/group.jpg">
@@ -407,8 +407,12 @@
               <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
                 <div class="rightSlideUserItemIcon">
                   <span class="el-dropdown-link">
-                    <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
-                    <img src="@/assets/chat/user/admin.png" v-else>
+                    <!-- {{ creatorId }} {{ item.user_id }} -->
+                    <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
+                    <div>
+                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                    </div>
                   </span>
                 </div>
                 <div class="rightSlideUserItemName">
@@ -496,17 +500,20 @@
               <div class="groupSystem">
                 <div class="groupChatSystem">
                   <div class="groupChatTitle">群聊名称</div>
-                  <div class="groupChatText" @click="editGroupNameWindow=true">
-                    {{this.messageTitle}}
+                  <div class="groupChatText">
+                    <div class="groupChatTextContent">{{this.messageTitle}}</div>
+                    <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
                   </div>
                 </div>
                 <div class="groupChatSystem">
                   <div class="groupChatTitle">群公告</div>
-                  <div class="groupChatText" v-if="this.groupProfile!=''" @click="editGroupNoticeWindow=true">
-                    {{this.groupProfile}}
+                  <div class="groupChatText" v-if="this.groupProfile!=''">
+                    <div class="groupChatTextContent">{{this.groupProfile}}</div>
+                    <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
                   </div>
-                  <div class="groupChatText" v-else @click="editGroupNoticeWindow=true">
+                  <div class="groupChatText" v-else>
                     暂无群公告
+                    <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
                   </div>
                 </div>
                 <!-- <div class="groupChatSystem">
@@ -601,7 +608,7 @@
               <el-checkbox v-model="item.status"></el-checkbox>
               <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
               <img src="@/assets/chat/user/admin.png" v-else>
-              <div class="searchUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchUserName" v-else>{{item.user_name}}</div>
             </div>
           </div>
@@ -621,7 +628,7 @@
                   <i class="el-icon-close"></i>
                 </div>
               </div>
-              <div class="searchWindowUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
             </div>
           </div>
@@ -845,7 +852,7 @@
         <div class="messageFormInput">
           <el-input v-model="form.addUserForm.notes" placeholder="请输入"></el-input>
         </div>
-        <div class="messageFormTitle">备注名</div>
+        <div class="messageFormTitle">验证消息</div>
         <div class="messageFormInput">
           <el-input v-model="form.addUserForm.nickname" placeholder="请输入"></el-input>
         </div>
@@ -875,7 +882,7 @@
     <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
       <div>
         <div>
-          <el-input type="textarea" resize="none" v-model="messageTitle" placeholder="请输入"></el-input>
+          <el-input type="textarea" resize="none" v-model="messageTitle" placeholder="请输入" maxlength="20"></el-input>
         </div>
         <div class="footerButtonBox">
           <el-button type="info" @click="editGroupNameWindow=false">取消</el-button>
@@ -928,14 +935,15 @@
                 </div>
                 <div class="searchFriendInfo">
                   <div class="searchFriendName">
-                    <div class="searchFriendNameText">{{groupSearchUser.user_name}}</div>
+                    <div class="searchFriendNameText">{{groupSearchUser.nickname}}</div>
                   </div>
-                  <div class="searchFriendPhone">账号：{{groupSearchUser.user_name}}</div>
+                  <div class="searchFriendPhone">账号：{{groupSearchUser.nickname}}</div>
                 </div>
               </div>
               <div class="searchFriendButton">
                 <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
-                <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)">移除</el-button>
+                <el-button v-else-if="Number(creatorId)==Number(myUserId)" type="warning" @click="addGroupUser(groupSearchUser)" >移除</el-button>
+                <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)" disabled>移除</el-button>
               </div>
             </div>
             <!--搜索用户弹出框 end------------------------------------------------------------>
@@ -943,11 +951,25 @@
           <!--通讯录列表 start------------------------------------------------------------>
           <div class="searchUserBox">
             <!-- <div class="searchNameEnglish">A</div> -->
-            <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index">
-              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)"></el-checkbox>
+            <!--群主-->
+            <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)==Number(myUserId)">
+              <!-- {{ item.friend_id }}
+              {{ creatorId }} -->
+              <!-- <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox> -->
+              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId)"></el-checkbox>
+              <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+              <img src="@/assets/chat/user/admin.png" v-else>
+              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+              <div class="searchUserName" v-else>
+                {{item.user_name}}
+              </div>
+            </div>
+            <!--非群主-->
+            <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)!=Number(myUserId)">
+              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId) || isGroupUser(item.friend_id)"></el-checkbox>
               <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
               <img src="@/assets/chat/user/admin.png" v-else>
-              <div class="searchUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchUserName" v-else>
                 {{item.user_name}}
               </div>
@@ -965,11 +987,12 @@
               <div class="searchWindowUserIcon">
                 <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                 <img src="@/assets/chat/user/admin.png" v-else>
+                <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
                 <div class="searchWindowDeleteUser" @click="editRemoveGroupUser(item.user_id)" v-if="Number(creatorId)==Number(myUserId)&&item.user_id!=myUserId">
                   <i class="el-icon-close"></i>
                 </div>
               </div>
-              <div class="searchWindowUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchWindowUserName" v-else-if="item.user_name!=null">{{item.user_name}}</div>
               <div class="searchWindowUserName" v-else>未知用户</div>
             </div>
@@ -989,8 +1012,8 @@
         <div>
           <el-form :model="form" ref="form" autocomplete="off" label-position="left">
             <div class="formDiv">
-              <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
-                <el-input v-model="addform.remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
+              <el-form-item label="验证消息" :label-width="formLabelWidth" class="custom-align-right">
+                <el-input v-model="addform.remark" autocomplete="off"  placeholder="请输入"></el-input>
               </el-form-item>
             </div> 
           </el-form>
@@ -1017,7 +1040,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/admin.png" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.user_name}}</div>
                   </div>
                 </div>
@@ -1032,7 +1055,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/group.jpg" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.name}}</div>
                   </div>
                 </div>
@@ -1062,7 +1085,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/admin.png" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.user_name}}</div>
                   </div>
                 </div>
@@ -1077,7 +1100,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/group.jpg" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.name}}</div>
                   </div>
                 </div>
@@ -1486,6 +1509,8 @@ export default {
             if(flag==true){
               //如果存在，则选中该会话
               that.selectConversation(SeleteItem)
+            }else{
+              that.$message.error('创建会话失败，请重新从通讯录发起会话！')
             }
             
           }).catch(() => {
@@ -2002,8 +2027,12 @@ export default {
     //2.4.2 加入群聊
     joinGroup(){
       this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
-        this.$message.success('加入群聊成功!')
-        this.addGroupWindow = false;
+        if(res.code=='200'){
+          this.$message.success('加入群聊成功!')
+          this.addGroupWindow = false;
+        }else{
+          this.$message.error(res.message)
+        }
       }).catch(() => {
         this.$message.error('加入群聊失败!')
       })
@@ -2027,6 +2056,7 @@ export default {
         }
       }
     },
+    //2.4.4 分享群聊
     shareMyGroup(){
       console.log(this.shareGroupId)
       if(this.shareGroupId!=''){
@@ -2071,6 +2101,16 @@ export default {
       console.log("当前选中的tab name:", tabName);
       this.shareGroupActive = tabName;
     },
+    //2.4.5 判断该成员是否在群聊中
+    isGroupUser(id){
+      let flag = false;
+      for(let item of this.groupUserList){
+        if(item.user_id==id){
+          flag = true;
+        }
+      }
+      return flag;
+    },
     //2.群聊 end---------------------------------------->
 
     //3.全局应用 start---------------------------------------->
@@ -2154,10 +2194,11 @@ export default {
       const isRar = file.type === 'application/x-rar-compressed';
       const isZip = file.type === 'application/x-zip-compressed';
       const isTxt = file.type === 'text/plain';
+      const isPdf = file.type === 'application/pdf';
       //文件大小不能超过2M
       const isLt2M = file.size / 1024 / 1024 < 2;
 
-      if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip) {
+      if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip && !isPdf) {
         this.$message.error('该文件类型不允许上传!');
         return false;
       }
@@ -2197,38 +2238,120 @@ export default {
     handleIncomingMessage(event) {
       const message = JSON.parse(event.data);
       console.log("监听消息：",message)
-     
-      if(Number(this.receiverId) == Number(message.receiver_id)){
-        //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
-        let receiveMessage = {
-          action:"said",//是谁说的
-          user_avatar:message.user_avatar,//头像
-          content:message.content,//内容
-          msg_type:message.msg_type,//消息类型
-        }
-        console.log("回显自己的消息:"+this.receiverId,message.receiver_id)
-        console.log(message)
-        //消息添加到聊天记录
-        this.chatrecords.push(receiveMessage);
-        // 确保 Vue 能够检测到数组的变化
-        //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
-        console.log(this.chatrecords)
-        //滚动条滚动到底部
-        this.scorllBottom();
-      }else if(Number(this.receiverId) == Number(message.user_id)){
-        let receiveMessage = {
-          action:"recieved",//是谁说的
-          receiver_avatar:message.user_avatar,//头像
-          content:message.content,//内容
-          msg_type:message.msg_type,//消息类型
-        }
-        //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
-        //消息添加到聊天记录
-        console.log("来自单聊消息:"+this.receiverId,message.user_id)
-        this.chatrecords.push(receiveMessage);
-        console.log(message)
+
+      console.log(message.receiver_id.length == 18)
+      //第一步：先判断是否为群消息
+      if (message.receiver_id && message.receiver_id.length == 18) {
+        //第二步：判断当前接收的消息是否显示到聊天框中
+        if(Number(this.receiverId)==Number(message.receiver_id)){
+          console.log("当前消息为群消息，并且可以显示到当前的会话框中！")
+          //18位就是群聊
+          if(Number(this.myUserId) == Number(message.user_id)){
+            //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
+            let receiveMessage = {
+              action:"said",//自己说的
+              user_avatar:message.user_avatar,//头像
+              content:message.content,//内容
+              msg_type:message.msg_type,//消息类型
+            }
+            console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+            console.log(message)
+            //消息添加到聊天记录
+            this.chatrecords.push(receiveMessage);
+            // 确保 Vue 能够检测到数组的变化
+            //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+            console.log(this.chatrecords)
+            //滚动条滚动到底部
+            this.scorllBottom();
+          }else{
+            let receiveMessage = {
+              action:"recieved",//对方说的
+              receiver_avatar:message.user_avatar,//头像
+              content:message.content,//内容
+              msg_type:message.msg_type,//消息类型
+            }
+            //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
+            //消息添加到聊天记录
+            console.log("来自单聊消息:"+this.receiverId,message.user_id)
+            this.chatrecords.push(receiveMessage);
+            console.log(message)
+            //滚动条滚动到底部
+            this.scorllBottom();
+          }
+        }else{
+          console.log("当前消息为群消息，但是用户未开启此聊天窗口！")
+        }
+      }else{
+        //当前的单聊消息是自己发的，回显到聊天框中
+        if(Number(this.receiverId)==Number(message.receiver_id)){
+          //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
+          let receiveMessage = {
+            action:"said",//自己说的
+            user_avatar:message.user_avatar,//头像
+            content:message.content,//内容
+            msg_type:message.msg_type,//消息类型
+          }
+          console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+          console.log(message)
+          //消息添加到聊天记录
+          this.chatrecords.push(receiveMessage);
+          // 确保 Vue 能够检测到数组的变化
+          //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+          console.log(this.chatrecords)
+          //滚动条滚动到底部
+          this.scorllBottom();
+        }else{
+          //判断要回显的内容是不是在群聊
+          if(Number(message.receiver_id.length) == 18){
+            console.log("当前是单聊消息，你选择的是单聊框，可以回显！")
+            let receiveMessage = {
+              action:"recieved",//对方说的
+              receiver_avatar:message.user_avatar,//头像
+              content:message.content,//内容
+              msg_type:message.msg_type,//消息类型
+            }
+            console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+            console.log(message)
+            //消息添加到聊天记录
+            this.chatrecords.push(receiveMessage);
+            // 确保 Vue 能够检测到数组的变化
+            //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+            console.log(this.chatrecords)
+            //滚动条滚动到底部
+            this.scorllBottom();
+          }else{
+            // console.log(this.receiverId)
+            // console.log(message.receiver_id,message.user_id)
+            // console.log("当前是单聊消息，但是你选择的是群聊框，该条消息不能回显！")
+            if(this.receiverId!=message.receiver_id&&this.receiverId!=message.user_id){
+              //收到单聊消息，但是单聊消息不属于当前的聊天窗口
+              console.log("当前单聊消息不属于当前的聊天窗口，不回显！")
+            }else{
+              if(this.receiverId==message.user_id){
+                console.log("当前单聊消息属于当前的聊天窗口，回显！")
+                let receiveMessage = {
+                  action:"recieved",//对方说的
+                  receiver_avatar:message.user_avatar,//头像
+                  content:message.content,//内容
+                  msg_type:message.msg_type,//消息类型
+                }
+                console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+                console.log(message)
+                //消息添加到聊天记录
+                this.chatrecords.push(receiveMessage);
+                // 确保 Vue 能够检测到数组的变化
+                //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+                console.log(this.chatrecords)
+                //滚动条滚动到底部
+                this.scorllBottom();
+              }
+            }
+          } 
+
+
+          
+        }
       }
-      
     },
     // 5.2 发送消息
     sendUserMessage() {
@@ -2842,6 +2965,8 @@ export default {
               background: #5570F1;
               position: relative;
               min-height: 50px;
+              word-wrap:break-word;
+              word-break:break-all;
             }
             .otherUserMessageText::before {
               content: '';
@@ -2879,6 +3004,9 @@ export default {
               position: relative;
               min-height: 50px;
               cursor: pointer;
+              word-wrap:break-word;
+              word-break:break-all;
+              //width: 100%;
             }
             .meUserMessageText::before {
               content: '';
@@ -2989,7 +3117,7 @@ export default {
         .rightSlideSearch {
           padding: 30px 25px 0 25px;
           height: 66px;
-          overflow: hidden;
+          //overflow: hidden;
           position: relative;
           .searchFriendBox {
             position: absolute;
@@ -3237,7 +3365,20 @@ export default {
               .el-dropdown-link {
                 width: 58px;
                 height: 58px;
-                
+                position: relative;
+                .rightSlideUserGroupLeader{
+                  font-size: 12px;
+                  color: #FEAF50;
+                  background: #FFEAD1;
+                  width: 36px;
+                  height: 20px;
+                  border-radius: 4px;
+                  position: absolute;
+                  bottom: 0;
+                  right: -10px;
+                  text-align: center;
+                  line-height: 20px;
+                }
               }
               .addUserIcon {
                 width: 58px;
@@ -3314,9 +3455,18 @@ export default {
               overflow: hidden;
               font-size: 18px;
               color: #999;
-              cursor: pointer;
-              white-space: nowrap;
-              text-overflow: ellipsis;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              img {
+                cursor: pointer;
+              }
+              .groupChatTextContent {
+                width: 300px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
             }
           }
         }
@@ -3682,6 +3832,19 @@ export default {
               top: -3px;
               cursor: pointer;
             }
+            .rightSlideUserGroupLeader{
+              font-size: 12px;
+              color: #FEAF50;
+              background: #FFEAD1;
+              width: 36px;
+              height: 20px;
+              border-radius: 4px;
+              position: absolute;
+              bottom: 0;
+              right: -10px;
+              text-align: center;
+              line-height: 20px;
+            }
             img {
               width: 58px;
               height: 58px;

src/views/chat/topic.vue

@@ -70,7 +70,7 @@
                 <div v-if="scope.row.type==3">讨论</div>
               </template>
             </el-table-column>
-            <el-table-column prop="user_name" label="作者" width=""></el-table-column>
+            <el-table-column prop="author" label="作者" width=""></el-table-column>
             <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
             <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
             <el-table-column prop="status" label="状态" width="">
@@ -85,7 +85,7 @@
                 <div class="listBtnBox">
                   <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-delete"></i>删除</div>
                   <div class="listEditBtn" @click="goEdit(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listMainBtn" @click="openEditWindow(scope.row.id)"><i class="el-icon-edit-outline"></i>审核</div>
+                  <div class="listMainBtn" @click="openEditWindow(scope.row.id)" v-if="$store.state.user.role_id==1||$store.state.user.role_id==21||$store.state.user.role_id==23"><i class="el-icon-edit-outline"></i>审核</div>
                 </div>
               </template>
             </el-table-column>
@@ -274,7 +274,7 @@ export default {
         id:this.editId + "",
         status:this.form.radio + ""
       }
-      this.$store.dispatch('chat/updateTopic',data).then(res=> {
+      this.$store.dispatch('chat/applyTopic',data).then(res=> {
         console.log(res)
         this.getData();
         this.auditStatus = false;

src/views/complaint/complaintList.vue

@@ -83,9 +83,10 @@
             <el-table-column prop="mobile" label="电话"></el-table-column>
             <el-table-column prop="status_name" label="状态"></el-table-column>
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
-            <el-table-column fixed="right" label="操作" width="120" header-align="center">
+            <el-table-column fixed="right" label="操作" width="200" header-align="center">
               <template slot-scope="scope">
                 <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="delRow(scope.row.id)" v-if="ifAdmin == true"><i class="el-icon-delete"></i>删除</div>
                   <div class="listEditBtn" @click="editRow(scope.row)"><i class="el-icon-edit-outline"></i>编辑</div>
                 </div>
               </template>
@@ -225,11 +226,12 @@
             <el-radio-group v-model="form.status">
               <!-- <el-radio label="100">待审核</el-radio> -->
               <el-radio label="101">已接案</el-radio>
+              <el-radio label="127">审核中</el-radio>
               <el-radio label="102">已拒绝</el-radio>
               <el-radio label="103">已完结</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="备注信息：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+          <el-form-item label="拒绝原因：" :label-width="formLabelWidth" class="custom-align-right" prop="reason" v-if="form.status==102">
             <el-input type="textarea" v-model="form.reason" class="custom-textarea" placeholder="请输入备注信息"></el-input>
           </el-form-item>
         </div>
@@ -301,6 +303,7 @@ export default {
       typeData:[],//所有类型
       typeLevelData:[],//所有类型进度
       statusData:[],//所有状态 
+      ifAdmin:false,//是否为管理员
 
       //暂存所有进度
       allNetureLevelData:[],//性质
@@ -366,6 +369,8 @@ export default {
         status:[{required:true,trigger:'blur',validator:validateEmpty}],
         //身份证不能为空
         id_card:[{required:true,trigger:'blur',validator:validateNull}],
+        //拒绝原因不能为空
+        reason:[{required:true,trigger:'blur',validator:validateEmpty}],
       },
       //弹出框中的表单设置 end ------------------------------------------------------------>
     }
@@ -397,6 +402,9 @@ export default {
             case 103:
               item.status = "已完结";
               break;
+            case 127:
+              item.status = "审核中";
+              break;
             default:
               item.status = "";
               break;
@@ -722,6 +730,9 @@ export default {
             case "已完结":
               this.form.status = "103";
               break;
+            case "审核中":
+              this.form.status = "127";
+              break;
             default:
               this.form.status = "0"; // 可选：处理未定义的状态
               break;
@@ -754,6 +765,41 @@ export default {
       this.form.nature_name3 = "";
       this.form.other = "";
     },
+    //删除投诉举报数据
+    delRow(id){
+      let data = {
+        id:id,
+        is_admin:1
+      }
+      //id
+      //is_admin
+      this.$confirm('确定要删除本条投诉信息吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('complaint/delLetterOfComplaint',data).then(res=> {
+          if(res.code == 200){
+            this.$message({
+              type: 'success',
+              message: '删除成功！'
+            });
+            this.getData();
+          }else{
+            this.$message({
+              type: 'warning',
+              message: res.msg
+            });
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
     //提交编辑
     editData(){
       //判断什么时候需要需要提交other
@@ -805,6 +851,12 @@ export default {
     this.getData();
     //查询状态
     this.getStatus();
+    //是管理员再显示删除按钮
+    if(this.$store.state.user.role_id == 24){
+      this.ifAdmin = true;
+    }else{
+      this.ifAdmin = false;
+    }
   }
 }
 </script>

src/views/news/creatNews.vue

@@ -18,7 +18,7 @@
           </el-form-item>
           <div v-if="form.islink==true"> 
             <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的导航池名称" :props="parentData" filterable clearable></el-cascader>
             </el-form-item>
             <el-form-item label="外链地址：" prop="linkurl" class="custom-align-right">
               <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入外链地址"></el-input>
@@ -29,10 +29,10 @@
           </div>
           <div v-if="form.islink==false">
             <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的导航池名称" :props="parentData" filterable clearable></el-cascader>
             </el-form-item>  
             <el-form-item label="推荐等级：" class="custom-align-right">
-              <el-select v-model="form.level" placeholder="请选择推荐等级..">
+              <el-select v-model="form.level" clearable placeholder="请选择推荐等级..">
                 <el-option label="头条" :value="1"></el-option>
                 <el-option label="轮播图" :value="2"></el-option>
                 <el-option label="推荐图" :value="3"></el-option>
@@ -144,7 +144,7 @@
               </div>
             </div>
             <div v-if="form.is_original==1">
-              <el-form-item label="来源名称：" prop="linkurl" class="custom-align-right">
+              <el-form-item label="来源名称：" prop="copyfrom" class="custom-align-right">
                 <el-input v-model="form.copyfrom" autocomplete="off" placeholder="请输入来源名称" disabled="disabled"></el-input>
               </el-form-item>
             </div>
@@ -182,6 +182,9 @@ import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
 // 注册 Image Resize 模块
 Quill.register('modules/imageResize', ImageResize);
 
+//解决富文本样式居中不显示
+import 'quill/dist/quill.core.css';
+
 export default {
   components: {
     quillEditor,
@@ -376,7 +379,10 @@ export default {
       }else{
         this.form.islink = 0;
       }
-
+      //如果推荐等级为空，则设置为0
+      if(this.form.level==""){
+        this.form.level = 0;
+      }
       //先进行验证
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -539,6 +545,10 @@ export default {
       if(this.form.islink==1){
         this.cleatForm(1)
       }
+      //如果推荐等级为空，则设置为0
+      if(this.form.level==""){
+        this.form.level = 0;
+      }
       //添加要修改的id
       this.form.id = this.editId;
       //先进行验证
@@ -764,6 +774,40 @@ export default {
   .ql-editor {
     height: 320px;
   }
+
+  /* 富文本对齐方式 */
+	.ql-align-center{
+    text-align: center;
+  }
+  .ql-align-right{
+    text-align: right;
+  }
+  .ql-indent-1{
+    padding-left: 16px;
+  }
+  .ql-indent-2{
+    padding-left: 32px;
+  }
+  .ql-indent-3{
+    padding-left: 48px;
+  }
+  .ql-indent-4{
+    padding-left: 64px;
+  }
+  .ql-indent-5{
+    padding-left: 80px;
+  }
+  .ql-indent-6{
+    padding-left: 96px;
+  }
+  .ql-indent-7{
+    padding-left: 112px;
+  }
+  .ql-indent-8{
+    padding-left: 128px;
+  }
+
+
   //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
   ::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;

src/views/profile/index.vue

@@ -40,8 +40,8 @@
                       <!--图片上传组件 end ------------------------------------------------------------>
                     </div>
                   </el-form-item>
-                  <el-form-item label="昵称：" :label-width="formLabelWidth" prop="real_name" class="custom-align-right">
-                    <el-input v-model="infoform.real_name" autocomplete="off" placeholder="请输入用户昵称.."></el-input>
+                  <el-form-item label="昵称：" :label-width="formLabelWidth" prop="nickname" class="custom-align-right">
+                    <el-input v-model="infoform.nickname" autocomplete="off" placeholder="请输入用户昵称.."></el-input>
                   </el-form-item>
                 </div>
               </div>
@@ -173,13 +173,13 @@ export default {
       //修改用户信息
       infoform:{
         avatar:"",
-        real_name:""
+        nickname:""
       },
       avatarUrl:"",//头像缩略图
       hovering:false,//鼠标悬浮状态
       infoFormRules:{
         avatar: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }]
+        nickname: [{ required: true, trigger: 'blur', validator: validateEmpty }]
       },
       //修改密码
       form:{
@@ -211,7 +211,7 @@ export default {
         console.log(res)
         this.avatarUrl = res.data.avatar;
         this.infoform.avatar = res.data.avatar;
-        this.infoform.real_name = res.data.real_name;
+        this.infoform.nickname = res.data.nickname;
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -325,7 +325,7 @@ export default {
               this.$message.success("修改成功！");
               //更新store中的头像和昵称
               this.$store.commit('user/SET_AVATAR', this.infoform.avatar);
-              this.$store.commit('user/SET_NAME', this.infoform.real_name);
+              this.$store.commit('user/SET_NAME', this.infoform.nickname);
             }
           }).catch(() => {  
             this.$message.error('网络错误，请重试！');

src/views/role/components/userAdmin.vue

@@ -197,29 +197,33 @@ export default {
     addData(){
       console.log(this.form);
       //1.先验证用户是否已经存在
-      this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
-        if(res.code==0){
-          //如果code为0表示用户不存在，提交表单
-          this.$store.dispatch('userMember/createUser',this.form).then(res=>{
-            console.log(res);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
+            if(res.code==0){
+              //如果code为0表示用户不存在，提交表单
+              this.$store.dispatch('userMember/createUser',this.form).then(res=>{
+                console.log(res);
+                this.$message({
+                  type: 'success',
+                  message: '用户添加成功！'
+                });
+                this.goList();
+              })
+            }else if(res.code==200){
+              //如果code==200 表示用户存在，阻止进一步提交
+              this.$message({
+                type: 'warning',
+                message: '该账号已被注册，请更换其他账号！'
+              });
+            }
+          }).catch(error=>{
             this.$message({
-              type: 'success',
-              message: '用户添加成功！'
+              type: 'info',
+              message: '网络错误，请重试！'
             });
-            this.goList();
           })
-        }else if(res.code==200){
-          //如果code==200 表示用户存在，阻止进一步提交
-          this.$message({
-            type: 'warning',
-            message: '该账号已被注册，请更换其他账号！'
-          });
         }
-      }).catch(error=>{
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
       })
     },
     //提交表单 start ------------------------------------------------------------>
@@ -245,32 +249,36 @@ export default {
     },
     //修改用户
     editData(){
-      this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
-        if(res.code==0){
-          this.form.id = this.editId;
-          delete this.form.password;
-          delete this.form.confirm_password;
-          //如果code为0表示用户不存在，提交表单
-          this.$store.dispatch('userMember/updateUser',this.form).then(res=>{
-            console.log(res);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
+            if(res.code==0){
+              this.form.id = this.editId;
+              delete this.form.password;
+              delete this.form.confirm_password;
+              //如果code为0表示用户不存在，提交表单
+              this.$store.dispatch('userMember/updateUser',this.form).then(res=>{
+                console.log(res);
+                this.$message({
+                  type: 'success',
+                  message: '用户添加成功！'
+                });
+                this.goList();
+              })
+            }else if(res.code==200){
+              //如果code==200 表示用户存在，阻止进一步提交
+              this.$message({
+                type: 'warning',
+                message: '该账号已被注册，请更换其他账号！'
+              });
+            }
+          }).catch(error=>{
             this.$message({
-              type: 'success',
-              message: '用户添加成功！'
+              type: 'info',
+              message: '网络错误，请重试！'
             });
-            this.goList();
           })
-        }else if(res.code==200){
-          //如果code==200 表示用户存在，阻止进一步提交
-          this.$message({
-            type: 'warning',
-            message: '该账号已被注册，请更换其他账号！'
-          });
         }
-      }).catch(error=>{
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
       })
     },
     //重置密码

src/views/role/components/userDefault.vue

@@ -118,11 +118,10 @@
           <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile" class="custom-align-right">
             <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
           </el-form-item>
-          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right" v-if="form.long_time==false">
+          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right" v-if="form.long_time==0">
             <el-date-picker
               v-model="timeList"
               type="daterange"
-              :disabled="form.long_time === 1"
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
@@ -133,7 +132,6 @@
           <div class="timeBox" v-else>
             <div class="timeTitle"><span>*</span>有效期：</div>
             <el-date-picker
-              v-model="timeList"
               type="daterange"
               :disabled="form.long_time === 1"
               range-separator="至"
@@ -581,7 +579,12 @@ export default {
           this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
             if(res.code==0){
               console.log(this.form);
-              this.form.native_place_arr_id = JSON.parse(this.form.native_place_arr_id);
+              
+              if(this.form.native_place_arr_id == ""){
+                this.form.native_place_arr_id = [];
+              }else{
+                this.form.native_place_arr_id = JSON.parse(this.form.native_place_arr_id);
+              }
 
               //2.设置修改的用户id
               this.form.id = this.editId;
@@ -724,4 +727,4 @@ export default {
     width: 100%; /* 禁止用户拖拽调整大小 */
   }
   //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+</style>

src/views/role/roleList.vue

@@ -145,7 +145,7 @@ export default {
         role_name:"",//角色名称
         rule:[],//权限
         remark:"",//职能描述
-        sort:""//排序
+        sort:0//排序
       },
       expandedKeys:[],//展开的节点  
       checkedKeys:[],//选中的节点 
@@ -276,6 +276,10 @@ export default {
     //4.添加 start ------------------------------------------------------------>
     addData(){
       this.form.id = this.editId;
+      //如果排序不填，默认排序传递数字
+      if(this.form.sort == ""){
+        this.form.sort = 0;
+      }
       //半选的节点
       let supplement = [];
       let allKeys = this.$refs.tree.getHalfCheckedNodes();
@@ -369,6 +373,10 @@ export default {
     //提交编辑
     editData(){
       this.form.id = this.editId;
+      //如果排序不填，默认排序传递数字
+      if(this.form.sort == ""){
+        this.form.sort = 0;
+      }
       //半选的节点
       let supplement = [];
       let allKeys = this.$refs.tree.getHalfCheckedNodes();

src/views/template/page/pageIndex-copy.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="grid-layout-demo">
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>您选择的板块将展示到此区域</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :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 == 'imgTitleSector'" class="moduleBox">
+            <imgTitleSector :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>
+        </div>
+      </grid-item>
+    </grid-layout>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+//引入vue-grid-layout拖拽效果
+import { GridLayout, GridItem } from 'vue-grid-layout';
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+export default {
+  components: {
+    //拖拽组件
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 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.模块操作 end ------------------------------------------------------------>
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  //模块 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: 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;
+        }
+      }
+    }
+  }
+  .grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+  }
+  //栅格布局 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/pageIndex-copy2.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="grid-layout-demo">
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>您选择的板块将展示到此区域</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
+      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :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 == 'imgTitleSector'" class="moduleBox">
+            <imgTitleSector :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>
+        </div>
+      </grid-item>
+    </grid-layout>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+//引入vue-grid-layout拖拽效果
+import { GridLayout, GridItem } from 'vue-grid-layout';
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+export default {
+  components: {
+    //拖拽组件
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 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.模块操作 end ------------------------------------------------------------>
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  //模块 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: 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;
+        }
+      }
+    }
+  }
+  .grid-layout {
+    grid-gap: 0;
+    row-gap: 0;
+  }
+  //栅格布局 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/pageIndex.vue

@@ -1,68 +1,81 @@
 <template>
-  <div class="grid-layout-demo">
-    <div class="FixedModuleBox">
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <headSector />
     </div>
-    <div class="FixedModuleBox">
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <menuSector />
     </div>
-    <div class="FixedMainModuleBox" v-if="this.$store.state.template.pageData.index.length == 0">
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
       <img src="@/assets/template/creat.png">
-      <div>您选择的板块将展示到此区域</div>
+      <div>请点击一个左侧板块，开始您的网站创建</div>
     </div>
-    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true">
-      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :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">
-            <!-- <span><i class="el-icon-setting"></i></span> -->
-            <span @click="moveIndexModule(item.i,'up')"><i class="el-icon-upload2"></i></span>
-            <span @click="moveIndexModule(item.i,'down')"><i class="el-icon-download"></i></span>
-            <span @click="deleteIndexModule(item.i)"><i class="el-icon-delete"></i></span>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.index" 
+        :layout.sync="this.$store.state.template.pageData.index"
+        :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.index" 
+          :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 == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :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>
           </div>
-          <!-- 页头板块 -->
-          <!-- <div v-if="item.type == 'headSector'" class="moduleBox">
-            <headSector />
-          </div> -->
-          <!-- 导航板块 --> 
-          <!-- <div v-if="item.type == 'menuSector'" class="moduleBox">
-            <menuSector :id="item.i"/>
-          </div> -->
-          <!-- 图片标题模块 --> 
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :id="item.i"/>
-          </div>
-          <!-- 焦点图模块 --> 
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :id="item.i"/>
-          </div>
-          <!-- 多图模块 --> 
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :id="item.i"/>
-          </div>
-          <!-- 评论模块 --> 
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :id="item.i"/>
-          </div>
-          <!-- 双联文章列表模块 --> 
-          <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :id="item.i"/>
-          </div>
-          <!-- 纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :id="item.i"/>
-          </div>
-          <!-- 友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :id="item.i"/>
-          </div>
-          <!-- 页尾板块 --> 
-          <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
-            <footerSector />
-          </div> -->
-        </div>
-      </grid-item>
-    </grid-layout>
-    <div class="FixedModuleBox">
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
       <footerSector />
     </div>
   </div>
@@ -72,27 +85,26 @@
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-import { GridLayout, GridItem } from 'vue-grid-layout';
+import {GridLayout, GridItem} from "vue-grid-layout";
 //页面公用组件 end------------------------------------------------------------>
 
 //自助建站组件 start------------------------------------------------------------>
 //style1
-import headSector from '../style/1/headSector.vue';
-import menuSector from '../style/1/menuSector.vue'; 
-import imgTitleSector from '../style/1/imgTitleSector.vue';
-import bannerSector from '../style/1/bannerSector.vue'; 
-import manyPictureSector from '../style/1/manyPictureSector.vue'; 
-import commentSector from '../style/1/commentSector.vue'; 
-import listSector from '../style/1/listSector.vue';
-import onlyImgSector from '../style/1/onlyImgSector.vue';
-import friendShipLinkSector from '../style/1/friendShipLinkSector.vue';
-import footerSector from '../style/1/footerSector.vue';
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
 //自助建站组件 end------------------------------------------------------------>
 
+
 export default {
   components: {
-    //拖拽组件
     GridLayout,
     GridItem,
     //板块组件 style1
@@ -119,6 +131,20 @@ export default {
       //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上一步  
@@ -140,12 +166,16 @@ export default {
 
     //1.模块操作 start ------------------------------------------------------------>
     //1.1 移动模块
-    moveIndexModule(i,moveType){
-      this.$store.commit('template/moveIndexModule',{i:i,moveType:moveType});
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
     },
     //1.2 删除模块
-    deleteIndexModule(i){
-      this.$store.commit('template/deleteIndexModule',{i:i});
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
     },
     //1.3 打开弹出框
     openWindow(item) {
@@ -157,100 +187,130 @@ export default {
       this.windowStatus = false;
     }
     //1.模块操作 end ------------------------------------------------------------>
-  },
-  mounted(){
-
   }
 }
 </script>
 
 <style scoped lang="less">
-  //模块 start------------------------------------------------------------> 
-  .moduleBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    justify-content: space-between;
-    box-sizing: border-box;
-    border: 2px dashed #19499F;
-  }
-  //固定的模块
-  .FixedModuleBox {
-    width: 100%;
-    border: 2px dashed #19499F;
-  }
-  .FixedMainModuleBox {
-    width: 100%;
-    border: 2px dashed #19499F;
-    font-size: 18px;
-    color: #999;
-    text-align: center;
-    img {
-      margin-bottom: 20px;
-    }
-    padding: 100px;
-    background: #F5F7FB;
+//拖拽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;
   }
-  //模块 end------------------------------------------------------------> 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
+  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: 0;
+    z-index: 99;
     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 {
-        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;
-        }
+    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;
       }
     }
   }
-  .grid-layout {
-    grid-gap: 0;
-    row-gap: 0;
-  }
-  //栅格布局 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>  
-
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 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/componentWindow.vue

@@ -1,31 +1,200 @@
 <template>
   <div class="componentWindowBox">
     <!--开发助手-->
-    <div class="testAssistant">
+   <div class="testAssistant">
       <div class="testAssistantTitle">
-        开发助手：当前窗口在正式版本中将被移除。
+        代码助手：
       </div>
       <div class="testAssistantContent">
-        <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
-        <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
-        <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
-        <div class="testAssistantContentItem"><span>组件style:</span>{{this.$store.state.template.pageData.index[id].sectorData.componentList[sort].component_style}}</div>
+        <div class="testAssistantContentItem">
+          <div>当前板块id:</div>
+          <div>{{this.$store.state.template.editSectorId}}</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前板块所在的页面:</div>
+          <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+          <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+          <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+          <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+          <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+          <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
+          <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前组件在此板块中的位置:</div>
+          <div>{{this.$store.state.template.editComponentSort}}</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前板块在Json数据中的位置:</div>
+          <div>{{this.$store.state.template.editDataSort}}</div>
+        </div>
+        <!--base0.0.1 如果展示原组件样式 会导致删除的时候 找不到content的数据非常奇怪 但是什么都不影响-->
+        <!-- <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div> -->
+        <div class="testAssistantContentItem">
+          <div>当前组件样式:</div>
+          <div>{{this.$store.state.template.editComponentStyle}}</div>
+        </div>
       </div>
     </div>
     <div class="componentStyleBox">
       <div class="componentStyleBoxContent">
-        <!--3=广告组件-->
+        <!--1.网站核心大标题组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/mainStyle1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/mainStyle2.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--1.网站核心大标题组件 end---------------------------------------->
+        <!--2.板块文字标题 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/title1.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--2.板块文字标题 end---------------------------------------->
+        <!--3.广告组件 start---------------------------------------->
         <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
           <table>
             <tr>
-              <td><div class="componentScrollBoxItem active"><img src="@/assets/template/component/style1imgTitle.png"/></div></td>
-              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style2imgTitle.png"/></div></td>
-              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style3imgTitle.png"/></div></td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/style1imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/style2imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                  <img src="@/assets/template/component/style3imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                  <img src="@/assets/template/component/style4imgTitle.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--4.banner组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/banner_pic1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/banner_pic2.png"/>
+                </div>
+              </td>
             </tr>
           </table>
         </div>
+        <!--4.banner组件 end---------------------------------------->
+        <!--5.tabs start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/tabsList1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/tabsList2.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--5.tabs end---------------------------------------->
+        <!--6.list列表组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/list1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/list2.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                  <img src="@/assets/template/component/list3.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--6.list列表组件 end---------------------------------------->
+        <!--7.staticHtml静态组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/fivePicture.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--7.staticHtml静态组件 end---------------------------------------->
+        <!--8.表单组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/form1.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--8.表单组件 end---------------------------------------->
+        <!--9.友情链接组件 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 9" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/linkStyle1.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--9.友情链接组件 end---------------------------------------->
       </div>
-
     </div>
     <div class="componentWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>
@@ -37,14 +206,7 @@
 <script>
 export default {
   props: {
-    id:{
-      type:Number,
-      default:0
-    },
-    sort:{
-      type:Number,
-      default:0
-    }
+    
   },
   data() {
     return {
@@ -53,11 +215,22 @@ export default {
     }
   },
   methods: {
+    //选择组件样式
+    selectUseStyleNumber(number){
+      this.$store.commit('template/selectComponentStyleNumber',number);
+    },
+    //关闭选择组件样式弹出框
     closeEditWindow(){
       this.$store.commit('template/closeComponentStyleStatus');
     },
+    //提交编辑的数据
     submitData(){
-      
+      //提交修改
+      this.$store.commit('template/setComponentStyleNumber');
+      //关闭窗口
+      this.$store.commit('template/closeComponentStyleStatus');
+      //当前保存完了的数据
+      //console.log(this.$store.state.template.pageData);
     }
   },
   mounted() {
@@ -71,7 +244,7 @@ export default {
     .componentStyleBox {
       height: 220px;
       margin-bottom: 20px;
-      overflow-x: scroll;
+      overflow-x: auto;
       overflow-y: hidden;
       clear: both;
       .componentScrollBox {
@@ -87,17 +260,19 @@ export default {
           margin-right: 10px;
           background: #F5F7FB;
           border:1px solid #F5F7FB;
- 
           img {
             width: 100%;
           }
           &:hover {
             border:1px solid #19499F;
+            background: #e5e5ff;
             cursor: pointer;
           }
+          transition: all 0.3s;
         }
         .active {
           border:1px solid #19499F;
+          background: #e5e5ff;
         }
       }
     }

src/views/template/public/convertBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="templateEditBtnBox" @click="openComponentListWindow">
+  <div class="templateEditBtnBox" @click="openComponentListWindow" v-if="this.$store.state.template.previewStatus==false">
     <i class="el-icon-scissors"></i>
   </div>
 </template>
@@ -11,6 +11,10 @@ export default {
       type:Number,
       default:0
     },
+    dataSort: {
+      type:Number,
+      default:0
+    },
     sort:{
       type:Number,
       default:0
@@ -27,9 +31,21 @@ export default {
   },
   methods: {
     openComponentListWindow(){
-      let style = this.$store.state.template.pageData.index[this.id].sectorData.componentList[this.sort].component_style;
+      //判断编辑的是哪个页面的组件style
+      let style = 0;
+      if(this.$store.state.template.pageStatus==1){
+        style = this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==2){}
+      if(this.$store.state.template.pageStatus==3){}
+      if(this.$store.state.template.pageStatus==4){}
+      if(this.$store.state.template.pageStatus==5){}
+      if(this.$store.state.template.pageStatus==6){}
+      if(this.$store.state.template.pageStatus==7){}
+
       let data = {
         id:this.id,
+        dataSort:this.dataSort,
         sort:this.sort,
         type:this.type,
         style:style
@@ -48,26 +64,24 @@ export default {
   .templateEditBtnBox {
     position: absolute;
     top: 0;
-    left: 30px;
+    left: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     margin: 5px;
-    color: #000;
-    background: #fff;
-    border: 1px solid #000;
+    color: #666;
+    background: rgba(255,255,255,0.5);
     border-radius: 5px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
     text-align: center;
-    font-size: 14px;
+    font-size: 30px;
     transition: all 0.3s;
     z-index: 999;
     &:hover {
-      color: #fff;
-      background: #000;
+      color: #333;
     }
   }
 </style>

src/views/template/public/editBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="templateEditBtnBox" @click="openEditWindow">
+  <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
     <i class="el-icon-setting"></i>
   </div>
 </template>
@@ -11,6 +11,10 @@ export default {
       type:Number,
       default:0
     },
+    dataSort: {
+      type:Number,
+      default:0
+    },
     sort:{
       type:Number,
       default:0
@@ -22,6 +26,10 @@ export default {
     size:{
       type:Number,
       default:0
+    },
+    y: {
+      type:Number,
+      default:0
     }
   },
   data() {
@@ -33,12 +41,19 @@ export default {
     openEditWindow(){
       let data = {
         id:this.id,
+        dataSort:this.dataSort,
         sort:this.sort,
         type:this.type,
-        size:this.size
+        size:this.size,
+        y:this.y
       }
       console.log(data);
+      //小助手
       this.$store.commit('template/setEditWindowStatus',data);
+      //设置组件回显数据
+      this.$store.commit('template/setComponentViewData',data);
+      //获取全部导航
+      this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
     }
   },
   mounted() {
@@ -57,20 +72,19 @@ export default {
     justify-content: center;
     cursor: pointer;
     margin: 5px;
-    color: #000;
-    background: #fff;
-    border: 1px solid #000;
+    color: #666;
+    //border: 1px solid #000;
     border-radius: 5px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
     text-align: center;
-    font-size: 14px;
+    font-size: 30px;
     transition: all 0.3s;
     z-index: 999;
+    background: rgba(255,255,255,0.5);
     &:hover {
-      color: #fff;
-      background: #000;
+      color: #333;
     }
   }
 </style>

src/views/template/public/editBtnCanNot.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="templateEditBtnBox" @click="openEditWindow">
+    <i class="el-icon-setting"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+      type:Number,
+      default:0
+    },
+    size:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    openEditWindow(){
+      let data = {
+        id:this.id,
+        sort:this.sort,
+        type:this.type,
+        size:this.size
+      }
+      console.log(data);
+      this.$store.commit('template/setEditWindowStatus',data);
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #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;
+    z-index: 999;
+    &:hover {
+      color: #fff;
+      background: #000;
+    }
+  }
+</style>

src/views/template/public/editWindow.vue

@@ -5,23 +5,67 @@
       <!--开发助手-->
       <div class="testAssistant">
         <div class="testAssistantTitle">
-          开发助手：当前窗口在正式版本中将被移除。
+          代码助手：
         </div>
         <div class="testAssistantContent">
-          <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
-          <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
-          <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
-          <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
+          <div class="testAssistantContentItem">
+            <div>当前板块id:</div>
+            <div>{{this.$store.state.template.editSectorId}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前板块所在的页面:</div>
+            <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+            <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+            <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+            <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+            <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件在此板块中的位置:</div>
+            <div>{{this.$store.state.template.editComponentSort}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件在此画布中的位置:</div>
+            <div>{{this.$store.state.template.editSectorY}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前板块在Json数据中的位置:</div>
+            <div>{{this.$store.state.template.editDataSort}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件的数据类型:</div>
+            <div v-if="this.$store.state.template.editComponentType == 1">新闻列表</div>
+            <div v-if="this.$store.state.template.editComponentType == 2">新闻选项卡</div>
+            <div v-if="this.$store.state.template.editComponentType == 3">广告</div>
+            <div v-if="this.$store.state.template.editComponentType == 4">友情链接</div>
+            <div v-if="this.$store.state.template.editComponentType == 6">静态html组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 7">文本</div>
+            <div v-if="this.$store.state.template.editComponentType == 8">评论组件</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>展示条数:</div>
+            <div>{{this.$store.state.template.editComponentSize}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>回显导航池:</div>
+            <div v-if="this.$store.state.template.editComponentType == 1||this.$store.state.template.editComponentType == 2">
+              <span v-if="this.$store.state.template.componentViewData.pid_arr.length == 0">暂未选择导航</span>
+              <span v-else>{{this.$store.state.template.componentViewData.pid_arr}}</span>
+            </div>
+            <div v-else>无需回显</div>
+          </div>
         </div>
       </div>
       <!--1.普通新闻类型-->
       <div v-if="this.$store.state.template.editComponentType == 1">
-        <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <el-form :model="form.type1data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="新闻列表" disabled/>
           </el-form-item>
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-cascader :key="oneParentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
+            <el-cascader :key="oneParentKey" v-model="form.type1data.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
@@ -34,8 +78,17 @@
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="新闻选项卡" disabled/>
           </el-form-item>
+          <!-- {{ this.$store.state.template.editWebsiteCategory }} -->
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-cascader :key="moreParentKey" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader>
+            <el-select v-model="form.type2data.pid_arr" multiple placeholder="请选择">
+              <el-option
+                v-for="item in this.$store.state.template.editWebsiteCategory"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <!-- <el-cascader :key="moreParentKey" @change="handleCascaderChange" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader> -->
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
@@ -48,8 +101,8 @@
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="广告" disabled/>
           </el-form-item>
-          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
-            <el-input v-model="form.type3data.adsName" placeholder="请输入广告位名称"/>
+          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+            <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
           </el-form-item>
         </el-form>
       </div>
@@ -75,7 +128,7 @@
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="文本" disabled/>
           </el-form-item>
-          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
+          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="titleName" class="custom-align-right">
             <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
           </el-form-item>
         </el-form>
@@ -88,7 +141,6 @@
           </el-form-item>
         </el-form>
       </div>
-
     </div>
     <div class="editWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>
@@ -98,6 +150,8 @@
 </template>
 
 <script>
+import Vue from 'vue';  // 导入 Vue
+//监听vuex中的值
 export default {
   props: {
 
@@ -121,7 +175,6 @@ export default {
     }
     return {
       formLabelWidth:"120px",
-      
       form:{
         //单导航新闻
         type1data:{
@@ -144,7 +197,8 @@ export default {
       },
       formRules:{
         pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
-        adsName: [{required:true,trigger:'blur',message:'请填写标题名称！',validator:validateEmpty}],
+        adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
+        titleName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}]
       },
       //获取单个导航id start---------------------------------------->
       oneParentKey:0,
@@ -176,51 +230,142 @@ export default {
       },
       //获取单个导航id end---------------------------------------->
       //获取多个导航id start---------------------------------------->
-      moreParentKey:0,
-      moreParentData: {
-        checkStrictly: true,
-        multiple: true,
-        lazy: true,
-        async lazyLoad (node, resolve) {
-          const { level, data } = node;
-          if (data && data.children && data.children.length !== 0) {
-            return resolve(node)
-          }
-          console.log(level)
-          let parentId = level == 0 ? 0 : data.value
-          let parames = {
-            'pid':parentId
-          }
-          self.$store.dispatch('pool/categoryList',parames).then(res=> {
-            if (res.data) {
-              const nodes = res.data.map(item => ({
-                value: item.id,
-                label: item.name,
-                leaf: level >= 3,
-                children: []
-              }))
-              resolve(nodes)
-            }
-          })
-        }
-      },
+      moreParen:[],
+      // base 0.0.1 无法回显多选导航池
+      // 这里不能使用级联选择器，因为这里只能选择同级导航，你选了不同级的导航后端就乱套了
+      // moreParentData: {
+      //   checkStrictly: true,
+      //   multiple: true,
+      //   lazy: true,
+      //   async lazyLoad (node, resolve) {
+      //     const { level, data } = node;
+      //     if (data && data.children && data.children.length !== 0) {
+      //       return resolve(node)
+      //     }
+      //     console.log(level)
+      //     let parentId = level == 0 ? 0 : data.value
+      //     let parames = {
+      //       'pid':parentId
+      //     }
+      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
+      //       if (res.data) {
+      //         const nodes = res.data.map(item => ({
+      //           value: item.id,
+      //           label: item.name,
+      //           leaf: level >= 3,
+      //           children: []
+      //         }))
+      //         resolve(nodes)
+      //       }
+      //     })
+      //   }
+      // },
       //获取导航id end---------------------------------------->
     };
   },
+  computed: {
+    // 映射 Vuex 的 state 到计算属性
+    // 监听导航池变化用于回显
+    getPid() {
+      return this.$store.state.template.componentViewData.pid_arr;
+    },
+    getadName(){
+      return this.$store.state.template.componentViewData.adName;
+    },
+    gettitleName(){
+      return this.$store.state.template.componentViewData.titleName;
+    }
+  },
+  watch: {
+    getPid(newVal, oldVal) {
+      console.log("导航池改变了！")
+      console.log(newVal, oldVal)
+      // 回显导航池 判断一下是单导航还是多导航
+      if(this.$store.state.template.editComponentType==1){
+        //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
+        this.form.type1data.pid_arr = newVal;
+        this.loadCascaderPath(newVal);
+      }
+      if(this.$store.state.template.editComponentType==2){ 
+        this.form.type2data.pid_arr = newVal;
+      }
+    },
+    getadName(newVal, oldVal) {
+      console.log("广告文字改变了！")
+      console.log(newVal, oldVal)
+      this.form.type3data.adName = newVal;
+    },
+    gettitleName(newVal, oldVal) {
+      console.log("标题文字改变了！")
+      console.log(newVal, oldVal)
+      this.form.type7data.titleName = newVal;
+    } 
+  },
   methods: {
     closeEditWindow(){
       this.$store.commit('template/closeEditWindowStatus');
     },
     submitData(){
+      //验证表单
       this.$refs.form.validate(valid => {
+        //构建提交的数据
+        let data = {
+          id:this.$store.state.template.editSectorId,//组件id
+          sort:this.$store.state.template.editComponentSort,//组件位置
+          dataSort:this.$store.state.template.editDataSort,//数据位置
+          type:this.$store.state.template.editComponentType,//组件类型
+          data:""//提交的数据
+        }
         if (valid) {
-          console.log("保存数据！")
-         
+          //判断当前提交的数据类型
+          //1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+          if(this.$store.state.template.editComponentType == 1){
+            data.data = this.form.type1data;
+          }
+          //2=tabs新闻选项卡
+          if(this.$store.state.template.editComponentType == 2){
+            data.data = this.form.type2data;
+          }
+          //3=广告
+          if(this.$store.state.template.editComponentType == 3){
+            data.data = this.form.type3data;
+          }
+          //7=文本
+          if(this.$store.state.template.editComponentType == 7){
+            data.data = this.form.type7data;
+          }
+          //第二步：提交数据
+          this.$store.commit('template/saveComponentData',data);
+          //第三步：关闭编辑窗口
+          this.$store.commit('template/closeEditWindowStatus');
         }
       })
-    }
+    },
+    //回显级联选择器
+    async loadCascaderPath(path, type) {
+      this.oneParentKey+=1;
+      // 如果是单选类型，path 是普通数组
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/categoryList',{pid:parentId}).then((res)=>{
+          const nodes = res.data.map(item => ({
+            value: item.id,
+            label: item.name,
+            leaf: level >= 4,
+            checked: true
+          }));
+          // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
+          if (level === path.length - 1) {
+            this.$nextTick(() => {
+              this.form.type1data.pid_arr = path;
+            });
+          }
+        });
+      }
+    },
   },
-  mounted() {
+  mounted() { 
     
   },
 };

src/views/template/style/1/bannerSector.vue

@@ -1,32 +1,67 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
-      <mainTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="6" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="1"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+        <mainTitleStyle1 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
+        <mainTitleStyle2 />
+      </div>
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
-        <banner :id="id" :sort="2"/>
+        <editBtn :id="id" :sort="1" :type="1" :size="3"/>
+        <convertBtn :id="id" :sort="1" :type="4"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+          <banner1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
+          <banner2Style />
+        </div>
       </div>
       <div class="NewsListBox">
-        <!-- <tabsNews :id="id" :sort="3"/> -->
-        <bgGreyNews :id="id" :sort="3"/>
+        <editBtn :id="id" :sort="2" :type="2" :size="5"/>
+        <convertBtn :id="id" :sort="2" :type="5"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+          <tabs1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
+          <tabs2Style />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import mainTitle from './components/mainTitle.vue'
+//编辑按钮
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+//标题组件
+import mainTitleStyle1 from './components/mainTitle/1.vue'
+import mainTitleStyle2 from './components/mainTitle/2.vue'
+//banner组件
 import banner from './components/banner.vue'
-import tabsNews from './components/tabsNews.vue'
-import bgGreyNews from './components/bgGreyNews.vue'
+import banner1Style from './components/banner/1.vue'
+import banner2Style from './components/banner/2.vue'
+//tabs组件
+import tabs1Style from './components/tabs/1.vue'
+import tabs2Style from './components/tabs/2.vue'
 
 export default {
   components: {
-    mainTitle,
+    //mainTitle,
     banner,
-    tabsNews,
-    bgGreyNews
+    editBtn,
+    convertBtn,
+    mainTitleStyle1,
+    mainTitleStyle2,
+    banner1Style,
+    banner2Style,
+    tabs1Style,
+    tabs2Style
   },
   props: {
     id:{
@@ -58,12 +93,12 @@ export default {
     
     .itemTopBox {
       position: relative;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
       transition: all 0.3s;
       width: 80%;
     }
     .itemBottomBox {
-      border: 1px dashed #5570F1;
+      
       width: 80%;
       display: flex;
       align-items: center;
@@ -72,14 +107,14 @@ export default {
       height: 300px;
       .bannerLayerBox {
         position: relative;
-        border: 1px dashed #5570F1;
+        //border: 2px dashed #999;
         width: 55%;
         height: 226px;
       }
       .NewsListBox {
         position: relative;
         width: 45%;
-        border: 1px dashed #5570F1;
+        border: 2px dashed #999;
         box-sizing: border-box;
         padding-left: 20px;
         height: 226px;

src/views/template/style/1/commentSector.vue

@@ -1,29 +1,54 @@
 <template>
   <div class="commentSectorBox">
     <div class="commentSectorBoxTitle">
-      <styleTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
     </div>
     <div class="commentSectorBoxContent">
       <div class="tabsCalendarNewsBox">
-        <tabsCalendarNews :id="id" :sort="2"/>
+        <editBtn :id="id" :sort="1" :type="1" :size="5"/>
+        <convertBtn :id="id" :sort="1" :type="5"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+          <tabs1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
+          <tabs2Style />
+        </div>
       </div>
       <div class="calendarBox">
-        <calendar :id="id" :sort="3"/>
+        <editBtn :id="id" :sort="2" :type="8" :size="1"/>
+        <convertBtn :id="id" :sort="2" :type="8"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+          <form1Style />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import styleTitle from './components/styleTitle.vue';
-import tabsCalendarNews from './components/tabsCalendarNews.vue';
-import calendar from './components/calendar.vue';
+//编辑按钮
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+//标题组件
+import title1Style from './components/title/1.vue'
+//tabs组件
+import tabs1Style from './components/tabs/1.vue'
+import tabs2Style from './components/tabs/2.vue'
+//留言组件
+import form1Style from './components/form/1.vue'
 
 export default {
   components: {
-    styleTitle,
-    tabsCalendarNews,
-    calendar
+    editBtn,
+    convertBtn,
+    title1Style,
+    tabs1Style,
+    tabs2Style,
+    form1Style
   },
   props: {
     id: {
@@ -54,11 +79,9 @@ export default {
     align-items: center;
     .commentSectorBoxTitle {
       width: 80%;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
       height: 41px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      position: relative;
     }
     .commentSectorBoxContent {
       width: 80%;
@@ -67,11 +90,13 @@ export default {
         width: 70%;
         box-sizing: border-box;
         padding-right: 20px;
-        border: 1px dashed #5570F1;
+        border: 2px dashed #999;
+        position: relative;
       }
       .calendarBox {
+        position: relative;
         width: 30%;
-        border: 1px dashed #5570F1;
+        //border: 2px dashed #999;
       }
     }
   }

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

@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/advertisement/2.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="advertisementBox">
-    <img src="@/assets/template/sector/imgTitleSector.png" />
+    <img src="@/assets/template/component/style2imgTitle.png" />
   </div>
 </template>
 
@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/advertisement/3.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="advertisementBox">
-    <img src="@/assets/template/sector/imgTitleSector.png" />
+    <img src="@/assets/template/component/style3imgTitle.png" />
   </div>
 </template>
 
@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/advertisement/4.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/component/style4imgTitle.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 58px;
+    img {
+      width: 100%;
+      height: 58px;
+      display: block;
+    }
+  }
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="bannerItemBox">
+    <el-carousel height="226px">
+      <el-carousel-item :key="1">
+        <div class="bannerItemPositioningBox">
+          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
+          <img src="@/assets/template/component/banner1.png" /> 
+        </div>
+      </el-carousel-item>
+      <el-carousel-item :key="2">
+        <div class="bannerItemPositioningBox">
+          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
+          <img src="@/assets/template/component/banner2.png" /> 
+        </div>
+      </el-carousel-item>
+      <el-carousel-item :key="3">
+        <div class="bannerItemPositioningBox">
+          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
+          <img src="@/assets/template/component/banner3.png" /> 
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bannerItemBox {
+    width: 100%;
+    .bannerItemPositioningBox {
+      position: relative;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      .shadowBox {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        width: 100%;
+        left: 0;
+        background: rgba(0,0,0,0.5);
+        color: #fff;
+        font-size: 14px;
+        padding: 10px;
+      }
+    }
+  }
+</style>
+

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

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

src/views/template/style/1/components/footer/info/1.vue

@@ -0,0 +1,98 @@
+<template>
+  <div :class="['footerInfoBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+    <div class="footerInfoBoxContent">
+      <div class="footerInfoBoxContentLeft">
+        <img src="@/assets/template/component/sign1.png">
+      </div>
+      <div class="footerInfoBoxContentMain">
+        <div>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农市场信息网 对此不承担任何保证责任。</div>
+        <div>本网部分转载文章、图片等无法联系到权利人。请相关权利人与本网站联系。</div>
+        <div>北京中农兴业网络技术有限公司主办 | 政讯通·全国政务信息一体化办公室 主管</div>
+        <div>联系电话：010-56019387、010-80440269、010-69945235，监督电话：18516948318，违法和不良信息举报电话：010-57028685</div>
+        <div>第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</div>
+        <div>邮箱: qgsndy@163.com 客服QQ : 2909421493 通联QQ : 213552413</div>
+      </div>
+      <div class="footerInfoBoxContentRight">
+        <img src="@/assets/template/component/sign2.png">
+      </div>
+    </div>
+    <div class="footerInfoBoxBottom">
+      <img src="@/assets/template/component/bottom1.png">
+      <img src="@/assets/template/component/bottom2.png">
+      <img src="@/assets/template/component/bottom3.png">
+      <img src="@/assets/template/component/bottom4.png">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .componentBorder {
+    border: 2px dashed #999;
+  }
+  .footerInfoBox {
+    width: 80%;
+    .footerInfoBoxContent {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .footerInfoBoxContentLeft {
+        width: 10%;
+        box-sizing: border-box;
+        padding-right: 10px;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+      .footerInfoBoxContentMain {
+        padding-top: 40px;
+        font-size: 14px;
+        div {
+          text-align: center;
+          padding-bottom: 10px;
+          color: #fff;
+        }
+      }
+      .footerInfoBoxContentRight {
+        width: 10%;
+        box-sizing: border-box;
+        padding-left: 10px;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+    }
+    .footerInfoBoxBottom {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 40px;
+      img {
+        width: 10%;
+        display: block;
+        margin-right: 10px;
+      }
+    }
+  }
+</style>
+

src/views/template/style/1/components/footer/menu/1.vue

@@ -0,0 +1,84 @@
+<template>
+  <div :class="['footerMenuBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
+    <ul class="footerMenuUl">
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .componentBorder {
+    border: 2px dashed #999;
+  }
+  .footerMenuBox {
+    width: 80%;
+    border-bottom: none;
+    .footerMenuUl {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+      clear: both;
+      border-bottom: 1px solid #3B70D0;
+      li {
+        float: left;
+        width: 12.5%;
+        text-align: center;
+        list-style: none;
+        height: 60px;
+        line-height: 60px;
+        a {
+          display: block;
+          width: 100%;
+          white-space: nowrap; 
+          overflow: hidden; 
+          text-overflow: ellipsis;
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -47,7 +47,7 @@ export default {
 <style scoped lang="less">
   .footerInfoBox {
     width: 80%;
-    border: 1px dashed #fff;
+    border: 2px dashed #999;
     .footerInfoBoxContent {
       display: flex;
       justify-content: space-between;

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

@@ -51,7 +51,8 @@ export default {
 <style scoped lang="less">
   .footerMenuBox {
     width: 80%;
-    border: 1px dashed #fff;
+    border: 2px dashed #999;
+    border-bottom: none;
     .footerMenuUl {
       padding: 0;
       margin: 0;

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="calendarMainBox">
+    <div class="calendarTitle">
+      <span>三农调查</span>
+    </div>
+    <div class="calendarBg">
+      <span>问卷调查</span>
+    </div>
+    <div class="calendarItem">
+      <div class="calendarProblemItemTitle">问卷调查内容问卷调查内容问卷调查内容问卷调查..</div>
+      <el-input type="textarea" v-model="usertext" placeholder="请输入内容" rows="4"></el-input>
+      <el-button type="primary" class="calendarBtn" size="small">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      usertext:"",
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .calendarMainBox {
+    overflow: hidden;
+    position: relative;
+    .calendarTitle {
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      span {
+        padding-left: 20px;
+        padding-right: 20px;
+        border-left: 5px solid #E8EDF6;
+        border-right: 5px solid #E8EDF6;
+      }
+    }
+    .calendarBg {
+      width: 100%;
+      height: 110px;
+      background: url('../../../../../../assets/template/component/calendar.png') no-repeat center center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      padding-top: 35px;
+      padding-left: 36px;
+      span {
+        font-size: 32px;
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+    .calendarItem {
+      font-size: 18px;
+      background: #EAF3FF;
+      padding:20px;
+      position: relative;
+      .calendarProblemItemTitle {
+        margin-bottom: 20px;
+        height: 48px;
+      }
+      .calendarBtn {
+        position: absolute;
+        bottom: 30px;
+        right: 30px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+  <div :class="['headTopBox', { componentBorder: this.$store.state.template.previewStatus==false }]">
+    <div class="headTopInfo">
+      <div class="headTopInfoLeft">欢迎光临：{{ this.$store.state.template.webSiteInfo.website_name }}</div>
+      <div class="headTopInfoRight">
+        <div><i class="el-icon-office-building"></i>商圈</div>
+        <div><i class="el-icon-data-board"></i>广告服务</div>
+        <div><i class="el-icon-user"></i>登录</div>
+        <div><i class="el-icon-edit"></i>注册</div>
+      </div>
+    </div>
+    <div class="headTopLogoBox">
+      <img :src="this.$store.state.template.webSiteInfo.logo">
+      <div class="headTopLogoInputBox">
+        <el-input placeholder="请输入内容" v-model="searchValue"></el-input>
+        <el-button type="primary">搜索</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      searchValue:""
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .componentBorder {
+    border: 2px dashed #999;
+  }
+  .headTopBox {
+    width: 80%;
+    height: 190px;
+    .headTopInfo {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 20px;
+      font-size: 12px;
+      .headTopInfoRight {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        div {
+          margin-left: 10px;
+          i {
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    .headTopLogoBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 30px 0;
+      img {
+        width: 300px;
+        height: 90px;
+        display: block;
+      }
+      .headTopLogoInputBox {
+        width: 300px;
+        color: #333;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        button {
+          border-radius: 0 !important;
+          background: #19499F !important;
+        }
+      }
+    }
+  }
+  
+</style>

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

@@ -0,0 +1,90 @@
+<template>
+  <div class="friendShipLinkBox">
+    <div class="friendShipLinkImgItemBox">
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+    </div>
+    <div class="friendShipLinkTextItemBox">
+      <a href="javascript:;">中国教育网</a>
+      <a href="javascript:;">中国人大网</a>
+      <a href="javascript:;">中国政协网</a>
+      <a href="javascript:;">纪委检查网</a>
+      <a href="javascript:;">最高人民法院</a>
+      <a href="javascript:;">最高人民检察院</a>
+      <a href="javascript:;">交通运输部</a>
+      <a href="javascript:;">国家铁路局</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .friendShipLinkBox {
+    position: relative;
+    width: 100%;
+    .friendShipLinkImgItemBox {
+      height: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 0;
+      div {
+        width: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 50%;
+        }
+      }
+    }
+    .friendShipLinkTextItemBox {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      padding-bottom: 10px;
+      a {
+        display: block;
+        width: 12.5%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        text-align: center;
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="listNewsBox">
+    <div class="listNewsTitle">
+      <div class="listNewsStyleBorder">新闻列表标题</div>
+    </div>
+    <ul class="listNewsUl">
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+      <li>
+        <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+        <div>11-29</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listNewsBox {
+    position: relative;
+    .listNewsTitle {
+      color: #19499F;
+      font-size: 22px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #D9D9D9;
+      .listNewsStyleBorder {
+        border-bottom: 2px solid #19499F;
+        padding-bottom: 18px;
+        padding-top: 18px;
+      }
+    }
+    .listNewsUl {
+      padding: 0;
+      li {
+        list-style-type: none;
+        height: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+          width: 50px;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="bgGreyNewsBox">
+    <ul class="bgGreyNewsList">
+      <li><a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a><span>11-29</span></li>
+      <li><a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a><span>11-29</span></li>
+      <li><a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a><span>11-29</span></li>
+      <li><a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a><span>11-29</span></li>
+      <li><a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a><span>11-29</span></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bgGreyNewsBox {
+    background: #F2F2F2;
+    height: 100%;
+    .bgGreyNewsList {
+      padding-left: 0;
+      margin-left: 0;
+      li{
+        list-style-type: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #D1D1D1;
+        padding: 0 20px;
+        a {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          color: #333;
+          height: 37px;
+          line-height: 37px;
+          box-sizing: border-box;
+        }
+        a:last-child {
+          border-bottom: none;
+        }
+        span {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="bgGreyNewsBox">
+    <div class="bgGreyNews">
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bgGreyNewsBox {
+    background: #F2F2F2;
+    height: 100%;
+    .bgGreyNews {
+      a {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid #D1D1D1;
+        font-size: 16px;
+        color: #333;
+        height: 37px;
+        line-height: 37px;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+      a:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,48 @@
+<template>
+  <div class="mainTitleBox">
+    <img src="@/assets/template/component/newsIcon.png" />
+    <div class="mainTitleText">习近平在中华全国供销合作社成立70周年</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .mainTitleBox {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 54px;
+      height: 54px;
+      margin-right: 40px;
+    }
+    .mainTitleText {
+      font-size: 30px;
+      color: #19499F;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>

src/views/template/style/1/components/mainTitle/2.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="mainTitleBox">
+    <div class="mainTitleBoxIcon">
+      <div>头</div>
+      <div>条</div>
+    </div>
+    <div class="mainTitleText">习近平对新一届澳门特别行政区政府提出4点希望</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .mainTitleBox {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 60px;
+    .mainTitleBoxIcon {
+      position: absolute;
+      top: 0;
+      left: 60px;
+      width: 40px;
+      height: 60px;
+      background: url('../../../../../../assets/template/component/mainStyle2Left.png') no-repeat center center;
+      background-size: 100% 100%;
+      div {
+        font-size: 18px;
+        color: #fff;
+        font-weight: bold;
+        padding-left: 14px;
+        padding-top: 5px;
+      }
+    }
+    img {
+      width: 54px;
+      height: 54px;
+      margin-right: 40px;
+    }
+    .mainTitleText {
+      font-size: 30px;
+      text-align: center;
+      box-shadow: 0 0 5px rgba(0,0,0,0.3);
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      color: #27925C;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <div class="fivePictureBox">
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle1.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle2.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle3.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle4.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle5.png"/></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .fivePictureBox {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0;
+    position: relative;
+    .fivePictureItem {
+      width: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        display: block;
+        width: 90%;
+      }
+    }
+  }
+</style>

src/views/template/style/1/components/staticHtml/2.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="onlyImgSectorListBox">
+    <div class="onlyImgSectorItemBox1">
+      <img src="@/assets/template/component/pic1.png" />
+      <img src="@/assets/template/component/pic2.png" />
+    </div>
+    <div class="onlyImgSectorItemBox3">
+      <img src="@/assets/template/component/pic3.png" />
+    </div>
+    <div class="onlyImgSectorItemBox2">
+      <img src="@/assets/template/component/pic4.png" />
+    </div>
+    <div class="onlyImgSectorItemBox1">
+      <img src="@/assets/template/component/pic1.png" />
+      <img src="@/assets/template/component/pic2.png" />
+    </div>
+    <div class="onlyImgSectorItemBox3">
+      <img src="@/assets/template/component/pic3.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .onlyImgSectorListBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    //border: 2px dashed #999;
+    position: relative;
+    height: 300px;
+    img {
+      width: 100%;
+      display: block;
+    }
+    .onlyImgSectorItemBox1, .onlyImgSectorItemBox2, .onlyImgSectorItemBox3 {
+      height: 300px;
+      box-sizing: border-box;
+    }
+    .onlyImgSectorItemBox2 {
+      width: 50%;
+      padding: 0 10px;
+      img {
+        height: 100%;
+      }
+    }
+    .onlyImgSectorItemBox3 {
+      width: 12.4%;
+      img {
+        height: 100%;
+      }
+    }
+    .onlyImgSectorItemBox1{
+      width: 12.4%;
+      padding-right: 10px;
+      img {
+        height: 50%;
+        &:first-child {
+          padding-bottom: 5px;
+        }
+        &:last-child {
+          padding-top: 5px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="tabsNewsBox">
+    
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="地方动态" name="first">
+        <ul class="newsListBox">
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="农资市场" name="second"></el-tab-pane>
+      <el-tab-pane label="农产市场" name="third"></el-tab-pane>
+      <el-tab-pane label="农村市场" name="fourth"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsNewsBox {
+    .newsListBox {
+      padding: 0;
+      li {
+        list-style-type: none;
+        height: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+          width: 50px;
+        }
+      }
+      
+     
+    }
+  }
+</style>
+

src/views/template/style/1/components/tabs/2.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="tabsCalendarMainNewsBox">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="市场资讯" name="sczx">
+        <ul class="newsListBox">
+          <li class="newsCalendarBox">
+            <div class="CalendarItemBox">
+              <div class="Calendar">
+                <div class="CalendarDay">3</div>
+                <div class="CalendarMonth">2024-12</div>
+              </div>
+              <div class="CalendarNewsTitle">
+                <div class="CalendarTitle">商务部：牢牢把握产业振兴，在抓好农产品冷链物流等方面采取更多务实举措</div>
+                <div class="newsContent">会议总结了前一阶段工作情况，研究商务服务乡村振兴重点工作和定点帮扶工作计划，部署下一步工作。 </div>
+              </div>
+            </div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="市场行情" name="schq"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      activeName:"sczx"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsCalendarMainNewsBox {
+    width: 100%;
+    position: relative;
+    .newsListBox {
+      padding-left: 0;
+      .newsCalendarBox {
+        list-style-type: none;
+        margin-bottom: 20px;
+        width: 100%;
+        .CalendarItemBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          .Calendar {
+            width: 100px;
+            height: 100px;
+            background: #EAF3FF;
+            box-sizing: border-box;
+            padding: 10px 10px 0 10px;
+            margin-right: 25px;
+            .CalendarDay {
+              font-size: 38px;
+              color: #19499F;
+              text-align: center;
+              padding-bottom: 10px;
+              border-bottom: 1px solid #19499F;
+            }
+            .CalendarMonth {
+              font-size: 16px;
+              color: #19499F;
+              text-align: center;
+              padding-top: 10px;
+            }
+          }
+          .CalendarNewsTitle {
+            flex: 1;
+            .CalendarTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .newsContent {
+              font-size: 16px;
+              color: #999999;
+              padding-top: 10px;
+            }
+          }
+        }
+      }
+      .newsItemBox {
+        list-style-type: none;
+        height: 20px;
+        margin-bottom: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="styleTitleBox">
+    <div :class="['titleBoxStyle' + type]">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+      type:1,
+      text:"板块标题"
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .styleTitleBox {
+    //width: 468px;
+    width: 100%;
+    height: 41px;
+    text-align: center;
+    font-size: 32px;
+    font-weight: bold;
+    color: #333;
+    line-height: 41px;
+    position: relative;
+  }
+  .titleBoxStyle1{
+    background: url('../../../../../../assets/template/component/titleStyle1.png') no-repeat center center;
+    width: 100%;
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="headTopBox">
+  <div :class="['headTopBox', { componentBorder: this.$store.state.template.previewStatus==false }]">
     <div class="headTopInfo">
       <div class="headTopInfoLeft">欢迎光临：{{ this.$store.state.template.webSiteInfo.website_name }}</div>
       <div class="headTopInfoRight">
@@ -39,9 +39,11 @@ export default {
 </script>
 
 <style scoped lang="less">
+  .componentBorder {
+    border: 2px dashed #999;
+  }
   .headTopBox {
     width: 80%;
-    border: 1px dashed #5570F1;
     height: 190px;
     .headTopInfo {
       display: flex;
@@ -80,7 +82,6 @@ export default {
         button {
           border-radius: 0 !important;
           background: #19499F !important;
-          ;
         }
       }
     }

src/views/template/style/1/friendShipLinkSector.vue

@@ -1,21 +1,37 @@
 <template>
   <div class="friendShipLinkSectorBox">
     <div class="friendShipLinkSectorTitle">
-      <styleTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
     </div>
     <div class="friendShipLinkSectorItemBox">
-      <friendShipLink :id="id" :sort="2"/>
+      <editBtn :id="id" :sort="0" :type="4" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="9"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+        <link1Style />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import styleTitle from './components/styleTitle';
-import friendShipLink from './components/friendShipLink';
+//编辑按钮
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+//标题组件
+import title1Style from './components/title/1.vue'
+//友情链接组件
+import link1Style from './components/link/1.vue'
+
 export default {
   components: {
-    styleTitle,
-    friendShipLink
+    editBtn,
+    convertBtn,
+    title1Style,
+    link1Style
   },
   props: {
     id:{
@@ -39,17 +55,13 @@ export default {
     align-items: center;
     .friendShipLinkSectorTitle {
       width: 80%;
-      border: 1px dashed #5570F1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      border: 2px dashed #999;
+      position: relative;
     }
     .friendShipLinkSectorItemBox {
       width: 80%;
-      border: 1px dashed #5570F1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      border: 2px dashed #999;
+      position: relative;
     }
   }
 </style>

src/views/template/style/1/headSector.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="headSectorBox">
-    <topInfo />
+    <header1Style />
   </div>
 </template>
 
 <script>
-import topInfo from './components/topInfo.vue';
+import header1Style from './components/header/1.vue';
 
 export default {
   props: {
     
   },
   components: {
-    topInfo,
+    header1Style,
   },
   data() {
     return {

src/views/template/style/1/imgTitleSector.vue

@@ -3,16 +3,18 @@
     <div class="imgSectorBox">
       <editBtn :id="id" :sort="0" :type="3" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="3"/>
-      <!-- {{this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style}} -->
-      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 1">
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
         <useStyle1 />
       </div>
-      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 2">
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
         <useStyle2 />
       </div>
-      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 3">
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 3">
         <useStyle3 />
       </div>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 4">
+        <useStyle4 />
+      </div>
     </div>
   </div>
 </template>
@@ -23,6 +25,7 @@ import convertBtn from '../../public/convertBtn.vue'
 import useStyle1 from './components/advertisement/1.vue'
 import useStyle2 from './components/advertisement/2.vue'
 import useStyle3 from './components/advertisement/3.vue'
+import useStyle4 from './components/advertisement/4.vue'
 
 export default {
   components: {
@@ -30,7 +33,8 @@ export default {
     convertBtn,
     useStyle1,
     useStyle2,
-    useStyle3
+    useStyle3,
+    useStyle4
   },
   props: {
     id:{
@@ -53,7 +57,7 @@ export default {
     justify-content: center;
     align-items: center;
     .imgSectorBox {
-      border: 1px dashed #5570F1;
+      //border: 2px dashed #999;
       width: 80%;
       height: 60px;
       position: relative;

src/views/template/style/1/listSector.vue

@@ -1,27 +1,64 @@
 <template>
   <div class="listSectorBox">
     <div class="listSectorBoxTitle">
-      <styleTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
     </div>
     <div class="listSectorBoxContent">
       <div class="listNewsLeft">
-        <listNews :id="id" :sort="2"/>
+        <editBtn :id="id" :sort="1" :type="1" :size="5"/>
+        <convertBtn :id="id" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 3">
+          <list3Style />
+        </div>
       </div>
       <div class="listNewsRight">
-        <listNews :id="id" :sort="3"/>
+        <editBtn :id="id" :sort="2" :type="1" :size="5"/>
+        <convertBtn :id="id" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import styleTitle from './components/styleTitle.vue';
-import listNews from './components/listNews.vue';
+//编辑按钮
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+//标题组件
+import title1Style from './components/title/1.vue'
+//新闻列表组件
+import list1Style from './components/list/1.vue'
+import list2Style from './components/list/2.vue'
+import list3Style from './components/list/3.vue'
+// import styleTitle from './components/styleTitle.vue';
+// import listNews from './components/listNews.vue';
 
 export default {
   components: {
-    styleTitle, 
-    listNews
+    editBtn, 
+    convertBtn,
+    title1Style,
+    list1Style,
+    list2Style,
+    list3Style
   },
   props: {
     id:{
@@ -45,11 +82,9 @@ export default {
     width:100%;
     .listSectorBoxTitle {
       width: 80%;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
       height: 41px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      position: relative;
     }
     .listSectorBoxContent {
       display: flex;
@@ -59,14 +94,16 @@ export default {
       .listNewsLeft {
         width: 50%;
         box-sizing: border-box;
-        border: 1px dashed #5570F1;
+        border: 2px dashed #999;
         padding-right: 10px;
+        position: relative;
       }
       .listNewsRight {
         width: 50%;
         box-sizing: border-box;
-        border: 1px dashed #5570F1;
+        border: 2px dashed #999;
         padding-left: 10px;
+        position: relative;
       }
     }
   }

src/views/template/style/1/manyPictureSector.vue

@@ -1,32 +1,73 @@
 <template>
   <div class="manyPictureSectorBox">
     <div class="manyPictureSectorBoxTitle">
-      <styleTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
     </div>
-    <div class="manyPictureSectorBox">
-      <fivePicture :id="id" :sort="2"/>
+    <div class="manyPictureImgBox">
+      <editBtn :id="id" :sort="1" :type="6"/>
+      <convertBtn :id="id" :sort="1" :type="7"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
+        <staticHtml1Style />
+      </div>
     </div>
     <div class="manyPictureNewsBox">
       <div class="manyPictureNewsItem">
-        <listNews :id="id" :sort="3"/>
+        <editBtn :id="id" :sort="2" :type="1" :size="5"/>
+        <convertBtn :id="id" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
       </div>
       <div class="manyPictureNewsItem">
-        <listNews :id="id" :sort="4"/>
+        <editBtn :id="id" :sort="3" :type="1" :size="5"/>
+        <convertBtn :id="id" :sort="3" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 3">
+          <list3Style />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import styleTitle from './components/styleTitle.vue';
-import fivePicture from './components/fivePicture.vue';
-import listNews from './components/listNews.vue';
+//编辑按钮
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+//标题组件
+import title1Style from './components/title/1.vue'
+//静态组件
+import staticHtml1Style from './components/staticHtml/1.vue'
+//新闻列表组件
+import list1Style from './components/list/1.vue'
+import list2Style from './components/list/2.vue'
+import list3Style from './components/list/3.vue'
+
 
 export default {
   components: {
-    styleTitle,
-    fivePicture,
-    listNews
+    editBtn,
+    convertBtn,
+    title1Style,
+    staticHtml1Style,
+    list1Style,
+    list2Style,
+    list3Style
   },
   props: {
     id:{
@@ -55,28 +96,31 @@ export default {
     align-items: center;
     width:100%;
     position: relative;
+    .manyPictureImgBox {
+      width: 80%;
+      position: relative;
+    }
     .manyPictureSectorBoxTitle {
       width: 80%;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
       height: 41px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      position: relative;
     }
     .manyPictureSectorBox {
       width: 80%;
-      border: 1px dashed #5570F1;
+      //border: 1px dashed #999;
     }
     .manyPictureNewsBox {
       width: 80%;
-      border: 1px dashed #5570F1;
+      //border: 1px dashed #999;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .manyPictureNewsItem {
         width: 50%;
-        border: 1px dashed #5570F1;
+        border: 2px dashed #999;
         box-sizing: border-box;
+        position: relative;
       }
       .manyPictureNewsItem:nth-child(1) {
         padding-right: 10px;

src/views/template/style/1/menuSector.vue

@@ -102,8 +102,8 @@ export default {
       .menuBox {
         width: 80%;
         box-sizing: border-box;
-        border-left: 1px dashed #fff;
-        border-right: 1px dashed #fff;
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
@@ -128,7 +128,8 @@ export default {
       font-size: 14px;
       width: 80%;
       margin: 0 auto;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
+      border-top: none;
       .menuSectorInputBoxItem {
         .el-input {
           width: 100px;

src/views/template/style/1/onlyImgSector.vue

@@ -1,43 +1,29 @@
 <template>
   <div class="onlyImgSectorBox">
     <div class="onlyImgSectorPositionBox">
-      <editBtn :id="id" :sort="1" :type="6"/>
-      <div class="onlyImgSectorItemBox1">
-        <img src="@/assets/template/component/pic1.png" />
-        <img src="@/assets/template/component/pic2.png" />
-      </div>
-      <div class="onlyImgSectorItemBox3">
-        <img src="@/assets/template/component/pic3.png" />
-      </div>
-      <div class="onlyImgSectorItemBox2">
-        <img src="@/assets/template/component/pic4.png" />
-      </div>
-      <div class="onlyImgSectorItemBox1">
-        <img src="@/assets/template/component/pic1.png" />
-        <img src="@/assets/template/component/pic2.png" />
-      </div>
-      <div class="onlyImgSectorItemBox3">
-        <img src="@/assets/template/component/pic3.png" />
-      </div>
+      <editBtn :id="id" :sort="0" :type="6" :size="1"/>
+      <!-- <convertBtn :id="id" :sort="0" :type="3"/> -->
+      <staticHtml2Style />
     </div>
   </div>
 </template>
 
 <script>
-import editBtn from '../../public/editBtn.vue';
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+import staticHtml2Style from './components/staticHtml/2.vue'
+
 export default {
   components: {
-    editBtn
+    editBtn,
+    convertBtn,
+    staticHtml2Style
   },
   props: {
     id:{
       type:Number,
       default:0
     },
-    sort:{
-      type:Number,
-      default:0
-    }
   },
   data() {
     return {
@@ -56,45 +42,7 @@ export default {
     .onlyImgSectorPositionBox {
       width: 80%;
       height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 1px dashed #5570F1;
       position: relative;
-      img {
-        width: 100%;
-        display: block;
-      }
-      .onlyImgSectorItemBox1, .onlyImgSectorItemBox2, .onlyImgSectorItemBox3 {
-        height:320px;
-        box-sizing: border-box;
-      }
-      .onlyImgSectorItemBox2 {
-        width: 50%;
-        padding: 0 10px;
-        img {
-          height: 100%;
-        }
-      }
-      .onlyImgSectorItemBox3 {
-        width: 12.4%;
-        img {
-          height: 100%;
-        }
-      }
-      .onlyImgSectorItemBox1{
-        width: 12.4%;
-        padding-right: 10px;
-        img {
-          height: 50%;
-          &:first-child {
-            padding-bottom: 5px;
-          }
-          &:last-child {
-            padding-top: 5px;
-          }
-        }
-      }
     }
   }
 </style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="headSectorBox">
+    <header1Style />
+  </div>
+</template>
+
+<script>
+import header1Style from '../components/header/1.vue';
+
+export default {
+  props: {
+    
+  },
+  components: {
+    header1Style,
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .headSectorBox {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    background: url('../../../../../assets/template/component/style1topbg.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div :class="['friendShipLinkSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
+    </div>
+    <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+        <link1Style />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+//标题组件
+import title1Style from '../components/title/1.vue'
+//友情链接组件
+import link1Style from '../components/link/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    title1Style,
+    link1Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .friendShipLinkSectorBox {
+    height:180px;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .friendShipLinkSectorTitle {
+      width: 80%;
+      //border: 2px dashed #999;
+      position: relative;
+    }
+    .friendShipLinkSectorItemBox {
+      width: 80%;
+      margin-top: 20px;
+      //border: 2px dashed #999;
+      position: relative;
+    }
+  }
+</style>

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

@@ -0,0 +1,155 @@
+<template>
+  <div class="menuSectorBox">
+    <div class="menuBoxBg">
+      <div :class="['menuBox',{componentBorder: this.$store.state.template.previewStatus==false}]" ref="menuBox">
+        <div>首页</div>
+        <div v-for="item in this.$store.state.template.webSiteMenu">{{item.name}}</div>
+      </div>
+    </div>
+    <div :class="['menuSectorInputBox',{componentMenuBorder: this.$store.state.template.previewStatus==false}]">
+      <div class="menuSectorInputBoxItem">
+        行政职能查询：
+        <el-select v-model="departments" filterable placeholder="请选择职能部门">
+          <el-option
+            v-for="item in this.$store.state.template.departmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="menuSectorInputBoxItem">
+        行政区划查询：
+        <el-select v-model="area.economize" placeholder="请选择省.." @change="changeMarket">
+          <el-option
+            v-for="item in this.$store.state.template.area.economize"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+        <el-select v-model="area.market" placeholder="请选择市.." @change="changeCounty">
+          <el-option
+            v-for="item in this.$store.state.template.area.market"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+        <el-select v-model="area.county" placeholder="请选择县..">
+          <el-option
+            v-for="item in this.$store.state.template.area.county"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      area:{//地区
+        economize:"",//省区
+        market:"",//市区
+        county:""//县区
+      },
+      departments:""
+    };
+  },
+  methods: {
+    //选择市
+    changeMarket(){
+      this.area.market = "";
+      this.area.county = "";
+      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize});
+    },
+    //选择县
+    changeCounty(data){
+      this.area.county = "";
+      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize,city:this.area.market});
+    }
+  },
+  mounted() {
+    //获取当前元素的个数，现在一行是8个，每个高度是30px
+    // let h = Math.floor(this.$store.state.template.webSiteMenu.length / 8) + (this.$store.state.template.webSiteMenu.length % 8 > 0 ? 1 : 0);
+    // let menuH = (h*3)+4;
+    // this.$store.commit('template/setIndexModuleHeight',{i:this.id,h:menuH});
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .menuSectorBox {
+    width: 100%;
+    background: #F5F7FB;
+    .menuBoxBg {
+      width: 100%;
+      background: #19499F;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .componentBorder{
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+      }
+      .menuBox {
+        width: 80%;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        div {
+          width: 12.5%;
+          font-size: 14px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          overflow: hidden; 
+          white-space: nowrap; 
+          text-overflow: ellipsis; 
+          text-align: center;
+          color: #fff;
+        }
+      }
+    }
+    .menuSectorInputBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      width: 80%;
+      margin: 0 auto;
+      border-top: none;
+      height: 50px;
+      .menuSectorInputBoxItem {
+        padding: 0 10px;
+        input{
+          margin-right: 10px;
+        }
+        .el-select {
+          margin-right: 10px;
+        }
+      }
+    }
+    .componentMenuBorder {
+      border: 2px dashed #999;
+    }
+  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
+    width: 130px !important;
+  }
+  ::v-deep .el-input--medium .el-input__inner {
+    border-radius: 20px;
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="footerSectorBox">
+    <footerMenu />
+    <footerInfo />
+  </div>
+</template>
+
+<script>
+import footerMenu from '../components/footer/menu/1.vue';
+import footerInfo from '../components/footer/info/1.vue';
+
+export default {
+  props: {
+    
+  },
+  components: {
+    footerMenu,
+    footerInfo
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .footerSectorBox {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    background: #19499F;
+  }
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <div :class="['imgTitleSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div class="imgSectorBox">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="3"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+        <useStyle1 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+        <useStyle2 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+        <useStyle3 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+        <useStyle4 />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+import useStyle1 from '../components/advertisement/1.vue'
+import useStyle2 from '../components/advertisement/2.vue'
+import useStyle3 from '../components/advertisement/3.vue'
+import useStyle4 from '../components/advertisement/4.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    useStyle1,
+    useStyle2,
+    useStyle3,
+    useStyle4
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .imgTitleSectorBox {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 60px;
+    .imgSectorBox {
+      //border: 2px dashed #999;
+      width: 80%;
+      height: 60px;
+      position: relative;
+    }
+  }
+</style>

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

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

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

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

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

@@ -0,0 +1,113 @@
+<template>
+  <div :class="['commentSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['commentSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
+    </div>
+    <div class="commentSectorBoxContent">
+      <div :class="['tabsCalendarNewsBox', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="5"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+          <tabs1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+          <tabs2Style />
+        </div>
+      </div>
+      <div class="calendarBox">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="8" :size="1" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="8"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
+          <form1Style />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+//标题组件
+import title1Style from '../components/title/1.vue'
+//tabs组件
+import tabs1Style from '../components/tabs/1.vue'
+import tabs2Style from '../components/tabs/2.vue'
+//留言组件
+import form1Style from '../components/form/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    title1Style,
+    tabs1Style,
+    tabs2Style,
+    form1Style
+  },
+  props: {
+    id: {
+      type: Number,
+      default: 0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .commentSectorBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 420px;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .commentSectorBoxTitle {
+      width: 80%;
+      height: 41px;
+      position: relative;
+    }
+    .commentSectorBoxContent {
+      width: 80%;
+      display: flex;
+      padding-top: 20px;
+      .tabsCalendarNewsBox {
+        width: 70%;
+        box-sizing: border-box;
+        margin-right: 20px;
+        position: relative;
+      }
+      .calendarBox {
+        position: relative;
+        width: 30%;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
+    </div>
+    <div class="listSectorBoxContent">
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+//标题组件
+import title1Style from '../components/title/1.vue'
+//新闻列表组件
+import list1Style from '../components/list/1.vue'
+import list2Style from '../components/list/2.vue'
+import list3Style from '../components/list/3.vue'
+// import styleTitle from './components/styleTitle.vue';
+// import listNews from './components/listNews.vue';
+
+export default {
+  components: {
+    editBtn, 
+    convertBtn,
+    title1Style,
+    list1Style,
+    list2Style,
+    list3Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listSectorBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:100%;
+    height: 306px;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .listSectorBoxTitle {
+      width: 80%;
+      //border: 2px dashed #999;
+      height: 41px;
+      position: relative;
+    }
+    .listSectorBoxContent {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 80%;
+      margin-top: 20px;
+      .listNewsLeft {
+        width: 50%;
+        box-sizing: border-box;
+        //border: 2px dashed #999;
+        padding-right: 10px;
+        position: relative;
+      }
+      .listNewsRight {
+        width: 50%;
+        box-sizing: border-box;
+        //border: 2px dashed #999;
+        padding-left: 10px;
+        position: relative;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div :class="['onlyImgSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div class="onlyImgSectorPositionBox">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="6" :size="1" :y="y"/>
+      <!-- <convertBtn :id="id" :sort="0" :type="3"/> -->
+      <staticHtml2Style />
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+import staticHtml2Style from '../components/staticHtml/2.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    staticHtml2Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .onlyImgSectorBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    .onlyImgSectorPositionBox {
+      width: 80%;
+      height: 300px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+    }
+  }
+</style>

src/views/template/templateCreat.vue

@@ -3,10 +3,11 @@
     <!-- 顶部菜单 start ---------------------------------------->
     <div class="topMenuBox">
       <div>
-        <el-button icon="el-icon-refresh" type="primary">随机生成</el-button>
+        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">随机生成</el-button>
       </div>
       <div class="topMenuRightBox">
-        <img src="@/assets/template/preview.png" class="previewImg"/>
+        <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
+        <img src="@/assets/template/close.png" class="previewImg"  @click="setPreviewStatus" v-else/>
         <el-button type="primary" @click="saveTemplate">保存</el-button>
         <el-button type="info" @click="goStyle">上一步</el-button>
       </div>
@@ -16,12 +17,12 @@
     <div class="websiteBox">
       <div class="pageTabsBox">
         <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">分类页</div>
+        <!-- <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">分类页</div> -->
         <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
         <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
+        <!-- <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
         <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 6 ? 'active' : '']" @click="openPage(6)">自定义列表页</div>
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div>
+        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div> -->
       </div>
       <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
     </div>
@@ -29,12 +30,22 @@
 
     <!-- 弹出框 start ---------------------------------------->
     <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
-    <el-dialog title="编辑组件" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow">
+    <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow">
       <editWindow />
     </el-dialog>
-    <el-dialog title="选择组件展示形式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
+    <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
       <componentWindow />
     </el-dialog>
+    <el-dialog title="当前提交的webSiteTemplateJson" :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>
+    </el-dialog>
     <!-- 弹出框 start ---------------------------------------->
   </div>
 </template>
@@ -90,6 +101,7 @@ export default {
     },
     //下一步
     gotoList(){
+      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
       this.$router.push({
         path: '/templateList'
       });
@@ -119,6 +131,18 @@ export default {
     closeComponentStyleWindow(){
       this.$store.commit('template/closeComponentStyleStatus');
     },
+    //关闭提交数据弹出框
+    closeEditWebsiteTemplateJsonWindow(){
+      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+    },
+    //设置预览状态
+    setPreviewStatus(){
+      this.$store.commit('template/setPreviewStatus');
+    },
+    //随机生成模板
+    randomTemplate(){
+      this.$store.commit('template/randomTemplate');
+    },
     //0.全局操作 end ------------------------------------------------------------>
   },
   mounted(){
@@ -157,7 +181,7 @@ export default {
     margin: 60px 30px 30px 30px;
     background: #fff;
     border: 1px solid #E9EDF7;
-    padding: 20px 0 20px 0;
+   
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     position: relative;
@@ -188,6 +212,12 @@ export default {
     }
   }
 
+  //提交数据展示窗口
+  .editWebsiteTemplateJsonBox {
+    height: 300px;
+    overflow-y: auto;
+  }
+
   //菜单 start------------------------------------------------------------> 
   // .layerTabsBox {
   //   margin: 30px;