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 (
{iconPosition === 'left' && } 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 ( -
+
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 (
{haveData ? (
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 ( -
+
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; /* 滚动条宽度 */ }