lxd/FlowPacs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV 2022-05-03 17:04:20 +08:00
parent d0cd440380
commit 04f9f97162
2 changed files with 64 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
yudao-ui-admin/src/views/login.vue
View File

@ -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>

147
yudao-ui-admin/src/views/socialLogin.vue
View File

@ -1,28 +1,63 @@
<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>