修复返回顶部bug

components/home/header.vue

@@ -1,412 +1,412 @@
-<template>
-	<header class="v-header clearfix" id="backTop">
-    <div v-if="!isHome" id="nav-space" class="nav-space"></div>
-		<div id="index-header" :class="[headFixed == true ? 'fixedTop' : '', headWhite ? 'head-white' : '' ]">
-			<div class="index-header-box w1200" >
-        <div class="h-nav-logo">
-          <nuxt-link to="/"><h1>中德智慧教育</h1></nuxt-link>
-          <!-- <img src="~/assets/images/home/logo@2x.png" alt="" srcset=""> -->
-        </div>
-				<div class="i-h-nav">
-					<ul class="h-nav-list" @mouseenter="navEnter" @mouseleave="navLeave">
-						<li class="h-nav-li">
-							<nuxt-link to="/" class="home">首页</nuxt-link>
-						</li>
-						<li :class="{'h-nav-li-more': productActive}">
-              <a class="h-nav-list-parent" href="javascript:void(0)">产品与服务</a>
-							<!-- <nuxt-link to="">产品与服务</nuxt-link> -->
-							<ul class="h-nav-list-child">
-								<li>
-									<nuxt-link to="/product/list">教具玩具</nuxt-link>
-								</li>
-								<li>
-									<nuxt-link to="/product/course">多端课堂</nuxt-link>
-								</li>
-							</ul>
-              <div class="expand">
-                <i class="el-icon-arrow-down"></i>
-              </div>
-						</li>
-						<!-- <li class="h-nav-li">
-							<nuxt-link to="/news">新闻资讯</nuxt-link>
-						</li> -->
-						<li class="h-nav-li">
-              <a target="_blank" href="https://course.zaojiao.net/index" rel="noopener noreferrer">中德智慧网校</a>
-							<!-- <nuxt-link to="/experice">网校中心</nuxt-link> -->
-						</li>
-            <!-- <li class="h-nav-li">
-							<nuxt-link to="/merchants">招商体验</nuxt-link>
-						</li> -->
-						<!-- <li class="h-nav-li">
-							<nuxt-link to="/campus">全国校区</nuxt-link>
-						</li> -->
-						<li class="h-nav-li">
-							<nuxt-link to="/cooperate">加盟合作</nuxt-link>
-						</li>
-						<li :class="{'h-nav-li-more': aboutActive}">
-              <a class="h-nav-list-parent" href="javascript:void(0)">关于我们</a>
-							<!-- <nuxt-link to="">关于我们</nuxt-link> -->
-							<ul class="h-nav-list-child">
-								<li>
-									<nuxt-link to="/about/brand">公司介绍</nuxt-link>
-								</li>
-								<!-- <li>
-									<nuxt-link to="/about/team">专家团队</nuxt-link>
-								</li> -->
-                <!-- <li>
-									<nuxt-link to="/about/dynamic">公司动态</nuxt-link>
-                  公司动态
-								</li> -->
-								<li>
-									<nuxt-link to="/about/contact">联系我们</nuxt-link>
-								</li>
-                <!-- <li>
-									<nuxt-link to="/about/auth">查询真伪</nuxt-link>
-								</li> -->
-							</ul>
-              <div class="expand">
-                <i class="el-icon-arrow-down"></i>
-              </div>
-						</li>
-					</ul>
-				</div>
-        <!-- <div class="h-right">
-          <div class="h-login btn">登录</div>
-          <div class="h-regist btn">注册</div>
-        </div> -->
-			</div>
-		</div>
-	</header>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "VHeader",
-  data() {
-    return {
-      headFixed: true,
-      headWhite: false,
-      isHome: true,
-      maxClientWidth: 980,
-      productActive: false,
-      aboutActive: false,
-    };
-  },
-  watch: {
-    $route () {
-      this.handleRouterActive();
-    }
-  },
-  computed: {
-    ...mapState(["headProdNav", "headNewsNav", "headJobNav"]),
-  },
-  mounted() {
-    //监听滚动条
-    window.addEventListener("scroll", this.handleScroll);
-    this.handleRouterActive();
-  },
-  methods: {
-    handleScroll() {
-      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-      if(this.isHome && scrollTop <= 10) {
-        this.headWhite = false;
-      } else {
-        this.headWhite = true;
-      }
-      this.$emit('returnHeadWhite', this.headWhite)
-    },
-    navEnter() {
-      if(this.isHome && !this.headWhite) {
-        this.headWhite = true;
-      }
-    },
-    navLeave() {
-      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-      if(this.isHome && scrollTop <= 0) {
-        this.headWhite = false;
-      }
-    },
-    handleRouterActive() {
-      if(this.$route.fullPath == '/') {
-        this.isHome = true;
-      } else {
-        this.isHome = false;
-        this.headWhite = true;
-      }
-      if(this.$route.fullPath && this.$route.fullPath.includes('/about')) {
-        this.aboutActive = true;
-      } else {
-        this.aboutActive = false;
-      }
-      if(this.$route.fullPath && this.$route.fullPath.includes('/product')) {
-        this.productActive = true;
-      } else {
-        this.productActive = false;
-      }
-    }
-  },
-  destroyed() {
-    window.removeEventListener("scroll", this.handleScroll);
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '~static/common/style.sass';
-.nav-space {
-  height: 72px;
-}
-
-.fixedTop {
-  position: fixed;
-  left: 0;
-  top: 0;
-}
-
-#index-header {
-  width: 100%;
-  z-index: 666;
-  background: transparent;
-  &.head-white {
-    background: #fff;
-    transition: background 0.3s ease-in-out;
-    .h-nav-list {
-      li {
-        &:first-child {
-          // padding-left: 40px;
-          .nuxt-link-active {
-            color: $theme_gray333;
-            // border-bottom: 2px solid transparent;
-            &.nuxt-link-exact-active {
-              color: $theme_color;
-              &::after {
-                // background: #ffffff;
-                // background: $theme_color;
-              }
-            }
-          }
-        }
-        a {
-          color: $theme_gray333;
-          transition: color 0.3s ease-in-out;
-          &.nuxt-link-exact-active { 
-            color: $theme_color;
-          }
-        }
-        .expand {
-          color: $theme_gray333;
-        }
-      }
-      .h-nav-list-child {
-        transition: max-height .3s ease-in-out;
-        li {
-          .nuxt-link-exact-active {
-            color: $theme_color;
-          }
-        }
-      }
-      .h-nav-li-more {
-        .h-nav-list-parent {
-          color: $theme_color;
-        }
-        .expand {
-          color: $theme_color;
-        }
-      }
-      .h-nav-li {
-        .nuxt-link-exact-active {
-          &:after {
-            background: #236AFA;
-          }
-        }
-      }
-    }
-    .h-nav-logo {
-      h1 {
-        background: url('~assets/images/home/logo@2x.png') no-repeat 0 0;
-        background-size: 100% 100%;
-      }
-    }
-  }
-
-  .index-header-box {
-    height: 72px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .h-nav-logo {
-    h1 {
-      display: block;
-      height: 31px;
-      width: 114px;
-      background: url('~assets/images/home/logo_white@2x.png') no-repeat 0 0;
-      text-indent: -9999px;
-      overflow: hidden;
-      background-size: 100% 100%;
-    }
-  }
-
-  .i-h-nav {
-    display: flex;
-    align-items: center;
-    height: 72px;
-    font-size: 15px;
-    margin-left: 100px;
-  }
-
-  .h-nav-list {
-    display: block;
-    width: 100%;
-    height: 100%;
-    font-size: 0;
-    li {
-      position: relative;
-      display: inline-block;
-      padding: 0 50px;
-      line-height: 72px;
-      box-sizing: border-box;
-      font-size: 15px;
-      &:first-child {
-        // padding-left: 40px;
-        .nuxt-link-active {
-          color: #333;
-          // border-bottom: 2px solid transparent;
-          &.nuxt-link-exact-active {
-            color: #ffffff;
-          }
-        }
-      }
-      &:hover {
-        .h-nav-list-child {
-          max-height: 500px;
-        }
-        .expand {
-          color: $theme_color;
-        }
-        a {
-          position: relative;
-          color: $theme_color;
-          transition: all 0.3s;
-          font-family: PingFangSC-Medium, sans-serif;
-          font-weight: 500;
-        }
-      }
-      .nuxt-link-exact-active, .nuxt-link-active {
-        position: relative;
-        color: $theme_color;
-        transition: all 0.3s;
-        font-family: PingFangSC-Medium, sans-serif;
-        font-weight: 500;
-      }
-      .expand {
-        position: absolute;
-        top: 0;
-        right: 11px;
-        font-size: 16px;
-        color: #ffffff;
-        transition: color 0.3s ease-in-out;
-      }
-      a {
-        width: 100%;
-        padding: 22px 0;
-        color: #ffffff;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        -webkit-transition: all 0.5s ease;
-        -o-transition: all 0.5s ease;
-        transition: all 0.5s ease;
-        font-family: PingFangSC-Medium, sans-serif;
-        font-weight: 400;
-      }
-      .h-nav-list-child {
-        // position: absolute;
-        // width: 100px;
-        // border-radius: 0px 0px 4px 4px;
-        // overflow: hidden;
-        // max-height: 0;
-        // background: #ffffff;
-        // z-index: 999;
-        // transition: max-height .3s ease-in-out;
-      }
-    }
-    .h-nav-li {
-      .nuxt-link-exact-active {
-        &:after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          background: #ffffff;
-          width: 40px;
-          height: 2px;
-          box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-    .h-nav-list-child {
-      position: absolute;
-      width: 100px;
-      border-radius: 0px 0px 4px 4px;
-      overflow: hidden;
-      max-height: 0;
-      background: #ffffff;
-      z-index: 999;
-      line-height: 20px;
-      li {
-        width: 100%;
-        height: 20px;
-        font-size: 14px;
-        text-align: center;
-        line-height: 20px;
-        margin: 10px 0 0;
-        padding: 0;
-        &:last-child {
-          margin-bottom: 18px;
-        }
-        a {
-          display: block;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          color: $theme_fu_bule;
-          padding: 0;
-          &:hover {
-            color: $theme_color;
-          }
-        }
-      }
-    }
-
-    .h-right {
-      display: flex;
-      .btn {
-        width: 70px;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-      }
-      .h-regist {
-        background: $theme_color_fu;
-        box-shadow:0px 2px 12px 0px rgba(57,109,209,0.58);
-        border-radius: 50px;
-        color: #F8FFF7;
-      }
-      .h-login {
-        border-radius: 50px;
-        border:1px solid $theme_color_fu;
-        color: $theme_color_fu;
-        margin-right: 40px;
-      }
-    }
-  }
-
-}
-
-
-</style>
+<template>
+	<header class="v-header clearfix" id="backTop">
+    <div v-if="!isHome" id="nav-space" class="nav-space"></div>
+		<div id="index-header" :class="[headFixed == true ? 'fixedTop' : '', headWhite ? 'head-white' : '' ]">
+			<div class="index-header-box w1200" >
+        <div class="h-nav-logo">
+          <nuxt-link to="/"><h1>中德智慧教育</h1></nuxt-link>
+          <!-- <img src="~/assets/images/home/logo@2x.png" alt="" srcset=""> -->
+        </div>
+				<div class="i-h-nav">
+					<ul class="h-nav-list" @mouseenter="navEnter" @mouseleave="navLeave">
+						<li class="h-nav-li">
+							<nuxt-link to="/" class="home">首页</nuxt-link>
+						</li>
+						<li :class="{'h-nav-li-more': productActive}">
+              <a class="h-nav-list-parent" href="javascript:void(0)">产品与服务</a>
+							<!-- <nuxt-link to="">产品与服务</nuxt-link> -->
+							<ul class="h-nav-list-child">
+								<li>
+									<nuxt-link to="/product/list">教具玩具</nuxt-link>
+								</li>
+								<li>
+									<nuxt-link to="/product/course">多端课堂</nuxt-link>
+								</li>
+							</ul>
+              <div class="expand">
+                <i class="el-icon-arrow-down"></i>
+              </div>
+						</li>
+						<!-- <li class="h-nav-li">
+							<nuxt-link to="/news">新闻资讯</nuxt-link>
+						</li> -->
+						<li class="h-nav-li">
+              <a target="_blank" href="https://course.zaojiao.net/index" rel="noopener noreferrer">中德智慧网校</a>
+							<!-- <nuxt-link to="/experice">网校中心</nuxt-link> -->
+						</li>
+            <!-- <li class="h-nav-li">
+							<nuxt-link to="/merchants">招商体验</nuxt-link>
+						</li> -->
+						<!-- <li class="h-nav-li">
+							<nuxt-link to="/campus">全国校区</nuxt-link>
+						</li> -->
+						<li class="h-nav-li">
+							<nuxt-link to="/cooperate">加盟合作</nuxt-link>
+						</li>
+						<li :class="{'h-nav-li-more': aboutActive}">
+              <a class="h-nav-list-parent" href="javascript:void(0)">关于我们</a>
+							<!-- <nuxt-link to="">关于我们</nuxt-link> -->
+							<ul class="h-nav-list-child">
+								<li>
+									<nuxt-link to="/about/brand">公司介绍</nuxt-link>
+								</li>
+								<!-- <li>
+									<nuxt-link to="/about/team">专家团队</nuxt-link>
+								</li> -->
+                <!-- <li>
+									<nuxt-link to="/about/dynamic">公司动态</nuxt-link>
+                  公司动态
+								</li> -->
+								<li>
+									<nuxt-link to="/about/contact">联系我们</nuxt-link>
+								</li>
+                <!-- <li>
+									<nuxt-link to="/about/auth">查询真伪</nuxt-link>
+								</li> -->
+							</ul>
+              <div class="expand">
+                <i class="el-icon-arrow-down"></i>
+              </div>
+						</li>
+					</ul>
+				</div>
+        <!-- <div class="h-right">
+          <div class="h-login btn">登录</div>
+          <div class="h-regist btn">注册</div>
+        </div> -->
+			</div>
+		</div>
+	</header>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "VHeader",
+  data() {
+    return {
+      headFixed: true,
+      headWhite: false,
+      isHome: true,
+      maxClientWidth: 980,
+      productActive: false,
+      aboutActive: false,
+    };
+  },
+  watch: {
+    $route () {
+      this.handleRouterActive();
+    }
+  },
+  computed: {
+    ...mapState(["headProdNav", "headNewsNav", "headJobNav"]),
+  },
+  mounted() {
+    //监听滚动条
+    window.addEventListener("scroll", this.handleScroll);
+    this.handleRouterActive();
+  },
+  methods: {
+    handleScroll() {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      if(this.isHome && scrollTop <= 10) {
+        this.headWhite = false;
+      } else {
+        this.headWhite = true;
+      }
+      this.$emit('returnScrollTop', scrollTop)
+    },
+    navEnter() {
+      if(this.isHome && !this.headWhite) {
+        this.headWhite = true;
+      }
+    },
+    navLeave() {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      if(this.isHome && scrollTop <= 0) {
+        this.headWhite = false;
+      }
+    },
+    handleRouterActive() {
+      if(this.$route.fullPath == '/') {
+        this.isHome = true;
+      } else {
+        this.isHome = false;
+        this.headWhite = true;
+      }
+      if(this.$route.fullPath && this.$route.fullPath.includes('/about')) {
+        this.aboutActive = true;
+      } else {
+        this.aboutActive = false;
+      }
+      if(this.$route.fullPath && this.$route.fullPath.includes('/product')) {
+        this.productActive = true;
+      } else {
+        this.productActive = false;
+      }
+    }
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.handleScroll);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~static/common/style.sass';
+.nav-space {
+  height: 72px;
+}
+
+.fixedTop {
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+
+#index-header {
+  width: 100%;
+  z-index: 666;
+  background: transparent;
+  &.head-white {
+    background: #fff;
+    transition: background 0.3s ease-in-out;
+    .h-nav-list {
+      li {
+        &:first-child {
+          // padding-left: 40px;
+          .nuxt-link-active {
+            color: $theme_gray333;
+            // border-bottom: 2px solid transparent;
+            &.nuxt-link-exact-active {
+              color: $theme_color;
+              &::after {
+                // background: #ffffff;
+                // background: $theme_color;
+              }
+            }
+          }
+        }
+        a {
+          color: $theme_gray333;
+          transition: color 0.3s ease-in-out;
+          &.nuxt-link-exact-active {
+            color: $theme_color;
+          }
+        }
+        .expand {
+          color: $theme_gray333;
+        }
+      }
+      .h-nav-list-child {
+        transition: max-height .3s ease-in-out;
+        li {
+          .nuxt-link-exact-active {
+            color: $theme_color;
+          }
+        }
+      }
+      .h-nav-li-more {
+        .h-nav-list-parent {
+          color: $theme_color;
+        }
+        .expand {
+          color: $theme_color;
+        }
+      }
+      .h-nav-li {
+        .nuxt-link-exact-active {
+          &:after {
+            background: #236AFA;
+          }
+        }
+      }
+    }
+    .h-nav-logo {
+      h1 {
+        background: url('~assets/images/home/logo@2x.png') no-repeat 0 0;
+        background-size: 100% 100%;
+      }
+    }
+  }
+
+  .index-header-box {
+    height: 72px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .h-nav-logo {
+    h1 {
+      display: block;
+      height: 31px;
+      width: 114px;
+      background: url('~assets/images/home/logo_white@2x.png') no-repeat 0 0;
+      text-indent: -9999px;
+      overflow: hidden;
+      background-size: 100% 100%;
+    }
+  }
+
+  .i-h-nav {
+    display: flex;
+    align-items: center;
+    height: 72px;
+    font-size: 15px;
+    margin-left: 100px;
+  }
+
+  .h-nav-list {
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+    li {
+      position: relative;
+      display: inline-block;
+      padding: 0 50px;
+      line-height: 72px;
+      box-sizing: border-box;
+      font-size: 15px;
+      &:first-child {
+        // padding-left: 40px;
+        .nuxt-link-active {
+          color: #333;
+          // border-bottom: 2px solid transparent;
+          &.nuxt-link-exact-active {
+            color: #ffffff;
+          }
+        }
+      }
+      &:hover {
+        .h-nav-list-child {
+          max-height: 500px;
+        }
+        .expand {
+          color: $theme_color;
+        }
+        a {
+          position: relative;
+          color: $theme_color;
+          transition: all 0.3s;
+          font-family: PingFangSC-Medium, sans-serif;
+          font-weight: 500;
+        }
+      }
+      .nuxt-link-exact-active, .nuxt-link-active {
+        position: relative;
+        color: $theme_color;
+        transition: all 0.3s;
+        font-family: PingFangSC-Medium, sans-serif;
+        font-weight: 500;
+      }
+      .expand {
+        position: absolute;
+        top: 0;
+        right: 11px;
+        font-size: 16px;
+        color: #ffffff;
+        transition: color 0.3s ease-in-out;
+      }
+      a {
+        width: 100%;
+        padding: 22px 0;
+        color: #ffffff;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        -webkit-transition: all 0.5s ease;
+        -o-transition: all 0.5s ease;
+        transition: all 0.5s ease;
+        font-family: PingFangSC-Medium, sans-serif;
+        font-weight: 400;
+      }
+      .h-nav-list-child {
+        // position: absolute;
+        // width: 100px;
+        // border-radius: 0px 0px 4px 4px;
+        // overflow: hidden;
+        // max-height: 0;
+        // background: #ffffff;
+        // z-index: 999;
+        // transition: max-height .3s ease-in-out;
+      }
+    }
+    .h-nav-li {
+      .nuxt-link-exact-active {
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          background: #ffffff;
+          width: 40px;
+          height: 2px;
+          box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+    .h-nav-list-child {
+      position: absolute;
+      width: 100px;
+      border-radius: 0px 0px 4px 4px;
+      overflow: hidden;
+      max-height: 0;
+      background: #ffffff;
+      z-index: 999;
+      line-height: 20px;
+      li {
+        width: 100%;
+        height: 20px;
+        font-size: 14px;
+        text-align: center;
+        line-height: 20px;
+        margin: 10px 0 0;
+        padding: 0;
+        &:last-child {
+          margin-bottom: 18px;
+        }
+        a {
+          display: block;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          color: $theme_fu_bule;
+          padding: 0;
+          &:hover {
+            color: $theme_color;
+          }
+        }
+      }
+    }
+
+    .h-right {
+      display: flex;
+      .btn {
+        width: 70px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+      }
+      .h-regist {
+        background: $theme_color_fu;
+        box-shadow:0px 2px 12px 0px rgba(57,109,209,0.58);
+        border-radius: 50px;
+        color: #F8FFF7;
+      }
+      .h-login {
+        border-radius: 50px;
+        border:1px solid $theme_color_fu;
+        color: $theme_color_fu;
+        margin-right: 40px;
+      }
+    }
+  }
+
+}
+
+
+</style>

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-header @returnHeadWhite="returnHeadWhite"></v-header>
-    <back-top :backTopIsShow="headWhite" @handleBackTop="handleBackTop"></back-top>
+    <v-header @returnScrollTop="returnScrollTop"></v-header>
+    <back-top :backTopIsShow="backTopState" @handleBackTop="handleBackTop"></back-top>
     <main class="content-container" ref="container" :class="headFixed == true ? 'marginTop' : ''">
       <nuxt/>
     </main>
@@ -28,7 +28,7 @@
       return {
         headFixed: true,
         maxClientWidth: 980,
-        headWhite: false
+        backTopState: true // 返回顶部部分距离顶部的距离
       }
     },
     mounted (){
@@ -38,18 +38,19 @@
       // (function() {
       //   var hm = document.createElement("script");
       //   hm.src = "https://hm.baidu.com/hm.js?02736a493e850835a7c343e9edd17e88";
-      //   var s = document.getElementsByTagName("script")[0]; 
+      //   var s = document.getElementsByTagName("script")[0];
       //   s.parentNode.insertBefore(hm, s);
-      // })();    
+      // })();
     },
     methods: {
       // 返回顶部
       handleBackTop() {
         document.getElementById("backTop").scrollIntoView();
       },
-      // 返回距离顶部的状态 从header中获取 其中有一个原生监听sroll
-      returnHeadWhite(val) {
-        this.headWhite = val
+      // 返回距离顶部的距离 从header中获取 其中有一个原生监听sroll
+      returnScrollTop(val) {
+        this.backTopState = (val !== 0)
+        console.log(this.backTopState,'backTop');
       },
       handleScroll (){
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
@@ -65,4 +66,4 @@
       window.removeEventListener('scroll',this.handleScroll)
     }
   }
-</script>
+</script>