Merge remote-tracking branch 'refs/remotes/origin/master'

.env.development

@@ -2,9 +2,12 @@
 ENV = 'development'
 
 # base api
+<<<<<<< HEAD
+=======
 # VUE_APP_BASE_API = 'http://192.168.3.177:8080/api'
 # VUE_APP_WS = 'ws://192.168.3.177:8080/ws'
 # VUE_APP_VIDEO = 'ws://192.168.3.177:8082/ws'
+>>>>>>> 519361243e975811d0918dee26f826ecbbae9cca
 VUE_APP_BASE_API = 'http://192.168.0.72:8080/api'
 VUE_APP_WS = 'ws://192.168.0.72:8080/ws'
 VUE_APP_VIDEO = 'ws://192.168.0.72:8082/ws'

README.md

@@ -1,12 +1,41 @@
-touch README.md
-git init
-git add README.md
-git commit -m "first commit"
-git remote add origin http://git.fast-fun.cn:92/ruili/centralized-control-center-frontend_v1.git
-git push -u origin master
 
+## Getting started
 
-git remote add origin http://git.fast-fun.cn:92/ruili/centralized-control-center-frontend_v1.git
-git push -u origin master
+```bash
+
+# install dependency
+npm install
+
+# develop
+npm run dev
+```
+
+# node 后端服务需执行以下命令：
+node websocket-relay.js video1 8081 8082
+
+## Build
+
+```bash
+# build for test environment
+npm run build:stage
+
+# build for production environment
+npm run build:prod
+```
+
+## Advanced
+
+```bash
+# preview the release environment effect
+npm run preview
+
+# preview the release environment effect + static resource analysis
+npm run preview -- --report
+
+# code format check
+npm run lint
+
+# code format check and auto fix
+npm run lint -- --fix
+```
 
-http://git.fast-fun.cn:92/ruili/centralized-control-center-frontend_v1.git

src/icons/svg/password.svg

@@ -1 +1,8 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="lock-on">
+<g id="Union">
+<path d="M6.78613 11.25V12.375H11.2861V11.25H6.78613Z" fill="#86909C"/>
+<path d="M5.09863 5.61469V6.74997H3.41113C3.10047 6.74997 2.84863 7.00181 2.84863 7.31247V15.1875C2.84863 15.4981 3.10047 15.75 3.41113 15.75H14.6611C14.9718 15.75 15.2236 15.4981 15.2236 15.1875V7.31247C15.2236 7.00181 14.9718 6.74997 14.6611 6.74997H12.9736V5.61469C12.9736 3.44006 11.2108 1.67719 9.03613 1.67719C6.86151 1.67719 5.09863 3.44006 5.09863 5.61469ZM11.8486 6.74997H6.22363V5.61469C6.22363 4.06138 7.48283 2.80219 9.03613 2.80219C10.5894 2.80219 11.8486 4.06138 11.8486 5.61469V6.74997ZM3.97363 7.87497H14.0986V14.625H3.97363V7.87497Z" fill="#86909C"/>
+</g>
+</g>
+</svg>

src/icons/svg/secured.svg

@@ -0,0 +1,8 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="secured">
+<g id="Union">
+<path d="M8.34921 11.17L12.3711 7.14802L11.5756 6.35253L8.3492 9.57896L6.49662 7.72638L5.70112 8.52188L8.34921 11.17Z" fill="#86909C"/>
+<path d="M2.84867 2.25L2.84863 10.1251C2.84863 11.7185 3.68468 13.1952 5.05106 14.015L9.0359 16.406L13.0212 14.015C14.3876 13.1952 15.2237 11.7185 15.2237 10.1251L15.2237 2.25H2.84867ZM3.97363 10.1251L3.97366 3.375H14.0987L14.0987 10.1251C14.0987 11.3234 13.47 12.4338 12.4424 13.0503L9.03593 15.0941L5.62989 13.0504C4.60235 12.4338 3.97363 11.3234 3.97363 10.1251Z" fill="#86909C"/>
+</g>
+</g>
+</svg>

src/icons/svg/user.svg

