样式调整

src/components/windHome/index.vue

@@ -1017,7 +1017,8 @@ export default {
   .status {
     width: 100%;
     height: 300px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(15px);
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;
@@ -1255,7 +1256,8 @@ export default {
     padding: 0 15px;
     margin-bottom: 20px;
     // height: calc(100% - 301px - 300px - 40px);
-    background-color: rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(15px);
     border-radius: 5px;
     display: flex;
     flex-direction: column;
@@ -1271,7 +1273,8 @@ export default {
     .base-info-left {
       width: 296px;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.1);
+      background: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(15px);
       position: relative;
       padding: 20px 0px 0 20px;
       &::before {
@@ -1365,7 +1368,8 @@ export default {
         border-bottom: 1px solid #fff;
       }
       .target {
-        background-color: rgba(0, 0, 0, 0.1);
+        background: rgba(255, 255, 255, 0.3);
+        backdrop-filter: blur(15px);
         height: 45%;
 
         .grid-content {
@@ -1433,7 +1437,8 @@ export default {
           color: #606769;
           justify-content: center;
           align-items: center;
-          background-color: rgba(0, 0, 0, 0.1);
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(15px);
         }
         .others-value {
           font-size: 16px;
@@ -1449,7 +1454,8 @@ export default {
     width: 100%;
     // height: calc(100% - 621px - 20px);
     height: 400px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(15px);
     border-radius: 5px;
     display: flex;
     flex-direction: column;
@@ -1469,7 +1475,8 @@ export default {
   .info {
     width: 100%;
     // height: 307px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(15px);
     border-radius: 5px;
     margin-bottom: 20px;
     display: flex;

src/components/windProDetail/windProblem.vue

@@ -822,7 +822,8 @@ export default {
       .part-body {
         width: 100%;
         padding-bottom: 20px;
-        background: rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(15px);
+        background: rgba(255, 255, 255, 0.3);
         // background: rgba(96, 103, 105, 0.2);
         border-radius: 5px;
         margin-top: 10px;
@@ -895,7 +896,9 @@ export default {
 
   .problems{
     width: 30vw;
-    background: rgba(96, 103, 105, 0.2);
+    // background: rgba(96, 103, 105, 0.2);
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(15px);
     border-radius: 5px;
     padding: 10px;
     height: 83vh;

src/views/cesiumComponents/topographicMap.vue

@@ -52,7 +52,6 @@
             />
           </div>
         </div>
-        <!--  -->
       </template>
     </el-drawer>
     <comModelDialog
@@ -600,8 +599,12 @@ export default {
 </style>
 <style lang="less">
 .el-overlay {
+    background-color: transparent !important;
   .windModelDrawer {
     width: 80% !important;
+    backdrop-filter: blur(15px) !important;
+    background: rgba(255, 255, 255, .8) !important;
+    border-radius: 10px 0 0 10px !important;
     .el-drawer__body {
       overflow: hidden;
       padding-top: 0;

src/views/weatherComponents/weatherView.vue

@@ -143,7 +143,6 @@ import devBox from "@/components/devInfoBox.vue"
 import DAYJS from "dayjs";
 import jsonData from "./weather.json";
 import waterIcon from "@/assets/cesiumImg/icowater.png";
-import 'animate.css';
 
 export default {
     props: {