Merge branch 'dev-新版ui' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-新版ui

src/assets/scss/common-dai.scss

@@ -496,7 +496,7 @@ img {
     overflow: hidden;
     transition: width 0.3s;
     background-color: transparent;
-    padding: 8px;
+    padding: 8px 0 8px 8px;
 
     .aui-sidebar_wrap {
         height: 100%;

src/assets/scss/pages/login.scss

@@ -1,4 +1,7 @@
-.aui-page__login {
+@import "~@/assets/scss/c/config.scss";
+@import "~@/assets/scss/c/function.scss";
+
+.g-bd {
   &::before,
   &::after {
     position: absolute;
@@ -10,122 +13,228 @@
     content: "";
   }
   &::before {
-    background-image: url(~@/assets/img/login_bg.jpg);
+    background-image: url(~@/assets/imgs/login/bg.png);
     background-size: cover;
   }
   &::after {
-    background-color: rgba(38, 50, 56, 0.4);
+    // background-color: rgba(38, 50, 56, 0.1);
   }
-  .aui-content {
+}
-    display: flex;
+
-    flex-flow: column wrap;
+.m-fm {
-    justify-content: center;
+  position: absolute;
-    align-items: center;
+  top: 0;
-    min-height: 100vh;
+  bottom: 0;
-    padding: 50px 20px 150px;
+  right: 0;
+  left: 0;
+  margin: auto;
+  width: 650px;
+  height: 500px;
+
+  @keyframes title {
+    0% {
+      transform: translateY(-100px);
+      transform: scale(0%);
+      opacity: 0;
+    }
+
+    50% {
+      transform: translateY(-100px);
+      transform: scale(50%);
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateY(0);
+      transform: scale(100%);
+      opacity: 1;
+    }
+  }
+
+  .title {
+    margin: 0 auto;
     text-align: center;
-    &__wrapper {
+    line-height: 80px;
-      height: 100vh;
+    font-size: 41px;
-      background-color: transparent;
+    font-family: "思源宋体";
-      overflow-x: hidden;
+    font-weight: bold;
-      overflow-y: auto;
+    color: #ffffff;
+    background: linear-gradient(0deg, #0385ff 0%, #ffffff 50%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: title 0.33s * 1.5 ease-out;
   }
+
+  @keyframes decorationLeft {
+    0% {
+      transform: translateX(100px);
     }
-  .login-header {
+
-    padding: 20px;
+    100% {
-    color: #fff;
+      transform: translateX(0px);
-    .login-brand {
-      margin: 0 0 15px;
-      font-size: 40px;
-      font-weight: 400;
-      letter-spacing: 2px;
-      // text-transform: uppercase;
-    }
-    .login-intro {
-      padding: 0;
-      margin: 0;
-      list-style: none;
-      > li {
-        font-size: 16px;
-        line-height: 1.5;
-        color: rgba(255, 255, 255, 0.6);
-        & + li {
-          margin-top: 5px;
     }
   }
+  @keyframes decorationRight {
+    0% {
+      transform: translateX(-100px);
     }
+
+    100% {
+      transform: translateX(0px);
     }
-  .login-body,
-  .login-footer {
-    width: 460px;
   }
-  .login-body {
+
-    padding: 20px 30px;
+  .decoration {
-    background-color: #fff;
+    .i-left {
-    .login-title {
+      position: absolute;
-      font-size: 18px;
+      left: 0;
-      font-weight: 400;
+      top: 70px;
+      width: 54px;
+      height: 377px;
+      animation: decorationLeft 0.33s ease-out;
     }
-    .el-input__prefix .el-input__icon {
+    .i-right {
-      font-size: 16px;
+      position: absolute;
+      right: 0;
+      top: 70px;
+      width: 54px;
+      height: 377px;
+      animation: decorationRight 0.33s ease-out;
     }
-    .login-captcha {
+  }
-      height: $--input-height;
+
-      line-height: $--input-height -2px;
+  @keyframes fm {
-      > img {
+    0% {
-        max-width: 100%;
+      transform: scale(50%);
-        cursor: pointer;
+      opacity: 0.3;
+    }
+
+    100% {
+      transform: scale(100%);
+      opacity: 1;
+    }
+  }
+
+  .fm {
+    box-sizing: border-box;
+    margin: -30px auto 0;
+    padding: 110px 150px 50px;
+    width: 555px;
+    height: 368px;
+    background-image: url(~@/assets/imgs/login/card-bg.png);
+    background-size: cover;
+    animation: fm 0.33s ease-out;
+
+    .fm-item {
+      box-sizing: border-box;
+      margin: 0 auto;
+      margin-bottom: 16px;
+      width: 255px;
+      height: 38px;
+      line-height: 38px;
+      background: #102163;
+      display: flex;
+      align-items: center;
+
+      .input {
+        width: 85%;
+        margin-bottom: 0;
+
+        input {
+          display: block;
+          padding-left: 0;
+          line-height: 38px;
+          height: 38px;
+          width: 100%;
+          border: none;
+          background-color: transparent;
+          color: #fff;
+          font-size: 14px;
+
+          &::placeholder {
+            color: #d7d7d7;
+          }
+          &:active {
+            background-color: transparent;
           }
         }
-    .login-shortcut {
+      }
-      margin-bottom: 20px;
+
-      &__title {
+      .ico {
         position: relative;
-        margin: 0 0 15px;
+        width: 50px;
-        font-weight: 400;
+        height: 38px;
 
-        &::before {
+        img {
           position: absolute;
-          top: 50%;
+          top: 0;
-          right: 0;
           left: 0;
-          z-index: 1;
+          right: 0;
-          content: "";
+          bottom: 0;
-          height: 1px;
+          margin: auto;
-          margin-top: -0.5px;
+          width: 18px;
-          background-color: $--border-color-base;
-          overflow: hidden;
         }
-        > span {
-          position: relative;
-          z-index: 2;
-          padding: 0 20px;
-          color: rgba(0, 0, 0, 0.3);
-          background-color: #fff;
       }
     }
-      &__list {
+
-        padding: 0;
+    .fm-captcha {
+      box-sizing: border-box;
+      margin: 0 auto;
+      margin-bottom: 16px;
+      width: 255px;
+      display: flex;
+      align-items: center;
+
+      .fm-item {
         margin: 0;
-        list-style: none;
+        width: 140px;
-        font-size: 0;
+        .input {
-        > li {
+          width: 70%;
-          display: inline-block;
-          vertical-align: middle;
-          margin: 0 10px;
-          font-size: 28px;
         }
       }
+
+      .captcha {
+        position: relative;
+        margin-left: auto;
+        width: 105px;
+        height: 38px;
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background-color: #eee;
+          border: none;
         }
-    .login-guide {
-      color: rgba(0, 0, 0, 0.3);
       }
     }
-  .login-footer {
+
+    .fm-btn {
+      box-sizing: border-box;
+      margin: 0 auto;
+      margin-top: 30px;
+      width: 255px;
+      height: 38px;
+      background: linear-gradient(0deg, #0061ff 0%, #0096ff 100%);
+      border-radius: 2px;
+      line-height: 38px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #ffffff;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+}
+
+.m-footer {
   position: absolute;
   bottom: 0;
+  left: 0;
+  right: 0;
   padding: 20px;
   color: rgba(255, 255, 255, 0.6);
+  text-align: center;
   p {
     margin: 10px 0;
   }
@@ -137,84 +246,32 @@
       color: #fff;
     }
   }
-  }
+}
-  // 右侧垂直风格
+
-  &--right-vertical {
+.m-pop {
-    .aui-content {
+  height: auto;
-      flex-flow: row nowrap;
+
-      justify-content: flex-start;
+  .div_row {
-      align-items: stretch;
+    height: 50px;
-      padding: 0;
-    }
-    .login-header {
-      flex: 1;
-      display: flex;
-      flex-flow: column wrap;
-      justify-content: center;
-      padding: 30px 120px;
-      text-align: left;
-    }
-    .login-body {
-      position: relative;
-      display: flex;
-      flex-flow: column wrap;
-      justify-content: center;
-      padding: 120px 30px 150px;
     text-align: center;
-      .login-guide {
+    line-height: 50px;
-        margin-top: 0;
+
-      }
-    }
-    .login-footer {
-      right: 0;
-      color: $--color-text-regular;
-      a {
-        color: $--color-text-regular;
-        &:focus,
     &:hover {
-          color: $--color-primary;
+      color: rgb(2, 119, 173);
-        }
+      font-weight: bold;
-      }
+      text-decoration: underline;
-    }
-  }
-}
-@media (max-width: 991px) {
-  .aui-page__login {
-    &--right-vertical {
-      .login-header {
-        padding: 30px;
-      }
     }
+
+    .i_icon {
+      width: 15px;
+      height: 15px;
+      margin-right: 10px;
+      float: left;
     }
-}
+    .span_name {
-@media (max-width: 767px) {
+      font-size: 18px;
-  .aui-page__login {
+      cursor: pointer;
-    &--right-vertical {
+      /* color: rgb(37, 156, 235); */
-      .login-header {
-        .login-brand,
-        .login-intro {
-          display: none;
-        }
-      }
-    }
-  }
-}
-@media (max-width: 575px) {
-  .aui-page__login {
-    .login-body,
-    .login-footer {
-      width: 100%;
-    }
-    .login-captcha {
-      text-align: left;
-      > img {
-        width: 136px;
-      }
-    }
-    &--right-vertical {
-      .login-header {
-        display: none;
-      }
     }
   }
 }

src/assets/scss/pages/loginWork.scss

@@ -1,196 +0,0 @@
-@import "~@/assets/scss/c/config.scss";
-@import "~@/assets/scss/c/function.scss";
-
-.g-bd {
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-    content: "";
-  }
-  &::before {
-    background-image: url(~@/assets/img/login/bg.png);
-    background-size: cover;
-  }
-  &::after {
-    // background-color: rgba(38, 50, 56, 0.1);
-  }
-}
-
-.m-fm {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 13%;
-  margin: auto;
-  width: 484px;
-  height: 429px;
-  background: #ffffff;
-  box-shadow: 0px 5px 10px 0px rgba(213, 225, 238, 0.5);
-  border-radius: 12px 12px 12px 12px;
-
-  .wrap {
-    padding-top: 5px;
-
-    .title {
-      margin: 0 auto;
-      width: 400px;
-      line-height: 80px;
-      border-bottom: 1px solid #d4d4d4;
-      font-size: 34px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #000000;
-      text-align: center;
-    }
-    .fm {
-      padding: 15px 30px;
-
-      .fm-item {
-        box-sizing: border-box;
-        margin: 0 auto;
-        margin-top: 16px;
-        width: 400px;
-        height: 46px;
-        line-height: 46px;
-        border: 1px solid #c6c6c6;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-
-        .input {
-          width: 85%;
-          margin-bottom: 0;
-
-          input {
-            display: block;
-            padding-left: 15px;
-            line-height: 44px;
-            height: 44px;
-            width: 100%;
-            border: none;
-          }
-        }
-
-        .ico {
-          position: relative;
-          width: 35px;
-          height: 46px;
-
-          img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            margin: auto;
-          }
-        }
-      }
-
-      .fm-captcha {
-        box-sizing: border-box;
-        margin: 0 auto;
-        margin-top: 16px;
-        width: 400px;
-        display: flex;
-        align-items: center;
-
-        .fm-item {
-          margin: 0;
-          width: 200px;
-        }
-
-        .captcha {
-          position: relative;
-          margin-left: auto;
-          width: 180px;
-          height: 46px;
-
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            background-color: #eee;
-            border: none;
-          }
-        }
-      }
-
-      .fm-btn {
-        box-sizing: border-box;
-        margin: 0 auto;
-        margin-top: 40px;
-        width: 400px;
-        height: 56px;
-        line-height: 56px;
-        background: linear-gradient(90deg, #1a5afd, #26c4ff);
-        border-radius: 4px;
-        font-size: 23px;
-        font-family: PingFang SC;
-        font-weight: 500;
-        color: #ffffff;
-        text-align: center;
-        cursor: pointer;
-      }
-    }
-    .hint {
-      display: none;
-      padding-left: 40px;
-      color: rgb(255, 80, 80);
-    }
-  }
-}
-
-.m-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 20px;
-  color: rgba(255, 255, 255, 0.6);
-  text-align: center;
-  p {
-    margin: 10px 0;
-  }
-  a {
-    padding: 0 5px;
-    color: rgba(255, 255, 255, 0.6);
-    &:focus,
-    &:hover {
-      color: #fff;
-    }
-  }
-}
-
-.m-pop {
-  height: auto;
-  
-  .div_row {
-    height: 50px;
-    text-align: center;
-    line-height: 50px;
-
-    &:hover {
-      color: rgb(2, 119, 173);
-      font-weight: bold;
-      text-decoration: underline;
-    }
-
-    .i_icon {
-      width: 15px;
-      height: 15px;
-      margin-right: 10px;
-      float: left;
-    }
-    .span_name {
-      font-size: 18px;
-      cursor: pointer;
-      /* color: rgb(37, 156, 235); */
-    }
-  }
-}

src/views/main-content.vue

@@ -329,8 +329,7 @@ export default {
 .g-cnt {
   background: #ffffff;
   border-radius: 3px;
-  margin-top: -30px;
+  margin: -30px 8px 10px;
-  margin-right: 8px;
 
   .m-crumb {
     padding-left: 10px;

src/views/pages/login.vue

@@ -2,8 +2,11 @@
   <div class="g-app">
     <div class="g-bd" v-if="isShowLogin || true">
       <div class="m-fm">
-        <div class="wrap">
         <h2 class="title">{{ $t("brand.work") }}</h2>
+        <div class="decoration">
+          <img src="@/assets/imgs/login/big-arrow-left.png" class="i-left" />
+          <img src="@/assets/imgs/login/big-arrow-right.png" class="i-right" />
+        </div>
         <div class="fm">
           <el-form
             :model="dataForm"
@@ -14,7 +17,7 @@
           >
             <div class="fm-item">
               <div class="ico">
-                  <img src="@/assets/img/login/zhanghao.png" alt="" />
+                <img src="@/assets/imgs/login/i-people.png" alt="" />
               </div>
               <el-form-item prop="phone" class="input">
                 <input
@@ -26,7 +29,7 @@
             </div>
             <div class="fm-item">
               <div class="ico">
-                  <img src="@/assets/img/login/mima.png" alt="" />
+                <img src="@/assets/imgs/login/i-lock.png" alt="" />
               </div>
               <el-form-item prop="password" class="input">
                 <input
@@ -38,6 +41,9 @@
             </div>
             <div class="fm-captcha">
               <div class="fm-item">
+                <div class="ico">
+                  <img src="@/assets/imgs/login/i-code.png" alt="" />
+                </div>
                 <el-form-item prop="captcha" class="input">
                   <input
                     type="text"
@@ -54,11 +60,9 @@
             <div class="fm-btn" @click="dataFormSubmitHandle()">
               {{ $t("login.title") }}
             </div>
-              <div class="hint">请使用小程序端的账号密码登录</div>
           </el-form>
         </div>
       </div>
-      </div>
 
       <div class="m-footer">
         <div class="login-footer">
@@ -296,4 +300,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/pages/loginWork.scss" scoped></style>
+<style lang="scss" src="@/assets/scss/pages/login.scss" scoped></style>