Merge branch 'new_web' of http://39.108.172.131:3000/Shannon_mu/SmartCommunity into new_web

login/src/views/Login/index.vue

@@ -432,353 +432,346 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/.el-input__inner {
-    font-family: Microsoft YaHei;
-    height: 48px;
-    line-height: 10px;
-    border-radius: 6px;
-    background: #1d212a;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: #ffffff;
-    font-size: 16px;
-    font-weight: 400;
-    &:focus {
-        border: 1px solid #0eaeff;
-        border-radius: 6px;
-    }
-    // opacity: 0.3;
-}
-/deep/.el-form-item {
-    margin-bottom: 30px;
-}
+@import './style.scss';
+// /deep/.el-input__inner {
+//     font-family: Microsoft YaHei;
+//     height: 48px;
+//     line-height: 10px;
+//     border-radius: 6px;
+//     background: #1d212a;
+//     border: 1px solid rgba(255, 255, 255, 0.3);
+//     color: #ffffff;
+//     font-size: 16px;
+//     font-weight: 400;
+//     &:focus {
+//         border: 1px solid #0eaeff;
+//         border-radius: 6px;
+//     }
+//     // opacity: 0.3;
+// }
+// /deep/.el-form-item {
+//     margin-bottom: 30px;
+// }
 
-/deep/.el-tabs {
-    // position: relative;
-    // position: absolute;
-    // top: 10px;
-    width: 100%;
-    // padding: 0px 30px 30px 30px;
-    // height: 360px;
-    .el-tabs__header {
-        margin: 0;
-    }
-    .el-tabs__content {
-        .el-form .form-item {
-        }
-    }
-    .el-tabs__nav-wrap::after {
-        display: none;
-    }
-    .el-tabs__nav {
-        width: 100%;
-        .el-tabs__bar {
-            height: 0;
-        }
-        .el-tabs__active-bar {
-            background-color: transparent;
-            // background: url(../../assets/img/line_selected.png) no-repeat;
-            // height: 2px;
-            // background: #0EAEFF;
-            // width: 48px !important;
-            // left: 25%;
-            // transform: translateX(-50%) !important;
-            // background-position: center;
-        }
-        .el-tabs__item {
-            width: 50%;
-            color: #ffffff33;
-            text-align: center;
-            padding: 0;
-        }
-        .el-tabs__item.is-active {
-            color: #ffffff;
-            &::after {
-                display: block;
-                content: '';
-                position: absolute;
-                width: 48px;
-                left: 50%;
-                transform: translateX(-50%);
-                height: 2px;
-                background: #0eaeff;
-                bottom: 0;
-            }
-        }
-    }
-}
+// /deep/.el-tabs {
+//     // position: relative;
+//     // position: absolute;
+//     // top: 10px;
+//     width: 100%;
+//     // padding: 0px 30px 30px 30px;
+//     // height: 360px;
+//     .el-tabs__header {
+//         margin: 0;
+//     }
+//     .el-tabs__content {
+//         .el-form .form-item {
+//         }
+//     }
+//     .el-tabs__nav-wrap::after {
+//         display: none;
+//     }
+//     .el-tabs__nav {
+//         width: 100%;
+//         .el-tabs__bar {
+//             height: 0;
+//         }
+//         .el-tabs__active-bar {
+//             background-color: transparent;
+//         }
+//         .el-tabs__item {
+//             width: 50%;
+//             color: #ffffff33;
+//             text-align: center;
+//             padding: 0;
+//         }
+//         .el-tabs__item.is-active {
+//             color: #ffffff;
+//             &::after {
+//                 display: block;
+//                 content: '';
+//                 position: absolute;
+//                 width: 48px;
+//                 left: 50%;
+//                 transform: translateX(-50%);
+//                 height: 2px;
+//                 background: #0eaeff;
+//                 bottom: 0;
+//             }
+//         }
+//     }
+// }
 
-/deep/ .right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after {
-    position: static !important;
-}
+// /deep/ .right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after {
+//     position: static !important;
+// }
 
-// 改版
-// 动画
+// // 改版
+// // 动画
 
