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,211 +13,265 @@
     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);
+  }
+}
+
+.m-fm {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  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;
+    }
   }
-  .aui-content {
+
-    display: flex;
+  .title {
-    flex-flow: column wrap;
+    margin: 0 auto;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    padding: 50px 20px 150px;
     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);
+    }
+
+    100% {
+      transform: translateX(0px);
     }
   }
-  .login-header {
+  @keyframes decorationRight {
-    padding: 20px;
+    0% {
-    color: #fff;
+      transform: translateX(-100px);
-    .login-brand {
+    }
-      margin: 0 0 15px;
+
-      font-size: 40px;
+    100% {
-      font-weight: 400;
+      transform: translateX(0px);
-      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;
-        }
-      }
     }
   }
-  .login-body,
+
-  .login-footer {
+  .decoration {
-    width: 460px;
+    .i-left {
+      position: absolute;
+      left: 0;
+      top: 70px;
+      width: 54px;
+      height: 377px;
+      animation: decorationLeft 0.33s ease-out;
+    }
+    .i-right {
+      position: absolute;
+      right: 0;
+      top: 70px;
+      width: 54px;
+      height: 377px;
+      animation: decorationRight 0.33s ease-out;
+    }
   }
-  .login-body {
+
-    padding: 20px 30px;
+  @keyframes fm {
-    background-color: #fff;
+    0% {
-    .login-title {
+      transform: scale(50%);
-      font-size: 18px;
+      opacity: 0.3;
-      font-weight: 400;
     }
-    .el-input__prefix .el-input__icon {
+
-      font-size: 16px;
+    100% {
+      transform: scale(100%);
+      opacity: 1;
     }
-    .login-captcha {
+  }
-      height: $--input-height;
+
-      line-height: $--input-height -2px;
+  .fm {
-      > img {
+    box-sizing: border-box;
-        max-width: 100%;
+    margin: -30px auto 0;
-        cursor: pointer;
+    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 {
+      .ico {
-      margin-bottom: 20px;
-      &__title {
         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;
         }
       }
-    }
+
-    .login-guide {
+      .captcha {
-      color: rgba(0, 0, 0, 0.3);
+        position: relative;
-    }
+        margin-left: auto;
-  }
+        width: 105px;
-  .login-footer {
+        height: 38px;
-    position: absolute;
+
-    bottom: 0;
+        img {
-    padding: 20px;
+          display: block;
-    color: rgba(255, 255, 255, 0.6);
+          width: 100%;
-    p {
+          height: 100%;
-      margin: 10px 0;
+          background-color: #eee;
-    }
+          border: none;
-    a {
+        }
-      padding: 0 5px;
-      color: rgba(255, 255, 255, 0.6);
-      &:focus,
-      &:hover {
-        color: #fff;
       }
     }
-  }
+
-  // 右侧垂直风格
+    .fm-btn {
-  &--right-vertical {
+      box-sizing: border-box;
-    .aui-content {
+      margin: 0 auto;
-      flex-flow: row nowrap;
+      margin-top: 30px;
-      justify-content: flex-start;
+      width: 255px;
-      align-items: stretch;
+      height: 38px;
-      padding: 0;
+      background: linear-gradient(0deg, #0061ff 0%, #0096ff 100%);
-    }
+      border-radius: 2px;
-    .login-header {
+      line-height: 38px;
-      flex: 1;
+      font-size: 20px;
-      display: flex;
+      font-weight: 500;
-      flex-flow: column wrap;
+      color: #ffffff;
-      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 {
+      cursor: pointer;
-        margin-top: 0;
-      }
-    }
-    .login-footer {
-      right: 0;
-      color: $--color-text-regular;
-      a {
-        color: $--color-text-regular;
-        &:focus,
-        &:hover {
-          color: $--color-primary;
-        }
-      }
     }
   }
 }
-@media (max-width: 991px) {
+
-  .aui-page__login {
+.m-footer {
-    &--right-vertical {
+  position: absolute;
-      .login-header {
+  bottom: 0;
-        padding: 30px;
+  left: 0;
-      }
+  right: 0;
-    }
+  padding: 20px;
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
+  p {
+    margin: 10px 0;
   }
-}
+  a {
-@media (max-width: 767px) {
+    padding: 0 5px;
-  .aui-page__login {
+    color: rgba(255, 255, 255, 0.6);
-    &--right-vertical {
+    &:focus,
-      .login-header {
+    &:hover {
-        .login-brand,
+      color: #fff;
-        .login-intro {
-          display: none;
-        }
-      }
     }
   }
 }
-@media (max-width: 575px) {
+
-  .aui-page__login {
+.m-pop {
-    .login-body,
+  height: auto;
-    .login-footer {
+
-      width: 100%;
+  .div_row {
-    }
+    height: 50px;
-    .login-captcha {
+    text-align: center;
-      text-align: left;
+    line-height: 50px;
-      > img {
+
-        width: 136px;
+    &:hover {
-      }
+      color: rgb(2, 119, 173);
+      font-weight: bold;
+      text-decoration: underline;
     }
-    &--right-vertical {
+
-      .login-header {
+    .i_icon {
-        display: none;
+      width: 15px;
-      }
+      height: 15px;
+      margin-right: 10px;
+      float: left;
+    }
+    .span_name {
+      font-size: 18px;
+      cursor: pointer;
+      /* color: rgb(37, 156, 235); */
     }
   }
 }

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,61 +2,65 @@
   <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>
-          <h2 class="title">{{ $t("brand.work") }}</h2>
+        <div class="decoration">
-          <div class="fm">
+          <img src="@/assets/imgs/login/big-arrow-left.png" class="i-left" />
-            <el-form
+          <img src="@/assets/imgs/login/big-arrow-right.png" class="i-right" />
-              :model="dataForm"
+        </div>
-              :rules="dataRule"
+        <div class="fm">
-              ref="dataForm"
+          <el-form
-              @keyup.enter.native="dataFormSubmitHandle()"
+            :model="dataForm"
-              status-icon
+            :rules="dataRule"
-            >
+            ref="dataForm"
-              <div class="fm-item">
+            @keyup.enter.native="dataFormSubmitHandle()"
-                <div class="ico">
+            status-icon
-                  <img src="@/assets/img/login/zhanghao.png" alt="" />
+          >
-                </div>
+            <div class="fm-item">
-                <el-form-item prop="phone" class="input">
+              <div class="ico">
-                  <input
+                <img src="@/assets/imgs/login/i-people.png" alt="" />
-                    type="text"
+              </div>
-                    v-model="dataForm.phone"
+              <el-form-item prop="phone" class="input">
-                    placeholder="账号"
+                <input
-                  />
+                  type="text"
-                </el-form-item>
+                  v-model="dataForm.phone"
+                  placeholder="账号"
+                />
+              </el-form-item>
+            </div>
+            <div class="fm-item">
+              <div class="ico">
+                <img src="@/assets/imgs/login/i-lock.png" alt="" />
               </div>
+              <el-form-item prop="password" class="input">
+                <input
+                  type="password"
+                  v-model="dataForm.password"
+                  :placeholder="$t('login.password')"
+                />
+              </el-form-item>
+            </div>
+            <div class="fm-captcha">
               <div class="fm-item">
                 <div class="ico">
-                  <img src="@/assets/img/login/mima.png" alt="" />
+                  <img src="@/assets/imgs/login/i-code.png" alt="" />
                 </div>
-                <el-form-item prop="password" class="input">
+                <el-form-item prop="captcha" class="input">
                   <input
-                    type="password"
+                    type="text"
-                    v-model="dataForm.password"
+                    v-model="dataForm.captcha"
-                    :placeholder="$t('login.password')"
+                    placeholder="验证码"
                   />
                 </el-form-item>
               </div>
-              <div class="fm-captcha">
+              <div class="captcha">
-                <div class="fm-item">
+                <img :src="captchaPath" @click="getCaptcha()" />
-                  <el-form-item prop="captcha" class="input">
-                    <input
-                      type="text"
-                      v-model="dataForm.captcha"
-                      placeholder="验证码"
-                    />
-                  </el-form-item>
-                </div>
-                <div class="captcha">
-                  <img :src="captchaPath" @click="getCaptcha()" />
-                </div>
               </div>
+            </div>
 
-              <div class="fm-btn" @click="dataFormSubmitHandle()">
+            <div class="fm-btn" @click="dataFormSubmitHandle()">
-                {{ $t("login.title") }}
+              {{ $t("login.title") }}
-              </div>
+            </div>
-              <div class="hint">请使用小程序端的账号密码登录</div>
+          </el-form>
-            </el-form>
-          </div>
         </div>
       </div>
 
@@ -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>