all
This commit is contained in:
myf
commit
293d6255b5
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
|
||||
import TextFlex from './TextFlex'
|
||||
import FlexCom from './FlexCom'
|
||||
|
||||
const ModalDiv = styled(Modal)`
|
||||
width: 80%;
|
||||
`
|
||||
|
||||
const InfoDiv = styled.div`
|
||||
box-sizing: border-box;
|
||||
padding: 30px 26px;
|
||||
margin-left: 60px;
|
||||
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: 50%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
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;
|
||||
}
|
||||
`
|
||||
|
||||
const BuyNftModal: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// const onDismiss = () => {}
|
||||
return (
|
||||
<ModalDiv title={t('Buy commander NFT')}>
|
||||
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
|
||||
<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')}
|
||||
color="#FEFDF1"
|
||||
/>
|
||||
<TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
|
||||
<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>
|
||||
|
||||
<Flex>
|
||||
<UpBtn>{t('Buy It Now')}</UpBtn>
|
||||
</Flex>
|
||||
</ModalDiv>
|
||||
)
|
||||
}
|
||||
export default BuyNftModal
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
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> = ({
|
||||
name,
|
||||
value,
|
||||
paddings = '0px',
|
||||
leftColor = 'text',
|
||||
rightColor = 'textSubtle',
|
||||
}) => {
|
||||
return (
|
||||
<FlexDiv style={{ padding: paddings }}>
|
||||
<Text color={leftColor}>{name}</Text>
|
||||
<Text color={rightColor}>{value}</Text>
|
||||
</FlexDiv>
|
||||
)
|
||||
}
|
||||
export default FlexCom
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Image, Heading } from '@pancakeswap/uikit'
|
||||
|
||||
interface HeaderProp {
|
||||
title: string
|
||||
}
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
|
||||
return (
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
{title}
|
||||
</HeadingDiv>
|
||||
)
|
||||
}
|
||||
export default HeaderMian
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
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;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
color: #2f2e41;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
|
||||
return <MainDiv style={{ background: color }}>{text}</MainDiv>
|
||||
}
|
||||
export default TextFlex
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import UnunitedCom from './components/UnunitedCom'
|
||||
import ConnectedCom from './components/Connected'
|
||||
import RegimentalCom from './components/Regimental'
|
||||
|
||||
const MainDiv = styled.div`
|
||||
min-height: calc(100vh - 64px);
|
||||
background-image: url('/images/recommend/bg.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
const ContengDiv = 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 Recommend: React.FC = () => {
|
||||
// 邀请false普通邀请 true军团长邀请
|
||||
const [type, typeState] = useState(false)
|
||||
// 是否连接钱包
|
||||
const [status, statusState] = useState(true)
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
{type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
export default Recommend
|
||||
Loading…
Reference in New Issue