update(vol):

1. padding-top
2. 播放按钮位置
3. 收藏按钮位置

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

@@ -34,52 +34,45 @@ export default async function JournalDetail({
   }
 
   return (
-    <main className="w-[1200px] mx-auto flex flex-row justify-between pt-[145px]">
+    <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] mt-[30px]">
+          {/* 期刊号 & 标签 */}
-          <div className="text-[rgba(0,0,0,0.7)] text-[14px] leading-[19.6px]">{`VOL.${journalInfo?.journalNo.toString().padStart(4, '0')}`}</div>
+          <div className="flex flex-row items-center gap-[9px]">
-          {journalInfo?.tags.length > 0 &&
+            <div className="text-[rgba(0,0,0,0.7)] text-14px leading-20px">{`VOL.${journalInfo?.journalNo.toString().padStart(4, '0')}`}</div>
-            journalInfo.tags.map((tag: string) => (
+            {journalInfo?.tags.length > 0 &&
-              // <Link
+              journalInfo.tags.map((tag: string) => (
-              //   href={`/music/${tag}`}
+                <span
-              //   key={tag}
+                  key={tag}
-              //   className="block w-auto py-[3px] px-[10px] rounded-[15px] bg-[rgba(0,0,0,0.05)] text-[rgba(0,0,0,0.7)] text-[12px] leading-[12px]"
+                  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}
+                  {tag}
-              // </Link>
+                </span>
+              ))}
+          </div>
 
-              <span
+          {/* 收藏期刊 */}
-                key={tag}
+          <CollectButton
-                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]"
+            showText
-              >
+            id={journalInfo.id}
-                {tag}
+            active={journalInfo.haveCollect}
-              </span>
+            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="flex flex-row justify-between items-center w-full h-auto">
+            <div className="w-autp text-[24px] leading-[33.6px] my-[9px] text-base font-bold text-overflow">
-              <div className="w-autp text-[24px] leading-[33.6px] my-[9px] text-base font-bold text-overflow">
+              {journalInfo.title}
-                {journalInfo.title}
-              </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 item-center text-[rgba(0,0,0,0.4)] text-[12px] leading-[16.8px] gap-[12px]">
               <p>{journalInfo.editor}</p>

src/components/Journal/JournalCard.tsx

@@ -19,13 +19,15 @@ export default function JournalCard({
   title,
   journalNo,
   showPlay = false,
+  scale = false,
   children,
   className,
 }: {
   image: string;
-  title?: string;
   journalNo: string;
+  title?: string;
   showPlay?: boolean;
+  scale?: boolean;
   children?: React.ReactNode;
   className?: string;
 }) {
@@ -41,7 +43,7 @@ export default function JournalCard({
         src={image}
         unoptimized
         alt={`Vol${journalNo}`}
-        className={`absolute bottom-0  group-hover:transform-scale-103 transition-transform-300`}
+        className={`absolute bottom-0  ${scale && 'group-hover:transform-scale-103 transition-transform-300'}`}
       />
       {/* 标题 */}
       {!!title && (

src/components/Journal/JournalDetail/VolDetailCoverCard.tsx

@@ -8,7 +8,7 @@ export default function CoverCard({ journalInfo, songList }: { journalInfo: Jour
   return (
     <div className="relative">
       <JournalCard image={image} journalNo={journalNo} />
-      <VolPlayButton className="absolute right-[30px] bottom-[-26px]" journalInfo={journalInfo} songList={songList} />
+      <VolPlayButton className="absolute left-30px bottom-30px" journalInfo={journalInfo} songList={songList} />
     </div>
   );
 }

src/components/Journal/JournalList/VolListCoverCard.tsx

@@ -4,7 +4,7 @@ import { JournalCard } from '@/components';
 
 export default function CoverCard({ title, img, no }: { title: string; img: string; no: string }) {
   return (
-    <JournalCard image={img} journalNo={no} className="cursor-pointer">
+    <JournalCard image={img} journalNo={no} scale 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] font-500">{title}</p>
       </div>