增加神秘贵州精品展

src/components/NavBar/index.vue

@@ -298,8 +298,11 @@ export default {
   },
   mounted() {
     window.addEventListener("scroll", this.initHeight);
+
     this.$nextTick(() => {
       this.offsetTop = document.querySelector("#navbar").offsetTop;
+      let navBarHeight =document.querySelector("#navbar").offsetHeight
+      this.$store.commit('app/SET_NAVBAR_HEIGHT',navBarHeight)
     });
   },
   methods: {

src/store/getters.js

@@ -11,6 +11,7 @@ const getters = {
   curPath: state => state.app.curPath,
   navBarFixed: state => state.app.navBarFixed,
   showLoginDialog: state => state.app.showLoginDialog,
-  navbarStyle: state => state.app.navbarStyle
+  navbarStyle: state => state.app.navbarStyle,
+  navbarHeight: state => state.app.navbarHeight
 }
 export default getters

src/store/modules/app.js

@@ -3,6 +3,7 @@ const getDefaultState = () => {
     curPath: null,
     navBarFixed: false,
     showLoginDialog: null,
+    navbarHeight:null,
     navbarStyle: '1',//1-默认蓝色；2-中国风；3-红色
   }
 }
@@ -25,6 +26,9 @@ const mutations = {
   CHANGE_NAV_COLOR: (state, themeStyle) => {
     state.navbarStyle = themeStyle
   },
+  SET_NAVBAR_HEIGHT: (state, navbarHeight) => {
+    state.navbarHeight = navbarHeight
+  }
 }
 
 export default {

src/views/boutique/index.vue

 <template>
   <div class="boutique">
-    <!-- <NavBar /> -->
-    <!-- <h1>精品展</h1> -->
-    <!-- <Footer /> -->
-
     <div class="boutique-header">
       <img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
-      <!-- <div class="boutique-title">
-      <p>多彩贵州 &nbsp;博物盛筵</p>
-        <span>—— 精品展</span>
-      </div> -->
       <ul class="tabs">
         <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
           <div :class="{ active: activeTab === node.tab }">
@@ -19,10 +11,16 @@
       </ul>
     </div>
 
-    <div class="boutique-content">
-      <div class="focus-content">
-        <!-- <p>{{ content.title }}</p> -->
-        <div class="img-container">
+    <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>
+        <SMGZ v-else-if="activeTab == 'smgz'" />
+        <div v-else class="img-container">
           <img
             :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
             alt=""
@@ -36,9 +34,12 @@
 <script>
 import NavBar from "@/components/NavBar";
 import Footer from "@/components/Footer";
+import SMGZ from "./components/SMGZ";
+
+import { mapGetters } from "vuex";
 export default {
   name: "Boutique",
-  components: { NavBar, Footer },
+  components: { NavBar, Footer, SMGZ},
   data() {
     return {
       tabs: [
@@ -46,13 +47,15 @@ export default {
         { tab: "smgz", name: "神秘贵州" },
         { tab: "jyycc", name: "技艺与传承" },
         { tab: "ylgdyw", name: "夜郎国的疑问" },
-        // { tab: "xxx", name: "生态博物馆" },
+        { tab: "cjm", name: "长角苗民俗及文化遗产" },
       ],
       activeTab: "",
       // content: { title: "四渡赤水" }
     };
   },
+
   computed: {
+    ...mapGetters(["navbarHeight"]),
     content() {
       let obj = Object.create(null);
 
@@ -68,6 +71,9 @@ export default {
     activeTab: {
       handler: function (value) {
         let color = "";
+        if (!value) {
+          return;
+        }
         switch (value) {
           case "sdcs":
             color = "4";
@@ -81,18 +87,26 @@ export default {
           case "ylgdyw":
             color = "7";
             break;
+          case "cjm":
+            color = "1";
         }
         this.$store.commit("app/CHANGE_NAV_COLOR", color);
       },
       immediate: true,
     },
   },
-  mounted(){
-    this.activeTab ='sdcs'
+  mounted() {
+    this.activeTab = "sdcs";
   },
   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", // 平滑移动
+      });
     },
   },
 };
@@ -100,24 +114,13 @@ export default {
 
 <style lang="scss" scoped>
 .boutique {
-  // display: flex;
-  // justify-content: center;
-  // height: 100vh;
-  // align-items: center;
-  // background-color: #2069c4;
   min-height: calc(100% - 300px);
   .boutique-header {
     position: relative;
-    // height: 620px;
     overflow: hidden;
     > img {
       height: 500px;
       object-fit: cover;
-      // position: absolute;
-      // width: 100%;
-      // left: 0;
-      // top: 0;
-      // z-index: 0;
     }
   }
   .boutique-title {
@@ -203,17 +206,17 @@ export default {
   }
   .boutique-content {
     .focus-content {
-      padding: 20px;
-      margin: 20px;
+      // padding: 20px 0;
+      // margin: 20px;
       box-shadow: 1px 12px 10px 1px #ddd;
       margin-top: 0;
       min-height: 600px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      // display: flex;
+      // justify-content: center;
+      // align-items: center;
       font-size: 30px;
       font-weight: 600;
-      background: rgb(239 247 255);
+      // background: rgb(239 247 255);
 
       > p {
         margin: 0;