构建json和修改bug

构建json和修改bug

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

@@ -212,7 +212,7 @@ export default {
           },
           {
             component_type:1,
-            component_style:1,//该组件使用哪个展示样式
+            component_style:2,//该组件使用哪个展示样式
             component_name:"tabsCalendarNews",
             sort:2,
             componentData:{

src/store/modules/template.js

@@ -248,70 +248,71 @@ const mutations = {
   },
   //移动板块 (暂时停用)
   moveModule(state, data) {
+    Message.error('移动板块功能暂时停用！');
     // pageStatus == 1 首页
-    if (state.pageStatus == 1) {
-      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;
-      }
-      const thisY = modules[thisIndex].y;
-      let thatY;
-      if (moveType === 'up') {
-        thatY = Math.max(
-          ...modules.filter(item => item.y < thisY).map(item => item.y)
-        );
-        if (thatY === -Infinity) {
-          Message.error('已经是顶部了！');
-          return;
-        }
-        const thatIndex = modules.findIndex(item => item.y === thatY);
-        if (thatIndex === -1) {
-          Message.error('上方模块未找到！');
-          return;
-        }
-        [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
+    // if (state.pageStatus == 1) {
+    //   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;
+    //   }
+    //   const thisY = modules[thisIndex].y;
+    //   let thatY;
+    //   if (moveType === 'up') {
+    //     thatY = Math.max(
+    //       ...modules.filter(item => item.y < thisY).map(item => item.y)
+    //     );
+    //     if (thatY === -Infinity) {
+    //       Message.error('已经是顶部了！');
+    //       return;
+    //     }
+    //     const thatIndex = modules.findIndex(item => item.y === thatY);
+    //     if (thatIndex === -1) {
+    //       Message.error('上方模块未找到！');
+    //       return;
+    //     }
+    //     [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
 
-      } else if (moveType === 'down') {
-        thatY = Math.min(
-          ...modules.filter(item => item.y > thisY).map(item => item.y)
-        );
-        if (thatY === Infinity) {
-          Message.error('已经是底部了！');
-          return;
-        }
-        const thatIndex = modules.findIndex(item => item.y === thatY);
-        if (thatIndex === -1) {
-          Message.error('下方模块未找到！');
-          return;
-        }
-        [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
-      } else {
-        Message.error('未知的移动类型！');
-        return;
-      }
-      // 交换后对模块进行排序以确保顺序一致
-      modules.sort((a, b) => a.y - b.y);
-      // 使用 Vue.set 强制更新数组，确保视图更新
-      Vue.set(state.pageData, 'index', [...modules]);
-      console.log(state.pageData.index); //打印查看是否已修改
-    }
+    //   } else if (moveType === 'down') {
+    //     thatY = Math.min(
+    //       ...modules.filter(item => item.y > thisY).map(item => item.y)
+    //     );
+    //     if (thatY === Infinity) {
+    //       Message.error('已经是底部了！');
+    //       return;
+    //     }
+    //     const thatIndex = modules.findIndex(item => item.y === thatY);
+    //     if (thatIndex === -1) {
+    //       Message.error('下方模块未找到！');
+    //       return;
+    //     }
+    //     [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
+    //   } else {
+    //     Message.error('未知的移动类型！');
+    //     return;
+    //   }
+    //   // 交换后对模块进行排序以确保顺序一致
+    //   modules.sort((a, b) => a.y - b.y);
+    //   // 使用 Vue.set 强制更新数组，确保视图更新
+    //   Vue.set(state.pageData, 'index', [...modules]);
+    //   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) {}
+    // 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){

src/views/chat/contacts.vue

@@ -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">

src/views/chat/hall.vue

@@ -2203,39 +2203,76 @@ export default {
       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)
-        //滚动条滚动到底部
-        this.scorllBottom();
+      //先判断是否为群消息
+      if (message.receiver_id.length == 18) {
+        //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{
+        //非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();
+        }
       }
-      
     },
     // 5.2 发送消息
     sendUserMessage() {
@@ -3001,7 +3038,7 @@ export default {
         .rightSlideSearch {
           padding: 30px 25px 0 25px;
           height: 66px;
-          overflow: hidden;
+          //overflow: hidden;
           position: relative;
           .searchFriendBox {
             position: absolute;

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

src/views/template/page/pageIndex.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="grid-layout-demo">
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]"><!--1-->
       <headSector />
     </div>
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]"><!--2-->
       <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>
     <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 class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
             <!-- <span><i class="el-icon-setting"></i></span> -->
             <!-- 移动板块 暂时停用 会导致组件视图不更新的问题-->
-            <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-upload2"></i></span>
-            <span @click="moveModule(item.i,'down')"><i class="el-icon-download"></i></span> -->
+            <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)"><i class="el-icon-close"></i></span>
           </div>
           <!-- 页头板块 -->
@@ -28,38 +28,38 @@
           <!-- <div v-if="item.type == 'menuSector'" class="moduleBox">
             <menuSector :id="item.i"/>
           </div> -->
-          <!-- 图片标题模块 --> 
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+          <!-- 图片标题模块 --><!--4-->
+          <div v-if="item.type == 'imgTitleSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <imgTitleSector :id="item.i"/>
           </div>
-          <!-- 焦点图模块 --> 
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
+          <!-- 焦点图模块 --><!--5-->
+          <div v-if="item.type == 'bannerSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <bannerSector :id="item.i"/>
           </div>
-          <!-- 多图模块 --> 
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+          <!-- 多图模块 --><!--6-->
+          <div v-if="item.type == 'manyPictureSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <manyPictureSector :id="item.i"/>
           </div>
-          <!-- 评论模块 --> 
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
+          <!-- 评论模块 --><!--7-->
+          <div v-if="item.type == 'commentSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <commentSector :id="item.i"/>
           </div>
           <!-- 双联文章列表模块 --> 
-          <div v-if="item.type == 'listSector'" class="moduleBox">
+          <div v-if="item.type == 'listSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <listSector :id="item.i"/>
           </div>
           <!-- 纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+          <div v-if="item.type == 'onlyImgSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <onlyImgSector :id="item.i"/>
           </div>
           <!-- 友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+          <div v-if="item.type == 'friendShipLinkSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
             <friendShipLinkSector :id="item.i"/>
           </div>
           <!-- 页尾板块 --> 
           <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
             <footerSector />
-          </div> -->
+          </div> --><!--3-->
         </div>
       </grid-item>
     </grid-layout>
@@ -79,16 +79,16 @@ import { GridLayout, GridItem } from 'vue-grid-layout';
 
 //自助建站组件 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 {
@@ -177,6 +177,9 @@ export default {
     position: relative;
     justify-content: space-between;
     box-sizing: border-box;
+    //border: 2px dashed #eee;
+  }
+  .moduleBoxBorder {
     border: 2px dashed #eee;
   }
   //固定的模块
@@ -186,7 +189,6 @@ export default {
   }
   .FixedMainModuleBox {
     width: 100%;
-    border: 2px dashed #eee;
     font-size: 18px;
     color: #999;
     text-align: center;
@@ -196,6 +198,9 @@ export default {
     padding: 100px;
     background: #F5F7FB;
   }
+  .FixedMainModuleBoxBorder {
+    border: 2px dashed #eee;
+  }
   //模块 end------------------------------------------------------------> 
   //栅格布局 start------------------------------------------------------------> 
   .grid-item-content {
@@ -206,6 +211,7 @@ export default {
     height: 100%;
     overflow: hidden;
     position: relative;
+    
     .grid-tools-menu {
       position: absolute;
       top: 0;

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>

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>

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/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/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/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,70 @@
+<template>
+  <div class="friendShipLinkSectorBox">
+    <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <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', {componentBorder: $store.state.template.previewStatus==false}]">
+      <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 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
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .friendShipLinkSectorBox {
+    .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%;
+      //border: 2px dashed #999;
+      position: relative;
+    }
+  }
+</style>

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

@@ -0,0 +1,149 @@
+<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: {
+    id: {
+      type: Number,
+      default: 0
+    }
+  },
+  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%;
+    .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;
+      .menuSectorInputBoxItem {
+        .el-input {
+          width: 100px;
+        }
+      }
+    }
+    .componentMenuBorder {
+      border: 2px dashed #999;
+    }
+  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
+    width: 100px !important;
+  }
+  //执行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,66 @@
+<template>
+  <div class="imgTitleSectorBox">
+    <div class="imgSectorBox">
+      <editBtn :id="id" :sort="0" :type="3" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="3"/>
+      <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].content.componentList[0].component_style == 2">
+        <useStyle2 />
+      </div>
+      <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>
+
+<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
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .imgTitleSectorBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .imgSectorBox {
+      //border: 2px dashed #999;
+      width: 80%;
+      height: 60px;
+      position: relative;
+    }
+  }
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="bannerBox">
+    <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <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">
+        <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', {componentBorder: $store.state.template.previewStatus==false}]">
+        <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 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
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bannerBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 340px;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .itemTopBox {
+      position: relative;
+      //border: 2px dashed #999;
+      transition: all 0.3s;
+      width: 80%;
+    }
+    .itemBottomBox {
+      width: 80%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 0 0 0;
+      height: 300px;
+      .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,137 @@
+<template>
+  <div class="manyPictureSectorBox">
+    <div :class="['manyPictureSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <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="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', {componentBorder: $store.state.template.previewStatus==false}]">
+        <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', {componentBorder: $store.state.template.previewStatus==false}]">
+        <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 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
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .manyPictureSectorBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:100%;
+    position: relative;
+    .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,103 @@
+<template>
+  <div class="commentSectorBox">
+    <div :class="['commentSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <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', {componentBorder: $store.state.template.previewStatus==false}]">
+        <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">
+        <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 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
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .commentSectorBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .commentSectorBoxTitle {
+      width: 80%;
+      height: 41px;
+      position: relative;
+    }
+    .commentSectorBoxContent {
+      width: 80%;
+      display: flex;
+      .tabsCalendarNewsBox {
+        width: 70%;
+        box-sizing: border-box;
+        padding-right: 20px;
+        position: relative;
+      }
+      .calendarBox {
+        position: relative;
+        width: 30%;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="listSectorBox">
+    <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <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', {componentBorder: $store.state.template.previewStatus==false}]">
+      <div class="listNewsLeft">
+        <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', {componentBorder: $store.state.template.previewStatus==false}]">
+        <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 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
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listSectorBox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:100%;
+    .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%;
+      .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,48 @@
+<template>
+  <div class="onlyImgSectorBox">
+    <div class="onlyImgSectorPositionBox">
+      <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 convertBtn from '../../../public/convertBtn.vue'
+import staticHtml2Style from '../components/staticHtml/2.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    staticHtml2Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .onlyImgSectorBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .onlyImgSectorPositionBox {
+      width: 80%;
+      height: 100%;
+      position: relative;
+    }
+  }
+</style>