Merge branch '12_4_dangyunlong' into dev

src/layout/components/template/componentMenu.vue

@@ -1,91 +1,47 @@
 <template>
   <div class="componentMenuBox" id="componentMenuBox">
     <div class="componentMenuTitle">
-      <div v-if="type == 'sector'">可选板块：</div>
-      <div v-if="type == 'component'">可选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 1">首页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 1">首页可选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 2">分类页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 2">分类页选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 3">列表页选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 4">详情页选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 5">搜索页选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 6">自定义列表页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 6">自定义列表页选组件：</div>
+      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 7">自定义详情页可选板块：</div>
+      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 7">自定义详情页选组件：</div>
     </div>
-    <div v-if="type == 'sector'">
+    <div>
       <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" />
-            </div>
-            <div class="sectorItemTitle">纯图片组合</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/linkSector.png" />
-            </div>
-            <div class="sectorItemTitle">友情链接</div>
-          </div>
-          <div class="sectorItemBox">
-            <div class="sectorItem">
-              <img src="@/assets/template/sector/footerSector.png" />
-            </div>
-            <div class="sectorItemTitle">页尾板块</div>
-          </div>
+        <!--首页板块-->
+        <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 1">
+          <indexSector/>
+        </div>
+        <!--首页组件-->
+        <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 1">
+          
         </div>
-        
       </el-scrollbar>
     </div>
-    <!-- <div v-if="type == 'component'" class="componentBox">
-      组件
-    </div> -->
   </div>
 </template>
 
 <script>
