mirror of
https://github.com/Cccc-owo/CheckInApp.git
synced 2026-06-17 05:56:29 +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',
|
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 组件 ===
|
||||||
Tooltip: {
|
Tooltip: {
|
||||||
colorBgSpotlight: isDark ? '#313033' : '#f5f5f5', // Tooltip 背景色(跟随主题)
|
colorBgSpotlight: isDark ? '#313033' : '#f5f5f5', // Tooltip 背景色(跟随主题)
|
||||||
|
|||||||
@@ -351,6 +351,12 @@ const handleLoginError = error => {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式背景 */
|
||||||
|
.dark .login-container {
|
||||||
|
background: linear-gradient(135deg, #1a237e 0%, #4a148c 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card {
|
.login-card {
|
||||||
@@ -360,6 +366,11 @@ const handleLoginError = error => {
|
|||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 暗色模式卡片阴影 */
|
||||||
|
.dark .login-card {
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -368,12 +379,24 @@ const handleLoginError = error => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式标题 */
|
||||||
|
.dark .card-header h2 {
|
||||||
|
color: #e6e1e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin: 10px 0 0 0;
|
margin: 10px 0 0 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式副标题 */
|
||||||
|
.dark .subtitle {
|
||||||
|
color: #cac4d0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-switch {
|
.mode-switch {
|
||||||
@@ -389,12 +412,22 @@ const handleLoginError = error => {
|
|||||||
color: #2196f3;
|
color: #2196f3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-text:hover {
|
.link-text:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 暗色模式链接 */
|
||||||
|
.dark .link-text {
|
||||||
|
color: #64b5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .link-text:hover {
|
||||||
|
color: #90caf9;
|
||||||
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
@@ -411,6 +444,13 @@ const handleLoginError = error => {
|
|||||||
border-top: 1px dashed #e0e0e0;
|
border-top: 1px dashed #e0e0e0;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式提示注释 */
|
||||||
|
.dark .tip-note {
|
||||||
|
border-top-color: #49454f;
|
||||||
|
color: #cac4d0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确保 Ant Design Row 占满高度 */
|
/* 确保 Ant Design Row 占满高度 */
|
||||||
|
|||||||
Reference in New Issue
Block a user