color change

src/assets/scss/globalVar.scss

@@ -1,3 +1,4 @@
-$bg-color: #1989fa;
+$home-color: #f94622;
+$theme-color: #2537e3;
 $bottom-height: 31px;
 $sub-header-height: 47px;

src/components/AboutUs.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="about_us_card_container">
-    <HeadLine themeTitle="关于" title="我们" line1="ABOUT US" />
-    <div class="tag"><span class="fontscale">专业从事研发13年</span></div>
+    <HeadLine themeTitle="关于" title="我们" line1="ABOUT US" :theme="theme" />
+    <div :class="theme ? 'theme_color tag' : 'tag'">
+      <span class="fontscale">专业从事研发13年</span>
+    </div>
     <article class="article">
       产品梦工厂作为一家资深的研发公司，主导了大量产品从需求→产品定义→策划→外
       观→结构→硬件→嵌软→软件→全功能样机→模具→批量→灰度测试→产能爬坡全流
@@ -14,6 +16,12 @@
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+const props = defineProps({
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
 
 <style lang="scss" scoped>
@@ -26,7 +34,7 @@ import HeadLine from 'cpns/HeadLine'
   .tag {
     width: 90px;
     height: 17px;
-    background: #f94622;
+    background: $home-color;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -40,6 +48,9 @@ import HeadLine from 'cpns/HeadLine'
       white-space: nowrap;
     }
   }
+  .theme_color {
+    background: $theme-color;
+  }
   .article {
     font-family: Source Han Sans CN;
     font-weight: 300;

src/components/Cooperation.vue

@@ -5,6 +5,7 @@
       title="合作"
       :flip="true"
       line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
+      :theme="theme"
     />
     <div class="client_wrap">
       <div class="card"></div>
@@ -33,6 +34,12 @@
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+const props = defineProps({
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/components/DesignConcept.vue

@@ -5,6 +5,7 @@
       themeTitle="设计理念"
       :flip="true"
       line1="DESIGN CONCEPT"
+      :theme="theme"
     />
     <div class="cards">
       <div class="card">card</div>
@@ -17,6 +18,12 @@
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+const props = defineProps({
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/components/HeadLine.vue

@@ -2,7 +2,9 @@
   <div class="headline_container">
     <h2 class="title_h2">
       {{ flip ? title : '' }}
-      <span class="theme">{{ themeTitle }}</span>
+      <span :class="theme ? 'theme theme_color' : 'theme'">{{
+        themeTitle
+      }}</span>
       {{ !flip ? title : '' }}
     </h2>
     <div class="scale">
@@ -31,6 +33,10 @@ const props = defineProps({
   line2: {
     type: String,
   },
+  theme: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>
 
@@ -51,7 +57,10 @@ const props = defineProps({
     align-items: center;
   }
   .theme {
-    color: #f94622;
+    color: $home-color;
+  }
+  .theme_color {
+    color: $theme-color;
   }
   .scale {
     font-size: 14px;

src/components/QRCode.vue

@@ -5,6 +5,7 @@
       themeTitle="找到我们"
       :flip="true"
       line1="WECHAT/PHONEs"
+      :theme="theme"
     />
     <div class="qrcode_wrap">
       <div class="qrcode"></div>
@@ -18,6 +19,12 @@
 
 <script setup>
 import HeadLine from 'cpns/HeadLine'
+const props = defineProps({
+  theme: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/pages/Company.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="company_container">
     <SubNavigation />
-    <AboutUs />
+    <AboutUs :theme="true" />
     <div class="video_wrap">
       <div class="video_container">
         <video
@@ -19,9 +19,9 @@
         </div>
       </div>
     </div>
-    <DesignConcept />
-    <Cooperation />
-    <QRCode />
+    <DesignConcept :theme="true" />
+    <Cooperation :theme="true" />
+    <QRCode :theme="true" />
   </div>
 </template>