!7 stepper

Merge pull request !7 from 骚/myf

public/locales/zh-CN.json

@@ -1098,5 +1098,13 @@
   "Number of first-level subordinates":"一级下级人数",
   "Immediately to receive":"立即领取",
   "buy again":"再次购买",
-  "Connect the purse":"连接钱包"
+  "Connect the purse":"连接钱包",
+  "HCC total revenue percentage :10%":"HCC总收益(分成比例:10%)",
+  "Contract address":"合约地址",
+  "Assets agreement":"资产协议",
+  "Assets and chain":"资产公链",
+  "each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
+  "last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
+  "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
+
 }

src/App.tsx

@@ -49,7 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
 const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
 const Nft = lazy(() => import('./views/Nft'))
-const Recommend = lazy(() => import('./views/recommend'))
+const Recommend = lazy(() => import('./views/Recommend'))
 
 // This config is required for number formatting
 BigNumber.config({

src/config/localization/translations.json

@@ -1225,5 +1225,12 @@
   "Number of first-level subordinates":"Number of first-level subordinates",
   "Immediately to receive":"Immediately to receive",
   "buy again":"buy again",
-  "Connect the purse":"Connect the purse"
+  "Connect the purse":"Connect the purse",
+  "HCC total revenue percentage :10%":"HCC total revenue percentage :10%",
+  "Contract address":"ontract address",
+  "Assets agreement":"Assets agreement",
+  "Assets and chain":"Assets and chain",
+  "each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
+  "last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
+  "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee"
 }

src/views/Home/components/CourseCom.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react'
+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 } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
-const FristPage = styled.div`
+const FirstPage = styled.div`
   background-image: url('/images/home/three.svg');
   background-size: 100%;
   background-repeat: no-repeat;
