From caec4c40f4fb2508ed3eb368fed2977394e897a5 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 3 Apr 2023 17:33:34 +0800
Subject: [PATCH] 123

---
 src/assets/img/banner/jiantou.png                  | Bin 0 -> 211 bytes
 .../components/HeaderSwiper/SlideThree/index.vue   |  67 ++++++++++++---------
 src/views/Index/components/HeaderSwiper/index.vue  |  24 +++++++-
 3 files changed, 60 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/img/banner/jiantou.png

diff --git a/src/assets/img/banner/jiantou.png b/src/assets/img/banner/jiantou.png
new file mode 100644
index 0000000000000000000000000000000000000000..666081f75838c8a23b79ade0823c15dd9eaed4d5
GIT binary patch
literal 211
zcmeAS@N?(olHy`uVBq!ia0vp^JV4CB!3HGHK9Tzfq&N#aB8wRqxP?KOkzv*x37}xB
zr;B5V#MIXF3;7xgMcO{jzsd4+H)rTI*2oF0j^ZH)pD~HNJHX3f=2@gWOQq(v`IKTa
z<NuZ0x9>SGe6Ep8d&`vIhdp+4J{(%7P+rLSoJ;wNVa~oMe0>M=UZ~Dkz`3DkZLf3A
zcbn(N#x{$K-#FJL1XSe-25mdGK_&f~qPfKX$;Qz>^^N95QSwoTcWVg%9mL@2>gTe~
HDWM4fG}=qP

literal 0
HcmV?d00001

diff --git a/src/views/Index/components/HeaderSwiper/SlideThree/index.vue b/src/views/Index/components/HeaderSwiper/SlideThree/index.vue
index 41fbc9b..e1d0aca 100644
--- a/src/views/Index/components/HeaderSwiper/SlideThree/index.vue
+++ b/src/views/Index/components/HeaderSwiper/SlideThree/index.vue
@@ -1,53 +1,62 @@
 <template>
   <div class="slide_three 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 class="big_title">为大国品牌</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>
 </template>
 
 <script setup>
-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'
+import Gif from '@/assets/img/banner/nation/logo.png'
 </script>
 
 <style lang="scss" scoped>
 .slide_three {
   width: 100%;
   height: 100%;
-  background: url(../../../../../assets/img/banner/lilun/lilunshijian.jpg);
-  background-position: 100%;
+  background: url(../../../../../assets/img/banner/nation/back.png) no-repeat;
+  background-position: 0%;
   background-size: auto 100%;
   position: relative;
   .main_content {
     position: absolute;
-    left: 280px;
-    top: 359px;
-    .design_banner {
-      width: 192px;
-      height: 31px;
-      margin-bottom: 47px;
+    left: 206px;
+    top: 50%;
+    transform: translateY(-50%);
+    .big_title {
+      font-size: 100px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: bold;
+      color: #000000;
+      letter-spacing: 6px;
+      margin-bottom: 63px;
     }
-    .title_banner {
-      width: 593px;
-      height: 86px;
-      margin-bottom: 57px;
+    .btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 488px;
+      height: 67px;
+      background: linear-gradient(90deg, #4e0cf5, #283fe7);
+      border-radius: 33px;
+      font-size: 26px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
     }
-    .blue {
-      width: 530px;
-      height: 72px;
+  }
+  .right_img {
+    position: absolute;
+    right: 182px;
+    top: 50%;
+    transform: translateY(-50%);
+    .gif {
+      width: 903px;
     }
   }
   .bottom_statement {
diff --git a/src/views/Index/components/HeaderSwiper/index.vue b/src/views/Index/components/HeaderSwiper/index.vue
index 838f9ee..2dc0a6a 100644
--- a/src/views/Index/components/HeaderSwiper/index.vue
+++ b/src/views/Index/components/HeaderSwiper/index.vue
@@ -39,9 +39,9 @@
         </div>
       </template>
     </swiper>
-    <div class="down_circle" @click="toNext">
+    <div :class="isWhite ? 'down_circle' : 'down_circle bg_b'" @click="toNext">
       <img
-        :src="Arrow"
+        :src="getSrc()"
         alt="arrow"
         class="arrow animate__animated animate__heartBeat animate__infinite animate__slower"
       />
@@ -67,6 +67,7 @@ import SlideThree from './SlideThree'
 import SlideFour from './SlideFour'
 import SlideFive from './SlideFive'
 import Arrow from '@/assets/img/banner/arrow.png'
+import ArrowBlack from '@/assets/img/banner/jiantou.png'
 export default {
   components: {
     Swiper,
@@ -88,6 +89,22 @@ export default {
       const { activeIndex } = swiper
       swiperStore.updateHeaderIndex(activeIndex)
     },
+    getSrc() {
+      if (this.isWhite) {
+        return Arrow
+      }
+      return ArrowBlack
+    },
+  },
+  computed: {
+    isWhite() {
+      const swiperStore = useSwiperStore()
+      console.log(swiperStore.headerIndex)
+      if ([0, 1, 2, 3, 5, 6].includes(swiperStore.headerIndex)) {
+        return false
+      }
+      return true
+    },
   },
   setup() {
     const progressLine = ref(null)
@@ -136,5 +153,8 @@ export default {
       height: 8px;
     }
   }
+  .bg_b {
+    border: 2px solid #000;
+  }
 }
 </style>