nft
This commit is contained in:
xiaomage
parent
bb561b4453
commit
9f77375e55
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 916 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -48,6 +48,7 @@ const Pool = lazy(() => import('./views/Pool'))
|
|||
const PoolFinder = lazy(() => import('./views/PoolFinder'))
|
||||
const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
|
||||
const Referral = lazy(() => import('./views/Referral'))
|
||||
const Nft = lazy(() => import('./views/Nft'))
|
||||
|
||||
// This config is required for number formatting
|
||||
BigNumber.config({
|
||||
|
|
@ -89,6 +90,9 @@ const App: React.FC = () => {
|
|||
<Route path="/referral">
|
||||
<Referral />
|
||||
</Route>
|
||||
<Route path="/nft">
|
||||
<Nft />
|
||||
</Route>
|
||||
{/* <Route path="/lottery">
|
||||
<Lottery />
|
||||
</Route>
|
||||
|
|
@ -138,6 +142,7 @@ const App: React.FC = () => {
|
|||
<Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
|
||||
<Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
|
||||
<Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
|
||||
<Route exact strict path="/nft" component={Nft} />
|
||||
|
||||
{/* Redirect */}
|
||||
{/* <Route path="/staking">
|
||||
|
|
|
|||
|
|
@ -40,6 +40,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
|||
icon: 'PoolIcon',
|
||||
href: '/referral',
|
||||
},
|
||||
{
|
||||
label: 'NFT',
|
||||
icon: 'TicketIcon',
|
||||
href: '/nft'
|
||||
},
|
||||
// {
|
||||
// label: t('Prediction (BETA)'),
|
||||
// icon: 'PredictionsIcon',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
// import SearchInput from 'components/SearchInput'
|
||||
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
import 'swiper/swiper.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};
|
||||
`
|
||||
|
||||
const StyledPage = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.sm} {
|
||||
padding: 24px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
padding-top: 32px;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
const BodyWrapper = styled(Card)`
|
||||
border-radius: 24px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
overflow:visible;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const HindDiv = styled.div`
|
||||
width:32px;
|
||||
position: absolute;
|
||||
top:-40px;
|
||||
left:0;
|
||||
z-index:10
|
||||
`
|
||||
const BlindboxImage = styled(Image)`
|
||||
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};
|
||||
`
|
||||
|
||||
const DetailInfo = styled.div`
|
||||
padding:0 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:24px;
|
||||
`
|
||||
|
||||
const SwiperDiv = styled(Swiper)`
|
||||
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;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
const Nft: React.FC = () => {
|
||||
const [valNumber, setInputState] = useState(1)
|
||||
const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
|
||||
const onAdd = (type) => {
|
||||
if (type === 'add') {
|
||||
setInputState(valNumber + 1)
|
||||
} else {
|
||||
if (valNumber === 0) return
|
||||
setInputState(valNumber - 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<MainDiv>
|
||||
<SwiperDiv loop pagination={{ clickable: true }} spaceBetween={16} freeModeMomentumRatio={0.25} freeModeMomentumVelocityRatio={0.5}>
|
||||
{
|
||||
blindboxList.map((item) => {
|
||||
return <SwiperSlide key={item.id}>
|
||||
<StyledPage>
|
||||
<Divs>
|
||||
<BodyWrapper>
|
||||
<HindDiv>
|
||||
<Image src='/images/nft/hint.png' alt="" width={32} height={32} />
|
||||
</HindDiv>
|
||||
<Flex justifyContent='center' marginTop="-40px">
|
||||
<BlindboxImage src='/images/nft/blindbox.png' alt="" width={377} height={367} />
|
||||
</Flex>
|
||||
<DetailInfo>
|
||||
<Text color='#999' fontSize="18px">系列</Text>
|
||||
<Text color='#2F3748' fontSize="16px">法式盛宴</Text>
|
||||
</DetailInfo>
|
||||
<DetailInfo>
|
||||
<Text color='#999' fontSize="18px">价格</Text>
|
||||
<Flex alignItems='center'>
|
||||
<Text color='#1FC7D4' fontSize="24px">500</Text>
|
||||
<Text color='#2F3748' fontSize="16px">黄油</Text>
|
||||
</Flex>
|
||||
</DetailInfo>
|
||||
<DetailInfo>
|
||||
<Text color='#999' fontSize="18px">数量</Text>
|
||||
<Flex justifyContent="space-between" alignItems='center' width={120}>
|
||||
<Image src='/images/nft/sub-icon.png' alt="" onClick={() => onAdd('sub')} width={25} height={25} />
|
||||
<Text width={60} textAlign='center' color='#2F3748' fontSize="16px">{valNumber}</Text>
|
||||
<Image src='/images/nft/add-icon.png' alt="1" onClick={() => onAdd('add')} width={25} height={25} />
|
||||
</Flex>
|
||||
</DetailInfo>
|
||||
<Flex justifyContent="flex-end" alignItems='center' marginTop={12} padding="0 21px">
|
||||
<Text color='#6B6472' fontSize="14px">钱包中的 BUTTER：</Text>
|
||||
<Text color='#1FC7D4' fontSize="14px">0</Text>
|
||||
</Flex>
|
||||
<Flex justifyContent="flex-end" alignItems='center' marginTop={12} padding="0 21px">
|
||||
<Text color='#6B6472' fontSize="14px">回收点数抵扣：</Text>
|
||||
<Text color='#1FC7D4' fontSize="14px">0</Text>
|
||||
</Flex>
|
||||
<Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
|
||||
<Text color='#6B6472' fontSize="14px">实际黄油成本：</Text>
|
||||
<Text color='#1FC7D4' fontSize="14px">0</Text>
|
||||
</Flex>
|
||||
</BodyWrapper>
|
||||
</Divs>
|
||||
</StyledPage>
|
||||
</SwiperSlide>
|
||||
})
|
||||
}
|
||||
</SwiperDiv>
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
export default Nft
|
||||
Loading…
Reference in New Issue