首页调整

src/views/Home/components/CourseCom.tsx

@@ -26,10 +26,45 @@ const StyledPage = styled(Box)`
     width: 80%;
   }
 `
+const FlexMain = styled(Flex)`
+  justify-content: center;
 
+  ${({ theme }) => theme.mediaQueries.xs} {
+    justify-content: start;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    justify-content: center;
+  }
+`
 const SortDiv = styled.div`
   height: 190px;
   position: relative;
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    height: 330px;
+    & > .bXcYNu {
+      left: 20px;
+      width: 300px;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    height: 190px;
+    :nth-of-type(odd) {
+      & > .bXcYNu {
+        width: 372px;
+        left: 60px;
+      }
+    }
+
+    :nth-of-type(even) {
+      & > .bXcYNu {
+        width: 372px;
+        left: -420px;
+      }
+    }
+  }
 `
 
 const SortNum = styled.div`
@@ -46,6 +81,24 @@ const SortNum = styled.div`
   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`
@@ -58,12 +111,6 @@ const CardDiv = styled.div`
   position: absolute;
   top: -25%;
   background: #fff;
-  ${({ theme }) => theme.mediaQueries.sm} {
-    // left: 60px !important;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-  }
 `
 
 const CourseCom: React.FC = () => {
@@ -119,7 +166,7 @@ const CourseCom: React.FC = () => {
     <>
       <FristPage>
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
-          <Flex justifyContent="center">
+          <FlexMain>
             <div>
               {list.map((item, index) => {
                 return (
@@ -128,7 +175,8 @@ const CourseCom: React.FC = () => {
                     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' }}>
+                    {/* style={{ left: index % 2 ? '-420px' : '60px' }} */}
+                    <CardDiv>
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -142,7 +190,7 @@ const CourseCom: React.FC = () => {
                 )
               })}
             </div>
-          </Flex>
+          </FlexMain>
         </StyledPage>
       </FristPage>
     </>

src/views/Home/components/FlexItemCom.tsx

@@ -4,7 +4,6 @@ import { Text } from '@pancakeswap/uikit'
 
 const ScoreItem = styled.div`
   width: 100%;
-  text-algin: center;
 `
 
 const ItemText = styled(Text)`

src/views/Home/components/FristCom.tsx

@@ -7,7 +7,7 @@ import FlexItemCom from './FlexItemCom'
 
 const FristPage = 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: 170px;
-  height: 60px;
+  width: 140px;
+  height: 30px;
   border: 1px solid #1fc7d4;
-  margin: 0px 35px 0 0;
+  margin: 0px 35px 10px 0;
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 140px;
+    height: 50px;
+  }
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 170px;
+    height: 60px;
+  }
+`
+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``
 
@@ -66,33 +134,27 @@ const FristCom: React.FC = () => {
   return (
     <>
       <FristPage>
-        <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
-          <Flex justifyContent="space-between" alignItems="center" flexDirection="row-reverse" flexWrap="wrap">
-            <Image src="/images/home/logo.svg" alt="" width={315} height={315} />
+        <StyledPage px={['16px', '24px']} mx="auto">
+          <FlexDiv>
+            <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>
-                {t('Hcc Info')}
-                <br />
-                {t('Hcc Nft')}
-                <br />
-                {t('Hcc BTC')}
-              </Text>
-              <Flex alignItems="center" marginTop="60px">
-                <RadiusBtn variant="primary" scale="sm">
-                  {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>
+              <Text>{t('Hcc Info')}</Text>
+              <Text> {t('Hcc Nft')}</Text>
+              <Text>{t('Hcc BTC')}</Text>
+              <BtnFlex>
+                <RadiusBtn variant="primary">{t('Exchange')}</RadiusBtn>
+                <WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn>
+                <Flex>
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                </Flex>
+              </BtnFlex>
             </InfoDiv>
-          </Flex>
-          <ScoreDiv justifyContent="space-between">
+          </FlexDiv>
+          <ScoreDiv>
             {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />
             })}

src/views/Home/components/IntroduceCom.tsx

@@ -30,8 +30,15 @@ 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;
+  /* 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 +64,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 = () => {