update login page

src/lang/en.js

@@ -66,7 +66,7 @@ export default {
     test: 'test'
   },
   login: {
-    title: 'Login ',
+    title: 'User Login',
     info: 'Enterprise Development Platform',
     tenantId: 'Please input tenantId',
     username: 'Please input username',

src/lang/zh.js

@@ -66,7 +66,7 @@ export default {
     test: '测试页面'
   },
   login: {
-    title: '登录 ',
+    title: '用户登录',
     info: 'BladeX 企业级开发平台',
     tenantId: '请输入租户ID',
     username: '请输入账号',

src/page/index/top/top-lang.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dropdown trigger="click"
                @command="handleSetLanguage">
-    <i class="icon-zhongyingwen"></i>
+    <img src="@/../public/img/bg/login_CnEn.png" alt="">
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item :disabled="language==='zh'"
                         command="zh">中文

src/page/login/index.vue

@@ -2,31 +2,33 @@
   <div class="login-container"
        ref="login"
        @keyup.enter.native="handleLogin">
-    <top-color v-show="false"></top-color>
-    <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
-        <div class="login-time">
-          {{time}}
+    <div class="login-wrapper animated bounceInDown">
+      <div class="login-bg">
+        <div class="title-box">
+          <div class="icon-box">
+            <img src="@/../public/img/bg/login_logo.png" alt="">
+          </div>
+          <div class="title">后台管理系统</div>
         </div>
-        <img class="img" src="/img/logo.png" alt="">
-        <p class="title">{{ $t('login.info') }}</p>
+        <img class="bg" src="@/../public/img/bg/login_bg.png" alt="">
       </div>
-      <div class="login-border">
-        <div class="login-main">
-          <h4 class="login-title">
-            {{ $t('login.title') }}{{website.title}}
-            <top-lang></top-lang>
-          </h4>
-          <userLogin v-if="activeName==='user'"></userLogin>
-          <codeLogin v-else-if="activeName==='code'"></codeLogin>
-          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
-          <div class="login-menu">
-            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
-            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
-            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
-          </div>
+      <div class="login-main">
+        <div class="time">
+          <img src="@/../public/img/bg/login_time.png" alt="">
+          <span>{{time}}</span>
+        </div>
+        <top-lang class="lang"></top-lang>
+        <h4 class="login-title">
+          {{ $t('login.title') }}
+        </h4>
+        <userLogin v-if="activeName==='user'"></userLogin>
+        <codeLogin v-else-if="activeName==='code'"></codeLogin>
+        <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
+        <div class="login-menu">
+          <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
+          <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
+          <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
         </div>
-
       </div>
     </div>
   </div>
@@ -114,6 +116,6 @@
   };
 </script>
 
-<style lang="scss">
-  @import "@/styles/login.scss";
+<style lang="scss" scoped>
+  @import "~@/styles/login.scss";
 </style>

src/page/login/userlogin.vue

@@ -1,6 +1,5 @@
 <template>
   <el-form class="login-form"
-           status-icon
            :rules="loginRules"
            ref="loginForm"
            :model="loginForm"
@@ -11,7 +10,7 @@
                 v-model="loginForm.tenantId"
                 auto-complete="off"
                 :placeholder="$t('login.tenantId')">
-        <i slot="prefix" class="icon-quanxian"/>
+        <img slot="prefix" src="@/../public/img/bg/login_box_inputIcon1.png" alt="">
       </el-input>
     </el-form-item>
     <el-form-item prop="username">
@@ -20,18 +19,26 @@
                 v-model="loginForm.username"
                 auto-complete="off"
                 :placeholder="$t('login.username')">
-        <i slot="prefix" class="icon-yonghu"/>
+        <img slot="prefix" src="@/../public/img/bg/login_box_inputIcon2.png" alt="">
       </el-input>
     </el-form-item>
-    <el-form-item prop="password">
+    <el-form-item prop="password" class="pwd-input">
       <el-input size="small"
                 @keyup.enter.native="handleLogin"
                 :type="passwordType"
                 v-model="loginForm.password"
                 auto-complete="off"
                 :placeholder="$t('login.password')">
-        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
-        <i slot="prefix" class="icon-mima"/>
+        <img slot="prefix" src="@/../public/img/bg/login_box_inputIcon3.png" alt="">
+        <img
+          slot="suffix"
+          style="margin-right: 16px"
+          src="@/../public/img/bg/login_box_inputIcon5.png"
+          @click="showPassword" alt="">
+        <img
+          slot="suffix"
+          src="@/../public/img/bg/login_box_inputIcon6.png"
+          @click="showPassword" alt="">
       </el-input>
     </el-form-item>
     <el-form-item v-if="this.website.captchaMode" prop="code">
@@ -42,7 +49,7 @@
                     v-model="loginForm.code"
                     auto-complete="off"
                     :placeholder="$t('login.code')">
-            <i slot="prefix" class="icon-yanzhengma"/>
+            <img slot="prefix" src="@/../public/img/bg/login_box_inputIcon4.png" alt="">
           </el-input>
         </el-col>
         <el-col :span="8">
@@ -54,11 +61,7 @@
       </el-row>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary"
-                 size="small"
-                 @click.native.prevent="handleLogin"
-                 class="login-submit">{{$t('login.submit')}}
-      </el-button>
+      <el-button type="primary" @click.native.prevent="handleLogin" plain class="login-submit">{{$t('login.submit')}}</el-button>
     </el-form-item>
     <el-dialog title="用户信息选择"
                append-to-body
@@ -263,5 +266,30 @@
   };
 </script>
 
