调整社交登录界面，和登录界面保持统一

YunaiV
1 parent d0cd4403
Showing 2 changed files with 64 additions and 88 deletions
yudao-ui-admin/src/views/login.vue
yudao-ui-admin/src/views/socialLogin.vue
@@ -82,6 +82,7 @@
                 </el-button>
               </el-form-item>
  
+              <!--  社交登录 -->
              <el-form-item style="width:100%;">
                   <div class="oauth-login" style="display:flex">
                     <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
@@ -90,11 +91,7 @@
                     </div>
                 </div>
               </el-form-item>
-
-
             </el-form>
-            
-              
           </div>
         </div>
       </div>
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">绑定账号</h3>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          <span v-if="!loading">提 交</span>
-          <span v-else>提 交 中...</span>
-        </el-button>
-      </el-form-item>
+  <div class="container">
+    <div class="logo"></div>
+    <!-- 登录区域 -->
+    <div class="content">
+      <!-- 配图 -->
+      <div class="pic"></div>
+      <!-- 表单 -->
+      <div class="field">
+        <!-- [移动端]标题 -->
+        <h2 class="mobile-title">
+          <h3 class="title">芋道后台管理系统</h3>
+        </h2>
  
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
+        <!-- 表单 -->
+        <div class="form-cont">
+          <el-tabs class="form" v-model="loginForm.loginType " style=" float:none;">
+            <el-tab-pane label="绑定账号" name="uname">
+            </el-tab-pane>
+          </el-tabs>
+          <div>
+            <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
+              <!-- 账号密码登录 -->
+              <el-form-item prop="username">
+                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+                  <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+                          @keyup.enter.native="handleLogin">
+                  <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="code" v-if="captchaEnable">
+                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
+                          @keyup.enter.native="handleLogin">
+                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
+                </el-input>
+                <div class="login-code">
+                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+                </div>
+              </el-form-item>
+              <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
+              <!-- 下方的登录按钮 -->
+              <el-form-item style="width:100%;">
+                <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+                           @click.native.prevent="handleLogin">
+                  <span v-if="!loading">登 录</span>
+                  <span v-else>登 录 中...</span>
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- footer -->
+    <div class="footer">
+      Copyright © 2020-2022 iocoder.cn All Rights Reserved.
     </div>
   </div>
 </template>
@@ -36,6 +71,7 @@ export default {
   data() {
     return {
       loginForm: {
+        loginType: "uname",
         username: "admin",
         password: "admin123",
         rememberMe: false, // TODO 芋艿：后面看情况，去掉这块
@@ -87,10 +123,12 @@ export default {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
       const rememberMe = Cookies.get('rememberMe')
+      const loginType = Cookies.get('loginType');
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        loginType: loginType === undefined ? this.loginForm.loginType : loginType,
       };
     },
     handleLogin() {
@@ -123,64 +161,5 @@ export default {
 </script>
  
 <style rel="stylesheet/scss" lang="scss">
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
-
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
-    }
-  }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-.login-code-img {
-  height: 38px;
-}
+@import "~@/assets/styles/login.scss";
 </style>