parent
956a36378b
commit
367da6a389
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 707 B |
|
After Width: | Height: | Size: 804 B |
|
After Width: | Height: | Size: 808 B |
@ -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: 0;
|
||||
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,16 +0,0 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
import { ContributorCardType } from '../page';
|
||||
|
||||
export default function ContributorCard({ nickname, avatarUrl, occupation }: ContributorCardType) {
|
||||
return (
|
||||
<div className="col-span-1 w-[178px] h-[260px] mt-[26px] pt-[36px] pb-[44px] rounded-[6px] flex flex-col bg-[#fff]">
|
||||
<div className="w-[92px] h-[92px] mx-auto rounded-[50%] bg-[#fff] overflow-hidden">
|
||||
{/* <Image width={92} height={92} src={avatarUrl} alt={`${nickname}-avatar`} /> */}
|
||||
<Image width={130} height={130} unoptimized src={avatarUrl} alt="wechat qrCode"></Image>
|
||||
</div>
|
||||
<p className="mt-[31px] mb-[13px] text-[18px] leading-[25px] text-[rgba(0,0,0,0.95)] text-center">{nickname}</p>
|
||||
<p className="text-[15px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">{occupation}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import { TagCategory, JournalList } from '@/components';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<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 />
|
||||
{/* 期刊列表 */}
|
||||
<JournalList />
|
||||
</div>
|
||||
|
||||
{/* 右侧 */}
|
||||
<div className="w-[346px] mt-[217px]">
|
||||
<p className="text-[17px] leading-[23.8px]">热门推荐</p>
|
||||
<div></div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
@ -1,3 +1,24 @@
|
||||
export default function Home() {
|
||||
return <main />;
|
||||
}
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
import { TagCategory } from '@/components';
|
||||
|
||||
import { getTagName } from '@/store';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<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 />
|
||||
{/* 期刊列表 */}
|
||||
</div>
|
||||
|
||||
{/* 右侧 */}
|
||||
<div className="w-[346px] mt-[217px]">
|
||||
<p className="text-[17px] leading-[23.8px]">热门推荐</p>
|
||||
<div></div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
import Avatar from '@/components/Avatar';
|
||||
|
||||
import { ContributorCardType } from '../app/about/page';
|
||||
|
||||
export default function ContributorCard({ nickName, avatar, contributorRole }: ContributorCardType) {
|
||||
return (
|
||||
<div className="flex flex-col items-center w-[178px] h-[260px] mt-[26px] pt-[36px] pb-[44px] rounded-[6px] bg-[#fff]">
|
||||
<Avatar size={92} src={avatar} alt={`${nickName}-avatar`} />
|
||||
<p className="mt-[31px] mb-[13px] text-[18px] leading-[25px] text-[rgba(0,0,0,0.95)] text-center">{nickName}</p>
|
||||
<p className="text-[15px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">{contributorRole}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
import Avatar from '@/components/Avatar';
|
||||
|
||||
export default function JournalCard({
|
||||
journalNo,
|
||||
title,
|
||||
image,
|
||||
summary,
|
||||
haveCollect,
|
||||
totalCommentReply,
|
||||
commentList,
|
||||
}: JournalInfo) {
|
||||
console.log({ commentList });
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-[712px] rounded-[6px] bg-[#fff] ">
|
||||
{/* banner container */}
|
||||
<div className={`relative w-full h-[420px] rounded-[6px] overflow-hidden bg-[url(${image})]`}>
|
||||
{/* 左上角标 */}
|
||||
<div className="flex flex-col justify-between absolute top-0 left-0 w-[64px] h-[64px] mt-[16px] ml-[16px] pt-[9.35px] pb-[9.2px] px-[11.13px] rounded-[2px] bg-[rgba(255,255,255,0.9)] z-2">
|
||||
<p className="h-[23.2px] w-full text-[16px] leading-[23.2px] text-[#000] text-left">{journalNo}</p>
|
||||
<div className="w-[37.1px] h-[1.4px] bg-gradient-to-r from-red-700 via-red-700 to-transparent" />
|
||||
<p className="w-full text-[10px] leading-[18px] text-[rgba(0,0,0,0.4)]">VOL</p>
|
||||
</div>
|
||||
|
||||
{/* banner */}
|
||||
<Image
|
||||
width={712}
|
||||
height={420}
|
||||
src={image}
|
||||
unoptimized
|
||||
alt={title}
|
||||
className="absolute bottom-0 cursor-pointer"
|
||||
/>
|
||||
|
||||
{/* 标题 */}
|
||||
<p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[24px] leading-[33.6px]">{title}</p>
|
||||
</div>
|
||||
{/* 摘要 */}
|
||||
<p className="w-full mt-[15px] mb-[12px] text-[17px] leading-[23.8px] text-[#000] overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
|
||||
{summary}
|
||||
</p>
|
||||
{/* 评论 */}
|
||||
{commentList.length && (
|
||||
<div className="flex flex-row mb-[24px]">
|
||||
<div className={`flex flex-row relative w-[25px] h-[15px] mr-[9px]`}>
|
||||
{commentList?.[0]?.avatar && <Avatar className="absolute" size={15} src={commentList[0].avatar} />}
|
||||
{commentList?.[1]?.avatar && (
|
||||
<div className=" flex justify-center items-center absolute left-[9px] w-[16px] h-[16px] rounded-[50%] bg-[#fff] overflow-hidden">
|
||||
<Avatar size={15} src={commentList[1].avatar} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="w-[270px] text-[14px] leading-[20px] text-[rgba(0,0,0,0.7)] overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
|
||||
{commentList[0].content}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 评论 & 收藏 */}
|
||||
<div className="flex flex-row items-center">
|
||||
<Image
|
||||
width={24}
|
||||
height={24}
|
||||
src={haveCollect ? '/img/icon/love-active.svg' : '/img/icon/love.svg'}
|
||||
alt="love"
|
||||
unoptimized
|
||||
/>
|
||||
<p className="w-[42px] ml-[6px] mr-[24px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4)]">
|
||||
{totalCommentReply}
|
||||
</p>
|
||||
<Image width={24} height={24} src={'/img/icon/comment.svg'} alt="comment" unoptimized />
|
||||
<p className="ml-[6px] text-[14px] leading-[16px] text-[rgba(0,0,0,0.4)]">{totalCommentReply}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
import JournalCard from './JournalCard';
|
||||
|
||||
import { apiJournalList } from '@/services/server/journal';
|
||||
|
||||
const JournalList = async ({
|
||||
categoryId,
|
||||
journalNoRange,
|
||||
pageNum,
|
||||
pageSize,
|
||||
}: {
|
||||
categoryId?: string;
|
||||
journalNoRange?: string;
|
||||
pageNum?: number;
|
||||
pageSize?: number;
|
||||
}) => {
|
||||
const journalList: JournalList = await apiJournalList({
|
||||
categoryId,
|
||||
journalNoRange,
|
||||
pageNum,
|
||||
pageSize,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col mt-[33px]">
|
||||
{/* 分类 & 电台 */}
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="text-[17px] leading-[23.8px]">{'摇滚'}</div>
|
||||
<div className="flex flex-row items-center cursor-pointer">
|
||||
<Image className="mr-[6px]" width={24} height={24} src={'/img/icon/fm.svg'} alt="FM" />
|
||||
<p className="text-[15px] leading-[21px]">电台</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 期刊 list */}
|
||||
<div className="flex flex-col gap-[60px] mt-[17px]">
|
||||
{journalList.rows.map((item: JournalInfo) => (
|
||||
<JournalCard key={item.id} {...item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JournalList;
|
||||
@ -0,0 +1,21 @@
|
||||
import { apiTagName } from '@/services/server/journal';
|
||||
|
||||
const Avatar = async () => {
|
||||
const tagNameList = await apiTagName({ level: 1, state: 1 });
|
||||
|
||||
return (
|
||||
<div className={`grid grid-cols-8`}>
|
||||
{tagNameList.map((item: TagName) => (
|
||||
<div
|
||||
key={item.id}
|
||||
// className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer ${current === item.id ? 'bg-[#B44343] text-[#fff]' : 'bg-[#F2F3F7] text-[#000]'}`}
|
||||
className={`w-[80px] h-[35px] mt-[10px] rounded-[120px] text-[13px] leading-[18px] text-center leading-[35px] cursor-pointer bg-[#F2F3F7] text-[#000]`}
|
||||
>
|
||||
{item.nameCh}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ButtonProps {
|
||||
type?: 'default' | 'primary' | 'black';
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const Button: React.FC<ButtonProps> = ({
|
||||
type = 'default',
|
||||
disabled = false,
|
||||
className = '',
|
||||
children,
|
||||
...restPropps
|
||||
}) => {
|
||||
const buttonColorList = {
|
||||
default: { default: 'bg-blue text-[#000]', disabled: 'opacity-50' },
|
||||
primary: { default: 'bg-[#B44343] text-[#fff]', disabled: 'opacity-50' },
|
||||
black: { default: 'bg-[#000] text-[#fff]', disabled: 'opacity-10' },
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${buttonColorList[type].default} ${disabled && buttonColorList[type].disabled} ${className}
|
||||
`}
|
||||
disabled={disabled}
|
||||
{...restPropps}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@ -1,16 +0,0 @@
|
||||
declare interface TagName {
|
||||
/** ID */
|
||||
id: string;
|
||||
/** 是否显示 */
|
||||
isShow: number;
|
||||
/** 等级 */
|
||||
level: number;
|
||||
/** 中文名称 */
|
||||
nameCh: string;
|
||||
/** 英文名称 */
|
||||
nameEn: string;
|
||||
/** 父类别ID */
|
||||
parentId: string;
|
||||
/** 状态 */
|
||||
state: number;
|
||||
}
|
||||
Loading…
Reference in new issue