-  padding: 8rem 0 0.8rem 0;
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`
@@ -26,46 +26,22 @@ const StyledPage = styled(Box)`
     width: 80%;
   }
 `
-
+const FlexMain = styled(Flex)`
-const SortDiv = styled.div`
-  height: 190px;
-  position: relative;
-`
-
-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;
-`
 
-const CardDiv = styled.div`
+  ${({ theme }) => theme.mediaQueries.xs} {
-  width: 372px;
+    justify-content: start;
-  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;
-  ${({ theme }) => theme.mediaQueries.sm} {
-    // left: 60px !important;
   }
 
   ${({ theme }) => theme.mediaQueries.lg} {
+    justify-content: center;
   }
 `
 
+const CardDiv = styled(Card)`
+  padding: 20px;
+`
+
 const CourseCom: React.FC = () => {
   const { t } = useTranslation()
 
@@ -75,7 +51,7 @@ const CourseCom: React.FC = () => {
       id: 1,
       list: [
         { text: t('The project concept was born in May 2021') },
-        { text: t('Set up HighClty team in June 2021') },
+        { text: t('Set up HighCity team in June 2021') },
         { text: t('May 2021 -- January 2022 Team run-in') },
       ],
     },
@@ -117,18 +93,14 @@ const CourseCom: React.FC = () => {
 
   return (
     <>
-      <FristPage>
+      <FirstPage>
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
-          <Flex justifyContent="center">
+          <FlexMain>
             <div>
-              {list.map((item, index) => {
+              <Stepper>
-                return (
+                {list.map((item, index) => (
-                  <SortDiv
+                  <Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
-                    key={item.id}
+                    <CardDiv>
-                    style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
-                  >
-                    <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
-                    <CardDiv style={{ left: index % 2 ? '-420px' : '60px' }}>
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -138,13 +110,13 @@ const CourseCom: React.FC = () => {
                         )
                       })}
                     </CardDiv>
-                  </SortDiv>
+                  </Step>
-                )
+                ))}
-              })}
+              </Stepper>
             </div>
-          </Flex>
+          </FlexMain>
         </StyledPage>
-      </FristPage>
+      </FirstPage>
     </>
   )
 }

src/views/Home/components/FlexItemCom.tsx

@@ -2,9 +2,13 @@ import React from 'react'
 import styled from 'styled-components'
 import { Text } from '@pancakeswap/uikit'
 
+interface FlexProp {
+  name: string
+  value: string
+}
+
 const ScoreItem = styled.div`
   width: 100%;
-  text-algin: center;
 `
 
 const ItemText = styled(Text)`
@@ -17,7 +21,7 @@ const ItemSubText = styled(Text)`
   font-size: 20px;
 `
 
-export default function FlexItemCom({ name, value }) {
+const FlexItemCom: React.FC<FlexProp> = ({ name, value }) => {
   return (
     <ScoreItem>
       <ItemText color="text">{value}</ItemText>
@@ -25,3 +29,4 @@ export default function FlexItemCom({ name, value }) {
     </ScoreItem>
   )
 }
+export default FlexItemCom

src/views/Home/components/FristCom.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'contexts/Localization'
 
 import FlexItemCom from './FlexItemCom'
 
-const FristPage = styled.div`
+const FirstPage = styled.div`
   background-image: url('/images/home/bg.svg');
-  background-size: 100%;
+  background-size: cover;
   background-repeat: no-repeat;
   padding: 0.9rem 0 0.8rem 0;
 `
@@ -28,21 +28,78 @@ const StyledPage = styled(Box)`
     width: 80%;
   }
 `
+const FlexDiv = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    justify-content: center;
+  }
 
+  ${({ theme }) => theme.mediaQueries.lg} {
+  }
+`
+const ImageDiv = styled.img`
+  ${({ theme }) => theme.mediaQueries.xs} {
+    justify-content: center;
+    width: 215px;
+    height: 215px;
+    margin-bottom: 20px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 315px;
+    height: 315px;
+    margin-bottom: 0px;
+  }
+`
+const BtnFlex = styled(Flex)`
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 60px;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 30px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 60px;
+  }
+`
 const RadiusBtn = styled(Button)`
   border-radius: 50px;
   width: 170px;
   height: 60px;
   font-size: 18px;
-  margin: 0px 20px 0 0;
+  margin-right: 20px;
+  margin-bottom: 10px;
   background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 140px;
+    height: 50px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 170px;
+    height: 60px;
+  }
 `
 const WhiteBtn = styled(Button)`
   border-radius: 50px;
+  width: 140px;
+  height: 30px;
+  border: 1px solid #1fc7d4;
+  margin: 0px 35px 10px 0;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 140px;
+    height: 50px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
     width: 170px;
     height: 60px;
-  border: 1px solid #1fc7d4;
+  }
-  margin: 0px 35px 0 0;
+`
+const BtnImage = styled(Image)`
+  width: 34px;
+  height: 34px;
+  margin-right: 12px;
 `
 
 const ScoreDiv = styled(Flex)`
@@ -52,6 +109,17 @@ const ScoreDiv = styled(Flex)`
   opacity: 1;
   border-radius: 15px;
   padding: 59px 0;
+  justify-content: space-between;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 50px;
+    padding: 30px 0;
+    flex-direction: column;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 127px;
+    padding: 59px 0;
+    flex-direction: unset;
+  }
 `
 const InfoDiv = styled.div``
 
@@ -65,40 +133,34 @@ const FristCom: React.FC = () => {
   ])
   return (
     <>
-      <FristPage>
+      <FirstPage>
-        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+        <StyledPage px={['16px', '24px']} mx="auto">
-          <Flex justifyContent="space-between" alignItems="center" flexDirection="row-reverse" flexWrap="wrap">
+          <FlexDiv>
-            <Image src="/images/home/logo.svg" alt="" width={315} height={315} />
+            <ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
             <InfoDiv>
               <Heading as="h1" scale="xl" mb="24px" color="secondary">
                 High City Coin
               </Heading>
-              <Text>
+              <Text>{t('Hcc Info')}</Text>
-                {t('Hcc Info')}
+              <Text> {t('Hcc Nft')}</Text>
-                <br />
+              <Text>{t('Hcc BTC')}</Text>
-                {t('Hcc Nft')}
+              <BtnFlex>
-                <br />
+                <RadiusBtn variant="primary">{t('Exchange')}</RadiusBtn>
-                {t('Hcc BTC')}
+                <WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn>
-              </Text>
+                <Flex>
-              <Flex alignItems="center" marginTop="60px">
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
-                <RadiusBtn variant="primary" scale="sm">
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
-                  {t('Exchange')}
-                </RadiusBtn>
-                <WhiteBtn variant="secondary" scale="sm">
-                  {t('Bazaar')}
-                </WhiteBtn>
-                <Image src="/images/home/fg.png" alt="" width={34} height={34} marginRight="12px" />
-                <Image src="/images/home/fg.png" alt="" width={34} height={34} marginRight="12px" />
                 </Flex>
+              </BtnFlex>
             </InfoDiv>
-          </Flex>
+          </FlexDiv>
-          <ScoreDiv justifyContent="space-between">
+          <ScoreDiv>
             {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />
             })}
           </ScoreDiv>
         </StyledPage>
-      </FristPage>
+      </FirstPage>
     </>
   )
 }

src/views/Home/components/IntroduceCom.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Flex, Heading, Text, BaseLayout, Box, Button, Image } from '@pancakeswap/uikit'
+import { Heading, Text, Box, Image } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
-const FristPage = styled.div`
+const FirstPage = styled.div`
   background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
-  padding: 8rem 0 0.8rem 0;
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`
@@ -30,8 +30,14 @@ const BoxMain = styled(Box)`
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
   opacity: 1;
   border-radius: 20px;
-  padding: 94px 92px 37px 92px;
   position: relative;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    padding: 94px 30px 37px 30px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 94px 92px 37px 92px;
+  }
 `
 
 const MainDiv = styled.div`
@@ -57,15 +63,31 @@ const MainDiv = styled.div`
 `
 
 const HeadingDiv = styled(Heading)`
+  width: 100%;
   margin-top: 18px;
   font-size: 36px;
   color: #333333;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 10px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 18px;
+  }
 `
 
 const TextCom = styled(Text)`
   margin-top: 35px;
   text-align: center;
   line-height: 32px;
