From 3273f3002517fc38dd8ff2d9dbce9d11214e2859 Mon Sep 17 00:00:00 2001
From: mackt <1033530438@qq.com>
Date: Tue, 26 Mar 2024 10:12:07 +0800
Subject: [PATCH] update: download page

---
 .../{download-card.tsx => DownloadCard.tsx}   | 28 +++++++++++++++----
 ...nload-card.module.css => index.module.css} |  0
 src/app/download/page.tsx                     |  2 +-
 3 files changed, 24 insertions(+), 6 deletions(-)
 rename src/app/download/components/{download-card.tsx => DownloadCard.tsx} (52%)
 rename src/app/download/components/{download-card.module.css => index.module.css} (100%)

diff --git a/src/app/download/components/download-card.tsx b/src/app/download/components/DownloadCard.tsx
similarity index 52%
rename from src/app/download/components/download-card.tsx
rename to src/app/download/components/DownloadCard.tsx
index 3fcea65..e4c643e 100644
--- a/src/app/download/components/download-card.tsx
+++ b/src/app/download/components/DownloadCard.tsx
@@ -1,23 +1,41 @@
+import { useState } from 'react';
+
 import Image from 'next/image';
 
-import styles from './download-card.module.css';
+import styles from './index.module.css';
 
 export default function Footer({ platform, iconUrl, qrCode }: DownloadQrcodeCard) {
+  const [showQrCode, setShowQrCode] = useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setShowQrCode(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowQrCode(false);
+  };
+
   return (
     <div className="flex flex-col items-center">
       {/* 卡片 */}
-      <div className="flex flex-row w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px]">
+      <div
+        className="flex flex-row w-[200px] h-[72px] p-[12px] rounded-[9px] bg-[#000] mx-[22px]"
+        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">
+          <p className="my-[2px] mr-[14px] text-[13px] leading-[18px] text-[rgba(255,255,255,0.7)] text-thin cursor-default">
             下载应用
           </p>
-          <p className="text-[16px] font-bold	leading-[22px]">{platform}</p>
+          <p className="text-[16px] font-bold	leading-[22px] cursor-default">{platform}</p>
         </div>
       </div>
 
       {/* 二维码 */}
-      <div className={styles.qrcodeContainer}>
+      <div
+        className={`${styles.qrcodeContainer} ${showQrCode ? 'block' : 'hidden'} transition-opacity duration-500 opacity-100`}
+      >
         {qrCode ? (
           <Image
             className="w-[122px] h-[122px] m-[4px]"
diff --git a/src/app/download/components/download-card.module.css b/src/app/download/components/index.module.css
similarity index 100%
rename from src/app/download/components/download-card.module.css
rename to src/app/download/components/index.module.css
diff --git a/src/app/download/page.tsx b/src/app/download/page.tsx
index cab8b3b..e60eb7e 100644
--- a/src/app/download/page.tsx
+++ b/src/app/download/page.tsx
@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 
-import DownloadCard from './components/download-card';
+import DownloadCard from './components/DownloadCard';
 
 const qrCodeList: Array<DownloadQrcodeCard> = [
   {