修复header优化而影响的其他页面

src/components/NavBar/index.vue

 <template>
-  <div
-    :class="{
+  <div :class="{
       nav: true,
-      'header-absolute': true,
+      'header-absolute': isAbsolute,
       'header-fixed ': isFixed,
       // 'header-absolute': isHome || isBoutique,
       //'show-themeColor': isFixed && isHome,
@@ -12,9 +11,7 @@
       isSMGZ: navbarStyle == '5' && isFixed,
       isJYYCC: navbarStyle == '6' && isFixed,
       isYLGDYW: navbarStyle == '7' && isFixed,
-    }"
-    id="navbar"
-  >
+    }" id="navbar">
     <div class="container">
       <div class="logo-container animate__animated animate__fadeInLeft">
         <img src="@/assets/imgs/home/logo3.png" />
@@ -22,24 +19,12 @@
       </div>
       <div class="right">
         <div class="tabs animate__animated animate__fadeInUp">
-          <div
-            class="tab-item"
-            :class="{
+          <div class="tab-item" :class="{
               activeHome: currentTab.name == item.name && isHome,
               active: currentTab.name == item.name,
-            }"
-            v-for="(item, index) in pages"
-            :key="index"
-            @click="handleClickTab(item)"
-            @mouseenter="handleEnterTabItem(item)"
-            @mouseleave="handleLeaveTabItem(item)"
-          >
+            }" v-for="(item, index) in pages" :key="index" @click="handleClickTab(item)" @mouseenter="handleEnterTabItem(item)" @mouseleave="handleLeaveTabItem(item)">
             <span @click="handleToPage(item.path)">{{ item.name }} </span>
-            <i
-              v-if="item.name == '陈列展览'"
-              class="el-icon-arrow-down"
-              style="transform: translate(30%, 30%); cursor: pointer"
-            ></i>
+            <i v-if="item.name == '陈列展览'" class="el-icon-arrow-down" style="transform: translate(30%, 30%); cursor: pointer"></i>
           </div>
         </div>
         <div class="tools animate__animated animate__fadeInRight">
@@ -51,19 +36,10 @@
                 <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-if="!hasToken"
-                  @click.native="handleToLogin"
-                  class="operation-item"
-                  >登录
+                <el-dropdown-item v-if="!hasToken" @click.native="handleToLogin" class="operation-item">登录
                 </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="hasToken"
-                  class="operation-item"
-                  @click.native="handleToPersonal"
-                >
-                  个人中心</el-dropdown-item
-                >
+                <el-dropdown-item v-if="hasToken" class="operation-item" @click.native="handleToPersonal">
+                  个人中心</el-dropdown-item>
                 <el-dropdown-item v-if="hasToken" @click.native="handleLogOut">
                   <span>退出</span>
                 </el-dropdown-item>
@@ -74,23 +50,11 @@
       </div>
     </div>
     <transition name="el-zoom-in-top">
-      <div
-        class="submenu"
-        v-show="showSubMenu"
-        @mouseenter="handleEnterSubmenu"
-        @mouseleave="handleMouseLeaveSubMenu"
-      >
+      <div class="submenu" v-show="showSubMenu" @mouseenter="handleEnterSubmenu" @mouseleave="handleMouseLeaveSubMenu">
         <ul>
-          <li
-            v-for="(item, index) in typeList"
-            :key="index"
-            @click="handleToPage('/display/', item.value, true)"
-          >
+          <li v-for="(item, index) in typeList" :key="index" @click="handleToPage('/display/', item.value, true)">
             <span>{{ item.label }}</span>
-            <svg-icon
-              icon-class="wenshi"
-              v-if="index != typeList.length - 1"
-            ></svg-icon>
+            <svg-icon icon-class="wenshi" v-if="index != typeList.length - 1"></svg-icon>
           </li>
           <!-- <li>
             <span @click="handleToPage('/display', true)">基本陈列</span>
@@ -104,92 +68,40 @@
         </ul>
       </div>
     </transition>
-    <el-dialog
-      :visible.sync="loginVisible"
-      append-to-body
-      v-loading="loading"
-      element-loading-background="rgba(0, 0, 0, 0.5)"
-      :element-loading-text="loadingText"
-      :before-close="handleCloseLogin"
-    >
+    <el-dialog :visible.sync="loginVisible" append-to-body v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" :element-loading-text="loadingText" :before-close="handleCloseLogin">
       <div slot="title" class="login-title">
-        <div
-          :class="['title-item', isLoginByUsername ? 'active' : '']"
-          @click="handleChangeLoginWay('username')"
-        >
+        <div :class="['title-item', isLoginByUsername ? 'active' : '']" @click="handleChangeLoginWay('username')">
           账号登录
         </div>
-        <div
-          :class="['title-item', isLoginByUsername ? '' : 'active']"
-          @click="handleChangeLoginWay('phone')"
-        >
+        <div :class="['title-item', isLoginByUsername ? '' : 'active']" @click="handleChangeLoginWay('phone')">
           手机号登录
         </div>
         <div class="line"></div>
       </div>
       <div class="login">
