代码格式

src/views/Home/components/CourseCom.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
+import { Flex, Heading, Text, Box, Stepper, Step, Card, CardBody } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
@@ -36,80 +36,9 @@ const FlexMain = styled(Flex)`
     justify-content: center;
   }
 `
-const SortDiv = styled.div`
-  height: 190px;
-  position: relative;
 
-  ${({ theme }) => theme.mediaQueries.xs} {
-    height: 330px;
-    & > .card-content {
-      left: 20px;
-      width: 300px;
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    height: 190px;
-    :nth-of-type(odd) {
-      & > .card-content {
-        width: 372px;
-        left: 60px;
-      }
-    }
-
-    :nth-of-type(even) {
-      & > .card-content {
-        width: 372px;
-        left: -420px;
-      }
-    }
-  }
-`
-
-const SortNum = styled.div`
-  position: absolute;
-  top: 0;
-  left: -43px;
-  width: 82px;
-  height: 82px;
-  background: #1fc7d4;
-  border-radius: 50%;
-  font-size: 46px;
-  color: #faf9fa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-
-  ${({ theme }) => theme.mediaQueries.xs} {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    font-size: 26px;
-    top: 0;
-    left: -23px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    position: absolute;
-    width: 82px;
-    height: 82px;
-    font-size: 46px;
-    top: 0;
-    left: -43px;
-  }
-`
-
-const CardDiv = styled.div`
-  width: 372px;
-  box-sizing: border-box;
-  padding: 28px 40px 16px 26px;
-  border: 1px solid #e7e3eb;
-  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 25px;
-  position: absolute;
-  top: -25%;
-  background: #fff;
+const CardDiv = styled(Card)`
+  padding: 20px;
 `
 
 const CourseCom: React.FC = () => {
@@ -167,14 +96,11 @@ const CourseCom: React.FC = () => {
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <FlexMain>
             <div>
-              {list.map((item, index) => {
-                return (
-                  <SortDiv
-                    key={item.id}
-                    style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
-                  >
-                    <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
-                    <CardDiv className="card-content">
+              <Stepper>
+                {list.map((item, index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Step key={index} index={index} status={index % 2 ? 'past' : 'current'}>
+                    <CardDiv>
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -184,9 +110,9 @@ const CourseCom: React.FC = () => {
                         )
                       })}
                     </CardDiv>
-                  </SortDiv>
-                )
-              })}
+                  </Step>
+                ))}
+              </Stepper>
             </div>
           </FlexMain>
         </StyledPage>

src/views/Home/components/IntroduceCom.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
   background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`

src/views/recommend/components/BuyNftModal.tsx

@@ -7,9 +7,6 @@ import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
   width: 80%;
-
-  ${({ theme }) => theme.mediaQueries.xs} {
-  }
 `
 
 const InfoDiv = styled.div`

src/views/recommend/components/FlexCom.tsx

@@ -5,9 +5,9 @@ import { Flex, Text } from '@pancakeswap/uikit'
 interface FlexProps {
   name: string
   value: string
-  paddings?: string | '0px'
-  leftColor?: string | 'text'
-  RightColor?: string | 'textSubtle'
+  paddings?: string
+  leftColor?: string
+  rightColor?: string
 }
 
 const FlexDiv = styled(Flex)`
@@ -15,11 +15,17 @@ const FlexDiv = styled(Flex)`
   align-items: center;
   margin-top: 20px;
 `
-const FlexCom: React.FC<FlexProps> = ({ name, value, paddings, leftColor, RightColor }) => {
+const FlexCom: React.FC<FlexProps> = ({
+  name,
+  value,
+  paddings = '0px',
+  leftColor = 'text',
+  rightColor = 'textSubtle',
+}) => {
   return (
     <FlexDiv style={{ padding: paddings }}>
       <Text color={leftColor}>{name}</Text>
-      <Text color={RightColor}>{value}</Text>
+      <Text color={rightColor}>{value}</Text>
     </FlexDiv>
   )
 }

src/views/recommend/components/HeaderMain.tsx

@@ -11,12 +11,6 @@ const HeadingDiv = styled(Heading)`
   position: relative;
 `
 
-const TipDiv = styled(Image)`
-  position: absolute;
-  cursor: pointer;
-  top: 24px;
-  left: 0;
-`
 const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">

src/views/recommend/components/TextFlex.tsx

@@ -4,7 +4,7 @@ import { Flex } from '@pancakeswap/uikit'
 
 interface TextProps {
   color: string
-  text?: string | ''
+  text?: string
 }
 
 const MainDiv = styled(Flex)`

src/views/recommend/index.tsx

@@ -32,7 +32,7 @@ const ContengDiv = styled.div`
   }
 `
 
-const Nft: React.FC = () => {
+const Recommend: React.FC = () => {
   //  邀请false普通邀请 true军团长邀请
   const [type, typeState] = useState(false)
   //  是否连接钱包
@@ -44,4 +44,4 @@ const Nft: React.FC = () => {
     </MainDiv>
   )
 }
-export default Nft
+export default Recommend