暂存

src/style/element.scss

@@ -7,5 +7,5 @@
 }
 
 :root:root {
-  --el-color-primary: #006eff; /* 改变主色调 */
+  --el-color-primary: #25b15f; /* 改变主色调 */
 }

src/views/AlarmInformation/index.vue

@@ -248,7 +248,8 @@ onUnmounted(() => {
     box-sizing: border-box;
     position: relative;
     overflow: auto;
-    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
+    background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
+    background-color: #0A3933;
 }
 
 .main-content {
@@ -299,10 +300,14 @@ onUnmounted(() => {
 
     :deep(.el-table__header) {
         .el-table__cell {
-            background-color: #0881FE;
+            background-color: #24806B;
             color: #fff;
         }
     }
+
+    :deep(.el-pagination.is-background .el-pager li.is-active) {
+        background-color: #24806B;
+    }
 }
 
 
@@ -342,9 +347,16 @@ onUnmounted(() => {
     }
 
     .back-button {
-        background-color: #000;
-        color: #fff;
+        // background-color: #000;
+        // color: #fff;
         border: #000;
+        background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
+        color: #fff;
+    }
+
+    .restart-button {
+        background: linear-gradient(180deg, rgba(248, 250, 249, 1) 0%, rgba(138, 195, 182, 1) 100%);
+        color: rgba(41, 112, 93, 1);
     }
 }
 

src/views/AutomaticMode/index.vue

@@ -579,7 +579,8 @@ const delMode = () => {
     box-sizing: border-box;
     position: relative;
     overflow: auto;
-    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
+    background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
+    background-color: #0A3933;
 }
 
 .main-content {
@@ -660,7 +661,7 @@ const delMode = () => {
             }
 
             &.selected {
-                background-color: #0881FE;
+                background-color: #FFAF11;
             }
         }
     }
@@ -691,12 +692,12 @@ const delMode = () => {
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: #3e4458;
+        background-color: rgba($color: #188549, $alpha: .3);
 
         .el-icon {
             font-size: 30px;
             background-color: #fff;
-            background: linear-gradient(180deg, rgba(248, 251, 255, 1) 0%, rgba(248, 251, 255, 1) 0%, rgb(124, 144, 181) 96%, rgba(165, 197, 255, 1) 94.08%);
+            background: linear-gradient(180deg, rgba(244, 248, 247, 1) 0%, rgba(142, 198, 185, 1) 96%);
             width: 40px;
             height: 40px;
             border-radius: 5px;
@@ -730,7 +731,7 @@ const delMode = () => {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #212329;
+    background-color: rgba($color: #188549, $alpha: .3);
     width: 30px;
     height: 100%;
 }
@@ -912,7 +913,7 @@ const delMode = () => {
     }
 
     .time-item {
-        color: rgba(255, 255, 255, 0.7);
+        color: #fff;
         font-size: 16px;
         margin: 0 20px;
     }
@@ -928,9 +929,11 @@ const delMode = () => {
     }
 
     .back-button {
-        background-color: #000;
-        color: #fff;
+        // background-color: #000;
+        // color: #fff;
         border: #000;
+        background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
+        color: #fff;
     }
 }
 
@@ -987,7 +990,7 @@ const delMode = () => {
     margin-bottom: 10px;
 
     &.add {
-        background-color: #397ff6;
+        background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
     }
 
     &.del {
@@ -1002,8 +1005,8 @@ const delMode = () => {
 }
 
 .mode-button.active {
-    background: #ffffff;
-    color: #1976d2;
+    background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
+    color: #fff;
 }
 
 .setting-button {
@@ -1033,8 +1036,9 @@ const delMode = () => {
 
 /* 弹窗样式 */
 :deep(.brightness-dialog) {
-    background: rgba(30, 30, 30, 0.95);
-    backdrop-filter: blur(20px);
+    // background: rgba(30, 30, 30, 0.95);
+    // backdrop-filter: blur(20px);
+    background: linear-gradient(180.44deg, rgba(226, 232, 251, 1) 0.64%, rgba(255, 255, 255, 1) 25.32%);
 }
 
 :deep(.brightness-dialog .el-dialog__header) {
@@ -1043,14 +1047,14 @@ const delMode = () => {
 }
 
 :deep(.brightness-dialog .el-dialog__title) {
-    color: #ffffff;
+    color: #6C75A0 100%;
     font-size: 18px;
     font-weight: 500;
 }
 
 :deep(.brightness-dialog .el-dialog__body) {
     // background: rgba(255, 255, 255, 0.05);
-    color: #ffffff;
+    color: #6C75A0 100%;
 }
 
 .brightness-content {
@@ -1062,7 +1066,7 @@ const delMode = () => {
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 30px;
-    color: #ffffff;
+    color: #6C75A0;
 }
 
 .brightness-slider-container {
@@ -1138,12 +1142,12 @@ const delMode = () => {
 
             :deep(.el-input-number__increase) {
                 background-color: transparent;
-                color: #fff;
+                color: #6C75A0;
             }
 
             :deep(.el-input-number__decrease) {
                 background-color: transparent;
-                color: #fff;
+                color: #6C75A0;
             }
 
         }
@@ -1151,10 +1155,10 @@ const delMode = () => {
 
     :deep(.el-input__wrapper) {
         background-color: transparent;
-        color: #fff;
+        color: #6C75A0;
 
         input {
-            color: #fff;
+            color: #6C75A0;
         }
     }
 

src/views/HandleControl/index.vue

@@ -201,7 +201,7 @@
             <template #footer>
                 <div class="dialog-footer">
                     <el-button @click="brightnessDialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="confirmBrightness">确认</el-button>
+                    <el-button type="primary" style="background-color: #25b15f; border-color: #25b15f;" @click="confirmBrightness">确认</el-button>
                 </div>
             </template>
         </el-dialog>
@@ -554,7 +554,8 @@ onUnmounted(() => {
     box-sizing: border-box;
     position: relative;
     overflow: auto;
-    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
+    background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
+    background-color: #0A3933;
 }
 
 .main-content {
@@ -640,7 +641,7 @@ onUnmounted(() => {
     justify-content: center;
     align-items: center;
     margin-bottom: 15px;
-    background-color: #212329;
+    background-color: #24806B;
     width: 30px;
     height: 100%;
 }
@@ -701,9 +702,9 @@ onUnmounted(() => {
 }
 
 .circuit-status.active {
-    background: rgba(33, 150, 243, 0.2);
-    border-color: rgba(33, 150, 243, 0.5);
-    color: #64b5f6;
+    background: rgba(31, 223, 130, 0.2);
+    border-color: rgba(35, 219, 62, 0.764);
+    color: #25b15f;
 }
 
 .circuit-icon {
@@ -772,9 +773,9 @@ onUnmounted(() => {
 }
 
 .brightness-display.active {
-    background: rgba(33, 150, 243, 0.3);
-    border-color: rgba(33, 150, 243, 0.6);
-    color: #64b5f6;
+    background: rgba(31, 223, 130, 0.2);
+    border-color: rgba(35, 219, 62, 0.764);
+    color: #25b15f;
     box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
 }
 
@@ -803,7 +804,7 @@ onUnmounted(() => {
     }
 
     .time-item {
-        color: rgba(255, 255, 255, 0.7);
+        color: #fff;
         font-size: 16px;
         margin: 0 20px;
     }
@@ -819,9 +820,11 @@ onUnmounted(() => {
     }
 
     .back-button {
-        background-color: #000;
+        // background-color: #000;
         color: #fff;
         border: #000;
+        background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
+        color: #fff;
     }
 }
 
@@ -875,8 +878,8 @@ onUnmounted(() => {
 }
 
 .mode-button.active {
-    background: #ffffff;
-    color: #1976d2;
+    background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
+    color: #fff;
 }
 
 .setting-button {
@@ -943,11 +946,11 @@ onUnmounted(() => {
 }
 
 :deep(.brightness-slider .el-slider__bar) {
-    background: #1976d2;
+    background: #25b15f;
 }
 
 :deep(.brightness-slider .el-slider__button) {
-    border-color: #1976d2;
+    border-color: #25b15f;
 }
 
 :deep(.brightness-slider .el-slider__stop) {

src/views/Menu/index.vue

@@ -3,8 +3,11 @@
         <!-- 主要内容 -->
         <div class="main-content">
             <!-- 时间显示 -->
-            <div class="time-display">
+            <!-- <div class="time-display">
                 {{ currentTime }}
+            </div> -->
+            <div class="logo">
+                <img src="@/assets/images/logo@2x.png" alt="">
             </div>
 
             <!-- 主标题 -->
@@ -107,13 +110,13 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .smart-control-app {
     width: 100vw;
     height: 100vh;
     position: relative;
     overflow: hidden;
-    background: center / cover url('@/assets/images/backgroundImg.png') no-repeat;
+    background: center / cover url('@/assets/images/首页背景@2x.png') no-repeat;
 }
 
 .main-content {
@@ -126,6 +129,16 @@ onUnmounted(() => {
     padding: 40px;
     box-sizing: border-box;
     justify-content: center;
+
+    .logo {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+
+        img {
+            height: 50px;
+        }
+    }
 }
 
 .time-display {
@@ -157,7 +170,7 @@ onUnmounted(() => {
 .title-decoration {
     width: 80px;
     height: 6px;
-    background: linear-gradient(90deg, transparent, #64b5f6, #42a5f5, #64b5f6, transparent);
+    background: linear-gradient(90deg, transparent, #64f6be, #42f5a4, #54e98d, transparent);
     position: relative;
     animation: titleGlow 2s ease-in-out infinite alternate;
 }
@@ -170,7 +183,7 @@ onUnmounted(() => {
     transform: translateX(-50%);
     width: 12px;
     height: 12px;
-    background: radial-gradient(circle, #64b5f6 0%, #42a5f5 70%, transparent 100%);
+    background: linear-gradient(90deg, transparent, #64f6be, #42f5a4, #54e98d, transparent);
     border-radius: 50%;
     box-shadow:
         0 0 15px #64b5f6,

src/views/Monitoring/index.vue

@@ -143,7 +143,7 @@
                     <div class="chartBox">
                         <div class="search">
                             <el-date-picker value-format="YYYY-MM-DD" v-model="recdDate" type="date" placeholder="请选择时间" />
-                            <el-button type="primary" :loading="lineDataLoading" @click="getLineData">查询</el-button>
+                            <el-button type="primary" class="mode-button active" style="width:70px;height: 32px; margin-bottom: 0;" :loading="lineDataLoading" @click="getLineData">查询</el-button>
                         </div>
                         <Linechart :lineData="lineData"></Linechart>
                     </div>
@@ -545,7 +545,8 @@ onUnmounted(() => {
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
-    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
+    background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
+    background-color: #0A3933;
 }
 
 .main-content {
@@ -634,7 +635,7 @@ onUnmounted(() => {
     justify-content: center;
     align-items: center;
     margin-bottom: 15px;
-    background-color: #212329;
+    background-color: #24806B;
     width: 30px;
     height: 100%;
 }
@@ -834,9 +835,11 @@ onUnmounted(() => {
     }
 
     .back-button {
-        background-color: #000;
-        color: #fff;
+        // background-color: #000;
+        // color: #fff;
         border: #000;
+        background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
+        color: #fff;
     }
 }
 
@@ -891,8 +894,8 @@ onUnmounted(() => {
 }
 
 .mode-button.active {
-    background: #ffffff;
-    color: #1976d2;
+    background: linear-gradient(180deg, rgba(51, 224, 188, 1) 0%, rgba(5, 149, 117, 1) 100%);
+    color: #fff;
 }
 
 .setting-button {

src/views/ParamsConfig/index.vue

@@ -597,7 +597,8 @@ onUnmounted(() => {
     box-sizing: border-box;
     position: relative;
     overflow: auto;
-    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
+    background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
+    background-color: #0A3933;
 }
 
 .main-content {
@@ -646,7 +647,7 @@ onUnmounted(() => {
     box-sizing: border-box;
 
     .main_item {
-        border: .5px solid #ddd;
+        border: .5px solid #0e9228;
         display: flex;
         flex-direction: column;
         height: 450px;
@@ -657,15 +658,17 @@ onUnmounted(() => {
             align-items: center;
             height: 50px;
             font-size: 16px;
-            background-color: #21232A;
-            color: #8088AA;
-            border-bottom: .5px solid #ddd;
+            // background-color: #21232A;
+            background-color: rgba($color: #188549, $alpha: .3);
+            color: #fff;
+            border-bottom: .5px solid #0e9228;
         }
 
         .main_content {
             padding: 20px;
             font-size: 14px;
-            background-color: #282d36;
+            // background-color: #282d36;
+            background-color: rgba($color: #000000, $alpha: .3);
             flex: 1;
 
             &.energy_meter {
@@ -686,8 +689,8 @@ onUnmounted(() => {
 
             .value {
                 text-align: center;
-                background-color: #21232A;
-                color: #8088AA;
+                background-color: rgba($color: #188549, $alpha: .3);
+                color: #fff;
                 padding: 5px 10px;
                 min-height: 32px;
                 box-sizing: border-box;
@@ -697,7 +700,7 @@ onUnmounted(() => {
 
             .subLoopParameter_item {
                 border-radius: 10px;
-                border: 1px solid #fff;
+                border: 1px solid #0e9228;
                 padding: 15px;
                 margin-bottom: 20px;
 
@@ -795,9 +798,11 @@ onUnmounted(() => {
     }
 
     .back-button {
-        background-color: #000;
-        color: #fff;
+        // background-color: #000;
+        // color: #fff;
         border: #000;
+        background: linear-gradient(180deg, rgba(223, 196, 137, 1) 0%, rgba(190, 151, 99, 1) 100%);
+        color: #fff;
     }
 }
 
@@ -807,22 +812,22 @@ onUnmounted(() => {
 }
 
 :deep(.el-input__wrapper) {
-    background-color: #212329 !important;
+    background-color: rgba($color: #188549, $alpha: .3) !important;
     box-shadow: none;
-    border: 1px soild #3B3D45;
+    border: 1px soild #0e9228;
 
     input {
-        color: #8088AA;
+        color: #fff;
     }
 }
 
 :deep(.el-select__wrapper) {
-    background-color: #212329 !important;
+    background-color: rgba($color: #188549, $alpha: .3) !important;
     box-shadow: none;
-    border: 1px soild #3B3D45;
+    border: 1px soild #0e9228;
 
     .el-select__placeholder {
-        color: #8088AA;
+        color: #fff;
     }
 }
 </style>