parent
2cbdc00a27
commit
bd6d0ada99
|
After Width: | Height: | Size: 352 B |
@ -0,0 +1,23 @@
|
||||
import { CommentForm, CommentHeader, CommentList } from '@/components';
|
||||
|
||||
export default function Comment({
|
||||
commentList,
|
||||
className,
|
||||
totalCommentReply,
|
||||
}: {
|
||||
commentList: any;
|
||||
className?: string;
|
||||
totalCommentReply: number;
|
||||
}) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<CommentForm />
|
||||
{!!totalCommentReply && (
|
||||
<>
|
||||
<CommentHeader count={totalCommentReply} />
|
||||
<CommentList commentList={commentList} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function CommentItem() {
|
||||
return <div></div>;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
export default function CommentHeader({ count }: { count: number }) {
|
||||
return (
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="flex flex-row items-center text-[15px] leading-[21px] gap-[12px]">
|
||||
<div className="text-base">全部评论</div>
|
||||
<div className="text-[rgba(0,0,0,0.4)]">{`${count}条`}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row items-center text-[14px] leading-[19.6px] gap-[12px]">
|
||||
<div>热门</div>
|
||||
<div className="text-[rgba(0,0,0,0.4)]">|</div>
|
||||
<div className="text-[rgba(0,0,0,0.4)]">最新</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function CommentItem() {
|
||||
return <div></div>;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function CommentList({ commentList }: { commentList: Comment[] }) {
|
||||
return <div></div>;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function JournalItem({ id, title, pic, artist, haveCollect }: SongInfo) {
|
||||
return (
|
||||
<Link
|
||||
href={`/single/${id}`}
|
||||
className="flex flex-row items-center justify-between w-full h-[72px] py-[12px] px-[18px] rounded-[3px] hover:bg-[#f2f3f7] group"
|
||||
>
|
||||
{/* left */}
|
||||
<div className="flex flex-row items-center">
|
||||
<Image width={48} height={48} src={pic} alt={title} className="w-[48px] h-[48px] overflow-hidden" unoptimized />
|
||||
<div className="flex flex-col justify-between ml-[15px]">
|
||||
<div className="text-[15px] leading-[21px] text-base group-hover:text-theme">{title}</div>
|
||||
<div className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)] group-hover:text-theme">{artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right */}
|
||||
<div className="flex flex-row items-center">
|
||||
<Image
|
||||
width={24}
|
||||
height={24}
|
||||
src={'/img/icon/audio-playing.svg'}
|
||||
alt={title}
|
||||
className="w-[24px] h-[24px] overflow-hidden"
|
||||
/>
|
||||
|
||||
<p className="ml-[30px] mr-[13px] text-[12px] leading-[16.8px] text-[rgba(0,0,0,0.4)]">05:09</p>
|
||||
|
||||
<Image
|
||||
width={24}
|
||||
height={24}
|
||||
src={haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
|
||||
alt={title}
|
||||
className="w-[24px] h-[24px] overflow-hidden"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* 歌曲卡片
|
||||
*/
|
||||
import { SongCard } from '@/components';
|
||||
|
||||
export default function JournalItem({ songList, className }: { songList: SongInfo[]; className?: string }) {
|
||||
return (
|
||||
<div className={`${className}`}>
|
||||
{songList.map((song: SongInfo) => (
|
||||
<SongCard key={song.id} {...song} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export function InputArea() {
|
||||
return <div></div>;
|
||||
}
|
||||
@ -1,14 +1,31 @@
|
||||
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
extraProperties: {
|
||||
display: 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
extraProperties: {
|
||||
display: 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
},
|
||||
}),
|
||||
],
|
||||
|
||||
rules: [
|
||||
['color-theme', { color: '#B44343' }],
|
||||
['bg-theme', { 'background-color': '#B44343' }],
|
||||
['text-flow', { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden' }],
|
||||
],
|
||||
|
||||
shortcuts: {
|
||||
'switch-animation': 'transition duration-300',
|
||||
'bg-base': 'bg-[#fff] dark:bg-[#20202a] switch-animation',
|
||||
'card-base': 'bg-[#ffffff] dark:bg-[#10101a] switch-animation',
|
||||
'text-base': 'text-[rgba(0,0,0,0.95)] dark:text-[#f0f0f0] switch-animation',
|
||||
'switch-label-base': 'bg-gray-200 dark:bg-gray-800 switch-animation',
|
||||
'switch-span-base': 'bg-white dark:bg-gray-300 switch-animation',
|
||||
'text-theme': 'text-[#B44343]',
|
||||
'text-overflow': 'overflow-hidden whitespace-nowrap overflow-ellipsis truncate',
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in new issue