123

src/components/TopNav/index.vue

@@ -4,15 +4,19 @@
       activeIndex == 0 ? 'header_container' : 'header_container not_first'
     "
   >
-    <img :src="logo()" alt="logo" class="logo" />
+    <img :src="logo()" alt="logo" class="logo" @click="scrollToPage(0)" />
     <ul :class="fontColor()">
-      <li :class="getActiveClass(0)" @click="scrollToPage(0)">首页</li>
-      <li :class="getActiveClass(3)" @click="scrollToPage(3)">工业设计</li>
-      <li :class="getActiveClass(5)" @click="scrollToPage(5)">软硬件研发</li>
-      <li :class="getActiveClass(10)" @click="scrollToPage(10)">结构开发</li>
-      <li :class="getActiveClass(13)" @click="scrollToPage(13)">企业文化</li>
-      <li :class="getActiveClass(14)" @click="scrollToPage(14)">加入我们</li>
-      <li :class="getActiveClass(16)" @click="scrollToPage(16)">联系我们</li>
+      <li :class="getActiveClass([0])" @click="scrollToPage(0)">首页</li>
+      <li :class="getActiveClass([3, 4])" @click="scrollToPage(3)">工业设计</li>
+      <li :class="getActiveClass([5, 6, 7, 8])" @click="scrollToPage(5)">
+        软硬件研发
+      </li>
+      <li :class="getActiveClass([10, 11])" @click="scrollToPage(10)">
+        结构开发
+      </li>
+      <li :class="getActiveClass([13])" @click="scrollToPage(13)">企业文化</li>
+      <li :class="getActiveClass([14])" @click="scrollToPage(14)">加入我们</li>
+      <li :class="getActiveClass([16])" @click="scrollToPage(16)">联系我们</li>
     </ul>
   </div>
 </template>
@@ -29,7 +33,7 @@ const countStore = useCountStore()
 const { activeIndex } = storeToRefs(swiperStore)
 
 const getActiveClass = index => {
-  if (swiperStore.activeIndex == index) {
+  if (index.includes(swiperStore.activeIndex)) {
     return 'active'
   }
   return ''
@@ -37,7 +41,7 @@ const getActiveClass = index => {
 
 const scrollToPage = index => {
   // 让数字动
-  swiperStore.swiper.slideTo(index, 1000, false)
+  swiperStore.swiper.slideTo(index, 0, false)
   if (index == 3) {
     setTimeout(() => {
       countStore.countAdd()
@@ -87,10 +91,18 @@ const fontColor = () => {
   font-size: 18px;
   li {
     margin: 0 30px;
+    transition-property: all;
+    transition-duration: 0.3s;
+    animation-fill-mode: forwards;
+  }
+  li:hover {
+    transform: scale(1.1);
+    color: rgb(40, 63, 231, 0.6);
   }
   .logo {
     height: 40px;
     width: auto;
+    cursor: pointer;
   }
 }
 .flex_center {

src/views/Index/components/HeaderSwiper/SlideFive/index.vue

@@ -51,6 +51,9 @@
         border-radius: 43px;
         align-items: center;
         margin-bottom: 50px;
+        transition-property: all;
+        transition-duration: 0.7s;
+        animation-fill-mode: forwards;
         .left {
           width: 50%;
           height: 100%;
@@ -76,6 +79,9 @@
           color: #000000;
         }
       }
+      .title:hover {
+        transform: scale(1.05);
+      }
       .desc {
         display: flex;
         align-items: center;

src/views/Index/components/HeaderSwiper/SlideFour/index.vue

@@ -71,6 +71,13 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      letter-spacing: 2px;
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
+    }
+    .btn:hover {
+      transform: scale(1.05);
     }
   }
   .bottom_statement {

src/views/Index/components/HeaderSwiper/SlideOne/index.vue

@@ -18,7 +18,7 @@
         <p class="ml16">|</p>
         <p>量产</p>
       </div>
-      <div class="new_btn">新·工业设计</div>
+      <div class="new_btn">新<span class="point"> · </span>工业设计</div>
     </div>
     <div class="bottom_statement">Product Dreamworks</div>
   </div>
@@ -74,6 +74,16 @@
       font-family: Alibaba PuHuiTi;
       font-weight: 400;
       color: #ffffff;
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
+      .point {
+        font-size: 60px;
+        margin: 0 6px;
+      }
+    }
+    .new_btn:hover {
+      transform: scale(1.05);
     }
   }
   .bottom_statement {

src/views/Index/components/HeaderSwiper/SlideThree/index.vue

@@ -54,6 +54,13 @@ import Gif from '@/assets/img/banner/nation/logo.png'
       font-family: Alibaba PuHuiTi;
       font-weight: 400;
       color: #ffffff;
+      letter-spacing: 2px;
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
+    }
+    .btn:hover {
+      transform: scale(1.05);
     }
   }
   .right_img {

src/views/Index/components/HeaderSwiper/SlideTwo/index.vue

@@ -8,7 +8,9 @@
       >
         理论结合实践
       </div>
-      <div class="btn">专注基础科学 · 培养百名专家团队</div>
+      <div class="btn">
+        专注基础科学<span class="point"> · </span>培养百名专家团队
+      </div>
     </div>
     <div class="bottom_statement">Product Dreamworks</div>
   </div>
@@ -57,6 +59,16 @@ import HeaderPng from '@/assets/img/banner/lilun/biaotitubiao.png'
       display: flex;
       align-items: center;
       justify-content: center;
+      transition-property: all;
+      transition-duration: 0.7s;
+      animation-fill-mode: forwards;
+      .point {
+        font-size: 60px;
+        margin: 0 6px;
+      }
+    }
+    .btn:hover {
+      transform: scale(1.05);
     }
   }
   .bottom_statement {