Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 064b2ce6 by Archer Committed by GitHub
Options

fix: ui (#6642)

parent 0ce410d7
Showing with 52 additions and 7 deletions
packages/web/components/common/DateRangePicker/index.tsx
...@@ -89,20 +89,42 @@ const DateRangePicker = ({ ...@@ -89,20 +89,42 @@ const DateRangePicker = ({
<Card <Card
position={'absolute'} position={'absolute'}
zIndex={1} zIndex={1}
css={{ p={3}
'--rdp-background-color': '#d6e8ff',
'--rdp-accent-color': '#0000ff'
}}
{...(popPosition === 'top' {...(popPosition === 'top'
? { ? {
bottom: '40px' bottom: '40px'
} }
: {})} : {})}
> >
<Box
sx={{
'.rdp-day_button:hover:not(:disabled)': {
backgroundColor: '#E1EAFF'
},
'.rdp-range_start .rdp-day_button, .rdp-range_end .rdp-day_button': {
backgroundColor: '#3370FF',
color: 'white',
border: 'none'
},
'.rdp-range_start .rdp-day_button:hover, .rdp-range_end .rdp-day_button:hover': {
backgroundColor: '#2860E0'
},
'.rdp-button_previous:hover, .rdp-button_next:hover': {
backgroundColor: '#F0F4FF',
borderRadius: '6px'
}
}}
>
<DayPicker <DayPicker
locale={zhCN} locale={zhCN}
id="test" id="test"
mode="range" mode="range"
style={
{
'--rdp-accent-color': '#3370FF',
'--rdp-accent-background-color': '#E1EAFF'
} as React.CSSProperties
}
defaultMonth={defaultDate.to} defaultMonth={defaultDate.to}
selected={range} selected={range}
disabled={[ disabled={[
...@@ -153,6 +175,7 @@ const DateRangePicker = ({ ...@@ -153,6 +175,7 @@ const DateRangePicker = ({
</Flex> </Flex>
} }
/> />
</Box>
</Card> </Card>
)} )}
</Box> </Box>
......
packages/web/components/common/DateTimePicker/index.tsx
...@@ -136,14 +136,35 @@ const DateTimePicker = ({ ...@@ -136,14 +136,35 @@ const DateTimePicker = ({
top={`${position.top}px`} top={`${position.top}px`}
left={`${position.left}px`} left={`${position.left}px`}
zIndex={1500} zIndex={1500}
css={{ p={3}
'--rdp-background-color': '#d6e8ff', >
'--rdp-accent-color': '#0000ff' <Box
sx={{
'.rdp-day_button:hover:not(:disabled)': {
backgroundColor: '#E1EAFF'
},
'.rdp-selected .rdp-day_button': {
backgroundColor: '#3370FF',
color: 'white',
border: 'none'
},
'.rdp-selected .rdp-day_button:hover': {
backgroundColor: '#2860E0'
},
'.rdp-button_previous:hover, .rdp-button_next:hover': {
backgroundColor: '#F0F4FF',
borderRadius: '6px'
}
}} }}
> >
<DayPicker <DayPicker
locale={zhCN} locale={zhCN}
mode="single" mode="single"
style={
{
'--rdp-accent-color': '#3370FF'
} as React.CSSProperties
}
defaultMonth={selectedDate} defaultMonth={selectedDate}
selected={selectedDate} selected={selectedDate}
disabled={disabled} disabled={disabled}
...@@ -153,6 +174,7 @@ const DateTimePicker = ({ ...@@ -153,6 +174,7 @@ const DateTimePicker = ({
setShowSelected(false); setShowSelected(false);
}} }}
/> />
</Box>
</Card> </Card>
</Portal> </Portal>
)} )}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment