wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

:style:优化登录页ui

Browse Source
This commit is contained in:
不做码农 2023-09-10 08:13:35 +08:00
parent a6fc1168d7
commit 2c922c5fdd
4 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/login.scss
View File

@ -16,6 +16,7 @@
border-radius: 6px; border-radius: 6px;
width: var(--base-login-width); width: var(--base-login-width);
position: relative; position: relative;
height: 420px;
} }
} }
@ -28,7 +29,7 @@
.login-form { .login-form {
padding: 5px 25px 5px 25px; padding: 5px 25px 5px 25px;
position: relative; position: relative;
height: 250px; // height: 250px;
.input-icon { .input-icon {
height: 30px; height: 30px;
@ -115,6 +116,7 @@
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin-bottom: 20px;
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {

7
src/views/components/Login/phoneLogin.vue
View File

@ -40,7 +40,7 @@
<script setup name="phonelogin"> <script setup name="phonelogin">
import { getCodeImg } from '@/api/system/login' import { getCodeImg } from '@/api/system/login'
import useUserStore from '@/store/modules/user' // import useUserStore from '@/store/modules/user'
const route = useRoute() const route = useRoute()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
@ -98,9 +98,4 @@ getCode()
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/styles/login.scss'; @import '@/assets/styles/login.scss';
.forget-pwd {
color: #ccc;
margin-right: 10px;
cursor: pointer;
}
</style> </style>

20
src/views/login.vue
View File

@ -40,20 +40,20 @@
</div> </div>
</el-form-item> </el-form-item>
<div style="display: flex; justify-content: space-between; align-items: center">
<el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
<span style="font-size: 12px">
<span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span>
<router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
</span>
</div>
<el-form-item style="width: 100%" :style="{ 'margin-top': captchaOnOff == 'off' ? '40px' : '' }"> <el-form-item style="width: 100%" :style="{ 'margin-top': captchaOnOff == 'off' ? '40px' : '' }">
<el-button :loading="loading" size="default" round type="primary" style="width: 100%" @click.prevent="handleLogin"> <el-button :loading="loading" size="default" round type="primary" style="width: 100%" @click.prevent="handleLogin">
<span v-if="!loading">{{ $t('login.btnLogin') }}</span> <span v-if="!loading">{{ $t('login.btnLogin') }}</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
<div style="display: flex; justify-content: space-between; align-items: center">
<el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
<span style="font-size: 12px">
<router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
<span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span>
</span>
</div>
</el-form> </el-form>
<div class="qr-wrap login-form" v-show="loginType == 3"> <div class="qr-wrap login-form" v-show="loginType == 3">
<div class="login-scan-container"> <div class="login-scan-container">
@ -258,8 +258,10 @@ getCookie()
@import '@/assets/styles/login.scss'; @import '@/assets/styles/login.scss';
.forget-pwd { .forget-pwd {
color: #ccc; color: #ccc;
margin-right: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
border-left: 1px solid;
padding-left: 10px;
} }
.qrCode { .qrCode {
width: 160px; width: 160px;

2
src/views/register.vue
View File

@ -162,7 +162,7 @@ getCode()
background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6); background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
} }
.login-form { .login-form {
height: 380px; padding: 15px 25px 15px 25px;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;