-        <el-form
-          :model="loginForm"
-          :label-position="labelPosition"
-          ref="loginForm"
-          :rules="loginRules"
-        >
+        <el-form :model="loginForm" :label-position="labelPosition" ref="loginForm" :rules="loginRules">
           <el-form-item :label-width="formLabelWidth" prop="account">
-            <el-input
-              v-model="loginForm.account"
-              autocomplete="off"
-              clearable
-              :placeholder="isLoginByUsername ? '账号' : '手机号'"
-            ></el-input>
+            <el-input v-model="loginForm.account" autocomplete="off" clearable :placeholder="isLoginByUsername ? '账号' : '手机号'"></el-input>
           </el-form-item>
           <el-form-item :label-width="formLabelWidth" prop="password">
-            <el-input
-              v-model="loginForm.password"
-              autocomplete="off"
-              type="password"
-              clearable
-              show-password
-              placeholder="密码"
-            ></el-input>
+            <el-input v-model="loginForm.password" autocomplete="off" type="password" clearable show-password placeholder="密码"></el-input>
           </el-form-item>
           <el-form-item :label-width="formLabelWidth">
             <el-row :gutter="10">
               <el-col :span="12">
                 <el-form-item prop="captcha">
-                  <el-input
-                    ref="captcha"
-                    v-model="loginForm.captcha"
-                    placeholder="请输入验证码"
-                    name="captcha"
-                    tabindex="3"
-                    auto-complete="on"
-                    @keyup.enter.native="handleLoginSubmit"
-                  />
+                  <el-input ref="captcha" v-model="loginForm.captcha" placeholder="请输入验证码" name="captcha" tabindex="3" auto-complete="on" @keyup.enter.native="handleLoginSubmit" />
                 </el-form-item>
               </el-col>
               <el-col :span="12" class="captcha">
-                <img
-                  v-if="requestCodeSuccess"
-                  :src="captchaImgSrc"
-                  @click="handleGetCaptcha"
-                />
-                <img
-                  v-else
-                  src="@/assets/404_images/checkcode.png"
-                  @click="handleGetCaptcha"
-                />
+                <img v-if="requestCodeSuccess" :src="captchaImgSrc" @click="handleGetCaptcha" />
+                <img v-else src="@/assets/404_images/checkcode.png" @click="handleGetCaptcha" />
               </el-col>
             </el-row>
           </el-form-item>
         </el-form>
         <div class="opration">
-          <el-button
-            round
-            @click="handleLoginSubmit"
-            size="small"
-            class="loginBtn"
-            >登 陆</el-button
-          >
+          <el-button round @click="handleLoginSubmit" size="small" class="loginBtn">登 陆</el-button>
           <div class="register" @click="handleToRegister">注册</div>
         </div>
       </div>
@@ -212,7 +124,7 @@ export default {
       "showLoginDialog",
       "navbarStyle",
     ]),
-    hasToken() {
+    hasToken () {
       return this.token;
     },
   },
@@ -261,19 +173,22 @@ export default {
       },
       immediate: true,
     },
