优化首页块儿颜色

src/styles/index.scss

@@ -53,50 +53,55 @@ html, body, #app {
     }
 }
 
-.bg-orange-gradient {
-    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
-    color: white;
+.bg-purple1 {
+    background-color: rgb(184, 122, 253);
 }
-.bg-red-gradient {
-    background-image: linear-gradient(45deg, #f33a41, #ed0586);
+.bg-purple1-gradient {
+    background: linear-gradient(90.99deg, rgba(98,113,252,1) 0.63%,rgba(115,115,252,1) 19%,rgba(152,119,253,1) 35.04%,rgba(163,121,253,1) 51.28%,rgba(178,122,253,1) 73.03%,rgba(184,122,253,1) 97.29%);
     color: white;
 }
-.bg-pink-gradient {
-    background-image: linear-gradient(45deg, #fea894, #ff1047);
-    color: white;
+
+.bg-blue1 {
+    background-color: rgba(109,131,251,1);
 }
-.bg-mauve-gradient {
-    background-image: linear-gradient(45deg, #c01f95, #7115cc);
+.bg-blue1-gradient {
+    background: linear-gradient(90.99deg, rgba(62,162,246,1) 0.63%,rgba(74,154,247,1) 20.93%,rgba(71,155,247,1) 37.36%,rgba(87,145,249,1) 53.8%,rgba(101,136,250,1) 73.03%,rgba(109,131,251,1) 97.29%);
     color: white;
 }
-.bg-purple-gradient {
-    background-image: linear-gradient(45deg, #9829ea, #5908fb);
-    color: white;
+
+.bg-blue2 {
+    background-color: rgba(109,131,251,1);
 }
-.bg-blue-gradient {
-    background-image: linear-gradient(45deg, #00b8f9, #0166eb);
+.bg-blue2-gradient {
+    background: linear-gradient(90.99deg, rgba(62,162,246,1) 0.63%,rgba(74,154,247,1) 20.93%,rgba(71,155,247,1) 37.36%,rgba(87,145,249,1) 53.8%,rgba(101,136,250,1) 73.03%,rgba(109,131,251,1) 97.29%);
     color: white;
 }
-.bg-cyan-gradient {
-    background-image: linear-gradient(45deg, #06edfe, #48b2fe);
-    color: white;
+
+.bg-red1 {
+    background-color: rgba(239,148,100,1);
 }
-.bg-green-gradient {
-    background-image: linear-gradient(45deg, #3ab54a, #8cc63f);
+.bg-red1-gradient {
+    background: linear-gradient(90.99deg, rgba(234,100,110,1) 0.63%,rgba(235,111,110,1) 19%,rgba(236,121,108,1) 35.04%,rgba(237,134,104,1) 51.28%,rgba(238,141,101,1) 73.13%,rgba(239,148,100,1) 97.29%);
     color: white;
 }
-.bg-olive-gradient {
-    background-image: linear-gradient(45deg, #90e630, #39d266);
-    color: white;
+
+.bg-green1 {
+    background-color: rgba(111,210,165,1);
 }
-.bg-grey-gradient {
-    background-image: linear-gradient(45deg, #9aadb9, #354855);
+.bg-green1-gradient {
+    background: linear-gradient(90.99deg, rgba(74,199,214,1) 0.63%,rgba(84,202,203,1) 19%,rgba(92,205,189,1) 35.04%,rgba(101,207,180,1) 51.28%,rgba(103,208,178,1) 73.03%,rgba(111,210,165,1) 97.29%);
     color: white;
 }
-.bg-brown-gradient {
-    background-image: linear-gradient(45deg, #ca6f2e, #cb1413);
+
+.bg-pink1 {
+    background-color: rgba(239,148,100,1);
+}
+.bg-pink1-gradient {
+    background: linear-gradient(90.99deg, rgba(234,100,110,1) 0.63%,rgba(235,111,110,1) 19%,rgba(236,121,108,1) 35.04%,rgba(237,134,104,1) 51.28%,rgba(238,141,101,1) 73.13%,rgba(239,148,100,1) 97.29%);
     color: white;
 }
+
+
 .hc-table-ref-box {
     border-color: #f3f3f3;
 }

src/views/home/admin.vue

@@ -63,7 +63,7 @@
                 <div class="hac-card-item-body mb-2">
                     <el-row :gutter="14">
                         <el-col :span="6">
-                            <HcGradientCard color="purple">
+                            <HcGradientCard color="purple1">
                                 <div class="hc-card-item-sub">
                                     <div class="item-sub-content">
                                         <div class="title">总合同</div>
@@ -79,7 +79,7 @@
                             </HcGradientCard>
                         </el-col>
                         <el-col :span="6">
-                            <HcGradientCard color="blue">
+                            <HcGradientCard color="blue1">
                                 <div class="hc-card-item-sub">
                                     <div class="item-sub-content">
                                         <div class="title">总收入</div>
@@ -95,7 +95,7 @@
                             </HcGradientCard>
                         </el-col>
                         <el-col :span="6">
-                            <HcGradientCard color="red">
+                            <HcGradientCard color="red1">
                                 <div class="hc-card-item-sub">
                                     <div class="item-sub-content">
                                         <div class="title">总实际支出</div>
@@ -111,7 +111,7 @@
                             </HcGradientCard>
                         </el-col>
                         <el-col :span="6">
-                            <HcGradientCard color="green">
+                            <HcGradientCard color="purple1">
                                 <div class="hc-card-item-sub">
                                     <div class="item-sub-content">
                                         <div class="title">总计划支出</div>

src/views/home/index.vue

@@ -3,7 +3,7 @@
         <div class="hc-main-row">
             <el-row :gutter="14">
                 <el-col :span="6">
-                    <HcGradientCard color="green">
+                    <HcGradientCard color="green1">
                         <div class="hc-card-item-sub">
                             <div class="item-sub-icon">
                                 <HcIcon name="calendar-todo"/>
@@ -16,7 +16,7 @@
                     </HcGradientCard>
                 </el-col>
                 <el-col :span="6">
-                    <HcGradientCard color="blue">
+                    <HcGradientCard color="blue2">
                         <div class="hc-card-item-sub">
                             <div class="item-sub-icon">
                                 <HcIcon name="calendar-check"/>
@@ -29,7 +29,7 @@
                     </HcGradientCard>
                 </el-col>
                 <el-col :span="6">
-                    <HcGradientCard color="pink">
+                    <HcGradientCard color="pink1">
                         <div class="hc-card-item-sub">
                             <div class="item-sub-icon">
                                 <HcIcon name="alert" fill/>
@@ -42,7 +42,7 @@
                     </HcGradientCard>
                 </el-col>
                 <el-col :span="6">
-                    <HcGradientCard color="purple">
+                    <HcGradientCard color="purple1">
                         <div class="hc-card-item-sub">
                             <div class="item-sub-icon">
                                 <HcIcon name="time"/>