docs: update deps to antd-mobile

docs/components/components/Main/MainSection/index.local.less

@@ -29,14 +29,12 @@
 
     .buttonLeft {
       background: #0170fe;
-      color: #fff;
-      border: none;
     }
 
     .buttonRight {
       background: #4ba6ff;
-      color: #fff;
       margin-left: 16px;
+      border-color: #fff;
     }
   }
 

docs/components/components/Main/MainSection/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react'
-import { Button } from 'antd'
+import { Button } from 'antd-mobile'
+import React, { useEffect, useState } from 'react'
 import Lottie from 'react-lottie'
-import styles from './index.local.less'
 import { useTrans } from '../../../../hooks/useTrans'
+import styles from './index.local.less'
 
 export default (props: { isWidthScreen: boolean }) => {
   const [startFireAnimation, setStartFireAnimation] = useState(false)
@@ -36,14 +36,16 @@ export default (props: { isWidthScreen: boolean }) => {
         </div>
         <div className={styles.mainSectionButtonAction}>
           <Button
-            shape='round'
+            color='primary'
+            shape='rounded'
             className={styles.buttonLeft}
             href={trans('/guide/quick-start', '/zh/guide/quick-start')}
           >
             {trans('Get Start', '开始使用')}
           </Button>
           <Button
-            shape='round'
+            color='primary'
+            shape='rounded'
             className={styles.buttonRight}
             href={trans('/components', '/zh/components')}
           >

docs/components/components/Main/index.local.less

@@ -69,6 +69,7 @@
           height: 270px;
           margin-top: 32px;
           border-radius: 12px;
+          padding: 16px 24px;
 
           .productResourceCardContent {
             width: 212px;
@@ -105,7 +106,7 @@
       .productDesignValues {
         margin-top: 32px;
         height: 282px;
-        padding: 8px;
+        padding: 24px 32px;
 
         .productDesignValueBody {
           display: flex;
@@ -187,7 +188,7 @@
           border-radius: 12px;
           box-shadow: 0 4px 10px 0 rgba(184, 212, 231, 0.2);
           margin-top: 24px;
-          padding: 8px;
+          padding: 12px 24px;
 
           .guideCardContent {
             width: 270px;
@@ -242,6 +243,7 @@
           border-radius: 12px;
           box-shadow: 0 12px 28px 0 rgba(113, 142, 204, 0.1);
           margin-top: 32px;
+          padding: 12px 24px;
 
           .recommendCardBody {
             display: flex;
@@ -270,9 +272,13 @@
         }
 
         .recommendCard:hover {
-          box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
-            0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
-          transition: box-shadow 0.3s, border-color 0.3s;
+          box-shadow:
+            0 1px 2px -2px rgba(0, 0, 0, 0.16),
+            0 3px 6px 0 rgba(0, 0, 0, 0.12),
+            0 5px 12px 4px rgba(0, 0, 0, 0.09);
+          transition:
+            box-shadow 0.3s,
+            border-color 0.3s;
         }
       }
     }

docs/components/components/Main/index.tsx

@@ -1,22 +1,22 @@
-import React, { useEffect, useState, useRef } from 'react'
-import { Button, Card } from 'antd'
-import Lottie from 'react-lottie'
-import { useSize } from 'ahooks'
 import { RightOutlined } from '@ant-design/icons'
+import { useSize } from 'ahooks'
+import { Button, Card } from 'antd-mobile'
+import React, { useEffect, useRef, useState } from 'react'
+import Lottie from 'react-lottie'
+import { useTrans } from '../../../hooks/useTrans'
 import MainSection from './MainSection'
 import {
-  productIntroduce,
-  productIntroduceEn,
+  getGuides,
+  getProductDesignValuesBackgroundImage,
   getProductResource,
+  getRecommends,
   productDesignValues,
   productDesignValuesEn,
-  getProductDesignValuesBackgroundImage,
-  getGuides,
-  getRecommends,
+  productIntroduce,
+  productIntroduceEn,
   users,
 } from './config'
 import styles from './index.local.less'
-import { useTrans } from '../../../hooks/useTrans'
 
 export default () => {
   const [isWidthScreen, setIsWidthScreen] = useState(true)

docs/components/home-page.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
-import Main from './components/Main'
 import Footer from './components/Footer'
-import 'antd/dist/antd.css'
+import Main from './components/Main'
 import styles from './home-page.less'
 
 export default () => {

package.json

@@ -112,7 +112,6 @@
     "@typescript-eslint/parser": "^5.59.0",
     "@umijs/types": "^3.5.40",
     "@use-gesture/core": "10.2.20",
-    "antd": "^4.24.9",
     "autoprefixer": "^9.8.8",
     "babel-loader": "^8.3.0",
     "css-loader": "^6.7.3",