feat(mobile): 重做员工端首页、问答和训练页视觉
统一员工端 tabBar、共享卡片和三大核心页面的视觉基础，同时保持现有移动端业务流程不变。补充 H5 输入兼容、页面结构和训练回滚行为的回归测试。
This commit is contained in:
+138
-63
@@ -1,17 +1,41 @@
|
||||
page {
|
||||
min-height: 100%;
|
||||
background: #f5f7fb;
|
||||
color: #172033;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: #f3f5f7;
|
||||
color: #182230;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--mobile-shell-max-width: 430px;
|
||||
--surface: #ffffff;
|
||||
--canvas: #f3f5f7;
|
||||
--ink: #182230;
|
||||
--muted: #647083;
|
||||
--line: #dfe4ea;
|
||||
--brand: #e70014;
|
||||
--brand-pressed: #bd0010;
|
||||
--knowledge: #315b8f;
|
||||
--success: #168243;
|
||||
--warning: #a86100;
|
||||
--radius: 8px;
|
||||
--employee-bg: #f4f6fb;
|
||||
--employee-bg-soft: #f8fbff;
|
||||
--employee-surface: #ffffff;
|
||||
--employee-primary: #2f6bff;
|
||||
--employee-primary-soft: #eaf1ff;
|
||||
--employee-success: #34b368;
|
||||
--employee-warning: #ff9b3d;
|
||||
--employee-danger: #ff6b5f;
|
||||
--employee-text: #182230;
|
||||
--employee-muted: #6b7280;
|
||||
--employee-line: rgba(47, 74, 117, 0.08);
|
||||
--employee-card-radius: 24px;
|
||||
--employee-chip-radius: 18px;
|
||||
--employee-card-shadow: 0 16px 40px rgba(47, 107, 255, 0.1);
|
||||
}
|
||||
|
||||
view,
|
||||
text,
|
||||
input,
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -19,9 +43,9 @@ button {
|
||||
button {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
button::after {
|
||||
@@ -30,29 +54,63 @@ button::after {
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 20px 16px 32px;
|
||||
padding: 22px 16px 96px;
|
||||
}
|
||||
|
||||
.employee-page-shell {
|
||||
background: linear-gradient(180deg, var(--employee-bg-soft) 0%, var(--employee-bg) 100%);
|
||||
}
|
||||
|
||||
.employee-card {
|
||||
border: 1px solid var(--employee-line);
|
||||
border-radius: var(--employee-card-radius);
|
||||
background: var(--employee-surface);
|
||||
box-shadow: var(--employee-card-shadow);
|
||||
}
|
||||
|
||||
.employee-kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--employee-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.employee-section-title {
|
||||
color: var(--employee-text);
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.employee-section-subtitle {
|
||||
color: var(--employee-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
color: #0f172a;
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #64748b;
|
||||
margin-top: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.subpage-header {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.subpage-heading {
|
||||
@@ -62,66 +120,68 @@ button::after {
|
||||
|
||||
.subpage-back-button {
|
||||
display: flex;
|
||||
flex: 0 0 44px;
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
flex: 0 0 40px;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #1e293b;
|
||||
font-size: 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 16px;
|
||||
padding: 18px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 2px rgba(24, 34, 48, 0.04);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #64748b;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.secondary-button,
|
||||
.ghost-button {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
min-height: 46px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: #e60012;
|
||||
background: var(--brand);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 10px rgba(231, 0, 20, 0.16);
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
border: 1px solid #cbd5e1;
|
||||
background: #ffffff;
|
||||
color: #1e293b;
|
||||
border: 1px solid #c9d1db;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
background: #eef3f9;
|
||||
color: #38506c;
|
||||
}
|
||||
|
||||
.primary-button[disabled],
|
||||
@@ -132,12 +192,12 @@ button::after {
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
min-height: 46px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
border: 1px solid #c9d1db;
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -145,10 +205,10 @@ button::after {
|
||||
width: 100%;
|
||||
min-height: 112px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #0f172a;
|
||||
border: 1px solid #c9d1db;
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -165,26 +225,30 @@ button::after {
|
||||
}
|
||||
|
||||
.chip {
|
||||
min-height: 34px;
|
||||
min-height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
border: 1px solid #dbe1e8;
|
||||
border-radius: var(--radius);
|
||||
background: #f8fafc;
|
||||
color: #3d4b5f;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-top: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
border: 1px solid #f0d7a7;
|
||||
border-left: 3px solid #d38a13;
|
||||
border-radius: var(--radius);
|
||||
background: #fffaf0;
|
||||
color: #80520f;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.supervisor-access-panel {
|
||||
border-left: 4px solid #e60012;
|
||||
border-left: 4px solid var(--brand);
|
||||
}
|
||||
|
||||
.supervisor-access-copy {
|
||||
@@ -209,11 +273,22 @@ button::after {
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 24px 12px;
|
||||
color: #64748b;
|
||||
padding: 28px 12px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.primary-button:active {
|
||||
background: var(--brand-pressed);
|
||||
}
|
||||
|
||||
uni-tabbar.uni-tabbar-bottom,
|
||||
uni-tabbar.uni-tabbar-bottom .uni-tabbar {
|
||||
border-top: 1px solid var(--line) !important;
|
||||
background: rgba(255, 255, 255, 0.98) !important;
|
||||
box-shadow: 0 -10px 30px rgba(47, 107, 255, 0.08);
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
:root {
|
||||
--mobile-shell-side-offset: calc((100vw - var(--mobile-shell-max-width)) / 2);
|
||||
@@ -234,8 +309,8 @@ button::after {
|
||||
|
||||
uni-app {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fb;
|
||||
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
|
||||
background: var(--canvas);
|
||||
box-shadow: 0 0 0 1px rgba(24, 34, 48, 0.07), 0 16px 42px rgba(24, 34, 48, 0.1);
|
||||
}
|
||||
|
||||
uni-tabbar.uni-tabbar-bottom {
|
||||
|
||||
Reference in New Issue
Block a user