-<style>
+<style lang="scss" scoped>
+::v-deep .el-input {
+
+  border-bottom: 1px solid #F4F4F4;
+}
+::v-deep .el-input__inner {
+  border: 0;
+  box-sizing: border-box;
+  padding-left: 42px;
+}
+.pwd-input ::v-deep .el-input__inner {
+  padding-right: 80px;
+}
+.login-submit {
+  width: 100%;
+  height: 45px;
+  border: 1px solid #409EFF;
+  background: none;
+  font-size: 18px;
+  letter-spacing: 2px;
+  font-weight: 300;
+  color: #409EFF;
+  cursor: pointer;
+  font-family: "neo";
+  transition: 0.25s;
+}
 </style>

src/styles/login.scss

@@ -1,85 +1,84 @@
 .login-container {
-  display: flex;
-  align-items: center;
-  position: relative;
   width: 100%;
   height: 100%;
-  margin: 0 auto;
-  background-image: url("/img/bg/bg.jpg");
-  background-size: 100% 100%;
+  display: block;
+  background: linear-gradient(to right, #06D2FF, #6F2BFF);
 }
 
-.login-weaper {
-  margin: 0 auto;
-  width: 1000px;
-  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
-
-  .el-input-group__append {
-    border: none;
-  }
-}
-
-.login-left,
-.login-border {
-  position: relative;
-  min-height: 500px;
-  align-items: center;
+.login-wrapper {
   display: flex;
-}
-
-.login-left {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
+  align-items: center;
   justify-content: center;
-  flex-direction: column;
-  background-color: #409EFF;
-  color: #fff;
-  float: left;
-  width: 50%;
-  position: relative;
-}
-
-.login-left .img {
-  width: 140px;
+  padding-top: 240px;
+  .login-bg {
+    position: relative;
+    .title-box {
+      position: absolute;
+      left: -55px;
+      top: -99px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .icon-box {
+        width: 72px;
+        height: 72px;
+        border-radius: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #fff;
+      }
+      .title {
+        font-size: 32px;
+        color: #fff;
+        margin-left: 20px;
+      }
+    }
+  }
+  .login-main {
+    width: 500px;
+    height: 600px;
+    position: relative;
+    margin-left: 206px;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 20px;
+    position: relative;
+    .lang {
+      position: absolute;
+      right: 36px;
+      top: 36px;
+    }
+    .login-title {
+      color: #353535;
+      margin: 50px 0 60px;
+      font-weight: bold;
+      font-size: 30px;
+      text-align: center;
+      letter-spacing: 4px;
+    }
+    .time {
+      position: absolute;
+      top: -65px;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span {
+        font-size: 20px;
+        color: #fff;
+        margin-left: 15px;
+      }
+    }
+  }
 }
 
-.login-time {
-  position: absolute;
-  left: 25px;
-  top: 25px;
-  width: 100%;
-  color: #fff;
-  font-weight: 200;
-  opacity: 0.9;
-  font-size: 18px;
-  overflow: hidden;
-}
 
-.login-left .title {
-  margin-top: 60px;
-  text-align: center;
-  color: #fff;
-  font-weight: 300;
-  letter-spacing: 2px;
-  font-size: 25px;
-}
 
-.login-border {
-  border-left: none;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  color: #fff;
-  background-color: #fff;
-  width: 50%;
-  float: left;
-  box-sizing: border-box;
-}
 
-.login-main {
-  margin: 0 auto;
-  width: 65%;
-  box-sizing: border-box;
-}
 
 .login-main > h3 {
   margin-bottom: 20px;
@@ -89,17 +88,8 @@
   color: #76838f;
 }
 
-.login-title {
-  color: #333;
-  margin-bottom: 40px;
-  font-weight: 500;
-  font-size: 22px;
-  text-align: center;
-  letter-spacing: 4px;
-}
 
 .login-menu {
-  margin-top: 40px;
   width: 100%;
   text-align: center;
 
@@ -109,22 +99,6 @@
     margin: 0px 8px;
   }
 }
-
-.login-submit {
-  width: 100%;
-  height: 45px;
-  border: 1px solid #409EFF;
-  background: none;
-  font-size: 18px;
-  letter-spacing: 2px;
-  font-weight: 300;
-  color: #409EFF;
-  cursor: pointer;
-  margin-top: 30px;
-  font-family: "neo";
-  transition: 0.25s;
-}
-
 .login-form {
   margin: 10px 0;