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

!7 stepper 

Merge pull request !7 from 骚/myf
This commit is contained in:
gary 2022-04-20 11:10:14 +00:00 committed by Gitee
parent affa78aded 554436067b
commit f7ee36af2f
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
17 changed files with 423 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/locales/zh-CN.json
View File

@ -1098,5 +1098,13 @@
"Number of first-level subordinates":"一级下级人数",
"Immediately to receive":"立即领取",
"buy again":"再次购买",
"Connect the purse":"连接钱包"
"Connect the purse":"连接钱包",
"HCC total revenue percentage :10%":"HCC总收益(分成比例:10%)",
"Contract address":"合约地址",
"Assets agreement":"资产协议",
"Assets and chain":"资产公链",
"each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
"last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
"commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
}

2
src/App.tsx
View File

@ -49,7 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
const Referral = lazy(() => import('./views/Referral'))
const Nft = lazy(() => import('./views/Nft'))
const Recommend = lazy(() => import('./views/recommend'))
const Recommend = lazy(() => import('./views/Recommend'))
// This config is required for number formatting
BigNumber.config({

9
src/config/localization/translations.json
View File

@ -1225,5 +1225,12 @@
"Number of first-level subordinates":"Number of first-level subordinates",
"Immediately to receive":"Immediately to receive",
"buy again":"buy again",
"Connect the purse":"Connect the purse"
"Connect the purse":"Connect the purse",
"HCC total revenue percentage :10%":"HCC total revenue percentage :10%",
"Contract address":"ontract address",
"Assets agreement":"Assets agreement",
"Assets and chain":"Assets and chain",
"each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
"last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
"commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee"
}

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

@ -1,13 +1,13 @@
import React, { useState, useEffect } from 'react'
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 } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization'
const FristPage = styled.div`
const FirstPage = styled.div`
background-image: url('/images/home/three.svg');
background-size: 100%;
background-repeat: no-repeat;
padding: 8rem 0 0.8rem 0;
padding: 100px 0 50px 0;
`
const StyledPage = styled(Box)`
@ -26,46 +26,22 @@ const StyledPage = styled(Box)`
width: 80%;
}
`
const SortDiv = styled.div`
height: 190px;
position: relative;
`
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;
const FlexMain = styled(Flex)`
justify-content: center;
z-index: 2;
`
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;
${({ theme }) => theme.mediaQueries.sm} {
// left: 60px !important;
${({ theme }) => theme.mediaQueries.xs} {
justify-content: start;
}
${({ theme }) => theme.mediaQueries.lg} {
justify-content: center;
}
`
const CardDiv = styled(Card)`
padding: 20px;
`
const CourseCom: React.FC = () => {
const { t } = useTranslation()
@ -75,7 +51,7 @@ const CourseCom: React.FC = () => {
id: 1,
list: [
{ 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') },
],
},
@ -117,18 +93,14 @@ const CourseCom: React.FC = () => {
return (
<>
<FristPage>
<FirstPage>
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
<Flex justifyContent="center">
<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 style={{ left: index % 2 ? '-420px' : '60px' }}>
<Stepper>
{list.map((item, index) => (
<Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
<CardDiv>
<Heading>{item.title}</Heading>
{item.list.map((childItem) => {
return (
@ -138,13 +110,13 @@ const CourseCom: React.FC = () => {
)
})}
</CardDiv>
</SortDiv>
)
})}
</Step>
))}
</Stepper>
</div>
</Flex>
</FlexMain>
</StyledPage>
</FristPage>
</FirstPage>
</>
)
}

9
src/views/Home/components/FlexItemCom.tsx
View File

@ -2,9 +2,13 @@ import React from 'react'
import styled from 'styled-components'
import { Text } from '@pancakeswap/uikit'
interface FlexProp {
name: string
value: string
}
const ScoreItem = styled.div`
width: 100%;
text-algin: center;
`
const ItemText = styled(Text)`
@ -17,7 +21,7 @@ const ItemSubText = styled(Text)`
font-size: 20px;
`
export default function FlexItemCom({ name, value }) {
const FlexItemCom: React.FC<FlexProp> = ({ name, value }) => {
return (
<ScoreItem>
<ItemText color="text">{value}</ItemText>
@ -25,3 +29,4 @@ export default function FlexItemCom({ name, value }) {
</ScoreItem>
)
}
export default FlexItemCom

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

@ -5,9 +5,9 @@ import { useTranslation } from 'contexts/Localization'
import FlexItemCom from './FlexItemCom'
const FristPage = styled.div`
const FirstPage = 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: 140px;
height: 30px;
border: 1px solid #1fc7d4;
margin: 0px 35px 10px 0;
${({ theme }) => theme.mediaQueries.xs} {
width: 140px;
height: 50px;
}
${({ theme }) => theme.mediaQueries.lg} {
width: 170px;
height: 60px;
border: 1px solid #1fc7d4;
margin: 0px 35px 0 0;
}
`
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``
@ -65,40 +133,34 @@ 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} />
<FirstPage>
<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" />
<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} />
})}
</ScoreDiv>
</StyledPage>
</FristPage>
</FirstPage>
</>
)
}

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

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

