zhangshu
/
hiCity-nft
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

stepper

This commit is contained in:
myf 2022-04-20 18:13:52 +08:00
parent 7fbd3cd68f
commit 554436067b
7 changed files with 37 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/Home/components/CourseCom.tsx
View File

@ -1,12 +1,13 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import styled from 'styled-components' 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' import { useTranslation } from 'contexts/Localization'
const FristPage = styled.div` const FirstPage = styled.div`
background-image: url('/images/home/three.svg'); background-image: url('/images/home/three.svg');
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 100px 0 50px 0;
` `
const StyledPage = styled(Box)` const StyledPage = styled(Box)`
@ -36,80 +37,9 @@ const FlexMain = styled(Flex)`
justify-content: center; justify-content: center;
} }
` `
const SortDiv = styled.div`
height: 190px;
position: relative;
${({ theme }) => theme.mediaQueries.xs} { const CardDiv = styled(Card)`
height: 330px; padding: 20px;
& > .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 CourseCom: React.FC = () => { const CourseCom: React.FC = () => {
@ -121,7 +51,7 @@ const CourseCom: React.FC = () => {
id: 1, id: 1,
list: [ list: [
{ text: t('The project concept was born in May 2021') }, { 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') }, { text: t('May 2021 -- January 2022 Team run-in') },
], ],
}, },
@ -163,18 +93,14 @@ const CourseCom: React.FC = () => {
return ( return (
<> <>
<FristPage> <FirstPage>
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px"> <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
<FlexMain> <FlexMain>
<div> <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 className="card-content">
<Heading>{item.title}</Heading> <Heading>{item.title}</Heading>
{item.list.map((childItem) => { {item.list.map((childItem) => {
return ( return (
@ -184,13 +110,13 @@ const CourseCom: React.FC = () => {
) )
})} })}
</CardDiv> </CardDiv>
</SortDiv> </Step>
) ))}
})} </Stepper>
</div> </div>
</FlexMain> </FlexMain>
</StyledPage> </StyledPage>
</FristPage> </FirstPage>
</> </>
) )
} }

6
src/views/Home/components/FristCom.tsx
View File

@ -5,7 +5,7 @@ import { useTranslation } from 'contexts/Localization'
import FlexItemCom from './FlexItemCom' import FlexItemCom from './FlexItemCom'
const FristPage = styled.div` const FirstPage = styled.div`
background-image: url('/images/home/bg.svg'); background-image: url('/images/home/bg.svg');
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -133,7 +133,7 @@ const FristCom: React.FC = () => {
]) ])
return ( return (
<> <>
<FristPage> <FirstPage>
<StyledPage px={['16px', '24px']} mx="auto"> <StyledPage px={['16px', '24px']} mx="auto">
<FlexDiv> <FlexDiv>
<ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} /> <ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
@ -160,7 +160,7 @@ const FristCom: React.FC = () => {
})} })}
</ScoreDiv> </ScoreDiv>
</StyledPage> </StyledPage>
</FristPage> </FirstPage>
</> </>
) )
} }

11
src/views/Home/components/IntroduceCom.tsx
View File

@ -3,8 +3,9 @@ import styled from 'styled-components'
import { Heading, Text, Box, Image } from '@pancakeswap/uikit' import { Heading, Text, Box, Image } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization' import { useTranslation } from 'contexts/Localization'
const FristPage = styled.div` const FirstPage = styled.div`
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%); background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
padding: 100px 0 50px 0;
` `
const StyledPage = styled(Box)` const StyledPage = styled(Box)`
@ -94,7 +95,7 @@ const IntroduceCom: React.FC = () => {
return ( return (
<> <>
<FristPage> <FirstPage>
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px"> <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
<BoxMain> <BoxMain>
<MainDiv> <MainDiv>
@ -102,11 +103,11 @@ const IntroduceCom: React.FC = () => {
<Image src="/images/home/intor.svg" alt="" width={75} height={75} /> <Image src="/images/home/intor.svg" alt="" width={75} height={75} />
</div> </div>
</MainDiv> </MainDiv>
<HeadingDiv textAlign="center">HlighCitySwap</HeadingDiv> <HeadingDiv textAlign="center">HighCitySwap</HeadingDiv>
<TextCom>{t('HlighCitySwapInfo')}</TextCom> <TextCom>{t('HighCitySwapInfo')}</TextCom>
</BoxMain> </BoxMain>
</StyledPage> </StyledPage>
</FristPage> </FirstPage>
</> </>
) )
} }

4
src/views/Recommend/components/Connected.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'contexts/Localization'
import { Button, useModal, Text } from '@pancakeswap/uikit' import { Button, useModal, Text } from '@pancakeswap/uikit'
import FlexCom from './FlexCom' import FlexCom from './FlexCom'
import BuyNftModal from './BuyNftModal' import BuyNftModal from './BuyNftModal'
import HeaderMian from './HeaderMain' import HeaderMain from './HeaderMain'
const ButtonDiv = styled(Button)` const ButtonDiv = styled(Button)`
width: 100%; width: 100%;
@ -44,7 +44,7 @@ const ConnectedCom: React.FC = () => {
return ( return (
<MainDiv> <MainDiv>
<HeaderMian title={t('recommend')} /> <HeaderMain title={t('recommend')} />
<> <>
<FlexCom name={t('The lower the number of')} value="100000(人)" /> <FlexCom name={t('The lower the number of')} value="100000(人)" />
<FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" /> <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />

4
src/views/Recommend/components/HeaderMain.tsx
View File

@ -17,11 +17,11 @@ const TipDiv = styled(Image)`
top: 24px; top: 24px;
left: 0; left: 0;
` `
const HeaderMian: React.FC<HeaderProp> = ({ title }) => { const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
return ( return (
<HeadingDiv scale="xl" mb="24px" textAlign="center"> <HeadingDiv scale="xl" mb="24px" textAlign="center">
{title} {title}
</HeadingDiv> </HeadingDiv>
) )
} }
export default HeaderMian export default HeaderMain

