123

src/common/utils.js

@@ -89,12 +89,12 @@ export const totalPageAni = async (activeIndex, previousIndex) => {
   const isDown = previousIndex < activeIndex
   const aniName = isDown ? 'fadeInUp' : 'fadeInDown'
   if (activeIndex == 0) {
-    animateCSS('#main_img', 'fadeInUp')
-    animateCSS('#slide_five_desc_ani', 'fadeInUp')
-    animateCSS('#slide_two_ani', 'fadeInDown')
-    animateCSS('#slide_one_ani', 'fadeInDown')
-    animateCSS('#slide_three_ani', 'fadeInDown')
-    animateCSS('#slide_four_ani', 'fadeInDown')
+    // animateCSS('#main_img', 'fadeInUp')
+    // animateCSS('#slide_five_desc_ani', 'fadeInUp')
+    // animateCSS('#slide_two_ani', 'fadeInDown')
+    // animateCSS('#slide_one_ani', 'fadeInDown')
+    // animateCSS('#slide_three_ani', 'fadeInDown')
+    // animateCSS('#slide_four_ani', 'fadeInDown')
   }
   if (activeIndex == 1) {
     animateCSS('#servive_big_title_ani', aniName)
@@ -135,3 +135,22 @@ export const totalPageAni = async (activeIndex, previousIndex) => {
   if (activeIndex == 13) {
   }
 }
+
+// export const totalTitleAni = (activeIndex, previousIndex) => {
+//   if (activeIndex == 1) {
+//     animateCSS('#main_img', 'fadeInUp')
+//     animateCSS('#slide_five_desc_ani', 'fadeInUp')
+//   }
+//   if (activeIndex == 2) {
+//     animateCSS('#slide_two_ani', 'fadeInDown')
+//   }
+//   if (activeIndex == 3) {
+//     animateCSS('#slide_one_ani', 'fadeInDown')
+//   }
+//   if (activeIndex == 4) {
+//     animateCSS('#slide_four_ani', 'fadeInDown')
+//   }
+//   if (activeIndex == 5) {
+//     animateCSS('#slide_three_ani', 'fadeInDown')
+//   }
+// }

src/components/TopNav/index.vue

@@ -20,6 +20,7 @@
 <script setup>
 import Logo1 from '@/assets/img/banner/logo1.png'
 import Logo from '@/assets/img/banner/logo.png'
+import LogoWhite from '@/assets/img/banner/logo3.png'
 import { useSwiperStore, useCountStore } from '@/store'
 import { onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
@@ -51,7 +52,7 @@ const scrollToPage = index => {
 
 const logo = () => {
   if (swiperStore.activeIndex == 0) {
-    if ([4].includes(swiperStore.headerIndex)) return Logo1
+    if ([4].includes(swiperStore.headerIndex)) return LogoWhite
   }
   return Logo
 }

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

@@ -7,13 +7,19 @@
           <div class="right">一站式解决方案</div>
         </div>
         <!-- 等下面弄完弄着 -->
-        <div class="desc" id="slide_five_desc_ani">
+        <div
+          class="desc animate__animated animate__fadeInDown animate__delay-1s"
+          id="slide_five_desc_ani"
+        >
           外观是产品的外衣/结构是产品的骨骼/硬件是产品的肌肉/软件是产品的灵魂
         </div>
       </div>
-      <div class="bottom_statement">Product Dream Factory</div>
+      <div class="bottom_statement">Product Dreamworks</div>
     </div>
-    <div class="main_img" id="main_img"></div>
+    <div
+      class="main_img animate__animated animate__fadeInUp"
+      id="main_img"
+    ></div>
   </div>
 </template>
 

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

@@ -1,28 +1,40 @@
 <template>
   <div class="slide_two title_slide">
     <div class="main_content">
-      <div class="big_title" id="slide_four_ani">
+      <div
+        class="big_title animate__animated animate__fadeInDown"
+        id="slide_four_ani"
+      >
         复合型<span class="nobold">人才团队</span>
       </div>
       <div class="en">COMPOSITE TEAM</div>
       <div class="btn">跨学科技术专家，全面助力产品研发</div>
     </div>
-    <div class="bottom_statement">Product Dream Factory</div>
+    <!-- <div class="backyuansu"></div> -->
+    <div class="bottom_statement">Product Dreamworks</div>
   </div>
 </template>
 
-<script setup>
-import HeaderPng from '@/assets/img/banner/lilun/biaotitubiao.png'
-</script>
+<script setup></script>
 
 <style lang="scss" scoped>
 .slide_two {
   width: 100%;
   height: 100%;
-  background: url(../../../../../assets/img/banner/team/back2.png) no-repeat;
+  background: url(../../../../../assets/img/banner/team/back2.gif) no-repeat;
   background-position: 100%;
   background-size: auto 100%;
   position: relative;
+  .backyuansu {
+    position: absolute;
+    left: 0;
+    bottom: 30px;
+    width: 280px;
+    height: 428px;
+    background: url(../../../../../assets/img/banner/team/backyuansu.png)
+      no-repeat;
+    background-size: 100% 100%;
+  }
   .main_content {
     position: absolute;
     left: 135px;

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

@@ -1,7 +1,10 @@
 <template>
   <div class="slide_one title_slide">
     <div class="main_content">
-      <h1 class="big_title" id="slide_one_ani">
+      <h1
+        class="big_title animate__animated animate__fadeInDown"
+        id="slide_one_ani"
+      >
         引领工业设计<span class="blue">新未来</span>
       </h1>
       <div class="type_f">
@@ -17,7 +20,7 @@
       </div>
       <div class="new_btn">新·工业设计</div>
     </div>
-    <div class="bottom_statement">Product Dream Factory</div>
+    <div class="bottom_statement">Product Dreamworks</div>
   </div>
 </template>
 

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

@@ -1,13 +1,18 @@
 <template>
   <div class="slide_three title_slide">
     <div class="main_content">
-      <div class="big_title" id="slide_three_ani">为大国品牌</div>
+      <div
+        class="big_title animate__animated animate__fadeInDown"
+        id="slide_three_ani"
+      >
+        为大国品牌
+      </div>
       <div class="btn">建立研发体系和生产流程新标准</div>
     </div>
     <div class="right_img">
       <img :src="Gif" class="gif" alt="" />
     </div>
-    <div class="bottom_statement">Product Dream Factory</div>
+    <div class="bottom_statement">Product Dreamworks</div>
   </div>
 </template>
 

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

@@ -2,10 +2,15 @@
   <div class="slide_two title_slide">
     <div class="main_content">
       <img :src="HeaderPng" alt="" class="main_png" />
-      <div class="big_title" id="slide_two_ani">理论结合实践</div>
+      <div
+        class="big_title animate__animated animate__fadeInDown"
+        id="slide_two_ani"
+      >
+        理论结合实践
+      </div>
       <div class="btn">专注基础科学 · 培养百名专家团队</div>
     </div>
-    <div class="bottom_statement">Product Dream Factory</div>
+    <div class="bottom_statement">Product Dreamworks</div>
   </div>
 </template>
 

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

@@ -6,6 +6,10 @@
       :virtual="true"
       :spaceBetween="0"
       :loop="true"
+      :autoplay="{
+        delay: 5000,
+        disableOnInteraction: false,
+      }"
       @swiper="onSwiper"
       @slideChange="onSlideChange"
       :keyboard="{
@@ -49,10 +53,6 @@
   </div>
 </template>
 <script>
-//  :autoplay="{
-//       delay: 5000,
-//       disableOnInteraction: false,
-//     }"
 import { useSwiperStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
@@ -63,6 +63,7 @@ import { Pagination, Autoplay, Keyboard, Virtual } from 'swiper'
 import { ref } from 'vue'
 import SlideOne from './SlideOne'
 import SlideTwo from './SlideTwo'
+// import { totalTitleAni } from '@/common/utils'
 import SlideThree from './SlideThree'
 import SlideFour from './SlideFour'
 import SlideFive from './SlideFive'
@@ -83,10 +84,14 @@ export default {
       const swiperStore = useSwiperStore()
       swiperStore.slideTo(1)
     },
-    onSwiper(swiper) {},
+    onSwiper(swiper) {
+      // const { activeIndex, previousIndex } = swiper
+      // totalTitleAni(activeIndex, previousIndex)
+    },
     onSlideChange(swiper) {
       const swiperStore = useSwiperStore()
-      const { activeIndex } = swiper
+      const { activeIndex, previousIndex } = swiper
+      // totalTitleAni(activeIndex, previousIndex)
       swiperStore.updateHeaderIndex(activeIndex)
     },
     getSrc() {