0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💥 feat(登录): 新增两种登录页

This commit is contained in:
fhysy 2024-06-18 15:01:04 +08:00
parent 83efcfefe5
commit 0c70ae4d0b
7 changed files with 836 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/blue-black-login/login-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/assets/images/blue-black-white/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

BIN
src/assets/images/blue-black-white/login-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 872 KiB

BIN
src/assets/logo/drgy/logo168.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

10
src/router/index.js
View File

@ -43,6 +43,16 @@ export const constantRoutes = [
component: (resolve) => require(['@/views/login-green'], resolve),
hidden: true
},
{
path: '/login-blue-black',
component: (resolve) => require(['@/views/login-blue-black'], resolve),
hidden: true
},
{
path: '/login-blue-white',
component: (resolve) => require(['@/views/login-blue-white'], resolve),
hidden: true
},
{
path: '/404',
component: (resolve) => require(['@/views/error/404'], resolve),

413
src/views/login-blue-black.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<div class="login">
<div class="login-box">
<div class="login-header">
<img src="@/assets/logo/drgy/logo168.png" alt="Logo"/>
<span>{{systemName}}</span>
</div>
<div class="form-wrap">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-tags-wrap">
<div
@click="userTypeClick('system')"
:class="formTitleType === 'system' ? 'tags-div tags-checked' : 'tags-div'"
>
<h3>运营登录</h3>
<span></span>
</div>
<div
@click="userTypeClick('enter')"
:class="formTitleType === 'enter' ? 'tags-div tags-checked' : 'tags-div'"
>
<h3>企业登录</h3>
<span></span>
</div>
<!-- <div-->
<!-- @click="userTypeClick('personal')"-->
<!-- :class="formTitleType === 'personal' ? 'tags-div tags-checked' : 'tags-div'"-->
<!-- >-->
<!-- <h3>个人登录</h3>-->
<!-- <span></span>-->
<!-- </div>-->
</div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="A_loginUser" 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="A_loginPassword" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" class="code-box">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="A_loginCode" 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:0px 0px 25px 0px; margin-left: 25px;color: #5E6B82;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%; height: 46px;background: linear-gradient(87deg, #09ADF9 0%, #4650FB 100%);border-radius: 23px;border: none;font-size: 18px;font-weight: 500;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- 底部 -->
<!-- <div class="el-login-footer">
<span>Copyright © 2018-2021 smartpower.vip All Rights Reserved.</span>
</div> -->
</div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
name: "Login",
data() {
return {
logoUrl: '',
systemName: '',
formTitle: {
enter: "企业登录",
personal: "个人登录"
},
formTitleType: "enter",
codeUrl: "",
cookiePassword: "",
loginForm: {
username: "",
password: "",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" }
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
},
loading: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.logoUrl = window._SYSTEMCONFIG["logoURL"];
this.systemName = window._SYSTEMCONFIG["systemName"];
this.getCode();
this.getCookie();
},
methods: {
userTypeClick(val) {
this.formTitleType = val;
},
getCode() {
getCodeImg().then(res => {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30
});
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
}
switch(this.formTitleType) {
case 'enter':
this.loginForm["userType"] = 'TENANT'
break;
case 'system':
this.loginForm["userType"] = 'SYSTEM'
break;
case 'personal':
this.loginForm["userType"] = 'PERSONAL'
break;
};
// this.loginForm["userType"] =
// this.formTitleType === "enter" ? undefined : "PERSONAL";
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
this.getCode();
});
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background: url("../assets/images/blue-black-login/login-bg.png") no-repeat;
background-size: 100% 100%;
.login-box{
display: flex;
align-items: center;
border-radius: 6px;
width: 920px;
height: 480px;
overflow: hidden;
}
.login-header{
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 420px;
height: 480px;
background: #E9F2FF;
img{
height: 170px;
width: 170px;
}
span{
margin-top: 20px;
font-family: SimSun;
font-weight: 400;
font-size: 28px;
line-height: 30px;
color: #000000;
}
}
.form-wrap {
//width: 500px;
flex: 1;
height: 480px;
display: flex;
justify-content: center;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 0px 18px 0px rgba(222,234,255,0.88);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 0;
.el-form-item__error {
left: 25px;
}
}
.login-form {
//border-radius: 6px;
//background: #ffffff00;
width: 357px;
//padding: 25px 25px 5px 25px;
.title-tags-wrap {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 18px;
display: flex;
width: 100%;
height: 70px;
justify-content: center;
align-items: baseline;
cursor: default;
.tags-div {
display: flex;
width: 50%;
align-items: center;
height: 100%;
font-family: "Source Han Sans CN";
font-weight: 500;
font-size: 18px;
line-height: 46px;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 20px;
color: #444;
cursor: pointer;
> h3 {
width: 100%;
margin: 0px;
text-align: center;
font-weight: 700;
}
> span {
display: none;
width: 70px;
height: 3px;
background: #1890FF;
border-radius: 2px;
}
}
.tags-checked {
color: #1890FF;
> span {
display: block;
}
}
}
.el-checkbox__input.is-checked + .el-checkbox__label {
margin-left: 3px;
}
.el-input {
input {
height: 45px;
border: none;
border-radius: 30px;
padding-left: 56px;
font-size: 16px;
//color: #e4e2e2;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
//-webkit-text-fill-color: #ededed !important;
-webkit-box-shadow: 0 0 0px 1000px #06060600 inset !important;
background-color: #06060657;
background-image: none;
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
input {
height: 46px;
background-color: #F6F6F6;
border-radius: 23px;
}
}
.input-icon {
height: 42px;
width: 26px;
margin-left: 15px;
}
}
.code-box{
background-color: #F6F6F6;
border-radius: 23px;
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
//width: 120px;
//height: 44px;
float: right;
img {
width: 122px;
height: 46px;
cursor: pointer;
vertical-align: middle;
border-radius: 0 23px 23px 0;
}
}
.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;
}
}
.el-form-item{
margin-bottom: 15px;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
color: #1890FF;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #1890FF;
border-color: #1890FF;
}
@media screen and (max-width: 920px) {
/* 选择对应的元素，这里假设是body作为示例 */
.login-box {
width: 100% !important;
.login-header{
width: 46% !important;
}
.form-wrap{
width: 54% !important;
}
}
}
</style>

