parent
3273f30025
commit
9d1102c1b3
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 264 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 341 B |
@ -1,24 +1,3 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
|
|
||||||
import { TagCategory } from '@/components';
|
|
||||||
|
|
||||||
import { getTagName } from '@/store';
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return <main></main>;
|
||||||
<main className="flex flex-row justify-between w-[1200px] mx-auto items-left pt-[80px] pb-[104px] ">
|
|
||||||
{/* 左侧 */}
|
|
||||||
<div className="w-[712px] mt-[50px]">
|
|
||||||
{/* category */}
|
|
||||||
<TagCategory category={'all'} />
|
|
||||||
{/* 期刊列表 */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 右侧 */}
|
|
||||||
<div className="w-[346px] mt-[217px]">
|
|
||||||
<p className="text-[17px] leading-[23.8px]">热门推荐</p>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,75 @@
|
|||||||
|
'use client';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
export default function AudioPlayer({ className }: { className?: string }) {
|
||||||
|
const [curTime, setCurTime] = useState('00:00');
|
||||||
|
const [totalTime, setTotalTime] = useState('00:00');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex flex-row w-[1200px] pt-[29px] ${className}`}>
|
||||||
|
{/* cover */}
|
||||||
|
<div className="w-[72px] h-[72px] rounded-[3px] bg-[#000]">
|
||||||
|
<Image src="/img/music.png" alt="music" width={72} height={72} unoptimized className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* title & author */}
|
||||||
|
<div className="h-full ml-[27px] mr-[44px] py-[14px]">
|
||||||
|
{/* 改成滚动的 */}
|
||||||
|
<p className="w-[140px] text-[17px] leading-[23.8px] text-[rgba(0,0,0,0.95)] overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
|
||||||
|
{'Ferrum Aeternum'}
|
||||||
|
</p>
|
||||||
|
{/* 改成滚动的 */}
|
||||||
|
<p className="w-[140px] text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)] overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
|
||||||
|
{'Ensiferum/mmmmsa'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* progress bar */}
|
||||||
|
<div className="h-full mt-[29px]">
|
||||||
|
{/* bar */}
|
||||||
|
<div className="h-full cursor-pointer">
|
||||||
|
{/* black */}
|
||||||
|
<div className="w-[600px] h-[3px] bg-[rgba(0,0,0,1)]" />
|
||||||
|
{/* gery */}
|
||||||
|
<div className="w-[600px] h-[3px] mt-[-3px] bg-[rgba(0,0,0,0.1)]" />
|
||||||
|
{/* point */}
|
||||||
|
<div className="w-[12px] h-[12px] mt-[-7px] rounded-[50%] bg-[#000]" />
|
||||||
|
</div>
|
||||||
|
{/* time */}
|
||||||
|
<p className="texe-[12px] leading[16.8px]">
|
||||||
|
<span>{curTime}</span>
|
||||||
|
<span className="text-[rgba(0,0,0,0.4)]">{` / ${totalTime}`}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* control */}
|
||||||
|
<div className="flex flex-row items-center">
|
||||||
|
<button>
|
||||||
|
{/* 随机播放 */}
|
||||||
|
<Image
|
||||||
|
src={'/img/audio-player/random.svg'}
|
||||||
|
alt="random"
|
||||||
|
width={28}
|
||||||
|
height={28}
|
||||||
|
className="ml-[55px] mr-[60px]"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
{/* 上一首 */}
|
||||||
|
<button>
|
||||||
|
<Image src={'/img/audio-player/next.svg'} alt="pre" width={28} height={28} className="rotate-180" />
|
||||||
|
</button>
|
||||||
|
{/* 播放/暂停 */}
|
||||||
|
<button className="flex justify-center items-center w-[54px] h-[54px] mx-[35px] rounded-[50%] bg-[rgba(180,67,67,1)] overflow-hidden">
|
||||||
|
{/* <Image src={'/img/audio-player/play.svg'} alt="play" width={28} height={28} /> */}
|
||||||
|
<Image src={'/img/audio-player/pause.svg'} alt="pause" width={28} height={28} />
|
||||||
|
</button>
|
||||||
|
{/* 下一首 */}
|
||||||
|
<button>
|
||||||
|
<Image src={'/img/audio-player/next.svg'} alt="next" width={28} height={28} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
'use client';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import Player from './Player';
|
||||||
|
|
||||||
|
export default function PlayerBar({ className }: { className?: string }) {
|
||||||
|
let oldScrollY: number = 0;
|
||||||
|
function handleScroll() {
|
||||||
|
if (window.scrollY > oldScrollY) {
|
||||||
|
// 向下滚动
|
||||||
|
// if (oldScrollY < 0) return;
|
||||||
|
setPositionBottom(-130);
|
||||||
|
} else {
|
||||||
|
// 向上滚动
|
||||||
|
// if (oldScrollY > 0) return;
|
||||||
|
setPositionBottom(0);
|
||||||
|
}
|
||||||
|
oldScrollY = window.scrollY;
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const [positionBottom, setPositionBottom] = useState<number>(0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`fixed w-full h-[130px] bg-[#fff] ${className} transition-bottom duration-700`}
|
||||||
|
style={{ bottom: positionBottom }}
|
||||||
|
>
|
||||||
|
<Player className="m-auto" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue