123

src/components/TopNav/index.vue

@@ -4,8 +4,8 @@
       activeIndex == 0 ? 'header_container' : 'header_container not_first'
     "
   >
-    <img :src="isLogo1() ? Logo1 : Logo" alt="logo" />
-    <ul :class="isLogo1() ? 'flex_center' : 'flex_center font_change'">
+    <img :src="logo()" alt="logo" />
+    <ul :class="fontColor()">
       <li><router-link to="/index">首页</router-link></li>
       <li><router-link to="/case">工业设计</router-link></li>
       <li><router-link to="/soft-hardware">软硬件研发</router-link></li>
@@ -25,8 +25,20 @@ import { onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 const swiperStore = useSwiperStore()
 const { activeIndex } = storeToRefs(swiperStore)
-const isLogo1 = () => {
-  return swiperStore.activeIndex == 0
+const logo = () => {
+  if (swiperStore.activeIndex == 0) {
+    if ([4].includes(swiperStore.headerIndex)) return Logo1
+  }
+  return Logo
+}
+
+const fontColor = () => {
+  if (swiperStore.activeIndex == 0) {
+    if ([2, 3, 4].includes(swiperStore.headerIndex)) {
+      return 'flex_center white'
+    }
+  }
+  return 'flex_center font_change'
 }
 </script>
 
@@ -62,6 +74,9 @@ const isLogo1 = () => {
     .router-link-active {
       color: $theme_color;
     }
+    .white {
+      color: #fff;
+    }
   }
 }
 .font_change {

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

@@ -11,9 +11,7 @@
         </div>
       </div>
 
-      <div class="bottom_statement">
-        <img :src="Factory" alt="design" class="factory" />
-      </div>
+      <div class="bottom_statement">Product Dream Factory</div>
     </div>
     <div class="main_img" id="main_img">
       <img :src="People" alt="people" class="people" />
@@ -91,10 +89,13 @@ import People from '@/assets/img/banner/onestop/renwu.png'
       left: 84px;
       z-index: 999;
       bottom: 75px;
-      .factory {
-        width: 165px;
-        height: 11px;
-      }
+      width: 165px;
+      height: 11px;
+      font-size: 12px;
+      font-family: 'ZonaPro';
+      font-weight: 400;
+      color: #646a73;
+      letter-spacing: 1px;
     }
   }
   .main_img {

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

@@ -1,12 +1,72 @@
 <template>
-  <div class="slide_four">four</div>
+  <div class="slide_two title_slide">
+    <div class="main_content">
+      <div class="big_title">复合型<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>
 </template>
 
-<script>
-export default {}
+<script setup>
+import HeaderPng from '@/assets/img/banner/lilun/biaotitubiao.png'
 </script>
 
-<style scoped lang="scss">
-.slide_four {
+<style lang="scss" scoped>
+.slide_two {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../../assets/img/banner/team/back2.png) no-repeat;
+  background-position: 100%;
+  background-size: auto 100%;
+  position: relative;
+  .main_content {
+    position: absolute;
+    left: 135px;
+    top: 50%;
+    transform: translateY(-50%);
+    .big_title {
+      font-size: 75px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: bold;
+      color: #ffffff;
+      margin-bottom: 61px;
+      .nobold {
+        font-weight: 200;
+        font-family: Alibaba-PuHuiTi-L;
+      }
+    }
+    .en {
+      font-size: 18px;
+      font-family: 'ZonaPro';
+      font-weight: 800;
+      color: #ffffff;
+      margin-bottom: 62px;
+    }
+    .btn {
+      width: 523px;
+      height: 67px;
+      background: #ffffff;
+      border-radius: 33px;
+      font-size: 26px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #2e42ff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .bottom_statement {
+    position: absolute;
+    left: 87px;
+    bottom: 75px;
+    font-size: 12px;
+    font-family: 'ZonaPro';
+    font-weight: 400;
+    color: #ffffff;
+    letter-spacing: 1px;
+  }
 }
 </style>

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

@@ -13,15 +13,11 @@
       </div>
       <div class="new_btn">新工业设计</div>
     </div>
-    <div class="bottom_statement">
-      <img :src="Factory" alt="design" class="factory" />
-    </div>
+    <div class="bottom_statement">Product Dream Factory</div>
   </div>
 </template>
 
-<script setup>
-import Factory from '@/assets/img/banner/factory.png'
-</script>
+<script setup></script>
 
 <style lang="scss" scoped>
 .slide_one {
@@ -76,10 +72,13 @@ import Factory from '@/assets/img/banner/factory.png'
     position: absolute;
     left: 87px;
     bottom: 77px;
-    .factory {
-      width: 165px;
-      height: 11px;
-    }
+    width: 165px;
+    height: 11px;
+    font-size: 12px;
+    font-family: 'ZonaPro';
+    font-weight: 400;
+    color: #646a73;
+    letter-spacing: 1px;
   }
 }
 </style>

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

@@ -13,14 +13,11 @@
       />
       <img :src="Blue" alt="Blue" class="blue" />
     </div>
-    <div class="bottom_statement">
-      <img :src="Factory" alt="design" class="factory" />
-    </div>
+    <div class="bottom_statement">Product Dream Factory</div>
   </div>
 </template>
 
 <script setup>
-import Factory from '@/assets/img/banner/factory.png'
 import Design from '@/assets/img/banner/lilun/Practice.png'
 import Title from '@/assets/img/banner/lilun/lilunshijian.png'
 import Blue from '@/assets/img/banner/lilun/zhuanjiatuandui.png'
@@ -57,10 +54,11 @@ import Blue from '@/assets/img/banner/lilun/zhuanjiatuandui.png'
     position: absolute;
     left: 87px;
     bottom: 77px;
-    .factory {
-      width: 165px;
-      height: 11px;
-    }
+    font-size: 12px;
+    font-family: 'ZonaPro';
+    font-weight: 400;
+    color: #646a73;
+    letter-spacing: 1px;
   }
 }
 </style>

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

