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

调整军团长ui

This commit is contained in:
myf 2022-04-18 18:08:12 +08:00
parent fa840697b2
commit d45b82cb9c
7 changed files with 176 additions and 41 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":"资产公链",
"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
}

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",
"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
}

3
src/views/recommend/components/BuyNftModal.tsx
View File

@ -50,6 +50,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>

32
src/views/recommend/components/ConnectedComponent.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Button, Heading, Image, useModal } from '@pancakeswap/uikit'
import { Button, Heading, Image, useModal, Text } from '@pancakeswap/uikit'
import FlexCom from './FlexCom'
import BuyNftModal from './BuyNftModal'
import HeaderMian from './HeaderMain'
@ -38,22 +38,29 @@ const UpBtn = styled(Button)`
const FooterBtn = styled.div`
width: 100%;
box-sizing: border-box;
padding: 0 30px 20px 30px;
padding-bottom: 20px;
/* padding: 0 0px 20px 0px; */
`
const MainDiv = styled.div`
padding: 0 30px;
`
const FooterDiv = styled.div`
margin: 0 auto 3rem auto;
`
const TextDiv = styled(Text)`
margin-top: 10px;
font-size: 14px;
`
export default function ConnectedCom() {
const { t } = useTranslation()
const [onBuyModal] = useModal(<BuyNftModal />)
return (
<MainDiv>
<HeaderMian title={t('recommend')} />
<HeaderMian title={t('recommend')} tip={false} />
<>
<FlexCom name={t('The lower the number of')} value="100000(人)" />
<FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
{/* <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)" />
</>
@ -62,6 +69,21 @@ export default function ConnectedCom() {
<ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
<UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
</FooterBtn>
<FooterDiv>
<TextDiv color="textSubtle">
{t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
</TextDiv>
<TextDiv color="textSubtle">
{t(
'2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
)}
</TextDiv>
<TextDiv color="textSubtle">
{t(
"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
)}
</TextDiv>
</FooterDiv>
</MainDiv>
)
}

5
src/views/recommend/components/HeaderMain.tsx
View File

@ -13,10 +13,11 @@ const TipDiv = styled(Image)`
top: 24px;
left: 0;
`
export default function HeaderMian({ title }) {
export default function HeaderMian({ title, tip = true }) {
return (
<HeadingDiv scale="xl" mb="24px" textAlign="center">
<TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
{tip ? <TipDiv src="/images/recommend/tip.svg" width={25} height={25} /> : ''}
{/* <TipDiv src="/images/recommend/tip.svg" width={25} height={25} /> */}
{title}
</HeadingDiv>
)

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

@ -5,9 +5,9 @@ import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
import FlexCom from './FlexCom'
import HeaderMian from './HeaderMain'
const MainDiv = styled.div`
width: 60%;
`
// const MainDiv = styled.div`
// width: 60%;
// `
const HeaderFlex = styled(Flex)`
padding-left: 20px;
`
@ -38,42 +38,110 @@ const InfoDiv = styled.div`
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};
// `
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};
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-bottom: 20px;
/* padding: 0 0px 20px 0px; */
`
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 MainDiv = styled.div`
padding: 0 30px;
`
const FooterDiv = styled.div`
margin: 0 auto 3rem auto;
`
const TextDiv = styled(Text)`
margin-top: 10px;
font-size: 14px;
`
const LogoImage = styled.div`
display: flex;
align-items: center;
justify-content: center;
`
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)" />
<ContengDiv>
<MainDiv>
<HeaderMian title="军团长推荐" tip={false} />
<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)" />
<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>
</>
<FooterBtn>
<ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
{/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
</FooterBtn>
<FooterDiv>
<TextDiv color="textSubtle">
{t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
</TextDiv>
<TextDiv color="textSubtle">
{t(
'2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
)}
</TextDiv>
<TextDiv color="textSubtle">
{t(
"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
)}
</TextDiv>
</FooterDiv>
</MainDiv>
</ContengDiv>
)
}

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

@ -1,7 +1,7 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Button, Heading } from '@pancakeswap/uikit'
import { Button, Heading, Text } from '@pancakeswap/uikit'
const HeadingDiv = styled(Heading)`
padding-top: 5rem;
@ -9,9 +9,20 @@ const HeadingDiv = styled(Heading)`
const ButtonDiv = styled(Button)`
width: 80%;
margin: 5rem auto 3rem auto;
margin: 5rem auto 10px auto;
margin-left: 10%;
border-radius: 50px;
`
const FooterDiv = styled.div`
width: 80%;
margin: 0 auto 3rem auto;
margin-left: 10%;
`
const TextDiv = styled(Text)`
margin-top: 10px;
font-size: 14px;
`
export default function UnunitedCom() {
const { t } = useTranslation()
return (
@ -20,6 +31,21 @@ export default function UnunitedCom() {
{t('recommend')}
</HeadingDiv>
<ButtonDiv>{t('Connect the purse')}</ButtonDiv>
<FooterDiv>
<TextDiv color="textSubtle">
{t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
</TextDiv>
<TextDiv color="textSubtle">
{t(
'2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
)}
</TextDiv>
<TextDiv color="textSubtle">
{t(
"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
)}
</TextDiv>
</FooterDiv>
</>
)
}