yinq
/
hwbm-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改登录页

Browse Source
dev
suixy 4 weeks ago
parent 6be14494ba
commit ce4540bd3c
1 changed files with 235 additions and 36 deletions
Show Stats Download Patch File Download Diff File

271
src/views/login.vue
Unescape Escape View File

@ -1,9 +1,13 @@
<template>
<div class="login">
<div class="logo"></div>
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-box">
<h3 class="title">{{ title }}</h3>
<!-- <lang-select />-->
<!-- <h3 class="title">{{ title }}</h3>-->
<!-- <lang-select />-->
</div>
<div class="login-tabs">
<span class="is-active">账号登录</span>
</div>
<el-form-item v-if="tenantEnabled" prop="tenantId">
<el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
@ -44,25 +48,28 @@
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
<!-- <el-form-item style="float: right">-->
<!-- <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">-->
<!-- <svg-icon icon-class="wechat" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">-->
<!-- <svg-icon icon-class="maxkey" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">-->
<!-- <svg-icon icon-class="topiam" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">-->
<!-- <svg-icon icon-class="gitee" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">-->
<!-- <svg-icon icon-class="github" />-->
<!-- </el-button>-->
<!-- </el-form-item>-->
<el-form-item style="width: 100%">
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
<!-- <button class="forgot-button" type="button">忘记密码?</button>-->
<!-- <div class="login-options">-->
<!-- </div>-->
<!-- <el-form-item style="float: right">-->
<!-- <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">-->
<!-- <svg-icon icon-class="wechat" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">-->
<!-- <svg-icon icon-class="maxkey" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">-->
<!-- <svg-icon icon-class="topiam" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">-->
<!-- <svg-icon icon-class="gitee" />-->
<!-- </el-button>-->
<!-- <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">-->
<!-- <svg-icon icon-class="github" />-->
<!-- </el-button>-->
<!-- </el-form-item>-->
<el-form-item class="login-submit">
<el-button :loading="loading" size="large" type="primary" class="login-button" @click.prevent="handleLogin">
<span v-if="!loading">{{ proxy.$t('login.login') }}</span>
<span v-else>{{ proxy.$t('login.logging') }}</span>
</el-button>
@ -231,13 +238,27 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.logo {
position: absolute;
top: 1vw;
left: 1vw;
width: 100px;
height: 76px;
//background-image: url('../assets/images/profile.jpg');
background-image: url('../assets/images/logo.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.login {
display: flex;
justify-content: center;
align-items: center;
//display: flex;
//justify-content: center;
//align-items: center;
height: 100%;
min-height: 640px;
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
//background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.title-box {
@ -256,25 +277,174 @@ onMounted(() => {
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
width: 480px;
padding: 76px 80px 58px;
position: absolute;
top: 50%;
right: 14.9%;
transform: translateY(-50%);
z-index: 1;
border: 1px solid rgba(231, 239, 250, 0.92);
border-radius: 0;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 38px rgba(62, 112, 172, 0.1);
:deep(.el-form-item) {
margin-bottom: 28px;
}
:deep(.el-form-item__error) {
padding-top: 6px;
color: #f56c6c;
}
.el-input {
height: 40px;
height: 52px;
input {
height: 40px;
height: 52px;
color: #4f5f73;
font-size: 15px;
letter-spacing: 0;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0px;
width: 15px;
height: 51px;
margin-left: 2px;
color: #aab4c4;
}
}
.login-tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 34px;
height: 34px;
margin-bottom: 42px;
color: #8f96a3;
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
line-height: 1;
white-space: nowrap;
span {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
}
.is-active {
color: #253347;
font-weight: 500;
}
.is-active::after {
content: '';
position: absolute;
left: 50%;
bottom: -11px;
width: 36px;
height: 3px;
border-radius: 99px;
background: #118df0;
transform: translateX(-50%);
}
}
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
min-height: 52px;
padding: 0 16px;
border-radius: 3px;
background: #f4f6fb;
box-shadow: none;
}
:deep(.el-select__wrapper.is-focused),
:deep(.el-input__wrapper.is-focus) {
background: #fff;
box-shadow:
0 0 0 1px #1590f1 inset,
0 6px 16px rgba(17, 141, 240, 0.1);
}
:deep(.el-input__inner::placeholder) {
color: #adb4c0;
}
.login-options {
display: flex;
align-items: center;
justify-content: space-between;
margin: -8px 0 54px;
color: #a3abb7;
:deep(.el-checkbox) {
height: 18px;
color: #a3abb7;
font-size: 14px;
font-weight: 400;
}
:deep(.el-checkbox__label) {
padding-left: 8px;
color: #a3abb7;
}
:deep(.el-checkbox__inner) {
width: 16px;
height: 16px;
border-color: #c8ced8;
border-radius: 0;
background: transparent;
}
}
.forgot-button {
padding: 0;
border: 0;
background: transparent;
color: #a3abb7;
font: inherit;
cursor: pointer;
}
.forgot-button:hover {
color: #118df0;
}
.login-submit {
width: 100%;
margin-bottom: 0 !important;
}
.login-button {
width: 100%;
height: 54px;
border: 0;
border-radius: 4px;
background: #118df0;
font-size: 18px;
font-weight: 600;
letter-spacing: 14px;
box-shadow: none;
span {
margin-right: -14px;
}
}
.login-button:hover,
.login-button:focus {
background: #0b83e4;
}
.login-tip {
font-size: 13px;
text-align: center;
@ -283,7 +453,7 @@ onMounted(() => {
.login-code {
width: 33%;
height: 40px;
height: 52px;
float: right;
img {
@ -306,7 +476,36 @@ onMounted(() => {
}
.login-code-img {
height: 40px;
height: 52px;
padding-left: 12px;
}
@media (max-width: 1280px) {
.login-form {
right: 8%;
}
}
@media (max-width: 960px) {
.login {
min-height: 100%;
background-size: cover;
background-position: center;
}
.login-form {
width: min(88vw, 480px);
min-height: auto;
padding: 56px 42px 44px;
right: 50%;
transform: translate(50%, -50%);
}
.login-tabs {
gap: 22px;
justify-content: center;
font-size: 17px;
letter-spacing: 1px;
}
}
</style>

Write Preview
Loading…
Cancel
Save