|
@@ -1,82 +1,102 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <header class="v-header clearfix" id="backTop">
|
|
|
|
|
|
|
+ <header class="v-header clearfix" id="backTop">
|
|
|
<div v-if="!isHome" id="nav-space" class="nav-space"></div>
|
|
<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
|
|
|
|
|
+ id="index-header"
|
|
|
|
|
+ :class="[
|
|
|
|
|
+ headFixed == true ? 'fixedTop' : '',
|
|
|
|
|
+ headWhite ? 'head-white' : '',
|
|
|
|
|
+ ]"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="index-header-box w1200">
|
|
|
<div class="h-nav-logo">
|
|
<div class="h-nav-logo">
|
|
|
<nuxt-link to="/"><h1>中德智慧教育</h1></nuxt-link>
|
|
<nuxt-link to="/"><h1>中德智慧教育</h1></nuxt-link>
|
|
|
<!-- <img src="~/assets/images/home/logo@2x.png" alt="" srcset=""> -->
|
|
<!-- <img src="~/assets/images/home/logo@2x.png" alt="" srcset=""> -->
|
|
|
</div>
|
|
</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="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">
|
|
<div class="expand">
|
|
|
<i class="el-icon-arrow-down"></i>
|
|
<i class="el-icon-arrow-down"></i>
|
|
|
</div>
|
|
</div>
|
|
|
- </li>
|
|
|
|
|
- <!-- <li class="h-nav-li">
|
|
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <!-- <li class="h-nav-li">
|
|
|
<nuxt-link to="/news">新闻资讯</nuxt-link>
|
|
<nuxt-link to="/news">新闻资讯</nuxt-link>
|
|
|
</li> -->
|
|
</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">
|
|
|
|
|
+ <a
|
|
|
|
|
+ target="_blank"
|
|
|
|
|
+ href="https://course.zaojiao.net/"
|
|
|
|
|
+ rel="noopener noreferrer"
|
|
|
|
|
+ >数字化教育发展中心</a
|
|
|
|
|
+ >
|
|
|
|
|
+ </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">
|
|
<!-- <li class="h-nav-li">
|
|
|
<nuxt-link to="/merchants">招商体验</nuxt-link>
|
|
<nuxt-link to="/merchants">招商体验</nuxt-link>
|
|
|
</li> -->
|
|
</li> -->
|
|
|
- <!-- <li class="h-nav-li">
|
|
|
|
|
|
|
+ <!-- <li class="h-nav-li">
|
|
|
<nuxt-link to="/campus">全国校区</nuxt-link>
|
|
<nuxt-link to="/campus">全国校区</nuxt-link>
|
|
|
</li> -->
|
|
</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>
|
|
|
|
|
|
|
+ <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>
|
|
<nuxt-link to="/about/team">专家团队</nuxt-link>
|
|
|
</li> -->
|
|
</li> -->
|
|
|
<!-- <li>
|
|
<!-- <li>
|
|
|
<nuxt-link to="/about/dynamic">公司动态</nuxt-link>
|
|
<nuxt-link to="/about/dynamic">公司动态</nuxt-link>
|
|
|
公司动态
|
|
公司动态
|
|
|
</li> -->
|
|
</li> -->
|
|
|
- <li>
|
|
|
|
|
- <nuxt-link to="/about/contact">联系我们</nuxt-link>
|
|
|
|
|
- </li>
|
|
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <nuxt-link to="/about/contact">联系我们</nuxt-link>
|
|
|
|
|
+ </li>
|
|
|
<!-- <li>
|
|
<!-- <li>
|
|
|
<nuxt-link to="/about/auth">查询真伪</nuxt-link>
|
|
<nuxt-link to="/about/auth">查询真伪</nuxt-link>
|
|
|
</li> -->
|
|
</li> -->
|
|
|
- </ul>
|
|
|
|
|
|
|
+ </ul>
|
|
|
<div class="expand">
|
|
<div class="expand">
|
|
|
<i class="el-icon-arrow-down"></i>
|
|
<i class="el-icon-arrow-down"></i>
|
|
|
</div>
|
|
</div>
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
<!-- <div class="h-right">
|
|
<!-- <div class="h-right">
|
|
|
<div class="h-login btn">登录</div>
|
|
<div class="h-login btn">登录</div>
|
|
|
<div class="h-regist btn">注册</div>
|
|
<div class="h-regist btn">注册</div>
|
|
|
</div> -->
|
|
</div> -->
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </header>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </header>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -95,9 +115,9 @@ export default {
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
- $route () {
|
|
|
|
|
|
|
+ $route() {
|
|
|
this.handleRouterActive();
|
|
this.handleRouterActive();
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
...mapState(["headProdNav", "headNewsNav", "headJobNav"]),
|
|
...mapState(["headProdNav", "headNewsNav", "headJobNav"]),
|
|
@@ -109,43 +129,49 @@ export default {
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
handleScroll() {
|
|
handleScroll() {
|
|
|
- let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
|
- if(this.isHome && scrollTop <= 10) {
|
|
|
|
|
|
|
+ let scrollTop =
|
|
|
|
|
+ window.pageYOffset ||
|
|
|
|
|
+ document.documentElement.scrollTop ||
|
|
|
|
|
+ document.body.scrollTop;
|
|
|
|
|
+ if (this.isHome && scrollTop <= 10) {
|
|
|
this.headWhite = false;
|
|
this.headWhite = false;
|
|
|
} else {
|
|
} else {
|
|
|
this.headWhite = true;
|
|
this.headWhite = true;
|
|
|
}
|
|
}
|
|
|
- this.$emit('returnScrollTop', scrollTop)
|
|
|
|
|
|
|
+ this.$emit("returnScrollTop", scrollTop);
|
|
|
},
|
|
},
|
|
|
navEnter() {
|
|
navEnter() {
|
|
|
- if(this.isHome && !this.headWhite) {
|
|
|
|
|
|
|
+ if (this.isHome && !this.headWhite) {
|
|
|
this.headWhite = true;
|
|
this.headWhite = true;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
navLeave() {
|
|
navLeave() {
|
|
|
- let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
|
- if(this.isHome && scrollTop <= 0) {
|
|
|
|
|
|
|
+ let scrollTop =
|
|
|
|
|
+ window.pageYOffset ||
|
|
|
|
|
+ document.documentElement.scrollTop ||
|
|
|
|
|
+ document.body.scrollTop;
|
|
|
|
|
+ if (this.isHome && scrollTop <= 0) {
|
|
|
this.headWhite = false;
|
|
this.headWhite = false;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
handleRouterActive() {
|
|
handleRouterActive() {
|
|
|
- if(this.$route.fullPath == '/') {
|
|
|
|
|
|
|
+ if (this.$route.fullPath == "/") {
|
|
|
this.isHome = true;
|
|
this.isHome = true;
|
|
|
} else {
|
|
} else {
|
|
|
this.isHome = false;
|
|
this.isHome = false;
|
|
|
this.headWhite = true;
|
|
this.headWhite = true;
|
|
|
}
|
|
}
|
|
|
- if(this.$route.fullPath && this.$route.fullPath.includes('/about')) {
|
|
|
|
|
|
|
+ if (this.$route.fullPath && this.$route.fullPath.includes("/about")) {
|
|
|
this.aboutActive = true;
|
|
this.aboutActive = true;
|
|
|
} else {
|
|
} else {
|
|
|
this.aboutActive = false;
|
|
this.aboutActive = false;
|
|
|
}
|
|
}
|
|
|
- if(this.$route.fullPath && this.$route.fullPath.includes('/product')) {
|
|
|
|
|
|
|
+ if (this.$route.fullPath && this.$route.fullPath.includes("/product")) {
|
|
|
this.productActive = true;
|
|
this.productActive = true;
|
|
|
} else {
|
|
} else {
|
|
|
this.productActive = false;
|
|
this.productActive = false;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
destroyed() {
|
|
destroyed() {
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
@@ -154,7 +180,7 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
-@import '~static/common/style.sass';
|
|
|
|
|
|
|
+@import "~static/common/style.sass";
|
|
|
.nav-space {
|
|
.nav-space {
|
|
|
height: 72px;
|
|
height: 72px;
|
|
|
}
|
|
}
|
|
@@ -200,7 +226,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.h-nav-list-child {
|
|
.h-nav-list-child {
|
|
|
- transition: max-height .3s ease-in-out;
|
|
|
|
|
|
|
+ transition: max-height 0.3s ease-in-out;
|
|
|
li {
|
|
li {
|
|
|
.nuxt-link-exact-active {
|
|
.nuxt-link-exact-active {
|
|
|
color: $theme_color;
|
|
color: $theme_color;
|
|
@@ -218,14 +244,14 @@ export default {
|
|
|
.h-nav-li {
|
|
.h-nav-li {
|
|
|
.nuxt-link-exact-active {
|
|
.nuxt-link-exact-active {
|
|
|
&:after {
|
|
&:after {
|
|
|
- background: #236AFA;
|
|
|
|
|
|
|
+ background: #236afa;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.h-nav-logo {
|
|
.h-nav-logo {
|
|
|
h1 {
|
|
h1 {
|
|
|
- background: url('~assets/images/home/logo@2x.png') no-repeat 0 0;
|
|
|
|
|
|
|
+ background: url("~assets/images/home/logo@2x.png") no-repeat 0 0;
|
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -243,7 +269,7 @@ export default {
|
|
|
display: block;
|
|
display: block;
|
|
|
height: 31px;
|
|
height: 31px;
|
|
|
width: 114px;
|
|
width: 114px;
|
|
|
- background: url('~assets/images/home/logo_white@2x.png') no-repeat 0 0;
|
|
|
|
|
|
|
+ background: url("~assets/images/home/logo_white@2x.png") no-repeat 0 0;
|
|
|
text-indent: -9999px;
|
|
text-indent: -9999px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
@@ -295,7 +321,8 @@ export default {
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .nuxt-link-exact-active, .nuxt-link-active {
|
|
|
|
|
|
|
+ .nuxt-link-exact-active,
|
|
|
|
|
+ .nuxt-link-active {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
color: $theme_color;
|
|
color: $theme_color;
|
|
|
transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
@@ -337,7 +364,7 @@ export default {
|
|
|
.h-nav-li {
|
|
.h-nav-li {
|
|
|
.nuxt-link-exact-active {
|
|
.nuxt-link-exact-active {
|
|
|
&:after {
|
|
&:after {
|
|
|
- content: '';
|
|
|
|
|
|
|
+ content: "";
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
@@ -393,20 +420,17 @@ export default {
|
|
|
}
|
|
}
|
|
|
.h-regist {
|
|
.h-regist {
|
|
|
background: $theme_color_fu;
|
|
background: $theme_color_fu;
|
|
|
- box-shadow:0px 2px 12px 0px rgba(57,109,209,0.58);
|
|
|
|
|
|
|
+ box-shadow: 0px 2px 12px 0px rgba(57, 109, 209, 0.58);
|
|
|
border-radius: 50px;
|
|
border-radius: 50px;
|
|
|
- color: #F8FFF7;
|
|
|
|
|
|
|
+ color: #f8fff7;
|
|
|
}
|
|
}
|
|
|
.h-login {
|
|
.h-login {
|
|
|
border-radius: 50px;
|
|
border-radius: 50px;
|
|
|
- border:1px solid $theme_color_fu;
|
|
|
|
|
|
|
+ border: 1px solid $theme_color_fu;
|
|
|
color: $theme_color_fu;
|
|
color: $theme_color_fu;
|
|
|
margin-right: 40px;
|
|
margin-right: 40px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
</style>
|
|
</style>
|