增加精品展剩余设计稿

src/views/boutique/index.vue

@@ -10,34 +10,29 @@
         </li>
       </ul>
     </div>
-    <ul class="fixed-tabs">
+    <!-- <ul class="fixed-tabs">
       <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
         <div class="tab-container">
-          <img
-            :src="
-              require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
-            "
-            alt=""
-          />
+          <img :src="
+            require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
+          " alt="" />
           <span class="name">{{ node.name }}</span>
         </div>
       </li>
-    </ul>
+    </ul> -->
     <!-- <div class="boutique-tabs">
       <m-tabs @handleClickItem="handleClickItem"></m-tabs>
     </div> -->
 
     <div class="boutique-content" ref="boutiqueContent">
       <div class="focus-content" v-if="activeTab">
-        <p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
+        <!-- <p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
           长角苗民俗及文化遗产
-        </p>
-        <SMGZ v-else-if="activeTab == 'smgz'" />
+        </p> -->
+        <SMGZ v-if="activeTab == 'smgz'" />
         <YLGDYW v-else-if="activeTab == 'ylgdyw'" />
         <div v-else class="img-container">
-          <img :src="
-  require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
-  require(`@/assets/imgs/boutique/${activeTab}.png`)
+          <img :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)
           " alt="" />
         </div>
       </div>
@@ -60,7 +55,9 @@ export default {
         { tab: "ylgdyw", name: "夜郎国的疑问" },
         { tab: "jyycc", name: "记忆与传承" },
         { tab: "sdcs", name: "四渡赤水出奇兵" },
-        { tab: "cjm", name: "长角苗民俗及文化遗产" },
+        { tab: "lzsg", name: "六枝梭戛" },
+        { tab: "zggz", name: "中共贵州省工委斗争纪略展" },
+        { tab: "gzjy", name: "贵州教育使馆" },
       ],
       activeTab: "",
 
@@ -114,13 +111,13 @@ export default {
   },
   methods: {
     handleTabClick(data) {
-    this.activeTab = data.tab;
-    let el = document.getElementsByClassName("boutique-header")[0];
-    let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
-    document.documentElement.scroll({
-      top: height,
-      behavior: "smooth", // 平滑移动
-    });
+      this.activeTab = data.tab;
+      let el = document.getElementsByClassName("boutique-header")[0];
+      let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
+      document.documentElement.scroll({
+        top: height,
+        behavior: "smooth", // 平滑移动
+      });
     },
 
     // handleClickItem(key) {
@@ -143,11 +140,13 @@ export default {
   .boutique-header {
     position: relative;
     overflow: hidden;
-    > img {
+
+    >img {
       height: 500px;
       object-fit: cover;
     }
   }
+
   .boutique-tabs {
     width: 100%;
     height: 100vh;
@@ -254,19 +253,23 @@ export default {
     width: 100%;
     bottom: 0;
 
-    > li {
+    >li {
       flex: 1;
-      > div {
+
+      >div {
         text-align: center;
-        > span {
+
+        >span {
           font-size: 20px;
           color: #333;
           font-weight: 600;
           font-family: "楷体";
+
           &:hover {
             cursor: pointer;
             position: relative;
             color: #003fa7;
+
             &::after {
               content: "";
               position: absolute;
@@ -280,10 +283,11 @@ export default {
         }
 
         &.active {
-          > span {
+          >span {
             position: relative;
             color: #003fa7;
             text-shadow: 6px 2px 2px #999;
+
             &::after {
               content: "";
               position: absolute;
@@ -298,6 +302,7 @@ export default {
       }
     }
   }
+
   .boutique-content {
 
     .focus-content {