update(AudioPlayer): Update progress bar styles.

src/components/AudioPlayer/PlayerControl.tsx

@@ -4,6 +4,8 @@ import Image from 'next/image';
 
 import { secondToDate } from '@/utils/time';
 
+import styles from './index.module.css';
+
 import { AutoScrollContainer } from '@/components';
 
 interface Props {
@@ -69,14 +71,14 @@ export default function AudioPlayer({
       {/* progress bar */}
       <div className="h-full mt-[29px]">
         {/* bar */}
-        <div className="h-full cursor-pointer">
+        <div className="h-full cursor-pointer w-[600px] h-[3px]">
           <input
             type="range"
             value={trackProgress}
             step="1"
             min="0"
             max={duration ? duration : `${duration}`}
-            className="w-[600px] h-[3px]"
+            className={styles['range-input']}
             onChange={(e) => onChangeProgress(e.target.value)}
             style={{ background: trackStyling }}
           />

src/components/AudioPlayer/index.module.css

@@ -0,0 +1,33 @@
+.range-input {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 3px;
+  border-radius: 5px; /* 圆角 */
+  background: ##181818; /* 背景颜色 */
+  outline: none; /* 去除默认的外边框 */
+  opacity: 1; /* 不选中时的透明度 */
+  -webkit-transition: 0.2s; /* 过渡效果 */
+  transition: opacity 0.2s;
+}
+
+.range-input:hover {
+  opacity: 0.9; /* 鼠标悬停时的透明度 */
+}
+
+.range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px; /* 拇指的宽度 */
+  height: 12px; /* 拇指的高度 */
+  border-radius: 50%; /* 将拇指变为圆形 */
+  background: #181818; /* 拇指的颜色 */
+  cursor: pointer; /* 鼠标样式 */
+}
+
+.range-input::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #181818;
+  cursor: pointer;
+}