-@-webkit-keyframes lightfadeout {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-@keyframes lightfadeout {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-@-webkit-keyframes lightfadeoutleave {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-@keyframes lightfadeoutleave {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}
+// @-webkit-keyframes lightfadeout {
+//     0% {
+//         opacity: 0;
+//     }
+//     100% {
+//         opacity: 1;
+//     }
+// }
+// @keyframes lightfadeout {
+//     0% {
+//         opacity: 0;
+//     }
+//     100% {
+//         opacity: 1;
+//     }
+// }
+// @-webkit-keyframes lightfadeoutleave {
+//     0% {
+//         opacity: 1;
+//     }
+//     100% {
+//         opacity: 0;
+//     }
+// }
+// @keyframes lightfadeoutleave {
+//     0% {
+//         opacity: 1;
+//     }
+//     100% {
+//         opacity: 0;
+//     }
+// }
 
-.login-wrap .logo {
-    position: absolute;
-    top: 120px;
-    left: 130px;
-    margin: 0;
-    opacity: 0;
-    animation-name: lightfadeout;
-    animation-duration: 0.267s;
-    animation-timing-function: linear;
-    animation-delay: 1.267s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-}
-.login-wrap .logo > img {
-    width: 150px;
-    height: 40px;
-}
-.login-wrap .logoleave {
-    opacity: 1;
-    animation-name: lightfadeoutleave;
-    animation-duration: 0.267s;
-    animation-timing-function: linear;
-    animation-delay: 0.3s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-}
-.ms-login1 {
-    opacity: 0;
-    animation-name: lightfadeout;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-delay: 0.5s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-}
-.ms-login1leave {
-    opacity: 1;
-    animation-name: lightfadeoutleave;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-delay: 0.5s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-}
+// .login-wrap .logo {
+//     position: absolute;
+//     top: 120px;
+//     left: 130px;
+//     margin: 0;
+//     opacity: 0;
+//     animation-name: lightfadeout;
+//     animation-duration: 0.267s;
+//     animation-timing-function: linear;
+//     animation-delay: 1.267s;
+//     animation-iteration-count: 1;
+//     animation-fill-mode: forwards;
+// }
+// .login-wrap .logo > img {
+//     width: 150px;
+//     height: 40px;
+// }
+// .login-wrap .logoleave {
+//     opacity: 1;
+//     animation-name: lightfadeoutleave;
+//     animation-duration: 0.267s;
+//     animation-timing-function: linear;
+//     animation-delay: 0.3s;
+//     animation-iteration-count: 1;
+//     animation-fill-mode: forwards;
+// }
+// .ms-login1 {
+//     opacity: 0;
+//     animation-name: lightfadeout;
+//     animation-duration: 0.5s;
+//     animation-timing-function: linear;
+//     animation-delay: 0.5s;
+//     animation-iteration-count: 1;
+//     animation-fill-mode: forwards;
+// }
+// .ms-login1leave {
+//     opacity: 1;
+//     animation-name: lightfadeoutleave;
+//     animation-duration: 0.5s;
+//     animation-timing-function: linear;
+//     animation-delay: 0.5s;
+//     animation-iteration-count: 1;
+//     animation-fill-mode: forwards;
+// }
 
-/deep/.el-input__inner {
-    &::placeholder {
-        font-size: 16px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #ffffff33;
-    }
-}
+// /deep/.el-input__inner {
+//     &::placeholder {
+//         font-size: 16px;
+//         font-family: Microsoft YaHei;
+//         font-weight: 400;
+//         color: #ffffff33;
+//     }
+// }
 
-.prefix-img {
-    height: 18px;
-    position: absolute;
-    top: 15px;
-    padding: 0 10px 0 14px;
-}
-.center-middle {
-    width: 1660px;
-    height: 430px;
-    position: absolute;
-    top: 23%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
+// .prefix-img {
+//     height: 18px;
+//     position: absolute;
+//     top: 15px;
+//     padding: 0 10px 0 14px;
+// }
+// .center-middle {
+//     width: 1660px;
+//     height: 430px;
+//     position: absolute;
+//     top: 23%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+// }
 
-.suffix-img {
-    position: absolute;
-    top: 15px;
-    right: 0;
-    padding: 0 10px 0 14px;
-}
-/deep/.el-input--prefix .el-input__inner {
-    padding-left: 44px;
-}
-.login-wrap .ms-main .form-item .codeImg-item {
-    width: 110px;
-    height: 34px;
-    background: #97a3c1;
-    opacity: 0.8;
-    border-radius: 4px;
-}
-.login-wrap .ms-main .form-item .sms-code {
-    border-left: 1px solid rgba(38, 133, 242, 0.3);
-    padding-left: 26px;
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: rgba(14, 174, 255, 1);
-}
-.login-wrap .ms-main .form-item .sms-code-notime {
-    width: 110px;
-    padding-left: 10px;
-}
-.login-wrap .ms-main .form-item .sms-code-istime {
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 0.4);
-}
-.login-wrap .ms-main .btn {
-    border: none;
-}
+// .suffix-img {
+//     position: absolute;
+//     top: 15px;
+//     right: 0;
+//     padding: 0 10px 0 14px;
+// }
+// /deep/.el-input--prefix .el-input__inner {
+//     padding-left: 44px;
+// }
+// .login-wrap .ms-main .form-item .codeImg-item {
+//     width: 110px;
+//     height: 34px;
+//     background: #97a3c1;
+//     opacity: 0.8;
+//     border-radius: 4px;
+// }
+// .login-wrap .ms-main .form-item .sms-code {
+//     border-left: 1px solid rgba(38, 133, 242, 0.3);
+//     padding-left: 26px;
+//     font-size: 16px;
+//     font-family: Microsoft YaHei;
+//     font-weight: 400;
+//     color: rgba(14, 174, 255, 1);
+// }
+// .login-wrap .ms-main .form-item .sms-code-notime {
+//     width: 110px;
+//     padding-left: 10px;
+// }
+// .login-wrap .ms-main .form-item .sms-code-istime {
+//     font-size: 16px;
+//     font-family: Microsoft YaHei;
+//     font-weight: 400;
+//     color: rgba(255, 255, 255, 0.4);
+// }
+// .login-wrap .ms-main .btn {
+//     border: none;
+// }
 
-.define-el-select {
-    /deep/ .el-input__suffix {
-        display: none;
-    }
-}
-.login-wrap .ms-main .form-item .btn-select {
-    padding: 0 10px 0 20px;
-    pointer-events: none;
-    img {
-        width: 18px;
-        height: 18px;
-    }
-}
-</style>
-<style lang="scss" scoped >
-.login-wrap {
-    min-width: 1280px;
-    width: 100%;
-    height: 100%;
-    background: url(../../assets/img/loginPop/bg.png) center no-repeat;
-    background-size: cover;
-    overflow: hidden;
-    position: relative;
-    .ms-login {
-        position: absolute;
-        top: 50%;
-        right: 215px;
-        transform: translateY(-50%);
-    }
-    .login-title {
-        position: absolute;
-        top: 226px;
-        left: 130px;
-        color: white;
-        font-family: PingFangSC-Semibold;
-        .title-name {
-            font-size: 60px;
-        }
-        .title-lang {
-            font-size: 17.5px;
-            display: inline-block;
-            // margin-left: 60px;
-            // transform: scale(1.35, 0.9);
-            // -ms-transform: scale(1.35, 0.9);
-            // -webkit-transform: scale(1.35, 0.9);
-            // -moz-transform: scale(1.35, 0.9);
-            // -o-transform: scale(1.35, 0.9);
-            margin-left: 30px;
-            transform: scale(1.15, 0.8);
-            -ms-transform: scale(1.15, 0.8);
-            -webkit-transform: scale(1.15, 0.8);
-            -moz-transform: scale(1.15, 0.8);
-            -o-transform: scale(1.15, 0.8);
-        }
-    }
-    .ms-main {
-        width: 400px;
-        border: 1px solid rgba(240, 238, 241, 0.2);
-        border-radius: 10px;
-        opacity: 0.8;
-        height: 468px;
-        background: linear-gradient(0deg, #101327 0%, #29314c 100%);
-        box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.15);
-        .login-topImg,
-        .login-buttonImg {
-            width: 100%;
-            text-align: center;
-        }
-        .login-buttonImg {
-            position: absolute;
-            bottom: 0;
-        }
-        .login-body {
-            padding: 15px 30px 0 30px;
-            .tips {
-                color: #f25050;
-                font-size: 14px;
-                display: inline-block;
-                margin-bottom: 10px;
-            }
-            .btn {
-                width: 100%;
-                background: linear-gradient(-90deg, #0098ef 0%, #0eaeff 100%);
-                border-radius: 6px;
-                height: 48px;
-                font-size: 20px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #ffffff;
-            }
-            .remember {
-                margin-bottom: 30px;
-            }
-        }
-        .form-item {
-            margin: 24px 0;
-            height: 48px;
-            display: flex;
-            align-items: center;
-            position: relative;
-            .codeImg {
-                position: absolute;
-                right: 10px;
-            }
-            .code {
-                border-left: 1px solid #2887f2;
-                height: 20px;
-                line-height: 0px;
-                padding-left: 10px;
-            }
-            .el-select {
-                width: 100%;
-            }
-            .icon {
-                position: absolute;
-                top: 18px;
-                left: 6px;
-            }
-        }
-    }
-}
-.paTop10 {
-    padding-top: 10px;
-}
-.mgTop16 {
-    margin-top: 16px;
-}
+// .define-el-select {
+//     /deep/ .el-input__suffix {
+//         display: none;
+//     }
+// }
+// .login-wrap .ms-main .form-item .btn-select {
+//     padding: 0 10px 0 20px;
+//     pointer-events: none;
+//     img {
+//         width: 18px;
+//         height: 18px;
+//     }
+// }
+
+// .login-wrap {
+//     min-width: 1280px;
+//     width: 100%;
+//     height: 100%;
+//     background: url(../../assets/img/loginPop/bg.png) center no-repeat;
+//     background-size: cover;
+//     overflow: hidden;
+//     position: relative;
+//     .ms-login {
+//         position: absolute;
+//         top: 50%;
+//         right: 215px;
+//         transform: translateY(-50%);
+//     }
+//     .login-title {
+//         position: absolute;
+//         top: 226px;
+//         left: 130px;
+//         color: white;
+//         font-family: PingFangSC-Semibold;
+//         .title-name {
+//             font-size: 60px;
+//         }
+//         .title-lang {
+//             font-size: 17.5px;
+//             display: inline-block;
+//             // margin-left: 60px;
+//             // transform: scale(1.35, 0.9);
+//             // -ms-transform: scale(1.35, 0.9);
+//             // -webkit-transform: scale(1.35, 0.9);
+//             // -moz-transform: scale(1.35, 0.9);
+//             // -o-transform: scale(1.35, 0.9);
+//             margin-left: 30px;
+//             transform: scale(1.15, 0.8);
+//             -ms-transform: scale(1.15, 0.8);
+//             -webkit-transform: scale(1.15, 0.8);
+//             -moz-transform: scale(1.15, 0.8);
+//             -o-transform: scale(1.15, 0.8);
+//         }
+//     }
+//     .ms-main {
+//         width: 400px;
+//         border: 1px solid rgba(240, 238, 241, 0.2);
+//         border-radius: 10px;
+//         opacity: 0.8;
+//         height: 468px;
+//         background: linear-gradient(0deg, #101327 0%, #29314c 100%);
+//         box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.15);
+//         .login-topImg,
+//         .login-buttonImg {
+//             width: 100%;
+//             text-align: center;
+//         }
+//         .login-buttonImg {
+//             position: absolute;
+//             bottom: 0;
+//         }
+//         .login-body {
+//             padding: 15px 30px 0 30px;
+//             .tips {
+//                 color: #f25050;
+//                 font-size: 14px;
+//                 display: inline-block;
+//                 margin-bottom: 10px;
+//             }
+//             .btn {
+//                 width: 100%;
+//                 background: linear-gradient(-90deg, #0098ef 0%, #0eaeff 100%);
+//                 border-radius: 6px;
+//                 height: 48px;
+//                 font-size: 20px;
+//                 font-family: Microsoft YaHei;
+//                 font-weight: 400;
+//                 color: #ffffff;
+//             }
+//             .remember {
+//                 margin-bottom: 30px;
+//             }
+//         }
+//         .form-item {
+//             margin: 24px 0;
+//             height: 48px;
+//             display: flex;
+//             align-items: center;
+//             position: relative;
+//             .codeImg {
+//                 position: absolute;
+//                 right: 10px;
+//             }
+//             .code {
+//                 border-left: 1px solid #2887f2;
+//                 height: 20px;
+//                 line-height: 0px;
+//                 padding-left: 10px;
+//             }
+//             .el-select {
+//                 width: 100%;
+//             }
+//             .icon {
+//                 position: absolute;
+//                 top: 18px;
+//                 left: 6px;
+//             }
+//         }
+//     }
+// }
+// .paTop10 {
+//     padding-top: 10px;
+// }
+// .mgTop16 {
+//     margin-top: 16px;
+// }
 </style>

login/src/views/Login/style.scss

@@ -0,0 +1,345 @@
+$base_fontSize: 100;
+@function rem($px) {
+  @return $px / $base_fontSize * 1rem;
+}
+
+/deep/.el-input__inner {
+  font-family: Microsoft YaHei;
+  height: rem(48);
+  line-height: rem(10);
+  border-radius: rem(6);
+  background: #1d212a;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #ffffff;
+  font-size: rem(16);
+  font-weight: 400;
+  &:focus {
+    border: 1px solid #0eaeff;
+    border-radius: rem(6);
+  }
+  // opacity: 0.3;
+}
+/deep/.el-form-item {
+  margin-bottom: rem(30);
+}
+
+/deep/.el-tabs {
+  width: 100%;
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-tabs__content {
+    .el-form .form-item {
+    }
+  }
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  .el-tabs__nav {
+    width: 100%;
+    .el-tabs__bar {
+      height: 0;
+    }
+    .el-tabs__active-bar {
+      background-color: transparent;
+      // background: url(../../assets/img/line_selected.png) no-repeat;
+      // height: rem(2);
+      // background: #0EAEFF;
+      // width: rem(48) !important;
+      // left: 25%;
+      // transform: translateX(-50%) !important;
+      // background-position: center;
+    }
+    .el-tabs__item {
+      width: 50%;
+      color: #ffffff33;
+      text-align: center;
+      padding: 0;
+    }
+    .el-tabs__item.is-active {
+      color: #ffffff;
+      &::after {
+        display: block;
+        content: "";
+        position: absolute;
+        width: rem(48);
+        left: 50%;
+        transform: translateX(-50%);
+        height: rem(2);
+        background: #0eaeff;
+        bottom: 0;
+      }
+    }
+  }
+}
+
+/deep/ .right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after {
+  position: static !important;
+}
+
+// 改版
+// 动画
+
+@-webkit-keyframes lightfadeout {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes lightfadeout {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes lightfadeoutleave {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes lightfadeoutleave {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.login-wrap .logo {
+  position: absolute;
+  top: rem(120);
+  left: rem(130);
+  margin: 0;
+  opacity: 0;
+  animation-name: lightfadeout;
+  animation-duration: 0.267s;
+  animation-timing-function: linear;
+  animation-delay: 1.267s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.login-wrap .logo > img {
+  width: rem(150);
+  height: rem(40);
+}
+.login-wrap .logoleave {
+  opacity: 1;
+  animation-name: lightfadeoutleave;
+  animation-duration: 0.267s;
+  animation-timing-function: linear;
+  animation-delay: 0.3s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.ms-login1 {
+  opacity: 0;
+  animation-name: lightfadeout;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-delay: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.ms-login1leave {
+  opacity: 1;
+  animation-name: lightfadeoutleave;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-delay: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+/deep/.el-input__inner {
+  &::placeholder {
+    font-size: rem(16);
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff33;
+  }
+}
+
+.prefix-img {
+  height: rem(18);
+  position: absolute;
+  top: rem(15);
+  padding: 0 rem(10) 0 rem(14);
+}
+.center-middle {
+  width: rem(1660);
+  height: rem(430);
+  position: absolute;
+  top: 23%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.suffix-img {
+  position: absolute;
+  top: rem(15);
+  right: 0;
+  padding: 0 rem(10) 0 rem(14);
+}
+/deep/.el-input--prefix .el-input__inner {
+  padding-left: rem(44);
+}
+.login-wrap .ms-main .form-item .codeImg-item {
+  width: rem(110);
+  height: rem(34);
+  background: #97a3c1;
+  opacity: 0.8;
+  border-radius: rem(4);
+}
+.login-wrap .ms-main .form-item .sms-code {
+  border-left: 1px solid rgba(38, 133, 242, 0.3);
+  padding-left: rem(26);
+  font-size: rem(16);
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(14, 174, 255, 1);
+}
+.login-wrap .ms-main .form-item .sms-code-notime {
+  width: rem(110);
+  padding-left: rem(10);
+}
+.login-wrap .ms-main .form-item .sms-code-istime {
+  font-size: rem(16);
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.4);
+}
+.login-wrap .ms-main .btn {
+  border: none;
+}
+
+.define-el-select {
+  /deep/ .el-input__suffix {
+    display: none;
+  }
+}
+.login-wrap .ms-main .form-item .btn-select {
+  padding: 0 rem(10) 0 rem(20);
+  pointer-events: none;
+  img {
+    width: rem(18);
+    height: rem(18);
+  }
+}
+
+.login-wrap {
+  min-width: rem(1280);
+  width: 100%;
+  height: 100%;
+  background: url(../../assets/img/loginPop/bg.png) center no-repeat;
+  background-size: cover;
+  overflow: hidden;
+  position: relative;
+  .ms-login {
+    position: absolute;
+    top: 50%;
+    right: rem(215);
+    transform: translateY(-50%);
+  }
+  .login-title {
+    position: absolute;
+    top: rem(226);
+    left: rem(130);
+    color: white;
+    font-family: PingFangSC-Semibold;
+    .title-name {
+      font-size: rem(60);
+    }
+    .title-lang {
+      font-size: rem(17.5);
+      display: inline-block;
+      margin-left: rem(30);
+      transform: scale(1.15, 0.8);
+      -ms-transform: scale(1.15, 0.8);
+      -webkit-transform: scale(1.15, 0.8);
+      -moz-transform: scale(1.15, 0.8);
+      -o-transform: scale(1.15, 0.8);
+    }
+  }
+  .ms-main {
+    width: rem(400);
+    border: 1px solid rgba(240, 238, 241, 0.2);
+    border-radius: rem(10);
+    opacity: 0.8;
+    height: rem(468);
+    background: linear-gradient(0deg, #101327 0%, #29314c 100%);
+    box-shadow: 0px rem(10) rem(80) 0px rgba(0, 0, 0, 0.15);
+    .login-topImg,
+    .login-buttonImg {
+      width: rem(378);
+      text-align: center;
+      img {
+        width: 100%;
+      }
+    }
+    .login-buttonImg {
+      position: absolute;
+      bottom: 0;
+    }
+    .login-body {
+      padding: rem(15) rem(30) 0 rem(30);
+      .tips {
+        color: #f25050;
+        font-size: rem(14);
+        display: inline-block;
+        margin-bottom: rem(10);
+      }
+      .btn {
+        width: 100%;
+        background: linear-gradient(-90deg, #0098ef 0%, #0eaeff 100%);
+        border-radius: rem(6);
+        height: rem(48);
+        font-size: rem(20);
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #ffffff;
+      }
+      .remember {
+        margin-bottom: rem(30);
+      }
+    }
+    .form-item {
+      margin: rem(24) 0;
+      height: rem(48);
+      display: flex;
+      align-items: center;
+      position: relative;
+      .codeImg {
+        position: absolute;
+        right: rem(10);
+      }
+      .code {
+        border-left: 1px solid #2887f2;
+        height: rem(20);
+        line-height: 0px;
+        padding-left: rem(10);
+      }
+      .el-select {
+        width: 100%;
+      }
+      .icon {
+        position: absolute;
+        top: rem(18);
+        left: rem(6);
+      }
+    }
+  }
+}
+.paTop10 {
+  padding-top: rem(10);
+}
+.mgTop16 {
+  margin-top: rem(16);
+}

login/src/views/NewNav/index.vue

@@ -212,324 +212,293 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.nav-wrap {
-    width: 100%;
-    height: 100%;
-    min-width: 1500px;
-    background: linear-gradient(0deg, #000000 0%, #132037 100%);
-    overflow: hidden;
-    position: relative;
-    .top {
-        position: relative;
-        z-index: 101;
-        padding-top: 67px;
-        .lfet-right {
-            padding: 0 100px 0 100px;
-            display: flex;
-            justify-content: space-between;
-            text-align: center;
-            position: relative;
-            top: -25px;
-            .tenantName {
-                color: RGBA(254, 254, 254, 1);
-                padding: 0 20px;
-                height: 49px;
-                line-height: 49px;
-                font-size: 20px;
-                box-sizing: border-box;
-                border: 1px solid RGBA(71, 81, 98, 1);
-                border-radius: 10px;
-                margin-right: 20px;
-                cursor: pointer;
-            }
-        }
-    }
-    .logo {
-        width: 120px;
-        height: 36px;
-        background: url(../../assets/img/nav/logo.png);
-        background-size: 100% 100%;
-        z-index: 11;
-    }
-    .logout {
-        width: 49px;
-        height: 49px;
-        background: url(../../assets/img/btn_switch.png);
-        background-size: 100% 100%;
-        z-index: 11;
-    }
+@import './style.scss';
+// .nav-wrap {
+//     width: 100%;
+//     height: 100%;
+//     // min-width: 1500px;
+//     background: linear-gradient(0deg, #000000 0%, #132037 100%);
+//     overflow: hidden;
+//     position: relative;
+//     .top {
+//         position: relative;
+//         z-index: 101;
+//         padding-top: 67px;
+//         .lfet-right {
+//             padding: 0 100px 0 100px;
+//             display: flex;
+//             justify-content: space-between;
+//             text-align: center;
+//             position: relative;
+//             top: -25px;
+//             .tenantName {
+//                 color: RGBA(254, 254, 254, 1);
+//                 padding: 0 20px;
+//                 height: 49px;
+//                 line-height: 49px;
+//                 font-size: 20px;
+//                 box-sizing: border-box;
+//                 border: 1px solid RGBA(71, 81, 98, 1);
+//                 border-radius: 10px;
+//                 margin-right: 20px;
+//                 cursor: pointer;
+//             }
+//         }
+//     }
+//     .logo {
+//         width: 120px;
+//         height: 36px;
+//         background: url(../../assets/img/nav/logo.png);
+//         background-size: 100% 100%;
+//         z-index: 11;
+//     }
+//     .logout {
+//         width: 49px;
+//         height: 49px;
+//         background: url(../../assets/img/btn_switch.png);
+//         background-size: 100% 100%;
+//         z-index: 11;
+//     }
 
-    .top_png {
-        // position: absolute;
-        // z-index: 100;
-        // top: 67px;
-        // left: 50%;
-        width: 100%;
-        width: 1458px;
-        margin: auto;
-        height: 58px;
-        // transform: translateX(-50%);
-        animation-name: opacityAni;
-        background: url(../../assets/img/nav/img_toubu.png);
-        background-size: cover;
-        opacity: 0;
-        animation-delay: 0.668s;
-        animation-duration: 0.834s;
-        animation-fill-mode: forwards;
-        p {
-            font-size: 24px;
-            font-family: PingFang SC;
-            font-weight: 600;
-            color: #ffffff;
-            background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            position: relative;
-            top: -10px;
-            text-align: center;
-        }
-    }
-    .bottom_png {
-        position: absolute;
-        z-index: 100;
-        bottom: 0;
-        width: 100%;
-        height: 83px;
-        height: 4.3vw;
-        background: #010305;
-        & > span {
-            display: block;
-            width: 100%;
-            height: 83px;
-            height: 4.3vw;
-            animation-name: opacityAni;
-            background: url(../../assets/img/nav/img_dibu.png);
-            background-size: cover;
-            opacity: 0;
-            animation-delay: 0.668s;
-            animation-duration: 0.834s;
-            animation-fill-mode: forwards;
-        }
-    }
-    .bg-earth {
-        position: absolute;
-        width: 1500px;
-        height: 600px;
-        top: 50%;
-        left: 50%;
-        // background: linear-gradient(0deg, #000000 0%, #132037 100%);
-        transform: translate(-50%, -50%);
-        overflow-y: auto;
+//     .top_png {
+//         // position: absolute;
+//         // z-index: 100;
+//         // top: 67px;
+//         // left: 50%;
+//         width: 100%;
+//         width: 1458px;
+//         margin: auto;
+//         height: 58px;
+//         // transform: translateX(-50%);
+//         animation-name: opacityAni;
+//         background: url(../../assets/img/nav/img_toubu.png);
+//         background-size: cover;
+//         opacity: 0;
+//         animation-delay: 0.668s;
+//         animation-duration: 0.834s;
+//         animation-fill-mode: forwards;
+//         p {
+//             font-size: 24px;
+//             font-family: PingFang SC;
+//             font-weight: 600;
+//             color: #ffffff;
+//             background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
+//             -webkit-background-clip: text;
+//             -webkit-text-fill-color: transparent;
+//             position: relative;
+//             top: -10px;
+//             text-align: center;
+//         }
+//     }
+//     .bottom_png {
+//         position: absolute;
+//         z-index: 100;
+//         bottom: 0;
+//         width: 100%;
+//         height: 83px;
+//         height: 4.3vw;
+//         background: #010305;
+//         & > span {
+//             display: block;
+//             width: 100%;
+//             height: 83px;
+//             height: 4.3vw;
+//             animation-name: opacityAni;
+//             background: url(../../assets/img/nav/img_dibu.png);
+//             background-size: cover;
+//             opacity: 0;
+//             animation-delay: 0.668s;
+//             animation-duration: 0.834s;
+//             animation-fill-mode: forwards;
+//         }
+//     }
+//     .bg-earth {
+//         position: absolute;
+//         width: 1500px;
+//         width: 1920 / 1500;
+//         height: 600px;
+//         top: 50%;
+//         left: 50%;
+//         transform: translate(-50%, -50%);
+//         overflow-y: auto;
 
-        &::-webkit-scrollbar {
-            // width: 5px;
-            display: none;
-        }
-        // &::-webkit-scrollbar-track {
-        //     background-color: white;
-        //     border-radius: 10px;
-        // }
-        // &::-webkit-scrollbar-thumb {
-        //     border-radius: 10px;
-        //     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, RGBA(9, 14, 25, 1)));
-        // }
-    }
-    .nav-title {
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        width: 381px;
-        height: 153px;
-        img {
-            width: 150px;
-            height: 40px;
-        }
-        .dot_icon {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: row;
-            margin-top: 10px;
-            p {
-                font-size: 36px;
-                font-weight: 600;
-                font-family: PingFang SC;
-                color: #ffffff;
-                // margin-top: 10px;
-                text-align: center;
-            }
-            .icon-blue-rect {
-                display: inline-block;
-                margin: 0 10px;
-                width: 6px;
-                height: 6px;
-                background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
-                border-radius: 3px;
-                vertical-align: super;
-            }
-        }
-    }
-    .nav-content {
-        height: 100%;
-        display: flex;
-        flex-flow: wrap;
-        .item {
-            width: 480px;
-            height: 180px;
-            background: RGBA(32, 40, 57, 1);
-            margin-left: 30px;
-            margin-top: 30px;
-            border-radius: 10px;
-            border: 1px solid transparent;
-            position: relative;
-            cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            &:nth-child(3n + 1) {
-                margin-left: 0;
-            }
-            &:nth-child(1),
-            &:nth-child(2),
-            &:nth-child(3) {
-                margin-top: 0;
-            }
+//         &::-webkit-scrollbar {
+//             // width: 5px;
+//             display: none;
+//         }
+//         // &::-webkit-scrollbar-track {
+//         //     background-color: white;
+//         //     border-radius: 10px;
+//         // }
+//         // &::-webkit-scrollbar-thumb {
+//         //     border-radius: 10px;
+//         //     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.6, RGBA(9, 14, 25, 1)));
+//         // }
+//     }
+//     .nav-title {
+//         position: absolute;
+//         display: flex;
+//         justify-content: center;
+//         align-items: center;
+//         flex-direction: column;
+//         width: 381px;
+//         height: 153px;
+//         img {
+//             width: 150px;
+//             height: 40px;
+//         }
+//         .dot_icon {
+//             display: flex;
+//             justify-content: center;
+//             align-items: center;
+//             flex-direction: row;
+//             margin-top: 10px;
+//             p {
+//                 font-size: 36px;
+//                 font-weight: 600;
+//                 font-family: PingFang SC;
+//                 color: #ffffff;
+//                 // margin-top: 10px;
+//                 text-align: center;
+//             }
+//             .icon-blue-rect {
+//                 display: inline-block;
+//                 margin: 0 10px;
+//                 width: 6px;
+//                 height: 6px;
+//                 background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
+//                 border-radius: 3px;
+//                 vertical-align: super;
+//             }
+//         }
+//     }
+//     .nav-content {
+//         display: grid;
+//         // 左右距离30 一列3等分
+//         row-gap: 30px;
+//         column-gap: 30px;
+//         grid-template-columns: repeat(3, minmax(0, 1fr));
+//         .item {
+//             width: 480px;
+//             height: 180px;
+//             background: RGBA(32, 40, 57, 1);
+//             border-radius: 10px;
+//             border: 1px solid transparent;
+//             position: relative;
+//             cursor: pointer;
+//             display: flex;
+//             justify-content: space-between;
+//             &:hover {
+//                 border-color: #ffffff;
+//                 .left-label {
+//                     opacity: 1;
+//                 }
+//                 .item-cenText .contents {
+//                     opacity: 1;
+//                     .subtitle {
+//                         color: #0eaeff;
+//                     }
+//                 }
+//                 .right-img {
+//                     opacity: 0.7;
+//                 }
+//                 .img {
+//                     display: none;
+//                 }
+//                 .imghover {
+//                     display: block;
+//                 }
+//             }
+//             .imghover {
+//                 display: none;
+//             }
+//             .item-cenText {
+//                 margin: 43px 0 0 56px;
+//                 display: flex;
+//                 .img,
+//                 .imghover {
+//                     width: 82px;
+//                     height: 92px;
+//                 }
+//                 .contents {
+//                     margin-left: 48px;
+//                     font-size: 24px;
+//                     font-family: Microsoft YaHei;
+//                     font-weight: bold;
+//                     color: #ffffff;
+//                     opacity: 0.8;
+//                     .subtitle {
+//                         font-size: 12px;
+//                         margin-top: 10px;
+//                         color: #748ba8;
+//                         white-space: nowrap;
+//                     }
+//                 }
+//             }
+//             .right-img {
+//                 background: url('../../assets/img/nav/img6.png') no-repeat;
+//                 background-size: cover;
+//                 width: 90px;
+//                 height: 180px;
+//                 opacity: 0.2;
+//             }
 
-            &:hover {
-                border-color: #ffffff;
-                .left-label {
-                    opacity: 1;
-                }
-                .item-cenText .contents {
-                    opacity: 1;
-                    .subtitle {
-                        color: #0eaeff;
-                    }
-                }
-                .right-img {
-                    opacity: 0.7;
-                }
-                .img {
-                    display: none;
-                }
-                .imghover {
-                    display: block;
-                }
-            }
-            .imghover {
-                display: none;
-            }
-            .item-cenText {
-                margin: 43px 0 0 56px;
-                display: flex;
-                .img,
-                .imghover {
-                    width: 82px;
-                    height: 92px;
-                }
-                .contents {
-                    margin-left: 48px;
-                    font-size: 24px;
-                    font-family: Microsoft YaHei;
-                    font-weight: bold;
-                    color: #ffffff;
-                    opacity: 0.8;
-                    .subtitle {
-                        font-size: 12px;
-                        margin-top: 10px;
-                        color: #748ba8;
-                        white-space: nowrap;
-                    }
-                }
-            }
-            .right-img {
-                background: url('../../assets/img/nav/img6.png') no-repeat;
-                background-size: cover;
-                width: 90px;
-                height: 180px;
-                opacity: 0.2;
-            }
+//             .left-label {
+//                 width: 6px;
+//                 height: 50px;
+//                 background: #ffffff;
+//                 opacity: 0.3;
+//                 border-radius: 0px 4px 4px 0px;
+//                 position: absolute;
+//                 left: 0;
+//                 top: 50%;
+//                 transform: translateY(-50%);
+//             }
+//         }
+//         .item.unOwner {
+//             opacity: 0.3;
+//             cursor: no-drop;
+//             animation-name: opacityAni2;
+//             &:hover {
+//                 border-color: transparent;
+//                 .left-label {
+//                     opacity: 0.3;
+//                 }
+//                 .item-cenText .contents {
+//                     opacity: 0.8;
+//                     .subtitle {
+//                         color: #748ba8;
+//                     }
+//                 }
+//                 .right-img {
+//                     opacity: 0.2;
+//                 }
+//                 .img {
+//                     display: block;
+//                 }
+//                 .imghover {
+//                     display: none;
+//                 }
+//             }
+//         }
+//     }
+// }
 
-            .left-label {
-                width: 6px;
-                height: 50px;
-                background: #ffffff;
-                opacity: 0.3;
-                border-radius: 0px 4px 4px 0px;
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
-            }
-        }
-        .item.unOwner {
-            opacity: 0.3;
-            cursor: no-drop;
-            animation-name: opacityAni2;
-            &:hover {
-                border-color: transparent;
-                .left-label {
-                    opacity: 0.3;
-                }
-                .item-cenText .contents {
-                    opacity: 0.8;
-                    .subtitle {
-                        color: #748ba8;
-                    }
-                }
-                .right-img {
-                    opacity: 0.2;
-                }
-                .img {
-                    display: block;
-                }
-                .imghover {
-                    display: none;
-                }
-            }
-        }
-    }
-}
+// @keyframes opacityAni {
+//     0% {
+//         opacity: 0;
+//     }
+//     100% {
+//         opacity: 1;
+//     }
+// }
 
-@keyframes opacityAni {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-@keyframes opacitynewleftAni {
-    0% {
-        opacity: 0;
-        position: absolute;
-        transform: translateX(-50px);
-    }
-    100% {
-        opacity: 1;
-        position: absolute;
-        transform: translateX(0px);
-    }
-}
-@keyframes opacitynewrightAni {
-    0% {
-        opacity: 0;
-        position: absolute;
-        transform: translateX(50px);
-    }
-    100% {
-        opacity: 1;
-        position: absolute;
-        transform: translateX(0px);
-    }
-}
-@keyframes opacityAni2 {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0.3;
-    }
-}
+// @keyframes opacityAni2 {
+//     0% {
+//         opacity: 0;
+//     }
+//     100% {
+//         opacity: 0.3;
+//     }
+// }
 </style>

login/src/views/NewNav/style.scss

@@ -0,0 +1,275 @@
+$base_fontSize: 100;
+@function rem($px) {
+  @return $px / $base_fontSize * 1rem;
+}
+.nav-wrap {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(0deg, #000000 0%, #132037 100%);
+  overflow: hidden;
+  position: relative;
+  .top {
+    position: relative;
+    z-index: 101;
+    padding-top: rem(67);
+    .lfet-right {
+      padding: 0 rem(100) 0 rem(100);
+      display: flex;
+      justify-content: space-between;
+      text-align: center;
+      position: relative;
+      top: rem(-25);
+      .tenantName {
+        color: RGBA(254, 254, 254, 1);
+        padding: 0 rem(20);
+        height: rem(49);
+        line-height: rem(49);
+        font-size: rem(20);
+        box-sizing: border-box;
+        border: 1px solid RGBA(71, 81, 98, 1);
+        border-radius: rem(10);
+        margin-right: rem(20);
+        cursor: pointer;
+      }
+    }
+  }
+  .logo {
+    width: rem(120);
+    height: rem(36);
+    background: url(../../assets/img/nav/logo.png);
+    background-size: 100% 100%;
+    z-index: 11;
+  }
+  .logout {
+    width: rem(49);
+    height: rem(49);
+    background: url(../../assets/img/btn_switch.png);
+    background-size: 100% 100%;
+    z-index: 11;
+  }
+
+  .top_png {
+    width: 100%;
+    width: rem(1458);
+    margin: auto;
+    height: rem(58);
+    // transform: translateX(-50%);
+    animation-name: opacityAni;
+    background: url(../../assets/img/nav/img_toubu.png);
+    background-size: cover;
+    opacity: 0;
+    animation-delay: 0.668s;
+    animation-duration: 0.834s;
+    animation-fill-mode: forwards;
+    p {
+      font-size: rem(24);
+      font-family: PingFang SC;
+      font-weight: 600;
+      color: #ffffff;
+      background: linear-gradient(1deg, #a8c4f5 0%, #ffffff 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+      top: rem(-10);
+      text-align: center;
+    }
+  }
+  .bottom_png {
+    position: absolute;
+    z-index: 100;
+    bottom: 0;
+    width: 100%;
+    height: rem(83);
+    // height: 4.3vw;
+    background: #010305;
+    & > span {
+      display: block;
+      width: 100%;
+      height: rem(83);
+      // height: 4.3vw;
+      animation-name: opacityAni;
+      background: url(../../assets/img/nav/img_dibu.png);
+      background-size: cover;
+      opacity: 0;
+      animation-delay: 0.668s;
+      animation-duration: 0.834s;
+      animation-fill-mode: forwards;
+    }
+  }
+  .bg-earth {
+    position: absolute;
+    width: rem(1500);
+    height: rem(600);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .nav-title {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: rem(381);
+    height: rem(153);
+    img {
+      width: rem(150);
+      height: rem(40);
+    }
+    .dot_icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      margin-top: rem(10);
+      p {
+        font-size: rem(36);
+        font-weight: 600;
+        font-family: PingFang SC;
+        color: #ffffff;
+        text-align: center;
+      }
+      .icon-blue-rect {
+        display: inline-block;
+        margin: 0 rem(10);
+        width: rem(6);
+        height: rem(6);
+        background: linear-gradient(-80deg, #2a68e6 0%, #2887f2 100%);
+        border-radius: rem(6);
+        vertical-align: super;
+      }
+    }
+  }
+  .nav-content {
+    display: grid;
+    // 左右距离30 一列3等分
+    row-gap: rem(30);
+    column-gap: rem(30);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    .item {
+      width: rem(480);
+      height: rem(180);
+      background: RGBA(32, 40, 57, 1);
+      border-radius: rem(10);
+      border: 1px solid transparent;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      &:hover {
+        border-color: #ffffff;
+        .left-label {
+          opacity: 1;
+        }
+        .item-cenText .contents {
+          opacity: 1;
+          .subtitle {
+            color: #0eaeff;
+          }
+        }
+        .right-img {
+          opacity: 0.7;
+        }
+        .img {
+          display: none;
+        }
+        .imghover {
+          display: block;
+        }
+      }
+      .imghover {
+        display: none;
+      }
+      .item-cenText {
+        margin: rem(43) 0 0 rem(56);
+        display: flex;
+        .img,
+        .imghover {
+          width: rem(82);
+          height: rem(92);
+        }
+        .contents {
+          margin-left: rem(48);
+          font-size: rem(24);
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ffffff;
+          opacity: 0.8;
+          .subtitle {
+            font-size: rem(12);
+            margin-top: rem(10);
+            color: #748ba8;
+            white-space: nowrap;
+          }
+        }
+      }
+      .right-img {
+        background: url("../../assets/img/nav/img6.png") no-repeat;
+        background-size: cover;
+        width: rem(90);
+        height: rem(180);
+        opacity: 0.2;
+      }
+
+      .left-label {
+        width: rem(6);
+        height: rem(50);
+        background: #ffffff;
+        opacity: 0.3;
+        border-radius: 0px rem(4) rem(4) 0px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+    .item.unOwner {
+      opacity: 0.3;
+      cursor: no-drop;
+      animation-name: opacityAni2;
+      &:hover {
+        border-color: transparent;
+        .left-label {
+          opacity: 0.3;
+        }
+        .item-cenText .contents {
+          opacity: 0.8;
+          .subtitle {
+            color: #748ba8;
+          }
+        }
+        .right-img {
+          opacity: 0.2;
+        }
+        .img {
+          display: block;
+        }
+        .imghover {
+          display: none;
+        }
+      }
+    }
+  }
+}
+@keyframes opacityAni {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+  }
+}
+
+@keyframes opacityAni2 {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 0.3;
+  }
+}

operationSupport/src/components/common/table.vue

@@ -372,9 +372,9 @@ export default {
                     sums[cols[i]] = values.reduce((prev, curr) => {
                         const value = Number(curr);
                         if (!isNaN(value)) {
-                            return prev + curr;
+                            return parseInt((prev + curr).toFixed(2) * 100);
                         } else {
-                            return prev;
+                            return parseInt(prev.toFixed(2) * 100);
                         }
                     }, 0);
                     sums[cols[i]];