nfts
This commit is contained in:
myf
parent
9f77375e55
commit
f4023e6cb6
|
|
@ -0,0 +1,17 @@
|
|||
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'
|
||||
|
||||
export default function FlexText({name,value}){
|
||||
|
||||
return(
|
||||
<Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
|
||||
<Text color='#6B6472' fontSize="14px">{ name }：</Text>
|
||||
<Text color='#1FC7D4' fontSize="14px">{ value }</Text>
|
||||
</Flex>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
export default function StepCom(){
|
||||
|
||||
const [valNumber, setInputState] = useState(1)
|
||||
|
||||
const onAdd = (type) => {
|
||||
if (type === 'add') {
|
||||
setInputState(valNumber + 1)
|
||||
} else {
|
||||
if (valNumber === 0) return
|
||||
setInputState(valNumber - 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return(
|
||||
<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>
|
||||
)
|
||||
|
||||
}
|
||||
|
|
@ -5,6 +5,12 @@ import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
|
|||
import { Swiper, SwiperSlide } from 'swiper/react'
|
||||
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
|
||||
|
||||
|
||||
import FlexText from './component/FlexText'
|
||||
// import Step from './component/Step'
|
||||
|
||||
import StepCom from './component/StepCom'
|
||||
|
||||
import 'swiper/swiper.min.css'
|
||||
|
||||
import 'swiper/components/pagination/pagination.min.css';
|
||||
|
|
@ -75,11 +81,8 @@ const Divs = styled.div`
|
|||
background: ${({ theme }) => theme.colors.gradients.bubblegum};
|
||||
`
|
||||
|
||||
const DetailInfo = styled.div`
|
||||
const DetailInfo = styled(Flex)`
|
||||
padding:0 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:24px;
|
||||
`
|
||||
|
||||
|
|
@ -105,17 +108,7 @@ const SwiperDiv = styled(Swiper)`
|
|||
|
||||
|
||||
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>
|
||||
|
|
@ -132,37 +125,24 @@ const Nft: React.FC = () => {
|
|||
<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 justifyContent='space-between' alignItems='center'>
|
||||
<Text color='textSubtle'>系列</Text>
|
||||
<Text color='text'>法式盛宴</Text>
|
||||
</DetailInfo>
|
||||
<DetailInfo>
|
||||
<Text color='#999' fontSize="18px">价格</Text>
|
||||
<Flex alignItems='center'>
|
||||
<DetailInfo justifyContent='space-between' alignItems='center'>
|
||||
<Text color='textSubtle'>价格</Text>
|
||||
<Flex alignItems='center' justifyContent="flex-end">
|
||||
<Text color='#1FC7D4' fontSize="24px">500</Text>
|
||||
<Text color='#2F3748' fontSize="16px">黄油</Text>
|
||||
<Text color='text'>黄油</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 justifyContent='space-between' alignItems='center'>
|
||||
<Text color='textSubtle'>数量</Text>
|
||||
<StepCom />
|
||||
</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>
|
||||
<FlexText name="钱包中的 BUTTER" value="0" />
|
||||
<FlexText name="回收点数抵扣" value="0" />
|
||||
<FlexText name="实际黄油成本" value="0" />
|
||||
</BodyWrapper>
|
||||
</Divs>
|
||||
</StyledPage>
|
||||
|
|
|
|||
Loading…
Reference in New Issue