'首页手势调整'

components/home/header.vue

@@ -1,7 +1,8 @@
 <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">
+			<div class="index-header-box w1200">
         <div class="h-nav-logo">
           <nuxt-link to="/">
             <img src="~/assets/images/index/logo_icon.png" alt="" srcset="">
@@ -14,7 +15,7 @@
         </div>
 				<div class="i-h-nav">
 					<ul class="h-nav-list">
-						<li>
+						<li class="h-nav-li">
 							<nuxt-link to="/">首页</nuxt-link>
 						</li>
 						<li>
@@ -32,17 +33,17 @@
                 <i class="el-icon-arrow-down"></i>
               </div>
 						</li>
-						<li>
+						<li class="h-nav-li">
 							<nuxt-link to="/news">新闻资讯</nuxt-link>
 						</li>
-						<li>
-              <a href="https://course.zaojiao.net/index" target="_blank" rel="noopener noreferrer">网校中心</a>
+						<li class="h-nav-li">
+              <a href="https://course.zaojiao.net/index" rel="noopener noreferrer">网校中心</a>
 							<!-- <nuxt-link to="/experice">网校中心</nuxt-link> -->
 						</li>
-						<li>
+						<li class="h-nav-li">
 							<nuxt-link to="/campus">全国校区</nuxt-link>
 						</li>
-						<li>
+						<li class="h-nav-li">
 							<nuxt-link to="/cooperate">加盟合作</nuxt-link>
 						</li>
 						<li>
@@ -50,13 +51,13 @@
 							<!-- <nuxt-link to="">关于我们</nuxt-link> -->
 							<ul class="h-nav-list-child">
 								<li>
-									<nuxt-link to="/about/brand">品牌故事</nuxt-link>
+									<nuxt-link target="_blank" to="/about/brand">品牌故事</nuxt-link>
 								</li>
 								<li>
-									<nuxt-link to="/about/team">专家团队</nuxt-link>
+									<nuxt-link target="_blank" to="/about/team">专家团队</nuxt-link>
 								</li>
 								<li>
-									<nuxt-link to="/about/contact">联系我们</nuxt-link>
+									<nuxt-link target="_blank" to="/about/contact">联系我们</nuxt-link>
 								</li>
 							</ul>
               <div class="expand">
