Optimize color in stylesheet

src/assets/css/common.scss

@@ -25,8 +25,8 @@
   height: 100%;
 }
 
-.background-white {
-  background-color: white;
+.background-origin {
+  background-color: constants.$origin-color;
 }
 
 .center-box {
@@ -107,9 +107,11 @@
 }
 
 .flex-horizontal {
+  display: flex;
   flex-direction: row;
 }
 
 .flex-vertical {
+  display: flex;
   flex-direction: column;
 }

src/assets/css/components/home/footer.scss

@@ -1,19 +1,21 @@
+@use "@/assets/css/constants" as constants;
+
 .icons {
   display: flex;
   gap: 20px;
 
   .icon {
     font-size: 8em;
-    color: white;
+    color: constants.$origin-color;
   }
 }
 
 .links {
   font-size: 2em;
   text-decoration: underline;
-  color: white;
+  color: constants.$origin-color;
 
   > * {
-    color: white;
+    color: constants.$origin-color;
   }
 }

src/assets/css/constants.scss

@@ -1,4 +1,7 @@
-$main-color: #00D4FF;
+$origin-color: white;
+$main-color: #4E47BB;
+$secondary-color: #BAB8E5;
+$active-color: #EBECFFD;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;

src/assets/css/pages/home-framework.scss

@@ -8,7 +8,7 @@
   z-index: 1;
   width: 100%;
   height: 70px;
-  background-color: white;
+  background-color: constants.$origin-color;
   border: {
     bottom: {
       width: 1px;
@@ -99,7 +99,7 @@
         position: absolute;
         width: 100%;
         text-align: center;
-        background-color: white;
+        background-color: constants.$origin-color;
         overflow: hidden;
 
         .item {
@@ -171,7 +171,7 @@
       color: constants.$border-color;
       style: solid;
     };
-    background-color: white;
+    background-color: constants.$origin-color;
     z-index: 1;
 
     ul {

src/assets/css/pages/login.scss

@@ -1,3 +1,5 @@
+@use "@/assets/css/constants" as constants;
+
 .login-background {
   display: flex;
   height: 100vh;
@@ -24,7 +26,7 @@
 
 .login-box-left-text {
   font-size: 3rem;
-  color: white;
+  color: constants.$origin-color;
   font-weight: bold;
 
   > div:last-child {
@@ -37,7 +39,7 @@
   position: relative;
   height: 100%;
   flex: 3;
-  background-color: white;
+  background-color: constants.$origin-color;
 }
 
 .login-from-text {