Compare commits
6 Commits
7dae0ef1ca
...
1c9816ca81
| Author | SHA1 | Date |
|---|---|---|
 fadeaway
|
1c9816ca81 | 6 months ago |
 mackt
|
5d8bb19714 | 6 months ago |
|
mackt
|
3f03b6574a | 6 months ago |
|
mackt
|
c71788da0f | 6 months ago |
|
mackt
|
108c93a7ed | 6 months ago |
|
mackt
|
9d7001be14 | 6 months ago |
@ -1,29 +1,29 @@
|
|||||||
.halo {
|
.halo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 160px;
|
top: 160px;
|
||||||
left: 240px;
|
left: 240px;
|
||||||
width: 560px;
|
width: 560px;
|
||||||
height: 280px;
|
height: 280px;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
background: linear-gradient(135.88deg, rgba(255, 240, 240, 0.0126) 31.88%, rgba(255, 53, 53, 0.06) 75.38%);
|
background: linear-gradient(135.88deg, rgba(255, 240, 240, 0.0126) 31.88%, rgba(255, 53, 53, 0.06) 75.38%);
|
||||||
filter: blur(50px);
|
filter: blur(50px);
|
||||||
transform: matrix(1, -0.09, -0.02, 1, 0, 0);
|
transform: matrix(1, -0.09, -0.02, 1, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.weibo {
|
.weibo {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #000;
|
color: #000;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weibo::after {
|
.weibo::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
left: 83px;
|
left: 83px;
|
||||||
bottom: -2px;
|
bottom: -2px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: url('/img/icon/arrow-right.svg');
|
background: url('/img/icon/arrow-right.svg');
|
||||||
}
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import DownloadCard from '@/app/download/components/DownloadCard';
|
import DownloadCard from '@/app/(website)/download/components/DownloadCard';
|
||||||
|
|
||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
@ -1,56 +1,56 @@
|
|||||||
@import '@unocss/reset/tailwind.css';
|
@import '@unocss/reset/tailwind.css';
|
||||||
@unocss all;
|
@unocss all;
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'D-DINExp';
|
font-family: 'D-DINExp';
|
||||||
src: url('/fonts/D-DINExp.otf') format('opentype');
|
src: url('/fonts/D-DINExp.otf') format('opentype');
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--body-bg-color: #fff;
|
--body-bg-color: #fff;
|
||||||
--primary-color: #c43737;
|
--primary-color: #c43737;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--body-bg-color);
|
background: var(--body-bg-color);
|
||||||
font-family:
|
font-family:
|
||||||
'D-DINExp',
|
'D-DINExp',
|
||||||
-apple-system,
|
-apple-system,
|
||||||
BlinkMacSystemFont,
|
BlinkMacSystemFont,
|
||||||
'PingFang SC',
|
'PingFang SC',
|
||||||
'Helvetica Neue',
|
'Helvetica Neue',
|
||||||
STHeiti,
|
STHeiti,
|
||||||
'Microsoft Yahei',
|
'Microsoft Yahei',
|
||||||
Tahoma,
|
Tahoma,
|
||||||
Simsun,
|
Simsun,
|
||||||
sans-serif;
|
sans-serif;
|
||||||
/* padding-bottom: constant(safe-area-inset-bottom);
|
/* padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom); */
|
padding-bottom: env(safe-area-inset-bottom); */
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder {
|
input::placeholder {
|
||||||
color: [rgba(0, 0, 0, 0.7)];
|
color: [rgba(0, 0, 0, 0.7)];
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
.text-balance {
|
.text-balance {
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
export default function Loading() {
|
export default function Loading() {
|
||||||
return (
|
return (
|
||||||
<div className="w-[100vw] h-[100vh] flex justify-center items-center">
|
<div className="w-[100vw] h-[100vh] flex justify-center items-center">
|
||||||
<div>正在加载……</div>
|
<div>正在加载……</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,101 +1,101 @@
|
|||||||
/** 期刊列表 */
|
/** 期刊列表 */
|
||||||
import { notFound } from 'next/navigation';
|
import { notFound } from 'next/navigation';
|
||||||
|
|
||||||
import { Category, JournalRecommendList, JournalItem, Pagination, RedirectCheck, ButtonFM } from '@/components';
|
import { Category, JournalRecommendList, JournalItem, Pagination, RedirectCheck, ButtonFM } from '@/components';
|
||||||
import { apiSearchCategoryList, apiGetJournalRecommendWithCollect, apiJournalList } from '@/services';
|
import { apiSearchCategoryList, apiGetJournalRecommendWithCollect, apiJournalList } from '@/services';
|
||||||
|
|
||||||
export async function generateMetadata({ params: { category } }: { params: { category?: string } }) {
|
export async function generateMetadata({ params: { category } }: { params: { category?: string } }) {
|
||||||
if (category && category !== 'all') {
|
if (category && category !== 'all') {
|
||||||
const categoryList = await getCategoryList();
|
const categoryList = await getCategoryList();
|
||||||
const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
|
const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
|
||||||
return { title: categoryInfo?.nameCh, description: categoryInfo?.description };
|
return { title: categoryInfo?.nameCh, description: categoryInfo?.description };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const getCategoryList = async () => {
|
const getCategoryList = async () => {
|
||||||
const result = await apiSearchCategoryList();
|
const result = await apiSearchCategoryList();
|
||||||
if (result.code !== 200) return notFound();
|
if (result.code !== 200) return notFound();
|
||||||
|
|
||||||
// 去除空格
|
// 去除空格
|
||||||
const list: Category[] = result.data.map((item) => {
|
const list: Category[] = result.data.map((item) => {
|
||||||
return { ...item, nameEn: item.nameEn.replace(/ /g, '') };
|
return { ...item, nameEn: item.nameEn.replace(/ /g, '') };
|
||||||
});
|
});
|
||||||
|
|
||||||
// 添加“全部”tag
|
// 添加“全部”tag
|
||||||
list.unshift({
|
list.unshift({
|
||||||
id: '0',
|
id: '0',
|
||||||
nameCh: '全部',
|
nameCh: '全部',
|
||||||
nameEn: 'all',
|
nameEn: 'all',
|
||||||
image: '',
|
image: '',
|
||||||
thumbnail: '',
|
thumbnail: '',
|
||||||
description: '',
|
description: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
return list;
|
return list;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取评论
|
// 获取评论
|
||||||
const getRecommendList = async () => {
|
const getRecommendList = async () => {
|
||||||
const result = await apiGetJournalRecommendWithCollect();
|
const result = await apiGetJournalRecommendWithCollect();
|
||||||
return result.data;
|
return result.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取期刊 list
|
// 获取期刊 list
|
||||||
const getJournalList = async ({ category, page }: { category: string; page: number }) => {
|
const getJournalList = async ({ category, page }: { category: string; page: number }) => {
|
||||||
const res = await apiJournalList({ categoryId: category, journalNoRange: '', pageNum: page, pageSize: 10 });
|
const res = await apiJournalList({ categoryId: category, journalNoRange: '', pageNum: page, pageSize: 10 });
|
||||||
if (res.code !== 200) return notFound();
|
if (res.code !== 200) return notFound();
|
||||||
return res.data;
|
return res.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default async function Journal({ params }: { params: { category?: string; page?: number } }) {
|
export default async function Journal({ params }: { params: { category?: string; page?: number } }) {
|
||||||
const { category = 'all', page = 1 } = params;
|
const { category = 'all', page = 1 } = params;
|
||||||
|
|
||||||
// 获取期刊分类
|
// 获取期刊分类
|
||||||
const categoryList = await getCategoryList();
|
const categoryList = await getCategoryList();
|
||||||
const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
|
const categoryInfo: Category | undefined = categoryList.find((item: Category) => item.nameEn === category);
|
||||||
|
|
||||||
// 获取热门推荐、期刊列表
|
// 获取热门推荐、期刊列表
|
||||||
const [recommendList, journalList] = await Promise.all([
|
const [recommendList, journalList] = await Promise.all([
|
||||||
getRecommendList(),
|
getRecommendList(),
|
||||||
getJournalList({ category: categoryInfo?.id ?? '', page: Number(page) }),
|
getJournalList({ category: categoryInfo?.id ?? '', page: Number(page) }),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="flex flex-row justify-between w-1200px mx-auto pt-80px">
|
<main className="flex flex-row justify-between w-1200px mx-auto pt-80px">
|
||||||
<RedirectCheck />
|
<RedirectCheck />
|
||||||
|
|
||||||
<div className="w-712px mt-40px">
|
<div className="w-712px mt-40px">
|
||||||
{/* category */}
|
{/* category */}
|
||||||
<Category list={categoryList} current={categoryInfo?.id ?? '0'} />
|
<Category list={categoryList} current={categoryInfo?.id ?? '0'} />
|
||||||
|
|
||||||
{/* header */}
|
{/* header */}
|
||||||
<div className="flex flex-row items-center justify-between mt-38px mb-12px">
|
<div className="flex flex-row items-center justify-between mt-38px mb-12px">
|
||||||
<div className="text-17px leading-24px font-500">{categoryInfo?.nameCh ?? '全部'}</div>
|
<div className="text-17px leading-24px font-500">{categoryInfo?.nameCh ?? '全部'}</div>
|
||||||
<ButtonFM />
|
<ButtonFM />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 期刊列表 */}
|
{/* 期刊列表 */}
|
||||||
<div className="flex flex-col gap-42px text-[rgba(0,0,0,0.95)]">
|
<div className="flex flex-col gap-42px text-[rgba(0,0,0,0.95)]">
|
||||||
{journalList.rows.map((item: JournalInfo) => (
|
{journalList.rows.map((item: JournalInfo) => (
|
||||||
<JournalItem key={item.id} {...item} />
|
<JournalItem key={item.id} {...item} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 分页 */}
|
{/* 分页 */}
|
||||||
<Pagination
|
<Pagination
|
||||||
type="server"
|
type="server"
|
||||||
className="mt-60px my-160px"
|
className="mt-60px my-160px"
|
||||||
total={journalList?.total}
|
total={journalList?.total}
|
||||||
pageSize={10}
|
pageSize={10}
|
||||||
current={page}
|
current={page}
|
||||||
link={`/music/${category}`}
|
link={`/music/${category}`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 热门推荐 */}
|
{/* 热门推荐 */}
|
||||||
<div className="w-346px mt-202px">
|
<div className="w-346px mt-202px">
|
||||||
{!!recommendList?.length ? <JournalRecommendList list={recommendList} /> : <div />}
|
{!!recommendList?.length ? <JournalRecommendList list={recommendList} /> : <div />}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,45 +1,45 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { usePathname } from 'next/navigation';
|
import { usePathname } from 'next/navigation';
|
||||||
|
|
||||||
import styles from './index.module.css';
|
import styles from './index.module.css';
|
||||||
|
|
||||||
const tabList: Array<{ label: string; value: 'song' | 'vol' }> = [
|
const tabList: Array<{ label: string; value: 'song' | 'vol' }> = [
|
||||||
{
|
{
|
||||||
label: '收藏的单曲',
|
label: '收藏的单曲',
|
||||||
value: 'song',
|
value: 'song',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '收藏的期刊',
|
label: '收藏的期刊',
|
||||||
value: 'vol',
|
value: 'vol',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const pathList = pathname.split('/');
|
const pathList = pathname.split('/');
|
||||||
const type = pathList[pathList.length - 1];
|
const type = pathList[pathList.length - 1];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="w-1200px mx-auto pt-80px">
|
<main className="w-1200px mx-auto pt-80px">
|
||||||
{/* Nav */}
|
{/* Nav */}
|
||||||
<ul className="mt-22px h-39px">
|
<ul className="mt-22px h-39px">
|
||||||
{tabList.map((item) => (
|
{tabList.map((item) => (
|
||||||
<Link key={item.value} href={`/my/collect/${item.value}`}>
|
<Link key={item.value} href={`/my/collect/${item.value}`}>
|
||||||
<li
|
<li
|
||||||
key={item.value}
|
key={item.value}
|
||||||
className={`relative float-left w-fit mr-37px text-[rgba(0,0,0,0.4)] text-17px leading-24px hover:text-base cursor-pointer ${type === item.value && styles['tab-active']}`}
|
className={`relative float-left w-fit mr-37px text-[rgba(0,0,0,0.4)] text-17px leading-24px hover:text-base cursor-pointer ${type === item.value && styles['tab-active']}`}
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</li>
|
</li>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
<footer className="h-160px" />
|
<footer className="h-160px" />
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,105 +1,105 @@
|
|||||||
/** 期刊详情 */
|
/** 期刊详情 */
|
||||||
import { notFound, redirect, RedirectType } from 'next/navigation';
|
import { notFound, redirect, RedirectType } from 'next/navigation';
|
||||||
|
|
||||||
import { SongCardList, JournalRecommendList, Comment, CollectButton, VolDetailCoverCard } from '@/components';
|
import { SongCardList, JournalRecommendList, Comment, CollectButton, VolDetailCoverCard } from '@/components';
|
||||||
import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services';
|
import { apiGetJournalInfoById, apiGetSongsByJournalNo, apiGetJournalRecommendById } from '@/services';
|
||||||
|
|
||||||
export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
|
export async function generateMetadata({ params: { journalId } }: { params: { journalId: string } }) {
|
||||||
const res = await apiGetJournalInfoById({ id: journalId });
|
const res = await apiGetJournalInfoById({ id: journalId });
|
||||||
const journalInfo = res.data;
|
const journalInfo = res.data;
|
||||||
return { title: journalInfo.title, description: journalInfo.summary };
|
return { title: journalInfo.title, description: journalInfo.summary };
|
||||||
}
|
}
|
||||||
|
|
||||||
const getData = async (journalId: string) => {
|
const getData = async (journalId: string) => {
|
||||||
const [journalInfoRes, songListRes, recommendList] = await Promise.all([
|
const [journalInfoRes, songListRes, recommendList] = await Promise.all([
|
||||||
apiGetJournalInfoById({ id: journalId }),
|
apiGetJournalInfoById({ id: journalId }),
|
||||||
apiGetSongsByJournalNo({ id: journalId }),
|
apiGetSongsByJournalNo({ id: journalId }),
|
||||||
apiGetJournalRecommendById({ id: journalId, limit: 8 }),
|
apiGetJournalRecommendById({ id: journalId, limit: 8 }),
|
||||||
]);
|
]);
|
||||||
if (!(journalInfoRes.code === 200 && songListRes.code === 200)) return notFound();
|
if (!(journalInfoRes.code === 200 && songListRes.code === 200)) return notFound();
|
||||||
return { journalInfo: journalInfoRes.data, songList: songListRes.data, recommendList: recommendList.data };
|
return { journalInfo: journalInfoRes.data, songList: songListRes.data, recommendList: recommendList.data };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default async function JournalDetail({
|
export default async function JournalDetail({
|
||||||
params: { journalId },
|
params: { journalId },
|
||||||
searchParams: { mobile },
|
searchParams: { mobile },
|
||||||
}: {
|
}: {
|
||||||
params: { journalId: string };
|
params: { journalId: string };
|
||||||
searchParams: { mobile: string };
|
searchParams: { mobile: string };
|
||||||
}) {
|
}) {
|
||||||
const { journalInfo, songList, recommendList } = await getData(journalId);
|
const { journalInfo, songList, recommendList } = await getData(journalId);
|
||||||
|
|
||||||
if (mobile) {
|
if (mobile) {
|
||||||
redirect(`${process.env.NEXT_PUBLIC_MOBILE_HOST}/journal.html?id=${journalInfo.id}`, RedirectType.replace);
|
redirect(`${process.env.NEXT_PUBLIC_MOBILE_HOST}/journal.html?id=${journalInfo.id}`, RedirectType.replace);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="w-[1200px] mx-auto flex flex-row justify-between pt-[120px]">
|
<main className="w-[1200px] mx-auto flex flex-row justify-between pt-[120px]">
|
||||||
<div className="w-[712px]">
|
<div className="w-[712px]">
|
||||||
{/* 封面 */}
|
{/* 封面 */}
|
||||||
<VolDetailCoverCard journalInfo={journalInfo} songList={songList} />
|
<VolDetailCoverCard journalInfo={journalInfo} songList={songList} />
|
||||||
<div className="flex justify-between items-center w-full mt-[30px]">
|
<div className="flex justify-between items-center w-full mt-[30px]">
|
||||||
{/* 期刊号 & 标签 */}
|
{/* 期刊号 & 标签 */}
|
||||||
<div className="flex flex-row items-center gap-[9px]">
|
<div className="flex flex-row items-center gap-[9px]">
|
||||||
<div className="text-[rgba(0,0,0,0.7)] text-14px leading-20px">{`VOL.${journalInfo?.journalNo.toString().padStart(4, '0')}`}</div>
|
<div className="text-[rgba(0,0,0,0.7)] text-14px leading-20px">{`VOL.${journalInfo?.journalNo.toString().padStart(4, '0')}`}</div>
|
||||||
{journalInfo?.tags.length > 0 &&
|
{journalInfo?.tags.length > 0 &&
|
||||||
journalInfo.tags.map((tag: string) => (
|
journalInfo.tags.map((tag: string) => (
|
||||||
<span
|
<span
|
||||||
key={tag}
|
key={tag}
|
||||||
className="block w-fit py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
|
className="block w-fit py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
|
||||||
>
|
>
|
||||||
{tag}
|
{tag}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 收藏期刊 */}
|
{/* 收藏期刊 */}
|
||||||
<CollectButton
|
<CollectButton
|
||||||
showText
|
showText
|
||||||
id={journalInfo.id}
|
id={journalInfo.id}
|
||||||
active={journalInfo.haveCollect}
|
active={journalInfo.haveCollect}
|
||||||
count={journalInfo.userCollectCount}
|
count={journalInfo.userCollectCount}
|
||||||
text="人收藏"
|
text="人收藏"
|
||||||
collectType="1"
|
collectType="1"
|
||||||
iconPosition="right"
|
iconPosition="right"
|
||||||
gap={9}
|
gap={9}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-row justify-between w-full h-auto">
|
<div className="flex flex-row justify-between w-full h-auto">
|
||||||
{/* 标题 */}
|
{/* 标题 */}
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="w-autp text-[24px] leading-[33.6px] my-[9px] text-base font-bold text-overflow">
|
<div className="w-autp text-[24px] leading-[33.6px] my-[9px] text-base font-bold text-overflow">
|
||||||
{journalInfo.title}
|
{journalInfo.title}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 作者 & 时间 */}
|
{/* 作者 & 时间 */}
|
||||||
<div className="flex flex-row item-center text-[rgba(0,0,0,0.4)] text-[12px] leading-[16.8px] gap-[12px]">
|
<div className="flex flex-row item-center text-[rgba(0,0,0,0.4)] text-[12px] leading-[16.8px] gap-[12px]">
|
||||||
<p>{journalInfo.editor}</p>
|
<p>{journalInfo.editor}</p>
|
||||||
<p>{journalInfo.date}</p>
|
<p>{journalInfo.date}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* 内容 */}
|
{/* 内容 */}
|
||||||
<article
|
<article
|
||||||
className="mt-[24px] text-[15px] leading-[21px] text-base"
|
className="mt-[24px] text-[15px] leading-[21px] text-base"
|
||||||
dangerouslySetInnerHTML={{ __html: journalInfo.content }}
|
dangerouslySetInnerHTML={{ __html: journalInfo.content }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 卡片 */}
|
{/* 卡片 */}
|
||||||
<SongCardList
|
<SongCardList
|
||||||
className="my-40px w-full ml-[-18px]"
|
className="my-40px w-full ml-[-18px]"
|
||||||
listInfo={{ type: 'vol', id: journalInfo.id }}
|
listInfo={{ type: 'vol', id: journalInfo.id }}
|
||||||
songList={songList}
|
songList={songList}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Comment className="w-full" journalId={journalInfo.id} totalCommentReply={journalInfo.totalCommentReply} />
|
<Comment className="w-full" journalId={journalInfo.id} totalCommentReply={journalInfo.totalCommentReply} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-[346px]">
|
<div className="w-[346px]">
|
||||||
{/* 热门推荐 */}
|
{/* 热门推荐 */}
|
||||||
{!!recommendList?.length ? <JournalRecommendList list={recommendList} /> : <div />}
|
{!!recommendList?.length ? <JournalRecommendList list={recommendList} /> : <div />}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue