Browse Source

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

wy 1 year ago
parent
commit
a2f43addc4
45 changed files with 314 additions and 147 deletions
  1. 3 0
      .env.development
  2. 38 9
      README.md
  3. 8 1
      src/icons/svg/password.svg
  4. 8 0
      src/icons/svg/secured.svg
  5. 8 1
      src/icons/svg/user.svg
  6. 0 1
      src/layout/components/Navbar.vue
  7. 1 1
      src/layout/index.vue
  8. BIN
      src/views/login/assets/index.png
  9. BIN
      src/views/login/assets/login-bg.png
  10. BIN
      src/views/login/assets/login.png
  11. BIN
      src/views/login/assets/logo.png
  12. 166 49
      src/views/login/index.vue
  13. BIN
      src/views/power-change-monitoring/assets/battery-anim.gif
  14. BIN
      src/views/power-change-monitoring/assets/battery.png
  15. BIN
      src/views/power-change-monitoring/assets/car1x.png
  16. BIN
      src/views/power-change-monitoring/assets/ding.png
  17. BIN
      src/views/power-change-monitoring/assets/edit.png
  18. BIN
      src/views/power-change-monitoring/assets/green.png
  19. BIN
      src/views/power-change-monitoring/assets/jiantou.gif
  20. BIN
      src/views/power-change-monitoring/assets/lightbg.png
  21. BIN
      src/views/power-change-monitoring/assets/nostatus.png
  22. BIN
      src/views/power-change-monitoring/assets/refresh.png
  23. BIN
      src/views/power-change-monitoring/assets/s1-active.png
  24. BIN
      src/views/power-change-monitoring/assets/s1.png
  25. BIN
      src/views/power-change-monitoring/assets/s2-active.png
  26. BIN
      src/views/power-change-monitoring/assets/s2-link.png
  27. BIN
      src/views/power-change-monitoring/assets/s2.png
  28. BIN
      src/views/power-change-monitoring/assets/s3-active.png
  29. BIN
      src/views/power-change-monitoring/assets/s3.png
  30. BIN
      src/views/power-change-monitoring/assets/s5.png
  31. BIN
      src/views/power-change-monitoring/assets/status0.png
  32. BIN
      src/views/power-change-monitoring/assets/status1.png
  33. BIN
      src/views/power-change-monitoring/assets/status2.png
  34. BIN
      src/views/power-change-monitoring/assets/status3.png
  35. BIN
      src/views/power-change-monitoring/assets/statusbg.png
  36. BIN
      src/views/power-change-monitoring/assets/yellow.png
  37. BIN
      src/views/power-change-monitoring/assets/yewu1.png
  38. BIN
      src/views/power-change-monitoring/assets/yewu2.png
  39. BIN
      src/views/power-change-monitoring/assets/yewu3.png
  40. BIN
      src/views/power-change-monitoring/assets/yewu4.png
  41. BIN
      src/views/power-change-monitoring/assets/yewu5.png
  42. BIN
      src/views/power-change-monitoring/assets/zhong.png
  43. 2 2
      src/views/power-change-monitoring/components/BatteryInfo.vue
  44. 79 83
      src/views/power-change-monitoring/index.scss
  45. 1 0
      src/views/power-change-monitoring/index.vue

+ 3 - 0
.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'

+ 38 - 9
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

+ 8 - 1
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>

+ 8 - 0
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>

+ 8 - 1
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>

+ 0 - 1
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() {

+ 1 - 1
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;

BIN
src/views/login/assets/index.png


BIN
src/views/login/assets/login-bg.png


BIN
src/views/login/assets/login.png


BIN
src/views/login/assets/logo.png


+ 166 - 49
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;

BIN
src/views/power-change-monitoring/assets/battery-anim.gif


BIN
src/views/power-change-monitoring/assets/battery.png


BIN
src/views/power-change-monitoring/assets/car1x.png


BIN
src/views/power-change-monitoring/assets/ding.png


BIN
src/views/power-change-monitoring/assets/edit.png


BIN
src/views/power-change-monitoring/assets/green.png


BIN
src/views/power-change-monitoring/assets/jiantou.gif


BIN
src/views/power-change-monitoring/assets/lightbg.png


BIN
src/views/power-change-monitoring/assets/nostatus.png


BIN
src/views/power-change-monitoring/assets/refresh.png


BIN
src/views/power-change-monitoring/assets/s1-active.png


BIN
src/views/power-change-monitoring/assets/s1.png


BIN
src/views/power-change-monitoring/assets/s2-active.png


BIN
src/views/power-change-monitoring/assets/s2-link.png


BIN
src/views/power-change-monitoring/assets/s2.png


BIN
src/views/power-change-monitoring/assets/s3-active.png


BIN
src/views/power-change-monitoring/assets/s3.png


BIN
src/views/power-change-monitoring/assets/s5.png


BIN
src/views/power-change-monitoring/assets/status0.png


BIN
src/views/power-change-monitoring/assets/status1.png


BIN
src/views/power-change-monitoring/assets/status2.png


BIN
src/views/power-change-monitoring/assets/status3.png


BIN
src/views/power-change-monitoring/assets/statusbg.png


BIN
src/views/power-change-monitoring/assets/yellow.png


BIN
src/views/power-change-monitoring/assets/yewu1.png


BIN
src/views/power-change-monitoring/assets/yewu2.png


BIN
src/views/power-change-monitoring/assets/yewu3.png


BIN
src/views/power-change-monitoring/assets/yewu4.png


BIN
src/views/power-change-monitoring/assets/yewu5.png


BIN
src/views/power-change-monitoring/assets/zhong.png


+ 2 - 2
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);

+ 79 - 83
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{

+ 1 - 0
src/views/power-change-monitoring/index.vue

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