diff --git a/public/images/recommend/bg.svg b/public/images/recommend/bg.svg new file mode 100644 index 0000000..2ca83c2 --- /dev/null +++ b/public/images/recommend/bg.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/images/recommend/logo.svg b/public/images/recommend/logo.svg new file mode 100644 index 0000000..059bd5c --- /dev/null +++ b/public/images/recommend/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/recommend/tip.svg b/public/images/recommend/tip.svg new file mode 100644 index 0000000..b55e48b --- /dev/null +++ b/public/images/recommend/tip.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index a7a9fe2..48e33bf 100644 --- a/public/locales/zh-CN.json +++ b/public/locales/zh-CN.json @@ -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":"连接钱包" } diff --git a/src/App.tsx b/src/App.tsx index e27a0aa..f0114a3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 = () => { + + + {/* @@ -143,6 +147,7 @@ const App: React.FC = () => { + {/* Redirect */} {/* diff --git a/src/components/Menu/config.ts b/src/components/Menu/config.ts index 8b97a6d..b188cef 100644 --- a/src/components/Menu/config.ts +++ b/src/components/Menu/config.ts @@ -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', diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index 19ac4c5..400d078 100644 --- a/src/config/localization/translations.json +++ b/src/config/localization/translations.json @@ -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" } diff --git a/src/views/Home/HomeIndex.tsx b/src/views/Home/HomeIndex.tsx index 4628303..1b276d5 100644 --- a/src/views/Home/HomeIndex.tsx +++ b/src/views/Home/HomeIndex.tsx @@ -4,18 +4,16 @@ import FristCom from './components/FristCom' import IntroduceCom from './components/IntroduceCom' import CourseCom from './components/CourseCom' - const Home: React.FC = () => { - const { t } = useTranslation() + const { t } = useTranslation() - return ( - <> - - - - - - ) + return ( + <> + + + + + ) } export default Home diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index 12af605..9419dde 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -1,13 +1,13 @@ -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' const FristPage = styled.div` - background-image: url('/images/home/three.svg'); - background-size: 100%; - background-repeat: no-repeat; - padding:8rem 0 .8rem 0; + background-image: url('/images/home/three.svg'); + background-size: 100%; + background-repeat: no-repeat; + 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; - width: 82px; - height: 82px; - background: #1FC7D4; - border-radius: 50%; - font-size:46px; - color:#FAF9FA; - display:flex; - align-items:center; - justify-content:center; - z-index:2 + 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; + 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,45 +66,87 @@ const CardDiv = styled.div` } ` - const CourseCom: React.FC = () => { - const { t } = useTranslation() + 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')}]}]) - - - return ( - <> - - - -
- { - list.map((item,index) => { - return - {index + 1 } - - { item.title } - { - item.list.map((childItem) => { - return { childItem.text } - }) - } - - - }) - } -
- - - - - ) + 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') }, + ], + }, + ]) + + return ( + <> + + + +
+ {list.map((item, index) => { + return ( + + {index + 1} + + {item.title} + {item.list.map((childItem) => { + return ( + + {childItem.text} + + ) + })} + + + ) + })} +
+ + + + + ) } export default CourseCom diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx index 827bf47..7931088 100644 --- a/src/views/Home/components/FlexItemCom.tsx +++ b/src/views/Home/components/FlexItemCom.tsx @@ -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; +` - const ItemSubText = styled(Text)` - text-align:center; - font-size:20px; - ` - - export default function FlexItemCom({name,value}){ - - return ( - - { value } - { name } - - ) +export default function FlexItemCom({ name, value }) { + return ( + + {value} + {name} + + ) } - diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx index 704f5d7..5b861ba 100644 --- a/src/views/Home/components/FristCom.tsx +++ b/src/views/Home/components/FristCom.tsx @@ -6,10 +6,10 @@ import { useTranslation } from 'contexts/Localization' import FlexItemCom from './FlexItemCom' const FristPage = styled.div` - background-image: url('/images/home/bg.svg'); - background-size: 100%; - background-repeat: no-repeat; - padding:.9rem 0 .8rem 0; + background-image: url('/images/home/bg.svg'); + background-size: 100%; + background-repeat: no-repeat; + padding: 0.9rem 0 0.8rem 0; ` const StyledPage = styled(Box)` @@ -19,79 +19,88 @@ 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; - background: #fff; - box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); - opacity: 1; - border-radius: 15px; - padding:59px 0; - ` + margin-top: 127px; + background: #fff; + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); + opacity: 1; + border-radius: 15px; + 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%" }]) - return ( - <> - - - -
- - High City Coin - - - {t('Hcc Info')}
- {t('Hcc Nft')}
- {t('Hcc BTC')} - - {t('Exchange')} - { t('Bazaar') } - - - -
- - - - { - burned.map(item => { - return - }) - } - - - - - - - ) + 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%' }, + ]) + return ( + <> + + + + + + + High City Coin + + + {t('Hcc Info')} +
+ {t('Hcc Nft')} +
+ {t('Hcc BTC')} + + + + {t('Exchange')} + + + {t('Bazaar')} + + + + + + + + {burned.map((item) => { + return + })} + + + + + ) } export default FristCom diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 11b531f..29c06d5 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -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,81 +15,79 @@ 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; - box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); - opacity: 1; - border-radius: 20px; - padding:94px 92px 37px 92px; - position:relative; +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; ` 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() + const { t } = useTranslation() - return ( - <> - - - - -
- -
- - HlighCitySwap - { t('HlighCitySwapInfo') } - - - - - - - ) + return ( + <> + + + + +
+ +
+ + HlighCitySwap + {t('HlighCitySwapInfo')} + + + + + ) } export default IntroduceCom diff --git a/src/views/Nft/component/FlexText.tsx b/src/views/Nft/component/FlexText.tsx index 5c22e49..805530b 100644 --- a/src/views/Nft/component/FlexText.tsx +++ b/src/views/Nft/component/FlexText.tsx @@ -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( - - { name }： - { value } - - ) - -} \ No newline at end of file +export default function FlexText({ name, value }) { + return ( + + + {name}： + + + {value} + + + ) +} diff --git a/src/views/Nft/component/StepCom.tsx b/src/views/Nft/component/StepCom.tsx index e3fd125..0d64451 100644 --- a/src/views/Nft/component/StepCom.tsx +++ b/src/views/Nft/component/StepCom.tsx @@ -2,26 +2,25 @@ 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 [valNumber, setInputState] = useState(1) + const onAdd = (type) => { + if (type === 'add') { + setInputState(valNumber + 1) + } else { + if (valNumber === 0) return + setInputState(valNumber - 1) + } + } - const onAdd = (type) => { - if (type === 'add') { - setInputState(valNumber + 1) - } else { - if (valNumber === 0) return - setInputState(valNumber - 1) - } - - } - - return( - - onAdd('sub')} width={25} height={25} /> - {valNumber} - 1 onAdd('add')} width={25} height={25} /> - - ) - -} \ No newline at end of file + return ( + + onAdd('sub')} width={25} height={25} /> + + {valNumber} + + 1 onAdd('add')} width={25} height={25} /> + + ) +} diff --git a/src/views/Nft/index.tsx b/src/views/Nft/index.tsx index 49cfe61..eca1979 100644 --- a/src/views/Nft/index.tsx +++ b/src/views/Nft/index.tsx @@ -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,15 +12,14 @@ 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); - background: ${({ theme }) => theme.colors.gradients.bubblegum}; + width: 100%; + min-height: calc(100vh - 64px); + background: ${({ theme }) => theme.colors.gradients.bubblegum}; ` const StyledPage = styled.div` @@ -45,112 +43,118 @@ 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; - position: absolute; - top:-40px; - left:0; - z-index:10 + width: 32px; + position: absolute; + 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; - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - padding: 16px; - padding-bottom: 0; - min-height: calc(100vh - 104px); - background: ${({ theme }) => theme.colors.gradients.bubblegum}; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 16px; + padding-bottom: 0; + min-height: calc(100vh - 104px); + background: ${({ theme }) => theme.colors.gradients.bubblegum}; ` 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-bullet-active{ - background:#000; - } + & > .swiper-pagination { + & > .swiper-pagination-bullet { + background: #fff; + width: 14px; + height: 9px; + opacity: 1; + border-radius: 3px; + } + & > .swiper-pagination-bullet-active { + background: #000; + } } ` - const Nft: React.FC = () => { - const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }]) + const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }]) - return ( - - - { - blindboxList.map((item) => { - return - - - - - - - - - - - 系列 - 法式盛宴 - - - 价格 - - 500 - 黄油 - - - - 数量 - - - - - - - - - - }) - } - - - ) + return ( + + + {blindboxList.map((item) => { + return ( + + + + + + + + + + + + 系列 + 法式盛宴 + + + 价格 + + + 500 + + 黄油 + + + + 数量 + + + + + + + + + + ) + })} + + + ) } -export default Nft \ No newline at end of file +export default Nft diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx new file mode 100644 index 0000000..a6743e0 --- /dev/null +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -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 ( + + + + + + + + + + + + + + {t('Buy It Now')} + + + ) +} diff --git a/src/views/recommend/components/ConnectedComponent.tsx b/src/views/recommend/components/ConnectedComponent.tsx new file mode 100644 index 0000000..7f6fa94 --- /dev/null +++ b/src/views/recommend/components/ConnectedComponent.tsx @@ -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() + + return ( + + + <> + + + + + + + + {t('No income is received temporarily')} + {t('Upgrade commander')} + + + ) +} diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx new file mode 100644 index 0000000..676f3b6 --- /dev/null +++ b/src/views/recommend/components/FlexCom.tsx @@ -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 ( + + {name} + {value} + + ) +} diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx new file mode 100644 index 0000000..8e088e8 --- /dev/null +++ b/src/views/recommend/components/HeaderMain.tsx @@ -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 ( + + + {title} + + ) +} diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/RegimentalComponent.tsx new file mode 100644 index 0000000..4b7e9f6 --- /dev/null +++ b/src/views/recommend/components/RegimentalComponent.tsx @@ -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 ( + + + + {t('buy again')} + + + + + + + + + {t('Immediately to receive')} + {/* {t('No income is received temporarily)} */} + + + + + + + + + {t('Immediately to receive')} + {/* {t('No income is received temporarily)} */} + + + + ) +} diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx new file mode 100644 index 0000000..43e204a --- /dev/null +++ b/src/views/recommend/components/TextFlex.tsx @@ -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 {text} +} diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx new file mode 100644 index 0000000..12d18ab --- /dev/null +++ b/src/views/recommend/components/UnunitedCom.tsx @@ -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 ( + <> + + {t('recommend')} + + {t('Connect the purse')} + + ) +} diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx new file mode 100644 index 0000000..0b651f0 --- /dev/null +++ b/src/views/recommend/index.tsx @@ -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 ( + + {type ? : {status ? : }} + + ) +} +export default Nft