feat: 支持切换颜色

src/components/HomePageFooter.vue

@@ -61,8 +61,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-$primary-color: #e28e39;
-
 .home-page-footer {
   background-color: #323232;
   color: #fff;
@@ -93,7 +91,7 @@ $primary-color: #e28e39;
   margin-right: 100px;
 
   &.active .footer-link {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 }
 

src/components/HomePageHeader.vue

@@ -78,8 +78,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-$primary-color: #e28e39;
-
 .home-page-header {
   width: 100%;
   height: 70px;
@@ -126,7 +124,7 @@ $primary-color: #e28e39;
     width: 50%;
     transform: scaleX($x);
     height: 4px;
-    background-color: $primary-color;
+    background-color: var(--primary-color);
     position: absolute;
     top: 0;
     transition: transform 0.3s;
@@ -164,7 +162,7 @@ $primary-color: #e28e39;
   &.active {
     & > .header-nav-title {
       @include header-nav-item-active(1);
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
@@ -194,7 +192,7 @@ $primary-color: #e28e39;
   list-style-type: none;
 
   &.active {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 }
 
@@ -206,7 +204,7 @@ $primary-color: #e28e39;
   height: 100%;
 
   &:hover {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 }
 

src/styles/common.scss

-$primary-color: #e28e39;
-
 .text-center {
   text-align: center;
 }
@@ -24,7 +22,7 @@ $primary-color: #e28e39;
     display: block;
     width: 2em;
     height: 2px;
-    background-color: $primary-color;
+    background-color: var(--primary-color);
   }
 }
 
@@ -65,7 +63,7 @@ $primary-color: #e28e39;
     width: 100%;
     height: 100%;
     transition: 0.3s;
-    background-color: $primary-color;
+    background-color: var(--primary-color);
     z-index: 100;
   }
 

src/styles/index.scss

 @import './icon.scss';
 @import './common.scss';
 
+:root {
+  --primary-color: #e28e39;
+}
+
 html,
 body {
   margin: 0;

src/views/Home/AboutPage.vue

@@ -206,14 +206,14 @@ export default {
 .progress {
   font-size: 38px;
   font-weight: 500;
-  color: #e28e39;
+  color: var(--primary-color);
   padding-top: 30px;
 }
 
 .progress-line {
   width: 70px;
   height: 3px;
-  background: #f08917;
+  background: var(--primary-color);
   margin: 20px 0;
 }
 
@@ -235,7 +235,7 @@ export default {
 }
 
 .description {
-  color: #e28e39;
+  color: var(--primary-color);
   font-weight: 500;
   font-family: lantingzh;
   line-height: 27px;

src/views/Home/ArticlePage.vue

@@ -105,7 +105,7 @@ export default {
     display: block;
     width: 50px;
     height: 2px;
-    background-color: #e28e39;
+    background-color: var(--primary-color);
   }
 }
 

src/views/Home/ColorfulPage.vue

@@ -224,7 +224,7 @@ export default {
 
   &.active {
     color: #fff;
-    background-color: #e28e39;
+    background-color: var(--primary-color);
   }
 }
 

src/views/Home/ContactPage.vue

@@ -142,7 +142,7 @@ export default {
   position: relative;
   flex: 1;
   color: #fff;
-  background-color: #e28e39;
+  background-color: var(--primary-color);
   display: flex;
   justify-content: center;
   align-items: center;

src/views/Home/IndexPage.vue

@@ -139,8 +139,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-$primary-color: #e28e39;
-
 .slides {
   position: relative;
 }
@@ -236,7 +234,7 @@ $primary-color: #e28e39;
 }
 
 .services-intro-text {
-  background-color: $primary-color;
+  background-color: var(--primary-color);
   color: #fff;
   padding: 60px 30px 0 30px;
 

src/views/Home/JoinUsPage.vue

@@ -490,8 +490,8 @@ input::placeholder {
 }
 
 .recruitment-active {
-  color: #e28e39;
-  border-bottom: 1px solid #e28e39;
+  color: var(--primary-color);
+  border-bottom: 1px solid var(--primary-color);
 }
 .recruitment,
 .city {
@@ -505,8 +505,8 @@ input::placeholder {
 }
 
 .city-active {
-  border-bottom: 1px solid #e28e39;
-  color: #e28e39;
+  border-bottom: 1px solid var(--primary-color);
+  color: var(--primary-color);
 }
 
 .new-title {
@@ -562,13 +562,13 @@ input::placeholder {
 
   button,
   a {
-    background-color: #efa958;
+    background-color: var(--primary-color);
     border: none;
     outline: none;
     color: #fff;
     padding: 12px 50px;
     cursor: pointer;
-    box-shadow: 4px 4px 12px #efa958;
+    box-shadow: 4px 4px 12px var(--primary-color);
     text-decoration: none;
   }
 }