413
src/views/login-blue-white.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<div class="login">
<div class="banner-box">
<img src="@/assets/images/blue-black-white/banner.png" alt="DRGYEN"/>
</div>
<div class="login-box">
<div class="login-header">
<img src="@/assets/logo/drgy/logo168.png" alt="Logo"/>
<span>{{systemName}}</span>
</div>
<div class="form-wrap">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="title-tags-wrap">
<div
@click="userTypeClick('system')"
:class="formTitleType === 'system' ? 'tags-div tags-checked' : 'tags-div'"
>
<h3>运营登录</h3>
<span></span>
</div>
<div
@click="userTypeClick('enter')"
:class="formTitleType === 'enter' ? 'tags-div tags-checked' : 'tags-div'"
>
<h3>企业登录</h3>
<span></span>
</div>
<!-- <div-->
<!-- @click="userTypeClick('personal')"-->
<!-- :class="formTitleType === 'personal' ? 'tags-div tags-checked' : 'tags-div'"-->
<!-- >-->
<!-- <h3>个人登录</h3>-->
<!-- <span></span>-->
<!-- </div>-->
</div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="A_loginUser" 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="A_loginPassword" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" class="code-box">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="A_loginCode" 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:0px 0px 25px 0px; margin-left: 25px;color: #5E6B82;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%; height: 46px;background: linear-gradient(87deg, #09ADF9 0%, #4650FB 100%);border-radius: 23px;border: none;font-size: 18px;font-weight: 500;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<!-- 底部 -->
<!-- <div class="el-login-footer">
<span>Copyright © 2018-2021 smartpower.vip All Rights Reserved.</span>
</div> -->
</div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
name: "Login",
data() {
return {
logoUrl: '',
systemName: '',
formTitle: {
enter: "企业登录",
personal: "个人登录"
},
formTitleType: "enter",
codeUrl: "",
cookiePassword: "",
loginForm: {
username: "",
password: "",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" }
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
},
loading: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.logoUrl = window._SYSTEMCONFIG["logoURL"];
this.systemName = window._SYSTEMCONFIG["systemName"];
this.getCode();
this.getCookie();
},
methods: {
userTypeClick(val) {
this.formTitleType = val;
},
getCode() {
getCodeImg().then(res => {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30
});
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
}
switch(this.formTitleType) {
case 'enter':
this.loginForm["userType"] = 'TENANT'
break;
case 'system':
this.loginForm["userType"] = 'SYSTEM'
break;
case 'personal':
this.loginForm["userType"] = 'PERSONAL'
break;
};
// this.loginForm["userType"] =
// this.formTitleType === "enter" ? undefined : "PERSONAL";
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
this.getCode();
});
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
//flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background: url("../assets/images/blue-black-white/login-bg.png") no-repeat;
background-size: 100% 100%;
.banner-box{
padding: 62px 160px 48px 0;
img{
width: 500px;
height: 580px;
}
}
.login-box{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 6px;
overflow: hidden;
}
.login-header{
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 34px;
img{
height: 80px;
width: 80px;
}
span{
font-family: SimSun;
font-weight: 400;
font-size: 28px;
margin-left: 20px;
//line-height: 80px;
color: #000000;
}
}
.form-wrap {
width: 500px;
height: 480px;
margin-bottom: 110px;
display: flex;
justify-content: center;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 0px 18px 0px rgba(222,234,255,0.88);
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
border-radius: 20px;
border: 0;
.el-form-item__error {
left: 25px;
}
}
.login-form {
//border-radius: 6px;
//background: #ffffff00;
width: 357px;
//padding: 25px 25px 5px 25px;
.title-tags-wrap {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 18px;
display: flex;
width: 100%;
height: 70px;
justify-content: center;
align-items: baseline;
cursor: default;
.tags-div {
display: flex;
width: 50%;
align-items: center;
height: 100%;
font-family: "Source Han Sans CN";
font-weight: 500;
font-size: 18px;
line-height: 46px;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 20px;
color: #444;
cursor: pointer;
> h3 {
width: 100%;
margin: 0px;
text-align: center;
font-weight: 700;
}
> span {
display: none;
width: 70px;
height: 3px;
background: #1890FF;
border-radius: 2px;
}
}
.tags-checked {
color: #1890FF;
> span {
display: block;
}
}
}
.el-checkbox__input.is-checked + .el-checkbox__label {
margin-left: 3px;
}
.el-input {
input {
height: 45px;
border: none;
border-radius: 30px;
padding-left: 56px;
font-size: 16px;
//color: #e4e2e2;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
//-webkit-text-fill-color: #ededed !important;
-webkit-box-shadow: 0 0 0px 1000px #06060600 inset !important;
background-color: #06060657;
background-image: none;
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
input {
height: 46px;
background-color: #F6F6F6;
border-radius: 23px;
}
}
.input-icon {
height: 42px;
width: 26px;
margin-left: 15px;
}
}
.code-box{
background-color: #F6F6F6;
border-radius: 23px;
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
//width: 120px;
//height: 44px;
float: right;
img {
width: 122px;
height: 46px;
cursor: pointer;
vertical-align: middle;
border-radius: 0 23px 23px 0;
}
}
.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;
}
}
.el-form-item{
margin-bottom: 15px;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
color: #1890FF;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #1890FF;
border-color: #1890FF;
}
@media screen and (max-width: 1160px) {
/* 选择对应的元素，这里假设是body作为示例 */
.banner-box {
display: none;
}
}
</style>