首页调整

2022-04-19 11:00:51 +08:00 · 2022-04-19 11:00:51 +08:00 · 3fc5a047b6
parent 2ef06fee91
commit 3fc5a047b6
4 changed files with 170 additions and 38 deletions
--- a/src/views/Home/components/CourseCom.tsx
+++ b/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>
    </>
--- a/src/views/Home/components/FlexItemCom.tsx
+++ b/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)`
--- a/src/views/Home/components/FristCom.tsx
+++ b/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} />
            })}
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/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 = () => {