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

💄更新登录页面ui

Browse Source
This commit is contained in:
不做码农 2023-08-30 18:20:55 +08:00
parent 38cf81bcfd
commit 94d7cb492a
3 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/i18n/pages/login/zh-cn.json
View File

@ -10,7 +10,7 @@
"reLogin": "重新登录", "reLogin": "重新登录",
"invalidSession": "无效的会话，或者会话已过期，请重新登录。", "invalidSession": "无效的会话，或者会话已过期，请重新登录。",
"otherLoginWay": "其他登录方式", "otherLoginWay": "其他登录方式",
"register": "注册", "register": "立即注册",
"forgotPwd": "忘记密码" "forgotPwd": "忘记密码"
} }
} }

2
src/views/login.vue
View File

@ -43,7 +43,7 @@
</span> </span>
</div> </div>
<el-form-item style="width: 100%"> <el-form-item style="width: 100%" :style="{ 'margin-top': captchaOnOff == 'off' ? '40px' : '' }">
<el-button :loading="loading" size="default" type="primary" style="width: 100%" @click.prevent="handleLogin"> <el-button :loading="loading" size="default" 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>

96
src/views/register.vue
View File

@ -1,49 +1,51 @@
<template> <template>
<starBackground></starBackground> <starBackground></starBackground>
<div class="register"> <div class="login-wrap">
<el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="register-form"> <div class="login">
<h3 class="title">{{ title }}</h3> <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="login-form">
<el-form-item prop="username"> <h3 class="title">{{ title }}</h3>
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号"> <el-form-item prop="username">
<template #prefix> <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon name="user" /> <template #prefix>
</template> <svg-icon name="user" />
</el-input> </template>
</el-form-item> </el-input>
<el-form-item prop="password"> </el-form-item>
<el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter="handleRegister"> <el-form-item prop="password">
<template #prefix> <el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter="handleRegister">
<svg-icon name="password" /> <template #prefix>
</template> <svg-icon name="password" />
</el-input> </template>
</el-form-item> </el-input>
<el-form-item prop="confirmPassword"> </el-form-item>
<el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter="handleRegister"> <el-form-item prop="confirmPassword">
<template #prefix> <el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter="handleRegister">
<svg-icon name="password" /> <template #prefix>
</template> <svg-icon name="password" />
</el-input> </template>
</el-form-item> </el-input>
<el-form-item prop="code" v-if="captchaOnOff"> </el-form-item>
<el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister"> <el-form-item prop="code" v-if="captchaOnOff">
<template #prefix> <el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister">
<svg-icon name="validCode" /> <template #prefix>
</template> <svg-icon name="validCode" />
</el-input> </template>
<div class="register-code ml10"> </el-input>
<img :src="codeUrl" @click="getCode" class="register-code-img" /> <div class="register-code ml10">
</div> <img :src="codeUrl" @click="getCode" class="register-code-img" />
</el-form-item> </div>
<el-form-item style="width: 100%"> </el-form-item>
<el-button :loading="loading" type="primary" size="large" style="width: 100%" @click.prevent="handleRegister"> <el-form-item style="width: 100%">
<span v-if="!loading">注 册</span> <el-button :loading="loading" type="primary" size="default" style="width: 100%" @click.prevent="handleRegister">
<span v-else>注 册 中...</span> <span v-if="!loading">注 册</span>
</el-button> <span v-else>注 册 中...</span>
<div style="float: right"> </el-button>
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link> <div style="text-align: center">
</div> <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</el-form-item> </div>
</el-form> </el-form-item>
</el-form>
</div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-register-footer"> <div class="el-register-footer">
<div v-html="defaultSettings.copyright"></div> <div v-html="defaultSettings.copyright"></div>
@ -147,11 +149,14 @@ getCode()
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
@import '@/assets/styles/login.scss';
.register { .register {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-size: cover;
flex-direction: column;
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);
} }
.title { .title {
@ -161,10 +166,9 @@ getCode()
} }
.register-form { .register-form {
border-radius: 6px;
background: #fff; background: #fff;
width: var(--base-login-width); width: var(--base-login-width);
padding: 25px 15px 5px 15px; padding: 35px 15px 5px 15px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {