feat: 登录流程完成
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 914 B |
|
After Width: | Height: | Size: 143 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 948 B |
|
After Width: | Height: | Size: 55 KiB |
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* get localStorage 获取本地存储
|
||||
* @param { String } key
|
||||
*/
|
||||
export function getLocal(key: string) {
|
||||
if (!key) throw new Error("key is empty");
|
||||
const value = localStorage.getItem(key);
|
||||
return value ? JSON.parse(value) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* set localStorage 设置本地存储
|
||||
* @param { String } key
|
||||
* @param value
|
||||
*/
|
||||
export function setLocal(key: string, value: unknown) {
|
||||
if (!key) throw new Error("key is empty");
|
||||
if (!value) return;
|
||||
return localStorage.setItem(key, JSON.stringify(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* remove localStorage 移除某个本地存储
|
||||
* @param { String } key
|
||||
*/
|
||||
export function removeLocal(key: string) {
|
||||
if (!key) throw new Error("key is empty");
|
||||
return localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* clear localStorage 清除本地存储
|
||||
*/
|
||||
export function clearLocal() {
|
||||
return localStorage.clear();
|
||||
}
|
||||
@ -0,0 +1,162 @@
|
||||
.login-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
// background-image: url('https://via.placeholder.com/1920x1080?text=铁路货车背景图');
|
||||
background-image: url("@/assets/login/big_bg.png");
|
||||
|
||||
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
.bg-login-title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background-image: url("@/assets/login/title.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 auto 72px;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
background-image: url("@/assets/login/login_bg.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 630px;
|
||||
height: 455px;
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
|
||||
.title {
|
||||
width: 424px;
|
||||
height: 70px;
|
||||
color: #87ceeb;
|
||||
text-align: center;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
letter-spacing: 2px;
|
||||
color: #e9f6ff;
|
||||
position: relative;
|
||||
background-image: url("@/assets/login/login_title.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 0 auto 48px;
|
||||
.left-arrow,
|
||||
.right-arrow {
|
||||
width: 31px;
|
||||
height: 15px;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.left-arrow {
|
||||
left: 120px;
|
||||
background-image: url("@/assets/login/right_arrow.png");
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
right: -30px;
|
||||
background-image: url("@/assets/login/left_arrow.png");
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
.el-form-item--large {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #03366b;
|
||||
box-shadow: inset 2px 2px 4px 0px #105890,
|
||||
inset -2px -2px 4px 0px #105890;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #105890;
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
margin: 0 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(58, 145, 255, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
.el-input__inner {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
height: 48px;
|
||||
&::placeholder {
|
||||
color: #7b96b2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.remember-item {
|
||||
margin: 0 0 40px;
|
||||
.el-form-item--large .el-form-item__content {
|
||||
line-height: 22px;
|
||||
}
|
||||
.el-checkbox.el-checkbox--large {
|
||||
height: 22px;
|
||||
}
|
||||
.el-checkbox__label {
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.el-checkbox.el-checkbox--large .el-checkbox__inner {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.el-checkbox__inner:after {
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 400px;
|
||||
height: 48px;
|
||||
background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
|
||||
border-radius: 4px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 2px;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #1976d2, #42a5f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||