自助建站增加一个静态链接通栏

自助建站增加一个静态链接通栏

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

@@ -41,10 +41,10 @@
             @click="addModule('linkSector', 26, linkSector)"
             @drag="drag('linkSector', 26, linkSector)" 
             @dragend="dragend('linkSector', 26, linkSector)"
-            v-if="this.$store.state.template.editWebsiteClass==2"
         >
             <div class="sectorItem">
-                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750921543723236.jpg"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250709/1752025989873169.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250626/1750921543723236.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
             </div>
             <div class="sectorItemTitle">外链面板</div>
         </div>

src/views/template/style/sector/body/index/link/1200x230/1.vue

@@ -1,29 +1,56 @@
 <template>
     <div :class="['linkSectorBox', { buildingBorder: this.$store.state.template.previewStatus == false }]">
-        <div class="linkSectorItem bg1">
-            <div class="linkSectorItemTitle">人员查询</div>
-            <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
-            <div class="linkSectorItemBtn">点击查询</div>
+        <!-- 
+            注意 ，该组件可以在首页与频道页中通用
+         -->
+        <div v-if="this.$store.state.template.editWebsiteClass==1" class="linkSectorStyle1Box">
+            <div class="linkSectorItem bg1">
+                <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026862529548.png" /></div>
+                <div class="linkSectorItemTitle">人员查询</div>
+            </div>
+            <div class="linkSectorItem bg1">
+                <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026870493018.png" /></div>
+                <div class="linkSectorItemTitle">车辆查询</div>
+            </div>
+            <div class="linkSectorItem bg1">
+                <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026884699420.png" /></div>
+                <div class="linkSectorItemTitle">调研选题</div>
+            </div>
+            <div class="linkSectorItem bg1">
+                <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/1752026896833808.png" /></div>
+                <div class="linkSectorItemTitle">地市中心</div>
+            </div>
+            <div class="linkSectorItem bg1">
+                <div class="linkSectorItemImg"><img src="http://img.bjzxtw.org.cn/pre/image/png/20250709/175202690385632.png" /></div>
+                <div class="linkSectorItemTitle">介绍信查询</div>
+            </div>
         </div>
-        <div class="linkSectorItem bg2">
-            <div class="linkSectorItemTitle">车辆查询</div>
-            <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
-            <div class="linkSectorItemBtn">点击查询</div>
-        </div>
-        <div class="linkSectorItem bg3">
-            <div class="linkSectorItemTitle">调研选题</div>
-            <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
-            <div class="linkSectorItemBtn">点击查询</div>
-        </div>
-        <div class="linkSectorItem bg4">
-            <div class="linkSectorItemTitle">地市中心</div>
-            <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
-            <div class="linkSectorItemBtn">点击查询</div>
-        </div>
-        <div class="linkSectorItem bg5">
-            <div class="linkSectorItemTitle">介绍信查询</div>
-            <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
-            <div class="linkSectorItemBtn">点击查询</div>
+        <div v-if="this.$store.state.template.editWebsiteClass==2" class="linkSectorStyle2Box">
+            <div class="linkSectorItem bg1">
+                <div class="linkSectorItemTitle">人员查询</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">点击查询</div>
+            </div>
+            <div class="linkSectorItem bg2">
+                <div class="linkSectorItemTitle">车辆查询</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">点击查询</div>
+            </div>
+            <div class="linkSectorItem bg3">
+                <div class="linkSectorItemTitle">调研选题</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">点击查询</div>
+            </div>
+            <div class="linkSectorItem bg4">
+                <div class="linkSectorItemTitle">地市中心</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">点击查询</div>
+            </div>
+            <div class="linkSectorItem bg5">
+                <div class="linkSectorItemTitle">介绍信查询</div>
+                <div class="linkSectorItemContent">全国政务信息一体化办公室</div>
+                <div class="linkSectorItemBtn">点击查询</div>
+            </div>
         </div>
     </div>
 </template>
@@ -61,6 +88,51 @@ export default {
     border: 2px dashed #999;
 }
 .linkSectorBox {
+    width: 1200px;
+    height: 230px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: content-box;
+}
+//样式1 start ---------------------------------------->
+.linkSectorStyle1Box {
+    width: 1200px;
+    height: 230px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .linkSectorItem {
+        width: 210px;
+        height: 230px;
+        box-sizing: border-box;
+        padding:30px;
+        background: #F9FAFB;
+        cursor: pointer;
+        .linkSectorItemImg {
+            text-align: center;
+            border-bottom:1px solid #D3D3D3;
+            padding-bottom: 10px;
+            height: 85px;
+            img {
+                display: block;
+                margin: 20px auto;
+            }
+        }
+        .linkSectorItemTitle {
+            font-size: 16px;
+            color:#333333;
+            text-align: center;
+            padding-top:30px;
+        }
+    }
+}
+//样式1 end ---------------------------------------->
+
+//样式2 start ---------------------------------------->
+.linkSectorStyle2Box {
     width: 1200px;
     height: 230px;
     margin: 0 auto;
@@ -71,7 +143,8 @@ export default {
         width: 210px;
         height: 230px;
         box-sizing: border-box;
-        padding:70px 30px ;
+        padding:70px 30px;
+        cursor: pointer;
         .linkSectorItemTitle {
             font-size:16px;
             color:#333333;
@@ -101,5 +174,5 @@ export default {
     .bg4 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922744808118.png) no-repeat center center;}
     .bg5 {background: url(http://img.bjzxtw.org.cn/pre/image/png/20250626/1750922748574101.png) no-repeat center center;}
 }
-
+//样式2 end ---------------------------------------->
 </style>