硬件首页颜色是配

src/components/AboutUs.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="about_us_card_container">
     <HeadLine themeTitle="关于" title="我们" line1="ABOUT US" :theme="theme" />
-    <div :class="theme ? 'theme_color tag' : 'tag'">
+    <div :class="isHard ? 'hard_color tag' : theme ? 'theme_color tag' : 'tag'">
       <span class="fontscale">专业从事研发13年</span>
     </div>
     <article class="article">
@@ -16,6 +16,17 @@
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const isHard = ref(false)
+
+onMounted(() => {
+  console.log(route)
+  if (route.path.indexOf('/hardware') != -1) {
+    isHard.value = true
+  }
+})
 const props = defineProps({
   theme: {
     type: Boolean,
@@ -48,6 +59,9 @@ const props = defineProps({
       white-space: nowrap;
     }
   }
+  .hard_color {
+    background: $hardware-theme;
+  }
   .theme_color {
     background: $theme-color;
   }

src/components/Cooperation.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="cooperation_container">
-    <HeadLine
-      themeTitle="客户"
-      title="合作"
-      :flip="true"
-      line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
-      :theme="theme"
-    />
+    <div class="header_wrap">
+      <HeadLine
+        themeTitle="客户"
+        title="合作"
+        :flip="true"
+        line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
+        :theme="theme"
+      />
+    </div>
     <div class="client_wrap">
       <div class="card">
         <img :src="A1" alt="" class="img1" />
@@ -66,6 +68,9 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .cooperation_container {
+  .header_wrap {
+    background: #fff;
+  }
   .client_wrap {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

src/components/HeadLine.vue

@@ -15,6 +15,17 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+const theme = ref(false)
+
+onMounted(() => {
+  console.log(route)
+  if (route.path.indexOf('/hardware') != -1) {
+    theme.value = true
+  }
+})
 const props = defineProps({
   themeTitle: {
     type: String,
@@ -33,10 +44,6 @@ const props = defineProps({
   line2: {
     type: String,
   },
-  theme: {
-    type: Boolean,
-    default: false,
-  },
 })
 </script>
 
@@ -60,7 +67,7 @@ const props = defineProps({
     color: $home-color;
   }
   .theme_color {
-    color: $theme-color;
+    color: $hardware-theme;
   }
   .scale {
     font-size: 14px;

src/pages/Hardware.vue

@@ -44,6 +44,7 @@ import Cooperation from 'cpns/Cooperation'
 
 <style lang="scss" scoped>
 .hardware_home_container {
+  background: #f5f5f5;
   .img_wrap {
     padding: 0 7px;
   }