123

src/common/utils.js

@@ -8,6 +8,7 @@ export const handleScreenAuto = (showEmpty, id) => {
       handleBottomFont(id, scale)
       handleImgScale(id, scale)
       handleCooperation(id, scale)
+      handleSwiper(id, scale)
       showEmpty.value = false
     } else {
       if (clientHeight >= 1764) {
@@ -16,6 +17,7 @@ export const handleScreenAuto = (showEmpty, id) => {
         handleBottomFont(id, scale)
         handleImgScale(id, scale)
         handleCooperation(id, scale)
+        handleSwiper(id, scale)
         showEmpty.value = false
       } else {
         if (clientHeight >= 1323) {
@@ -24,6 +26,7 @@ export const handleScreenAuto = (showEmpty, id) => {
           handleBottomFont(id, scale)
           handleImgScale(id, scale)
           handleCooperation(id, scale)
+          handleSwiper(id, scale)
           showEmpty.value = false
         } else {
           const scale = 1080 / clientHeight
@@ -31,6 +34,7 @@ export const handleScreenAuto = (showEmpty, id) => {
           handleBottomFont(id, scale)
           handleImgScale(id, scale)
           handleCooperation(id, scale)
+          handleSwiper(id, scale)
           showEmpty.value = false
         }
       }
@@ -70,6 +74,12 @@ const handleCooperation = (id, scale) => {
   }
 }
 
+const handleSwiper = (id, scale) => {
+  // if (id == '#slide_five') {
+  //   document.getElementById('main_img').style.transform = `scale(${1 / scale})`
+  // }
+}
+
 export const animateCSS = (element, animation, prefix = 'animate__') =>
   // We create a Promise and return it
   new Promise((resolve, reject) => {

src/components/TopNav/index.vue

@@ -4,8 +4,8 @@
       activeIndex == 0 ? 'header_container' : 'header_container not_first'
     "
   >
-    <img :src="activeIndex == 0 ? Logo1 : Logo" alt="logo" />
-    <ul :class="activeIndex == 0 ? 'flex_center' : 'flex_center font_change'">
+    <img :src="isLogo1() ? Logo1 : Logo" alt="logo" />
+    <ul :class="isLogo1() ? 'flex_center' : 'flex_center font_change'">
       <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,6 +25,9 @@ import { onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 const swiperStore = useSwiperStore()
 const { activeIndex } = storeToRefs(swiperStore)
+const isLogo1 = () => {
+  return swiperStore.activeIndex == 0
+}
 </script>
 
 <style scoped lang="scss">

src/store/modules/swiper.js

@@ -6,6 +6,7 @@ export const useSwiperStore = defineStore({
     return {
       swiper: null,
       activeIndex: 0,
+      headerIndex: 0,
     }
   },
   // actions
@@ -19,5 +20,8 @@ export const useSwiperStore = defineStore({
     updateActiveIndex(index) {
       this.activeIndex = index
     },
+    updateHeaderIndex(index) {
+      this.headerIndex = index
+    },
   },
 })

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

@@ -1,10 +1,119 @@
 <template>
-  <div class="slide_five">slide_five</div>
+  <div class="wrap">
+    <div class="slide_five" id="slide_five">
+      <div class="header_c">
+        <div class="title">
+          <div class="left">研发、设计、量产</div>
+          <div class="right">一站式解决方案</div>
+        </div>
+        <div class="desc">
+          外观是产品的外衣/结构是产品的骨骼/硬件是产品的肌肉/软件是产品的灵魂
+        </div>
+      </div>
+
+      <div class="bottom_statement">
+        <img :src="Factory" alt="design" class="factory" />
+      </div>
+    </div>
+    <div class="main_img" id="main_img">
+      <img :src="People" alt="people" class="people" />
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Factory from '@/assets/img/banner/factory.png'
+import People from '@/assets/img/banner/onestop/renwu.png'
+// import { ref, onMounted } from 'vue'
+// import { handleScreenAuto } from '@/common/utils'
+// onMounted(() => {
+//   handleScreenAuto(showEmpty, '#slide_five')
+//   window.onresize = handleScreenAuto(showEmpty, '#slide_five')
+// })
+// const showEmpty = ref(false)
+</script>
 
 <style scoped lang="scss">
-.slide_five {
+.wrap {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../../assets/img/banner/onestop/back.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  .slide_five {
+    width: 100%;
+    height: 100%;
+    .header_c {
+      position: absolute;
+      top: 175px;
+      left: 50%;
+      transform: translate(-50%);
+      width: 893px;
+      .title {
+        width: 855px;
+        height: 77px;
+        display: flex;
+        border: solid 2px $theme_color;
+        overflow: hidden;
+        border-radius: 43px;
+        align-items: center;
+        margin-bottom: 50px;
+        .left {
+          width: 50%;
+          height: 100%;
+          display: flex;
+          background: $theme_color;
+          align-items: center;
+          justify-content: center;
+          font-size: 40px;
+          font-family: DFPYuanW5-GB;
+          font-weight: 400;
+          color: #ffffff;
+        }
+        .right {
+          width: 50%;
+          background: #fff;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 42px;
+          font-family: DFPYuanW7-GB;
+          font-weight: 400;
+          color: #000000;
+        }
+      }
+      .desc {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 19px;
+        font-family: 'SourceHanSans';
+        font-weight: 400;
+        color: #aeaeae;
+      }
+    }
+    .bottom_statement {
+      position: absolute;
+      left: 84px;
+      z-index: 999;
+      bottom: 75px;
+      .factory {
+        width: 165px;
+        height: 11px;
+      }
+    }
+  }
+  .main_img {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%);
+
+    .people {
+      height: calc(100vh / 1.6);
+      width: 100vw;
+    }
+  }
 }
 </style>

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

@@ -1,17 +1,17 @@
 <template>
   <div class="slide_one 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" />
+      <h1 class="big_title">引领工业设计<span class="blue">新未来</span></h1>
+      <div class="type_f">
+        <p class="ml16">研发型外观设计</p>
+        <p class="ml16">|</p>
+        <p class="ml16">研发型结构设计</p>
+        <p class="ml16">|</p>
+        <p class="ml16">硬件开发</p>
+        <p class="ml16">|</p>
+        <p>软件开发</p>
+      </div>
+      <div class="new_btn">新工业设计</div>
     </div>
     <div class="bottom_statement">
       <img :src="Factory" alt="design" class="factory" />
@@ -21,9 +21,6 @@
 
 <script setup>
 import Factory from '@/assets/img/banner/factory.png'
-import Design from '@/assets/img/banner/design/design.png'
-import Title from '@/assets/img/banner/design/xingongyesheji.png'
-import Blue from '@/assets/img/banner/design/gongyebiaoti.png'
 </script>
 
 <style lang="scss" scoped>
@@ -36,21 +33,43 @@ import Blue from '@/assets/img/banner/design/gongyebiaoti.png'
   position: relative;
   .main_content {
     position: absolute;
-    left: 280px;
-    top: 359px;
-    .design_banner {
-      width: 151px;
-      height: 37px;
-      margin-bottom: 45px;
+    left: 155px;
+    top: 352px;
+    .big_title {
+      font-size: 90px;
+      letter-spacing: 80;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 300;
+      color: #ffffff;
+      margin-bottom: 54px;
+      .blue {
+        color: $theme_color;
+      }
     }
-    .title_banner {
-      width: 487px;
-      height: 84px;
-      margin-bottom: 57px;
+    .type_f {
+      display: flex;
+      align-items: center;
+      font-size: 19px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #f9f9f9;
+      margin-bottom: 51px;
+      .ml16 {
+        margin-right: 16px;
+      }
     }
-    .blue {
-      width: 360px;
-      height: 72px;
+    .new_btn {
+      width: 242px;
+      height: 67px;
+      background: linear-gradient(90deg, #4e0cf5, #283fe7);
+      border-radius: 33px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 26px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
     }
   }
   .bottom_statement {

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

@@ -5,11 +5,8 @@
       :modules="modules"
       :virtual="true"
       :spaceBetween="0"
-      :autoplay="{
-        delay: 5000,
-        disableOnInteraction: false,
-      }"
       :loop="true"
+      @swiper="onSwiper"
       @slideChange="onSlideChange"
       :keyboard="{
         enabled: true,
@@ -20,19 +17,19 @@
       class="header_swiper"
     >
       <swiper-slide :virtualIndex="0">
-        <SlideOne />
+        <SlideFive />
       </swiper-slide>
       <swiper-slide :virtualIndex="1">
         <SlideTwo />
       </swiper-slide>
       <swiper-slide :virtualIndex="2">
-        <SlideThree />
+        <SlideOne />
       </swiper-slide>
       <swiper-slide :virtualIndex="3">
         <SlideFour />
       </swiper-slide>
       <swiper-slide :virtualIndex="3">
-        <SlideFive />
+        <SlideThree />
       </swiper-slide>
       <template #container-end>
         <div class="autoplay-progress">
@@ -52,6 +49,10 @@
   </div>
 </template>
 <script>
+// :autoplay="{
+//       delay: 5000,
+//       disableOnInteraction: false,
+//     }"
 import { useSwiperStore } from '@/store'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
@@ -81,7 +82,12 @@ export default {
       const swiperStore = useSwiperStore()
       swiperStore.slideTo(1)
     },
-    onSlideChange(swiper) {},
+    onSwiper(swiper) {},
+    onSlideChange(swiper) {
+      const swiperStore = useSwiperStore()
+      const { activeIndex } = swiper
+      swiperStore.updateHeaderIndex(activeIndex)
+    },
   },
   setup() {
     const progressLine = ref(null)