构建json

构建json

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

@@ -311,6 +311,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,//该组件使用哪个展示样式

src/store/modules/template.js

@@ -15,6 +15,7 @@ const state = {
   //1.画布数据 start------------------------------------------------------------>
   pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
   menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
+  previewStatus:false,//是否预览
   pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
     index:[
       
@@ -97,6 +98,10 @@ const mutations = {
   setPageStatus(state,num){
     state.pageStatus = num;
   },
+  //设置预览状态
+  setPreviewStatus(state){
+    state.previewStatus = !state.previewStatus;
+  },
   //打开编辑组件弹出框
   setEditWindowStatus(state,data){
     state.editWindowStatus = true;

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="nickname" 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="">

src/views/template/page/pageIndex.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="grid-layout-demo">
-    <div class="FixedModuleBox">
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <headSector />
     </div>
-    <div class="FixedModuleBox">
+    <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">
@@ -167,6 +167,9 @@ export default {
 
 <style scoped lang="less">
   //模块 start------------------------------------------------------------> 
+  .sectorBorder {
+    border: 2px dashed #eee;
+  }
   .moduleBox {
     display: flex;
     width: 100%;
@@ -174,16 +177,16 @@ export default {
     position: relative;
     justify-content: space-between;
     box-sizing: border-box;
-    border: 2px dashed #19499F;
+    border: 2px dashed #eee;
   }
   //固定的模块
   .FixedModuleBox {
     width: 100%;
-    border: 2px dashed #19499F;
+    //border: 2px dashed #eee;
   }
   .FixedMainModuleBox {
     width: 100%;
-    border: 2px dashed #19499F;
+    border: 2px dashed #eee;
     font-size: 18px;
     color: #999;
     text-align: center;
@@ -238,6 +241,10 @@ export default {
         //   color: #fff;
         //   background: #000;
         // }
+        transition: all 0.3s;
+        &:hover {
+          color: #333;
+        }
       }
     }
   }

src/views/template/public/componentWindow.vue

@@ -118,6 +118,16 @@
                   <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>
@@ -148,8 +158,19 @@
           </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">

src/views/template/public/convertBtn.vue

@@ -48,26 +48,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

@@ -57,20 +57,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/style/1/bannerSector.vue

@@ -93,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;
@@ -107,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

@@ -79,7 +79,7 @@ export default {
     align-items: center;
     .commentSectorBoxTitle {
       width: 80%;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
       height: 41px;
       position: relative;
     }
@@ -90,13 +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/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/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/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/staticHtml/2.vue

@@ -0,0 +1,92 @@
+<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;
+    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/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/imgTitleSector.vue

@@ -57,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

@@ -14,6 +14,12 @@
         <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">
         <editBtn :id="id" :sort="2" :type="1" :size="5"/>
@@ -21,6 +27,12 @@
         <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>
@@ -34,6 +46,8 @@ 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';
 
@@ -42,7 +56,9 @@ export default {
     editBtn, 
     convertBtn,
     title1Style,
-    list1Style
+    list1Style,
+    list2Style,
+    list3Style
   },
   props: {
     id:{
@@ -66,7 +82,7 @@ export default {
     width:100%;
     .listSectorBoxTitle {
       width: 80%;
-      border: 1px dashed #5570F1;
+      border: 2px dashed #999;
       height: 41px;
       position: relative;
     }
@@ -78,14 +94,14 @@ 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

@@ -7,7 +7,7 @@
         <title1Style />
       </div>
     </div>
-    <div class="manyPictureSectorBox">
+    <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">
@@ -21,6 +21,12 @@
         <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">
         <editBtn :id="id" :sort="3" :type="1" :size="5"/>
@@ -28,6 +34,12 @@
         <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>
@@ -43,6 +55,8 @@ 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 {
@@ -51,10 +65,9 @@ export default {
     convertBtn,
     title1Style,
     staticHtml1Style,
-    list1Style
-    // styleTitle,
-    // fivePicture,
-    // listNews
+    list1Style,
+    list2Style,
+    list3Style
   },
   props: {
     id:{
@@ -83,25 +96,29 @@ 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;
       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;
       }

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/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">随机生成</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>
@@ -119,6 +120,10 @@ export default {
     closeComponentStyleWindow(){
       this.$store.commit('template/closeComponentStyleStatus');
     },
+    //设置预览状态
+    setPreviewStatus(){
+      this.$store.commit('template/setPreviewStatus');
+    },
     //0.全局操作 end ------------------------------------------------------------>
   },
   mounted(){