构建数据json

构建数据json

src/api/chat.js

@@ -199,6 +199,15 @@ export function updateGroupMembers(data) {
     data
   })
 }
+
+//5.9 退出群聊
+export function quitGroup(data) {
+  return request({
+    url: '/chat/quitGroup',
+    method: 'post',
+    data
+  })
+}
 //5.群聊 end ------------------------------------->
 
 //6.商圈 start ------------------------------------->

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

@@ -1,54 +1,54 @@
 <template>
   <div class="sectorBox">
-    <!-- <div class="sectorItemBox" @click="addIndexModule('headSector',19)">
+    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/headSector.png" />
       </div>
       <div class="sectorItemTitle">页头</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('menuSector',2)">
+    <div class="sectorItemBox" @click="addModule('menuSector',2)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/menuSector.png" />
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6,imgTitleSector)">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',6,imgTitleSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('bannerSector',34,bannerSector)">
+    <div class="sectorItemBox" @click="addModule('bannerSector',34,bannerSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/bannerSector.png"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('manyPictureSector',41,manyPictureSector)">
+    <div class="sectorItemBox" @click="addModule('manyPictureSector',41,manyPictureSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('commentSector',40,commentSector)">
+    <div class="sectorItemBox" @click="addModule('commentSector',40,commentSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/commentSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('listSector',28,listSector)">
+    <div class="sectorItemBox" @click="addModule('listSector',28,listSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/newsSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('onlyImgSector',24,onlyImgSector)">
+    <div class="sectorItemBox" @click="addModule('onlyImgSector',24,onlyImgSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgSector.png"/> 
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
-    <div class="sectorItemBox" @click="addIndexModule('friendShipLinkSector',15,friendShipLinkSector)">
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',15,friendShipLinkSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/linkSector.png"/>
       </div>
@@ -56,7 +56,7 @@
     </div>
     <!-- <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/footerSector.png" @click="addIndexModule('footerSector',38)"/>
+        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
       </div>
       <div class="sectorItemTitle">页尾板块</div>
     </div> -->
@@ -325,14 +325,14 @@ export default {
     }
   },
   methods: {
-    addIndexModule(type,h,jsonData){
+    addModule(type,h,jsonData){
       let data = {
         type: type,
         h: h,
         jsonData: jsonData
       }
       console.log(data);
-      this.$store.commit('template/addIndexModule',data);
+      this.$store.commit('template/addModule',data);
     }
   }
 }

src/store/modules/chat.js

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

src/store/modules/template.js

