修改bug

修改bug

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

@@ -6,7 +6,7 @@
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('mainListSector',33,mainListSector)" @drag="drag('mainListSector',33,mainListSector)" @dragend="dragend('mainListSector',33,mainListSector)" >
+    <div class="sectorItemBox" @click="addModule('mainListSector',92,mainListSector)" @drag="drag('mainListSector',33,mainListSector)" @dragend="dragend('mainListSector',33,mainListSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/listSector.png"/>
       </div>
@@ -151,7 +151,7 @@ export default {
           },
         ]
       }
-      //友情链接板块 end---------------------------------------->
+      //主文章列表 end---------------------------------------->
 
     }
   },

src/store/modules/template.js

@@ -197,9 +197,50 @@ const mutations = {
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
+    if(state.pageStatus == 3){
+      const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      
+      const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -367,7 +408,78 @@ const mutations = {
       //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==4 详情页 article
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.article.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //判断是拖拽的还是点击添加进来的 click=点击
+        if(data.source == "click"){
+          console.log("通过点击添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.article.length;
+
+          //添加板块id  
+          state.pageData.article.push({
+            i: id,
+            x: 0, 
+            y: maxY + 1, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+
+        }
+
+        //drag=拖拽
+        if(data.source == "drag"){
+          //拖拽添加
+          console.log("通过拖拽添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.article.length;
+          //添加板块id  
+          state.pageData.article.push({
+            //i: state.pageData.article.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: data.x, 
+            y: data.y, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.article);
+          //需要调查一下这里最后的1，1
+          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
+          try {
+            state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display="block";
+          } catch {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页 search
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页 aloneList
@@ -414,7 +526,19 @@ const mutations = {
       //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      //必须通过重新查找id的方式来删除
+      const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
+      if (indexToRemove !== -1) {
+        state.pageData.article.splice(indexToRemove, 1);
+        Message.success('模块已删除！');
+        console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
+      } else {
+        Message.warning('未找到要删除的模块！');
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -470,7 +594,24 @@ const mutations = {
       //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      // 获取当前模块数据并进行深拷贝
+      let module = JSON.parse(JSON.stringify(state.pageData.article[dataSort]));
+      //module.content.componentList[sort].component_style = num;
+      //确保修改属性时 Vue 能监控到变化
+      Vue.set(module.content.componentList, sort, {
+        ...module.content.componentList[sort],
+        component_style: num
+      });
+      // 拷贝后直接替换原来的板块
+      //state.pageData.index[id] = module;
+      // 使用Vue.set来强制视图更新
+      Vue.set(state.pageData.article, dataSort, module);
+      console.log("当前的板块数据为：");
+      console.log(state.pageData.article);
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -597,7 +738,53 @@ const mutations = {
       //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
+      console.log("要修改的模块id为：") //找到要修改的板块
+      console.log(data.sort) //找到要修改的板块
+      console.log(targetModuleIndex) //找到要修改的板块
+      if(state.editComponentType == 1){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.article, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.article, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -780,7 +967,49 @@ const mutations = {
       //开始复制 end------------------------------------------------------------>
     }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      //开始复制 start------------------------------------------------------------>
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //console.log(parentRect); 获取画布
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+      }
+      //如果没有占位符就创建一个
+      if (mouseInGrid === true && (state.pageData.article.findIndex(item => item.i === 'drop')) === -1) {
+        state.pageData.article.push({
+          x: (state.pageData.article.length * 2) % (this.colNum || 12),
+          y: state.pageData.article.length + (this.colNum || 12), // puts it at the bottom
+          w: 12,
+          h: 2,
+          i: 'drop',
+        });
+      }
+      //如果已经存在占位符
+      let index = state.pageData.article.findIndex(item => item.i === 'drop');
+      if (index !== -1) {
+        try {
+          state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "none";
+        } catch {
+
+        }
+        let el = state.gridlayoutObj.$children[index];
+        el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
+        let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+
+        if (mouseInGrid === true) {
+          state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.DragPos.i = String(index);
+          state.DragPos.x = state.pageData.article[index].x;
+          state.DragPos.y = state.pageData.article[index].y;
+        }
+        if (mouseInGrid === false) {
+          state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -867,7 +1096,34 @@ const mutations = {
       //开始复制 end------------------------------------------------------------>
     }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      //开始复制 start------------------------------------------------------------>
+      //获取画布尺寸
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //判断是否在画布内
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+          mouseInGrid = true;
+      }
+      //如果在画布内，开始创建元素
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+        state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
+        state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
+
+        let sendData = {
+          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
+          type:data.type,
+          h:data.h,
+          jsonData:data.jsonData,
+          x: state.DragPos.x,
+          y: state.DragPos.y,
+          w: 12,
+        }
+        this.commit('template/addModule',sendData);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -892,7 +1148,11 @@ const mutations = {
       console.log(state.pageData.list[data.i]);
     }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      console.log(data);
+      state.pageData.article[data.i].h = data.h;
+      console.log(state.pageData.article[data.i]);
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -926,6 +1186,9 @@ const mutations = {
     if (data.type == "list") {
       state.webSiteData.template.list = websiteData;
     }
+    if (data.type == "article") {
+      state.webSiteData.template.article = websiteData;
+    }
   },
   //保存模板
   saveTemplate(state) {
@@ -936,6 +1199,8 @@ const mutations = {
     this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
     //格式化list的信息
     this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
+    //格式化article的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.article,type:"article"});
     console.log(state.webSiteData);
   },
   //随机生成模板

src/views/chat/hall.vue

@@ -2506,6 +2506,25 @@ export default {
       this.imgZoomUrl = url;
       this.imgZoomStatus = true;
     },
+    //5.9 创建链接 防止websocket意外中断
+    getWebsocket(){
+      //判断当前的route是否为/hall，否则不触发这个方法
+      if(this.$route.path=="/hall"){
+        this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
+          confirmButtonText: '重新连接',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //强制刷新页面
+          window.location.reload();
+        }).catch(() => {
+          //取消刷新
+          this.$message.error("您的连接已中断！")
+        });
+      }else{
+        console.log("前往其他页面，关闭ws！")
+      }
+    }
     //5.websocket会话 end---------------------------------------->
   },
   mounted() {
@@ -2523,7 +2542,9 @@ export default {
     //当连接关闭的时候关闭websocket
     this.ws.addEventListener('close', function (event) {
       // 连接关闭时执行的操作
-      console.log("关闭链接",event)
+      console.log("连接被关闭！",event)
+      // 弹窗询问用户是否手动刷新
+      that.getWebsocket();
     });
     
     //开启websocket连接 end---------------------------------------->

src/views/template/public/componentWindow.vue

@@ -194,6 +194,21 @@
           </table>
         </div>
         <!--9.友情链接组件 end---------------------------------------->
+
+        <!--10.列表页-主文章列表 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/list/list3style.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--10.列表页-主文章列表 end---------------------------------------->
+
       </div>
     </div>
     <div class="componentWindowBoxFooter">

src/views/template/public/convertBtn.vue

@@ -37,8 +37,12 @@ export default {
         style = this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style;
       }
       if(this.$store.state.template.pageStatus==2){}
-      if(this.$store.state.template.pageStatus==3){}
-      if(this.$store.state.template.pageStatus==4){}
+      if(this.$store.state.template.pageStatus==3){
+        style = this.$store.state.template.pageData.list[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==4){
+        style = this.$store.state.template.pageData.article[this.dataSort].content.componentList[this.sort].component_style;
+      }
       if(this.$store.state.template.pageStatus==5){}
       if(this.$store.state.template.pageStatus==6){}
       if(this.$store.state.template.pageStatus==7){}

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

@@ -1,6 +1,36 @@
 <template>
-  <div>
-    1
+  <div class="NewsListBox">
+    <div class="listMainBox">
+      <div class="listMainTitle">
+        <span>地方动态</span>
+      </div>
+    </div>
+    <div class="NewsPageListBox">
+      <ul>
+        <li><a href="javascript:void">喜报!河池近日，启明创投、中国乡村发展基金会、四川蒙顶山合作社发展培训学院</a></li>
+        <li><a href="javascript:void">[营口]省专家组对我市生猪屠宰企业升级改造进行现场指导</a></li>
+        <li><a href="javascript:void">[辽宁]开启动物疫病防控和检疫工作新篇章——辽宁省动物疫病预防控制中心举行挂</a></li>
+        <li><a href="javascript:void">暖边绿境”共建活动情暖边境职工 在东港五四农场结硕果</a></li>
+        <li><a href="javascript:void">吉林省长春市大田播种陆续展开 粮食作物播种面积稳定在2500万亩</a></li>
+        <li><a href="javascript:void">喜报!河池近日，启明创投、中国乡村发展基金会、四川蒙顶山合作社发展培训学院</a></li>
+        <li><a href="javascript:void">[营口]省专家组对我市生猪屠宰企业升级改造进行现场指导</a></li>
+        <li><a href="javascript:void">[辽宁]开启动物疫病防控和检疫工作新篇章——辽宁省动物疫病预防控制中心举行挂</a></li>
+        <li><a href="javascript:void">暖边绿境”共建活动情暖边境职工 在东港五四农场结硕果</a></li>
+        <li><a href="javascript:void">吉林省长春市大田播种陆续展开 粮食作物播种面积稳定在2500万亩</a></li>
+        <li><a href="javascript:void">喜报!河池近日，启明创投、中国乡村发展基金会、四川蒙顶山合作社发展培训学院</a></li>
+        <li><a href="javascript:void">[营口]省专家组对我市生猪屠宰企业升级改造进行现场指导</a></li>
+        <li><a href="javascript:void">[辽宁]开启动物疫病防控和检疫工作新篇章——辽宁省动物疫病预防控制中心举行挂</a></li>
+        <li><a href="javascript:void">暖边绿境”共建活动情暖边境职工 在东港五四农场结硕果</a></li>
+        <li><a href="javascript:void">吉林省长春市大田播种陆续展开 粮食作物播种面积稳定在2500万亩</a></li>
+      </ul>
+    </div>
+    <div class="paginationBox">
+      <el-pagination
+        background
+        layout="total,prev,pager,next"
+        :total="1000">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -24,5 +54,52 @@ export default {
 </script>
 
 <style scoped lang="less">
+  .NewsListBox {
+    width: 100%;
+    .listMainBox {
+      padding-top: 20px;
+      margin-bottom: 30px;
+      .listMainTitle {
+        width: 100%;
+        border-bottom: 1px solid #D9D9D9;
+        height: 48px;
+        span {
+          border-bottom: 2px solid #19499F;
+          height: 48px;
+          line-height: 48px;
+          display: inline-block;
+          color: #19499F;
+          font-weight: bold;
+        }
+      }
+    }
+    .NewsPageListBox {
+      ul {
+        padding: 0;
+        margin: 0;
+        li {
+          list-style-type: none;
+          padding-left: 16px;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left center;
+          margin-bottom: 20px;
+        }
+        li:nth-child(5n) {
+          padding-bottom: 30px;
+          margin-bottom: 30px;
+          border-bottom:1px dashed #D9D9D9;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left 7px;
+        }
+        li:nth-child(15) {
+          padding-bottom: 30px;
+          margin-bottom: 30px;
+          border-bottom:0;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left 7px;
+        }
+      }
+    }
+    .paginationBox {
+      text-align: center;
+    }
+  }
   
 </style>

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

@@ -3,15 +3,45 @@
     <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <title1Style />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
       </div>
     </div>
     <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-        <link1Style />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
       </div>
     </div>
   </div>

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

@@ -1,8 +1,8 @@
 <template>
   <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-    <div class="listSectorMainBox">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="20" :y="y"/>
-      <convertBtn :id="id" :sort="0" :type="3"/>
+    <div :class="['listSectorMainBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="15" :y="y"/>
+      <convertBtn :id="id" :sort="0" :type="10"/>
       <list1Style />
     </div>
   </div>
@@ -44,16 +44,20 @@ export default {
 <style scoped lang="less">
   .listSectorBox {
     width: 100%;
-    height: 200px;
+    height: 900px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
     .listSectorMainBox {
       width: 80%;
-      height: 200px;
+      height: 900px;
       display: flex;
       flex-direction: column;
       align-items: center;
+      position: relative;
     }
   }
 </style>

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

@@ -33,7 +33,22 @@
           <useStyle4 />
         </div>
       </div>
-      
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <useStyle1 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 2">
+          <useStyle2 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 3">
+          <useStyle3 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 4">
+          <useStyle4 />
+        </div>
+      </div>
+
     </div>
   </div>
 </template>

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

@@ -3,11 +3,27 @@
     <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <title1Style />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
       </div>
     </div>
-    <div class="listSectorBoxContent">
+    <!--index页面-->
+    <div class="listSectorBoxContent" v-if="this.$store.state.template.pageStatus == 1">
       <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
         <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
@@ -35,6 +51,64 @@
         </div>
       </div>
     </div>
+    <!--list页面-->
+    <div class="listSectorBoxContent" v-if="this.$store.state.template.pageStatus == 3">
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+    </div>
+    <!--article页面-->
+    <div class="listSectorBoxContent" v-if="this.$store.state.template.pageStatus == 4">
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+    </div>
   </div>
 </template>