style: audio player, usage chart
This commit is contained in:
@@ -50,13 +50,12 @@ const useStyles = createStyles(({ css, token }) => {
|
|||||||
return {
|
return {
|
||||||
wrapper: css`
|
wrapper: css`
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 320px;
|
min-width: 300px;
|
||||||
width: 320px;
|
|
||||||
height: 54px;
|
height: 54px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
padding: 6px 10px;
|
padding: 8px 10px;
|
||||||
background-color: ${isDarkMode
|
background-color: ${isDarkMode
|
||||||
? 'var(--ant-color-fill-secondary)'
|
? 'var(--ant-color-fill-secondary)'
|
||||||
: '#F1F3F4'};
|
: '#F1F3F4'};
|
||||||
@@ -351,12 +350,12 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
|
|||||||
!playOn ? (
|
!playOn ? (
|
||||||
<IconFont
|
<IconFont
|
||||||
type="icon-playcircle-fill"
|
type="icon-playcircle-fill"
|
||||||
style={{ fontSize: '22px' }}
|
style={{ fontSize: '24px' }}
|
||||||
></IconFont>
|
></IconFont>
|
||||||
) : (
|
) : (
|
||||||
<IconFont
|
<IconFont
|
||||||
type="icon-stopcircle-fill"
|
type="icon-stopcircle-fill"
|
||||||
style={{ fontSize: '22px' }}
|
style={{ fontSize: '24px' }}
|
||||||
></IconFont>
|
></IconFont>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -364,7 +363,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
|
|||||||
|
|
||||||
<div className="slider">
|
<div className="slider">
|
||||||
<div className="flex-center flex-between file-name">
|
<div className="flex-center flex-between file-name">
|
||||||
<AutoTooltip ghost maxWidth={220}>
|
<AutoTooltip ghost maxWidth={200}>
|
||||||
<span>{name}</span>
|
<span>{name}</span>
|
||||||
</AutoTooltip>
|
</AutoTooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ const ExportData: React.FC<{
|
|||||||
></ModalFooter>
|
></ModalFooter>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Space>
|
<Space size={12}>
|
||||||
<DatePicker.RangePicker
|
<DatePicker.RangePicker
|
||||||
style={{ width: 240 }}
|
style={{ width: 240 }}
|
||||||
defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
|
defaultValue={[dayjs().add(-30, 'd'), dayjs()]}
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ export const baseColorMap = {
|
|||||||
baseL2: 'rgba(13,171,219,0.8)',
|
baseL2: 'rgba(13,171,219,0.8)',
|
||||||
baseL1: 'rgba(0,34,255,0.8)',
|
baseL1: 'rgba(0,34,255,0.8)',
|
||||||
base: 'rgba(0,85,255,0.8)',
|
base: 'rgba(0,85,255,0.8)',
|
||||||
baseR1: 'rgba(0,187,204, 0.6)',
|
baseR1: 'rgb(102, 214, 224)',
|
||||||
baseR2: 'rgba(48,0,255,0.8)',
|
baseR2: 'rgba(48,0,255,0.8)',
|
||||||
baseR3: 'rgba(85,167,255,0.8)'
|
baseR3: 'rgba(85,167,255,0.8)'
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user