mirror of
https://github.com/Cccc-owo/CheckInApp.git
synced 2026-06-17 14:06:28 +00:00
style: fix login view segmented compoment
This commit is contained in:
@@ -202,6 +202,38 @@ export default function getAntdTheme(isDark = false) {
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// === Segmented 组件 ===
|
||||
Segmented: {
|
||||
borderRadius: 12,
|
||||
borderRadiusSM: 8,
|
||||
// 根据源码,Segmented 使用这些 token 映射:
|
||||
// labelColor <- colorTextLabel
|
||||
// labelColorHover <- colorText
|
||||
// bgColor <- colorBgLayout
|
||||
// bgColorHover <- colorFillSecondary
|
||||
// bgColorSelected <- colorBgElevated
|
||||
|
||||
// 未选中项文字颜色
|
||||
colorTextLabel: isDark ? '#938f99' : '#79747e',
|
||||
labelColor: isDark ? '#938f99' : '#79747e',
|
||||
|
||||
// 选中项和 hover 时的文字颜色
|
||||
colorText: isDark ? '#ffffff' : '#1c1b1f',
|
||||
labelColorHover: isDark ? '#ffffff' : '#1c1b1f',
|
||||
|
||||
// 整体背景色
|
||||
colorBgLayout: isDark ? '#26252a' : '#f5f5f5',
|
||||
bgColor: isDark ? '#26252a' : '#f5f5f5',
|
||||
|
||||
// hover 背景色(降低透明度,保持文字可见)
|
||||
colorFillSecondary: isDark ? 'rgba(129, 199, 132, 0.12)' : 'rgba(76, 175, 80, 0.08)',
|
||||
bgColorHover: isDark ? 'rgba(129, 199, 132, 0.12)' : 'rgba(76, 175, 80, 0.08)',
|
||||
|
||||
// 选中项背景色(主题色)
|
||||
colorBgElevated: isDark ? '#81c784' : '#4caf50',
|
||||
bgColorSelected: isDark ? '#81c784' : '#4caf50',
|
||||
},
|
||||
|
||||
// === Tooltip 组件 ===
|
||||
Tooltip: {
|
||||
colorBgSpotlight: isDark ? '#313033' : '#f5f5f5', // Tooltip 背景色(跟随主题)
|
||||
|
||||
@@ -351,6 +351,12 @@ const handleLoginError = error => {
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式背景 */
|
||||
.dark .login-container {
|
||||
background: linear-gradient(135deg, #1a237e 0%, #4a148c 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
@@ -360,6 +366,11 @@ const handleLoginError = error => {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* 暗色模式卡片阴影 */
|
||||
.dark .login-card {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -368,12 +379,24 @@ const handleLoginError = error => {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式标题 */
|
||||
.dark .card-header h2 {
|
||||
color: #e6e1e5;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 10px 0 0 0;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式副标题 */
|
||||
.dark .subtitle {
|
||||
color: #cac4d0;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
@@ -389,12 +412,22 @@ const handleLoginError = error => {
|
||||
color: #2196f3;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.link-text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 暗色模式链接 */
|
||||
.dark .link-text {
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
.dark .link-text:hover {
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -411,6 +444,13 @@ const handleLoginError = error => {
|
||||
border-top: 1px dashed #e0e0e0;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 暗色模式提示注释 */
|
||||
.dark .tip-note {
|
||||
border-top-color: #49454f;
|
||||
color: #cac4d0;
|
||||
}
|
||||
|
||||
/* 确保 Ant Design Row 占满高度 */
|
||||
|
||||
Reference in New Issue
Block a user