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