update(Player): styles

src/components/AudioPlayer/Player.tsx

@@ -177,7 +177,7 @@ export default function AudioPlayer({
   }, []);
 
   return (
-    <div className={`flex justify-between w-1200px h-full ${className}`}>
+    <div className={`flex justify-between w-1200px h-full pt-6px ${className}`}>
       {/* left */}
       <div className="flex flex-row w-fit h-fit mt-22px">
         {/* 专辑封面 */}
@@ -191,60 +191,57 @@ export default function AudioPlayer({
         </div>
 
         {/* 歌曲信息 */}
-        <div className="w-183px ml-15px mr-36px cursor-default">
+        <div className="w-183px ml-15px cursor-default">
           {/* <AutoScrollContainer key={audio?.id} auto hover width="140px" speed={50}> */}
           {/* <div className="w-auto h-auto"> */}
-          <p className="mt-2px text-17px leading-24px text-base text-overflow">{audio?.title ?? ''}</p>
+          <p className="mt-2px text-15px leading-24px text-base text-overflow">{audio?.title ?? ''}</p>
-          <p className="text-13px leading-18px mt-2px text-[rgba(0,0,0,0.7)] text-overflow">{`${audio?.artist}/${audio?.album}`}</p>
+          <p className="text-12px leading-18px mt-2px text-[rgba(0,0,0,0.7)] text-overflow">{`${audio?.artist}/${audio?.album}`}</p>
           {/* </div> */}
           {/* </AutoScrollContainer> */}
         </div>
       </div>
 
-      <div className="flex h-full">
+      {/* center */}
-        {/* center */}
+      <div className="flex flex-col items-center h-full">
-        <div className="flex flex-col items-center h-full">
+        {/* 按钮 */}
-          {/* 按钮 */}
+        <div className="flex items-center gap-18px h-fit mt-9px">
-          <div className="flex items-center gap-24px h-fit mt-11px">
+          <NextButton className="rotate-180" onClick={() => handleSwitchAudio(-1)} />
-            <NextButton className="rotate-180" onClick={() => handleSwitchAudio(-1)} />
+          <PlayButton playState={playState} size={38} onClick={handlePlay} />
-            <PlayButton playState={playState} size={40} onClick={handlePlay} />
+          <NextButton onClick={() => handleSwitchAudio(1)} />
-            <NextButton onClick={() => handleSwitchAudio(1)} />
-          </div>
-
-          {/* 播放进度 */}
-          <div className="flex items-end justify-between h-fit mt-6px gap-6px">
-            {/* 播放时长 */}
-            <span className="block w-27px text-11px leading-14px text-center text-#000">
-              {secondToDate(trackProgress)}
-            </span>
-
-            {/* 进度条 */}
-            <ProgressBar
-              value={trackProgress}
-              duration={duration}
-              onChange={(value: number) => handleChangeProgress(value)}
-            />
-
-            {/* 总时长 */}
-            <span className="block w-27px text-11px leading-14px text-center text-#000">
-              {secondToDate(duration || 0)}
-            </span>
-          </div>
         </div>
 
-        {/* right */}
+        {/* 播放进度 */}
-        <div className="flex items-end ml-39px">
+        <div className="flex items-center justify-between h-fit mt-6px gap-6px">
-          <div className="flex h-full items-end h-fit mb-29px gap-18px">
+          {/* 播放时长 */}
-            {/* 收藏歌曲 */}
+          <span className="block w-27px text-11px leading-14px text-right text-#000">
-            {<CollectButton id={audio.id || '0'} active={audio.haveCollect} collectType="0" color="dark" />}
+            {secondToDate(trackProgress)}
-            {/* 播放顺序 */}
+          </span>
-            <OrderButton
+
-              order={playOrder}
+          {/* 进度条 */}
-              onClick={handleChangeOrder}
+          <ProgressBar
-              className={`mb-1px ${playListInfo.type === 'fm' && 'hidden'}`}
+            value={trackProgress}
-            />
+            duration={duration}
-            <VolumeButton value={volume} onChange={handleChangeVolumn} className="mb-1px" />
+            onChange={(value: number) => handleChangeProgress(value)}
-          </div>
+            className="w-710px"
+          />
+
+          {/* 总时长 */}
+          <span className="block w-27px text-11px leading-14px text-left text-#000">{secondToDate(duration || 0)}</span>
+        </div>
+      </div>
+
+      {/* right */}
+      <div className="flex items-end h-full">
+        <div className="flex h-full items-end h-fit mb-21px gap-18px">
+          {/* 收藏歌曲 */}
+          {<CollectButton id={audio.id || '0'} active={audio.haveCollect} collectType="0" color="dark" />}
+          {/* 播放顺序 */}
+          <OrderButton
+            order={playOrder}
+            onClick={handleChangeOrder}
+            className={`mb-1px ${playListInfo.type === 'fm' && 'hidden'}`}
+          />
+          <VolumeButton value={volume} onChange={handleChangeVolumn} className="mb-1px" />
         </div>
       </div>
     </div>

src/components/AudioPlayer/PlayerBar.tsx

@@ -59,7 +59,7 @@ const PlayerBar = ({ className }: { className?: string }) => {
     <div className={`fixed bottom-0 w-full h-auto z-10 ${className}`}>
       {/* 播放器 */}
       <div
-        className="fixed bottom-0 w-full h-[90px] bg-[#fff] bg-op-80 backdrop-blur-[20px] shadow-lg shadow-black-[0_0_10px] z-10 transition-bottom duration-600`"
+        className="fixed bottom-0 w-full h-[88px] bg-[#fff] bg-op-80 backdrop-blur-[20px] shadow-lg shadow-black-[0_0_10px] z-10 transition-bottom duration-600`"
         style={{ bottom: audioId || showCard ? 0 : -80 }}
       >
         <Player className="mx-auto" onSwitchShowCard={() => setShowCard(!showCard)} />

src/components/AudioPlayer/PlayerCard.tsx

@@ -82,7 +82,7 @@ export default function PlayerCard({ show, className }: Prop) {
     >
       <Header type="client" />
 
-      <div className="flex justify-between w-1200px h-[calc(100vh_-_80px_-_90px)] pb-60px mx-auto ">
+      <div className="flex justify-between w-1200px h-[calc(100vh_-_80px_-_88px)] pb-60px mx-auto ">
         {/* 单曲信息 */}
         <div className="mt-68px">
           {/* 专辑封面区域 */}
@@ -134,7 +134,7 @@ export default function PlayerCard({ show, className }: Prop) {
           </div>
 
           {/* 歌词 */}
-          <div className={`mt-[30px] w-[340px]`} style={{ height: 'calc(100vh - 540px - 60px - 90px)' }}>
+          <div className={`mt-[30px] w-[340px]`} style={{ height: 'calc(100vh - 540px - 60px - 88px)' }}>
             {lrc ? (
               <Lrc lrc={lrc} className="h-full" />
             ) : (

src/components/AudioPlayer/widget/index.module.css

@@ -5,7 +5,6 @@
   align-items: center;
   user-select: none;
   touch-action: none;
-  width: 718px;
   height: 11px;
   cursor: pointer;
 }