风机卡片样式更新

src/assets/style/main.css

@@ -27,4 +27,7 @@ body,
 }
 .el-table::after {
 	height: 0px !important;
+}
+.el-dialog{
+  background-color: rgb(36,36,36) !important;
 }

src/components/TitleBar.vue

@@ -16,18 +16,42 @@
             v-model="dialogVisible"
             width="21%"
             :before-close="handleClose"
+            :header-cell-style="{ color: 'rgb(220,220,220)'}"
           >
-            <el-form :model="form">                
+            <el-form :model="form">
               <el-form-item label="" :label-width="formLabelWidth">
               </el-form-item>
               <el-form-item label="用户名：" :label-width="formLabelWidth">
-                <el-input v-model="form.name" autocomplete="off" type="text" placeholder="用户名" style="width: 80%;"></el-input>
+                <el-input
+                  v-model="form.name"
+                  autocomplete="off"
+                  type="text"
+                  placeholder="用户名"
+                  style="width: 80%"
+                ></el-input>
               </el-form-item>
               <el-form-item label="密&emsp;码：" :label-width="formLabelWidth">
-                <el-input v-model="form.name" autocomplete="off" type="text" placeholder="密&emsp;码" style="width: 80%;" show-password></el-input>
+                <el-input
+                  v-model="form.name"
+                  autocomplete="off"
+                  type="text"
+                  placeholder="密&emsp;码"
+                  style="width: 80%"
+                  show-password
+                ></el-input>
               </el-form-item>
-              <el-form-item label="验证码：" :label-width="formLabelWidth">
-                <el-input v-model="form.name" autocomplete="off" type="text" placeholder="验证码" style="width: 80%;"><template #append><img src="../../src\assets\logo.png" style="width: 50px; height:20px;"></template></el-input>
+              <el-form-item label="验证码：" :label-width="formLabelWidth" style="display:none;">
+                <el-input
+                  v-model="form.name"
+                  autocomplete="off"
+                  type="text"
+                  placeholder="验证码"
+                  style="width: 80%"
+                  ><template #append
+                    ><img
+                      src="../../src\assets\logo.png"
+                      style="width: 50px; height: 20px" /></template
+                ></el-input>
               </el-form-item>
             </el-form>
             <template #footer>
@@ -172,6 +196,7 @@
               border-radius: 8px;
               border: none;
             "
+            :before-close="mainClose"
           >
             ×
           </button>
@@ -206,8 +231,16 @@ export default {
     };
   },
   methods: {
-    handleClose() {},
-  },
+    handleClose(done) {
+      done();
+    },
+    mainClose() {
+      const {app} = require("electron");
+      app.on("window-all-closed", () => {
+        app.quit();
+      });
+    }
+  }
 };
 </script>
 

src/components/area/mainwindow/TitleBarCard.vue

@@ -3,6 +3,22 @@
         <span class="title">{{title}}</span>
         <span class="value">{{value}}</span>
         <span class="title">{{unit}}</span>
+        <el-dialog
+            title="用户登录"
+            v-model="dialogVisible"
+            width="21%"
+            :before-close="handleClose"
+          >
+            
+            <template #footer>
+              <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogVisible = false"
+                  >登 录</el-button
+                >
+              </span>
+            </template>
+          </el-dialog>
     </div>
 </template>
 
@@ -13,6 +29,14 @@ export default {
     title: String,
     value: Number,
     unit: String,
+  },
+  data() {
+    return {
+      dialogVisible: false,      
+    };
+  },
+  methods: {
+    handleClose() {},
   }
 }
 </script>

src/components/area/windturbine/WindturbineMinCard.vue

@@ -12,13 +12,13 @@
             </div>
             <div :class="rightStyle">
                 <el-row>
-                    <div :class="contentStyle">123.54 kw</div>
+                    <div :class="contentStyle" style="font-size: 12px;">123.54 kw</div>
                 </el-row>
                 <el-row>
-                    <div :class="contentStyle">8.23 m/s</div>
+                    <div :class="contentStyle" style="font-size: 12px;">8.23 m/s</div>
                 </el-row>
                 <el-row>
-                    <div :class="contentStyle">1234.56 rpm</div>
+                    <div :class="contentStyle" style="font-size: 12px;">1234.56 rpm</div>
                 </el-row>
             </div>
         </el-row>
@@ -85,14 +85,70 @@
         box-sizing: border-box;
         display: inline-block;
     }