@@ -1,66 +1,69 @@
 <template>
   <div class="slide_two title_slide">
     <div class="main_content">
-      <img
-        :src="Design"
-        alt="Design"
-        class="design_banner animate__animated animate__fadeInDown"
-      />
-      <img
-        :src="Title"
-        alt="Title"
-        class="title_banner animate__animated animate__zoomIn"
-      />
-      <img :src="Blue" alt="Blue" class="blue" />
-    </div>
-    <div class="bottom_statement">
-      <img :src="Factory" alt="design" class="factory" />
+      <img :src="HeaderPng" alt="" class="main_png" />
+      <div class="big_title">理论结合实践</div>
+      <div class="btn">专注基础科学 - 培养百名专家团队</div>
     </div>
+    <div class="bottom_statement">Product Dream Factory</div>
   </div>
 </template>
 
 <script setup>
-import Factory from '@/assets/img/banner/factory.png'
-import Design from '@/assets/img/banner/team/composite.png'
-import Title from '@/assets/img/banner/team/fuhetuandui.png'
-import Blue from '@/assets/img/banner/team/zhuanjia.png'
+import HeaderPng from '@/assets/img/banner/lilun/biaotitubiao.png'
 </script>
 
 <style lang="scss" scoped>
 .slide_two {
   width: 100%;
   height: 100%;
-  background: url(../../../../../assets/img/banner/team/tuandui.jpg);
+  background: url(../../../../../assets/img/banner/lilun/back1.png) no-repeat;
   background-position: 100%;
   background-size: auto 100%;
   position: relative;
   .main_content {
     position: absolute;
-    left: 280px;
-    top: 359px;
-    .design_banner {
-      width: 395px;
-      height: 37px;
-      margin-bottom: 40px;
+    left: 111px;
+    top: 50%;
+    transform: translateY(-50%);
+    .main_png {
+      width: 151px;
+      height: 55px;
     }
-    .title_banner {
-      width: 690px;
-      height: 86px;
-      margin-bottom: 58px;
+    .big_title {
+      margin-top: 50px;
+      margin-bottom: 57px;
+      font-size: 100px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: bold;
+      color: #000000;
+      letter-spacing: 40;
     }
-    .blue {
-      width: 569px;
-      height: 72px;
+    .btn {
+      width: 473px;
+      height: 67px;
+      background: linear-gradient(90deg, #4e0cf5, #283fe7);
+      border-radius: 33px;
+      font-size: 26px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
   .bottom_statement {
     position: absolute;
     left: 87px;
-    bottom: 77px;
-    .factory {
-      width: 165px;
-      height: 11px;
-    }
+    bottom: 75px;
+    width: 165px;
+    height: 11px;
+    font-size: 12px;
+    font-family: 'ZonaPro';
+    font-weight: 400;
+    color: #646a73;
+    letter-spacing: 1px;
   }
 }
 </style>

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

@@ -16,19 +16,19 @@
       @autoplayTimeLeft="onAutoplayTimeLeft"
       class="header_swiper"
     >
-      <swiper-slide :virtualIndex="0">
+      <swiper-slide :virtualIndex="1">
         <SlideFive />
       </swiper-slide>
-      <swiper-slide :virtualIndex="1">
+      <swiper-slide :virtualIndex="2">
         <SlideTwo />
       </swiper-slide>
-      <swiper-slide :virtualIndex="2">
+      <swiper-slide :virtualIndex="3">
         <SlideOne />
       </swiper-slide>
-      <swiper-slide :virtualIndex="3">
+      <swiper-slide :virtualIndex="4">
         <SlideFour />
       </swiper-slide>
-      <swiper-slide :virtualIndex="3">
+      <swiper-slide :virtualIndex="5">
         <SlideThree />
       </swiper-slide>
       <template #container-end>