NFT市场
This commit is contained in:
myf
parent
875e746564
commit
7ee24b7921
|
|
@ -5,11 +5,9 @@ import { Heading, Flex, Button, Text, Input, Image, useModal, Dropdown } from '@
|
|||
import { useAccount } from 'state/userInfo/hooks'
|
||||
import useRefresh from 'hooks/useRefresh'
|
||||
|
||||
import HeaderOperation from './HeaderOperation'
|
||||
import ContentShop from './ContentShop'
|
||||
import Transaction from './Transaction'
|
||||
import ShopList from './ShopList'
|
||||
import TransactionRecord from './TransactionRecord'
|
||||
import AuctionRecord from './AuctionRecord'
|
||||
import SellModal from './SellModal'
|
||||
import ShopDetail from './ShopDetail'
|
||||
|
||||
const HeaderFlex = styled(Flex)`
|
||||
|
|
@ -40,52 +38,6 @@ const TypeItem = styled(Flex)`
|
|||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
`
|
||||
const HeaderButton = styled(Button)`
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
border: 1px solid #1fc7d4;
|
||||
border-radius: 30px;
|
||||
font-size: 14px;
|
||||
color: #1fc7d4;
|
||||
background-color: #fff;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 10px;
|
||||
margin-right: 20px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
`
|
||||
const TransactionFlex = styled(Flex)`
|
||||
margin-top: 30px;
|
||||
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||
border-radius: 13px;
|
||||
padding: 30px 0px 40px 0px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`
|
||||
const TransactionItem = styled(Flex)`
|
||||
width: 25%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`
|
||||
const TransactionItemNum = styled(Text)`
|
||||
font-size: 38px;
|
||||
color: #ffffff;
|
||||
`
|
||||
const TransactionItemLabel = styled(Text)`
|
||||
font-size: 16px;
|
||||
color: #e4f8f7;
|
||||
`
|
||||
const Separate = styled.div`
|
||||
height: 44px;
|
||||
border-right: 1px solid #e4f8f7;
|
||||
`
|
||||
const StatusFlex = styled(Flex)`
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -149,53 +101,6 @@ const SearchBtn = styled.div`
|
|||
justify-content: center;
|
||||
`
|
||||
|
||||
const ShopMain = styled.div`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
grid-template-rows: 1fr;
|
||||
margin: 0px auto;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.md} {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
`
|
||||
const ShopFlex = styled(Flex)`
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const ShopName = styled(Text)`
|
||||
padding: 10px 0 14px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
`
|
||||
const ShopFooter = styled(Flex)`
|
||||
padding: 15px;
|
||||
justify-content: space-between;
|
||||
`
|
||||
const FooterLabel = styled(Text)`
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
`
|
||||
const FooterValue = styled(Text)`
|
||||
font-size: 16px;
|
||||
color: #1fc7d4;
|
||||
`
|
||||
const SelectFlex = styled(Flex)`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -263,9 +168,6 @@ const Content: React.FC = () => {
|
|||
setStatusIndex(index)
|
||||
}
|
||||
|
||||
const [onTransactionRecord] = useModal(<TransactionRecord />)
|
||||
const [onAuctionRecord] = useModal(<AuctionRecord />)
|
||||
const [onSellModal] = useModal(<SellModal />)
|
||||
const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { value: inputValue } = evt.target
|
||||
setSearchTitle(inputValue)
|
||||
|
|
@ -297,15 +199,8 @@ const Content: React.FC = () => {
|
|||
)
|
||||
})}
|
||||
</TypeFlex>
|
||||
<Flex alignContent="center">
|
||||
<HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
|
||||
{/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
|
||||
{typeIndex === 2 ? (
|
||||
<HeaderButton onClick={onAuctionRecord}>{t('Auctions a record')}</HeaderButton>
|
||||
) : (
|
||||
<HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<HeaderOperation activeIndex={typeIndex} />
|
||||
</HeaderFlex>
|
||||
<Transaction />
|
||||
<StatusFlex>
|
||||
|
|
@ -371,20 +266,7 @@ const Content: React.FC = () => {
|
|||
</SearchBtn>
|
||||
</InputMain>
|
||||
</SearchDiv>
|
||||
<ShopMain>
|
||||
{list.map((item) => {
|
||||
return (
|
||||
<ShopFlex key={item.id} onClick={showDetail}>
|
||||
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||
<ShopName>{item.label}</ShopName>
|
||||
<ShopFooter>
|
||||
<FooterLabel>{t('trading value')}</FooterLabel>
|
||||
<FooterValue>1000HCC</FooterValue>
|
||||
</ShopFooter>
|
||||
</ShopFlex>
|
||||
)
|
||||
})}
|
||||
</ShopMain>
|
||||
<ContentShop list={list} getDetail={showDetail} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import styled, { keyframes } from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Flex, Text } from '@pancakeswap/uikit'
|
||||
import { useAccount } from 'state/userInfo/hooks'
|
||||
import useRefresh from 'hooks/useRefresh'
|
||||
|
||||
import ShopList from './ShopList'
|
||||
|
||||
interface ContentShop {
|
||||
list?: any
|
||||
getDetail?: () => void
|
||||
}
|
||||
|
||||
const ShopMain = styled.div`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
grid-template-rows: 1fr;
|
||||
margin: 0px auto;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.md} {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
`
|
||||
const ShopFlex = styled(Flex)`
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.39);
|
||||
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||
opacity: 1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const ShopName = styled(Text)`
|
||||
padding: 10px 0 14px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
`
|
||||
const ShopFooter = styled(Flex)`
|
||||
padding: 15px;
|
||||
justify-content: space-between;
|
||||
`
|
||||
const FooterLabel = styled(Text)`
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
`
|
||||
const FooterValue = styled(Text)`
|
||||
font-size: 16px;
|
||||
color: #1fc7d4;
|
||||
`
|
||||
|
||||
const ContentShop: React.FC<ContentShop> = ({ list, getDetail }) => {
|
||||
const { t } = useTranslation()
|
||||
const showDetail = () => {
|
||||
getDetail()
|
||||
}
|
||||
|
||||
return (
|
||||
<ShopMain>
|
||||
{list.map((item) => {
|
||||
return (
|
||||
<ShopFlex key={item.id} onClick={showDetail}>
|
||||
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||
<ShopName>{item.label}</ShopName>
|
||||
<ShopFooter>
|
||||
<FooterLabel>{t('trading value')}</FooterLabel>
|
||||
<FooterValue>1000HCC</FooterValue>
|
||||
</ShopFooter>
|
||||
</ShopFlex>
|
||||
)
|
||||
})}
|
||||
</ShopMain>
|
||||
)
|
||||
}
|
||||
export default ContentShop
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import styled, { keyframes } from 'styled-components'
|
||||
import { useTranslation } from 'contexts/Localization'
|
||||
import { Flex, Button, Text, Input, Image, useModal, Dropdown } from '@pancakeswap/uikit'
|
||||
import { useAccount } from 'state/userInfo/hooks'
|
||||
import useRefresh from 'hooks/useRefresh'
|
||||
|
||||
import TransactionRecord from './TransactionRecord'
|
||||
import AuctionRecord from './AuctionRecord'
|
||||
import SellModal from './SellModal'
|
||||
|
||||
interface HeaderOperationProps {
|
||||
activeIndex?: number
|
||||
}
|
||||
|
||||
const HeaderButton = styled(Button)`
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
border: 1px solid #1fc7d4;
|
||||
border-radius: 30px;
|
||||
font-size: 14px;
|
||||
color: #1fc7d4;
|
||||
background-color: #fff;
|
||||
|
||||
${({ theme }) => theme.mediaQueries.xs} {
|
||||
margin-top: 10px;
|
||||
margin-right: 20px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
${({ theme }) => theme.mediaQueries.lg} {
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
`
|
||||
|
||||
const HeaderOperation: React.FC<HeaderOperationProps> = ({ activeIndex }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [onTransactionRecord] = useModal(<TransactionRecord />)
|
||||
const [onAuctionRecord] = useModal(<AuctionRecord />)
|
||||
const [onSellModal] = useModal(<SellModal />)
|
||||
|
||||
return (
|
||||
<Flex alignContent="center">
|
||||
<HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
|
||||
{/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
|
||||
{activeIndex === 2 ? (
|
||||
<HeaderButton onClick={onAuctionRecord}>{t('Auctions a record')}</HeaderButton>
|
||||
) : (
|
||||
<HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
|
||||
)}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
export default HeaderOperation
|
||||
Loading…
Reference in New Issue