From affdb25789380584efc3befc8aedaccc29a3787d Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Thu, 11 Apr 2024 16:15:31 +0800
Subject: [PATCH] update(AudioPlayer): Update progress bar styles.

---
 src/components/AudioPlayer/PlayerControl.tsx |  6 ++--
 src/components/AudioPlayer/index.module.css  | 33 ++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/components/AudioPlayer/index.module.css

diff --git a/src/components/AudioPlayer/PlayerControl.tsx b/src/components/AudioPlayer/PlayerControl.tsx
index 1d5446e..67d0837 100644
--- a/src/components/AudioPlayer/PlayerControl.tsx
+++ b/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 }}
           />
diff --git a/src/components/AudioPlayer/index.module.css b/src/components/AudioPlayer/index.module.css
new file mode 100644
index 0000000..2f30260
--- /dev/null
+++ b/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;
+}