+  width: 100%;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    margin-top: 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: 35px;
+  }
 `
 
 const IntroduceCom: React.FC = () => {
@@ -73,7 +95,7 @@ const IntroduceCom: React.FC = () => {
 
   return (
     <>
-      <FristPage>
+      <FirstPage>
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <BoxMain>
             <MainDiv>
@@ -81,11 +103,11 @@ const IntroduceCom: React.FC = () => {
                 <Image src="/images/home/intor.svg" alt="" width={75} height={75} />
               </div>
             </MainDiv>
-            <HeadingDiv textAlign="center">HlighCitySwap</HeadingDiv>
+            <HeadingDiv textAlign="center">HighCitySwap</HeadingDiv>
-            <TextCom>{t('HlighCitySwapInfo')}</TextCom>
+            <TextCom>{t('HighCitySwapInfo')}</TextCom>
           </BoxMain>
         </StyledPage>
-      </FristPage>
+      </FirstPage>
     </>
   )
 }

src/views/Recommend/components/BuyNftModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
@@ -6,41 +6,55 @@ import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
-  & > .jCXCIB {
+  width: 80%;
-    border-bottom: none;
+
-    text-align: center;
+  ${({ theme }) => theme.mediaQueries.xs} {
-    & > .hMvvbb {
-      justify-content: center;
-    }
   }
 `
 
 const InfoDiv = styled.div`
   box-sizing: border-box;
   padding: 30px 26px;
-  /* width: calc(100% - 280px); */
+  margin-left: 60px;
-  margin-left: 2rem;
   box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
+  ${({ theme }) => theme.mediaQueries.xs} {
+    padding: 20px 10px;
+    margin-left: 0;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 30px 26px;
+    margin-left: 60px;
+  }
 `
 const UpBtn = styled(Button)`
-  width: 40%;
+  width: 50%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
+const ImageDiv = styled(Image)`
+  width: 300px;
+  height: 300px;
+  margin-bottom: 20px;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 150px;
+    height: 150px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 300px;
+    height: 300px;
+  }
+`
 
-export default function BuyNftModal() {
+const BuyNftModal: React.FC = () => {
   const { t } = useTranslation()
 
-  const onDismiss = () => {
+  // const onDismiss = () => {}
-    console.log('aaa')
-  }
   return (
-    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
+    <ModalDiv title={t('Buy commander NFT')}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
-        <Image src="/images/recommend/logo.svg" width={300} height={300} marginBottom="20px" />
+        <ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
         <InfoDiv>
           <TextFlex
             text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
@@ -50,6 +64,9 @@ export default function BuyNftModal() {
           <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
           <FlexCom name={t('First stage sharing ratio')} value="10％" />
           <FlexCom name={t('Secondary split ratio')} value="5％" />
+          <FlexCom name={t('Contract address')} value={t('Contract address')} />
+          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
+          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
         </InfoDiv>
       </Flex>
 
@@ -59,3 +76,4 @@ export default function BuyNftModal() {
     </ModalDiv>
   )
 }
+export default BuyNftModal

src/views/Recommend/components/Connected.tsx

@@ -1,22 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import { Button, Heading, Image, useModal } from '@pancakeswap/uikit'
+import { Button, useModal, Text } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
-import HeaderMian from './HeaderMain'
+import HeaderMain from './HeaderMain'
-
-const HeadingDiv = styled(Heading)`
-  padding-top: 30px;
-  position: relative;
-`
-
-const TipDiv = styled(Image)`
-  position: absolute;
-  cursor: pointer;
-  top: 24px;
-  left: 30px;
-`
 
 const ButtonDiv = styled(Button)`
   width: 100%;
