构建数据json

构建数据json

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

@@ -24,7 +24,7 @@
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)">
+    <div class="sectorItemBox" @click="addModule('manyPictureSector',46,manyPictureSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>

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

@@ -27,6 +27,9 @@
         <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>
@@ -45,6 +48,7 @@ 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: {
@@ -56,7 +60,8 @@ export default {
     mainTitleStyle2,
     banner1Style,
     banner2Style,
-    tabs1Style
+    tabs1Style,
+    tabs2Style
   },
   props: {
     id:{

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

@@ -1,29 +1,55 @@
 <template>
   <div class="commentSectorBox">
     <div class="commentSectorBoxTitle">
-      <styleTitle :id="id" :sort="1"/>
+      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="2"/>
+      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
+        <title1Style />
+      </div>
     </div>
     <div class="commentSectorBoxContent">
       <div class="tabsCalendarNewsBox">
-        <tabsCalendarNews :id="id" :sort="2"/>
+        <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">
+          <tabs1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
+          <tabs2Style />
+        </div>
       </div>
       <div class="calendarBox">
-        <calendar :id="id" :sort="3"/>
+        <!-- <calendar :id="id" :sort="3"/> -->
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import styleTitle from './components/styleTitle.vue';
-import tabsCalendarNews from './components/tabsCalendarNews.vue';
-import calendar from './components/calendar.vue';
+//编辑按钮
+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 styleTitle from './components/styleTitle.vue';
+// import tabsCalendarNews from './components/tabsCalendarNews.vue';
+// import calendar from './components/calendar.vue';
 
 export default {
   components: {
-    styleTitle,
-    tabsCalendarNews,
-    calendar
+    editBtn,
+    convertBtn,
+    title1Style,
+    tabs1Style,
+    tabs2Style
+    // styleTitle,
+    // tabsCalendarNews,
+    // calendar
   },
   props: {
     id: {
@@ -56,9 +82,7 @@ export default {
       width: 80%;
       border: 1px dashed #5570F1;
       height: 41px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      position: relative;
     }
     .commentSectorBoxContent {
       width: 80%;

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

@@ -0,0 +1,141 @@
+<template>
+  <div class="tabsCalendarMainNewsBox">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="市场资讯" name="sczx">
+        <ul class="newsListBox">
+          <li class="newsCalendarBox">
+            <div class="CalendarItemBox">
+              <div class="Calendar">
+                <div class="CalendarDay">3</div>
+                <div class="CalendarMonth">2024-12</div>
+              </div>
+              <div class="CalendarNewsTitle">
+                <div class="CalendarTitle">商务部：牢牢把握产业振兴，在抓好农产品冷链物流等方面采取更多务实举措</div>
+                <div class="newsContent">会议总结了前一阶段工作情况，研究商务服务乡村振兴重点工作和定点帮扶工作计划，部署下一步工作。 </div>
+              </div>
+            </div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="市场行情" name="schq"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      activeName:""
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsCalendarMainNewsBox {
+    width: 100%;
+    position: relative;
+    .newsListBox {
+      padding-left: 0;
+      .newsCalendarBox {
+        list-style-type: none;
+        margin-bottom: 20px;
+        width: 100%;
+        .CalendarItemBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          .Calendar {
+            width: 100px;
+            height: 100px;
+            background: #EAF3FF;
+            box-sizing: border-box;
+            padding: 10px 10px 0 10px;
+            margin-right: 25px;
+            .CalendarDay {
+              font-size: 38px;
+              color: #19499F;
+              text-align: center;
+              padding-bottom: 10px;
+              border-bottom: 1px solid #19499F;
+            }
+            .CalendarMonth {
+              font-size: 16px;
+              color: #19499F;
+              text-align: center;
+              padding-top: 10px;
+            }
+          }
+          .CalendarNewsTitle {
+            flex: 1;
+            .CalendarTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .newsContent {
+              font-size: 16px;
+              color: #999999;
+              padding-top: 10px;
+            }
+          }
+        }
+      }
+      .newsItemBox {
+        list-style-type: none;
+        height: 20px;
+        margin-bottom: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -40,5 +40,6 @@ export default {
   }
   .titleBoxStyle1{
     background: url('../../../../../../assets/template/component/titleStyle1.png') no-repeat center center;
+    width: 100%;
   }
 </style>

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

@@ -23,7 +23,11 @@
         </div>
       </div>
       <div class="manyPictureNewsItem">
-        <!-- <listNews :id="id" :sort="4"/> -->
+        <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>
     </div>
   </div>
@@ -83,9 +87,6 @@ export default {
       width: 80%;
       border: 1px dashed #5570F1;
       height: 41px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       position: relative;
     }
     .manyPictureSectorBox {
@@ -102,6 +103,7 @@ export default {
         width: 50%;
         border: 1px dashed #5570F1;
         box-sizing: border-box;
+        position: relative;
       }
       .manyPictureNewsItem:nth-child(1) {
         padding-right: 10px;