Skip to content

Commit

Permalink
优化显示效果
Browse files Browse the repository at this point in the history
  • Loading branch information
@EternalDung
EternalDung committed Aug 17, 2024
1 parent eb9a1bf commit 4b5eb78
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 58 deletions.
36 changes: 24 additions & 12 deletions public/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -606,6 +606,18 @@ video {
margin-top: 2rem;
}

.mt-2 {
margin-top: 0.5rem;
}

.mt-4 {
margin-top: 1rem;
}

.mt-6 {
margin-top: 1.5rem;
}

.block {
display: block;
}
Expand Down Expand Up @@ -682,6 +694,10 @@ video {
width: 410px;
}

.w-\[800px\] {
width: 800px;
}

.w-full {
width: 100%;
}
Expand All @@ -690,10 +706,6 @@ video {
width: 100vw;
}

.w-\[800px\] {
width: 800px;
}

.flex-none {
flex: none;
}
Expand Down Expand Up @@ -860,14 +872,14 @@ video {
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.bg-white\/5 {
background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/10 {
background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/5 {
background-color: rgb(255 255 255 / 0.05);
}

.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
Expand Down Expand Up @@ -962,6 +974,10 @@ video {
padding-bottom: 0.5rem;
}

.pb-4 {
padding-bottom: 1rem;
}

.pl-10 {
padding-left: 2.5rem;
}
Expand Down Expand Up @@ -1002,10 +1018,6 @@ video {
padding-top: 2rem;
}

.pb-4 {
padding-bottom: 1rem;
}

.text-center {
text-align: center;
}
Expand Down
19 changes: 14 additions & 5 deletions src/layouts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,15 @@ export default function Layout({ children, location }) {
icon: 'HomeIcon',
href: '/',
},
{
id: 'single',
children: '单曲',
icon: 'LifebuoyIcon',
href: '/#/single',
},
{
id: 'live',
children: '现场',
children: 'Live',
icon: 'SunIcon',
href: '/#/video',
},
Expand All @@ -89,7 +95,7 @@ export default function Layout({ children, location }) {
children: '参与贡献',
icon: 'CodeBracketIcon',
target: '_blank',
href: 'https://github.com/turkyden/lizhi-app',
href: 'https://github.com/EternalDung/ang',
},
// {
// id: 'star',
Expand All @@ -105,6 +111,7 @@ export default function Layout({ children, location }) {

return (
<div className="w-screen h-screen bg-black text-white pl-64">
{/* 左侧导航区 */}
<div className="fixed top-0 left-0 w-64 h-screen p-10 pb-0 flex flex-col justify-between">
<div>
<h2 className="text-white text-3xl mb-4 font-bold">张韶涵</h2>
Expand Down Expand Up @@ -163,7 +170,7 @@ export default function Layout({ children, location }) {
'bg-green-500 shadow shadow-green-500/50'
}`}
>
🔥<span className="pl-4">单曲</span>
🎸<span className="pl-4">单曲</span>
</Link>
<Link
to="/video"
Expand All @@ -174,15 +181,15 @@ export default function Layout({ children, location }) {
>
🔥<span className="pl-4">Live</span>
</Link>
<Link
{/* <Link
to="/"
className={`block text-white hover:text-white transition py-1 px-4 rounded hover:bg-green-500 cursor-pointer ${
location.pathname.startsWith('/about') &&
'bg-green-500 shadow shadow-green-500/50'
}`}
>
🧑<span className="pl-4">自传</span>
</Link>
</Link> */}
<Link
to="/download"
className={`block text-white hover:text-white transition py-1 px-4 rounded hover:bg-green-500 cursor-pointer
Expand Down Expand Up @@ -230,9 +237,11 @@ export default function Layout({ children, location }) {
alt=""
/>
</div>
{/* 右侧路由区 */}
<div className="w-[100% - 256px] h-screen overflow-y-auto px-8 py-10">
{children}
</div>
{/* 播放器组件 */}
<ReactJkMusicPlayer {...options} />
<a
id="github-link"
Expand Down
5 changes: 3 additions & 2 deletions src/pages/album/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,17 @@ interface ISongList extends Array<ISong> {}
export default function (props) {
const [currDownloadingName, setcurrDownloadingName] = useState('');
const artist = props.match.params.id;

// 过滤点击的专辑歌曲
const albumList = window.list.filter((v) => v.artist === artist);

const onClick = (name: string) => {
const array = document.querySelectorAll('.audio-item');
for (let index = 0; index < array.length; index++) {
const element = array[index];
console.log(element);

const target = element.querySelector('.player-name');
if (target?.title.split(' · ')[0].includes(name)) {
console.log(target);
target.click();
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/download.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ function Download() {
<div className="w-full h-full flex flex-col justify-center items-center">
<div className="flex items-center space-x-10">
<a
href="https://github.com/tw93/Pake/releases/latest/download/LiZhi.dmg"
href=""
className="text-white hover:text-green-500 w-48 h-48 bg-white/5 hover:bg-white/10 cursor-pointer transition rounded-full flex flex-col items-center justify-center space-y-4"
>
<svg
Expand Down Expand Up @@ -45,7 +45,7 @@ function Download() {
</a>

<a
href="https://github.com/tw93/Pake/releases/latest/download/LiZhi_x64.msi"
href="https://github.com/EternalDung/Pake/actions/runs/10371946620/artifacts/1807055898"
className="text-white hover:text-green-500 w-48 h-48 bg-white/5 hover:bg-white/10 cursor-pointer transition rounded-full flex flex-col items-center justify-center space-y-4"
>
<svg
Expand All @@ -66,7 +66,7 @@ function Download() {
</a>

<a
href="https://github.com/tw93/Pake/releases/latest/download/LiZhi_amd64.deb"
href=""
className="text-white hover:text-green-500 w-48 h-48 bg-white/5 hover:bg-white/10 cursor-pointer transition rounded-full flex flex-col items-center justify-center space-y-4"
>
<svg
Expand Down
33 changes: 13 additions & 20 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,6 @@ const LIVE = [
title: '张韶涵live',
post: '/post/a7.jpg',
},
// {
// title: '2014 IO 跨年音乐会',
// post: '/post/io-封面.jpg',
// },
// {
// title: '2015 看见·北京巡回',
// post: '/post/2015看见.png',
// },
// {
// title: '2016 北京不插电',
// post: '/post/2016-unplugged.png',
// },
// {
// title: '2019 洗心革面跨年',
// post: '/post/洗心革面.png',
// },
];

interface IAlbum {
Expand Down Expand Up @@ -50,16 +34,25 @@ export default function IndexPage() {
<div className="flex flex-wrap">
<Link className="mr-6 mb-8 hover:text-white text-white" to={`/`}>
<div className="block text-white w-[410px] h-48 rounded-xl overflow-hidden">
{/* <video className='w-full' poster='https://www.lizhi334.com/wp-content/uploads/2022/08/lizhi-20-scaled.jpeg' loop muted autoPlay>
<source src="https://www.lizhi334.com/wp-content/uploads/2022/03/%E9%A6%96%E9%A1%B5.mp4" type='video/mp4' />
</video> */}
<video
className="w-full"
poster="/post/angela-2.jpg"
loop
muted
autoPlay
>
<source
src="https://raw.githubusercontent.com/EternalDung/song/main/mv/有形的翅膀.mp4"
type="video/mp4"
/>
</video>
<img
className="object-cover w-full h-48 rounded-xl transition transform hover:scale-105 cursor-pointer"
src="/post/angela-2.jpg"
alt="cover"
/>
</div>
<div className="pt-4">谢谢你们 · 丰富了我的人生</div>
<div className="pt-4 text-center">谢谢你们 · 丰富了我的人生</div>
</Link>
{(window.album as IAlbumList).map((v, i) => (
<Link
Expand Down
23 changes: 13 additions & 10 deletions src/pages/single.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@ export default function Single(props) {

const albumList = window.list.filter((v) => v.artist === artist);

// const onClick = (name: string) => {
// const array = document.querySelectorAll('.audio-item');
// for (let index = 0; index < array.length; index++) {
// const element = array[index];
// const target = element.querySelector('.player-name');
// if (target?.title.split(' · ')[0].includes(name)) {
// target.click();
// }
// }
// };
const onClick = (name: string) => {
const array = document.querySelectorAll('.audio-item');
for (let index = 0; index < array.length; index++) {
const element = array[index];
const target = element.querySelector('.player-name');
if (target?.title.split(' · ')[0].includes(name)) {
target.click();
}
}
alert('点击了【' + name + '】,单曲功能正在开发');
};

return (
Expand All @@ -24,7 +27,7 @@ export default function Single(props) {
<div className="text-xl py-4">听见张韶涵的声音</div>

<div className="flex flex-wrap">
<Link className="mr-6 mb-8 hover:text-white text-white" to={`/`}>
<div className="mr-6 mb-8 hover:text-white text-white">
<div className="block text-white w-[410px] h-48 rounded-xl overflow-hidden">
{/* <video className='w-full' poster='https://www.lizhi334.com/wp-content/uploads/2022/08/lizhi-20-scaled.jpeg' loop muted autoPlay>
<source src="https://www.lizhi334.com/wp-content/uploads/2022/03/%E9%A6%96%E9%A1%B5.mp4" type='video/mp4' />
Expand All @@ -38,7 +41,7 @@ export default function Single(props) {
<div className="pt-4 text-center">
人都会随着时间变老 · 心态不老就好了
</div>
</Link>
</div>
{(window.album as IAlbumList).map((v, i) => (
<div
className="mr-6 mb-8 hover:text-white text-white"
Expand Down
20 changes: 14 additions & 6 deletions src/pages/video.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,20 @@ import Hls from 'hls.js';

const videoList = [
{
name: '2014-IO跨年演唱会',
url: 'https://testingcf.jsdelivr.net/gh/nj-lizhi/kn-2014-io@main/video/roadmap.js',
name: '有形的翅膀 MV',
url: 'https://mvwebfs.tx.kugou.com/202408152039/4e8f8a85b89c557e1d515777f9c812e9/v2/becec101ead43b22d1831bd95359712b/G087/M01/0B/14/N5QEAFiIGE2Afi1UAd3LgCtKSTU526.mp4',
},
{
name: '2015-看见北京站直播实录',
url: 'https://testingcf.jsdelivr.net/gh/nj-lizhi/kn-2015-kj@main/video/roadmap.js',
name: '淋雨一直走',
url: '',
},
{
name: '2018-洗心革面跨年演唱会',
url: 'https://testingcf.jsdelivr.net/gh/nj-lizhi/kn-2018-xxgm@main/video/roadmap.js',
name: '阿刁',
url: '',
},
{
name: '破茧',
url: '',
},
];

Expand Down Expand Up @@ -65,6 +69,10 @@ function Video() {
</svg>
<span className="pl-2">Back</span>
</Link>

<div className="text-3xl font-bold mt-6">Live</div>
<div className="text-xl py-4">欣赏盛世美颜</div>

<div className="w-full h-full flex flex-col justify-center items-center">
<div>
{/* <div className="text-3xl font-bold pb-4">Live 现场</div> */}
Expand Down

0 comments on commit 4b5eb78

Please sign in to comment.