@@ -30,7 +18,6 @@ const UpBtn = styled(Button)`
   width: 100%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
@@ -38,30 +25,41 @@ const UpBtn = styled(Button)`
 const FooterBtn = styled.div`
   width: 100%;
   box-sizing: border-box;
-  padding: 0 30px 20px 30px;
+  padding-bottom: 20px;
 `
 const MainDiv = styled.div`
   padding: 0 30px;
 `
+const FooterDiv = styled.div`
+  margin: 0 auto 30px auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
 
-export default function ConnectedCom() {
+const ConnectedCom: React.FC = () => {
   const { t } = useTranslation()
   const [onBuyModal] = useModal(<BuyNftModal />)
 
   return (
     <MainDiv>
-      <HeaderMian title={t('recommend')} />
+      <HeaderMain title={t('recommend')} />
       <>
         <FlexCom name={t('The lower the number of')} value="100000(人)" />
-        <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
         <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
         <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
       </>
-
       <FooterBtn>
         <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
         <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
       </FooterBtn>
+      <FooterDiv>
+        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+      </FooterDiv>
     </MainDiv>
   )
 }
+export default ConnectedCom

src/views/Recommend/components/FlexCom.tsx

@@ -1,25 +1,32 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { Flex, Text } from '@pancakeswap/uikit'
 
+interface FlexProps {
+  name: string
+  value: string
+  paddings?: string
+  leftColor?: string
+  rightColor?: string
+}
+
 const FlexDiv = styled(Flex)`
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
 `
-
+const FlexCom: React.FC<FlexProps> = ({
-export default function FlexCom({
   name,
   value,
-  paddings = '0',
+  paddings = '0px',
   leftColor = 'text',
-  RightColor = 'textSubtle',
+  rightColor = 'textSubtle',
-  color = '#1FC7D4',
+}) => {
-}) {
   return (
     <FlexDiv style={{ padding: paddings }}>
       <Text color={leftColor}>{name}</Text>
-      <Text color={RightColor}>{value}</Text>
+      <Text color={rightColor}>{value}</Text>
     </FlexDiv>
   )
 }
+export default FlexCom

src/views/Recommend/components/HeaderMain.tsx

@@ -1,6 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+import { Image, Heading } from '@pancakeswap/uikit'
+
+interface HeaderProp {
+  title: string
+}
 
 const HeadingDiv = styled(Heading)`
   padding-top: 30px;
@@ -13,11 +17,11 @@ const TipDiv = styled(Image)`
   top: 24px;
   left: 0;
 `
-export default function HeaderMian({ title }) {
+const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
-      <TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
       {title}
     </HeadingDiv>
   )
 }
+export default HeaderMain

src/views/Recommend/components/Regimental.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text, Image, Button } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import HeaderMain from './HeaderMain'
+
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
+  color: ${({ theme }) => theme.colors.textDisabled};
+`
+
+const UpBtn = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+`
+
+const ContentDiv = styled.div`
+  width: 60%;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  border-radius: 40px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 60%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 60%;
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 90%;
+    height: 80vh;
+    overflow-y: auto;
+  }
+`
+
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+const FooterDiv = styled.div`
+  margin: 0 auto 30px auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+const LogoImage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const RegimentalCom: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <ContentDiv>
+      <MainDiv>
+        <HeaderMain title={t('Regimental recommendation')} />
+        <LogoImage>
+          <Image src="/images/recommend/logo.svg" width={249} height={249} />
+        </LogoImage>
+
+        <>
+          <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
+          <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
+          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+        </>
+
+        <FooterBtn>
+          <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
+          {/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
+        </FooterBtn>
+        <FooterDiv>
+          <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+          <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+          <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+        </FooterDiv>
+      </MainDiv>
+    </ContentDiv>
+  )
+}
+export default RegimentalCom

src/views/Recommend/components/TextFlex.tsx

@@ -1,7 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { Flex } from '@pancakeswap/uikit'
 
+interface TextProps {
+  color: string
+  text?: string
+}
+
 const MainDiv = styled(Flex)`
   box-sizing: border-box;
   padding: 14px 36px;
@@ -12,6 +17,7 @@ const MainDiv = styled(Flex)`
   justify-content: center;
 `
 
-export default function TextFlex({ color, text = '' }) {
+const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
   return <MainDiv style={{ background: color }}>{text}</MainDiv>
 }
+export default TextFlex

