zhongde-website/components/home/header.vue

<template>
	<header class="v-header clearfix">
    <div id="nav-space" class="nav-space"></div>
		<div id="index-header" :class="headFixed == true ? 'fixedTop' : ''">
			<div class="index-header-box w1200">
        <div class="h-nav-logo">
          <nuxt-link to="/">
            <img src="~/assets/images/index/logo_icon.png" alt="" srcset="">
          </nuxt-link>
          <div class="name">
            <nuxt-link to="/">
              中德智慧教育
            </nuxt-link>
          </div>
        </div>
				<div class="i-h-nav">
					<ul class="h-nav-list">
						<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/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,
      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() {
      // var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // var offsetTop = document.querySelector('.h-nav-list').offsetTop;
      // if (scrollTop > offsetTop) {
      // 	this.headFixed = true;
      // } else {
      // 	this.headFixed = false;
      // }
    },
    handleRouterActive() {
      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';
.h-nav-list {
  .h-nav-li-more {
    .h-nav-list-parent {
      color: $theme_color;
    }
    .expand {
      color: $theme_color;
    }
  }
}

.nav-space {
  height: 72px;
}

#index-header {
  // width: 1200px;
  // top: 36px;
  // left: 50%;
  // transform: translateX(-50%);
  width: 100%;
  /* height: 158px; */
  background: #fff;
  z-index: 666;
  // box-shadow: 0px 2px 35px 0px rgba(6,8,71,0.17);
  // border-radius: 8px;
}

.fixedTop {
  position: fixed;
  /* top: -100px; */
  left: 0;
  top: 0;
}

.index-header-box {
  height: 72px;
  display: flex;
  align-items: center;
  /* background: #fff; */
  box-sizing: border-box;
}


.i-h-nav {
  display: flex;
  align-items: center;
  // width: 1200px;
  height: 72px;
  // margin: 0 auto;
  font-size: 15px;
  // text-align: center;
  margin-right: 34px;
}

.h-nav-logo {
  font-size: 0;
  display: flex;
  align-items: center;
  padding-right: 37px;
  border-right: 1px solid #F0F1F2;
}

.h-nav-logo img {
  height: 40px;
  margin: 0 16px 0 22px;
}

.h-nav-logo .name {
  width: 108px;
  height: 25px;
  line-height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, sans-serif;
  font-weight: 600;
  a {
    color: $theme_color;
  }
}

ul.h-nav-list {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.h-nav-list > li {
  position: relative;
  display: inline-block;
  padding: 0 34px;
  line-height: 72px;
  box-sizing: border-box;
  font-size: 15px;
}

.h-nav-list > li:first-child {
  padding-left: 40px;
}

.h-nav-list > li > a {
  width: 100%;
  padding: 22px 0;
  color: $theme_gray333;
  -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 > li .expand {
  position: absolute;
  top: 0;
  right: 11px;
  font-size: 16px;
  // width: 16px;
  // height: 10px;
  color: #DBDBDB;
  // background-image: url('~assets/images/index/arrow_down.png');
  // background-size: 16px 10px;
  // background-repeat: no-repeat;
}

.h-nav-list > li:hover .expand {
  color: $theme_color;
  // background-image: url('~assets/images/index/arrow_down_bg_blue.png');
}

.h-nav-list > li:hover > a,
.h-nav-list li .nuxt-link-exact-active,
.h-nav-list li .nuxt-link-active {
  position: relative;
  color: $theme_color;
  transition: all 0.3s;
  font-family: PingFangSC-Medium, sans-serif;
  font-weight: 500;
  // border-bottom: 2px solid $theme_color_fu;
}

.h-nav-list {
  .h-nav-li {
    &:not(:first-of-type) {
      .nuxt-link-exact-active, .nuxt-link-active {
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          background: $theme_color;
          width: 40px;
          height: 2px;
          box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    
  }
}

// .h-nav-list li.h-nav-li 
//   .nuxt-link-exact-active{
//   &:after {
//     content: '';                 /*CSS伪类用法*/
//     position: absolute;         /*定位背景横线的位置*/
//     bottom: 0;
//     background: $theme_color;       /*宽和高做出来的背景横线*/
//     width: 40px;
//     height: 2px;
//     box-shadow: 0px 2px 4px 0px rgba(85, 141, 253, 0.4);
//     left: 50%;
//     transform: translateX(-50%);
//   }
// }

.h-nav-list > li:first-child .nuxt-link-active {
  color: #333;
  border-bottom: 2px solid transparent;
}

.h-nav-list > li:first-child .nuxt-link-active.nuxt-link-exact-active {
  // border-bottom: 2px solid $theme_color_fu;
  color: $theme_color;
}
// .h-nav-list-child li a.nuxt-link-exact-active {
//   // border: none;
// }
.h-nav-list > li .h-nav-list-child {
  position: absolute;
  // left: 50%;
  // transform: translateX(-50%);
  width: 100px;
  border-radius: 0px 0px 4px 4px;
  overflow: hidden;
  max-height: 0;
  // margin-left: -50px;
  /* background: #f2f3f4; */
  background: #ffffff;
  z-index: 999;
  // padding: 10px 0;
  // transition: all .5s ease;
  transition: max-height .3s ease-in-out;
}


.h-nav-list > li:hover .h-nav-list-child {
  max-height: 500px;
}

ul.h-nav-list-child > li {
  width: 100%;
  height: 20px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  margin: 10px 0 0;
  &:last-child {
    margin-bottom: 18px;
  }
}

ul.h-nav-list-child li a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: $theme_fu_bule;
  // border: none;
}

ul.h-nav-list-child li a: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>