卡片颜色更新

src/components/area/windturbine/WindturbineMinCard.vue

@@ -12,13 +12,13 @@
             </div>
             <div :class="rightStyle">
                 <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;">{{power.toFixed(2)}} kw</div>
+                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;">{{power.toFixed(2)}} kw</div>
                 </el-row>
                 <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;">{{windSpeed.toFixed(2)}} m/s</div>
+                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;top:15px;">{{windSpeed.toFixed(2)}} m/s</div>
                 </el-row>
                 <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;">{{rollSpeed.toFixed(2)}} rpm</div>
+                    <div :class="contentStyle" style="font-size: 12px;position: absolute;right: 5px;top:30px;">{{rollSpeed.toFixed(2)}} rpm</div>
                 </el-row>
             </div>
         </el-row>
@@ -89,69 +89,71 @@
         display: inline-block;
     }
     .card-style-0 {
-        border: 2px solid rgba(250, 250, 250, 1);
-        background-color: rgba(245, 245, 245, 1);
+        border: 2px solid rgb(255, 255, 255);
+        background-color: rgba(255, 255, 255, 0.15);
+        color: rgb(120, 120, 120);
     }
     .card-style-1 {
-        border: 2px solid rgba(218, 132, 219, 1);
-        background-color: rgba(218, 132, 219, 0.5);
+        border: 2px solid rgb(197, 48, 72);
+        background-color: rgba(197, 48, 72, 0.15);
     }
     .card-style-2 {
-        border: 2px solid rgba(107, 212, 148, 1);
-        background-color: rgba(107, 212, 148, 0.5);
+        border: 2px solid rgb(05, 187, 76);
+        background-color: rgba(05, 187, 76, 0.15);
     }
     .card-style-3 {
-        border: 2px solid rgba(107, 212, 148, 1);
-        background-color: rgba(107, 212, 148, 0.5);
+        border: 2px solid rgb(05, 187, 76);
+        background-color: rgba(05, 187, 76, 0.15);
     }
     .card-style-4 {
-        border: 2px solid rgba(133, 140, 173, 1);
-        background-color: rgba(133, 140, 173, 0.5);
+        border: 2px solid rgb(75, 85, 174);
+        background-color: rgba(75, 85, 174, 0.15);
     }
     .card-style-5 {
-        border: 2px solid rgba(211, 133, 136, 1);
-        background-color: rgba(211, 133, 136, 0.5);
+        border: 2px solid rgba(186, 50, 55);
+        background-color: rgba(186, 50, 55, 0.15);
     }
     .card-style-6 {
-        border: 2px solid rgba(234, 176, 125, 1);
-        background-color: rgba(234, 176, 125, 0.5);
+        border: 2px solid rgb(225, 125, 36);
+        background-color: rgba(225, 125, 36, 0.15);
     }
     .card-style-7 {
-        border: 2px solid rgba(159, 163, 165, 1);
-        background-color: rgba(159, 163, 165, 0.5);
+        border: 2px solid rgb(96, 103, 105);
+        background-color: rgba(96, 103, 105, 0.15);
     }
 
     .card-style-select-0 {
-        border: 2px solid rgba(250, 250, 250, 0.5);
-        background-color: rgba(245, 245, 245, 0.3);
+        border: 2px solid rgba(255, 255, 255, 0.5);
+        background-color: rgba(255, 255, 255, 0.1);
+        color: rgba(120, 120, 120,0.5);
     }
     .card-style-select-1 {
-        border: 2px solid rgba(218, 132, 219, 0.5);
-        background-color: rgba(218, 132, 219, 0.3);
+        border: 2px solid rgba(197, 48, 72, 0.5);
+        background-color: rgba(197, 48, 72, 0.1);
     }
     .card-style-select-2 {
-        border: 2px solid rgba(107, 212, 148, 0.5);
-        background-color: rgba(107, 212, 148, 0.3);
+        border: 2px solid rgba(05, 187, 76, 0.5);
+        background-color: rgba(05, 187, 76, 0.1);
     }
     .card-style-select-3 {
-        border: 2px solid rgba(107, 212, 148, 0.5);
-        background-color: rgba(107, 212, 148, 0.3);
+        border: 2px solid rgba(05, 187, 76, 0.5);
+        background-color: rgba(05, 187, 76, 0.1);
     }
     .card-style-select-4 {
-        border: 2px solid rgba(133, 140, 173, 0.5);
-        background-color: rgba(133, 140, 173, 0.3);
+        border: 2px solid rgba(75, 85, 174, 0.5);
+        background-color: rgba(75, 85, 174, 0.1);
     }
     .card-style-select-5 {
-        border: 2px solid rgba(211, 133, 136, 0.5);
-        background-color: rgba(211, 133, 136, 0.3);
+        border: 2px solid rgba(186, 50, 55, 0.5);
+        background-color: rgba(186, 50, 55, 0.1);
     }
     .card-style-select-6 {
-        border: 2px solid rgba(234, 176, 125, 0.5);
-        background-color: rgba(234, 176, 125, 0.3);
+        border: 2px solid rgba(225, 125, 36, 0.5);
+        background-color: rgba(225, 125, 36, 0.1);
     }
     .card-style-select-7 {
         border: 2px solid rgba(159, 163, 165, 0.5);
-        background-color: rgba(159, 163, 165, 0.3);
+        background-color: rgba(159, 163, 165, 0.1);
     }
     .card-style-left{
         position: relative;
@@ -162,50 +164,52 @@
         display: inline-block;
     }
     .card-left-style-0 {
-        background-color: rgb(250, 250, 250);
+        background-color: rgb(255, 255, 255);
+        color: rgb(120, 120, 120);
     }
     .card-left-style-1 {
-        background-color: rgb(218, 132, 219);
+        background-color: rgb(121, 73, 81);
     }
     .card-left-style-2 {
-        background-color: rgb(107, 212, 148);
+        background-color: rgb(05, 187, 76);
     }
     .card-left-style-3 {
-        background-color: rgb(107, 212, 148);
+        background-color: rgb(05, 187, 76);
     }
     .card-left-style-4 {
-        background-color: rgb(133, 140, 173);
+        background-color: rgb(75, 85, 174);
     }
     .card-left-style-5 {
-        background-color: rgb(211, 133, 136);
+        background-color: rgb(186, 50, 55);
     }
     .card-left-style-6 {
-        background-color: rgb(234, 176, 125);
+        background-color: rgb(225, 125, 36);
     }
     .card-left-style-7 {
         background-color: rgb(159, 163, 165);
     }
 
     .card-left-style-select-0 {
-        background-color: rgba(250, 250, 250,0.7);
+        background-color: rgba(255, 255, 255,0.7);
+        color: rgba(120, 120, 120,0.7);
     }
     .card-left-style-select-1 {
-        background-color: rgba(218, 132, 219,0.7);
+        background-color: rgba(121, 73, 81,0.7);
     }
     .card-left-style-select-2 {
-        background-color: rgba(107, 212, 148,0.7);
+        background-color: rgba(05, 187, 76,0.7);
     }
     .card-left-style-select-3 {
-        background-color: rgba(107, 212, 148,0.7);
+        background-color: rgba(05, 187, 76,0.7);
     }
     .card-left-style-select-4 {
-        background-color: rgba(133, 140, 173,0.7);
+        background-color: rgba(75, 85, 174,0.7);
     }
     .card-left-style-select-5 {
-        background-color: rgba(211, 133, 136,0.7);
+        background-color: rgba(186, 50, 55,0.7);
     }
     .card-left-style-select-6 {
-        background-color: rgba(234, 176, 125,0.7);
+        background-color: rgba(225, 125, 36,0.7);
     }
     .card-left-style-select-7 {
         background-color: rgba(159, 163, 165,0.7);
@@ -221,15 +225,66 @@
     }
 
     .card-right-style{
-        position: relative;
         width: calc(116px - 4px - 6px - 25px);
         height: calc(50px - 2px);
         box-sizing: border-box;
         display: inline-block;
+        position: absolute;
+        right: 0px;
+    }
+
+    .card-right-style-0 {
+        border-left: 2px dashed rgb(255, 255, 255);
+        color: rgb(120, 120, 120);
     }
     .card-right-style-1 {
-        border-left: 2px dashed rgba(200, 10, 10, 0.3);
+        border-left: 2px dashed rgb(121, 73, 81);
+    }
+    .card-right-style-2 {
+        border-left: 2px dashed rgb(05, 187, 76);
+    }
+    .card-right-style-3 {
+        border-left: 2px dashed rgb(05, 187, 76);
+    }
+    .card-right-style-4 {
+        border-left: 2px dashed rgb(75, 85, 174);
+    }
+    .card-right-style-5 {
+        border-left: 2px dashed rgb(186, 50, 55);
+    }
+    .card-right-style-6 {
+        border-left: 2px dashed rgb(225, 125, 36);
+    }
+    .card-right-style-7 {
+        border-left: 2px dashed rgb(159, 163, 165);
     }
+    
+    .card-right-style-select-0 {
+        border-left: 2px dashed rgba(255, 255, 255,0.7);
+        color: rgba(120, 120, 120,0.7);
+    }
+    .card-right-style-select-1 {
+        border-left: 2px dashed rgba(121, 73, 81,0.7);
+    }
+    .card-right-style-select-2 {
+        border-left: 2px dashed rgba(05, 187, 76,0.7);
+    }
+    .card-right-style-select-3 {
+        border-left: 2px dashed rgba(05, 187, 76,0.7);
+    }
+    .card-right-style-select-4 {
+        border-left: 2px dashed rgba(75, 85, 174,0.7);
+    }
+    .card-right-style-select-5 {
+        border-left: 2px dashed rgba(186, 50, 55,0.7);
+    }
+    .card-right-style-select-6 {
+        border-left: 2px dashed rgba(225, 125, 36,0.7);
+    }
+    .card-right-style-select-7 {
+        border-left: 2px dashed rgba(159, 163, 165,0.7);
+    }
+
     .card-title1-style{
         margin-top: 2px;
         font-size: 14px;