src/views/Recommend/components/UnunitedCom.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading, Text } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 90px;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 80%;
+  margin: 80px auto 10px auto;
+  margin-left: 10%;
+  border-radius: 50px;
+`
+const FooterDiv = styled.div`
+  width: 80%;
+  margin: 0 auto 30px auto;
+  margin-left: 10%;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+
+const UnunitedCom: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <HeadingDiv scale="xl" mb="24px" textAlign="center">
+        {t('recommend')}
+      </HeadingDiv>
+      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
+      <FooterDiv>
+        <TextDiv color="textSubtle">{t('each time')}</TextDiv>
+        <TextDiv color="textSubtle">{t('last bid')}</TextDiv>
+        <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
+      </FooterDiv>
+    </>
+  )
+}
+export default UnunitedCom

src/views/Recommend/index.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Card, Button, Text, Flex, Image, Heading } from '@pancakeswap/uikit'
-
 import UnunitedCom from './components/UnunitedCom'
-import ConnectedCom from './components/ConnectedComponent'
+import ConnectedCom from './components/Connected'
-import RegimentalCom from './components/RegimentalComponent'
+import RegimentalCom from './components/Regimental'
 
 const MainDiv = styled.div`
   min-height: calc(100vh - 64px);
@@ -16,22 +14,33 @@ const MainDiv = styled.div`
   justify-content: center;
 `
 
-const ContengDiv = styled.div`
+const ContentDiv = styled.div`
   width: 60%;
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 60%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 60%;
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 90%;
+  }
 `
 
 const Nft: React.FC = () => {
   //  邀请false普通邀请 true军团长邀请
-  const [type, typeState] = useState(false)
+  const [type, setType] = useState(false)
   //  是否连接钱包
-  const [status, statusState] = useState(true)
+  const [status, setStatus] = useState(true)
 
   return (
     <MainDiv>
-      {type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
+      {type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
     </MainDiv>
   )
 }

src/views/recommend/components/RegimentalComponent.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import { useTranslation } from 'contexts/Localization'
-import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
-import FlexCom from './FlexCom'
-import HeaderMian from './HeaderMain'
-
-const MainDiv = styled.div`
-  width: 60%;
-`
-const HeaderFlex = styled(Flex)`
-  padding-left: 20px;
-`
-
-const BuyButton = styled(Button)`
-  width: 150px;
-  border-radius: 50px;
-  margin-left: 20px;
-  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
-  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
-`
-
-const ContentFlex = styled(Flex)`
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-`
-
-const InfoDiv = styled.div`
-  width: calc(50% - 40px);
-  margin: 0 20px;
-  /* width: 400px; */
-  min-width: 315px;
-  background: #ffffff;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 40px;
-  box-sizing: border-box;
-  margin-top: 50px;
-  padding: 0 30px 35px 30px;
-`
-const ButtonDiv = styled(Button)`
-  width: 100%;
-  margin: 20px auto 0px auto;
-  border-radius: 50px;
-  border: 1px solid ${({ theme }) => theme.colors.primaryDark};
-  color: ${({ theme }) => theme.colors.primaryDark};
-`
-export default function RegimentalCom() {
-  const { t } = useTranslation()
-  return (
-    <MainDiv>
-      <HeaderFlex>
-        <Image src="/images/recommend/logo.svg" width={60} height={60} />
-        <BuyButton>{t('buy again')}</BuyButton>
-      </HeaderFlex>
-      <ContentFlex>
-        <InfoDiv>
-          <HeaderMian title={t('recommend')} />
-          <FlexCom name={t('The lower the number of')} value="100000(人)" />
-          <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
-          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
-          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
-          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
-          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
-        </InfoDiv>
-        <InfoDiv>
-          <HeaderMian title={t('Regimental recommendation')} />
-          <FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
-          <FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
-          <FlexCom name={t('Number of secondary subordinates')} value="" />
-          <FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
-          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
-          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
-          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
-        </InfoDiv>
-      </ContentFlex>
-    </MainDiv>
-  )
-}

src/views/recommend/components/UnunitedCom.tsx

@@ -1,25 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import { useTranslation } from 'contexts/Localization'
-import { Button, Heading } from '@pancakeswap/uikit'
-
-const HeadingDiv = styled(Heading)`
-  padding-top: 5rem;
-`
-
-const ButtonDiv = styled(Button)`
-  width: 80%;
-  margin: 5rem auto 3rem auto;
-  margin-left: 10%;
-`
-export default function UnunitedCom() {
-  const { t } = useTranslation()
-  return (
-    <>
-      <HeadingDiv scale="xl" mb="24px" textAlign="center">
-        {t('recommend')}
-      </HeadingDiv>
-      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
-    </>
-  )
-}