From a520e094195f5a13f6515309b536ff03a296d883 Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Thu, 9 May 2024 15:59:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(styles):=20header=20z-index=20=E8=BF=87?=
 =?UTF-8?q?=E4=BD=8E=EF=BC=8C=E5=AF=BC=E8=87=B4=E5=AD=90=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B1=82=E7=BA=A7=E4=BD=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AudioPlayer/widget/index.module.css | 3 +--
 src/components/Button/CollectButton.tsx            | 4 +++-
 src/components/Button/thumb.module.css             | 3 ++-
 src/components/Header/Header.tsx                   | 2 +-
 src/components/Header/index.module.css             | 2 +-
 src/components/Icon/heart.module.css               | 9 ++++++++-
 src/components/Search/Dropdown.tsx                 | 3 ++-
 src/components/Search/Input.tsx                    | 4 ++--
 src/components/Search/index.module.css             | 2 ++
 9 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/AudioPlayer/widget/index.module.css b/src/components/AudioPlayer/widget/index.module.css
index 7832ea6..bcafccc 100644
--- a/src/components/AudioPlayer/widget/index.module.css
+++ b/src/components/AudioPlayer/widget/index.module.css
@@ -91,7 +91,6 @@
 
 .VolumeBarContainer {
   box-shadow: 0px 6px 34px rgba(0, 0, 0, 0.1);
-  /* overflow: hidden; */
 }
 
 .VolumeBarContainer::before {
@@ -105,7 +104,7 @@
   height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
   box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */
   transform: scale(0.5);
-  pointer-events: none; /** 防止 userCard 点击事件失效 */
+  pointer-events: none; /** 防止子元素点击事件失效 */
   overflow: hidden;
 }
 
diff --git a/src/components/Button/CollectButton.tsx b/src/components/Button/CollectButton.tsx
index 3073c46..b4ba0a6 100644
--- a/src/components/Button/CollectButton.tsx
+++ b/src/components/Button/CollectButton.tsx
@@ -6,6 +6,8 @@ import { useEffect, useState } from 'react';
 
 import { useShallow } from 'zustand/react/shallow';
 
+import IconStyle from '@/components/Icon/heart.module.css';
+
 import { IconHeart } from '@/components';
 import { apiCollect } from '@/services';
 import { useAudioStore } from '@/store';
@@ -120,7 +122,7 @@ export default function CollectButton({
 
   return (
     <div
-      className={`flex flex-row items-center gap-[${gap}px] w-fit h-fit cursor-pointer group ${className}`}
+      className={`flex flex-row items-center gap-[${gap}px] w-fit h-fit cursor-pointer group ${IconStyle['collect-button']} ${className}`}
       onClick={handleCollect}
     >
       {iconPosition === 'left' && <IconHeart active={haveCollect} animateState={animate} color={color} />}
diff --git a/src/components/Button/thumb.module.css b/src/components/Button/thumb.module.css
index a85ca8f..531d994 100644
--- a/src/components/Button/thumb.module.css
+++ b/src/components/Button/thumb.module.css
@@ -12,7 +12,7 @@
 .thumb-svg {
   width: 100%;
   position: relative;
-  z-index: 9;
+  z-index: 2;
 }
 
 .thumb-path {
@@ -31,6 +31,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 3;
   opacity: 0;
 }
 
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3651a2b..0092ad1 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ import { Logo, Search } from '@/components';
 
 export default function Header({ type = 'server', className }: { type?: NextComponentType; className?: string }) {
   return (
-    <header className={`w-full h-80px z-2 ${className}`}>
+    <header className={`w-full h-80px z-10 ${className}`}>
       <div className="relative w-1200px h-full mx-auto flex items-center justify-between">
         <div className="relative flex items-center h-full">
           <Logo type={type} />
diff --git a/src/components/Header/index.module.css b/src/components/Header/index.module.css
index d6bd49e..06d94d7 100644
--- a/src/components/Header/index.module.css
+++ b/src/components/Header/index.module.css
@@ -13,5 +13,5 @@
   height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
   box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */
   transform: scale(0.5);
-  pointer-events: none; /** 防止 userCard 点击事件失效 */
+  pointer-events: none; /** 防止子元素点击事件失效 */
 }
diff --git a/src/components/Icon/heart.module.css b/src/components/Icon/heart.module.css
index a6beba6..51c8c5a 100644
--- a/src/components/Icon/heart.module.css
+++ b/src/components/Icon/heart.module.css
@@ -24,7 +24,7 @@
 .heart-svg {
   width: 100%;
   position: relative;
-  z-index: 9;
+  z-index: 2;
 }
 
 .heart-path {
@@ -42,6 +42,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 3;
   opacity: 0;
 }
 
@@ -59,6 +60,12 @@
   transition: stroke 0.2s ease-in-out;
 }
 
+/* 不起作用，暂留 */
+/* .collect-button:hover + svg .heart-path {
+  stroke: var(--hover-color);
+  transition: stroke 0.2s ease-in-out;
+} */
+
 /* 抖动 */
 .animate_touch {
   animation: touch 0.7s forwards ease-in;
diff --git a/src/components/Search/Dropdown.tsx b/src/components/Search/Dropdown.tsx
index 05be763..17e47f0 100644
--- a/src/components/Search/Dropdown.tsx
+++ b/src/components/Search/Dropdown.tsx
@@ -15,7 +15,8 @@ export default function SearchDropdown({ journalData, songData, className, onClo
 
   return (
     <div
-      className={`relative w-747px h-fit min-h-162px max-h-747px rounded-10px mt-10px pt-24px pb-40px pl-36px pr-18px border-1px border-#e1e1e1 bg-base z-11 overflow-auto ${style.dropdownScrollbar} ${className}`}
+      className={`relative w-747px h-fit max-h-747px rounded-10px mt-10px pt-24px pb-40px pl-36px pr-18px bg-base border-0.5px border-#e1e1e1 overflow-y-auto z-11 ${style.dropdownScrollbar} ${className}`}
+      style={{ boxShadow: '0px 6px 34px 0px rgba(0, 0, 0, 0.1)' }}
     >
       {haveData ? (
         <div className="h-fit">
diff --git a/src/components/Search/Input.tsx b/src/components/Search/Input.tsx
index e3e3176..4d97b9e 100644
--- a/src/components/Search/Input.tsx
+++ b/src/components/Search/Input.tsx
@@ -8,9 +8,9 @@ import IconSearch from './widget/IconSearch';
 
 export default function SearchInput({ className, onInput, onFocus }: IProps) {
   return (
-    <div className={`relative w-208px h-38px border-1px border-#fff ${className}`}>
+    <div className={`relative w-208px h-38px ${className}`}>
       <input
-        className="w-full h-full px-45px text-13px leading-38px text-#000/95 bg-transparent outline-none rounded-47px"
+        className="w-full h-full px-45px border-0.5px border-#e1e1e1 text-13px leading-38px text-#000/95 bg-transparent outline-none rounded-47px"
         onInput={(e: any) => onInput(e.target.value)}
         onFocus={onFocus}
         style={{ boxShadow: '0px 6px 34px 0px rgba(0, 0, 0, 0.1)' }}
diff --git a/src/components/Search/index.module.css b/src/components/Search/index.module.css
index e7968fa..8c1d29b 100644
--- a/src/components/Search/index.module.css
+++ b/src/components/Search/index.module.css
@@ -1,3 +1,5 @@
+/** Dropdown 滚动条 */
+/******************************************************************************************************/
 .dropdownScrollbar::-webkit-scrollbar {
   width: 4px; /* 滚动条宽度 */
 }