From 136088ce8da7d6f045d6dbf3df04c199a4e24c8f Mon Sep 17 00:00:00 2001 From: myf <> Date: Wed, 20 Apr 2022 16:22:44 +0800 Subject: [PATCH] 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