@@ -81,7 +81,7 @@ const state = {
 
 const mutations = {
   //0.全局配置 start------------------------------------------------------------>
-  //设置创建网站的id
+  //设置网站的id
   setEditWebsiteId(state,id){
     state.editWebsiteId = id;
   },
@@ -93,12 +93,12 @@ const mutations = {
   hiddenStepStatus(state){
     state.stepStatus = false;
   },
+  //设置步骤
   setPageStatus(state,num){
     state.pageStatus = num;
   },
   //打开编辑组件弹出框
   setEditWindowStatus(state,data){
-    console.log(data);
     state.editWindowStatus = true;
     state.editSectorId = data.id;
     state.editComponentSort = data.sort;
@@ -139,181 +139,196 @@ const mutations = {
     let sort = state.editComponentSort;
     let num = state.editComponentStyle;
 
-    // 获取当前模块数据并进行深拷贝
-    let module = JSON.parse(JSON.stringify(state.pageData.index[id]));
-    module.content.componentList[sort].component_style = num;
-    // 拷贝后直接替换原来的板块
-    //state.pageData.index[id] = module;
-    // 使用Vue.set来强制视图更新
-    Vue.set(state.pageData.index, id, module);
-    console.log("当前的板块数据为：");
-    console.log(state.pageData.index);
-
-    
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      // 获取当前模块数据并进行深拷贝
+      let module = JSON.parse(JSON.stringify(state.pageData.index[id]));
+      //module.content.componentList[sort].component_style = num;
+      //确保修改属性时 Vue 能监控到变化
+      Vue.set(module.content.componentList, sort, {
+        ...module.content.componentList[sort],
+        component_style: num
+      });
+      // 拷贝后直接替换原来的板块
+      //state.pageData.index[id] = module;
+      // 使用Vue.set来强制视图更新
+      Vue.set(state.pageData.index, id, module);
+      console.log("当前的板块数据为：");
+      console.log(state.pageData.index);
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
   },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
-  //添加首页板块
-  addIndexModule(state,data){
-    //判断当前一共有多少个模块最多能添加10个
-    if(state.pageData.index.length >= 10){
-      Message.error('最多只能添加10个模块！');
-      return;
-    }else{
-      //data.type 组件名称 data.h 模块高度 
-      //计算当前布局的最大 y 值
-      const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
-      console.log(data);
-      //添加板块id  
-      state.pageData.index.push({
-        i: state.pageData.index.length, 
-        x: 0, 
-        y: maxY + 1, 
-        w: 12, 
-        h: data.h, 
-        type: data.type,
-        //content:"",
-        //sectorData:data.jsonData
-        content:data.jsonData
-      });
-      // console.log("当前添加的板块id：" + state.pageData.index.length);
-      // data.jsonData.sectorId = state.pageData.index.length;
-      // console.log("添加完毕后的数据：");
-      // console.log(state.pageData.index);
+  //添加板块
+  addModule(state,data){
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.index.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //data.type 组件名称 data.h 模块高度 
+        //计算当前布局的最大 y 值
+        const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+        console.log(data);
+        //添加板块id  
+        state.pageData.index.push({
+          i: state.pageData.index.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: data.h, 
+          type: data.type,
+          //content:"",
+          //sectorData:data.jsonData
+          content:data.jsonData
+        });
+        // console.log("当前添加的板块id：" + state.pageData.index.length);
+        // data.jsonData.sectorId = state.pageData.index.length;
+        // console.log("添加完毕后的数据：");
+        // console.log(state.pageData.index);
+      }
     }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
   },
-  //删除首页板块
-  deleteIndexModule(state,data){
-    for(let i = 0; i < state.pageData.index.length; i++) {
-      if(state.pageData.index[i].i == data.i) {
-        state.pageData.index.splice(i, 1);
+  //删除板块
+  deleteModule(state,data){
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      for(let i = 0; i < state.pageData.index.length; i++) {
+        if(state.pageData.index[i].i == data.i) {
+          state.pageData.index.splice(i, 1);
+        }
       }
+      Message.success('模块已删除！');
+      console.log("删除后的数据结构：");
+      console.log(state.pageData.index);
     }
-    Message.success('模块已删除！');
-    console.log("删除后的数据结构：");
-    console.log(state.pageData.index);
-  },
-  //修改首页板块高度
-  setIndexModuleHeight(state,data){
-    console.log(data);
-    state.pageData.index[data.i].h = data.h;
-    console.log(state.pageData.index[data.i]);
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
   },
-  moveIndexModule(state, data) {
-    const moveType = data.moveType;
-    const moduleId = data.i;
-    const modules = state.pageData.index;
-    // 查找模块在数组中的实际索引
-    const thisIndex = modules.findIndex(module => module.i === moduleId);
-    if (thisIndex === -1) {
-      Message.error('模块未找到！');
-      return;
-    }
-    const thisY = modules[thisIndex].y;
-    
-    if (moveType === 'up') {
-      // 查找比当前模块 y 值小的最大的 y 值
-      const thatY = Math.max(
-        ...modules
-          .filter(item => item.y < thisY)
-          .map(item => item.y)
-      );
-      if (thatY === -Infinity) {
-        Message.error('已经是顶部了！');
+  //移动板块 (暂时停用)
+  moveModule(state, data) {
+    // 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;
       }
-      // 查找具有 thatY 的模块索引
-      const thatIndex = modules.findIndex(item => item.y === thatY);
-      if (thatIndex === -1) {
-        Message.error('上方模块未找到！');
-        return;
-      }
-      // 交换 y 值
-      [modules[thisIndex].y, modules[thatIndex].y] = [modules[thatIndex].y, modules[thisIndex].y];
+      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') {
-      // 查找比当前模块 y 值大的最小的 y 值
-      const thatY = Math.min(
-        ...modules
-          .filter(item => item.y > thisY)
-          .map(item => item.y)
-      );
-      if (thatY === Infinity) {
-        Message.error('已经是底部了！');
-        return;
-      }
-      // 查找具有 thatY 的模块索引
-      const thatIndex = modules.findIndex(item => item.y === thatY);
-      if (thatIndex === -1) {
-        Message.error('下方模块未找到！');
+      } 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;
       }
-      // 交换 y 值
-      [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); //打印查看是否已修改
     }
-    // 交换后对模块进行排序以确保顺序一致
-    state.pageData.index.sort((a, b) => a.y - b.y);
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
+  //修改首页板块高度
+  setIndexModuleHeight(state,data){
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      console.log(data);
+      state.pageData.index[data.i].h = data.h;
+      console.log(state.pageData.index[data.i]);
+    }
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
   },
-  //添加模块
-  // addModule(state,data) {
-  //   //data.type 组件名称 data.h 模块高度 
-  //   // 计算当前布局的最大 y 值
-  //   const maxY = Math.max(...state.layout.map(item => item.y), 0);
-  //   state.layout.push({
-  //     i: state.layout.length, 
-  //     x: 0, 
-  //     y: maxY + 1, 
-  //     w: 12, 
-  //     h: data.h, 
-  //     type: data.type,
-  //     content:""
-  //   });
-  // },
-  //删除模块
-  // deleteModule(item) {
-  //   //找到对应的模块删除掉
-  //   for(let i = 0; i < state.layout.length; i++) {
-  //     if(state.layout[i].i == item.i) {
-  //       state.layout.splice(i, 1);
-  //     }
-  //   }
-  // },
-  //移动模块
-  // moveIndexModule(state,data){
-  //   console.log(state.pageData.index[data.i]);
-
-  //   if(data.moveType == 'up'){
-      
-  //   }else{
-      
-  //     if(state.pageData.index[data.i].y === Math.max(...state.pageData.index.map(item => item.y))){
-  //       Message.error('已经是底部了！');
-  //     }else{
-  //       console.log(state.pageData.index);
-  //       //当前选择的模块
-  //       let thisIndex = data.i;
-  //       let thisY = state.pageData.index[thisIndex].y;
-        
-  //       //找到下方的模块的y值
-  //       //注意，这里不能用i去定位，因为模块是通过y值去排序的，跟数据的位置，i的位置都没有关系
-  //       const thatY = Math.min(...state.pageData.index
-  //         .filter(item => item.y > thisY)
-  //         .map(item => item.y), 
-  //         Infinity);
-  //       //再通过y值找到对应的模块i
-  //       const thatIndex = state.pageData.index.findIndex(item => item.y === thatY);
-        
-  //       //最后交换位置
-  //       state.pageData.index[thisIndex].y = thatY;
-  //       state.pageData.index[thatIndex].y = thisY;
-  //     }
-      
-  //   }
-  // },
   //格式化模板信息
   formatTemplateInfo(state, data) {
     //console.log(data.type);

src/views/chat/contacts.vue

@@ -30,7 +30,7 @@
           <div class="newFriendImg">
             <img src="@/assets/chat/newcontacts.png">
           </div>
-          <div class="newFriendText">
+          <div class="newFriendText" @click="searchFriend">
             搜索：{{searchUserName}}
           </div>
           <div class="searchFriendBox" v-if="searchWindowStatus==true">

src/views/template/page/pageIndex.vue

@@ -15,9 +15,10 @@
         <div class="grid-item-content">
           <div class="grid-tools-menu">
             <!-- <span><i class="el-icon-setting"></i></span> -->
-            <span @click="moveIndexModule(item.i,'up')"><i class="el-icon-upload2"></i></span>
-            <span @click="moveIndexModule(item.i,'down')"><i class="el-icon-download"></i></span>
-            <span @click="deleteIndexModule(item.i)"><i class="el-icon-delete"></i></span>
+            <!-- 移动板块 暂时停用 会导致组件视图不更新的问题-->
+            <!-- <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="deleteModule(item.i)"><i class="el-icon-close"></i></span>
           </div>
           <!-- 页头板块 -->
           <!-- <div v-if="item.type == 'headSector'" class="moduleBox">
@@ -140,12 +141,12 @@ export default {
 
     //1.模块操作 start ------------------------------------------------------------>
     //1.1 移动模块
-    moveIndexModule(i,moveType){
-      this.$store.commit('template/moveIndexModule',{i:i,moveType:moveType});
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
     },
     //1.2 删除模块
-    deleteIndexModule(i){
-      this.$store.commit('template/deleteIndexModule',{i:i});
+    deleteModule(i){
+      this.$store.commit('template/deleteModule',{i:i});
     },
     //1.3 打开弹出框
     openWindow(item) {
@@ -211,25 +212,32 @@ export default {
       align-items: center;
       justify-content: center;
       span {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        margin: 5px;
-        color: #000;
-        background: #fff;
-        border: 1px solid #000;
-        border-radius: 5px;
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
         text-align: center;
-        font-size: 14px;
-        transition: all 0.3s;
-        &:hover {
-          color: #fff;
-          background: #000;
-        }
+        font-size: 30px;
+        cursor: pointer;
+        color: #999;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // cursor: pointer;
+        // margin: 5px;
+        // color: #000;
+        // background: #fff;
+        // border: 1px solid #000;
+        // border-radius: 5px;
+        // width: 24px;
+        // height: 24px;
+        // line-height: 24px;
+        // text-align: center;
+        // font-size: 14px;
+        // transition: all 0.3s;
+        // &:hover {
+        //   color: #fff;
+        //   background: #000;
+        // }
       }
     }
   }

src/views/template/public/componentWindow.vue

@@ -15,6 +15,29 @@
     </div>
     <div class="componentStyleBox">
       <div class="componentStyleBoxContent">
+        <!--1=标题组件 3=广告组件-->
+        <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/mainStyle1.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                  <img src="@/assets/template/component/mainStyle2.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+
+
+
+
+
+
         <!--3.广告组件 start---------------------------------------->
         <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
           <table>
@@ -34,10 +57,17 @@
                   <img src="@/assets/template/component/style3imgTitle.png"/>
                 </div>
               </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                  <img src="@/assets/template/component/style4imgTitle.png"/>
+                </div>
+              </td>
             </tr>
           </table>
         </div>
         <!--3.广告组件 end---------------------------------------->
+
+        
       </div>
     </div>
     <div class="componentWindowBoxFooter">

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

@@ -1,7 +1,14 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
-      <mainTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="1" :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">
@@ -20,13 +27,21 @@ import mainTitle from './components/mainTitle.vue'
 import banner from './components/banner.vue'
 import tabsNews from './components/tabsNews.vue'
 import bgGreyNews from './components/bgGreyNews.vue'
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+import mainTitleStyle1 from './components/mainTitle/1.vue'
+import mainTitleStyle2 from './components/mainTitle/2.vue'
 
 export default {
   components: {
     mainTitle,
     banner,
     tabsNews,
-    bgGreyNews
+    bgGreyNews,
+    editBtn,
+    convertBtn,
+    mainTitleStyle1,
+    mainTitleStyle2
   },
   props: {
     id:{

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

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

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

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

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

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

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

@@ -12,6 +12,9 @@
       <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>
@@ -22,6 +25,7 @@ import convertBtn from '../../public/convertBtn.vue'
 import useStyle1 from './components/advertisement/1.vue'
 import useStyle2 from './components/advertisement/2.vue'
 import useStyle3 from './components/advertisement/3.vue'
+import useStyle4 from './components/advertisement/4.vue'
 
 export default {
   components: {
@@ -29,7 +33,8 @@ export default {
     convertBtn,
     useStyle1,
     useStyle2,
-    useStyle3
+    useStyle3,
+    useStyle4
   },
   props: {
     id:{