queyue-frontend
/
queyue-website
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update(Player): styles

Browse Source
feature/artists
mackt 7 months ago
parent d51958a95b
commit 8e257b70f7
7 changed files with 69 additions and 57 deletions
Show Stats Download Patch File Download Diff File

14
src/components/AudioPlayer/Player.tsx
Unescape View File

@ -212,9 +212,9 @@ export default function AudioPlayer({
</div>
{/* 播放进度 */}
<div className="flex items-end justify-between h-fit mt-3px gap-6px">
<div className="flex items-end justify-between h-fit mt-6px gap-6px">
{/* 播放时长 */}
<span className="block w-27px mt-1px text-10px leading-14px text-center text-#000">
<span className="block w-27px text-10px leading-14px text-center text-#000">
{secondToDate(trackProgress)}
</span>
@ -226,7 +226,7 @@ export default function AudioPlayer({
/>
{/* 总时长 */}
<span className="block w-27px mt-1px text-10px leading-14px text-center text-#000">
<span className="block w-27px text-10px leading-14px text-center text-#000">
{secondToDate(duration || 0)}
</span>
</div>
@ -238,8 +238,12 @@ export default function AudioPlayer({
{/* 收藏歌曲 */}
{<CollectButton id={audio.id || '0'} active={audio.haveCollect} collectType="0" color="dark" />}
{/* 播放顺序 */}
{playListInfo.type !== 'fm' && <OrderButton order={playOrder} onClick={handleChangeOrder} />}
<VolumeButton value={volume} onChange={handleChangeVolumn} />
<OrderButton
order={playOrder}
onClick={handleChangeOrder}
className={`mb-1px ${playListInfo.type === 'fm' && 'hidden'}`}
/>
<VolumeButton value={volume} onChange={handleChangeVolumn} className="mb-1px" />
</div>
</div>
</div>

26
src/components/AudioPlayer/widget/Order.tsx
Unescape View File

@ -24,22 +24,22 @@ export default function Order({
// ));
return (
<ButtonProvide className={className} onClick={onClick}>
<ButtonProvide className={`group ${className}`} onClick={onClick}>
{orderList.find((item) => item.value === order)?.icon ?? null}
</ButtonProvide>
);
}
const ListLoop = () => (
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="group">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
className="fill-#000/70 group-hover:fill-#000/95 transition-all"
fillRule="evenodd"
clipRule="evenodd"
d="M18.5303 1.46967C18.2374 1.17678 17.7626 1.17678 17.4697 1.46967C17.1768 1.76256 17.1768 2.23744 17.4697 2.53033L19.1893 4.25H8C4.82436 4.25 2.25 6.82436 2.25 10V12C2.25 12.4142 2.58579 12.75 3 12.75C3.41421 12.75 3.75 12.4142 3.75 12V10C3.75 7.65279 5.65279 5.75 8 5.75H19.1893L17.4697 7.46967C17.1768 7.76256 17.1768 8.23744 17.4697 8.53033C17.7626 8.82322 18.2374 8.82322 18.5303 8.53033L21.5303 5.53033C21.6768 5.38388 21.75 5.19194 21.75 5C21.75 4.89831 21.7298 4.80134 21.6931 4.71291C21.6565 4.62445 21.6022 4.54158 21.5303 4.46967L18.5303 1.46967Z"
/>
<path
className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
className="fill-#000/70 group-hover:fill-#000/95 transition-all"
fillRule="evenodd"
clipRule="evenodd"
d="M5.46967 22.5303C5.76256 22.8232 6.23744 22.8232 6.53033 22.5303C6.82322 22.2374 6.82322 21.7626 6.53033 21.4697L4.81066 19.75H16C19.1756 19.75 21.75 17.1756 21.75 14V12C21.75 11.5858 21.4142 11.25 21 11.25C20.5858 11.25 20.25 11.5858 20.25 12V14C20.25 16.3472 18.3472 18.25 16 18.25H4.81066L6.53033 16.5303C6.82322 16.2374 6.82322 15.7626 6.53033 15.4697C6.23744 15.1768 5.76256 15.1768 5.46967 15.4697L2.46967 18.4697C2.32322 18.6161 2.25 18.8081 2.25 19C2.25 19.1017 2.27024 19.1987 2.30691 19.2871C2.34351 19.3755 2.39776 19.4584 2.46967 19.5303L5.46967 22.5303Z"
@ -48,37 +48,37 @@ const ListLoop = () => (
);
const Random = () => (
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="group">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
d="M15.5 3H20.5V8"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
d="M3.5 20L20.5 3"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
d="M20.5 16V21H15.5"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
d="M14.5 15L20.5 21"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-[rgba(0,0,0,0.95)] transition-all"
className="stroke-[rgba(0,0,0,0.7)] group-hover:stroke-#000/95 transition-all"
d="M3.5 4L8.5 9"
strokeWidth="1.5"
strokeLinecap="round"
@ -88,15 +88,15 @@ const Random = () => (
);
const SingleLoop = () => (
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="group">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
className="fill-#000/70 group-hover:fill-#000/95 transition-all"
fillRule="evenodd"
clipRule="evenodd"
d="M18.5303 1.46967C18.2374 1.17678 17.7626 1.17678 17.4697 1.46967C17.1768 1.76256 17.1768 2.23744 17.4697 2.53033L19.1893 4.25H8C4.82436 4.25 2.25 6.82436 2.25 10V16C2.25 19.1756 4.82436 21.75 8 21.75H16C19.1757 21.75 21.75 19.1755 21.75 15.9999V14.5C21.75 14.0858 21.4142 13.75 21 13.75C20.5858 13.75 20.25 14.0858 20.25 14.5V15.9999C20.25 18.3471 18.3472 20.25 16 20.25H8C5.65279 20.25 3.75 18.3472 3.75 16V10C3.75 7.65279 5.65279 5.75 8 5.75H19.1893L17.4697 7.46967C17.1768 7.76256 17.1768 8.23744 17.4697 8.53033C17.7626 8.82322 18.2374 8.82322 18.5303 8.53033L21.5303 5.53033C21.6768 5.38388 21.75 5.19194 21.75 5C21.75 4.89831 21.7298 4.80134 21.6931 4.71291C21.6565 4.62445 21.6022 4.54158 21.5303 4.46967L18.5303 1.46967Z"
/>
<path
className="fill-[rgba(0,0,0,70)] group-hover:fill-[rgba(0,0,0,0.95)] transition-all"
className="fill-#000/70 group-hover:fill-#000/95 transition-all"
fillRule="evenodd"
clipRule="evenodd"
d="M12.6707 9.12895C12.8768 9.26848 13.0002 9.50114 13.0002 9.75V16.25C13.0002 16.6642 12.6644 17 12.2502 17C11.836 17 11.5002 16.6642 11.5002 16.25V10.8578L10.0287 11.4464C9.64415 11.6002 9.20768 11.4131 9.05384 11.0285C8.90001 10.6439 9.08707 10.2075 9.47166 10.0536L11.9717 9.05365C12.2027 8.96122 12.4646 8.98943 12.6707 9.12895Z"

5
src/components/AudioPlayer/widget/Volume.tsx
Unescape View File

@ -22,12 +22,13 @@ export default function Volume({
return (
<div
className={`flex flex-col justify-between relative w-22px cursor-pointer ${hover ? 'h-173px' : 'h-22px'} ${className}`}
className={`flex flex-col justify-between relative w-22px cursor-pointer ${hover ? 'h-148px' : 'h-22px'} ${className}`}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
{/* 音量条 */}
<VolumeBar value={value} className={`${!hover && '!hidden'} transition-all`} onChange={onChange} />
{/* 按钮 */}
<ButtonProvide className="group" onClick={handleClick}>
{value >= 50 ? (
<VolumeFull hover={hover} />

24
src/components/AudioPlayer/widget/VolumeBar.tsx
Unescape View File

@ -16,16 +16,18 @@ export default function Volumne({
};
return (
<SliderPrimitive.Root
value={[value]}
orientation="vertical"
className={`${styles.VolumeBarRoot} ${className}`}
onValueChange={(value: number[]) => handleChange(value[0])}
>
<SliderPrimitive.Track className={`${styles.VolumeBarTrack}`}>
<SliderPrimitive.Range className={`${styles.VolumeBarRange}`} />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className={`${styles.VolumeBarThumb}`} />
</SliderPrimitive.Root>
<div className={`relative flex items-center w-18px h-118px bg-#fff ${styles.VolumeBarContainer} ${className}`}>
<SliderPrimitive.Root
value={[value]}
orientation="vertical"
className={`flex flex-col items-center w-full h-107px ${styles.VolumeBarRoot}`}
onValueChange={(value: number[]) => handleChange(value[0])}
>
<SliderPrimitive.Track className={`${styles.VolumeBarTrack}`}>
<SliderPrimitive.Range className={`${styles.VolumeBarRange}`} />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className={`${styles.VolumeBarThumb}`} />
</SliderPrimitive.Root>
</div>
);
}

26
src/components/AudioPlayer/widget/index.module.css
Unescape View File

@ -36,6 +36,7 @@
}
/* 音量条 */
/******************************************************************************************************/
.VolumeBarRoot {
display: flex;
align-items: center;
@ -43,19 +44,18 @@
}
.VolumeBarRoot[data-orientation='vertical'] {
flex-direction: column;
width: 20px;
height: 100px;
height: 102px;
border-radius: 37px;
}
/* 底色 */
.VolumeBarTrack {
position: relative;
flex-grow: 1;
background-color: rgba(0, 0, 0, 0.1);
}
.VolumeBarTrack[data-orientation='vertical'] {
width: 3px;
width: 2px;
}
/* 激活区域 */
@ -70,8 +70,8 @@
/* 滑块 */
.VolumeBarThumb {
display: block;
width: 11px;
height: 11px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #646464;
outline: none;
@ -84,3 +84,17 @@
.VolumeBarRoot:hover .VolumeBarThumb {
background-color: rgba(0, 0, 0, 0.95);
}
.VolumeBarContainer::before {
content: '';
display: block;
position: absolute;
left: calc(-50% - 0.7px);
top: calc(-50% - 0.7px);
border-radius: 24px;
width: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
height: calc(200% + 1.4px); /* 考虑到阴影会占用额外空间，增加 1.4px */
box-shadow: 0 0 0 0.7px #e1e1e1; /* 使用阴影模拟边框 */
transform: scale(0.5);
pointer-events: none; /** 防止 userCard 点击事件失效 */
}

14
src/components/Icon/heart.module.css
Unescape View File

@ -9,12 +9,16 @@
.color-default {
--default-color: rgb(197, 197, 197);
--active-color: #c43737;
--hover-color: var(--primary-color);
--active-color: var(--primary-color);
--active-hover-color: var(--primary-color);
}
.color-dark {
--default-color: rgba(0, 0, 0, 0.7);
--active-color: #c43737;
--hover-color: rgba(0, 0, 0, 0.95);
--active-color: var(--primary-color);
--active-hover-color: var(--primary-color);
}
.heart-svg {
@ -47,8 +51,12 @@
fill: var(--active-color);
}
.checkbox[type='checkbox']:checked:hover + svg .heart-path {
stroke: var(--active-hover-color);
}
.checkbox[type='checkbox']:hover + svg .heart-path {
stroke: var(--active-color);
stroke: var(--hover-color);
transition: stroke 0.2s ease-in-out;
}

17
uno.config.ts
Unescape View File

@ -48,22 +48,5 @@ export default defineConfig({
colors: {
brand: 'var(--primary-color)',
},
extend: {
'border-half': {
position: 'relative',
'::after': {
content: '',
display: 'block',
position: 'absolute',
left: '-50%',
top: '-50%',
width: '200%',
height: '200%',
border: '1px solid red',
transform: 'scale(0.5)',
'-webkit-transform': 'scale(0.5)',
},
},
},
},
});

Write Preview
Loading…
Cancel
Save