update(style): Update some styles

src/app/about/page.tsx

@@ -12,15 +12,11 @@ export interface ContributorCardType {
   contributorRole: string;
 }
 
+export default async function Download() {
   let contributorList: UserInfo[] = [];
 
-const handleGetThanks = async () => {
   const result = await apiThanks();
   if (result) contributorList = result;
-};
-
-export default async function Download() {
-  handleGetThanks();
 
   return (
     <div className="w-full bg-[#F2F3F7]">

src/app/download/components/DownloadCard.tsx

@@ -19,16 +19,16 @@ export default function Footer({ platform, iconUrl, qrCode }: DownloadQrcodeCard
     <div className="flex flex-col items-center">
       {/* 卡片 */}
       <div
-        className="flex flex-row w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px]"
+        className={`flex flex-row relative w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px] cursor-pointer ${styles.hover_mask}`}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
         <Image className="mr-[12px]" width={48} height={48} src={iconUrl} alt={`${platform}-icon`} />
         <div>
-          <p className="my-[2px] mr-[14px] text-[13px] leading-[18px] text-[rgba(255,255,255,0.7)] text-thin cursor-default">
+          <p className="my-[2px] mr-[14px] text-[13px] leading-[18px] text-[rgba(255,255,255,0.7)] text-thin">
             下载应用
           </p>
-          <p className="text-[16px] font-bold	leading-[22px] cursor-default">{platform}</p>
+          <p className="text-[16px] font-bold	leading-[22px]">{platform}</p>
         </div>
       </div>
 

src/app/download/components/index.module.css

@@ -19,3 +19,15 @@
   border-right: 6px solid transparent;
   border-bottom: 6px solid #fff;
 }
+
+.hover_mask:hover::after {
+  z-index: 4;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200px;
+  height: 72px;
+  border-radius: 9px;
+  background-color: rgba(255, 255, 255, 0.1); /* 白色蒙层，透明度为10% */
+}

src/app/download/page.tsx

@@ -25,7 +25,7 @@ export default function Download() {
         {/* slogan */}
         <div className="flex flex-col items-center mb-[35px]">
           <Image width={410} height={50} src="/img/download/slogan_line1.svg" alt="为独立音乐，雀跃" />
-          <Image className="mt-[26px] mb-[18px]" width={9} height={24} src="/img/download/slogan_line2.svg" alt="/" />
+          <Image className="mt-[26px] mb-[26px]" width={9} height={24} src="/img/download/slogan_line2.svg" alt="/" />
           <Image width={143} height={24} src="/img/download/slogan_line3.svg" alt="独立 不独于世" />
         </div>
 

src/app/vol/[journalId]/page.tsx

@@ -13,7 +13,7 @@ export default async function JournalDetail({ params: { journalId } }: { params:
 
   return (
     <main className="flex flex-col w-[1200px] mx-auto items-left pt-[80px] pb-[104px] ">
-      {journalInfo && <JournalCard image={journalInfo.image} journalNo={journalInfo.journalNo} />}
+      {!!journalInfo && <JournalCard image={journalInfo.image} journalNo={journalInfo.journalNo} />}
 
       <div>
         {songList &&

src/app/vol/list/[category]/[[...page]]/page.tsx

@@ -17,7 +17,7 @@ export default async function Journal({ params }: { params: { category?: string;
       </div>
 
       {/* 右侧 */}
-      <div className="w-[346px] mt-[217px]">
+      <div className="w-[346px] mt-[218px]">
         {/* 热门推荐 */}
         <HotJournalList type="hot" />
       </div>

src/components/ContributorCard.tsx

@@ -6,7 +6,9 @@ export default function ContributorCard({ nickName, avatar, contributorRole }: C
   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="w-full mt-[31px] mb-[13px] px-[20px] text-[18px] leading-[25px] text-[rgba(0,0,0,0.95)] text-center  overflow-hidden whitespace-nowrap overflow-ellipsis truncate">
+        {nickName}
+      </p>
       <p className="text-[15px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">{contributorRole}</p>
     </div>
   );

src/components/Journal/HotJournalList.tsx

@@ -21,7 +21,7 @@ const RecommondJournal = async (prop: any) => {
   }
 
   return (
-    <div className="flex flex-col mt-[33px]">
+    <div className="flex flex-col">
       {/* 分类 & 电台 */}
       <div className="text-[17px] leading-[23.8px]">热门推荐</div>
 

src/components/Journal/JournalItem.tsx

@@ -15,14 +15,14 @@ export default function JournalItem({
   return (
     <div className="flex flex-col w-[712px] rounded-[6px] bg-[#fff] ">
       <Link href={`/vol/${journalNo}`}>
-        <JournalCard showTitle image={image} title={title} journalNo={journalNo} />
+        <JournalCard image={image} title={title} journalNo={journalNo} />
       </Link>
       {/* 摘要 */}
       <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 && (
+      {!!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} />}

src/components/Journal/JournalList.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import Link from 'next/link';
 
 import JournalItem from './JournalItem';
 
@@ -14,12 +13,14 @@ interface Props {
 }
 
 const JournalList = async ({ categoryId, nameCh, journalNoRange, pageNum, pageSize }: Props) => {
-  const journalList: JournalList = await apiJournalList({
+  const res = await apiJournalList({
     categoryId,
     journalNoRange,
     pageNum,
     pageSize,
   });
+  let journalList;
+  if (res) journalList = res;
 
   return (
     <div className="flex flex-col mt-[33px]">
@@ -34,7 +35,8 @@ const JournalList = async ({ categoryId, nameCh, journalNoRange, pageNum, pageSi
 
       {/* 期刊 list */}
       <div className="flex flex-col gap-[60px] mt-[17px]">
-        {journalList?.rows.length && journalList.rows.map((item: JournalInfo) => <JournalItem {...item} />)}
+        {journalList?.rows.length &&
+          journalList.rows.map((item: JournalInfo) => <JournalItem key={item.id} {...item} />)}
       </div>
     </div>
   );