From d45b82cb9c598db1c44cafaafb8d60e59ada8d68 Mon Sep 17 00:00:00 2001 From: myf <> Date: Mon, 18 Apr 2022 18:08:12 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=86=9B=E5=9B=A2?= =?UTF-8?q?=E9=95=BFui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/zh-CN.json | 10 +- src/config/localization/translations.json | 9 +- .../recommend/components/BuyNftModal.tsx | 3 + .../components/ConnectedComponent.tsx | 32 ++++- src/views/recommend/components/HeaderMain.tsx | 5 +- .../components/RegimentalComponent.tsx | 128 ++++++++++++++---- .../recommend/components/UnunitedCom.tsx | 30 +++- 7 files changed, 176 insertions(+), 41 deletions(-) diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index 48e33bf..c5b76d0 100644 --- a/public/locales/zh-CN.json +++ b/public/locales/zh-CN.json @@ -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%作为手续费" + } diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index 400d078..a54e66b 100644 --- a/src/config/localization/translations.json +++ b/src/config/localization/translations.json @@ -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%作为手续费" } diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index a6743e0..010a29b 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -50,6 +50,9 @@ export default function BuyNftModal() { + + + diff --git a/src/views/recommend/components/ConnectedComponent.tsx b/src/views/recommend/components/ConnectedComponent.tsx index 7f6fa94..b7a3d6a 100644 --- a/src/views/recommend/components/ConnectedComponent.tsx +++ b/src/views/recommend/components/ConnectedComponent.tsx @@ -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() return ( - + <> - + {/* */} @@ -62,6 +69,21 @@ export default function ConnectedCom() { {t('No income is received temporarily')} {t('Upgrade commander')} + + + {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')} + + + {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', + )} + + + {t( + "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", + )} + + ) } diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx index 8e088e8..8d5bf4b 100644 --- a/src/views/recommend/components/HeaderMain.tsx +++ b/src/views/recommend/components/HeaderMain.tsx @@ -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 ( - + {tip ? : ''} + {/* */} {title} ) diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/RegimentalComponent.tsx index 4b7e9f6..d3b0070 100644 --- a/src/views/recommend/components/RegimentalComponent.tsx +++ b/src/views/recommend/components/RegimentalComponent.tsx @@ -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 ( - - - - {t('buy again')} - - - - - - + + + + + + + + <> + + + + - {t('Immediately to receive')} - {/* {t('No income is received temporarily)} */} - - - - - - - - - {t('Immediately to receive')} - {/* {t('No income is received temporarily)} */} - - - + + + + {t('No income is received temporarily')} + {/* {t('Upgrade commander')} */} + + + + {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')} + + + {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', + )} + + + {t( + "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", + )} + + + + ) } diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx index 12d18ab..326b959 100644 --- a/src/views/recommend/components/UnunitedCom.tsx +++ b/src/views/recommend/components/UnunitedCom.tsx @@ -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')} {t('Connect the purse')} + + + {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')} + + + {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', + )} + + + {t( + "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", + )} + + ) } From 2ef06fee91b946a7db06bbc71bf306d80fc6d12a Mon Sep 17 00:00:00 2001 From: myf <> Date: Mon, 18 Apr 2022 18:34:40 +0800 Subject: [PATCH 02/10] =?UTF-8?q?ui=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../recommend/components/BuyNftModal.tsx | 23 ++++++++++++++++--- .../components/RegimentalComponent.tsx | 13 +++++++++++ src/views/recommend/index.tsx | 13 ++++++++++- 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index 010a29b..5d1e997 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -6,6 +6,7 @@ import TextFlex from './TextFlex' import FlexCom from './FlexCom' const ModalDiv = styled(Modal)` + width: 80%; & > .jCXCIB { border-bottom: none; text-align: center; @@ -13,6 +14,9 @@ const ModalDiv = styled(Modal)` justify-content: center; } } + + ${({ theme }) => theme.mediaQueries.xs} { + } ` const InfoDiv = styled.div` @@ -23,13 +27,25 @@ const InfoDiv = styled.div` box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28); ` const UpBtn = styled(Button)` - width: 40%; + width: 50%; margin: 20px auto 0px auto; border-radius: 50px; /* background: ${({ theme }) => theme.colors.gradients.violet}; */ background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); border: none; ` +const ImageDiv = styled(Image)` + width: 300px; + height: 300px; + margin-bottom: 20px; + ${({ theme }) => theme.mediaQueries.sm} { + } + + ${({ theme }) => theme.mediaQueries.lg} { + } + ${({ theme }) => theme.mediaQueries.xs} { + } +` export default function BuyNftModal() { const { t } = useTranslation() @@ -38,9 +54,10 @@ export default function BuyNftModal() { console.log('aaa') } return ( - + - + {/* */} + theme.mediaQueries.sm} { + width: 60%; + } + + ${({ theme }) => theme.mediaQueries.lg} { + width: 60%; + } + ${({ theme }) => theme.mediaQueries.xs} { + width: 90%; + height: 80vh; + overflow-y: auto; + } ` const MainDiv = styled.div` diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx index 0b651f0..1a21177 100644 --- a/src/views/recommend/index.tsx +++ b/src/views/recommend/index.tsx @@ -21,11 +21,22 @@ const ContengDiv = styled.div` background: rgba(255, 255, 255, 0.39); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); border-radius: 40px; + + ${({ theme }) => theme.mediaQueries.sm} { + width: 60%; + } + + ${({ theme }) => theme.mediaQueries.lg} { + width: 60%; + } + ${({ theme }) => theme.mediaQueries.xs} { + width: 90%; + } ` const Nft: React.FC = () => { // 邀请false普通邀请 true军团长邀请 - const [type, typeState] = useState(false) + const [type, typeState] = useState(true) // 是否连接钱包 const [status, statusState] = useState(true) From 3fc5a047b6fca1f9692e01da404d0eb2417e421a Mon Sep 17 00:00:00 2001 From: myf <> Date: Tue, 19 Apr 2022 11:00:51 +0800 Subject: [PATCH 03/10] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home/components/CourseCom.tsx | 66 ++++++++++-- src/views/Home/components/FlexItemCom.tsx | 1 - src/views/Home/components/FristCom.tsx | 116 ++++++++++++++++----- src/views/Home/components/IntroduceCom.tsx | 25 ++++- 4 files changed, 170 insertions(+), 38 deletions(-) diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index 9419dde..a9c17d3 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -26,10 +26,45 @@ const StyledPage = styled(Box)` width: 80%; } ` +const FlexMain = styled(Flex)` + justify-content: center; + ${({ theme }) => theme.mediaQueries.xs} { + justify-content: start; + } + + ${({ theme }) => theme.mediaQueries.lg} { + justify-content: center; + } +` const SortDiv = styled.div` height: 190px; position: relative; + + ${({ theme }) => theme.mediaQueries.xs} { + height: 330px; + & > .bXcYNu { + left: 20px; + width: 300px; + } + } + + ${({ theme }) => theme.mediaQueries.lg} { + height: 190px; + :nth-of-type(odd) { + & > .bXcYNu { + width: 372px; + left: 60px; + } + } + + :nth-of-type(even) { + & > .bXcYNu { + width: 372px; + left: -420px; + } + } + } ` const SortNum = styled.div` @@ -46,6 +81,24 @@ const SortNum = styled.div` align-items: center; justify-content: center; z-index: 2; + + ${({ theme }) => theme.mediaQueries.xs} { + position: absolute; + width: 40px; + height: 40px; + font-size: 26px; + top: 0; + left: -23px; + } + + ${({ theme }) => theme.mediaQueries.lg} { + position: absolute; + width: 82px; + height: 82px; + font-size: 46px; + top: 0; + left: -43px; + } ` const CardDiv = styled.div` @@ -58,12 +111,6 @@ const CardDiv = styled.div` position: absolute; top: -25%; background: #fff; - ${({ theme }) => theme.mediaQueries.sm} { - // left: 60px !important; - } - - ${({ theme }) => theme.mediaQueries.lg} { - } ` const CourseCom: React.FC = () => { @@ -119,7 +166,7 @@ const CourseCom: React.FC = () => { <> - +
{list.map((item, index) => { return ( @@ -128,7 +175,8 @@ const CourseCom: React.FC = () => { style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }} > {index + 1} - + {/* style={{ left: index % 2 ? '-420px' : '60px' }} */} + {item.title} {item.list.map((childItem) => { return ( @@ -142,7 +190,7 @@ const CourseCom: React.FC = () => { ) })}
- + diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx index 7931088..9b3ae72 100644 --- a/src/views/Home/components/FlexItemCom.tsx +++ b/src/views/Home/components/FlexItemCom.tsx @@ -4,7 +4,6 @@ import { Text } from '@pancakeswap/uikit' const ScoreItem = styled.div` width: 100%; - text-algin: center; ` const ItemText = styled(Text)` diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx index 5b861ba..7e0a51c 100644 --- a/src/views/Home/components/FristCom.tsx +++ b/src/views/Home/components/FristCom.tsx @@ -7,7 +7,7 @@ import FlexItemCom from './FlexItemCom' const FristPage = styled.div` background-image: url('/images/home/bg.svg'); - background-size: 100%; + background-size: cover; background-repeat: no-repeat; padding: 0.9rem 0 0.8rem 0; ` @@ -28,21 +28,78 @@ const StyledPage = styled(Box)` width: 80%; } ` +const FlexDiv = styled(Flex)` + justify-content: space-between; + align-items: center; + flex-direction: row-reverse; + flex-wrap: wrap; + ${({ theme }) => theme.mediaQueries.xs} { + justify-content: center; + } + ${({ theme }) => theme.mediaQueries.lg} { + } +` +const ImageDiv = styled.img` + ${({ theme }) => theme.mediaQueries.xs} { + justify-content: center; + width: 215px; + height: 215px; + margin-bottom: 20px; + } + ${({ theme }) => theme.mediaQueries.lg} { + width: 315px; + height: 315px; + margin-bottom: 0px; + } +` +const BtnFlex = styled(Flex)` + align-items: center; + flex-wrap: wrap; + margin-top: 60px; + ${({ theme }) => theme.mediaQueries.xs} { + margin-top: 30px; + } + ${({ theme }) => theme.mediaQueries.lg} { + margin-top: 60px; + } +` const RadiusBtn = styled(Button)` border-radius: 50px; width: 170px; height: 60px; font-size: 18px; - margin: 0px 20px 0 0; + margin-right: 20px; + margin-bottom: 10px; background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%); + ${({ theme }) => theme.mediaQueries.xs} { + width: 140px; + height: 50px; + } + ${({ theme }) => theme.mediaQueries.lg} { + width: 170px; + height: 60px; + } ` const WhiteBtn = styled(Button)` border-radius: 50px; - width: 170px; - height: 60px; + width: 140px; + height: 30px; border: 1px solid #1fc7d4; - margin: 0px 35px 0 0; + margin: 0px 35px 10px 0; + ${({ theme }) => theme.mediaQueries.xs} { + width: 140px; + height: 50px; + } + ${({ theme }) => theme.mediaQueries.lg} { + width: 170px; + height: 60px; + } +` +const BtnImage = styled(Image)` + width: 34px; + height: 34px; + margin-right: 12px; ` const ScoreDiv = styled(Flex)` @@ -52,6 +109,17 @@ const ScoreDiv = styled(Flex)` opacity: 1; border-radius: 15px; padding: 59px 0; + justify-content: space-between; + ${({ theme }) => theme.mediaQueries.xs} { + margin-top: 50px; + padding: 30px 0; + flex-direction: column; + } + ${({ theme }) => theme.mediaQueries.lg} { + margin-top: 127px; + padding: 59px 0; + flex-direction: unset; + } ` const InfoDiv = styled.div`` @@ -66,33 +134,27 @@ const FristCom: React.FC = () => { return ( <> - - - + + + High City Coin - - {t('Hcc Info')} -
- {t('Hcc Nft')} -
- {t('Hcc BTC')} - - - - {t('Exchange')} - - - {t('Bazaar')} - - - - + {t('Hcc Info')} + {t('Hcc Nft')} + {t('Hcc BTC')} + + {t('Exchange')} + {t('Bazaar')} + + + + + - - + + {burned.map((item) => { return })} diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 29c06d5..2f57bbe 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -30,8 +30,15 @@ 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; + /* padding: 94px 92px 37px 92px; */ position: relative; + ${({ theme }) => theme.mediaQueries.xs} { + padding: 94px 30px 37px 30px; + } + + ${({ theme }) => theme.mediaQueries.lg} { + padding: 94px 92px 37px 92px; + } ` const MainDiv = styled.div` @@ -57,15 +64,31 @@ const MainDiv = styled.div` ` const HeadingDiv = styled(Heading)` + width: 100%; margin-top: 18px; font-size: 36px; color: #333333; + ${({ theme }) => theme.mediaQueries.xs} { + margin-top: 10px; + } + + ${({ theme }) => theme.mediaQueries.lg} { + margin-top: 18px; + } ` const TextCom = styled(Text)` margin-top: 35px; text-align: center; line-height: 32px; + width: 100%; + ${({ theme }) => theme.mediaQueries.xs} { + margin-top: 20px; + } + + ${({ theme }) => theme.mediaQueries.lg} { + margin-top: 35px; + } ` const IntroduceCom: React.FC = () => { From 9dff7975c3e633ebc82402394c224b5fb237b8e6 Mon Sep 17 00:00:00 2001 From: myf <> Date: Tue, 19 Apr 2022 15:00:00 +0800 Subject: [PATCH 04/10] =?UTF-8?q?=E5=86=9B=E5=9B=A2=E9=95=BFui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/zh-CN.json | 6 +++--- src/config/localization/translations.json | 6 +++--- .../recommend/components/BuyNftModal.tsx | 21 +++++++++++++------ .../components/ConnectedComponent.tsx | 16 +++----------- .../components/RegimentalComponent.tsx | 16 +++----------- .../recommend/components/UnunitedCom.tsx | 16 +++----------- src/views/recommend/index.tsx | 2 +- 7 files changed, 31 insertions(+), 52 deletions(-) diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index c5b76d0..232069f 100644 --- a/public/locales/zh-CN.json +++ b/public/locales/zh-CN.json @@ -1103,8 +1103,8 @@ "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%作为手续费" + "each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时", + "last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得", + "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费" } diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index a54e66b..e7f2c6e 100644 --- a/src/config/localization/translations.json +++ b/src/config/localization/translations.json @@ -1230,7 +1230,7 @@ "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%作为手续费" + "each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time", + "last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid", + "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee" } diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index 5d1e997..d84019c 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -25,6 +25,14 @@ const InfoDiv = styled.div` /* width: calc(100% - 280px); */ margin-left: 2rem; box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28); + ${({ theme }) => theme.mediaQueries.xs} { + padding: 20px 10px; + margin-left: 0rem; + } + ${({ theme }) => theme.mediaQueries.lg} { + padding: 30px 26px; + margin-left: 2rem; + } ` const UpBtn = styled(Button)` width: 50%; @@ -38,12 +46,13 @@ const ImageDiv = styled(Image)` width: 300px; height: 300px; margin-bottom: 20px; - ${({ theme }) => theme.mediaQueries.sm} { - } - - ${({ theme }) => theme.mediaQueries.lg} { - } ${({ theme }) => theme.mediaQueries.xs} { + width: 150px; + height: 150px; + } + ${({ theme }) => theme.mediaQueries.lg} { + width: 300px; + height: 300px; } ` @@ -57,7 +66,7 @@ export default function BuyNftModal() { {/* */} - + {t('Upgrade commander')} - - {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')} - - - {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', - )} - - - {t( - "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", - )} - + {t('each time')} + {t('last bid')} + {t('commission fee')} ) diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/RegimentalComponent.tsx index 82c74c8..cfde662 100644 --- a/src/views/recommend/components/RegimentalComponent.tsx +++ b/src/views/recommend/components/RegimentalComponent.tsx @@ -140,19 +140,9 @@ export default function RegimentalCom() { {/* {t('Upgrade commander')} */} - - {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')} - - - {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', - )} - - - {t( - "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", - )} - + {t('each time')} + {t('last bid')} + {t('commission fee')} diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx index 326b959..f2654d0 100644 --- a/src/views/recommend/components/UnunitedCom.tsx +++ b/src/views/recommend/components/UnunitedCom.tsx @@ -32,19 +32,9 @@ export default function UnunitedCom() { {t('Connect the purse')} - - {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')} - - - {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', - )} - - - {t( - "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee", - )} - + {t('each time')} + {t('last bid')} + {t('commission fee')} ) diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx index 1a21177..cab26a9 100644 --- a/src/views/recommend/index.tsx +++ b/src/views/recommend/index.tsx @@ -36,7 +36,7 @@ const ContengDiv = styled.div` const Nft: React.FC = () => { // 邀请false普通邀请 true军团长邀请 - const [type, typeState] = useState(true) + const [type, typeState] = useState(false) // 是否连接钱包 const [status, statusState] = useState(true) From a20fe8fe43133d9c622c87fc8a0e4b9f9ae2976a Mon Sep 17 00:00:00 2001 From: myf <> Date: Wed, 20 Apr 2022 13:39:48 +0800 Subject: [PATCH 05/10] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/views/Home/components/CourseCom.tsx | 12 ++--- src/views/Home/components/FlexItemCom.tsx | 8 ++- src/views/Home/components/IntroduceCom.tsx | 4 +- .../recommend/components/BuyNftModal.tsx | 27 +++------- .../{ConnectedComponent.tsx => Connected.tsx} | 28 +++------- src/views/recommend/components/FlexCom.tsx | 21 ++++---- src/views/recommend/components/HeaderMain.tsx | 13 +++-- ...RegimentalComponent.tsx => Regimental.tsx} | 54 +++---------------- src/views/recommend/components/TextFlex.tsx | 10 +++- .../recommend/components/UnunitedCom.tsx | 11 ++-- src/views/recommend/index.tsx | 6 +-- 12 files changed, 70 insertions(+), 126 deletions(-) rename src/views/recommend/components/{ConnectedComponent.tsx => Connected.tsx} (73%) rename src/views/recommend/components/{RegimentalComponent.tsx => Regimental.tsx} (67%) diff --git a/src/App.tsx b/src/App.tsx index f0114a3..842648b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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({ diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index a9c17d3..c01f851 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -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' }} > {index + 1} - {/* style={{ left: index % 2 ? '-420px' : '60px' }} */} - + {item.title} {item.list.map((childItem) => { return ( diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx index 9b3ae72..34126a3 100644 --- a/src/views/Home/components/FlexItemCom.tsx +++ b/src/views/Home/components/FlexItemCom.tsx @@ -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 = ({ name, value }) => { return ( {value} @@ -24,3 +29,4 @@ export default function FlexItemCom({ name, value }) { ) } +export default FlexItemCom diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 2f57bbe..61dd480 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -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; diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index d84019c..a4515df 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -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 ( - + - {/* */} ) } +export default BuyNftModal diff --git a/src/views/recommend/components/ConnectedComponent.tsx b/src/views/recommend/components/Connected.tsx similarity index 73% rename from src/views/recommend/components/ConnectedComponent.tsx rename to src/views/recommend/components/Connected.tsx index f26edc5..80c8dff 100644 --- a/src/views/recommend/components/ConnectedComponent.tsx +++ b/src/views/recommend/components/Connected.tsx @@ -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() return ( - + <> - {/* */} - {t('No income is received temporarily')} {t('Upgrade commander')} @@ -77,3 +62,4 @@ export default function ConnectedCom() { ) } +export default ConnectedCom diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx index 676f3b6..e66d270 100644 --- a/src/views/recommend/components/FlexCom.tsx +++ b/src/views/recommend/components/FlexCom.tsx @@ -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 = ({ name, value, paddings, leftColor, RightColor }) => { return ( {name} @@ -23,3 +23,4 @@ export default function FlexCom({ ) } +export default FlexCom diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx index 8d5bf4b..af0f007 100644 --- a/src/views/recommend/components/HeaderMain.tsx +++ b/src/views/recommend/components/HeaderMain.tsx @@ -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 = ({ title }) => { return ( - {tip ? : ''} - {/* */} {title} ) } +export default HeaderMian diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/Regimental.tsx similarity index 67% rename from src/views/recommend/components/RegimentalComponent.tsx rename to src/views/recommend/components/Regimental.tsx index cfde662..c619df8 100644 --- a/src/views/recommend/components/RegimentalComponent.tsx +++ b/src/views/recommend/components/Regimental.tsx @@ -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 ( - + @@ -148,3 +105,4 @@ export default function RegimentalCom() { ) } +export default RegimentalCom diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx index 43e204a..85dada1 100644 --- a/src/views/recommend/components/TextFlex.tsx +++ b/src/views/recommend/components/TextFlex.tsx @@ -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 = ({ color, text = '' }) => { return {text} } +export default TextFlex diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx index f2654d0..f697364 100644 --- a/src/views/recommend/components/UnunitedCom.tsx +++ b/src/views/recommend/components/UnunitedCom.tsx @@ -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 diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx index cab26a9..7542356 100644 --- a/src/views/recommend/index.tsx +++ b/src/views/recommend/index.tsx @@ -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); From 2c2ac35a899fb433313dbea6ef5cf2a829a9378a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=9A?= <1185064170@qq.com> Date: Wed, 20 Apr 2022 07:09:03 +0000 Subject: [PATCH 06/10] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20sr?= =?UTF-8?q?c/views/recommend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../recommend/components/BuyNftModal.tsx | 79 ------------- src/views/recommend/components/Connected.tsx | 65 ----------- src/views/recommend/components/FlexCom.tsx | 26 ----- src/views/recommend/components/HeaderMain.tsx | 27 ----- src/views/recommend/components/Regimental.tsx | 108 ------------------ src/views/recommend/components/TextFlex.tsx | 23 ---- .../recommend/components/UnunitedCom.tsx | 42 ------- src/views/recommend/index.tsx | 47 -------- 8 files changed, 417 deletions(-) delete mode 100644 src/views/recommend/components/BuyNftModal.tsx delete mode 100644 src/views/recommend/components/Connected.tsx delete mode 100644 src/views/recommend/components/FlexCom.tsx delete mode 100644 src/views/recommend/components/HeaderMain.tsx delete mode 100644 src/views/recommend/components/Regimental.tsx delete mode 100644 src/views/recommend/components/TextFlex.tsx delete mode 100644 src/views/recommend/components/UnunitedCom.tsx delete mode 100644 src/views/recommend/index.tsx diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx deleted file mode 100644 index a4515df..0000000 --- a/src/views/recommend/components/BuyNftModal.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React 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)` - width: 80%; - - ${({ theme }) => theme.mediaQueries.xs} { - } -` - -const InfoDiv = styled.div` - box-sizing: border-box; - padding: 30px 26px; - margin-left: 60px; - box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28); - ${({ theme }) => theme.mediaQueries.xs} { - padding: 20px 10px; - margin-left: 0; - } - ${({ theme }) => theme.mediaQueries.lg} { - padding: 30px 26px; - margin-left: 60px; - } -` -const UpBtn = styled(Button)` - width: 50%; - margin: 20px auto 0px auto; - border-radius: 50px; - background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); - border: none; -` -const ImageDiv = styled(Image)` - width: 300px; - height: 300px; - margin-bottom: 20px; - ${({ theme }) => theme.mediaQueries.xs} { - width: 150px; - height: 150px; - } - ${({ theme }) => theme.mediaQueries.lg} { - width: 300px; - height: 300px; - } -` - -const BuyNftModal: React.FC = () => { - const { t } = useTranslation() - - // const onDismiss = () => {} - return ( - - - - - - - - - - - - - - - - - {t('Buy It Now')} - - - ) -} -export default BuyNftModal diff --git a/src/views/recommend/components/Connected.tsx b/src/views/recommend/components/Connected.tsx deleted file mode 100644 index 80c8dff..0000000 --- a/src/views/recommend/components/Connected.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { useTranslation } from 'contexts/Localization' -import { Button, useModal, Text } from '@pancakeswap/uikit' -import FlexCom from './FlexCom' -import BuyNftModal from './BuyNftModal' -import HeaderMian from './HeaderMain' - -const ButtonDiv = styled(Button)` - width: 100%; - margin: 20px auto 0px auto; - border-radius: 50px; - border: 1px solid ${({ theme }) => theme.colors.textDisabled}; - color: ${({ theme }) => theme.colors.textDisabled}; -` - -const UpBtn = styled(Button)` - width: 100%; - margin: 20px auto 0px auto; - border-radius: 50px; - background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); - border: none; -` - -const FooterBtn = styled.div` - width: 100%; - box-sizing: border-box; - padding-bottom: 20px; -` -const MainDiv = styled.div` - padding: 0 30px; -` -const FooterDiv = styled.div` - margin: 0 auto 30px auto; -` -const TextDiv = styled(Text)` - margin-top: 10px; - font-size: 14px; -` - -const ConnectedCom: React.FC = () => { - const { t } = useTranslation() - const [onBuyModal] = useModal() - - return ( - - - <> - - - - - - {t('No income is received temporarily')} - {t('Upgrade commander')} - - - {t('each time')} - {t('last bid')} - {t('commission fee')} - - - ) -} -export default ConnectedCom diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx deleted file mode 100644 index e66d270..0000000 --- a/src/views/recommend/components/FlexCom.tsx +++ /dev/null @@ -1,26 +0,0 @@ -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; -` -const FlexCom: React.FC = ({ name, value, paddings, leftColor, RightColor }) => { - return ( - - {name} - {value} - - ) -} -export default FlexCom diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx deleted file mode 100644 index af0f007..0000000 --- a/src/views/recommend/components/HeaderMain.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { Image, Heading } from '@pancakeswap/uikit' - -interface HeaderProp { - title: string -} - -const HeadingDiv = styled(Heading)` - padding-top: 30px; - position: relative; -` - -const TipDiv = styled(Image)` - position: absolute; - cursor: pointer; - top: 24px; - left: 0; -` -const HeaderMian: React.FC = ({ title }) => { - return ( - - {title} - - ) -} -export default HeaderMian diff --git a/src/views/recommend/components/Regimental.tsx b/src/views/recommend/components/Regimental.tsx deleted file mode 100644 index c619df8..0000000 --- a/src/views/recommend/components/Regimental.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { useTranslation } from 'contexts/Localization' -import { Text, Image, Button } from '@pancakeswap/uikit' -import FlexCom from './FlexCom' -import HeaderMian from './HeaderMain' - -const ButtonDiv = styled(Button)` - width: 100%; - margin: 20px auto 0px auto; - border-radius: 50px; - border: 1px solid ${({ theme }) => theme.colors.textDisabled}; - color: ${({ theme }) => theme.colors.textDisabled}; -` - -const UpBtn = styled(Button)` - width: 100%; - margin: 20px auto 0px auto; - border-radius: 50px; - background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); - border: none; -` - -const FooterBtn = styled.div` - width: 100%; - box-sizing: border-box; - padding-bottom: 20px; -` - -const 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; - - ${({ theme }) => theme.mediaQueries.sm} { - width: 60%; - } - - ${({ theme }) => theme.mediaQueries.lg} { - width: 60%; - } - ${({ theme }) => theme.mediaQueries.xs} { - width: 90%; - height: 80vh; - overflow-y: auto; - } -` - -const MainDiv = styled.div` - padding: 0 30px; -` -const FooterDiv = styled.div` - margin: 0 auto 30px auto; -` -const TextDiv = styled(Text)` - margin-top: 10px; - font-size: 14px; -` -const LogoImage = styled.div` - display: flex; - align-items: center; - justify-content: center; -` - -const RegimentalCom: React.FC = () => { - const { t } = useTranslation() - return ( - - - - - - - - <> - - - - - - - - - - {t('No income is received temporarily')} - {/* {t('Upgrade commander')} */} - - - {t('each time')} - {t('last bid')} - {t('commission fee')} - - - - ) -} -export default RegimentalCom diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx deleted file mode 100644 index 85dada1..0000000 --- a/src/views/recommend/components/TextFlex.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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; - border-radius: 10px; - margin-bottom: 15px; - color: #2f2e41; - font-size: 14px; - justify-content: center; -` - -const TextFlex: React.FC = ({ color, text = '' }) => { - return {text} -} -export default TextFlex diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx deleted file mode 100644 index f697364..0000000 --- a/src/views/recommend/components/UnunitedCom.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { useTranslation } from 'contexts/Localization' -import { Button, Heading, Text } from '@pancakeswap/uikit' - -const HeadingDiv = styled(Heading)` - padding-top: 90px; -` - -const ButtonDiv = styled(Button)` - width: 80%; - margin: 80px auto 10px auto; - margin-left: 10%; - border-radius: 50px; -` -const FooterDiv = styled.div` - width: 80%; - margin: 0 auto 30px auto; - margin-left: 10%; -` -const TextDiv = styled(Text)` - margin-top: 10px; - font-size: 14px; -` - -const UnunitedCom: React.FC = () => { - const { t } = useTranslation() - return ( - <> - - {t('recommend')} - - {t('Connect the purse')} - - {t('each time')} - {t('last bid')} - {t('commission fee')} - - - ) -} -export default UnunitedCom diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx deleted file mode 100644 index 7542356..0000000 --- a/src/views/recommend/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useState } from 'react' -import styled from 'styled-components' -import UnunitedCom from './components/UnunitedCom' -import ConnectedCom from './components/Connected' -import RegimentalCom from './components/Regimental' - -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; - - ${({ theme }) => theme.mediaQueries.sm} { - width: 60%; - } - - ${({ theme }) => theme.mediaQueries.lg} { - width: 60%; - } - ${({ theme }) => theme.mediaQueries.xs} { - width: 90%; - } -` - -const Nft: React.FC = () => { - // 邀请false普通邀请 true军团长邀请 - const [type, typeState] = useState(false) - // 是否连接钱包 - const [status, statusState] = useState(true) - - return ( - - {type ? : {status ? : }} - - ) -} -export default Nft From 7fa782cbf59e9f0add347138b830cc372ac07b65 Mon Sep 17 00:00:00 2001 From: myf <> Date: Wed, 20 Apr 2022 15:09:34 +0800 Subject: [PATCH 07/10] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home/components/CourseCom.tsx | 96 +++---------------- src/views/Home/components/IntroduceCom.tsx | 1 + .../recommend/components/BuyNftModal.tsx | 3 - src/views/recommend/components/FlexCom.tsx | 16 +++- src/views/recommend/components/HeaderMain.tsx | 6 -- src/views/recommend/components/TextFlex.tsx | 2 +- src/views/recommend/index.tsx | 4 +- 7 files changed, 26 insertions(+), 102 deletions(-) diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index c01f851..2cd2109 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { Flex, Heading, Text, Box } from '@pancakeswap/uikit' +import { Flex, Heading, Text, Box, Stepper, Step, Card, CardBody } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' const FristPage = styled.div` @@ -36,80 +36,9 @@ const FlexMain = styled(Flex)` justify-content: center; } ` -const SortDiv = styled.div` - height: 190px; - position: relative; - ${({ theme }) => theme.mediaQueries.xs} { - height: 330px; - & > .card-content { - left: 20px; - width: 300px; - } - } - - ${({ theme }) => theme.mediaQueries.lg} { - height: 190px; - :nth-of-type(odd) { - & > .card-content { - width: 372px; - left: 60px; - } - } - - :nth-of-type(even) { - & > .card-content { - width: 372px; - left: -420px; - } - } - } -` - -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; - - ${({ theme }) => theme.mediaQueries.xs} { - position: absolute; - width: 40px; - height: 40px; - font-size: 26px; - top: 0; - left: -23px; - } - - ${({ theme }) => theme.mediaQueries.lg} { - position: absolute; - width: 82px; - height: 82px; - font-size: 46px; - top: 0; - left: -43px; - } -` - -const CardDiv = styled.div` - width: 372px; - box-sizing: border-box; - padding: 28px 40px 16px 26px; - border: 1px solid #e7e3eb; - box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); - border-radius: 25px; - position: absolute; - top: -25%; - background: #fff; +const CardDiv = styled(Card)` + padding: 20px; ` const CourseCom: React.FC = () => { @@ -167,14 +96,11 @@ const CourseCom: React.FC = () => {
- {list.map((item, index) => { - return ( - - {index + 1} - + + {list.map((item, index) => ( + // eslint-disable-next-line react/no-array-index-key + + {item.title} {item.list.map((childItem) => { return ( @@ -184,9 +110,9 @@ const CourseCom: React.FC = () => { ) })} - - ) - })} + + ))} +
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 61dd480..c05626a 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -5,6 +5,7 @@ import { useTranslation } from 'contexts/Localization' const FristPage = styled.div` background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%); + padding: 100px 0 50px 0; ` const StyledPage = styled(Box)` diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index a4515df..5acf3c2 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -7,9 +7,6 @@ import FlexCom from './FlexCom' const ModalDiv = styled(Modal)` width: 80%; - - ${({ theme }) => theme.mediaQueries.xs} { - } ` const InfoDiv = styled.div` diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx index e66d270..3ac05e5 100644 --- a/src/views/recommend/components/FlexCom.tsx +++ b/src/views/recommend/components/FlexCom.tsx @@ -5,9 +5,9 @@ import { Flex, Text } from '@pancakeswap/uikit' interface FlexProps { name: string value: string - paddings?: string | '0px' - leftColor?: string | 'text' - RightColor?: string | 'textSubtle' + paddings?: string + leftColor?: string + rightColor?: string } const FlexDiv = styled(Flex)` @@ -15,11 +15,17 @@ const FlexDiv = styled(Flex)` align-items: center; margin-top: 20px; ` -const FlexCom: React.FC = ({ name, value, paddings, leftColor, RightColor }) => { +const FlexCom: React.FC = ({ + name, + value, + paddings = '0px', + leftColor = 'text', + rightColor = 'textSubtle', +}) => { return ( {name} - {value} + {value} ) } diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx index af0f007..f5f8a4e 100644 --- a/src/views/recommend/components/HeaderMain.tsx +++ b/src/views/recommend/components/HeaderMain.tsx @@ -11,12 +11,6 @@ const HeadingDiv = styled(Heading)` position: relative; ` -const TipDiv = styled(Image)` - position: absolute; - cursor: pointer; - top: 24px; - left: 0; -` const HeaderMian: React.FC = ({ title }) => { return ( diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx index 85dada1..fd732a1 100644 --- a/src/views/recommend/components/TextFlex.tsx +++ b/src/views/recommend/components/TextFlex.tsx @@ -4,7 +4,7 @@ import { Flex } from '@pancakeswap/uikit' interface TextProps { color: string - text?: string | '' + text?: string } const MainDiv = styled(Flex)` diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx index 7542356..7d4c6f9 100644 --- a/src/views/recommend/index.tsx +++ b/src/views/recommend/index.tsx @@ -32,7 +32,7 @@ const ContengDiv = styled.div` } ` -const Nft: React.FC = () => { +const Recommend: React.FC = () => { // 邀请false普通邀请 true军团长邀请 const [type, typeState] = useState(false) // 是否连接钱包 @@ -44,4 +44,4 @@ const Nft: React.FC = () => { ) } -export default Nft +export default Recommend From 136088ce8da7d6f045d6dbf3df04c199a4e24c8f Mon Sep 17 00:00:00 2001 From: myf <> Date: Wed, 20 Apr 2022 16:22:44 +0800 Subject: [PATCH 08/10] all --- src/views/Home/components/CourseCom.tsx | 96 ++++++++++++++-- src/views/Home/components/IntroduceCom.tsx | 1 - .../recommend/components/BuyNftModal.tsx | 3 + src/views/recommend/components/Connected.tsx | 65 +++++++++++ src/views/recommend/components/HeaderMain.tsx | 6 + src/views/recommend/components/Regimental.tsx | 108 ++++++++++++++++++ .../recommend/components/UnunitedCom.tsx | 42 +++++++ src/views/recommend/index.tsx | 4 +- 8 files changed, 311 insertions(+), 14 deletions(-) create mode 100644 src/views/recommend/components/Connected.tsx create mode 100644 src/views/recommend/components/Regimental.tsx create mode 100644 src/views/recommend/components/UnunitedCom.tsx diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index 2cd2109..c01f851 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { Flex, Heading, Text, Box, Stepper, Step, Card, CardBody } from '@pancakeswap/uikit' +import { Flex, Heading, Text, Box } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' const FristPage = styled.div` @@ -36,9 +36,80 @@ const FlexMain = styled(Flex)` justify-content: center; } ` +const SortDiv = styled.div` + height: 190px; + position: relative; -const CardDiv = styled(Card)` - padding: 20px; + ${({ theme }) => theme.mediaQueries.xs} { + height: 330px; + & > .card-content { + left: 20px; + width: 300px; + } + } + + ${({ theme }) => theme.mediaQueries.lg} { + height: 190px; + :nth-of-type(odd) { + & > .card-content { + width: 372px; + left: 60px; + } + } + + :nth-of-type(even) { + & > .card-content { + width: 372px; + left: -420px; + } + } + } +` + +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; + + ${({ theme }) => theme.mediaQueries.xs} { + position: absolute; + width: 40px; + height: 40px; + font-size: 26px; + top: 0; + left: -23px; + } + + ${({ theme }) => theme.mediaQueries.lg} { + position: absolute; + width: 82px; + height: 82px; + font-size: 46px; + top: 0; + left: -43px; + } +` + +const CardDiv = styled.div` + width: 372px; + box-sizing: border-box; + padding: 28px 40px 16px 26px; + border: 1px solid #e7e3eb; + box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); + border-radius: 25px; + position: absolute; + top: -25%; + background: #fff; ` const CourseCom: React.FC = () => { @@ -96,11 +167,14 @@ const CourseCom: React.FC = () => {
- - {list.map((item, index) => ( - // eslint-disable-next-line react/no-array-index-key - - + {list.map((item, index) => { + return ( + + {index + 1} + {item.title} {item.list.map((childItem) => { return ( @@ -110,9 +184,9 @@ const CourseCom: React.FC = () => { ) })} - - ))} - + + ) + })}
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index c05626a..61dd480 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -5,7 +5,6 @@ import { useTranslation } from 'contexts/Localization' const FristPage = styled.div` background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%); - padding: 100px 0 50px 0; ` const StyledPage = styled(Box)` diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index 5acf3c2..a4515df 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -7,6 +7,9 @@ import FlexCom from './FlexCom' const ModalDiv = styled(Modal)` width: 80%; + + ${({ theme }) => theme.mediaQueries.xs} { + } ` const InfoDiv = styled.div` diff --git a/src/views/recommend/components/Connected.tsx b/src/views/recommend/components/Connected.tsx new file mode 100644 index 0000000..80c8dff --- /dev/null +++ b/src/views/recommend/components/Connected.tsx @@ -0,0 +1,65 @@ +import React from 'react' +import styled from 'styled-components' +import { useTranslation } from 'contexts/Localization' +import { Button, useModal, Text } from '@pancakeswap/uikit' +import FlexCom from './FlexCom' +import BuyNftModal from './BuyNftModal' +import HeaderMian from './HeaderMain' + +const ButtonDiv = styled(Button)` + width: 100%; + margin: 20px auto 0px auto; + border-radius: 50px; + border: 1px solid ${({ theme }) => theme.colors.textDisabled}; + color: ${({ theme }) => theme.colors.textDisabled}; +` + +const UpBtn = styled(Button)` + width: 100%; + margin: 20px auto 0px auto; + border-radius: 50px; + background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); + border: none; +` + +const FooterBtn = styled.div` + width: 100%; + box-sizing: border-box; + padding-bottom: 20px; +` +const MainDiv = styled.div` + padding: 0 30px; +` +const FooterDiv = styled.div` + margin: 0 auto 30px auto; +` +const TextDiv = styled(Text)` + margin-top: 10px; + font-size: 14px; +` + +const ConnectedCom: React.FC = () => { + const { t } = useTranslation() + const [onBuyModal] = useModal() + + return ( + + + <> + + + + + + {t('No income is received temporarily')} + {t('Upgrade commander')} + + + {t('each time')} + {t('last bid')} + {t('commission fee')} + + + ) +} +export default ConnectedCom diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx index f5f8a4e..af0f007 100644 --- a/src/views/recommend/components/HeaderMain.tsx +++ b/src/views/recommend/components/HeaderMain.tsx @@ -11,6 +11,12 @@ const HeadingDiv = styled(Heading)` position: relative; ` +const TipDiv = styled(Image)` + position: absolute; + cursor: pointer; + top: 24px; + left: 0; +` const HeaderMian: React.FC = ({ title }) => { return ( diff --git a/src/views/recommend/components/Regimental.tsx b/src/views/recommend/components/Regimental.tsx new file mode 100644 index 0000000..c619df8 --- /dev/null +++ b/src/views/recommend/components/Regimental.tsx @@ -0,0 +1,108 @@ +import React from 'react' +import styled from 'styled-components' +import { useTranslation } from 'contexts/Localization' +import { Text, Image, Button } from '@pancakeswap/uikit' +import FlexCom from './FlexCom' +import HeaderMian from './HeaderMain' + +const ButtonDiv = styled(Button)` + width: 100%; + margin: 20px auto 0px auto; + border-radius: 50px; + border: 1px solid ${({ theme }) => theme.colors.textDisabled}; + color: ${({ theme }) => theme.colors.textDisabled}; +` + +const UpBtn = styled(Button)` + width: 100%; + margin: 20px auto 0px auto; + border-radius: 50px; + background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); + border: none; +` + +const FooterBtn = styled.div` + width: 100%; + box-sizing: border-box; + padding-bottom: 20px; +` + +const 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; + + ${({ theme }) => theme.mediaQueries.sm} { + width: 60%; + } + + ${({ theme }) => theme.mediaQueries.lg} { + width: 60%; + } + ${({ theme }) => theme.mediaQueries.xs} { + width: 90%; + height: 80vh; + overflow-y: auto; + } +` + +const MainDiv = styled.div` + padding: 0 30px; +` +const FooterDiv = styled.div` + margin: 0 auto 30px auto; +` +const TextDiv = styled(Text)` + margin-top: 10px; + font-size: 14px; +` +const LogoImage = styled.div` + display: flex; + align-items: center; + justify-content: center; +` + +const RegimentalCom: React.FC = () => { + const { t } = useTranslation() + return ( + + + + + + + + <> + + + + + + + + + + {t('No income is received temporarily')} + {/* {t('Upgrade commander')} */} + + + {t('each time')} + {t('last bid')} + {t('commission fee')} + + + + ) +} +export default RegimentalCom diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx new file mode 100644 index 0000000..f697364 --- /dev/null +++ b/src/views/recommend/components/UnunitedCom.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import styled from 'styled-components' +import { useTranslation } from 'contexts/Localization' +import { Button, Heading, Text } from '@pancakeswap/uikit' + +const HeadingDiv = styled(Heading)` + padding-top: 90px; +` + +const ButtonDiv = styled(Button)` + width: 80%; + margin: 80px auto 10px auto; + margin-left: 10%; + border-radius: 50px; +` +const FooterDiv = styled.div` + width: 80%; + margin: 0 auto 30px auto; + margin-left: 10%; +` +const TextDiv = styled(Text)` + margin-top: 10px; + font-size: 14px; +` + +const UnunitedCom: React.FC = () => { + const { t } = useTranslation() + return ( + <> + + {t('recommend')} + + {t('Connect the purse')} + + {t('each time')} + {t('last bid')} + {t('commission fee')} + + + ) +} +export default UnunitedCom diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx index 7d4c6f9..7542356 100644 --- a/src/views/recommend/index.tsx +++ b/src/views/recommend/index.tsx @@ -32,7 +32,7 @@ const ContengDiv = styled.div` } ` -const Recommend: React.FC = () => { +const Nft: React.FC = () => { // 邀请false普通邀请 true军团长邀请 const [type, typeState] = useState(false) // 是否连接钱包 @@ -44,4 +44,4 @@ const Recommend: React.FC = () => { ) } -export default Recommend +export default Nft From 7fbd3cd68f076cc6550d858096113ea08a3b1acd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=9A?= <1185064170@qq.com> Date: Wed, 20 Apr 2022 09:16:04 +0000 Subject: [PATCH 09/10] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=20src/views/r?= =?UTF-8?q?ecommend=20=E4=B8=BA=20src/views/Recommend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/{recommend => Recommend}/components/BuyNftModal.tsx | 0 src/views/{recommend => Recommend}/components/Connected.tsx | 0 src/views/{recommend => Recommend}/components/FlexCom.tsx | 0 src/views/{recommend => Recommend}/components/HeaderMain.tsx | 0 src/views/{recommend => Recommend}/components/Regimental.tsx | 0 src/views/{recommend => Recommend}/components/TextFlex.tsx | 0 src/views/{recommend => Recommend}/components/UnunitedCom.tsx | 0 src/views/{recommend => Recommend}/index.tsx | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename src/views/{recommend => Recommend}/components/BuyNftModal.tsx (100%) rename src/views/{recommend => Recommend}/components/Connected.tsx (100%) rename src/views/{recommend => Recommend}/components/FlexCom.tsx (100%) rename src/views/{recommend => Recommend}/components/HeaderMain.tsx (100%) rename src/views/{recommend => Recommend}/components/Regimental.tsx (100%) rename src/views/{recommend => Recommend}/components/TextFlex.tsx (100%) rename src/views/{recommend => Recommend}/components/UnunitedCom.tsx (100%) rename src/views/{recommend => Recommend}/index.tsx (100%) diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/Recommend/components/BuyNftModal.tsx similarity index 100% rename from src/views/recommend/components/BuyNftModal.tsx rename to src/views/Recommend/components/BuyNftModal.tsx diff --git a/src/views/recommend/components/Connected.tsx b/src/views/Recommend/components/Connected.tsx similarity index 100% rename from src/views/recommend/components/Connected.tsx rename to src/views/Recommend/components/Connected.tsx diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/Recommend/components/FlexCom.tsx similarity index 100% rename from src/views/recommend/components/FlexCom.tsx rename to src/views/Recommend/components/FlexCom.tsx diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/Recommend/components/HeaderMain.tsx similarity index 100% rename from src/views/recommend/components/HeaderMain.tsx rename to src/views/Recommend/components/HeaderMain.tsx diff --git a/src/views/recommend/components/Regimental.tsx b/src/views/Recommend/components/Regimental.tsx similarity index 100% rename from src/views/recommend/components/Regimental.tsx rename to src/views/Recommend/components/Regimental.tsx diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/Recommend/components/TextFlex.tsx similarity index 100% rename from src/views/recommend/components/TextFlex.tsx rename to src/views/Recommend/components/TextFlex.tsx diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/Recommend/components/UnunitedCom.tsx similarity index 100% rename from src/views/recommend/components/UnunitedCom.tsx rename to src/views/Recommend/components/UnunitedCom.tsx diff --git a/src/views/recommend/index.tsx b/src/views/Recommend/index.tsx similarity index 100% rename from src/views/recommend/index.tsx rename to src/views/Recommend/index.tsx From 554436067b12b0cb6e8e067d6c278a55e43bfa16 Mon Sep 17 00:00:00 2001 From: myf <> Date: Wed, 20 Apr 2022 18:13:52 +0800 Subject: [PATCH 10/10] stepper --- src/views/Home/components/CourseCom.tsx | 104 +++--------------- src/views/Home/components/FristCom.tsx | 6 +- src/views/Home/components/IntroduceCom.tsx | 11 +- src/views/Recommend/components/Connected.tsx | 4 +- src/views/Recommend/components/HeaderMain.tsx | 4 +- src/views/Recommend/components/Regimental.tsx | 10 +- src/views/Recommend/index.tsx | 8 +- 7 files changed, 37 insertions(+), 110 deletions(-) diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index c01f851..447d4b8 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { Flex, Heading, Text, Box } from '@pancakeswap/uikit' +import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' -const FristPage = styled.div` +const FirstPage = styled.div` background-image: url('/images/home/three.svg'); background-size: 100%; background-repeat: no-repeat; + padding: 100px 0 50px 0; ` const StyledPage = styled(Box)` @@ -36,80 +37,9 @@ const FlexMain = styled(Flex)` justify-content: center; } ` -const SortDiv = styled.div` - height: 190px; - position: relative; - ${({ theme }) => theme.mediaQueries.xs} { - height: 330px; - & > .card-content { - left: 20px; - width: 300px; - } - } - - ${({ theme }) => theme.mediaQueries.lg} { - height: 190px; - :nth-of-type(odd) { - & > .card-content { - width: 372px; - left: 60px; - } - } - - :nth-of-type(even) { - & > .card-content { - width: 372px; - left: -420px; - } - } - } -` - -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; - - ${({ theme }) => theme.mediaQueries.xs} { - position: absolute; - width: 40px; - height: 40px; - font-size: 26px; - top: 0; - left: -23px; - } - - ${({ theme }) => theme.mediaQueries.lg} { - position: absolute; - width: 82px; - height: 82px; - font-size: 46px; - top: 0; - left: -43px; - } -` - -const CardDiv = styled.div` - width: 372px; - box-sizing: border-box; - padding: 28px 40px 16px 26px; - border: 1px solid #e7e3eb; - box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); - border-radius: 25px; - position: absolute; - top: -25%; - background: #fff; +const CardDiv = styled(Card)` + padding: 20px; ` const CourseCom: React.FC = () => { @@ -121,7 +51,7 @@ const CourseCom: React.FC = () => { id: 1, list: [ { text: t('The project concept was born in May 2021') }, - { text: t('Set up HighClty team in June 2021') }, + { text: t('Set up HighCity team in June 2021') }, { text: t('May 2021 -- January 2022 Team run-in') }, ], }, @@ -163,18 +93,14 @@ const CourseCom: React.FC = () => { return ( <> - +
- {list.map((item, index) => { - return ( - - {index + 1} - + + {list.map((item, index) => ( + + {item.title} {item.list.map((childItem) => { return ( @@ -184,13 +110,13 @@ const CourseCom: React.FC = () => { ) })} - - ) - })} + + ))} +
- + ) } diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx index 7e0a51c..589d8fa 100644 --- a/src/views/Home/components/FristCom.tsx +++ b/src/views/Home/components/FristCom.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'contexts/Localization' import FlexItemCom from './FlexItemCom' -const FristPage = styled.div` +const FirstPage = styled.div` background-image: url('/images/home/bg.svg'); background-size: cover; background-repeat: no-repeat; @@ -133,7 +133,7 @@ const FristCom: React.FC = () => { ]) return ( <> - + @@ -160,7 +160,7 @@ const FristCom: React.FC = () => { })} - + ) } diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 61dd480..60a2e80 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -3,8 +3,9 @@ import styled from 'styled-components' import { Heading, Text, Box, Image } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' -const FristPage = styled.div` +const FirstPage = styled.div` background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%); + padding: 100px 0 50px 0; ` const StyledPage = styled(Box)` @@ -94,7 +95,7 @@ const IntroduceCom: React.FC = () => { return ( <> - + @@ -102,11 +103,11 @@ const IntroduceCom: React.FC = () => { - HlighCitySwap - {t('HlighCitySwapInfo')} + HighCitySwap + {t('HighCitySwapInfo')} - + ) } diff --git a/src/views/Recommend/components/Connected.tsx b/src/views/Recommend/components/Connected.tsx index 80c8dff..5a4550f 100644 --- a/src/views/Recommend/components/Connected.tsx +++ b/src/views/Recommend/components/Connected.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'contexts/Localization' import { Button, useModal, Text } from '@pancakeswap/uikit' import FlexCom from './FlexCom' import BuyNftModal from './BuyNftModal' -import HeaderMian from './HeaderMain' +import HeaderMain from './HeaderMain' const ButtonDiv = styled(Button)` width: 100%; @@ -44,7 +44,7 @@ const ConnectedCom: React.FC = () => { return ( - + <> diff --git a/src/views/Recommend/components/HeaderMain.tsx b/src/views/Recommend/components/HeaderMain.tsx index af0f007..43119fa 100644 --- a/src/views/Recommend/components/HeaderMain.tsx +++ b/src/views/Recommend/components/HeaderMain.tsx @@ -17,11 +17,11 @@ const TipDiv = styled(Image)` top: 24px; left: 0; ` -const HeaderMian: React.FC = ({ title }) => { +const HeaderMain: React.FC = ({ title }) => { return ( {title} ) } -export default HeaderMian +export default HeaderMain diff --git a/src/views/Recommend/components/Regimental.tsx b/src/views/Recommend/components/Regimental.tsx index c619df8..dabd677 100644 --- a/src/views/Recommend/components/Regimental.tsx +++ b/src/views/Recommend/components/Regimental.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' import { Text, Image, Button } from '@pancakeswap/uikit' import FlexCom from './FlexCom' -import HeaderMian from './HeaderMain' +import HeaderMain from './HeaderMain' const ButtonDiv = styled(Button)` width: 100%; @@ -27,7 +27,7 @@ const FooterBtn = styled.div` padding-bottom: 20px; ` -const ContengDiv = styled.div` +const ContentDiv = styled.div` width: 60%; background: rgba(255, 255, 255, 0.39); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); @@ -66,9 +66,9 @@ const LogoImage = styled.div` const RegimentalCom: React.FC = () => { const { t } = useTranslation() return ( - + - + @@ -102,7 +102,7 @@ const RegimentalCom: React.FC = () => { {t('commission fee')} - + ) } export default RegimentalCom diff --git a/src/views/Recommend/index.tsx b/src/views/Recommend/index.tsx index 7542356..c833535 100644 --- a/src/views/Recommend/index.tsx +++ b/src/views/Recommend/index.tsx @@ -14,7 +14,7 @@ const MainDiv = styled.div` justify-content: center; ` -const ContengDiv = styled.div` +const ContentDiv = styled.div` width: 60%; background: rgba(255, 255, 255, 0.39); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); @@ -34,13 +34,13 @@ const ContengDiv = styled.div` const Nft: React.FC = () => { // 邀请false普通邀请 true军团长邀请 - const [type, typeState] = useState(false) + const [type, setType] = useState(false) // 是否连接钱包 - const [status, statusState] = useState(true) + const [status, setStatus] = useState(true) return ( - {type ? : {status ? : }} + {type ? : {status ? : }} ) }