/* pages/login/login.wxss */
|
|
.login-container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
width: 100%;
|
background-color: #f5f5f5;
|
}
|
|
.logo-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 60rpx 0;
|
}
|
|
.logo-circle {
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: 50%;
|
background: #1890FF;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: white;
|
font-size: 80rpx;
|
font-weight: bold;
|
}
|
|
.form-container {
|
background-color: #fff;
|
border-radius: 20rpx;
|
margin: 0 40rpx;
|
padding: 40rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.title {
|
font-size: 40rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 40rpx;
|
text-align: center;
|
}
|
|
.input-wrapper {
|
display: flex;
|
align-items: center;
|
border-bottom: 1rpx solid #e0e0e0;
|
margin-bottom: 40rpx;
|
padding-bottom: 20rpx;
|
}
|
|
.input-icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 20rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #1890FF;
|
font-weight: bold;
|
font-size: 32rpx;
|
}
|
|
.user-icon::before {
|
content: "👤";
|
}
|
|
.lock-icon::before {
|
content: "🔒";
|
}
|
|
.eye-open-icon::before {
|
content: "👁️";
|
}
|
|
.eye-close-icon::before {
|
content: "👁️🗨️";
|
}
|
|
.input {
|
flex: 1;
|
height: 60rpx;
|
font-size: 32rpx;
|
color: #333;
|
}
|
|
.password-toggle {
|
padding: 10rpx;
|
font-size: 32rpx;
|
}
|
|
.login-btn-container {
|
margin-top: 60rpx;
|
}
|
|
.login-button {
|
height: 90rpx;
|
background-color: #1890FF;
|
color: #fff;
|
font-size: 34rpx;
|
border-radius: 45rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.footer-links {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 40rpx;
|
font-size: 28rpx;
|
}
|
|
.link {
|
color: #1890FF;
|
}
|
|
.project-info {
|
position: fixed;
|
bottom: 40rpx;
|
width: 100%;
|
text-align: center;
|
font-size: 32rpx;
|
padding: 16rpx 0;
|
background-color: rgba(255, 255, 255, 0.8);
|
backdrop-filter: blur(5px);
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.project-info text {
|
display: inline-block;
|
padding: 8rpx 24rpx;
|
color: #fff;
|
border-radius: 30rpx;
|
font-weight: 500;
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
|
background: linear-gradient(45deg, #1890FF, #36a9fc);
|
}
|
|
.project-info.mq text {
|
background: linear-gradient(45deg, #18c063, #36d486);
|
}
|
|
image {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
display: block;
|
width: 100%;
|
height: 100%;
|
z-index: -999;
|
}
|
|
.input-label {
|
flex: 1;
|
/* 让值占据剩余空间 */
|
align-items: left;
|
width: 150rpx;
|
margin-right: 10rpx;
|
font-size: 31rpx;
|
color: #333;
|
font-weight: bold;
|
text-align: justify;
|
text-align-last: justify;
|
}
|
|
.label-container {
|
width: 140rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.code-button {
|
width: 220rpx;
|
font-size: 28rpx;
|
color: #1890FF;
|
text-align: center;
|
padding: 10rpx 0;
|
border-left: 1rpx solid #e0e0e0;
|
}
|
|
.code-button text {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
