删除文件 src/views/recommend
This commit is contained in:
Gitee
parent
a20fe8fe43
commit
2c2ac35a89
|
|
@ -1,79 +0,0 @@
|
|||
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%;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
}
|
||||
`
|
||||
|
||||
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
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Button, useModal, Text } from '@pancakeswap/uikit'
|
||||
import FlexCom from './FlexCom'
|
||||
import BuyNftModal from './BuyNftModal'
|
||||
import HeaderMian 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 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 ConnectedCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [onBuyModal] = useModal(<BuyNftModal />)
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
<HeaderMian title={t('recommend')} />
|
||||
<>
|
||||
<FlexCom name={t('The lower the number of')} value="100000(人)" />
|
||||
<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
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Text } from '@pancakeswap/uikit'
|
||||
|
||||
interface FlexProps {
|
||||
name: string
|
||||
value: string
|
||||
paddings?: string | '0px'
|
||||
leftColor?: string | 'text'
|
||||
RightColor?: string | 'textSubtle'
|
||||
}
|
||||
|
||||
const FlexDiv = styled(Flex)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
`
|
||||
const FlexCom: React.FC<FlexProps> = ({ name, value, paddings, leftColor, RightColor }) => {
|
||||
return (
|
||||
<FlexDiv style={{ padding: paddings }}>
|
||||
<Text color={leftColor}>{name}</Text>
|
||||
<Text color={RightColor}>{value}</Text>
|
||||
</FlexDiv>
|
||||
)
|
||||
}
|
||||
export default FlexCom
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
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 TipDiv = styled(Image)`
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 24px;
|
||||
left: 0;
|
||||
`
|
||||
const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
|
||||
return (
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
{title}
|
||||
</HeadingDiv>
|
||||
)
|
||||
}
|
||||
export default HeaderMian
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
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 HeaderMian 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 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%;
|
||||
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 (
|
||||
<ContengDiv>
|
||||
<MainDiv>
|
||||
<HeaderMian 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>
|
||||
</ContengDiv>
|
||||
)
|
||||
}
|
||||
export default RegimentalCom
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
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
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
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 Nft: 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 Nft
|
||||
Loading…
Reference in New Issue