调整UI结构,优化密码设置逻辑
This commit is contained in:
+53
-15
@@ -40,14 +40,14 @@ body {
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 登录态尺寸:800x650 */
|
||||
.app-container:not(.is-logged-in) {
|
||||
width: 800px;
|
||||
height: 650px;
|
||||
width: 600px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
/* 登录后尺寸:1600x900(响应式) */
|
||||
@@ -64,34 +64,34 @@ body {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 48px 64px;
|
||||
padding: 32px 48px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
font-size: 36px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 6px;
|
||||
letter-spacing: 4px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
@@ -108,13 +108,13 @@ body {
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
height: 56px;
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
outline: none;
|
||||
}
|
||||
@@ -128,12 +128,12 @@ body {
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 56px;
|
||||
margin-top: 12px;
|
||||
height: 44px;
|
||||
margin-top: 6px;
|
||||
background: linear-gradient(135deg, #63e2b7, #3b9e8a);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0a0a0f;
|
||||
cursor: pointer;
|
||||
@@ -773,4 +773,42 @@ body {
|
||||
.btn-confirm:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 16px rgba(99, 226, 183, 0.2);
|
||||
}
|
||||
|
||||
/* ===== 旋转圈过渡 ===== */
|
||||
.loading-ring {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.04);
|
||||
border-top: 3px solid #63e2b7;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.loading-ring.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 主内容默认透明,登录后淡入 */
|
||||
.main-panel {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.main-panel.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user