调整时间轴样式

src/components/olmap/core/Controls/Timeline.tsx

@@ -39,6 +39,23 @@ interface TimelineProps {
   schemeType?: string;
 }
 
+const timelineIconButtonSx = {
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  flexShrink: 0,
+  overflow: "hidden",
+  "&:hover": {
+    borderRadius: "50%",
+  },
+  "&.Mui-focusVisible": {
+    borderRadius: "50%",
+  },
+  "& .MuiTouchRipple-root": {
+    borderRadius: "50%",
+  },
+} as const;
+
 const NOOP_SET_CURRENT_TIME = (_: any) => undefined;
 const NOOP_SET_SELECTED_DATE = (_: any) => undefined;
 
@@ -665,7 +682,7 @@ const Timeline: React.FC<TimelineProps> = ({
     <Draggable nodeRef={draggableRef} handle=".drag-handle">
       <div
         ref={draggableRef}
-        className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300"
+        className="absolute bottom-4 left-1/2 z-10 w-[950px] max-w-[calc(100vw-2rem)] -translate-x-1/2 opacity-90 transition-opacity duration-300 hover:opacity-100"
       >
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
           <Paper
@@ -723,6 +740,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       onClick={handleDayStepBackward}
                       size="small"
                       disabled={disableDateSelection}
+                      sx={timelineIconButtonSx}
                     >
                       <FiSkipBack />
                     </IconButton>
@@ -757,6 +775,7 @@ const Timeline: React.FC<TimelineProps> = ({
                         selectedDate.toDateString() ===
                           new Date().toDateString()
                       }
+                      sx={timelineIconButtonSx}
                     >
                       <FiSkipForward />
                     </IconButton>
@@ -785,6 +804,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="primary"
                       onClick={handleStepBackward}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       <TbRewindBackward15 />
                     </IconButton>
@@ -795,6 +815,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="primary"
                       onClick={isPlaying ? handlePause : handlePlay}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       {isPlaying ? <Pause /> : <PlayArrow />}
                     </IconButton>
@@ -805,6 +826,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="primary"
                       onClick={handleStepForward}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       <TbRewindForward15 />
                     </IconButton>
@@ -815,6 +837,7 @@ const Timeline: React.FC<TimelineProps> = ({
                       color="secondary"
                       onClick={handleStop}
                       size="small"
+                      sx={timelineIconButtonSx}
                     >
                       <Stop />
                     </IconButton>