style(EventDetailModal): 优化弹窗 Tab 和关闭按钮样式
- Tab 颜色方案调整:全部=紫罗兰色,计划=金色,复盘=绿色,系统=蓝色 - 未选中态统一使用银白色主题 - 选中态增强高亮效果(boxShadow、更明显的边框) - 标题颜色调整为 rgba(255,255,255,0.85) - 关闭按钮增强可见性:添加背景色、固定尺寸、圆角 - 弹窗背景色与 /home/center 页面保持一致 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -53,12 +53,26 @@
|
|||||||
|
|
||||||
// 关闭按钮
|
// 关闭按钮
|
||||||
.ant-modal-close {
|
.ant-modal-close {
|
||||||
color: @color-text-secondary;
|
color: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
.ant-modal-close-x {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @color-gold-400;
|
color: @color-gold-400 !important;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: rgba(212, 175, 55, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ const FILTER_OPTIONS: FilterOption[] = [
|
|||||||
key: 'all',
|
key: 'all',
|
||||||
label: '全部',
|
label: '全部',
|
||||||
icon: LayoutGrid,
|
icon: LayoutGrid,
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
color: '#9B59B6', // 紫罗兰色,汇总概念用独特色
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'plan',
|
key: 'plan',
|
||||||
@@ -177,7 +177,9 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
|||||||
onCancel={onClose}
|
onCancel={onClose}
|
||||||
title={
|
title={
|
||||||
<HStack spacing={2}>
|
<HStack spacing={2}>
|
||||||
<Text>{selectedDate?.format('YYYY年MM月DD日') || ''} 的事件</Text>
|
<Text color="rgba(255, 255, 255, 0.85)" fontWeight="500">
|
||||||
|
{selectedDate?.format('YYYY年MM月DD日') || ''} 的事件
|
||||||
|
</Text>
|
||||||
<Badge
|
<Badge
|
||||||
bg="rgba(212, 175, 55, 0.15)"
|
bg="rgba(212, 175, 55, 0.15)"
|
||||||
color="#D4AF37"
|
color="#D4AF37"
|
||||||
@@ -197,6 +199,13 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
|||||||
className="event-detail-modal"
|
className="event-detail-modal"
|
||||||
rootClassName="event-detail-modal-root"
|
rootClassName="event-detail-modal-root"
|
||||||
styles={{
|
styles={{
|
||||||
|
content: {
|
||||||
|
background: 'rgba(15, 15, 26, 0.95)',
|
||||||
|
border: '1px solid rgba(212, 175, 55, 0.2)',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
background: 'transparent',
|
||||||
|
},
|
||||||
body: { paddingTop: 8, paddingBottom: 24 },
|
body: { paddingTop: 8, paddingBottom: 24 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -228,21 +237,23 @@ export const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
|||||||
key={option.key}
|
key={option.key}
|
||||||
size="sm"
|
size="sm"
|
||||||
variant={isActive ? 'solid' : 'ghost'}
|
variant={isActive ? 'solid' : 'ghost'}
|
||||||
bg={isActive ? hexToRgba(option.color, 0.15) : 'transparent'}
|
bg={isActive ? hexToRgba(option.color, 0.2) : 'rgba(168, 180, 192, 0.05)'}
|
||||||
color={isActive ? option.color : 'rgba(255, 255, 255, 0.6)'}
|
color={isActive ? option.color : 'rgba(168, 180, 192, 0.6)'}
|
||||||
border="1px solid"
|
border="1px solid"
|
||||||
borderColor={isActive ? hexToRgba(option.color, 0.4) : 'rgba(255, 255, 255, 0.1)'}
|
borderColor={isActive ? hexToRgba(option.color, 0.5) : 'rgba(168, 180, 192, 0.15)'}
|
||||||
|
boxShadow={isActive ? `0 0 12px ${hexToRgba(option.color, 0.3)}` : 'none'}
|
||||||
_hover={{
|
_hover={{
|
||||||
bg: hexToRgba(option.color, 0.1),
|
bg: hexToRgba(option.color, 0.12),
|
||||||
borderColor: hexToRgba(option.color, 0.3),
|
borderColor: hexToRgba(option.color, 0.3),
|
||||||
|
color: hexToRgba(option.color, 0.9),
|
||||||
}}
|
}}
|
||||||
onClick={() => setActiveFilter(option.key)}
|
onClick={() => setActiveFilter(option.key)}
|
||||||
leftIcon={option.icon ? <Icon as={option.icon} boxSize={3.5} /> : undefined}
|
leftIcon={option.icon ? <Icon as={option.icon} boxSize={3.5} /> : undefined}
|
||||||
rightIcon={
|
rightIcon={
|
||||||
count > 0 ? (
|
count > 0 ? (
|
||||||
<Badge
|
<Badge
|
||||||
bg={isActive ? hexToRgba(option.color, 0.25) : 'rgba(255, 255, 255, 0.1)'}
|
bg={isActive ? hexToRgba(option.color, 0.3) : 'rgba(168, 180, 192, 0.1)'}
|
||||||
color={isActive ? option.color : 'rgba(255, 255, 255, 0.5)'}
|
color={isActive ? option.color : 'rgba(168, 180, 192, 0.6)'}
|
||||||
fontSize="10px"
|
fontSize="10px"
|
||||||
px={1.5}
|
px={1.5}
|
||||||
borderRadius="full"
|
borderRadius="full"
|
||||||
|
|||||||
Reference in New Issue
Block a user