Bläddra i källkod

feat:新增数字化教育中心入口

zhubo 4 år sedan
förälder
incheckning
a396281497
1 ändrade filer med 96 tillägg och 72 borttagningar
  1. 96 72
      components/home/header.vue

+ 96 - 72
components/home/header.vue

@@ -1,82 +1,102 @@
 <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 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">
           <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="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">
+            </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">
+              <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">
 							<nuxt-link to="/merchants">招商体验</nuxt-link>
 						</li> -->
-						<!-- <li class="h-nav-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>
+            <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/contact">联系我们</nuxt-link>
+                </li>
                 <!-- <li>
 									<nuxt-link to="/about/auth">查询真伪</nuxt-link>
 								</li> -->
-							</ul>
+              </ul>
               <div class="expand">
                 <i class="el-icon-arrow-down"></i>
               </div>
-						</li>
-					</ul>
-				</div>
+            </li>
+          </ul>
+        </div>
         <!-- <div class="h-right">
           <div class="h-login btn">登录</div>
           <div class="h-regist btn">注册</div>
         </div> -->
-			</div>
-		</div>
-	</header>
+      </div>
+    </div>
+  </header>
 </template>
 
 <script>
@@ -95,9 +115,9 @@ export default {
     };
   },
   watch: {
-    $route () {
+    $route() {
       this.handleRouterActive();
-    }
+    },
   },
   computed: {
     ...mapState(["headProdNav", "headNewsNav", "headJobNav"]),
@@ -109,43 +129,49 @@ export default {
   },
   methods: {
     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;
       } else {
         this.headWhite = true;
       }
-      this.$emit('returnScrollTop', scrollTop)
+      this.$emit("returnScrollTop", scrollTop);
     },
     navEnter() {
-      if(this.isHome && !this.headWhite) {
+      if (this.isHome && !this.headWhite) {
         this.headWhite = true;
       }
     },
     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;
       }
     },
     handleRouterActive() {
-      if(this.$route.fullPath == '/') {
+      if (this.$route.fullPath == "/") {
         this.isHome = true;
       } else {
         this.isHome = false;
         this.headWhite = true;
       }
-      if(this.$route.fullPath && this.$route.fullPath.includes('/about')) {
+      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')) {
+      if (this.$route.fullPath && this.$route.fullPath.includes("/product")) {
         this.productActive = true;
       } else {
         this.productActive = false;
       }
-    }
+    },
   },
   destroyed() {
     window.removeEventListener("scroll", this.handleScroll);
@@ -154,7 +180,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~static/common/style.sass';
+@import "~static/common/style.sass";
 .nav-space {
   height: 72px;
 }
@@ -200,7 +226,7 @@ export default {
         }
       }
       .h-nav-list-child {
-        transition: max-height .3s ease-in-out;
+        transition: max-height 0.3s ease-in-out;
         li {
           .nuxt-link-exact-active {
             color: $theme_color;
@@ -218,14 +244,14 @@ export default {
       .h-nav-li {
         .nuxt-link-exact-active {
           &:after {
-            background: #236AFA;
+            background: #236afa;
           }
         }
       }
     }
     .h-nav-logo {
       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%;
       }
     }
@@ -243,7 +269,7 @@ export default {
       display: block;
       height: 31px;
       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;
       overflow: hidden;
       background-size: 100% 100%;
@@ -295,7 +321,8 @@ export default {
           font-weight: 500;
         }
       }
-      .nuxt-link-exact-active, .nuxt-link-active {
+      .nuxt-link-exact-active,
+      .nuxt-link-active {
         position: relative;
         color: $theme_color;
         transition: all 0.3s;
@@ -337,7 +364,7 @@ export default {
     .h-nav-li {
       .nuxt-link-exact-active {
         &:after {
-          content: '';
+          content: "";
           position: absolute;
           bottom: 0;
           background: #ffffff;
@@ -393,20 +420,17 @@ export default {
       }
       .h-regist {
         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;
-        color: #F8FFF7;
+        color: #f8fff7;
       }
       .h-login {
         border-radius: 50px;
-        border:1px solid $theme_color_fu;
+        border: 1px solid $theme_color_fu;
         color: $theme_color_fu;
         margin-right: 40px;
       }
     }
   }
-
 }
-
-
 </style>