军团长
This commit is contained in:
myf
parent
4601419e7d
commit
fa840697b2
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 532 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 689 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #1fc7d4;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="疑问_1_" data-name="疑问 (1)" class="cls-1" d="M12.5,1.471A11.029,11.029,0,1,1,1.471,12.5,11.041,11.041,0,0,1,12.5,1.471ZM12.5,0A12.5,12.5,0,1,0,25,12.5,12.5,12.5,0,0,0,12.5,0ZM11.452,18.4A1.048,1.048,0,1,0,12.5,17.348,1.048,1.048,0,0,0,11.452,18.4Zm.895-2.359a.736.736,0,0,1-.734-.736,4.75,4.75,0,0,1,2.579-4.116A1.964,1.964,0,0,0,15.1,9.346a1.966,1.966,0,0,0-1.561-1.464,3.254,3.254,0,0,0-2.611.6,2.5,2.5,0,0,0-.773,1.655.737.737,0,0,1-.734.721H9.411a.734.734,0,0,1-.725-.738A3.969,3.969,0,0,1,9.938,7.393a4.511,4.511,0,0,1,4.05-.918c2.9.97,2.693,3.061,2.466,3.832a3.442,3.442,0,0,1-1.687,2.221l0,.009A3.126,3.126,0,0,0,13.084,15.3a.738.738,0,0,1-.738.737Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 869 B |
|
|
@ -1078,5 +1078,25 @@
|
|||
"December 2022 NFT bonus binding social software":"2022年12月NFT分红绑定社交软件；",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed":"2022年12月HighCity生态初步建成；",
|
||||
"HighCity Ecology completed in December 2022":"2022年12月HighCity生态建成;",
|
||||
"Maintain dividend income growth in December 2022":"2022年12月保持分红收益增长；"
|
||||
"Maintain dividend income growth in December 2022":"2022年12月保持分红收益增长；",
|
||||
"Buy commander NFT":"购买军团长NFT",
|
||||
"Upgrade recommendation rights, can enjoy the share of secondary recommendation":"升级推荐权益，可享有二级推荐的分成",
|
||||
"Enjoy a higher percentage than ordinary users":"享有比普通用户更高的分成比例",
|
||||
"Commander NFT can be traded in the NFT market":"军团长NFT可在NFT市场内进行交易",
|
||||
"First stage sharing ratio":"一级分成比例",
|
||||
"Secondary split ratio":"二级分成比例",
|
||||
"Buy It Now":"立即购买",
|
||||
"recommend":"推荐",
|
||||
"The lower the number of":"下级数量",
|
||||
"NFT total revenue":"NFT总收益",
|
||||
"HCC total revenue":"HCC总收益",
|
||||
"To get profit":"待领收益",
|
||||
"No income is received temporarily":"暂无收益领取",
|
||||
"Upgrade commander":"升级军团长",
|
||||
"Regimental recommendation":"军团长推荐",
|
||||
"Number of secondary subordinates":"二级下级人数",
|
||||
"Number of first-level subordinates":"一级下级人数",
|
||||
"Immediately to receive":"立即领取",
|
||||
"buy again":"再次购买",
|
||||
"Connect the purse":"连接钱包"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +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'))
|
||||
|
||||
// This config is required for number formatting
|
||||
BigNumber.config({
|
||||
|
|
@ -93,6 +94,9 @@ const App: React.FC = () => {
|
|||
<Route path="/nft">
|
||||
<Nft />
|
||||
</Route>
|
||||
<Route path="/recommend">
|
||||
<Recommend />
|
||||
</Route>
|
||||
{/* <Route path="/lottery">
|
||||
<Lottery />
|
||||
</Route>
|
||||
|
|
@ -143,6 +147,7 @@ const App: React.FC = () => {
|
|||
<Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
|
||||
<Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
|
||||
<Route exact strict path="/nft" component={Nft} />
|
||||
<Route exact strict path="/recommend" component={Recommend} />
|
||||
|
||||
{/* Redirect */}
|
||||
{/* <Route path="/staking">
|
||||
|
|
|
|||
|
|
@ -45,6 +45,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
icon: 'TicketIcon',
|
||||
href: '/nft'
|
||||
},
|
||||
{
|
||||
label: t('recommend'),
|
||||
icon: 'TicketIcon',
|
||||
href: '/recommend'
|
||||
},
|
||||
// {
|
||||
// label: t('Prediction (BETA)'),
|
||||
// icon: 'PredictionsIcon',
|
||||
|
|
|
|||
|
|
@ -1205,5 +1205,25 @@
|
|||
"December 2022 NFT bonus binding social software":"December 2022 NFT bonus binding social software;",
|
||||
"In December 2022, HighCity Ecology was preliminarily completed":"In December 2022, HighCity Ecology was preliminarily completed;",
|
||||
"HighCity Ecology completed in December 2022":"HighCity Ecology completed in December 2022",
|
||||
"Maintain dividend income growth in December 2022":"Maintain dividend income growth in December 2022;"
|
||||
"Maintain dividend income growth in December 2022":"Maintain dividend income growth in December 2022;",
|
||||
"Buy commander NFT":"Buy commander NFT",
|
||||
"Upgrade recommendation rights, can enjoy the share of secondary recommendation":"Upgrade recommendation rights, can enjoy the share of secondary recommendation",
|
||||
"Enjoy a higher percentage than ordinary users":"Enjoy a higher percentage than ordinary users",
|
||||
"Commander NFT can be traded in the NFT market":"Commander NFT can be traded in the NFT market",
|
||||
"First stage sharing ratio":"First stage sharing ratio",
|
||||
"Secondary split ratio":"Secondary split ratio",
|
||||
"Buy It Now":"Buy It Now",
|
||||
"recommend":"recommend",
|
||||
"The lower the number of":"The lower the number of",
|
||||
"NFT total revenue":"NFT total revenue",
|
||||
"HCC total revenue":"HCC total revenue",
|
||||
"To get profit":"To get profit",
|
||||
"No income is received temporarily":"No income is received temporarily",
|
||||
"Upgrade commander":"Upgrade commander",
|
||||
"Regimental recommendation":"Regimental recommendation",
|
||||
"Number of secondary subordinates":"Number of secondary subordinates",
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import FristCom from './components/FristCom'
|
|||
import IntroduceCom from './components/IntroduceCom'
|
||||
import CourseCom from './components/CourseCom'
|
||||
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
|
|
@ -14,7 +13,6 @@ const Home: React.FC = () => {
|
|||
<IntroduceCom />
|
||||
<CourseCom />
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState,useEffect } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
|
|
@ -7,7 +7,7 @@ const FristPage = styled.div`
|
|||
background-image: url('/images/home/three.svg');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding:8rem 0 .8rem 0;
|
||||
padding: 8rem 0 0.8rem 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
|
|
@ -17,47 +17,47 @@ const StyledPage = styled(Box)`
|
|||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
width:80%
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width:80%
|
||||
}`
|
||||
|
||||
width: 80%;
|
||||
}
|
||||
`
|
||||
|
||||
const SortDiv = styled.div`
|
||||
height:190px;
|
||||
position:relative;
|
||||
height: 190px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const SortNum = styled.div`
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:-43px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -43px;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
background: #1FC7D4;
|
||||
background: #1fc7d4;
|
||||
border-radius: 50%;
|
||||
font-size:46px;
|
||||
color:#FAF9FA;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
z-index:2
|
||||
font-size: 46px;
|
||||
color: #faf9fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
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;
|
||||
position: absolute;
|
||||
top: -25%;
|
||||
background: #fff;
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
// left: 60px !important;
|
||||
}
|
||||
|
|
@ -66,17 +66,54 @@ const CardDiv = styled.div`
|
|||
}
|
||||
`
|
||||
|
||||
|
||||
const CourseCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [list, setListState] = useState([
|
||||
{ title: t('Stage one: Origin'),id:1, list: [{ text: t('The project concept was born in May 2021') },{text:t('Set up HighClty team in June 2021')},{text:t('May 2021 -- January 2022 Team run-in')}]},
|
||||
{ title: t('Stage two: Action'),id:2, list: [{ text: t('In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online') },{text:t('In March 2022, project approval, web design, roadmap announcement, smart contract development')}]},
|
||||
{ title: t('Stage three: Creation'),id:3, list: [{ text: t('Created by NFT in May 2022') },{text:t('June 2022 social software development')}] },
|
||||
{ title: t('Stage four: Integration'),id:4, list: [{ text: t('Launch of social software in December 2022') },{text:t('December 2022 NFT bonus binding social software')},{text:t('In December 2022, HighCity Ecology was preliminarily completed')}]},
|
||||
{ title: t('Stage five: Closing the curtain'),id:5, list: [{ text: t('HighCity Ecology completed in December 2022') },{text:t('Maintain dividend income growth in December 2022')}]}])
|
||||
|
||||
{
|
||||
title: t('Stage one: Origin'),
|
||||
id: 1,
|
||||
list: [
|
||||
{ text: t('The project concept was born in May 2021') },
|
||||
{ text: t('Set up HighClty team in June 2021') },
|
||||
{ text: t('May 2021 -- January 2022 Team run-in') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('Stage two: Action'),
|
||||
id: 2,
|
||||
list: [
|
||||
{
|
||||
text: t(
|
||||
'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
|
||||
),
|
||||
},
|
||||
{ text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('Stage three: Creation'),
|
||||
id: 3,
|
||||
list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }],
|
||||
},
|
||||
{
|
||||
title: t('Stage four: Integration'),
|
||||
id: 4,
|
||||
list: [
|
||||
{ text: t('Launch of social software in December 2022') },
|
||||
{ text: t('December 2022 NFT bonus binding social software') },
|
||||
{ text: t('In December 2022, HighCity Ecology was preliminarily completed') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: t('Stage five: Closing the curtain'),
|
||||
id: 5,
|
||||
list: [
|
||||
{ text: t('HighCity Ecology completed in December 2022') },
|
||||
{ text: t('Maintain dividend income growth in December 2022') },
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -84,21 +121,26 @@ const CourseCom: React.FC = () => {
|
|||
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
||||
<Flex justifyContent="center">
|
||||
<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'}}>
|
||||
<Heading>{ item.title }</Heading>
|
||||
{
|
||||
item.list.map((childItem) => {
|
||||
return <Text color='textSubtle' marginTop="15px" key={ childItem.text }>{ childItem.text }</Text>
|
||||
})
|
||||
}
|
||||
{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' }}>
|
||||
<Heading>{item.title}</Heading>
|
||||
{item.list.map((childItem) => {
|
||||
return (
|
||||
<Text color="textSubtle" marginTop="15px" key={childItem.text}>
|
||||
{childItem.text}
|
||||
</Text>
|
||||
)
|
||||
})}
|
||||
</CardDiv>
|
||||
</SortDiv>
|
||||
})
|
||||
}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Flex>
|
||||
</StyledPage>
|
||||
|
|
|
|||
|
|
@ -2,29 +2,26 @@ import React from 'react'
|
|||
import styled from 'styled-components'
|
||||
import { Text } from '@pancakeswap/uikit'
|
||||
|
||||
const ScoreItem = styled.div`
|
||||
width: 100%;
|
||||
text-algin: center;
|
||||
`
|
||||
|
||||
const ScoreItem = styled.div`
|
||||
width:100%;
|
||||
text-algin:center;
|
||||
`
|
||||
const ItemText = styled(Text)`
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
`
|
||||
|
||||
const ItemText = styled(Text)`
|
||||
text-align:center;
|
||||
font-size:36px;
|
||||
`
|
||||
|
||||
const ItemSubText = styled(Text)`
|
||||
text-align:center;
|
||||
font-size:20px;
|
||||
`
|
||||
|
||||
export default function FlexItemCom({name,value}){
|
||||
const ItemSubText = styled(Text)`
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
`
|
||||
|
||||
export default function FlexItemCom({ name, value }) {
|
||||
return (
|
||||
<ScoreItem>
|
||||
<ItemText color='text'>{ value }</ItemText>
|
||||
<ItemSubText color='textSubtle'>{ name }</ItemSubText>
|
||||
<ItemText color="text">{value}</ItemText>
|
||||
<ItemSubText color="textSubtle">{name}</ItemSubText>
|
||||
</ScoreItem>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const FristPage = styled.div`
|
|||
background-image: url('/images/home/bg.svg');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding:.9rem 0 .8rem 0;
|
||||
padding: 0.9rem 0 0.8rem 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
|
|
@ -19,78 +19,87 @@ const StyledPage = styled(Box)`
|
|||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
width:80%
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width:80%
|
||||
}`
|
||||
width: 80%;
|
||||
}
|
||||
`
|
||||
|
||||
const RadiusBtn = styled(Button)`
|
||||
border-radius:50px;
|
||||
width:170px;
|
||||
height:60px;
|
||||
font-size:18px;
|
||||
margin:0px 20px 0 0;
|
||||
background: linear-gradient(269deg, #1FC8D3 0%, #1FD4B0 100%);
|
||||
`
|
||||
border-radius: 50px;
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
margin: 0px 20px 0 0;
|
||||
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||
`
|
||||
const WhiteBtn = styled(Button)`
|
||||
border-radius:50px;
|
||||
width:170px;
|
||||
height:60px;
|
||||
border:1px solid #1FC7D4;
|
||||
margin:0px 35px 0 0;
|
||||
`
|
||||
|
||||
border-radius: 50px;
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
border: 1px solid #1fc7d4;
|
||||
margin: 0px 35px 0 0;
|
||||
`
|
||||
|
||||
const ScoreDiv = styled(Flex)`
|
||||
margin-top:127px;
|
||||
margin-top: 127px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 15px;
|
||||
padding:59px 0;
|
||||
`
|
||||
padding: 59px 0;
|
||||
`
|
||||
const InfoDiv = styled.div``
|
||||
|
||||
const FristCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [burned, BurnedState] = useState([{ id: 1, name: 'Burned', value: "62.55%" }, { id: 2, name: 'Burned', value: "62.55%" }, { id: 3, name: 'Burned', value: "62.55%" }, { id: 4, name: 'Burned', value: "62.55%" }])
|
||||
const [burned, BurnedState] = useState([
|
||||
{ id: 1, name: 'Burned', value: '62.55%' },
|
||||
{ id: 2, name: 'Burned', value: '62.55%' },
|
||||
{ id: 3, name: 'Burned', value: '62.55%' },
|
||||
{ id: 4, name: 'Burned', value: '62.55%' },
|
||||
])
|
||||
return (
|
||||
<>
|
||||
<FristPage>
|
||||
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
||||
<Flex justifyContent="space-between" alignItems="center">
|
||||
<div>
|
||||
<Flex justifyContent="space-between" alignItems="center" flexDirection="row-reverse" flexWrap="wrap">
|
||||
<Image 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>
|
||||
{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>
|
||||
<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>
|
||||
</div>
|
||||
<Image src="/images/home/logo.svg" alt="" width={315} height={315} />
|
||||
</InfoDiv>
|
||||
</Flex>
|
||||
<ScoreDiv justifyContent="space-between">
|
||||
{
|
||||
burned.map(item => {
|
||||
{burned.map((item) => {
|
||||
return <FlexItemCom key={item.id} name={item.name} value={item.value} />
|
||||
})
|
||||
}
|
||||
})}
|
||||
</ScoreDiv>
|
||||
</StyledPage>
|
||||
</FristPage>
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 { Flex, Heading, Text, BaseLayout, Box, Button, Image } from '@pancakeswap/uikit'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
|
||||
const FristPage = styled.div`
|
||||
background: linear-gradient(270deg, #EFF6FF 0%, #E9FDFF 100%);
|
||||
padding:8rem 0 .8rem 0;
|
||||
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
|
||||
padding: 8rem 0 0.8rem 0;
|
||||
`
|
||||
|
||||
const StyledPage = styled(Box)`
|
||||
|
|
@ -15,59 +15,59 @@ const StyledPage = styled(Box)`
|
|||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
width:80%
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
width:80%
|
||||
}`
|
||||
width: 80%;
|
||||
}
|
||||
`
|
||||
|
||||
const BoxMain = styled(Box)`
|
||||
background: #FFFFFF;
|
||||
const BoxMain = styled(Box)`
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
padding:94px 92px 37px 92px;
|
||||
position:relative;
|
||||
padding: 94px 92px 37px 92px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const MainDiv = styled.div`
|
||||
position:absolute;
|
||||
top:-76px;
|
||||
left:50%;
|
||||
margin-left:-76px;
|
||||
position: absolute;
|
||||
top: -76px;
|
||||
left: 50%;
|
||||
margin-left: -76px;
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 13px;
|
||||
& > div{
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius:50%;
|
||||
background:#E0FFFF;
|
||||
padding:25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #e0ffff;
|
||||
padding: 25px;
|
||||
}
|
||||
`
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
margin-top:18px;
|
||||
font-size:36px;
|
||||
color:#333333;
|
||||
margin-top: 18px;
|
||||
font-size: 36px;
|
||||
color: #333333;
|
||||
`
|
||||
|
||||
const TextCom = styled(Text)`
|
||||
margin-top:35px;
|
||||
text-align:center;
|
||||
line-height:32px;
|
||||
margin-top: 35px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
`
|
||||
|
||||
|
||||
const IntroduceCom: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
|
|
@ -78,17 +78,15 @@ const IntroduceCom: React.FC = () => {
|
|||
<BoxMain>
|
||||
<MainDiv>
|
||||
<div>
|
||||
<Image src='/images/home/intor.svg' alt='' width={75} height={75} />
|
||||
<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">HlighCitySwap</HeadingDiv>
|
||||
<TextCom>{t('HlighCitySwapInfo')}</TextCom>
|
||||
</BoxMain>
|
||||
</StyledPage>
|
||||
</FristPage>
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,15 @@ import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
|||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
export default function FlexText({name,value}){
|
||||
|
||||
return(
|
||||
<Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
|
||||
<Text color='#6B6472' fontSize="14px">{ name }：</Text>
|
||||
<Text color='#1FC7D4' fontSize="14px">{ value }</Text>
|
||||
export default function FlexText({ name, value }) {
|
||||
return (
|
||||
<Flex justifyContent="flex-end" alignItems="center" marginTop="12px" padding="0 21px">
|
||||
<Text color="#6B6472" fontSize="14px">
|
||||
{name}：
|
||||
</Text>
|
||||
<Text color="#1FC7D4" fontSize="14px">
|
||||
{value}
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -2,8 +2,7 @@ import React, { useState } from 'react'
|
|||
import styled from 'styled-components'
|
||||
import { Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
export default function StepCom(){
|
||||
|
||||
export default function StepCom() {
|
||||
const [valNumber, setInputState] = useState(1)
|
||||
|
||||
const onAdd = (type) => {
|
||||
|
|
@ -13,15 +12,15 @@ export default function StepCom(){
|
|||
if (valNumber === 0) return
|
||||
setInputState(valNumber - 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return(
|
||||
<Flex justifyContent="space-between" alignItems='center' width={120}>
|
||||
<Image src='/images/nft/sub-icon.png' alt="" onClick={() => onAdd('sub')} width={25} height={25} />
|
||||
<Text width={60} textAlign='center' color='#2F3748' fontSize="16px">{valNumber}</Text>
|
||||
<Image src='/images/nft/add-icon.png' alt="1" onClick={() => onAdd('add')} width={25} height={25} />
|
||||
return (
|
||||
<Flex justifyContent="space-between" alignItems="center" width={120}>
|
||||
<Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} />
|
||||
<Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
|
||||
{valNumber}
|
||||
</Text>
|
||||
<Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} />
|
||||
</Flex>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@ import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
|||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
|
||||
import FlexText from './component/FlexText'
|
||||
// import Step from './component/Step'
|
||||
|
||||
|
|
@ -13,11 +12,10 @@ import StepCom from './component/StepCom'
|
|||
|
||||
import 'swiper/swiper.min.css'
|
||||
|
||||
import 'swiper/components/pagination/pagination.min.css';
|
||||
import 'swiper/components/pagination/pagination.min.css'
|
||||
|
||||
SwiperCore.use([Keyboard, Mousewheel, Pagination])
|
||||
|
||||
|
||||
const MainDiv = styled.div`
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 64px);
|
||||
|
|
@ -45,32 +43,31 @@ const StyledPage = styled.div`
|
|||
padding-top: 32px;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
const BodyWrapper = styled(Card)`
|
||||
border-radius: 24px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
overflow:visible;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const HindDiv = styled.div`
|
||||
width:32px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
top:-40px;
|
||||
left:0;
|
||||
z-index:10
|
||||
top: -40px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
`
|
||||
const BlindboxImage = styled(Image)`
|
||||
max-width:377px;
|
||||
max-height:367px;
|
||||
z-index:9
|
||||
max-width: 377px;
|
||||
max-height: 367px;
|
||||
z-index: 9;
|
||||
`
|
||||
|
||||
const Divs = styled.div`
|
||||
box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -82,62 +79,69 @@ const Divs = styled.div`
|
|||
`
|
||||
|
||||
const DetailInfo = styled(Flex)`
|
||||
padding:0 21px;
|
||||
margin-top:24px;
|
||||
padding: 0 21px;
|
||||
margin-top: 24px;
|
||||
`
|
||||
|
||||
const SwiperDiv = styled(Swiper)`
|
||||
height:730px;
|
||||
& > .swiper-wrapper > .swiper-slide > div > div{
|
||||
background:transparent;
|
||||
height: 730px;
|
||||
& > .swiper-wrapper > .swiper-slide > div > div {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& > .swiper-pagination{
|
||||
& > .swiper-pagination-bullet{
|
||||
background:#fff;
|
||||
width:14px;
|
||||
height:9px;
|
||||
opacity:1;
|
||||
border-radius:3px;
|
||||
& > .swiper-pagination {
|
||||
& > .swiper-pagination-bullet {
|
||||
background: #fff;
|
||||
width: 14px;
|
||||
height: 9px;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
& > .swiper-pagination-bullet-active{
|
||||
background:#000;
|
||||
& > .swiper-pagination-bullet-active {
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
const Nft: React.FC = () => {
|
||||
const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
<SwiperDiv loop pagination={{ clickable: true }} spaceBetween={16} freeModeMomentumRatio={0.25} freeModeMomentumVelocityRatio={0.5}>
|
||||
{
|
||||
blindboxList.map((item) => {
|
||||
return <SwiperSlide key={item.id}>
|
||||
<SwiperDiv
|
||||
loop
|
||||
pagination={{ clickable: true }}
|
||||
spaceBetween={16}
|
||||
freeModeMomentumRatio={0.25}
|
||||
freeModeMomentumVelocityRatio={0.5}
|
||||
>
|
||||
{blindboxList.map((item) => {
|
||||
return (
|
||||
<SwiperSlide key={item.id}>
|
||||
<StyledPage>
|
||||
<Divs>
|
||||
<BodyWrapper>
|
||||
<HindDiv>
|
||||
<Image src='/images/nft/hint.png' alt="" width={32} height={32} />
|
||||
<Image src="/images/nft/hint.png" alt="" width={32} height={32} />
|
||||
</HindDiv>
|
||||
<Flex justifyContent='center' marginTop="-40px">
|
||||
<BlindboxImage src='/images/nft/blindbox.png' alt="" width={377} height={367} />
|
||||
<Flex justifyContent="center" marginTop="-40px">
|
||||
<BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
|
||||
</Flex>
|
||||
<DetailInfo justifyContent='space-between' alignItems='center'>
|
||||
<Text color='textSubtle'>系列</Text>
|
||||
<Text color='text'>法式盛宴</Text>
|
||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
||||
<Text color="textSubtle">系列</Text>
|
||||
<Text color="text">法式盛宴</Text>
|
||||
</DetailInfo>
|
||||
<DetailInfo justifyContent='space-between' alignItems='center'>
|
||||
<Text color='textSubtle'>价格</Text>
|
||||
<Flex alignItems='center' justifyContent="flex-end">
|
||||
<Text color='#1FC7D4' fontSize="24px">500</Text>
|
||||
<Text color='text'>黄油</Text>
|
||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
||||
<Text color="textSubtle">价格</Text>
|
||||
<Flex alignItems="center" justifyContent="flex-end">
|
||||
<Text color="#1FC7D4" fontSize="24px">
|
||||
500
|
||||
</Text>
|
||||
<Text color="text">黄油</Text>
|
||||
</Flex>
|
||||
</DetailInfo>
|
||||
<DetailInfo justifyContent='space-between' alignItems='center'>
|
||||
<Text color='textSubtle'>数量</Text>
|
||||
<DetailInfo justifyContent="space-between" alignItems="center">
|
||||
<Text color="textSubtle">数量</Text>
|
||||
<StepCom />
|
||||
</DetailInfo>
|
||||
<FlexText name="钱包中的 BUTTER" value="0" />
|
||||
|
|
@ -147,8 +151,8 @@ const Nft: React.FC = () => {
|
|||
</Divs>
|
||||
</StyledPage>
|
||||
</SwiperSlide>
|
||||
})
|
||||
}
|
||||
)
|
||||
})}
|
||||
</SwiperDiv>
|
||||
</MainDiv>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import React, { useState } 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)`
|
||||
& > .jCXCIB {
|
||||
border-bottom: none;
|
||||
text-align: center;
|
||||
& > .hMvvbb {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const InfoDiv = styled.div`
|
||||
box-sizing: border-box;
|
||||
padding: 30px 26px;
|
||||
/* width: calc(100% - 280px); */
|
||||
margin-left: 2rem;
|
||||
box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
|
||||
`
|
||||
const UpBtn = styled(Button)`
|
||||
width: 40%;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 50px;
|
||||
/* background: ${({ theme }) => theme.colors.gradients.violet}; */
|
||||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||||
border: none;
|
||||
`
|
||||
|
||||
export default function BuyNftModal() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const onDismiss = () => {
|
||||
console.log('aaa')
|
||||
}
|
||||
return (
|
||||
<ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
|
||||
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
|
||||
<Image src="/images/recommend/logo.svg" width={300} height={300} 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％" />
|
||||
</InfoDiv>
|
||||
</Flex>
|
||||
|
||||
<Flex>
|
||||
<UpBtn>{t('Buy It Now')}</UpBtn>
|
||||
</Flex>
|
||||
</ModalDiv>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Button, Heading, Image, useModal } 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;
|
||||
`
|
||||
|
||||
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: ${({ theme }) => theme.colors.gradients.violet}; */
|
||||
background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
|
||||
border: none;
|
||||
`
|
||||
|
||||
const FooterBtn = styled.div`
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px 20px 30px;
|
||||
`
|
||||
const MainDiv = styled.div`
|
||||
padding: 0 30px;
|
||||
`
|
||||
|
||||
export default function ConnectedCom() {
|
||||
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('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>
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Text } from '@pancakeswap/uikit'
|
||||
|
||||
const FlexDiv = styled(Flex)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
`
|
||||
|
||||
export default function FlexCom({
|
||||
name,
|
||||
value,
|
||||
paddings = '0',
|
||||
leftColor = 'text',
|
||||
RightColor = 'textSubtle',
|
||||
color = '#1FC7D4',
|
||||
}) {
|
||||
return (
|
||||
<FlexDiv style={{ padding: paddings }}>
|
||||
<Text color={leftColor}>{name}</Text>
|
||||
<Text color={RightColor}>{value}</Text>
|
||||
</FlexDiv>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
|
||||
|
||||
const HeadingDiv = styled(Heading)`
|
||||
padding-top: 30px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const TipDiv = styled(Image)`
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 24px;
|
||||
left: 0;
|
||||
`
|
||||
export default function HeaderMian({ title }) {
|
||||
return (
|
||||
<HeadingDiv scale="xl" mb="24px" textAlign="center">
|
||||
<TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
|
||||
{title}
|
||||
</HeadingDiv>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Flex } from '@pancakeswap/uikit'
|
||||
|
||||
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;
|
||||
`
|
||||
|
||||
export default function TextFlex({ color, text = '' }) {
|
||||
return <MainDiv style={{ background: color }}>{text}</MainDiv>
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
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'
|
||||
|
||||
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;
|
||||
`
|
||||
|
||||
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