AdvancedSearch
/
zhiqi
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录页切换

This commit is contained in:
JenniferW 2026-01-09 09:49:53 +08:00
parent 1a713532ee
commit 7939a35ca1
2 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 725 KiB

106
src/views/login.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<div class="login"> <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-container">
<!-- 左侧插图区域 --> <!-- 左侧插图区域 -->
<div class="login-left"> <!-- <div class="login-left">
<img <img
src="../assets/images/login-box-bg.svg" src="../assets/images/login-box-bg.svg"
alt="登录插图" alt="登录插图"
class="login-illustration" class="login-illustration"
/> />
</div> </div> -->
<!-- 右侧登录表单区域 --> <!-- 右侧登录表单区域 -->
<div class="login-right"> <div class="login-right">
@ -241,11 +241,18 @@ getCookie();
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; 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%); // background: linear-gradient(135deg, #e3f2f5 0%, #d0e8eb 50%, #c5e3e6 100%);
position: relative; // position: relative;
padding: 0; // padding: 0;
overflow: hidden; // overflow: hidden;
// // 底部背景图片 - 左侧 // // 底部背景图片 - 左侧
// &::before { // &::before {
@ -286,54 +293,56 @@ getCookie();
// } // }
} }
.logo { // .logo {
position: absolute; // position: absolute;
top: 35px; // top: 35px;
left: 45px; // left: 45px;
width: 18%; // width: 18%;
} // }
.login-container { // .login-container {
display: flex; // display: flex;
width: 100%; // width: 100%;
max-width: 1400px; // max-width: 1400px;
height: 100vh; // height: 100vh;
position: relative; // position: relative;
z-index: 1; // z-index: 1;
} // }
.login-left { // .login-left {
flex: 1; // flex: 1;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
padding: 60px 40px; // padding: 60px 40px;
position: relative; // position: relative;
.login-illustration { // // .login-illustration {
width: 100%; // // width: 100%;
max-width: 650px; // // max-width: 650px;
height: auto; // // height: auto;
object-fit: contain; // // object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)); // // filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
} // // }
} // }
.login-right { .login-right {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: end;
left: 70%;
padding: 40px 60px; padding: 40px 60px;
position: relative; position: relative;
} }
.title-text { .title-text {
font-family: "PingFang SC", SimHei, sans-serif;
margin: 0 auto 35px; margin: 0 auto 35px;
text-align: center; text-align: center;
color: #333; color: #017d9c;
font-size: 20px; font-size: 34px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 1.4; line-height: 1.4;
@ -344,11 +353,11 @@ getCookie();
background: #ffffff; background: #ffffff;
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
padding: 45px 38px 38px 38px; padding: 50px 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 20px; margin-bottom: 10px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -370,7 +379,7 @@ getCookie();
} }
:deep(.el-input__inner) { :deep(.el-input__inner) {
font-size: 15px; font-size: 14px;
color: #333; color: #333;
&::placeholder { &::placeholder {
@ -407,8 +416,8 @@ getCookie();
} }
:deep(.el-button--primary) { :deep(.el-button--primary) {
background-color: #5dbbe4; background-color: #017d9c;
border-color: #5dbbe4; border-color: #017d9c;
height: 48px; height: 48px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@ -417,8 +426,6 @@ getCookie();
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
background-color: #449ac6;
border-color: #449ac6;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3); box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
} }
@ -438,8 +445,8 @@ getCookie();
} }
.el-checkbox__input.is-checked .el-checkbox__inner { .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #5dbbe4; background-color: #017d9c;
border-color: #5dbbe4; border-color: #017d9c;
} }
} }
} }
@ -451,7 +458,7 @@ getCookie();
} }
.login-code { .login-code {
width: 33%; width: 36%;
height: 48px; height: 48px;
float: right; float: right;
display: flex; display: flex;
@ -497,7 +504,6 @@ getCookie();
height: 48px; height: 48px;
padding-left: 0; padding-left: 0;
width: 100%; width: 100%;
object-fit: contain;
} }
// 响应式设计 // 响应式设计