zhangshu
/
hiCity-nft
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nfts

This commit is contained in:
myf 2022-04-14 22:15:15 +08:00
parent 9f77375e55
commit f4023e6cb6
3 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/Nft/component/FlexText.tsx Normal file
View File

@ -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>
)
}

27
src/views/Nft/component/StepCom.tsx Normal file
View File

@ -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>
)
}

60
src/views/Nft/index.tsx
View File

@ -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>