Browse Source

样式修改

sunzehao 1 week ago
parent
commit
33a5ef35de

+ 3 - 3
src/components/windNeedCharts/dash-pie-chart.vue

@@ -73,14 +73,14 @@ export default {
           subtext: this.title,
           subtextStyle: {
             fontSize: 14,
-            color: "#6c757d",
+            color: "#f f f",
           },
           x: "45%",
           y: "56%",
           z: 8,
           textAlign: "center",
           textStyle: {
-            color: "#6c757d",
+            color: "#fff",
             fontSize: 12,
             fontWeight: "normal",
           },
@@ -246,7 +246,7 @@ export default {
                     formatter: function (params) {
                       return params.value;
                     },
-                    color: "#6c757d",
+                    color: "#fff",
                     fontSize: 12,
                     fontWeight: "bold",
                     position: "center",

+ 2 - 2
src/components/windNeedCharts/pieChart.vue

@@ -86,7 +86,7 @@ export default {
           itemWidth: 8,
           itemHeight: 8,
           textStyle: {
-            color: "#6c757d",
+            color: "#fff",
             fontSize: 12,
           },
         //   formatter(params) {
@@ -192,7 +192,7 @@ export default {
             roseType: "area",
             label: {
               normal: {
-                color: "#6c757d",
+                color: "#fff",
                 formatter: "{d}%",
               },
             },

+ 53 - 49
src/views/cesiumComponents/windView.vue

@@ -48,12 +48,13 @@
     <aside class="sidebar-left panel" v-if="showWindDB">
       <div class="stat-block">
         <p class="label">总装机容量:</p>
+        <!-- #fff -->
         <p class="value">
           2541<span
             style="
               font-size: 18px;
               font-weight: 400;
-              color: #6c757d;
+              color: #fff;
               margin-left: 4px;
             "
             >MW</span
@@ -72,7 +73,7 @@
               style="
                 font-size: 14px;
                 font-weight: 400;
-                color: #6c757d;
+                color: #fff;
                 margin-left: 4px;
               "
               >MW</span
@@ -86,7 +87,7 @@
               style="
                 font-size: 14px;
                 font-weight: 400;
-                color: #6c757d;
+                color: #fff;
                 margin-left: 4px;
               "
               >MW</span
@@ -163,7 +164,7 @@
           <span
             style="
               font-size: 15px;
-              color: #6c757d;
+              color: #fff;
               font-weight: 600;
               position: relative;
               top: 20px;
@@ -207,7 +208,7 @@
           class="labels"
           style="display: flex; justify-content: center; align-items: center"
         >
-          <span style="font-size: 15px; color: #6c757d; font-weight: 600"
+          <span style="font-size: 15px; color: #fff; font-weight: 600"
             >UTC地球时间</span
           >
         </span>
@@ -661,7 +662,7 @@
                           : 'background-color:#05BB4C'
                       "
                     ></span>
-                    <span style="color: #606769">{{ item[0].total }}</span>
+                    <span style="color: #fff">{{ item[0].total }}</span>
                   </div>
                   <list-bar-chart-2-home
                     :list="item"
@@ -765,7 +766,7 @@
                           : 'background-color:#05BB4C'
                       "
                     ></span>
-                    <span style="color: #606769">{{ item[0].total }}</span>
+                    <span style="color: #fff">{{ item[0].total }}</span>
                   </div>
                   <list-bar-chart-2-home
                     :list="item"
@@ -1321,9 +1322,9 @@ export default {
 
 <style lang="less" scoped>
 .panel {
-  background: rgba(248, 249, 252, 0.85);
-  backdrop-filter: blur(15px);
-  -webkit-backdrop-filter: blur(15px);
+  background: rgba(249, 249, 249, 0.2);
+  backdrop-filter: blur(55px);
+  -webkit-backdrop-filter: blur(55px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 12px;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
@@ -1381,7 +1382,7 @@ export default {
 }
 .stat-block .label {
   font-size: 26px;
-  color: #6c757d;
+  color: #fff;
   margin-bottom: 5px;
 }
 .stat-block .value {
@@ -1391,7 +1392,7 @@ export default {
 }
 .stat-block .labels {
   font-size: 14px;
-  color: #6c757d;
+  color: #fff;
   margin-bottom: 5px;
 }
 .stat-block .values {
@@ -1407,7 +1408,7 @@ export default {
 }
 .progress-bar-inner {
   height: 100%;
-  background: #6c757d;
+  background: #fff;
   border-radius: 2px;
 }
 
@@ -1426,7 +1427,7 @@ export default {
       font-size: 16px;
       font-weight: 600;
       text-transform: uppercase;
-      color: #6c757d;
+      color: #fff;
       margin-bottom: 5px;
     }
   }
@@ -1450,7 +1451,7 @@ export default {
       margin-left: 5px;
     }
     .title {
-      color: #6c757d;
+      color: #fff;
 
       text-align: right;
       .title-name {
@@ -1475,7 +1476,7 @@ export default {
           span {
             font-size: 12px;
             font-weight: 400;
-            color: #6c757d;
+            color: #fff;
           }
           span:nth-child(3) {
             font-size: 19px;
@@ -1496,7 +1497,7 @@ export default {
             .el-col:nth-child(1) {
               font-size: 12px;
               font-weight: 400;
-              color: #6c757d;
+              color: #fff;
             }
             .el-col:nth-child(2) {
               font-size: 16px;
@@ -1506,7 +1507,7 @@ export default {
             .el-col:nth-child(3) {
               font-size: 14px;
               font-weight: 400;
-              color: #6c757d;
+              color: #fff;
             }
           }
         }
@@ -1551,7 +1552,7 @@ export default {
         font-size: 16px;
         font-weight: 600;
         text-transform: uppercase;
-        color: #6c757d;
+        color: #fff;
       }
 
       .unit {
@@ -1594,7 +1595,7 @@ export default {
 
         .save-value {
           font-size: 16px;
-          color: #6c757d;
+          color: #fff;
           margin: 10px 0;
         }
 
@@ -1628,7 +1629,7 @@ export default {
       padding: 5px 8px;
     }
     .is-disabled {
-      background: #d4d4d4;
+      background: #cacaca;
       color: #909090;
     }
   }
@@ -1652,11 +1653,11 @@ export default {
   }
   .labels {
     font-size: 15px;
-    color: #6c757d;
+    color: #fff;
     width: 40px;
     font-weight: 600;
     display: block;
-    border-right: 2px solid #6c757d;
+    border-right: 2px solid #fff;
   }
   .values {
     font-size: 15px;
@@ -1745,20 +1746,8 @@ export default {
   gap: 20px;
 }
 </style>
-<style lang="less">
-.windSty{
-    .el-select__wrapper{
-        background: transparent !important;
-        box-shadow: none;
-    }
-    .is-hovering:not(.is-focused){
-        background: transparent !important;
-        box-shadow: none;
-    }
-    .el-select__placeholder {
-        color: #fff !important;
-    }
-}
+<style lang="less" scoped>
+
 .currentSlider {
   .el-slider__runway {
     background: linear-gradient(
@@ -1812,7 +1801,7 @@ export default {
     .power-name {
       width: 80px;
       margin-bottom: 20px;
-      color: #6c757d;
+      color: #fff;
     }
 
     .power-item {
@@ -1831,7 +1820,7 @@ export default {
           height: 5px;
           border-radius: 5px;
           display: inline-block;
-          background-color: #6c757d;
+          background-color: #fff;
           margin-right: 5px;
         }
 
@@ -1872,7 +1861,7 @@ export default {
 
         .amount-nums {
           font-size: 12px;
-          color: #6c757d;
+          color: #fff;
           margin-left: 10px;
           display: flex;
           flex-direction: row;
@@ -1880,7 +1869,7 @@ export default {
 
           .num-item {
             font-size: 20px;
-            color: #6c757d;
+            color: #fff;
             margin-right: 5px;
           }
         }
@@ -1890,7 +1879,7 @@ export default {
         display: flex;
         align-items: baseline;
         font-size: 14px;
-        color: #6c757d;
+        color: #fff;
 
         .nums {
           font-size: 20px;
@@ -1924,7 +1913,7 @@ export default {
 
       .unit {
         text-align: right;
-        color: #b1b1b1;
+        color: #fff;
         font-size: 12px;
         // float: right;
       }
@@ -1957,7 +1946,7 @@ export default {
 
         .type-num {
           height: 15px;
-          color: #6c757d;
+          color: #fff;
         }
       }
     }
@@ -1995,7 +1984,7 @@ export default {
   font-size: 14px;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #6c757d;
+  color: #fff;
 }
 .status-title {
   width: 100%;
@@ -2007,7 +1996,7 @@ export default {
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase;
-    color: #6c757d;
+    color: #fff;
     margin-bottom: 5px;
   }
 }
@@ -2082,7 +2071,7 @@ export default {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
-  color: #6c757d;
+  color: #fff;
   margin-bottom: 15px;
 }
 .info-item {
@@ -2092,12 +2081,27 @@ export default {
   padding: 0 5px;
 }
 .info-item .label {
-  color: #6c757d;
+  color: #fff;
 }
 .info-item .value {
-  color: #6c757d;
+  color: #fff;
   display: flex;
   align-items: center;
   gap: 5px;
 }
+</style>
+<style lang="less">
+.windSty{
+    .el-select__wrapper{
+        background: transparent !important;
+        box-shadow: none;
+    }
+    .is-hovering:not(.is-focused){
+        background: transparent !important;
+        box-shadow: none;
+    }
+    .el-select__placeholder {
+        color: #fff !important;
+    }
+}
 </style>

+ 14 - 10
src/views/weatherComponents/cesiumweatherView.vue

@@ -19,7 +19,7 @@
         <aside class="sidebar-left panel" :style="showWeatherDetail ? 'top: 100px' : 'bottom: 20px;'" v-if="isShowWeather">
             <div class="cancelSty">
                 <svg viewBox="0 0 1024 1024" width="2em" height="2em" @click="showWeatherMsg">
-                    <path d="M512 177.8c45.1 0 88.9 8.8 130.1 26.2 39.8 16.8 75.5 40.9 106.2 71.6 30.7 30.7 54.8 66.4 71.6 106.2 17.4 41.2 26.2 84.9 26.2 130.1s-8.8 88.9-26.2 130.1c-16.8 39.8-40.9 75.5-71.6 106.2-30.7 30.7-66.4 54.8-106.2 71.6C600.9 837.2 557.2 846 512 846s-88.9-8.8-130.1-26.2c-39.8-16.8-75.5-40.9-106.2-71.6-30.7-30.7-54.8-66.4-71.6-106.2-17.4-41.2-26.2-84.9-26.2-130.1s8.8-88.9 26.2-130.1c16.8-39.8 40.9-75.5 71.6-106.2s66.4-54.8 106.2-71.6c41.2-17.3 85-26.2 130.1-26.2m0-50c-212.2 0-384.2 172-384.2 384.2s172 384.2 384.2 384.2 384.2-172 384.2-384.2-172-384.2-384.2-384.2z" p-id="2551" fill="#8a8a8a"></path><path d="M688.1 622.3L568.6 509.1 684 402.3l-49.7-61.8-123.2 114-118.4-112.1-50.3 61.2 110.5 104.7-117 108.4 49.6 61.8 125-115.6 127.3 120.6z" p-id="2552" fill="#8a8a8a">
+                    <path d="M512 177.8c45.1 0 88.9 8.8 130.1 26.2 39.8 16.8 75.5 40.9 106.2 71.6 30.7 30.7 54.8 66.4 71.6 106.2 17.4 41.2 26.2 84.9 26.2 130.1s-8.8 88.9-26.2 130.1c-16.8 39.8-40.9 75.5-71.6 106.2-30.7 30.7-66.4 54.8-106.2 71.6C600.9 837.2 557.2 846 512 846s-88.9-8.8-130.1-26.2c-39.8-16.8-75.5-40.9-106.2-71.6-30.7-30.7-54.8-66.4-71.6-106.2-17.4-41.2-26.2-84.9-26.2-130.1s8.8-88.9 26.2-130.1c16.8-39.8 40.9-75.5 71.6-106.2s66.4-54.8 106.2-71.6c41.2-17.3 85-26.2 130.1-26.2m0-50c-212.2 0-384.2 172-384.2 384.2s172 384.2 384.2 384.2 384.2-172 384.2-384.2-172-384.2-384.2-384.2z" p-id="2551" fill="#fff"></path><path d="M688.1 622.3L568.6 509.1 684 402.3l-49.7-61.8-123.2 114-118.4-112.1-50.3 61.2 110.5 104.7-117 108.4 49.6 61.8 125-115.6 127.3 120.6z" p-id="2552" fill="#fff">
                     </path>
                 </svg>
             </div>
@@ -949,7 +949,7 @@ export default {
 <style lang="less" scoped>
 
 .panel {
-    background: rgba(248, 249, 252, 0.85);
+    background: rgba(249, 249, 249, 0.2);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.2);
@@ -987,9 +987,9 @@ export default {
     cursor: pointer;
 }
 .stat-block { margin-bottom: 10px; display: flex; }
-.stat-block .labels { font-size: 15px; color: #6c757d; width: 40px;font-weight: 600;
-display: block;border-right: 2px solid #6c757d; }
-.stat-block .values { font-size: 15px; font-weight: 600; color: #4b55ae;margin-left: 8px; }
+.stat-block .labels { font-size: 15px; color: #fff; width: 40px;font-weight: 600;
+display: block;border-right: 2px solid #fff; }
+.stat-block .values { font-size: 15px; font-weight: 600; color: #fff;margin-left: 8px; }
 .stat-block .valuess{ margin-left: 5px; display: inline-block; width: 230px; height: 10px; background: 
     linear-gradient(90deg, rgb(36,104, 180), rgb(60,157, 194), rgb(151,218,168), rgb(198,231,181), rgb(238,247,217),
     rgb(255,238,159), rgb(252,217,125), rgb(255,182,100), rgb(252,150,75), rgb(250,112,52), rgb(245,64,32), 
@@ -1012,6 +1012,10 @@ display: block;border-right: 2px solid #6c757d; }
             margin: 0 2px 3px 0;
             margin-right: 5px;
         }
+        .is-disabled {
+            background: #cacaca;
+            color: #909090;
+            }
     }
     .el-switch{
         height: 24px !important;
@@ -1043,13 +1047,13 @@ display: block;border-right: 2px solid #6c757d; }
 .weather-temp { display: flex; align-items: center; gap: 10px; }
 .weather-temp .value { font-size: 28px; font-weight: 500; }
 .weather-temp .icon { font-size: 24px; }
-.weather-info .condition { font-size: 12px; color: #6c757d; }
+.weather-info .condition { font-size: 12px; color: #fff; }
 .market-demand { background-color: #134ac0; color: white; padding: 15px 10px; border-radius: 8px; font-size: 14px; }
 .info-section { font-size: 13px; }
-.info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 15px; }
+.info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
 .info-item { display: flex; justify-content: space-between; margin-bottom: 12px; }
 .info-item .label { color: #212529; }
-.info-item .value { color: #6c757d; display: flex; align-items: center; gap: 5px; }
+.info-item .value { color: #fff; display: flex; align-items: center; gap: 5px; }
 .tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
 .tag.blue { background-color: #e7f1ff; color: #134ac0; }
 .tag.green { background-color: #e6f7f0; color: #28a745; }
@@ -1106,7 +1110,7 @@ display: block;border-right: 2px solid #6c757d; }
         align-items: center;
     .item {
         padding: 5px 15px;
-        color: #6c757d;
+        color: #fff;
         transition: 0.2s;
         cursor: pointer;
         font-size: 14px;
@@ -1114,7 +1118,7 @@ display: block;border-right: 2px solid #6c757d; }
         text-transform: uppercase;
 
         &:hover {
-        color: #6c757d;
+        color: #fff;
         }
 
         &.active {