服务商位置

src/components/Bottom.vue

@@ -12,5 +12,6 @@
   right: 0;
   height: $bottom-height;
   background: #283fe7;
+  z-index: 999;
 }
 </style>

src/components/CaseShow.vue

@@ -37,6 +37,7 @@ import HeadLine from 'cpns/HeadLine'
 
 <style lang="scss" scoped>
 .case_show_container {
+  margin-top: 330px;
   .line_cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);

src/components/Summarize.vue

@@ -36,6 +36,7 @@
         </div>
       </div>
     </div>
+    <div class="tag"></div>
   </div>
 </template>
 
@@ -46,6 +47,8 @@
   padding: 43px 0 49px 0;
   box-sizing: border-box;
   background: #fff;
+  border-radius: 7px;
+  position: relative;
   .title_wrap {
     display: flex;
     flex-direction: column;
@@ -121,5 +124,15 @@
       }
     }
   }
+  .tag {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 29px;
+    height: 14px;
+    background: #f94622;
+    border-radius: 7px;
+    border-top-right-radius: 0;
+  }
 }
 </style>

src/components/Swiper.vue

@@ -17,11 +17,15 @@
       <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
       <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
     </swiper>
+    <div class="summar_wrap">
+      <Summarize />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { Swiper, SwiperSlide } from 'swiper/vue'
+import Summarize from 'cpns/Summarize'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/navigation'
@@ -29,10 +33,21 @@ import { Pagination, Navigation } from 'swiper'
 const modules = [Pagination, Navigation]
 </script>
 
-<style>
+<style lang="scss" scoped>
 .swiper_container {
   width: 100vw;
-  height: 100vw;
-  background: #000;
+  height: 126vw;
+  position: relative;
+  .summar_wrap {
+    position: absolute;
+    box-sizing: border-box;
+    padding: 0 7px;
+    left: 0;
+    bottom: -300px;
+    z-index: 200;
+    right: 0;
+    width: 100%;
+    height: 340px;
+  }
 }
 </style>

src/pages/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="home_container">
     <Swiper />
-    <Summarize />
     <CaseShow />
     <MechanicalDrive />
     <Track />
@@ -16,7 +15,6 @@
 
 <script setup>
 import Swiper from 'cpns/Swiper'
-import Summarize from 'cpns/Summarize'
 import CaseShow from 'cpns/CaseShow'
 import MechanicalDrive from 'cpns/MechanicalDrive'
 import AboutUs from 'cpns/AboutUs'

src/style.scss

@@ -4,7 +4,7 @@
 }
 
 .swiper-slide {
-  background: #fff;
+  background: #131425;
 }
 
 .swiper {