@@ -118,27 +119,32 @@ export default {
 <style lang="scss" scoped>
 @import '~static/common/style.sass';
 
+.nav-space {
+  height: 72px;
+}
+
 #index-header {
-  width: 1200px;
-  top: 36px;
-  left: 50%;
-  transform: translateX(-50%);
-  /* width: 100%; */
+  // 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;
+  // 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: 82px;
+  height: 72px;
   display: flex;
   align-items: center;
   /* background: #fff; */
@@ -150,7 +156,7 @@ export default {
   display: flex;
   align-items: center;
   // width: 1200px;
-  height: 82px;
+  height: 72px;
   // margin: 0 auto;
   font-size: 15px;
   // text-align: center;
@@ -193,7 +199,7 @@ ul.h-nav-list {
   position: relative;
   display: inline-block;
   padding: 0 35px;
-  line-height: 82px;
+  line-height: 72px;
   box-sizing: border-box;
   font-size: 15px;
 }
@@ -205,15 +211,15 @@ ul.h-nav-list {
 .h-nav-list > li > a {
   width: 100%;
   padding: 22px 0;
-  color: $theme_fu_bule;
+  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,PingFang SC;
-  font-weight: 500;
+  // font-family: PingFangSC-Medium,PingFang SC;
+  font-weight: 400;
 }
 
 .h-nav-list > li .expand {
@@ -230,18 +236,56 @@ ul.h-nav-list {
 }
 
 .h-nav-list > li:hover .expand {
-  color: $theme_color_fu;
+  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 {
-  color: $theme_color_fu;
+  position: relative;
+  color: $theme_color;
   transition: all 0.3s;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
   // border-bottom: 2px solid $theme_color_fu;
 }
 
+.h-nav-list {
+  .h-nav-li {
+    .nuxt-link-exact-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%);
+      }
+    }
+    // :not(.h-nav-list-child) {
+    // }
+  }
+}
+
+// .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: $theme_fu_bule;
   border-bottom: 2px solid transparent;
@@ -249,7 +293,7 @@ ul.h-nav-list {
 
 .h-nav-list > li:first-child .nuxt-link-active.nuxt-link-exact-active {
   // border-bottom: 2px solid $theme_color_fu;
-  color: $theme_color_fu;
+  color: $theme_color;
 }
 // .h-nav-list-child li a.nuxt-link-exact-active {
 //   // border: none;
@@ -298,7 +342,7 @@ ul.h-nav-list-child li a {
 }
 
 ul.h-nav-list-child li a:hover {
-  color: $theme_color_fu;
+  color: $theme_color;
 }
 
 .h-right {

pages/index.vue

@@ -92,7 +92,7 @@
             class="desc founder-item wow animate__animated animate__fadeInDown"
           >全球优质儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展成为中国学前儿童思维教育领域奠基者和创领者之- -率先领导和实践幼儿园思维游戏化教学，用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以‘走出去、请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才</p>
           <div class="btn founder-item wow animate__animated animate__fadeInDown">
-            <nuxt-link to="/">了解中德智慧</nuxt-link>
+            <nuxt-link to="/about/brand">了解中德智慧</nuxt-link>
           </div>
         </div>
       </div>
@@ -449,8 +449,16 @@
         </div>
         <div class="town-content-box">
           <div class="town-btn-group">
-            <div class="town-btn-about animate__animated wow animate__fadeInLeft">了解我们</div>
-            <div class="town-btn-join animate__animated wow animate__fadeInRight">加入我们</div>
+            <div class="town-btn-about animate__animated wow animate__fadeInLeft">
+              <nuxt-link to="/about/brand">
+                了解我们
+              </nuxt-link>
+            </div>
+            <div class="town-btn-join animate__animated wow animate__fadeInRight">
+              <nuxt-link to="/cooperate">
+                加入我们
+              </nuxt-link>
+            </div>
           </div>
           <div class="town-content-skill">
             <div class="town-content-img">
@@ -629,7 +637,7 @@
           >
             <div class="swiper-wrapper">
               <div v-for="(item, index) in honorList" :key="index" class="swiper-slide">
-                <img :src="item.imgUrl">
+                <img class="honer-img" :src="item.imgUrl">
               </div>
             </div>
           </div>
@@ -1023,25 +1031,29 @@ export default {
       ],
       honorList: [
         {
-          imgUrl: require("../assets/images/index/honer.png"),
+          imgUrl: require("../assets/images/index/honer01.png"),
           title: "逻辑狗",
         },
         {
-          imgUrl: require("../assets/images/index/honer.png"),
+          imgUrl: require("../assets/images/index/honer02.png"),
           title: "逻辑狗",
         },
         {
-          imgUrl: require("../assets/images/index/honer.png"),
+          imgUrl: require("../assets/images/index/honer03.png"),
           title: "逻辑狗",
         },
         {
-          imgUrl: require("../assets/images/index/honer.png"),
+          imgUrl: require("../assets/images/index/honer04.png"),
           title: "逻辑狗",
         },
         {
-          imgUrl: require("../assets/images/index/honer.png"),
+          imgUrl: require("../assets/images/index/honer05.png"),
           title: "逻辑狗",
         },
+        {
+          imgUrl: require("../assets/images/index/honer06.png"),
+          title: "逻辑狗",
+        }
       ],
       articleList: {
         articleNews: {
@@ -1443,6 +1455,7 @@ export default {
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #ffffff;
+  cursor: pointer;
 }
 
 ul.cate-nav {
@@ -2233,8 +2246,17 @@ ul.cate-nav {
           line-height: 60px;
           border-radius: 30px;
           border: 1px solid $theme_color_fu;
-          color: $theme_color_fu;
           margin: 0 290px 0 308px;
+          cursor: pointer;
+          a {
+            color: $theme_color_fu;
+          }
+          &:hover {
+            background: $theme_color_fu;
+            a {
+              color: #fff;
+            }
+          }
         }
         .town-btn-join {
           width: 180px;
@@ -2243,6 +2265,10 @@ ul.cate-nav {
           background: $theme_color_fu;
           box-shadow: 0px 4px 9px 0px rgba(91, 141, 240, 0.83);
           border-radius: 30px;
+          cursor: pointer;
+          a {
+            color: #fff;
+          }
         }
       }
     }
@@ -2345,6 +2371,11 @@ ul.cate-nav {
     margin: 0 auto;
     .honer-content-box {
       padding: 0 20px;
+      .honer-img {
+        width: 239px;
+        height: 169px;
+        object-fit: fill;
+      }
     }
   }
   .swiper-slide {