feat(HEL-240): 按确认样图还原桌面登录页左右骨架
把登录门户改回确认稿的品牌行、中下部主标题、底部行情标签和 K 线背景，并让超宽屏按比例展开左栏。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
541fb48c1c
commit
f905b44675
+390
-67
@@ -1694,6 +1694,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.login-portal {
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -1704,8 +1705,20 @@ button.account-role-badge:focus-visible {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-stage {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 auto;
|
||||
|
||||
display: grid;
|
||||
|
||||
place-items: center;
|
||||
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
.login-theme-toggle {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
@@ -1731,81 +1744,221 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-brand {
|
||||
width: clamp(420px, 34vw, 560px);
|
||||
position: relative;
|
||||
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
|
||||
padding: 44px 48px 36px;
|
||||
flex-direction: column;
|
||||
|
||||
width: var(--login-brand-share);
|
||||
|
||||
min-width: var(--login-brand-min);
|
||||
|
||||
max-width: var(--login-brand-cap);
|
||||
|
||||
flex: 0 0 var(--login-brand-share);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: var(--login-brand-pad);
|
||||
|
||||
background: var(--login-brand-gradient);
|
||||
|
||||
color: #f4f7ff;
|
||||
}
|
||||
|
||||
.login-brand-header {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.login-brand-mark {
|
||||
display: flex;
|
||||
|
||||
flex: 0 0 var(--login-brand-mark-size);
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
width: 56px;
|
||||
width: var(--login-brand-mark-size);
|
||||
|
||||
height: 56px;
|
||||
height: var(--login-brand-mark-size);
|
||||
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.login-brand-glyph {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-brand-identity {
|
||||
display: grid;
|
||||
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.login-brand-name {
|
||||
margin: 0;
|
||||
|
||||
font-size: var(--login-brand-name-size);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-brand-subtitle {
|
||||
margin: 0;
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.login-brand-copy {
|
||||
display: flex;
|
||||
|
||||
flex: 1 1 auto;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
padding: 24px 0 20px;
|
||||
}
|
||||
|
||||
.login-brand-kicker {
|
||||
margin: 28px 0 8px;
|
||||
display: inline-flex;
|
||||
|
||||
align-self: flex-start;
|
||||
|
||||
margin: 0 0 14px;
|
||||
|
||||
padding: 4px 10px;
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
letter-spacing: 0.08em;
|
||||
|
||||
opacity: 0.78;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.login-brand-title {
|
||||
margin: 0;
|
||||
|
||||
font-size: 36px;
|
||||
max-width: 12.4em;
|
||||
|
||||
font-size: var(--login-hero-size);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.login-brand-lead {
|
||||
margin: 12px 0 0;
|
||||
|
||||
max-width: 18em;
|
||||
max-width: 28em;
|
||||
|
||||
font-size: var(--font-size-body);
|
||||
font-size: var(--font-size-label);
|
||||
|
||||
line-height: 1.7;
|
||||
|
||||
opacity: 0.86;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.login-brand-market {
|
||||
position: relative;
|
||||
|
||||
min-height: 168px;
|
||||
}
|
||||
|
||||
.login-brand-chart {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
height: 168px;
|
||||
}
|
||||
|
||||
.login-chart-area {
|
||||
fill: url(#loginChartFade);
|
||||
}
|
||||
|
||||
.login-chart-line {
|
||||
fill: none;
|
||||
|
||||
stroke: var(--login-trend-line);
|
||||
|
||||
stroke-width: 2;
|
||||
|
||||
stroke-linecap: round;
|
||||
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.login-candles line {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.login-candles .is-up line,
|
||||
.login-candles .is-up rect {
|
||||
fill: var(--login-candle-up);
|
||||
|
||||
stroke: var(--login-candle-up);
|
||||
}
|
||||
|
||||
.login-candles .is-down line,
|
||||
.login-candles .is-down rect {
|
||||
fill: var(--login-candle-down);
|
||||
|
||||
stroke: var(--login-candle-down);
|
||||
}
|
||||
|
||||
.login-brand-stats {
|
||||
display: grid;
|
||||
position: absolute;
|
||||
|
||||
grid-template-columns: 1fr 1fr;
|
||||
right: 0;
|
||||
|
||||
gap: 16px 20px;
|
||||
bottom: 18px;
|
||||
|
||||
margin: 40px 0 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-stat {
|
||||
display: flex;
|
||||
|
||||
align-items: baseline;
|
||||
|
||||
gap: 6px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
padding: 6px 10px;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
background: var(--login-stat-chip-bg);
|
||||
}
|
||||
|
||||
.login-stat dt {
|
||||
@@ -1815,37 +1968,49 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-stat dd {
|
||||
margin: 4px 0 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 20px;
|
||||
font-size: var(--font-size-body);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-stat:nth-child(1) dd {
|
||||
color: #f0b45a;
|
||||
}
|
||||
|
||||
.login-stat:nth-child(2) dd {
|
||||
color: var(--login-candle-up);
|
||||
}
|
||||
|
||||
.login-stat:nth-child(3) dd {
|
||||
color: var(--login-candle-down);
|
||||
}
|
||||
|
||||
.login-stat-tag {
|
||||
margin-left: 6px;
|
||||
margin-left: 4px;
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
.login-stage {
|
||||
flex: 1 1 auto;
|
||||
.login-brand-disclaimer {
|
||||
margin: 12px 0 0;
|
||||
|
||||
display: grid;
|
||||
font-size: var(--font-size-aux);
|
||||
|
||||
place-items: center;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
padding: 48px 24px;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 400px;
|
||||
width: var(--login-card-width);
|
||||
|
||||
max-width: calc(100vw - 48px);
|
||||
|
||||
padding: 32px;
|
||||
padding: var(--login-card-pad);
|
||||
|
||||
border: 1px solid var(--border-strong);
|
||||
|
||||
@@ -1865,7 +2030,7 @@ button.account-role-badge:focus-visible {
|
||||
.login-card-title {
|
||||
margin: 0;
|
||||
|
||||
font-size: 22px;
|
||||
font-size: var(--login-card-title-size);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
@@ -1920,16 +2085,14 @@ button.account-role-badge:focus-visible {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-portal .form-field input {
|
||||
height: 38px;
|
||||
.login-portal .form-field input.is-invalid {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
width: 100%;
|
||||
|
||||
height: 40px;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: var(--login-submit-height);
|
||||
}
|
||||
|
||||
.login-spinner {
|
||||
@@ -1988,10 +2151,7 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-back,
|
||||
.login-add,
|
||||
.login-manage,
|
||||
.login-account-enter,
|
||||
.login-account-remove {
|
||||
.login-manage {
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
@@ -2010,15 +2170,27 @@ button.account-role-badge:focus-visible {
|
||||
}
|
||||
|
||||
.login-portal .login-add {
|
||||
display: block;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 44px;
|
||||
|
||||
margin-top: 8px;
|
||||
margin-top: 12px;
|
||||
|
||||
text-align: left;
|
||||
border: 1px dashed var(--border-strong);
|
||||
|
||||
border-radius: var(--size-radius-md);
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: var(--action);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-portal .login-manage {
|
||||
@@ -2026,33 +2198,67 @@ button.account-role-badge:focus-visible {
|
||||
|
||||
width: 100%;
|
||||
|
||||
min-height: 40px;
|
||||
min-height: 36px;
|
||||
|
||||
margin-top: 8px;
|
||||
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.login-account-list {
|
||||
display: grid;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-account-row {
|
||||
.login-manage-toolbar {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
min-height: 58px;
|
||||
gap: 12px;
|
||||
|
||||
padding: 0 14px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.login-manage-hint {
|
||||
margin: 0;
|
||||
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.login-manage-done {
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: var(--action);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-account-list {
|
||||
display: grid;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-account-row {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 12px;
|
||||
|
||||
min-height: var(--login-account-row-min);
|
||||
|
||||
padding: 10px 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
|
||||
@@ -2061,6 +2267,10 @@ button.account-role-badge:focus-visible {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.login-account-row.is-switchable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-account-row.is-current {
|
||||
border-color: var(--action);
|
||||
}
|
||||
@@ -2068,33 +2278,135 @@ button.account-role-badge:focus-visible {
|
||||
.login-account-row.is-confirming {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
gap: 10px;
|
||||
|
||||
padding: 12px 14px;
|
||||
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.login-avatar {
|
||||
display: grid;
|
||||
|
||||
place-items: center;
|
||||
|
||||
width: var(--login-account-avatar);
|
||||
|
||||
height: var(--login-account-avatar);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
color: #fff;
|
||||
|
||||
font-size: var(--font-size-body);
|
||||
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.login-avatar.tone-0 {
|
||||
background: var(--action);
|
||||
}
|
||||
|
||||
.login-avatar.tone-1 {
|
||||
background: var(--market-up);
|
||||
}
|
||||
|
||||
.login-avatar.tone-2 {
|
||||
background: var(--market-down);
|
||||
}
|
||||
|
||||
.login-avatar.tone-3 {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.login-account-meta {
|
||||
display: grid;
|
||||
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.login-account-name {
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: center;
|
||||
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.login-account-meta strong {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.login-account-meta span {
|
||||
.login-account-used {
|
||||
color: var(--text-tertiary);
|
||||
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.login-chip {
|
||||
display: inline-flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
min-height: 18px;
|
||||
|
||||
padding: 0 6px;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
background: var(--surface-muted);
|
||||
|
||||
color: var(--text-secondary);
|
||||
|
||||
font-size: var(--font-size-aux);
|
||||
}
|
||||
|
||||
.login-chip-current {
|
||||
background: var(--action-soft);
|
||||
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
.login-chip-member {
|
||||
background: var(--warning-soft);
|
||||
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.login-account-check {
|
||||
color: var(--action);
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-account-remove {
|
||||
display: grid;
|
||||
|
||||
place-items: center;
|
||||
|
||||
width: 28px;
|
||||
|
||||
height: 28px;
|
||||
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
color: var(--text-tertiary);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-account-remove:hover {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.login-confirm-copy {
|
||||
margin: 0;
|
||||
|
||||
@@ -2107,6 +2419,18 @@ button.account-role-badge:focus-visible {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) {
|
||||
.login-brand {
|
||||
width: var(--login-brand-wide-share);
|
||||
|
||||
min-width: var(--login-brand-cap);
|
||||
|
||||
max-width: none;
|
||||
|
||||
flex-basis: var(--login-brand-wide-share);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.login-portal {
|
||||
flex-direction: column;
|
||||
@@ -2115,22 +2439,21 @@ button.account-role-badge:focus-visible {
|
||||
.login-brand {
|
||||
width: 100%;
|
||||
|
||||
min-width: 0;
|
||||
|
||||
max-width: none;
|
||||
|
||||
flex-basis: auto;
|
||||
|
||||
padding: 20px 20px 16px;
|
||||
}
|
||||
|
||||
.login-brand-lead,
|
||||
.login-brand-stats {
|
||||
.login-brand-copy,
|
||||
.login-brand-market,
|
||||
.login-brand-disclaimer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-brand-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.login-brand-kicker {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.login-stage {
|
||||
padding: 28px 16px 40px;
|
||||
}
|
||||
|
||||
@@ -147,6 +147,24 @@
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 220ms;
|
||||
--login-brand-gradient: linear-gradient(165deg, #0c1e4a, #16307c, #2153cc);
|
||||
--login-brand-share: 34%;
|
||||
--login-brand-min: 420px;
|
||||
--login-brand-cap: 560px;
|
||||
--login-brand-wide-share: 29.2%;
|
||||
--login-brand-pad: 36px 40px 24px;
|
||||
--login-brand-mark-size: 44px;
|
||||
--login-brand-name-size: 16px;
|
||||
--login-hero-size: 28px;
|
||||
--login-card-width: 408px;
|
||||
--login-card-pad: 32px;
|
||||
--login-card-title-size: 22px;
|
||||
--login-account-row-min: 72px;
|
||||
--login-account-avatar: 40px;
|
||||
--login-submit-height: 40px;
|
||||
--login-stat-chip-bg: rgba(8, 12, 24, 0.48);
|
||||
--login-candle-up: #e07078;
|
||||
--login-candle-down: #3db88a;
|
||||
--login-trend-line: rgba(244, 247, 255, 0.88);
|
||||
|
||||
--font-size-aux: 11.5px;
|
||||
--font-size-caption: 12.5px;
|
||||
@@ -516,6 +534,10 @@
|
||||
--warning-line-strong: #66502d;
|
||||
--control-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
--login-brand-gradient: linear-gradient(165deg, #080c18, #0e1730, #14224a);
|
||||
--login-stat-chip-bg: rgba(6, 8, 16, 0.58);
|
||||
--login-candle-up: #f06d73;
|
||||
--login-candle-down: #43bc8a;
|
||||
--login-trend-line: rgba(232, 236, 244, 0.9);
|
||||
--dialog-backdrop: var(--backdrop);
|
||||
--ladder-level-1: #2d2426;
|
||||
--ladder-level-2: #2b2822;
|
||||
|
||||
Reference in New Issue
Block a user