+    .card-style-0 {
+        border: 2px solid rgba(250, 250, 250, 1);
+        background-color: rgba(245, 245, 245, 1);
+    }
     .card-style-1 {
-        border: 2px solid #4952a6;
-        background-color: rgba(73, 82, 166, 0.5);
+        border: 2px solid rgba(218, 132, 219, 1);
+        background-color: rgba(218, 132, 219, 0.5);
+    }
+    .card-style-2 {
+        border: 2px solid rgba(107, 212, 148, 1);
+        background-color: rgba(107, 212, 148, 0.5);
+    }
+    .card-style-3 {
+        border: 2px solid rgba(107, 212, 148, 1);
+        background-color: rgba(107, 212, 148, 0.5);
+    }
+    .card-style-4 {
+        border: 2px solid rgba(133, 140, 173, 1);
+        background-color: rgba(133, 140, 173, 0.5);
+    }
+    .card-style-5 {
+        border: 2px solid rgba(211, 133, 136, 1);
+        background-color: rgba(211, 133, 136, 0.5);
+    }
+    .card-style-6 {
+        border: 2px solid rgba(234, 176, 125, 1);
+        background-color: rgba(234, 176, 125, 0.5);
+    }
+    .card-style-7 {
+        border: 2px solid rgba(159, 163, 165, 1);
+        background-color: rgba(159, 163, 165, 0.5);
     }
 
+    .card-style-select-0 {
+        border: 2px solid rgba(250, 250, 250, 0.5);
+        background-color: rgba(245, 245, 245, 0.3);
+    }
     .card-style-select-1 {
-        border: 2px solid #4952a6;
-        background-color: rgba(200, 10, 10, 0.3);
+        border: 2px solid rgba(218, 132, 219, 0.5);
+        background-color: rgba(218, 132, 219, 0.3);
+    }
+    .card-style-select-2 {
+        border: 2px solid rgba(107, 212, 148, 0.5);
+        background-color: rgba(107, 212, 148, 0.3);
+    }
+    .card-style-select-3 {
+        border: 2px solid rgba(107, 212, 148, 0.5);
+        background-color: rgba(107, 212, 148, 0.3);
+    }
+    .card-style-select-4 {
+        border: 2px solid rgba(133, 140, 173, 0.5);
+        background-color: rgba(133, 140, 173, 0.3);
+    }
+    .card-style-select-5 {
+        border: 2px solid rgba(211, 133, 136, 0.5);
+        background-color: rgba(211, 133, 136, 0.3);
+    }
+    .card-style-select-6 {
+        border: 2px solid rgba(234, 176, 125, 0.5);
+        background-color: rgba(234, 176, 125, 0.3);
+    }
+    .card-style-select-7 {
+        border: 2px solid rgba(159, 163, 165, 0.5);
+        background-color: rgba(159, 163, 165, 0.3);
     }
     .card-style-left{
         position: relative;
@@ -102,15 +158,60 @@
         margin: 3px;
         display: inline-block;
     }
+    .card-left-style-0 {
+        background-color: rgb(250, 250, 250);
+    }
     .card-left-style-1 {
-        background-color: rgba(73, 82, 166, 0.7);
+        background-color: rgb(218, 132, 219);
+    }
+    .card-left-style-2 {
+        background-color: rgb(107, 212, 148);
+    }
+    .card-left-style-3 {
+        background-color: rgb(107, 212, 148);
+    }
+    .card-left-style-4 {
+        background-color: rgb(133, 140, 173);
+    }
+    .card-left-style-5 {
+        background-color: rgb(211, 133, 136);
+    }
+    .card-left-style-6 {
+        background-color: rgb(234, 176, 125);
+    }
+    .card-left-style-7 {
+        background-color: rgb(159, 163, 165);
     }
 
+    .card-left-style-select-0 {
+        background-color: rgba(250, 250, 250,0.7);
+    }
     .card-left-style-select-1 {
+        background-color: rgba(218, 132, 219,0.7);
+    }
+    .card-left-style-select-2 {
+        background-color: rgba(107, 212, 148,0.7);
+    }
+    .card-left-style-select-3 {
+        background-color: rgba(107, 212, 148,0.7);
+    }
+    .card-left-style-select-4 {
+        background-color: rgba(133, 140, 173,0.7);
+    }
+    .card-left-style-select-5 {
+        background-color: rgba(211, 133, 136,0.7);
+    }
+    .card-left-style-select-6 {
+        background-color: rgba(234, 176, 125,0.7);
+    }
+    .card-left-style-select-7 {
+        background-color: rgba(159, 163, 165,0.7);
+    }
+
+    .card-left-style-select {
         position: relative;
         width: 25px;
         height: 41px;
-        background-color: rgba(200, 40, 40, 0.5);
         box-sizing: border-box;
         margin: 3px;
         display: inline-block;
@@ -124,7 +225,7 @@
         display: inline-block;
     }
     .card-right-style-1 {
-        border-left: 2px dashed #4952a6;
+        border-left: 2px dashed rgba(200, 10, 10, 0.3);
     }
     .card-title1-style{
         margin-top: 2px;