登录页切换
This commit is contained in:
parent
1a713532ee
commit
7939a35ca1
Binary file not shown.
|
After Width: | Height: | Size: 725 KiB |
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<img src="../assets/images/444.png" class="logo" alt="logo" />
|
||||
<!-- <img src="../assets/images/444.png" class="logo" alt="logo" /> -->
|
||||
<div class="login-container">
|
||||
<!-- 左侧插图区域 -->
|
||||
<div class="login-left">
|
||||
<!-- <div class="login-left">
|
||||
<img
|
||||
src="../assets/images/login-box-bg.svg"
|
||||
alt="登录插图"
|
||||
class="login-illustration"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 右侧登录表单区域 -->
|
||||
<div class="login-right">
|
||||
|
|
@ -241,11 +241,18 @@ getCookie();
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(to bottom, #449ac6 0%, #5dbbe4 100%);
|
||||
background-image: url("../assets/images/bg.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%; /* 使背景图片完全覆盖容器 */
|
||||
background-clip: padding-box;
|
||||
overflow: visible;
|
||||
background-position: center;
|
||||
background-attachment: fixed; // 固定背景，滚动时不移动
|
||||
// background: linear-gradient(to bottom, #449ac6 0%, #5dbbe4 100%);
|
||||
// background: linear-gradient(135deg, #e3f2f5 0%, #d0e8eb 50%, #c5e3e6 100%);
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
// position: relative;
|
||||
// padding: 0;
|
||||
// overflow: hidden;
|
||||
|
||||
// // 底部背景图片 - 左侧
|
||||
// &::before {
|
||||
|
|
@ -286,54 +293,56 @@ getCookie();
|
|||
// }
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 45px;
|
||||
width: 18%;
|
||||
}
|
||||
// .logo {
|
||||
// position: absolute;
|
||||
// top: 35px;
|
||||
// left: 45px;
|
||||
// width: 18%;
|
||||
// }
|
||||
|
||||
.login-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
// .login-container {
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// max-width: 1400px;
|
||||
// height: 100vh;
|
||||
// position: relative;
|
||||
// z-index: 1;
|
||||
// }
|
||||
|
||||
.login-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 40px;
|
||||
position: relative;
|
||||
// .login-left {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// padding: 60px 40px;
|
||||
// position: relative;
|
||||
|
||||
.login-illustration {
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
}
|
||||
// // .login-illustration {
|
||||
// // width: 100%;
|
||||
// // max-width: 650px;
|
||||
// // height: auto;
|
||||
// // object-fit: contain;
|
||||
// // filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
|
||||
// // }
|
||||
// }
|
||||
|
||||
.login-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: end;
|
||||
left: 70%;
|
||||
padding: 40px 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-family: "PingFang SC", SimHei, sans-serif;
|
||||
margin: 0 auto 35px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
color: #017d9c;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.4;
|
||||
|
|
@ -344,11 +353,11 @@ getCookie();
|
|||
background: #ffffff;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 45px 38px 38px 38px;
|
||||
padding: 50px 40px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -370,7 +379,7 @@ getCookie();
|
|||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
|
|
@ -407,8 +416,8 @@ getCookie();
|
|||
}
|
||||
|
||||
:deep(.el-button--primary) {
|
||||
background-color: #5dbbe4;
|
||||
border-color: #5dbbe4;
|
||||
background-color: #017d9c;
|
||||
border-color: #017d9c;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
|
@ -417,8 +426,6 @@ getCookie();
|
|||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #449ac6;
|
||||
border-color: #449ac6;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
|
||||
}
|
||||
|
|
@ -438,8 +445,8 @@ getCookie();
|
|||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #5dbbe4;
|
||||
border-color: #5dbbe4;
|
||||
background-color: #017d9c;
|
||||
border-color: #017d9c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -451,7 +458,7 @@ getCookie();
|
|||
}
|
||||
|
||||
.login-code {
|
||||
width: 33%;
|
||||
width: 36%;
|
||||
height: 48px;
|
||||
float: right;
|
||||
display: flex;
|
||||
|
|
@ -497,7 +504,6 @@ getCookie();
|
|||
height: 48px;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
|
|
|
|||
Loading…
Reference in New Issue