@@ -1 +1,8 @@
-<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user">
+<g id="Union">
+<path d="M12.9736 5.625C12.9736 7.79962 11.2108 9.5625 9.03613 9.5625C6.86151 9.5625 5.09863 7.79962 5.09863 5.625C5.09863 3.45038 6.86151 1.6875 9.03613 1.6875C11.2108 1.6875 12.9736 3.45038 12.9736 5.625ZM11.8486 5.625C11.8486 4.0717 10.5894 2.8125 9.03613 2.8125C7.48283 2.8125 6.22363 4.0717 6.22363 5.625C6.22363 7.1783 7.48283 8.4375 9.03613 8.4375C10.5894 8.4375 11.8486 7.1783 11.8486 5.625Z" fill="#86909C"/>
+<path d="M15.7447 12.2094C16.1202 12.3888 16.3486 12.774 16.3486 13.1902V15.75C16.3486 16.0607 16.0968 16.3125 15.7861 16.3125H2.28613C1.97547 16.3125 1.72363 16.0607 1.72363 15.75V13.1902C1.72363 12.774 1.95203 12.3888 2.32761 12.2094C4.36671 11.2355 6.63596 10.6875 9.03613 10.6875C11.4363 10.6875 13.7056 11.2355 15.7447 12.2094ZM9.03613 11.8125C6.82371 11.8125 4.73227 12.3139 2.84863 13.2073V15.1875H15.2236V13.2073C13.34 12.3139 11.2486 11.8125 9.03613 11.8125Z" fill="#86909C"/>
+</g>
+</g>
+</svg>

src/layout/components/Navbar.vue