+//首页板块
+import indexSector from './pages/index/sector.vue';
 
 export default {
   name: 'componentMenu',
+  components:{
+    indexSector
+  },
   props: {
-    type: {
-      type: String, //sector component
-      required: true
-    },
+    
   },
   data() {
     return {
@@ -93,14 +49,7 @@ export default {
     }
   },
   methods: {
-    addModule(type,h){
-      let data = {
-        type: type,
-        h: h
-      }
-      console.log(data);
-      this.$store.commit('template/addModule',data);
-    }
+    
   }
 }
 </script>
@@ -133,31 +82,5 @@ export default {
         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/component.vue

@@ -0,0 +1,162 @@
+<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

@@ -0,0 +1,122 @@
+<template>
+  <div class="sectorBox">
+    <div class="sectorItemBox" @click="addIndexModule('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="sectorItem">
+        <img src="@/assets/template/sector/menuSector.png" />
+      </div>
+      <div class="sectorItemTitle">网站导航</div>
+    </div>
+    <div class="sectorItemBox" @click="addIndexModule('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="addIndexModule('bannerSector',34)"/>
+      </div>
+      <div class="sectorItemTitle">焦点图</div>
+    </div>
+    <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/moreServicesSector.png" @click="addIndexModule('manyPictureSector',41)"/>
+      </div>
+      <div class="sectorItemTitle">多图菜单</div>
+    </div>
+    <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/commentSector.png" @click="addIndexModule('commentSector',40)"/>
+      </div>
+      <div class="sectorItemTitle">文章列表带评论</div>
+    </div>
+    <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/newsSector.png" @click="addIndexModule('listSector',28)"/>
+      </div>
+      <div class="sectorItemTitle">文章列表</div>
+    </div>
+    <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgSector.png" @click="addIndexModule('onlyImgSector',24)"/>
+      </div>
+      <div class="sectorItemTitle">纯图片组合</div>
+    </div>
+    <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/linkSector.png" @click="addIndexModule('friendShipLinkSector',15)"/>
+      </div>
+      <div class="sectorItemTitle">友情链接</div>
+    </div>
+    <div class="sectorItemBox">
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/footerSector.png" @click="addIndexModule('footerSector',38)"/>
+      </div>
+      <div class="sectorItemTitle">页尾板块</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    type: {
+     
+    },
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    addIndexModule(type,h){
+      let data = {
+        type: type,
+        h: h
+      }
+      console.log(data);
+      this.$store.commit('template/addIndexModule',data);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .sectorBox {
+    height: 100%;
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      height: 130px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

src/layout/creatWebsite.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <componentMenu :type="this.$store.state.template.menuType"/>
+    <componentMenu />
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />

src/store/modules/template.js

@@ -2,15 +2,30 @@ import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,ge
   selectWebsiteArticleInfo} from '@/api/cms'
 
 const state = {
-  editWebsiteId: "",//创建网站的id
-  stepStatus: true,//true显示步骤 false不显示
-  menuType: "sector", //sector板块 component组件
-  layout: [
-    // i = id 
-    // w = 最大宽度是12
-    // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
-    // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
-  ],
+  //0.全局配置 start------------------------------------------------------------> 
+  editWebsiteId: "",//当前编辑网站的id
+  stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+  //0.全局配置 end------------------------------------------------------------>
+  //1.页面数据 start------------------------------------------------------------>
+  pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
+  menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
+  pageData: { //准备提交到后台的数据
+    index:[],//首页
+    class:[],//分类页
+    list:[],//列表页
+    article:[],//详情页
+    search:[],//搜索页
+    aloneList:[],//自定义列表页
+    aloneArticle:[],//自定义详情页
+  },
+  // layout: [
+  //   // i = id 
+  //   // w = 最大宽度是12
+  //   // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
+  //   // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
+  // ],
+  //1.页面数据 end------------------------------------------------------------>
+  //2.站点数据 start------------------------------------------------------------>
   webSiteInfo:"",//网站信息
   webSiteMenu:"",//网站包含的导航池
   area:{//地区
@@ -19,6 +34,7 @@ const state = {
     county:[]//县区
   },
   departmentList:"",//职能部门
+  //2.站点数据 end------------------------------------------------------------>
 }
 
 const mutations = {
@@ -35,15 +51,18 @@ const mutations = {
   hiddenStepStatus(state){
     state.stepStatus = false;
   },
+  setPageStatus(state,num){
+    state.pageStatus = num;
+  },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
-  //添加模块
-  addModule(state,data) {
+  //添加首页板块
+  addIndexModule(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, 
+    const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+    state.pageData.index.push({
+      i: state.pageData.index.length, 
       x: 0, 
       y: maxY + 1, 
       w: 12, 
@@ -52,15 +71,44 @@ const mutations = {
       content:""
     });
   },
-  //删除模块
-  deleteModule(item) {
-    //找到对应的模块删除掉
-    for(let i = 0; i < state.layout.length; i++) {
-      if(state.layout[i].i == item.i) {
-        state.layout.splice(i, 1);
+  //删除首页板块
+  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);
       }
     }
   },
+  //修改首页板块高度
+  setIndexModuleHeight(state,data){
+    console.log(data);
+    state.pageData.index[data.i].h = data.h;
+    console.log(state.pageData.index[data.i]);
+  },
+  //添加模块
+  // 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);
+  //     }
+  //   }
+  // },
   //1.配置模块 end------------------------------------------------------------>
   //2.获取站点信息 start------------------------------------------------------------>
   //获取站点详情
@@ -90,16 +138,11 @@ const mutations = {
   setDepartmentList(state,data){
     state.departmentList = data;
   },
-  //修改模块高度
-  setModuleHeight(state,data){
-    console.log(data);
-    state.layout[data.i].h = data.h;
-    console.log(state.layout[data.i]);
-  },
   //2.获取站点信息 end------------------------------------------------------------>
 }
 
 const actions = {
+  //1.站点数据 start------------------------------------------------------------>
   //获取网站基本信息
   getSiteInfo({commit},data){
     return new Promise((resolve, reject) => {
@@ -164,6 +207,7 @@ const actions = {
       })
     })
   }
+  //1.站点数据 end------------------------------------------------------------>
 }
 
 export default {

src/views/template/page/pageIndex.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="grid-layout-demo">
+    <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">编辑</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 />
+          </div>
+          <!-- 焦点图模块 --> 
+          <div v-if="item.type == 'bannerSector'" class="moduleBox">
+            <bannerSector />
+          </div>
+          <!-- 多图模块 --> 
+          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+            <manyPictureSector />
+          </div>
+          <!-- 评论模块 --> 
+          <div v-if="item.type == 'commentSector'" class="moduleBox">
+            <commentSector />
+          </div>
+          <!-- 双联文章列表模块 --> 
+          <div v-if="item.type == 'listSector'" class="moduleBox">
+            <listSector />
+          </div>
+          <!-- 纯图片组合模块 --> 
+          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+            <onlyImgSector />
+          </div>
+          <!-- 友情链接模块 --> 
+          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+            <friendShipLinkSector />
+          </div>
+          <!-- 页尾板块 --> 
+          <div v-if="item.type == 'footerSector'" class="moduleBox">
+            <footerSector />
+          </div>
+        </div>
+      </grid-item>
+    </grid-layout>
+  </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/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';
+//自助建站组件 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.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //0.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //0.全局操作 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;
+  }
+  //模块 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;
+    }
+  }
+  .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/style/1/components/footerInfo.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="footerInfoBox">
+    <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">
+  .footerInfoBox {
+    width: 80%;
+    border: 1px dashed #fff;
+    .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/footerMenu.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="footerMenuBox">
+    <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">
+  .footerMenuBox {
+    width: 80%;
+    border: 1px dashed #fff;
+    .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/friendShipLink.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="friendShipLinkBox">
+    <div class="friendShipLinkImgItemBox">
+      <img src="@/assets/template/component/link1.png">
+      <img src="@/assets/template/component/link2.png">
+      <img src="@/assets/template/component/link1.png">
+      <img src="@/assets/template/component/link1.png">
+      <img src="@/assets/template/component/link2.png">
+    </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 {
+    .friendShipLinkImgItemBox {
+      height: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 0;
+      img {
+        width: 19%;
+      }
+    }
+    .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/footerSector.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="footerSectorBox">
+    <footerMenu />
+    <footerInfo />
+  </div>
+</template>
+
+<script>
+import footerMenu from './components/footerMenu.vue';
+import footerInfo from './components/footerInfo.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/friendShipLinkSector.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="friendShipLinkSectorBox">
+    <div class="friendShipLinkSectorTitle">
+      <styleTitle />
+    </div>
+    <div class="friendShipLinkSectorItemBox">
+      <friendShipLink />
+    </div>
+  </div>
+</template>
+
+<script>
+import styleTitle from './components/styleTitle';
+import friendShipLink from './components/friendShipLink';
+export default {
+  components: {
+    styleTitle,
+    friendShipLink
+  },
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .friendShipLinkSectorBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .friendShipLinkSectorTitle {
+      width: 80%;
+      border: 1px dashed #5570F1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .friendShipLinkSectorItemBox {
+      width: 80%;
+      border: 1px dashed #5570F1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>

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

@@ -85,7 +85,7 @@ export default {
     //获取当前元素的个数，现在一行是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/setModuleHeight',{i:this.id,h:menuH});
+    this.$store.commit('template/setIndexModuleHeight',{i:this.id,h:menuH});
   },
 };
 </script>

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="onlyImgSectorBox">
+    <div class="onlyImgSectorPositionBox">
+      <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>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .onlyImgSectorBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .onlyImgSectorPositionBox {
+      width: 80%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px dashed #5570F1;
+      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/templateCreat.vue

@@ -7,7 +7,7 @@
       <div class="topMenuRightBox">
         <img src="@/assets/template/preview.png" class="previewImg"/>
         <el-button type="primary" @click="gotoList">保存</el-button>
-        <el-button type="info" @click="goStyle">退出</el-button>
+        <el-button type="info" @click="goStyle">上一步</el-button>
       </div>
     </div>
     <!-- 工具栏 start ---------------------------------------->
@@ -18,53 +18,17 @@
     <!-- 栅格布局 预览模式 start ---------------------------------------->
     <div class="websiteBox">
       <div class="pageTabsBox">
-        <div :class="['pageTabsItem', editPageStatus === 1 ? 'active' : '']">首页</div>
-        <div :class="['pageTabsItem', editPageStatus === 2 ? 'active' : '']">分类页</div>
-        <div :class="['pageTabsItem', editPageStatus === 3 ? 'active' : '']">列表页</div>
-        <div :class="['pageTabsItem', editPageStatus === 4 ? 'active' : '']">详情页</div>
-        <div :class="['pageTabsItem', editPageStatus === 5 ? 'active' : '']">搜索页</div>
-        <div :class="['pageTabsItem', editPageStatus === 6 ? 'active' : '']">自定义列表页</div>
-        <div :class="['pageTabsItem', editPageStatus === 7 ? 'active' : '']">自定义详情页</div>
-      </div>
-      <div class="grid-layout-demo">
-        <grid-layout :layout="this.$store.state.template.layout" :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.layout" :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 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 />
-              </div>
-              <!-- 焦点图模块 --> 
-              <div v-if="item.type == 'bannerSector'" class="moduleBox">
-                <bannerSector />
-              </div>
-              <!-- 多图模块 --> 
-              <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-                <manyPictureSector />
-              </div>
-              <!-- 评论模块 --> 
-              <div v-if="item.type == 'commentSector'" class="moduleBox">
-                <commentSector />
-              </div>
-              <!-- 双联文章列表模块 --> 
-              <div v-if="item.type == 'listSector'" class="moduleBox">
-                <listSector />
-              </div>
-            </div>
-          </grid-item>
-        </grid-layout>
+        <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 === 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 === 6 ? 'active' : '']" @click="openPage(6)">自定义列表页</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>
     <!-- 栅格布局 预览模式 end ---------------------------------------->
-
   </div>
 </template>
 
@@ -73,32 +37,17 @@
 //引入公用样式
 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';
-//自助建站组件 end------------------------------------------------------------>
+//页面组件 start------------------------------------------------------------>
+import pageIndex from './page/pageIndex.vue';
+//页面组件 end------------------------------------------------------------>
 
 export default {
   components: {
-    GridLayout,
-    GridItem,
-    //板块组件 style1
-    headSector,
-    menuSector,
-    imgTitleSector,
-    bannerSector,
-    manyPictureSector,
-    commentSector,
-    listSector
+    //引入页面组件
+    pageIndex
   },
   data() {
     return {
@@ -106,30 +55,12 @@ export default {
       windowStatus: false,
       editPageStatus:1,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
       rowHeight:10,
+      pageStatus:[],
       //0.全局配置 end------------------------------------------------------------>
 
       //1.编辑模块 start------------------------------------------------------------>
       formLabelWidth: '120px',
-      editModule: "",//待编辑的模块
       //1.编辑模块 end------------------------------------------------------------>
-
-      //2.保存的页面信息 start------------------------------------------------------------>
-      pageData:{
-        page_index:{
-          
-        },
-        page_theme:{
-          
-        },
-        page_list:{
-          
-        },
-        page_article:{
-          
-        }
-      }
-      //2.保存的页面信息 start------------------------------------------------------------>
-
     }
   },
   methods: {
@@ -149,35 +80,6 @@ export default {
         path: '/templateList'
       });
     },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //添加模块
-    // addModule(type) {
-    //   //type 组件名称 
-    //   // 计算当前布局的最大 y 值
-    //   const maxY = Math.max(...this.layout.map(item => item.y), 0);
-    //   // type=1 顶部菜单
-    //   if(type==1){
-    //     this.layout.push({
-    //       i: this.layout.length, 
-    //       x: 0, 
-    //       y: maxY + 1, 
-    //       w: 12, 
-    //       h: 1, 
-    //       type: type,
-    //       content:""
-    //     });
-    //   }
-    // },
-    //删除模块
-    deleteModule(item) {
-      //找到对应的模块删除掉
-      for(let i = 0; i < this.layout.length; i++) {
-        if(this.layout[i].i == item.i) {
-          this.layout.splice(i, 1);
-        }
-      }
-    },
     //打开弹出框
     openWindow(item) {
       this.editModule = item.i;
@@ -186,7 +88,12 @@ export default {
     //关闭弹出框
     closeWindow() {
       this.windowStatus = false;
-    }
+    },
+    //切换编辑的页面
+    openPage(num){
+      this.$store.commit('template/setPageStatus',num);
+    },
+    //0.全局操作 end ------------------------------------------------------------>
   },
   mounted(){
     //设置网站id