123

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 {

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>