52
src/views/recommend/components/BuyNftModal.tsx → src/views/Recommend/components/BuyNftModal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
@ -6,41 +6,55 @@ import TextFlex from './TextFlex'
import FlexCom from './FlexCom'
const ModalDiv = styled(Modal)`
& > .jCXCIB {
border-bottom: none;
text-align: center;
& > .hMvvbb {
justify-content: center;
}
width: 80%;
${({ theme }) => theme.mediaQueries.xs} {
}
`
const InfoDiv = styled.div`
box-sizing: border-box;
padding: 30px 26px;
/* width: calc(100% - 280px); */
margin-left: 2rem;
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: 40%;
width: 50%;
margin: 20px auto 0px auto;
border-radius: 50px;
/* background: ${({ theme }) => theme.colors.gradients.violet}; */
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;
}
`
export default function BuyNftModal() {
const BuyNftModal: React.FC = () => {
const { t } = useTranslation()
const onDismiss = () => {
console.log('aaa')
}
// const onDismiss = () => {}
return (
<ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
<ModalDiv title={t('Buy commander NFT')}>
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
<Image src="/images/recommend/logo.svg" width={300} height={300} marginBottom="20px" />
<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')}
@ -50,6 +64,9 @@ export default function BuyNftModal() {
<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>
@ -59,3 +76,4 @@ export default function BuyNftModal() {
</ModalDiv>
)
}
export default BuyNftModal

40
src/views/recommend/components/ConnectedComponent.tsx → src/views/Recommend/components/Connected.tsx
View File

@ -1,22 +1,10 @@
import React, { useState } from 'react'
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Button, Heading, Image, useModal } from '@pancakeswap/uikit'
import { Button, useModal, Text } from '@pancakeswap/uikit'
import FlexCom from './FlexCom'
import BuyNftModal from './BuyNftModal'
import HeaderMian from './HeaderMain'
const HeadingDiv = styled(Heading)`
padding-top: 30px;
position: relative;
`
const TipDiv = styled(Image)`
position: absolute;
cursor: pointer;
top: 24px;
left: 30px;
`
import HeaderMain from './HeaderMain'
const ButtonDiv = styled(Button)`
width: 100%;
@ -30,7 +18,6 @@ const UpBtn = styled(Button)`
width: 100%;
margin: 20px auto 0px auto;
border-radius: 50px;
/* background: ${({ theme }) => theme.colors.gradients.violet}; */
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
border: none;
`
@ -38,30 +25,41 @@ const UpBtn = styled(Button)`
const FooterBtn = styled.div`
width: 100%;
box-sizing: border-box;
padding: 0 30px 20px 30px;
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;
`
export default function ConnectedCom() {
const ConnectedCom: React.FC = () => {
const { t } = useTranslation()
const [onBuyModal] = useModal(<BuyNftModal />)
return (
<MainDiv>
<HeaderMian title={t('recommend')} />
<HeaderMain title={t('recommend')} />
<>
<FlexCom name={t('The lower the number of')} value="100000(人)" />
<FlexCom name={t('NFT total revenue')} 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>
)
}
export default ConnectedCom

23
src/views/recommend/components/FlexCom.tsx → src/views/Recommend/components/FlexCom.tsx
View File

@ -1,25 +1,32 @@
import React, { useState } from 'react'
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;
`
export default function FlexCom({
const FlexCom: React.FC<FlexProps> = ({
name,
value,
paddings = '0',
paddings = '0px',
leftColor = 'text',
RightColor = 'textSubtle',
color = '#1FC7D4',
}) {
rightColor = 'textSubtle',
}) => {
return (
<FlexDiv style={{ padding: paddings }}>
<Text color={leftColor}>{name}</Text>
<Text color={RightColor}>{value}</Text>
<Text color={rightColor}>{value}</Text>
</FlexDiv>
)
}
export default FlexCom

12
src/views/recommend/components/HeaderMain.tsx → src/views/Recommend/components/HeaderMain.tsx
View File

@ -1,6 +1,10 @@
import React, { useState } from 'react'
import React from 'react'
import styled from 'styled-components'
import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
import { Image, Heading } from '@pancakeswap/uikit'
interface HeaderProp {
title: string
}
const HeadingDiv = styled(Heading)`
padding-top: 30px;
@ -13,11 +17,11 @@ const TipDiv = styled(Image)`
top: 24px;
left: 0;
`
export default function HeaderMian({ title }) {
const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
return (
<HeadingDiv scale="xl" mb="24px" textAlign="center">
<TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
{title}
</HeadingDiv>
)
}
export default HeaderMain

108
src/views/Recommend/components/Regimental.tsx Normal file
View File

@ -0,0 +1,108 @@
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 HeaderMain 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 ContentDiv = 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 (
<ContentDiv>
<MainDiv>
<HeaderMain 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>
</ContentDiv>
)
}
export default RegimentalCom

10
src/views/recommend/components/TextFlex.tsx → src/views/Recommend/components/TextFlex.tsx
View File

@ -1,7 +1,12 @@
import React, { useState } from 'react'
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;
@ -12,6 +17,7 @@ const MainDiv = styled(Flex)`
justify-content: center;
`
export default function TextFlex({ color, text = '' }) {
const TextFlex: React.FC<TextProps> = ({ color, text = '' }) => {
return <MainDiv style={{ background: color }}>{text}</MainDiv>
}
export default TextFlex

42
src/views/Recommend/components/UnunitedCom.tsx Normal file
View File

@ -0,0 +1,42 @@
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

25
src/views/recommend/index.tsx → src/views/Recommend/index.tsx
View File

@ -1,10 +1,8 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { Card, Button, Text, Flex, Image, Heading } from '@pancakeswap/uikit'
import UnunitedCom from './components/UnunitedCom'
import ConnectedCom from './components/ConnectedComponent'
import RegimentalCom from './components/RegimentalComponent'
import ConnectedCom from './components/Connected'
import RegimentalCom from './components/Regimental'
const MainDiv = styled.div`
min-height: calc(100vh - 64px);
@ -16,22 +14,33 @@ const MainDiv = styled.div`
justify-content: center;
`
const ContengDiv = styled.div`
const ContentDiv = 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 [type, setType] = useState(false)
// 是否连接钱包
const [status, statusState] = useState(true)
const [status, setStatus] = useState(true)
return (
<MainDiv>
{type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
{type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
</MainDiv>
)
}

79
src/views/recommend/components/RegimentalComponent.tsx
View File

@ -1,79 +0,0 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
import FlexCom from './FlexCom'
import HeaderMian from './HeaderMain'
const MainDiv = styled.div`
width: 60%;
`
const HeaderFlex = styled(Flex)`
padding-left: 20px;
`
const BuyButton = styled(Button)`
width: 150px;
border-radius: 50px;
margin-left: 20px;
/* background: ${({ theme }) => theme.colors.gradients.violet}; */
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
`
const ContentFlex = styled(Flex)`
flex-wrap: wrap;
justify-content: center;
width: 100%;
`
const InfoDiv = styled.div`
width: calc(50% - 40px);
margin: 0 20px;
/* width: 400px; */
min-width: 315px;
background: #ffffff;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 40px;
box-sizing: border-box;
margin-top: 50px;
padding: 0 30px 35px 30px;
`
const ButtonDiv = styled(Button)`
width: 100%;
margin: 20px auto 0px auto;
border-radius: 50px;
border: 1px solid ${({ theme }) => theme.colors.primaryDark};
color: ${({ theme }) => theme.colors.primaryDark};
`
export default function RegimentalCom() {
const { t } = useTranslation()
return (
<MainDiv>
<HeaderFlex>
<Image src="/images/recommend/logo.svg" width={60} height={60} />
<BuyButton>{t('buy again')}</BuyButton>
</HeaderFlex>
<ContentFlex>
<InfoDiv>
<HeaderMian title={t('recommend')} />
<FlexCom name={t('The lower the number of')} value="100000(人)" />
<FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
<FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
<ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
{/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
</InfoDiv>
<InfoDiv>
<HeaderMian title={t('Regimental recommendation')} />
<FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
<FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
<FlexCom name={t('Number of secondary subordinates')} value="" />
<FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
<FlexCom name={t('To get profit')} value="100000.00(HCC)" />
<ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
{/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
</InfoDiv>
</ContentFlex>
</MainDiv>
)
}

25
src/views/recommend/components/UnunitedCom.tsx
View File

@ -1,25 +0,0 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Button, Heading } from '@pancakeswap/uikit'
const HeadingDiv = styled(Heading)`
padding-top: 5rem;
`
const ButtonDiv = styled(Button)`
width: 80%;
margin: 5rem auto 3rem auto;
margin-left: 10%;
`
export default function UnunitedCom() {
const { t } = useTranslation()
return (
<>
<HeadingDiv scale="xl" mb="24px" textAlign="center">
{t('recommend')}
</HeadingDiv>
<ButtonDiv>{t('Connect the purse')}</ButtonDiv>
</>
)
}