Create login.module.css

This commit is contained in:
BaiCai
2025-04-27 22:03:23 +08:00
committed by Junyan Qin
parent 2b09591524
commit 18152fe04b

View File

@@ -0,0 +1,102 @@
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.login {
display: flex;
width: 80%;
height: 80vh;
background-color: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}
.right {
flex: 1.5;
background-color: #f9f9f9;
position: relative;
overflow: hidden;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
.loginForm {
width: 100%;
max-width: 360px;
}
.title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 2rem;
text-align: center;
}
.loginButton {
width: 100%;
height: 40px;
margin-top: 1rem;
}
.divider {
margin: 1.5rem 0;
text-align: center;
}
.socialLogin {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.socialButton {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.rememberMe {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
/* 修改Logo样式调整位置确保正确对齐 */
.logoContainer {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 70px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.logo {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}