123

src/components/TopNav/index.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import Logo from '@/assets/img/logo.png'
+import Logo from '@/assets/img/logo1.png'
 </script>
 
 <style scoped lang="scss">

src/style.scss

@@ -84,22 +84,23 @@ body {
     position: absolute;
     right: 0 !important;
     left: 90vw !important;
-    bottom: 40px !important;
-    width: 100px !important;
+    bottom: 90px !important;
+    width: 52px !important;
     .swiper-pagination-bullet {
       width: 5px;
       height: 5px;
+      background-color: #576166;
     }
-
     .swiper-pagination-bullet-active {
+      background-color: $theme_color;
     }
   }
 }
 
 .autoplay-progress {
   position: absolute;
-  right: 160px;
-  bottom: 16px;
+  left: 90vw;
+  bottom: 73px;
   z-index: 10;
   width: 100px;
   height: 10px;
@@ -119,6 +120,7 @@ body {
   height: 100%;
   stroke-width: 20px;
   fill: none;
-  stroke-dashoffset: calc(300 * (1 - var(--progress)));
-  stroke-dasharray: 300;
+  stroke: $theme_color;
+  stroke-dashoffset: calc(480 * (1 - var(--progress)));
+  stroke-dasharray: 480;
 }

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

@@ -0,0 +1,12 @@
+<template>
+  <div class="slide_four">four</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.slide_four {
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="slide_one">
+    <div class="main_content"></div>
+    <div class="bottom_statement"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.slide_one {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../../assets/img/1.jpg);
+  background-position: 40%;
+  background-size: auto 100%;
+  position: relative;
+  .main_content {
+    position: absolute;
+    left: 280px;
+    top: 359px;
+  }
+  .bottom_statement {
+    position: absolute;
+    left: 87px;
+    bottom: 77px;
+  }
+}
+</style>

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

@@ -0,0 +1,12 @@
+<template>
+  <div class="slide_three">three</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.slide_three {
+}
+</style>

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

@@ -0,0 +1,12 @@
+<template>
+  <div class="slide_two">twoi</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.slide_two {
+}
+</style>

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

@@ -11,15 +11,21 @@
     class="header_swiper"
   >
     <swiper-slide>
-      <div class="slide_one">hello world</div>
+      <SlideOne />
+    </swiper-slide>
+    <swiper-slide>
+      <SlideTwo />
+    </swiper-slide>
+    <swiper-slide>
+      <SlideThree />
+    </swiper-slide>
+    <swiper-slide>
+      <SlideFour />
     </swiper-slide>
-    <swiper-slide>Slide 2</swiper-slide>
-    <swiper-slide>Slide 3</swiper-slide>
-    <swiper-slide>Slide 4</swiper-slide>
     <template #container-end>
       <div class="autoplay-progress">
         <svg viewBox="0 0 48 48" ref="progressLine">
-          <line x1="0" y1="2" x2="300" y2="2" stroke="skyblue"></line>
+          <line x1="-190" y1="2" x2="300" y2="2"></line>
         </svg>
       </div>
     </template>
@@ -33,10 +39,18 @@ import 'swiper/css'
 // import required modules
 import { Pagination, Autoplay } from 'swiper'
 import { ref } from 'vue'
+import SlideOne from './SlideOne'
+import SlideTwo from './SlideTwo'
+import SlideThree from './SlideThree'
+import SlideFour from './SlideFour'
 export default {
   components: {
     Swiper,
     SwiperSlide,
+    SlideOne,
+    SlideTwo,
+    SlideThree,
+    SlideFour,
   },
   setup() {
     const progressLine = ref(null)
@@ -59,12 +73,5 @@ export default {
 
 <style scoped lang="scss">
 .header_swiper {
-  .slide_one {
-    width: 100%;
-    height: 100%;
-    background: url(../../../../assets/img/1.jpg);
-    background-position: 40%;
-    background-size: auto 100%;
-  }
 }
 </style>