-    navBarFixed(value) {
+    navBarFixed (value) {
       console.log("navBarFixed", value);
     },
-    showLoginDialog(value) {
+    showLoginDialog (value) {
       this.loginVisible = value;
     },
-    loginVisible(value) {
+    loginVisible (value) {
       if (value) {
         this.handleGetCaptcha();
       }
     },
+    '$route.path' (cur) {
+      this.getAbsolute(cur)
+    }
   },
-  data() {
+  data () {
     var validateAccout = (rule, value, callback) => {
       if (value === "") {
         let text = this.isLoginByUsername ? "账号" : "手机号";
@@ -375,9 +290,10 @@ export default {
           value: "",
         },
       ],
+      isAbsolute: true
     };
   },
-  mounted() {
+  mounted () {
     window.addEventListener("scroll", this.initHeight);
 
     this.$nextTick(() => {
@@ -386,9 +302,21 @@ export default {
       this.$store.commit("app/SET_NAVBAR_HEIGHT", navBarHeight);
     });
     this.loadDisplayTypeList();
+
+    let path = this.$route.path
+    this.getAbsolute(path)
   },
   methods: {
-    initHeight() {
+    getAbsolute (path) {
+      let arr = path.split('/')
+      console.log('path', path)
+      if (path.indexOf('/display') === 0 && arr.length === 4) {
+        this.isAbsolute = false
+      } else {
+        this.isAbsolute = true
+      }
+    },
+    initHeight () {
       let scrollTop =
         window.pageYOffset ||
         document.documentElement.scrollTop ||
@@ -396,20 +324,20 @@ export default {
       this.isFixed = scrollTop > this.offsetTop ? true : false;
     },
 
-    handleToRegister() {
+    handleToRegister () {
       this.$router.push("/register?redirect=" + this.$route.fullPath);
       this.handleCloseLogin();
     },
 
-    handleToLogin() {
+    handleToLogin () {
       this.loginVisible = true;
     },
 
-    handleToPersonal() {
+    handleToPersonal () {
       this.$router.push("/personal");
     },
 
-    async handleLogOut() {
+    async handleLogOut () {
       this.$confirm("是否确定退出?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -428,11 +356,11 @@ export default {
         });
     },
 
-    handleClickTab(tab) {
+    handleClickTab (tab) {
       this.currentTab = tab;
     },
 
-    handleLoginSubmit() {
+    handleLoginSubmit () {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           // debugger
@@ -473,7 +401,7 @@ export default {
       });
     },
 
-    handleCloseLogin() {
+    handleCloseLogin () {
       this.loginVisible = false;
       this.$refs["loginForm"].resetFields;
       if (this.showLoginDialog) {
@@ -481,7 +409,7 @@ export default {
       }
     },
 
-    handleGetCaptcha() {
+    handleGetCaptcha () {
       this.currdatetime = new Date().getTime();
       getVerify()
         .then((res) => {
@@ -494,7 +422,7 @@ export default {
         });
     },
 
-    handleChangeLoginWay(type) {
+    handleChangeLoginWay (type) {
       this.isLoginByUsername = type === "username";
       let line = document.getElementsByClassName("line")[0];
       if (this.isLoginByUsername) {
@@ -504,7 +432,7 @@ export default {
       }
     },
 
-    handleToPage(path, type, isOpenNewPage) {
+    handleToPage (path, type, isOpenNewPage) {
       if (path) {
         if (isOpenNewPage) {
           const newPage = this.$router.resolve({
@@ -520,40 +448,41 @@ export default {
       }
     },
 
-    handleEnterTabItem(item) {
+    handleEnterTabItem (item) {
       if (item.name == "陈列展览") {
         this.showSubMenu = true;
       }
     },
 
-    handleLeaveTabItem(item) {
+    handleLeaveTabItem (item) {
       if (item.name == "陈列展览" && this.showSubMenu) {
         this.showSubMenu = false;
       }
     },
 
-    handleEnterSubmenu() {
+    handleEnterSubmenu () {
       if (!this.showSubMenu) {
         this.showSubMenu = true;
       }
     },
 
-    handleMouseLeaveSubMenu() {
+    handleMouseLeaveSubMenu () {
       if (this.showSubMenu) {
         this.showSubMenu = false;
       }
     },
 
-    async loadDisplayTypeList() {
+    async loadDisplayTypeList () {
       let res = await getDisplayExistDict();
       // debugger
       this.typeList = [...this.typeList, ...res.data.typeList];
     },
   },
 
-  destroyed() {
+  destroyed () {
     window.removeEventListener("scroll", this.initHeight);
   },
+
 };
 </script>
 
@@ -608,8 +537,8 @@ export default {
   height: 120px;
   width: 100%;
   transition: all 0.5s ease;
-  // background-color: rgba($themeColor, 0.5);
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: $themeColor;
+  // background-color: rgba(0, 0, 0, 0.3);
   position: relative;
   z-index: 99;
   // background-color: #fff;
@@ -639,7 +568,7 @@ export default {
       .name {
         font-size: 30px;
         font-weight: bold;
-        font-family: "SourceHanSerifCN-Bold";
+        font-family: 'SourceHanSerifCN-Bold';
         color: #fff;
         margin-left: 8px;
       }
@@ -662,14 +591,14 @@ export default {
           color: #fff;
           display: flex;
           align-items: center;
-          font-family: "Alibaba-PuHuiTi";
+          font-family: 'Alibaba-PuHuiTi';
           position: relative;
           height: 100%;
           text-align: center;
 
           &::after {
             position: absolute;
-            content: "";
+            content: '';
             left: 50%;
             bottom: 0;
             transform: translateX(-50%);

src/views/boutique/components/sdcs/index.vue

@@ -1279,7 +1279,7 @@ export default {
       height: 900px;
       .vr-content {
         width: 100%;
-        height: 100%;
+        // height: 100%;
         position: absolute;
         //   top: -100px;
         background-repeat: no-repeat;

src/views/boutique/index.vue

@@ -63,5 +63,11 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+.botique {
+  margin-bottom: -$nav-height;
+  > div {
+    transform: translateY(-$nav-height);
+  }
+}
 </style>
\ No newline at end of file

src/views/culturalRelic/detail-bp.vue

@@ -711,7 +711,7 @@
   .isFixed {
     position: fixed;
     left: 0;
-    top: 100px;
+    top: $nav-height;
     z-index: 99;
   }
   /**公共样式结束 */

src/views/display/components/NormalStyle.vue

@@ -737,7 +737,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
 .isFixed {
   position: fixed;
   left: 0;
-  top: 100px;
+  top: $nav-height;
   z-index: 99;
 }