@@ -184,7 +184,6 @@ export default {
 
       // this.PermissionList = this.permission_routes.slice(5, 11);
       this.PermissionList = this.permission_routes.slice(5, 11);
-      console.log(this.PermissionList, '999999');
     },
     //当前时间
     timer() {

src/layout/index.vue

@@ -109,7 +109,7 @@ export default {
   @include clearfix;
   position: relative;
   width: 100%;
-  background:#0a101c;
+  background:#141518;
   padding-top: 20px;
   &.mobile.openSidebar {
     position: fixed;

src/views/login/index.vue

@@ -1,46 +1,93 @@
 <template>
   <div class="login-container">
-    <div class="title-container">
+    <!-- <div class="title-container">
       <h3 class="title">重卡换电智能站控系统</h3>
-    </div>
+    </div> -->
     <div class="login-bg">
-      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
-        label-position="left">
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+        autocomplete="on"
+        label-position="left"
+      >
+        <div class="login-logo"><img src="./assets/logo.png" /></div>
+        <div class="login-title">登录</div>
         <div class="login-list">
-          <p>账号：</p>
+          <!-- <p>账号：</p> -->
           <el-form-item tabindex="1" prop="username">
             <span class="svg-container">
               <svg-icon icon-class="user" />
             </span>
-            <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="Username" type="text"
-              autocomplete="on" />
+            <el-input
+              ref="username"
+              v-model="loginForm.username"
+              placeholder="请输入用户名"
+              name="Username"
+              type="text"
+              autocomplete="on"
+            />
           </el-form-item>
         </div>
         <div class="login-list">
-          <p>密码：</p>
+          <!-- <p>密码：</p> -->
           <el-form-item tabindex="2" prop="password">
             <span class="svg-container">
               <svg-icon icon-class="password" />
             </span>
-            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-              placeholder="请输入密码" name="password" autocomplete="on" @keyup.native="checkCapslock"
-              @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
+            <el-input
+              :key="passwordType"
+              ref="password"
+              v-model="loginForm.password"
+              :type="passwordType"
+              placeholder="请输入密码"
+              name="password"
+              autocomplete="on"
+              @keyup.native="checkCapslock"
+              @blur="capsTooltip = false"
+              @keyup.enter.native="handleLogin"
+            />
             <span class="show-pwd" @click="showPwd">
-              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+              <svg-icon
+                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+              />
             </span>
           </el-form-item>
         </div>
         <div class="login-list">
-          <p></p>
-          <el-button :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
+          <el-form-item prop="code" class="yzm">
+            <el-input
+              v-model="loginForm.code"
+              auto-complete="off"
+              placeholder="验证码"
+              class="yzm-input"
+              @keyup.enter.native="handleLogin"
+            >
+            <svg-icon slot="prefix" icon-class="secured" class="el-input__icon input-icon" />
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" @click="getCode" class="login-code-img" />
+            </div>
+          </el-form-item>
+        </div>
+        <el-checkbox
+          v-model="loginForm.rememberMe"
+          >记住密码</el-checkbox>
+        <div class="login-list">
+          <el-button :loading="loading" @click.native.prevent="handleLogin"
+            >登录</el-button
+          >
         </div>
       </el-form>
     </div>
+    <div class="copyright">
+      Copyright©2022-2023 苏州睿锂物联科技有限公司版权所有
+    </div>
   </div>
 </template>
 
 <script>
-
 export default {
   name: "Login",
   data() {
@@ -59,9 +106,12 @@ export default {
       }
     };
     return {
+      codeUrl: "",
       loginForm: {
         username: "admin",
         password: "88888888",
+        rememberMe: false,
+        code: "1111",
       },
       loginRules: {
         username: [
@@ -70,6 +120,7 @@ export default {
         password: [
           { required: true, trigger: "blur", validator: validatePassword },
         ],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       passwordType: "password",
       capsTooltip: false,
@@ -102,6 +153,9 @@ export default {
     // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
+    getCode() {
+      this.codeUrl = "data:image/gif;base64,";
+    },
     checkCapslock(e) {
       const { key } = e;
       this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
@@ -128,11 +182,11 @@ export default {
               });
               this.loading = false;
             })
-            .catch(err => {
+            .catch((err) => {
               this.$message({
-                type: 'error',
-                message: '登录失败!'
-              })
+                type: "error",
+                message: "登录失败!",
+              });
               this.loading = false;
             });
         } else {
@@ -154,8 +208,8 @@ export default {
 
 <style lang="scss">
 $bg: #283443;
-$light_gray: #fff;
-$cursor: #fff;
+$light_gray: #1d2129;
+$cursor: #86909c;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
   .login-container .el-input input {
@@ -165,6 +219,22 @@ $cursor: #fff;
 
 /* reset element-ui css */
 .login-container {
+  .login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+    background-color: #FFFFFF;
+    border-radius: 3px;
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+  .login-img {
+    height: 80px;
+    width: 300px;
+    margin: 0 50px 20px 50px;
+  }
   .el-input {
     display: inline-block;
     height: 40px;
@@ -175,9 +245,10 @@ $cursor: #fff;
       border: 0px;
       -webkit-appearance: none;
       border-radius: 0px;
-      padding: 12px 5px 12px 15px;
+      padding: 8px 5px 8px 15px;
       color: $light_gray;
       caret-color: $cursor;
+      font-size: 16px;
 
       &:-webkit-autofill {
         box-shadow: 0 0 0px 1000px $bg inset !important;
@@ -189,7 +260,7 @@ $cursor: #fff;
   .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
+    border-radius: 3px;
     color: #454545;
   }
 }
@@ -203,28 +274,48 @@ $light_gray: #eee;
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: black;
-  background-image: url("./assets/index.png");
+  background-image: url("./assets/login-bg.png");
   background-size: 100% 100%;
   overflow: hidden;
 
   .login-bg {
     position: relative;
-    width: 580px;
-    height: 384px;
-    background-color: rgb(7, 8, 10, 0.9);
-    max-width: 100%;
-    margin: 0 auto;
-    top: 25vh;
-    padding-top: 80px;
-    background-image: url("./assets/login.png");
+    width: 500px;
+    height: 600px;
+    background: rgba(60, 66, 84, 0.2);
+    border-radius: 8px;
+    border: 1px solid #3c4254;
+    margin-left: auto;
+    margin-right: 211px;
+    top: 19.5vh;
+    padding: 0px 50px;
+    box-sizing: border-box;
 
+    
     .login-list {
       display: flex;
       flex-direction: row;
-      width: 400px;
+      width: 100%;
       margin: 0 auto;
-
+      .yzm{
+        background: none;
+        border: none;
+       .el-input{
+        background-color: #FFFFFF;
+        border-radius: 3px;
+       }
+      }
+      .input-icon {
+        height: 18px;
+        width: 18px;
+        margin-left: 8px;
+        vertical-align: middle;
+      }
+      .yzm-input{
+        width: 63%;
+        padding-left: 30px;
+      }
+      
       p {
         font-size: 16px;
         color: white;
@@ -234,8 +325,28 @@ $light_gray: #eee;
         line-height: 46px;
       }
     }
+    .login-logo {
+      width: 286px;
+      height: 65px;
+      margin-top: 55px;
+    }
+    .login-title {
+      font-size: 20px;
+      font-weight: 400;
+      color: #bfc1cb;
+      margin-top: 60px;
+      margin-bottom: 32px;
+    }
+  }
+  .copyright {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 40px;
+    font-size: 15px;
+    font-weight: 400;
+    color: #757b8c;
   }
-
   .title-container {
     position: relative;
     top: 26vh;
@@ -251,35 +362,40 @@ $light_gray: #eee;
   }
 
   .el-button {
-    color: black;
-    font-weight: 600;
     border: none !important;
-    height: 42px;
+    height: 40px;
     font-size: 15px;
+    color: #ffffff;
     letter-spacing: 1px;
     margin-top: 20px;
     flex: 1;
-    background-color: #6eecfb;
+    background: #246cf9;
+    border-radius: 3px;
+    font-weight: 400;
   }
 
   .login-form {
     position: relative;
-    width: 520px;
+    width: 100%;
     max-width: 100%;
-    padding: 10px 35px 0;
     margin: 0 auto;
     overflow: hidden;
+    ::v-deep .el-checkbox__label{
+        font-size: 14px;
+        font-weight: 400;
+        color: #BFC1CB !important;
+    }
   }
 
   .el-form-item {
     margin-bottom: 25px;
     flex: 1;
-    background-color: rgb(12, 17, 20, 0.9);
-    border: 1px solid rgb(48, 98, 105, 0.9);
+    background-color: #ffffff;
+    border: 1px solid #246cf9;
   }
 
   .el-form-item:focus-within {
-    background-color: rgb(17, 31, 32, 0.9);
+    // background-color: rgb(17, 31, 32, 0.9);
     border: 1px solid rgb(110, 236, 251, 0.9);
   }
 
@@ -296,19 +412,20 @@ $light_gray: #eee;
   }
 
   .svg-container {
-    padding: 3px 5px 3px 15px;
+    padding: 0px 5px 0px 12px;
     color: #6eecfb;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
+    .svg-icon {
+      color: #959ea8;
+    }
   }
 
-
-
   .show-pwd {
     position: absolute;
     right: 10px;
-    top: 7px;
+    top: 5px;
     font-size: 16px;
     color: $dark_gray;
     cursor: pointer;

src/views/power-change-monitoring/components/BatteryInfo.vue

@@ -108,13 +108,13 @@ export default {
 
 <style lang="scss" scoped>
     .battery-null{
-        background: #292D46;
+        background: #3C4254;
     }
     .battery-have{
         background: #0A101C;
     }
     .SelectBorder{
-        border: 1px solid #338150;
+        border: 1px solid #246CF9;
     }
     .defaultBorder{
         border: 1px solid rgb(25, 34, 51,0.55);

src/views/power-change-monitoring/index.scss

@@ -20,14 +20,13 @@ $titColor:#192233;
         height: 40px;
         font-size: 16px;
         font-weight: 500;
-        color: rgba(153,174,197,0.65);
-        text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
+        color: #757B8C;
         margin-right: 8px;
         line-height: 38px;
     }
     .frameText{
-        color: #C7D2DF;
-        text-shadow: 0px 0px 4px #0027D8;
+        color: #BFC1CB;
+        // text-shadow: 0px 0px 4px #0027D8;
     }
     .frame{
         flex: 1;
@@ -36,10 +35,9 @@ $titColor:#192233;
         text-indent: 15px;
         font-size: 16px;
         font-weight: 500;
-        color: #91FDB9;
+        color: #246CF9;
         line-height: 40px;
-        text-shadow: 0px 0px 4px #0027D8;
-        border: 1px solid #181E29;
+        border: 1px solid #3C4254;
         box-sizing: border-box;
         .errordata{
             display: inline-block;
@@ -71,8 +69,7 @@ $titColor:#192233;
             top: 4px;
         }
         .isflag{
-            color: #ED7735;
-            text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
+            color: #FA2256;
         }
         .isblue{
             color: #148CFA;
@@ -85,7 +82,7 @@ $titColor:#192233;
             button{
                 width: 48px;
                 height: 28px;
-                background: #91FDB9;
+                background: #246CF9;
                 border-radius: 2px 2px 2px 2px;
                 font-size: 16px;
                 font-weight: 400;
@@ -93,11 +90,11 @@ $titColor:#192233;
                 text-align: center;
                 border: none;
                 padding: 0;
-                color: black;
-            }
-            button:hover{
-                background: #69b889;
+                color: #FFFFFF;
             }
+            // button:hover{
+            //     background: #69b889;
+            // }
         }
     }
 }
@@ -131,8 +128,7 @@ $titColor:#192233;
             line-height: 34px;
             font-weight: 600;
             letter-spacing: 1px;
-            text-shadow: 0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce;
-            color: white;
+            color: #E5E6ED;
         }
         
         .taskNo{
@@ -148,14 +144,12 @@ $titColor:#192233;
             margin-left: auto;
             font-size: 15px;
             font-weight: 600;
-            color: rgba(255,255,255,0.85);
+            color: #BFC1CB;
             line-height: 34px;
-            text-shadow: 0px 0px 4px #0027D8;
             cursor: pointer;
             font{
                 text-decoration: underline;
-                color: #91FDB9;
-                text-shadow: 0px 0px 4px #0027D8;
+                color: #246CF9;
                 margin-right: 16px;
             }
         }
@@ -163,7 +157,6 @@ $titColor:#192233;
 }
 .bottom{
     width: 100%;
-    border: #181E29 solid 1px;
     border-top:none;
     height: 230px;
     box-sizing: border-box;
@@ -171,6 +164,7 @@ $titColor:#192233;
     padding-top:0;
     display: flex;
     flex-direction: column;
+    background-color: #1E1F25;
     .list{
         display: flex;
         .plcConnect{
@@ -259,7 +253,7 @@ $titColor:#192233;
             flex-direction: column;
             .TaskFoot{
                 height: 184px;
-                border: #181E29 solid 1px;
+                background-color: #1E1F25;
                 border-top:none;
                 box-sizing: border-box;
                 padding: 16px;
@@ -289,22 +283,22 @@ $titColor:#192233;
                             span:first-child{
                                 font-size: 16px;
                                 font-weight: 500;
-                                color: #ED7735;
+                                color: #FA2256;
                                 line-height: 21px;
-                                text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
+                                // text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
                             }
                             .time{
                                 font-size: 16px;
                                 font-weight: 500;
-                                color: #99AEC5;
+                                color: #757B8C;
                                 line-height: 19px;
-                                text-shadow: 0px 0px 4px #0027D8;
+                                // text-shadow: 0px 0px 4px #0027D8;
                                 font{
                                     font-size: 15px;
                                     font-weight: 500;
-                                    color: #91FDB9;
+                                    color: #246CF9;
                                     line-height: 21px;
-                                    text-shadow: 0px 0px 4px #0027D8;
+                                    // text-shadow: 0px 0px 4px #0027D8;
                                 }
                             }
                         }
@@ -320,19 +314,19 @@ $titColor:#192233;
                                     width: 100%;
                                     height: 8px;
                                     margin-top: 4px;
-                                    background: #99AEC5;
+                                    background: #3C4254;
                                     border-radius: 8px;
                                     .bar-green{
                                         position: relative;
                                         height: 8px;
                                         border-radius: 8px;
-                                        background-color: #91FDB9;
+                                        background-color: #246CF9;
                                         .bar-percent{
                                             width: 38px;
                                             height: 22px;
-                                            background: #91FDB9;
+                                            background: #246CF9;
                                             border-radius: 27px;
-                                            color: black;
+                                            color: white;
                                             font-size: 12px;
                                             text-align: center;
                                             line-height: 22px;
@@ -349,12 +343,12 @@ $titColor:#192233;
                             .count-step{
                                 width: 44px;
                                 font-size: 15px;
-                                color: rgba(153,174,197,0.65);
-                                text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
+                                color: #757B8C;
+                                // text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
                                 letter-spacing: 1px;
                                 font-weight: 500;
                                 font{
-                                    color: #91FDB9;
+                                    color: #246CF9;
                                 }
                             }
                         }
@@ -362,19 +356,20 @@ $titColor:#192233;
                     .Exchange-battery{
                         flex: 1;
                         height: 150px;
-                        background: rgb(25, 34, 51,0.55);
+                        // background: rgb(25, 34, 51,0.55);
                         margin-top: 16px;
                         display: flex;
                         padding: 16px;
                         box-sizing: border-box;
                         position: relative;
                         flex-direction: column;
+                        border: #3C4254 solid 1px;
                         .character{
                             width: 5px;
                             height: 5px;
                             position: absolute;
-                            left:-1px;
-                            top: -1px;
+                            left:-2px;
+                            top: -2px;
                             background-image: url('./assets/character.png');
                             background-size: 100% 100%;
                         }
@@ -382,16 +377,16 @@ $titColor:#192233;
                             display: flex;
                             span{
                                 font-weight: 400;
-                                color: #91FDB9;
+                                color: #246CF9;
                                 font-size: 16px;
                                 line-height: 28px;
                                 margin-left: 12px;
                             }
                             .leftBtn{
                                 padding: 3px 8px;
-                                background: #263042;
+                                background: #282C38;
                                 font-weight: 400;
-                                color: #C7D2DF;
+                                color: #757B8C;
                                 font-size: 15px;
                                 height: 28px;
                                 margin: 0;
@@ -407,9 +402,9 @@ $titColor:#192233;
                             }
                             .info-btn{
                                 padding: 3px 8px;
-                                background: #263042;
+                                background: #282C38;
                                 font-weight: 400;
-                                color: #C7D2DF;
+                                color: #BFC1CB;
                                 font-size: 15px;
                                 height: 28px;
                                 margin: 0;
@@ -421,8 +416,8 @@ $titColor:#192233;
                                 }
                             }
                             .active{
-                                background: #91FDB9;
-                                color: #010101;
+                                background: #246CF9;
+                                color: #FFFFFF;
                             }
                         }
                         .battery-detail{
@@ -442,9 +437,9 @@ $titColor:#192233;
                                 .text{
                                     font-size: 16px;
                                     font-weight: 500;
-                                    color: rgba(153,174,197,0.65);
-                                    text-shadow: 0px 0px 4px rgba(39,69,201,0.65);
-                                    margin-left: 18px;
+                                    color: #757B8C;
+                                    // text-shadow: 0px 0px 4px rgba(39,69,201,0.65);
+                                    // margin-left: 18px;
                                     line-height: 32px;
                                 }
                                 .frame{
@@ -454,10 +449,10 @@ $titColor:#192233;
                                     text-indent: 15px;
                                     font-size: 16px;
                                     font-weight: 500;
-                                    color: #C7D2DF;
+                                    color: #BFC1CB;
                                     line-height: 40px;
-                                    text-shadow: 0px 0px 4px #0027D8;
-                                    border: 1px solid #273056;
+                                    // text-shadow: 0px 0px 4px #0027D8;
+                                    border: 1px solid #3C4254;
                                     box-sizing: border-box;
                                     .shinning{
                                         position: absolute;
@@ -476,14 +471,14 @@ $titColor:#192233;
                 .Progress-btn{
                     width: 92px;
                     height: 92px;
-                    background: #91FDB9;
                     border-radius: 4px;
                     font-weight: 600;
-                    color: #000000;
+                    color: #FFFFFF;
                     line-height: 92px;
                     font-size: 32px;
                     margin-top: 46px;
                     text-align: center;
+                    background: linear-gradient(180deg, #0522AC 0%, rgba(52,56,76,0) 100%);
                 }
                 .Fire{
                     line-height: 36px;
@@ -558,9 +553,9 @@ $titColor:#192233;
                         display: flex;
                         .leftBtn{
                             padding: 3px 8px;
-                            background: #263042;
+                            background: #282C38;
                             font-weight: 400;
-                            color: #C7D2DF;
+                            color: #757B8C;
                             font-size: 15px;
                             height: 28px;
                             margin: 0;
@@ -575,17 +570,17 @@ $titColor:#192233;
                             border-radius: 0px 2px 2px 0px;
                         }
                         .active{
-                            background: #91FDB9;
-                            color: #010101;
+                            background: #246CF9;
+                            color: #FFFFFF;
                         }
                     }
                     .handle-group{
                         display: flex;
                         button{
                             margin-left: 16px;
-                            background: #263042;
+                            background: #282C38;
                             padding: 3px 8px;
-                            color: #C7D2DF;
+                            color: #757B8C;
                             border-radius: 2px;
                             border: 0;
                             font-size: 15px;
@@ -611,13 +606,14 @@ $titColor:#192233;
             }
             .store-container{
                 height: 368px;
-                background: rgb(25, 34, 51,0.55);
+                background:#1E1F25;
                 display: flex;
                 flex-direction: column;
                 .title{
                     width: 100%;
                     height: 34px;
                     display: flex;
+                    background-color: #192233;
                     .icon{
                         width: 28px;
                         height: 18px;
@@ -632,8 +628,8 @@ $titColor:#192233;
                         line-height: 34px;
                         font-weight: 600;
                         letter-spacing: 2px;
-                        text-shadow: 0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce;
-                        color: white;
+                        // text-shadow: 0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce,0 0 2px #1753ce;
+                        color: #E5E6ED;
                     }
                     .battery-count{
                         display: flex;
@@ -663,7 +659,7 @@ $titColor:#192233;
                             font-size: 18px;
                             font-family: Roboto-Medium, Roboto;
                             font-weight: 500;
-                            color: #91FDB9;
+                            color: #246CF9;
                             line-height: 24px;
                             text-align: center;
                             margin-top: 6px;
@@ -675,14 +671,14 @@ $titColor:#192233;
                         margin-right: 16px;
                         button{
                             padding: 3px 8px;
-                            background: #263042;
+                            background: #282C38;
                             font-weight: 400;
-                            color: #C7D2DF;
+                            color: #757B8C;
                             font-size: 15px;
                             height: 28px;
                             margin: 0;
                             margin-left: 16px;
-                            margin-top: 10px;
+                            margin-top: 2px;
                             border: 0;
                             border-radius: 2px;
                             cursor: pointer;
@@ -691,8 +687,8 @@ $titColor:#192233;
                             }
                         }
                         .active{
-                            background: #91FDB9;
-                            color: black;
+                            background: #246CF9;
+                            color: white;
                         }
                     }
                 }
@@ -705,7 +701,7 @@ $titColor:#192233;
                     .battery-info{
                         width: 158px;
                         height: 300px;
-                        background: #1C263A;
+                        background: #282C38;
                         display: flex;
                         flex-direction: column;
                         cursor: pointer;
@@ -729,10 +725,10 @@ $titColor:#192233;
                             .battery-number{
                                 margin-right: auto;
                                 font-size: 16px;
-                                color: #FFFFFF;
+                                color: #E5E6ED;
                                 margin-left: 10px;
-                                border-left: #1C263A solid 1px;
-                                border-right: #1C263A solid 1px;
+                                // border-left: #1C263A solid 1px;
+                                // border-right: #1C263A solid 1px;
                             }
                         }
                         .battery-center{
@@ -869,23 +865,23 @@ $titColor:#192233;
                     .log-detail{
                         display: flex;
                         font-size: 16px;
-                        color: #C7D2DF;
+                        color: #757B8C;
                         font-weight: 500;
                         .logRed{
-                            color: #ED7735;
+                            color: #FA2256;
                         }
                         .log-icon{
                             width: 13px;
                             height: 13px;
-                            box-shadow: 0px 0px 4px 0px #738AB5;
-                            border: 2px solid #7F97C5;
+                            // box-shadow: 0px 0px 4px 0px #738AB5;
+                            border: 2px solid #246CF9;
                             border-radius: 50%;
                             margin-right: 5px;
                             margin-top: 2px;
                         }
                         .log-icon-active{
-                            border: 2px solid #ED7735;
-                            box-shadow: 0px 0px 4px 0px #ED7735;
+                            border: 2px solid #FA2256;
+                            // box-shadow: 0px 0px 4px 0px #ED7735;
                         }
                         .log-mr{
                             margin-right:22px;
@@ -898,13 +894,13 @@ $titColor:#192233;
                         
                     }
                     .log-actve{
-                        color: #ED7735;
+                        color: #FA2256;
                     }
                     .line{
                         width: 0px;
                         // height: 30px;
-                        box-shadow: 0px 0px 4px 0px #738AB5;
-                        border-left: 1px solid #7F97C5;
+                        // box-shadow: 0px 0px 4px 0px #738AB5;
+                        border-left: 1px solid #246CF9;
                         margin-left: 6px;
                         position: absolute;
                         height: calc(100% - 13px);
@@ -912,8 +908,8 @@ $titColor:#192233;
                         top: 13px;
                     }
                     .line-actve{
-                        border-left: 1px solid #ED7735;
-                        box-shadow: 0px 0px 4px 0px #ED7735;
+                        border-left: 1px solid #FA2256;
+                        // box-shadow: 0px 0px 4px 0px #ED7735;
                     }
                 }
                 :last-child .line{

src/views/power-change-monitoring/index.vue

@@ -288,6 +288,7 @@
             <!-- 电池信息结束 -->
           </div>
         </div>
+        
       </div>
       <!-- 仓位/电池结束 -->
     </div>