10
src/views/Recommend/components/Regimental.tsx
View File

@ -3,7 +3,7 @@ import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization' import { useTranslation } from 'contexts/Localization'
import { Text, Image, Button } from '@pancakeswap/uikit' import { Text, Image, Button } from '@pancakeswap/uikit'
import FlexCom from './FlexCom' import FlexCom from './FlexCom'
import HeaderMian from './HeaderMain' import HeaderMain from './HeaderMain'
const ButtonDiv = styled(Button)` const ButtonDiv = styled(Button)`
width: 100%; width: 100%;
@ -27,7 +27,7 @@ const FooterBtn = styled.div`
padding-bottom: 20px; padding-bottom: 20px;
` `
const ContengDiv = styled.div` const ContentDiv = styled.div`
width: 60%; width: 60%;
background: rgba(255, 255, 255, 0.39); background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
@ -66,9 +66,9 @@ const LogoImage = styled.div`
const RegimentalCom: React.FC = () => { const RegimentalCom: React.FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<ContengDiv> <ContentDiv>
<MainDiv> <MainDiv>
<HeaderMian title={t('Regimental recommendation')} /> <HeaderMain title={t('Regimental recommendation')} />
<LogoImage> <LogoImage>
<Image src="/images/recommend/logo.svg" width={249} height={249} /> <Image src="/images/recommend/logo.svg" width={249} height={249} />
</LogoImage> </LogoImage>
@ -102,7 +102,7 @@ const RegimentalCom: React.FC = () => {
<TextDiv color="textSubtle">{t('commission fee')}</TextDiv> <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
</FooterDiv> </FooterDiv>
</MainDiv> </MainDiv>
</ContengDiv> </ContentDiv>
) )
} }
export default RegimentalCom export default RegimentalCom

8
src/views/Recommend/index.tsx
View File

@ -14,7 +14,7 @@ const MainDiv = styled.div`
justify-content: center; justify-content: center;
` `
const ContengDiv = styled.div` const ContentDiv = styled.div`
width: 60%; width: 60%;
background: rgba(255, 255, 255, 0.39); background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
@ -34,13 +34,13 @@ const ContengDiv = styled.div`
const Nft: React.FC = () => { const Nft: React.FC = () => {
// 邀请false普通邀请 true军团长邀请 // 邀请false普通邀请 true军团长邀请
const [type, typeState] = useState(false) const [type, setType] = useState(false)
// 是否连接钱包 // 是否连接钱包
const [status, statusState] = useState(true) const [status, setStatus] = useState(true)
return ( return (
<MainDiv> <MainDiv>
{type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>} {type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
</MainDiv> </MainDiv>
) )
} }