feat: add style transition

Author: qianxun

src/pages/index.tsx

@@ -5,6 +5,7 @@ import title from "@/static/images/home_title.png";
 import styles from '@/styles/home.module.scss';
 import {AboutDoc, DesignSystem, LeftOrigin, RightOrigin} from '@/data/doc';
 import {useEffect, useState} from "react";
+import {Button} from "antd";
 
 function Home() {
     const [bgHeight, setBgHeight] = useState('0px');
@@ -51,7 +52,7 @@ function Home() {
                                 <img src={item?.imgUrl} alt=""/>
                                 <div className={styles.title}>{item.title}</div>
                                 <div className={styles.subTitle}>{item.subTitle}</div>
-                                <div className={styles.jump} onClick={() => router.push(item.jumpUrl)}>{'查看详情>'}</div>
+                                <Button onClick={() => router.push(item.jumpUrl)} type={'link'}>{'查看详情>'}</Button>
                             </div>
                         ))
                     }
@@ -64,7 +65,7 @@ function Home() {
                                 <div style={{ margin: '35px 0px' }}>
                                     <div className={styles.title}>{item.title}</div>
                                     <div className={styles.subTitle}>{item.subTitle}</div>
-                                    <div className={styles.jump} onClick={() => router.push(item.jumpUrl)}>{'查看详情>'}</div>
+                                    <Button onClick={() => router.push(item.jumpUrl)} type={'link'}>{'查看详情>'}</Button>
                                 </div>
                             </div>
                         ))

src/styles/home.module.scss

@@ -32,6 +32,8 @@
       background: #F1F9FE;
       border-radius: 16px;
       margin-right: 40px;
+      cursor: pointer;
+      transition: box-shadow .3s;
 
       img {
         width: 160px;
@@ -45,6 +47,9 @@
         padding: 0 40px;
       }
     }
+    .box:hover {
+      box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+    }
   }
 }
 
@@ -69,6 +74,7 @@
     height: 381px;
     margin-right: 40px;
     text-align: center;
+    transition: box-shadow .3s;
 
     img {
       width: 150px;
@@ -86,16 +92,13 @@
       color: #64698B;
       margin: 18px 0 40px 0;
     }
-
-    .jump {
-      color: #1D78FF;
-    }
   }
 
   .rightBox {
     width: 580px;
     height: 170px;
     display: flex;
+    transition: box-shadow .3s;
 
     img {
       width: 100px;
@@ -116,12 +119,11 @@
       width: 236px;
       margin: 12px 0px;
     }
-
-    .jump {
-      color: #1D78FF;
-    }
   }
 
+  .leftBox:hover,.rightBox:hover {
+    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+  }
   .rightBox:first-child {
     margin-bottom: 40px;
   }

src/styles/navHeader.module.scss

@@ -25,6 +25,7 @@
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #3D446E;
+    cursor: pointer;
   }
 }
 .menu {