update(style): Update some styles

8 months ago · 2cbdc00a27
parent ff001471e0
commit 2cbdc00a27
11 changed files with 54 additions and 22 deletions
--- a/public/img/download/back.svg
+++ b/public/img/download/back.svg
--- a/src/app/about/page.tsx
+++ b/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]">
--- a/src/app/download/components/DownloadCard.tsx
+++ b/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>

--- a/src/app/download/components/index.module.css
+++ b/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% */
+}
--- a/src/app/download/page.tsx
+++ b/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>

--- a/src/app/vol/[journalId]/page.tsx
+++ b/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 &&
--- a/src/app/vol/list/[category]/[[...page]]/page.tsx
+++ b/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>
--- a/src/components/ContributorCard.tsx
+++ b/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>
  );
--- a/src/components/Journal/HotJournalList.tsx
+++ b/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>

--- a/src/components/Journal/JournalItem.tsx
+++ b/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} />}
--- a/src/components/Journal/JournalList.tsx
+++ b/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>
  );