update(home page): styles

src/app/music/[category]/[[...page]]/page.tsx

@@ -67,13 +67,13 @@ export default async function Journal({ params }: { params: { category?: string;
         <Category list={categoryList} current={categoryInfo?.id ?? '0'} />
 
         {/* header */}
-        <div className="flex flex-row items-center justify-between mt-38px">
+        <div className="flex flex-row items-center justify-between mt-38px mb-12px">
-          <div className="text-17px leading-24px font-500 mb-3px">{categoryInfo?.nameCh ?? '全部'}</div>
+          <div className="text-17px leading-24px font-500">{categoryInfo?.nameCh ?? '全部'}</div>
           <ButtonFM />
         </div>
 
         {/* 期刊列表 */}
-        <div className="flex flex-col gap-42px mt-14px 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) => (
             <JournalItem key={item.id} {...item} />
           ))}
@@ -91,7 +91,7 @@ export default async function Journal({ params }: { params: { category?: string;
       </div>
 
       {/* 热门推荐 */}
-      <div className="w-346px mt-203px">
+      <div className="w-346px mt-202px">
         {!!recommendList?.length ? <JournalRecommendList list={recommendList} /> : <div />}
       </div>
     </main>

src/components/Journal/JournalItem.tsx

@@ -21,7 +21,7 @@ export default function JournalItem({
 
       {/* 摘要 */}
       <Link href={`/vol/${journalNo}`}>
-        <p className="w-full mt-[15px] mb-[12px] text-[15px] leading-[24px] text-base cursor-pointer text-overflow-2">
+        <p className="w-full mt-[15px] mb-[12px] text-[15px] leading-[24px] font-500 text-base cursor-pointer text-overflow-2">
           {summary}
         </p>
       </Link>

src/components/Journal/JournalList/VolListCoverCard.tsx

@@ -6,7 +6,7 @@ export default function CoverCard({ title, img, no }: { title: string; img: stri
   return (
     <JournalCard image={img} journalNo={no} className="cursor-pointer">
       <div className={`absolute bottom-0 w-full h-[126px] ${styles.title_background}`}>
-        <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[20px] leading-[33.6px]">{title}</p>
+        <p className="absolute bottom-[23px] left-[23px] text-[#fff] text-[20px] leading-[33.6px] font-500">{title}</p>
       </div>
       <div className="absolute bottom-[24px] right-[24px] w-[46px] h-[32px] bg-[url(/img/icon/play-journal-card.svg)] bg-no-repeat z-2 opacity-0 group-hover:opacity-100  transition-opacity-500" />
     </JournalCard>

src/components/Journal/JournalRecommendCard.tsx

@@ -14,7 +14,7 @@ export default function JournalRecommendCard({ title, image, userCollectCount }:
         />
       </div>
       <div className="flex flex-col justify-between h-full ml-[20px] py-[6px]">
-        <p className="w-[200px] text-[15px] leading-[21px] text-overflow cursor-pointer">{title}</p>
+        <p className="w-[200px] text-[15px] leading-[21px] font-500 text-overflow cursor-pointer">{title}</p>
         <p className="text-[rgba(0,0,0,0.7)] text-[13px] leading-[18.2px] cursor-pointer">{`${userCollectCount}人收藏`}</p>
       </div>
     </div>

src/components/Journal/JournalRecommendList.tsx

@@ -6,11 +6,11 @@ interface Props {
   list: JournalInfo[];
 }
 
-const JournalRecommendList = async ({ list }: Props) => {
+export default function JournalRecommendList({ list }: Props) {
   return (
     <div className="flex flex-col">
       {/* 分类 & 电台 */}
-      <div className="text-17px leading-17px">热门推荐</div>
+      <div className="text-17px leading-24px font-500">热门推荐</div>
       {/* 期刊 list */}
       <div className="flex flex-col gap-30px mt-12px">
         {!!list?.length &&
@@ -22,6 +22,4 @@ const JournalRecommendList = async ({ list }: Props) => {
       </div>
     </div>
   );
-};
+}
-
-export default JournalRecommendList;

src/components/Pagination/PaginationItem.tsx

@@ -28,7 +28,7 @@ function isServerProps(props: PaginationItemProps): props is ServerProps {
 
 // 通用样式
 const commonClassName =
-  'w-[40px] h-[40px] text-[14px] text-center leading-[40px] rounded-[3px] text-[#000] hover-text-brand bg-[#F2F3F7]';
+  'w-[40px] h-[40px] rounded-[3px] text-[14px] text-center text-[#000] hover-text-brand leading-[40px] font-500 bg-[#F2F3F7]';
 
 // 激活状态样式
 const activeClassName = 'text-[#fff] bg-brand';