首选服务商

src/components/SubNavigation.vue

@@ -15,7 +15,7 @@
           <div class="btn" @click="toPage('/case-show')">案例展示</div>
           <div class="btn" @click="toPage('/contact')">联系我们</div>
           <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
-          <div class="btn" @click="toPage('/hardware-case')">软硬件研发</div>
+          <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
           <div class="btn" @click="toPage('/product')">产品研发</div>
         </div>
       </div>

src/components/Summarize.vue

@@ -2,7 +2,9 @@
   <div class="summarize_container">
     <div class="title_wrap">
       <h1 class="main_title">
-        产品设计<span class="theme_color">首选服务商</span>
+        产品设计<span :class="page == 'index' ? 'theme_color' : 'other_page'"
+          >首选服务商</span
+        >
       </h1>
       <div class="desc mb">
         专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地
@@ -36,11 +38,18 @@
         </div>
       </div>
     </div>
-    <div class="tag"></div>
+    <div :class="page == 'index' ? 'tag' : 'tag other'"></div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const props = defineProps({
+  page: {
+    type: String,
+    default: 'index',
+  },
+})
+</script>
 
 <style lang="scss" scoped>
 .summarize_container {
@@ -67,7 +76,10 @@
       color: #262626;
       margin-bottom: 27px;
       .theme_color {
-        color: #f94622;
+        color: $home-color;
+      }
+      .other_page {
+        color: $hardware-theme;
       }
     }
     .desc {
@@ -129,9 +141,12 @@
     bottom: 0;
     width: 29px;
     height: 14px;
-    background: #f94622;
+    background: $home-color;
     border-radius: 7px;
     border-top-right-radius: 0;
   }
+  .other {
+    background: $hardware-theme;
+  }
 }
 </style>

src/components/Swiper.vue

@@ -19,7 +19,7 @@
       <div class="swiper-button-next" @click="nextSwiper"></div>
     </swiper>
     <div class="summar_wrap">
-      <Summarize />
+      <Summarize :page="page" />
     </div>
     <div class="top_wrap"><Top /></div>
   </div>
@@ -48,6 +48,12 @@ const preSwiper = () => {
 const nextSwiper = () => {
   sw.value?.slideNext(500, false)
 }
+const props = defineProps({
+  page: {
+    type: String,
+    default: 'index',
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/components/Top.vue

@@ -19,7 +19,7 @@
           <div class="btn" @click="toPage('/case-show')">案例展示</div>
           <div class="btn" @click="toPage('/contact')">联系我们</div>
           <div class="btn" @click="toPage('/recruit')">招贤纳士</div>
-          <div class="btn" @click="toPage('/hardware-case')">软硬件研发</div>
+          <div class="btn" @click="toPage('/hardware')">软硬件研发</div>
           <div class="btn" @click="toPage('/product')">产品研发</div>
         </div>
       </div>

src/pages/Hardware.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hardware_home_container">
-    <Swiper />
+    <Swiper page="hardware" />
     <CaseShow />
     <div class="img_wrap">
       <img :src="Hard" class="img" alt="" />