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

代码规范

This commit is contained in:
myf 2022-04-20 13:39:48 +08:00
parent 9dff7975c3
commit a20fe8fe43
12 changed files with 70 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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({

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

@ -1,4 +1,4 @@
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 { useTranslation } from 'contexts/Localization'
@ -7,7 +7,6 @@ const FristPage = styled.div`
background-image: url('/images/home/three.svg');
background-size: 100%;
background-repeat: no-repeat;
padding: 8rem 0 0.8rem 0;
`
const StyledPage = styled(Box)`
@ -43,7 +42,7 @@ const SortDiv = styled.div`
${({ theme }) => theme.mediaQueries.xs} {
height: 330px;
& > .bXcYNu {
& > .card-content {
left: 20px;
width: 300px;
}
@ -52,14 +51,14 @@ const SortDiv = styled.div`
${({ theme }) => theme.mediaQueries.lg} {
height: 190px;
:nth-of-type(odd) {
& > .bXcYNu {
& > .card-content {
width: 372px;
left: 60px;
}
}
:nth-of-type(even) {
& > .bXcYNu {
& > .card-content {
width: 372px;
left: -420px;
}
@ -175,8 +174,7 @@ const CourseCom: React.FC = () => {
style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
>
<SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
{/* style={{ left: index % 2 ? '-420px' : '60px' }} */}
<CardDiv>
<CardDiv className="card-content">
<Heading>{item.title}</Heading>
{item.list.map((childItem) => {
return (

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

@ -2,6 +2,11 @@ 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%;
`
@ -16,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>
@ -24,3 +29,4 @@ export default function FlexItemCom({ name, value }) {
</ScoreItem>
)
}
export default FlexItemCom

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

@ -1,11 +1,10 @@
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`
background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
padding: 8rem 0 0.8rem 0;
`
const StyledPage = styled(Box)`
@ -30,7 +29,6 @@ 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;

27
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'
@ -7,13 +7,6 @@ import FlexCom from './FlexCom'
const ModalDiv = styled(Modal)`
width: 80%;
& > .jCXCIB {
border-bottom: none;
text-align: center;
& > .hMvvbb {
justify-content: center;
}
}
${({ theme }) => theme.mediaQueries.xs} {
}
@ -22,23 +15,21 @@ const ModalDiv = styled(Modal)`
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: 0rem;
margin-left: 0;
}
${({ theme }) => theme.mediaQueries.lg} {
padding: 30px 26px;
margin-left: 2rem;
margin-left: 60px;
}
`
const UpBtn = styled(Button)`
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;
`
@ -56,16 +47,13 @@ const ImageDiv = styled(Image)`
}
`
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}>
<ModalDiv title={t('Buy commander NFT')}>
<Flex alignItems="center" flexWrap="wrap" justifyContent="center">
{/* <ImageDiv src="/images/recommend/logo.svg" alt="" width={300} height={300}></ImageDiv> */}
<ImageDiv src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
<InfoDiv>
<TextFlex
@ -88,3 +76,4 @@ export default function BuyNftModal() {
</ModalDiv>
)
}
export default BuyNftModal

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

@ -1,23 +1,11 @@
import React, { useState } from 'react'
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Button, Heading, Image, useModal, Text } 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;
`
const ButtonDiv = styled(Button)`
width: 100%;
margin: 20px auto 0px auto;
@ -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;
`
@ -39,32 +26,30 @@ const FooterBtn = styled.div`
width: 100%;
box-sizing: border-box;
padding-bottom: 20px;
/* padding: 0 0px 20px 0px; */
`
const MainDiv = styled.div`
padding: 0 30px;
`
const FooterDiv = styled.div`
margin: 0 auto 3rem auto;
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')} tip={false} />
<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>
@ -77,3 +62,4 @@ export default function ConnectedCom() {
</MainDiv>
)
}
export default ConnectedCom

21
src/views/recommend/components/FlexCom.tsx
View File

@ -1,21 +1,21 @@
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 | '0px'
leftColor?: string | 'text'
RightColor?: string | 'textSubtle'
}
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',
}) {
const FlexCom: React.FC<FlexProps> = ({ name, value, paddings, leftColor, RightColor }) => {
return (
<FlexDiv style={{ padding: paddings }}>
<Text color={leftColor}>{name}</Text>
@ -23,3 +23,4 @@ export default function FlexCom({
</FlexDiv>
)
}
export default FlexCom

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

54
src/views/recommend/components/RegimentalComponent.tsx → src/views/recommend/components/Regimental.tsx
View File

@ -1,51 +1,10 @@
import React, { useState } from 'react'
import React from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
import { Text, Image, Button } 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};
// `
const ButtonDiv = styled(Button)`
width: 100%;
margin: 20px auto 0px auto;
@ -58,7 +17,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;
`
@ -67,7 +25,6 @@ const FooterBtn = styled.div`
width: 100%;
box-sizing: border-box;
padding-bottom: 20px;
/* padding: 0 0px 20px 0px; */
`
const ContengDiv = styled.div`
@ -94,7 +51,7 @@ const MainDiv = styled.div`
padding: 0 30px;
`
const FooterDiv = styled.div`
margin: 0 auto 3rem auto;
margin: 0 auto 30px auto;
`
const TextDiv = styled(Text)`
margin-top: 10px;
@ -106,12 +63,12 @@ const LogoImage = styled.div`
justify-content: center;
`
export default function RegimentalCom() {
const RegimentalCom: React.FC = () => {
const { t } = useTranslation()
return (
<ContengDiv>
<MainDiv>
<HeaderMian title="军团长推荐" tip={false} />
<HeaderMian title={t('Regimental recommendation')} />
<LogoImage>
<Image src="/images/recommend/logo.svg" width={249} height={249} />
</LogoImage>
@ -148,3 +105,4 @@ export default function RegimentalCom() {
</ContengDiv>
)
}
export default RegimentalCom

10
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

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

@ -1,21 +1,21 @@
import React, { useState } from 'react'
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: 5rem;
padding-top: 90px;
`
const ButtonDiv = styled(Button)`
width: 80%;
margin: 5rem auto 10px auto;
margin: 80px auto 10px auto;
margin-left: 10%;
border-radius: 50px;
`
const FooterDiv = styled.div`
width: 80%;
margin: 0 auto 3rem auto;
margin: 0 auto 30px auto;
margin-left: 10%;
`
const TextDiv = styled(Text)`
@ -23,7 +23,7 @@ const TextDiv = styled(Text)`
font-size: 14px;
`
export default function UnunitedCom() {
const UnunitedCom: React.FC = () => {
const { t } = useTranslation()
return (
<>
@ -39,3 +39,4 @@ export default function UnunitedCom() {
</>
)
}
export default UnunitedCom

6
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);