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,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 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
import { TagCategory } from '@/components';
|
||||||
|
|
||||||
|
import { getTagName } from '@/store';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return <main />;
|
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