NFT市场
This commit is contained in:
myf
parent
856aa630c9
commit
94e8cac8f7
|
|
@ -19,7 +19,7 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090'
|
REACT_APP_REQUEST_URL = 'http://192.253.237.94:9090'
|
||||||
# REACT_APP_REQUEST_URL = 'http://192.168.2.147:8080'
|
# REACT_APP_REQUEST_URL = 'http://192.168.2.147:8080'
|
||||||
REACT_APP_REQUEST_URL = 'http://192.168.2.176:8080'
|
# REACT_APP_REQUEST_URL = 'http://192.168.2.:8080'
|
||||||
# REACT_APP_REQUEST_URL = 'http://6o7g1fv83e.51xd.pub'
|
# REACT_APP_REQUEST_URL = 'http://6o7g1fv83e.51xd.pub'
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,6 @@
|
||||||
"@web3-react/core": "^6.1.9",
|
"@web3-react/core": "^6.1.9",
|
||||||
"@web3-react/injected-connector": "^6.0.7",
|
"@web3-react/injected-connector": "^6.0.7",
|
||||||
"@web3-react/walletconnect-connector": "6.2.4",
|
"@web3-react/walletconnect-connector": "6.2.4",
|
||||||
"ethereumjs-abi": "0.6.8",
|
|
||||||
"ajv": "^6.12.3",
|
"ajv": "^6.12.3",
|
||||||
"bignumber.js": "^9.0.0",
|
"bignumber.js": "^9.0.0",
|
||||||
"canvas-confetti": "^1.3.3",
|
"canvas-confetti": "^1.3.3",
|
||||||
|
|
@ -59,6 +58,7 @@
|
||||||
"date-fns": "^2.21.3",
|
"date-fns": "^2.21.3",
|
||||||
"dayjs": "^1.11.1",
|
"dayjs": "^1.11.1",
|
||||||
"easymde": "^2.15.0",
|
"easymde": "^2.15.0",
|
||||||
|
"ethereumjs-abi": "0.6.8",
|
||||||
"ethers": "^5.1.4",
|
"ethers": "^5.1.4",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0",
|
||||||
"graphql-request": "^3.4.0",
|
"graphql-request": "^3.4.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 621 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="添加" class="cls-1" d="M100.58,92.854a10,10,0,1,0,10,10,10,10,0,0,0-10-10Zm5.633,10.625H101.2v5.008a.625.625,0,0,1-1.25,0v-5.008H94.947a.625.625,0,0,1,0-1.25h5.008V97.22a.625.625,0,0,1,1.25,0v5.009h5.008a.625.625,0,0,1,0,1.25Zm0,0" transform="translate(-90.58 -92.854)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 474 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="11.075" height="6.471" viewBox="0 0 11.075 6.471">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="展开" class="cls-1" d="M71.634,70.36c.015.007.028.02.042.026a.685.685,0,0,0,.8-.139l4.816-5.093a.692.692,0,0,0-1.006-.952l-4.322,4.572-4.385-4.553a.691.691,0,0,0-1,.958l4.862,5.047c.009.008.024.012.033.023a.17.17,0,0,1,.019.023.6.6,0,0,0,.139.088Z" transform="translate(-66.405 -63.986)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 506 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #1fc7d4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="减少" class="cls-1" d="M95.333,105.333a10,10,0,1,0-10-10,10,10,0,0,0,10,10Zm-3.75-10.75h7.5a.75.75,0,0,1,0,1.5h-7.5a.75.75,0,0,1,0-1.5Z" transform="translate(-85.333 -85.333)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #1fc7d4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path id="分享" class="cls-1" d="M80.5,64A17.5,17.5,0,1,0,98,81.5,17.5,17.5,0,0,0,80.5,64ZM77.891,81.5a2.941,2.941,0,0,1-.227,1.129l4.813,3.207a2.866,2.866,0,0,1,1.66-.527A2.895,2.895,0,1,1,81.242,88.2a2.973,2.973,0,0,1,.074-.648l-5.133-3.422a2.895,2.895,0,1,1,0-5.273l5.133-3.422a2.946,2.946,0,0,1-.074-.648,2.895,2.895,0,1,1,2.895,2.895,2.866,2.866,0,0,1-1.66-.527l-4.813,3.207A3,3,0,0,1,77.891,81.5Z" transform="translate(-63 -64)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 632 B |
|
|
@ -1178,7 +1178,7 @@
|
||||||
"price": "价格",
|
"price": "价格",
|
||||||
"quantity": "数量",
|
"quantity": "数量",
|
||||||
"NFT": "NFT",
|
"NFT": "NFT",
|
||||||
"Stay tuned": "敬请关注",
|
"Coming Soon": "敬请关注",
|
||||||
"This page is not currently open": "此页面暂未开放",
|
"This page is not currently open": "此页面暂未开放",
|
||||||
"Viewing the Path Diagram": "查看路径图",
|
"Viewing the Path Diagram": "查看路径图",
|
||||||
"nft bazaar": "NFT 市场",
|
"nft bazaar": "NFT 市场",
|
||||||
|
|
@ -1212,5 +1212,14 @@
|
||||||
"No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "无变化：保留合成池内的原料NFT，但损失合成时的合成费用；",
|
"No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "无变化：保留合成池内的原料NFT，但损失合成时的合成费用；",
|
||||||
"Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "合成失败：损失合成池内的原料NFT及合成时的合成费用；",
|
"Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "合成失败：损失合成池内的原料NFT及合成时的合成费用；",
|
||||||
"compound probability:": "合成概率：",
|
"compound probability:": "合成概率：",
|
||||||
"NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "合成成功NFT名称（等级）=原料NFT名称（等级）×数量+合成费用"
|
"NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "合成成功NFT名称（等级）=原料NFT名称（等级）×数量+合成费用",
|
||||||
|
"bazaar": "市场",
|
||||||
|
"auction": "拍卖",
|
||||||
|
"I sell": "我的售卖",
|
||||||
|
"transaction record": "交易记录",
|
||||||
|
"The total volume": "总交易额",
|
||||||
|
"The total number of transactions": "总交易数",
|
||||||
|
"Total number of auctions": "总拍卖次数",
|
||||||
|
"Total auction commission": "总拍卖返佣",
|
||||||
|
"trading value": "出售价格"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { Spinner } from '@pancakeswap/uikit'
|
import { Spinner, Image } from '@pancakeswap/uikit'
|
||||||
import Page from '../Layout/Page'
|
import Page from '../Layout/Page'
|
||||||
|
|
||||||
const Wrapper = styled(Page)`
|
const Wrapper = styled(Page)`
|
||||||
|
|
@ -12,7 +12,8 @@ const Wrapper = styled(Page)`
|
||||||
const PageLoader: React.FC = () => {
|
const PageLoader: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Spinner />
|
<Image src="/images/loading.gif" width={568} height={320} />
|
||||||
|
{/* <Spinner /> */}
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
||||||
icon: 'HomeIcon',
|
icon: 'HomeIcon',
|
||||||
href: '/',
|
href: '/',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: t('IDO Exchange'),
|
||||||
|
icon: 'FarmIcon',
|
||||||
|
href: '/Ido',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: t('nft box'),
|
label: t('nft box'),
|
||||||
icon: 'NFTBox',
|
icon: 'NFTBox',
|
||||||
|
|
@ -54,11 +59,6 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
|
||||||
// // },
|
// // },
|
||||||
// ],
|
// ],
|
||||||
// },
|
// },
|
||||||
{
|
|
||||||
label: t('IDO Exchange'),
|
|
||||||
icon: 'FarmIcon',
|
|
||||||
href: '/Ido',
|
|
||||||
},
|
|
||||||
// {
|
// {
|
||||||
// label: t('Exchange'),
|
// label: t('Exchange'),
|
||||||
// icon: 'FarmIcon',
|
// icon: 'FarmIcon',
|
||||||
|
|
|
||||||
|
|
@ -65,9 +65,9 @@ const UnOpenModel: React.FC = () => {
|
||||||
<Model />
|
<Model />
|
||||||
<ModelFlex>
|
<ModelFlex>
|
||||||
<ModelDiv>
|
<ModelDiv>
|
||||||
<HeaderText>{t('Stay tuned')}</HeaderText>
|
<HeaderText>{t('Coming Soon')}</HeaderText>
|
||||||
<TipText>{t('This page is not currently open')}</TipText>
|
<TipText>{t('This page is not currently open')}</TipText>
|
||||||
<BtnText href="/">{t('Viewing the Path Diagram')}</BtnText>
|
<BtnText href="/?scrollTo=scrollTo">{t('Viewing the Path Diagram')}</BtnText>
|
||||||
</ModelDiv>
|
</ModelDiv>
|
||||||
</ModelFlex>
|
</ModelFlex>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,11 @@
|
||||||
import { Language } from '@pancakeswap/uikit'
|
import { Language } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
export const AR: Language = { locale: 'ar-SA', language: 'العربية', code: 'ar' }
|
|
||||||
export const BN: Language = { locale: 'bn-BD', language: 'বাংলা', code: 'bn' }
|
|
||||||
export const EN: Language = { locale: 'en-US', language: 'English', code: 'en' }
|
export const EN: Language = { locale: 'en-US', language: 'English', code: 'en' }
|
||||||
export const DE: Language = { locale: 'de-DE', language: 'Deutsch', code: 'de' }
|
|
||||||
export const EL: Language = { locale: 'el-GR', language: 'Ελληνικά', code: 'el' }
|
|
||||||
export const ESES: Language = { locale: 'es-ES', language: 'Español', code: 'es-ES' }
|
|
||||||
export const FI: Language = { locale: 'fi-FI', language: 'Suomalainen', code: 'fi' }
|
|
||||||
export const FIL: Language = { locale: 'fil-PH', language: 'Filipino', code: 'fil' }
|
|
||||||
export const FR: Language = { locale: 'fr-FR', language: 'Français', code: 'fr' }
|
|
||||||
export const HI: Language = { locale: 'hi-IN', language: 'हिंदी', code: 'hi' }
|
|
||||||
export const HU: Language = { locale: 'hu-HU', language: 'Magyar', code: 'hu' }
|
|
||||||
export const ID: Language = { locale: 'id-ID', language: 'Bahasa Indonesia', code: 'id' }
|
|
||||||
export const IT: Language = { locale: 'it-IT', language: 'Italiano', code: 'it' }
|
|
||||||
export const JA: Language = { locale: 'ja-JP', language: '日本語', code: 'ja' }
|
|
||||||
export const KO: Language = { locale: 'ko-KR', language: '한국어', code: 'ko' }
|
|
||||||
export const NL: Language = { locale: 'nl-NL', language: 'Nederlands', code: 'nl' }
|
|
||||||
export const PL: Language = { locale: 'pl-PL', language: 'Polski', code: 'pl' }
|
|
||||||
export const PTBR: Language = { locale: 'pt-BR', language: 'Português (Brazil)', code: 'pt-br' }
|
|
||||||
export const PTPT: Language = { locale: 'pt-PT', language: 'Português', code: 'pt-pt' }
|
|
||||||
export const RO: Language = { locale: 'ro-RO', language: 'Română', code: 'ro' }
|
|
||||||
export const RU: Language = { locale: 'ru-RU', language: 'Русский', code: 'ru' }
|
|
||||||
export const SVSE: Language = { locale: 'sv-SE', language: 'Svenska', code: 'sv' }
|
|
||||||
export const TA: Language = { locale: 'ta-IN', language: 'தமிழ்', code: 'ta' }
|
|
||||||
export const TR: Language = { locale: 'tr-TR', language: 'Türkçe', code: 'tr' }
|
|
||||||
export const UK: Language = { locale: 'uk-UA', language: 'Українська', code: 'uk' }
|
|
||||||
export const VI: Language = { locale: 'vi-VN', language: 'Tiếng Việt', code: 'vi' }
|
|
||||||
export const ZHCN: Language = { locale: 'zh-CN', language: '简体中文', code: 'zh-cn' }
|
export const ZHCN: Language = { locale: 'zh-CN', language: '简体中文', code: 'zh-cn' }
|
||||||
export const ZHTW: Language = { locale: 'zh-TW', language: '繁體中文', code: 'zh-tw' }
|
|
||||||
|
|
||||||
export const languages = {
|
export const languages = {
|
||||||
'ar-SA': AR,
|
|
||||||
'bn-BD': BN,
|
|
||||||
'en-US': EN,
|
'en-US': EN,
|
||||||
'de-DE': DE,
|
|
||||||
'el-GR': EL,
|
|
||||||
'es-ES': ESES,
|
|
||||||
'fi-FI': FI,
|
|
||||||
'fil-PH': FIL,
|
|
||||||
'fr-FR': FR,
|
|
||||||
'hi-IN': HI,
|
|
||||||
'hu-HU': HU,
|
|
||||||
'id-ID': ID,
|
|
||||||
'it-IT': IT,
|
|
||||||
'ja-JP': JA,
|
|
||||||
'ko-KR': KO,
|
|
||||||
'nl-NL': NL,
|
|
||||||
'pl-PL': PL,
|
|
||||||
'pt-BR': PTBR,
|
|
||||||
'pt-PT': PTPT,
|
|
||||||
'ro-RO': RO,
|
|
||||||
'ru-RU': RU,
|
|
||||||
'sv-SE': SVSE,
|
|
||||||
'ta-IN': TA,
|
|
||||||
'tr-TR': TR,
|
|
||||||
'uk-UA': UK,
|
|
||||||
'vi-VN': VI,
|
|
||||||
'zh-CN': ZHCN,
|
'zh-CN': ZHCN,
|
||||||
'zh-TW': ZHTW,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const languageList = Object.values(languages)
|
export const languageList = Object.values(languages)
|
||||||
|
|
|
||||||
|
|
@ -1213,7 +1213,7 @@
|
||||||
"First stage sharing ratio": "First stage sharing ratio",
|
"First stage sharing ratio": "First stage sharing ratio",
|
||||||
"Secondary split ratio": "Secondary split ratio",
|
"Secondary split ratio": "Secondary split ratio",
|
||||||
"Buy It Now": "Buy It Now",
|
"Buy It Now": "Buy It Now",
|
||||||
"recommend": "recommend",
|
"recommend": "Recommend",
|
||||||
"The lower the number of": "The lower the number of",
|
"The lower the number of": "The lower the number of",
|
||||||
"NFT total revenue": "NFT total revenue",
|
"NFT total revenue": "NFT total revenue",
|
||||||
"HCC total revenue": "HCC total revenue",
|
"HCC total revenue": "HCC total revenue",
|
||||||
|
|
@ -1233,7 +1233,7 @@
|
||||||
"each time": "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
|
"each time": "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
|
||||||
"last bid": "2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
|
"last bid": "2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
|
||||||
"commission fee": "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
|
"commission fee": "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
|
||||||
"announcement": "announcement",
|
"announcement": "Announcement",
|
||||||
"return": "return",
|
"return": "return",
|
||||||
"Total capital pool": "Total capital pool",
|
"Total capital pool": "Total capital pool",
|
||||||
"The total amount of dividends": "The total amount of dividends",
|
"The total amount of dividends": "The total amount of dividends",
|
||||||
|
|
@ -1252,7 +1252,7 @@
|
||||||
"HCC Currency amount": "HCC Currency amount",
|
"HCC Currency amount": "HCC Currency amount",
|
||||||
"Lock up time": "Lock up time",
|
"Lock up time": "Lock up time",
|
||||||
"possess LP": "possess LP",
|
"possess LP": "possess LP",
|
||||||
"capital pool": "capital pool",
|
"capital pool": "Capital Pool",
|
||||||
"Unclaimed income": "Unclaimed income",
|
"Unclaimed income": "Unclaimed income",
|
||||||
"pledge": "pledge",
|
"pledge": "pledge",
|
||||||
"top": "top",
|
"top": "top",
|
||||||
|
|
@ -1287,9 +1287,9 @@
|
||||||
"amount": "amount",
|
"amount": "amount",
|
||||||
"Change the end": "Change the end",
|
"Change the end": "Change the end",
|
||||||
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase",
|
"After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase": "After purchase, it is expected to be available for collection in %time% time. Do you confirm the purchase",
|
||||||
"Blind box": "Blind box",
|
"Blind box": "Blind Box",
|
||||||
"nft box": "NFT box",
|
"nft box": "NFT Box",
|
||||||
"nft compound": "NFT compound",
|
"nft compound": "NFT Compound",
|
||||||
"All": "All",
|
"All": "All",
|
||||||
"total quantity": "total quantity",
|
"total quantity": "total quantity",
|
||||||
"With the number": "With the number",
|
"With the number": "With the number",
|
||||||
|
|
@ -1305,10 +1305,10 @@
|
||||||
"price": "price",
|
"price": "price",
|
||||||
"quantity": "quantity",
|
"quantity": "quantity",
|
||||||
"NFT": "NFT",
|
"NFT": "NFT",
|
||||||
"Stay tuned": "Stay tuned",
|
"Coming Soon": "Coming Soon",
|
||||||
"This page is not currently open": "This page is not currently open",
|
"This page is not currently open": "This page is not currently open",
|
||||||
"Viewing the Path Diagram": "Viewing the Path Diagram",
|
"Viewing the Path Diagram": "Viewing the Path Diagram",
|
||||||
"nft bazaar": "nft bazaar",
|
"nft bazaar": "NFT Bazaar",
|
||||||
"already received": "already received",
|
"already received": "already received",
|
||||||
"help center": "help",
|
"help center": "help",
|
||||||
"social contact demo": "social contact demo",
|
"social contact demo": "social contact demo",
|
||||||
|
|
@ -1339,5 +1339,14 @@
|
||||||
"No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;",
|
"No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;": "No change: keep the NFT of raw material in the synthesis tank, but lose the synthesis cost;",
|
||||||
"Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;",
|
"Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;": "Synthesis failure: loss of raw material NFT in the synthesis tank and the synthesis cost during synthesis;",
|
||||||
"compound probability:": "compound probability:",
|
"compound probability:": "compound probability:",
|
||||||
"NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost"
|
"NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost": "NFT name (grade) of successful synthesis = NFT name (grade) of raw material x quantity + synthesis cost",
|
||||||
|
"bazaar": "bazaar",
|
||||||
|
"auction": "auction",
|
||||||
|
"I sell": "I sell",
|
||||||
|
"transaction record": "transaction record",
|
||||||
|
"The total volume": "The total volume",
|
||||||
|
"The total number of transactions": "The total number of transactions",
|
||||||
|
"Total number of auctions": "Total number of auctions",
|
||||||
|
"Total auction commission": "Total auction commission",
|
||||||
|
"trading value": "trading value"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import dayjs from 'dayjs'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
|
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
|
||||||
|
import './quill.snow.css'
|
||||||
|
|
||||||
interface ListProps {
|
interface ListProps {
|
||||||
title?: string
|
title?: string
|
||||||
|
|
@ -66,11 +67,10 @@ const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) =>
|
||||||
<HeadingText scale="xl">{title}</HeadingText>
|
<HeadingText scale="xl">{title}</HeadingText>
|
||||||
<TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
|
<TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
|
||||||
{/* <TextInfo dangerouslySetInnerHTML={content} /> */}
|
{/* <TextInfo dangerouslySetInnerHTML={content} /> */}
|
||||||
<TextInfo
|
|
||||||
dangerouslySetInnerHTML={{
|
<div className="ql-snow">
|
||||||
__html: content,
|
<TextInfo className="ql-editor" dangerouslySetInnerHTML={{ __html: content }} />
|
||||||
}}
|
</div>
|
||||||
/>
|
|
||||||
</DetailDiv>
|
</DetailDiv>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,945 @@
|
||||||
|
/*!
|
||||||
|
* Quill Editor v1.3.7
|
||||||
|
* https://quilljs.com/
|
||||||
|
* Copyright (c) 2014, Jason Chen
|
||||||
|
* Copyright (c) 2013, salesforce.com
|
||||||
|
*/
|
||||||
|
.ql-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ql-container.ql-disabled .ql-tooltip {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ql-clipboard {
|
||||||
|
left: -100000px;
|
||||||
|
height: 1px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
.ql-clipboard p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.ql-editor {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 1.42;
|
||||||
|
height: 100%;
|
||||||
|
outline: none;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 12px 15px;
|
||||||
|
tab-size: 4;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.ql-editor > * {
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
.ql-editor p,
|
||||||
|
.ql-editor ol,
|
||||||
|
.ql-editor ul,
|
||||||
|
.ql-editor pre,
|
||||||
|
.ql-editor blockquote,
|
||||||
|
.ql-editor h1,
|
||||||
|
.ql-editor h2,
|
||||||
|
.ql-editor h3,
|
||||||
|
.ql-editor h4,
|
||||||
|
.ql-editor h5,
|
||||||
|
.ql-editor h6 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol,
|
||||||
|
.ql-editor ul {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol > li,
|
||||||
|
.ql-editor ul > li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.ql-editor ul > li::before {
|
||||||
|
content: '\2022';
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true],
|
||||||
|
.ql-editor ul[data-checked=false] {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true] > li *,
|
||||||
|
.ql-editor ul[data-checked=false] > li * {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true] > li::before,
|
||||||
|
.ql-editor ul[data-checked=false] > li::before {
|
||||||
|
color: #777;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=true] > li::before {
|
||||||
|
content: '\2611';
|
||||||
|
}
|
||||||
|
.ql-editor ul[data-checked=false] > li::before {
|
||||||
|
content: '\2610';
|
||||||
|
}
|
||||||
|
.ql-editor li::before {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1.2em;
|
||||||
|
}
|
||||||
|
.ql-editor li:not(.ql-direction-rtl)::before {
|
||||||
|
margin-left: -1.5em;
|
||||||
|
margin-right: 0.3em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-direction-rtl::before {
|
||||||
|
margin-left: 0.3em;
|
||||||
|
margin-right: -1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol li:not(.ql-direction-rtl),
|
||||||
|
.ql-editor ul li:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-direction-rtl,
|
||||||
|
.ql-editor ul li.ql-direction-rtl {
|
||||||
|
padding-right: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor ol li {
|
||||||
|
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
counter-increment: list-0;
|
||||||
|
}
|
||||||
|
.ql-editor ol li:before {
|
||||||
|
content: counter(list-0, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-1 {
|
||||||
|
counter-increment: list-1;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-1:before {
|
||||||
|
content: counter(list-1, lower-alpha) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-1 {
|
||||||
|
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-2 {
|
||||||
|
counter-increment: list-2;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-2:before {
|
||||||
|
content: counter(list-2, lower-roman) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-2 {
|
||||||
|
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-3 {
|
||||||
|
counter-increment: list-3;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-3:before {
|
||||||
|
content: counter(list-3, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-3 {
|
||||||
|
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-4 {
|
||||||
|
counter-increment: list-4;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-4:before {
|
||||||
|
content: counter(list-4, lower-alpha) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-4 {
|
||||||
|
counter-reset: list-5 list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-5 {
|
||||||
|
counter-increment: list-5;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-5:before {
|
||||||
|
content: counter(list-5, lower-roman) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-5 {
|
||||||
|
counter-reset: list-6 list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-6 {
|
||||||
|
counter-increment: list-6;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-6:before {
|
||||||
|
content: counter(list-6, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-6 {
|
||||||
|
counter-reset: list-7 list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-7 {
|
||||||
|
counter-increment: list-7;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-7:before {
|
||||||
|
content: counter(list-7, lower-alpha) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-7 {
|
||||||
|
counter-reset: list-8 list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-8 {
|
||||||
|
counter-increment: list-8;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-8:before {
|
||||||
|
content: counter(list-8, lower-roman) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-8 {
|
||||||
|
counter-reset: list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-9 {
|
||||||
|
counter-increment: list-9;
|
||||||
|
}
|
||||||
|
.ql-editor ol li.ql-indent-9:before {
|
||||||
|
content: counter(list-9, decimal) '. ';
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 3em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 4.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 3em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 4.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 6em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 7.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 6em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 7.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 9em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 10.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 9em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 10.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 12em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 13.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 12em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 13.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 15em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 16.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 15em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 16.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 18em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 19.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 18em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 19.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 21em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 22.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 21em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 22.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 24em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 25.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 24em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 25.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 27em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
|
||||||
|
padding-left: 28.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 27em;
|
||||||
|
}
|
||||||
|
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||||
|
padding-right: 28.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-video.ql-align-center {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-video.ql-align-right {
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-black {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-red {
|
||||||
|
background-color: #e60000;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-orange {
|
||||||
|
background-color: #f90;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-yellow {
|
||||||
|
background-color: #ff0;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-green {
|
||||||
|
background-color: #008a00;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-blue {
|
||||||
|
background-color: #06c;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-bg-purple {
|
||||||
|
background-color: #93f;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-white {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-red {
|
||||||
|
color: #e60000;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-orange {
|
||||||
|
color: #f90;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-yellow {
|
||||||
|
color: #ff0;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-green {
|
||||||
|
color: #008a00;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-blue {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-color-purple {
|
||||||
|
color: #93f;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-font-serif {
|
||||||
|
font-family: Georgia, Times New Roman, serif;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-font-monospace {
|
||||||
|
font-family: Monaco, Courier New, monospace;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-size-small {
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-size-large {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-size-huge {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-direction-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
text-align: inherit;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-align-justify {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.ql-editor .ql-align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.ql-editor.ql-blank::before {
|
||||||
|
color: rgba(0,0,0,0.6);
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
font-style: italic;
|
||||||
|
left: 15px;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar:after,
|
||||||
|
.ql-snow .ql-toolbar:after {
|
||||||
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button,
|
||||||
|
.ql-snow .ql-toolbar button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
height: 24px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
width: 28px;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button svg,
|
||||||
|
.ql-snow .ql-toolbar button svg {
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:active:hover,
|
||||||
|
.ql-snow .ql-toolbar button:active:hover {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar input.ql-image[type=file],
|
||||||
|
.ql-snow .ql-toolbar input.ql-image[type=file] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover,
|
||||||
|
.ql-snow .ql-toolbar button:hover,
|
||||||
|
.ql-snow.ql-toolbar button:focus,
|
||||||
|
.ql-snow .ql-toolbar button:focus,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
|
||||||
|
fill: #06c;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
|
||||||
|
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
|
||||||
|
stroke: #06c;
|
||||||
|
}
|
||||||
|
@media (pointer: coarse) {
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active),
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
|
||||||
|
fill: #444;
|
||||||
|
}
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
|
||||||
|
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
|
||||||
|
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
|
||||||
|
stroke: #444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ql-snow {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.ql-snow * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-out-bottom,
|
||||||
|
.ql-snow .ql-out-top {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-flip {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
.ql-snow .ql-formats {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-formats:after {
|
||||||
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-stroke {
|
||||||
|
fill: none;
|
||||||
|
stroke: #444;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-stroke-miter {
|
||||||
|
fill: none;
|
||||||
|
stroke: #444;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-fill,
|
||||||
|
.ql-snow .ql-stroke.ql-fill {
|
||||||
|
fill: #444;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-empty {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-even {
|
||||||
|
fill-rule: evenodd;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-thin,
|
||||||
|
.ql-snow .ql-stroke.ql-thin {
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-transparent {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-direction svg:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-direction.ql-active svg:last-child {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-direction.ql-active svg:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h3 {
|
||||||
|
font-size: 1.17em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h4 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h5 {
|
||||||
|
font-size: 0.83em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor h6 {
|
||||||
|
font-size: 0.67em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor blockquote {
|
||||||
|
border-left: 4px solid #ccc;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor code,
|
||||||
|
.ql-snow .ql-editor pre {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor code {
|
||||||
|
font-size: 85%;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor pre.ql-syntax {
|
||||||
|
background-color: #23241f;
|
||||||
|
color: #f8f8f2;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-editor img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker {
|
||||||
|
color: #444;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
height: 24px;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-label {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 2px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-label::before {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-options {
|
||||||
|
background-color: #fff;
|
||||||
|
display: none;
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 4px 8px;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker-options .ql-picker-item {
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
||||||
|
color: #ccc;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
|
||||||
|
fill: #ccc;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
|
||||||
|
stroke: #ccc;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
||||||
|
display: block;
|
||||||
|
margin-top: -1px;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker,
|
||||||
|
.ql-snow .ql-icon-picker {
|
||||||
|
width: 28px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-label,
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-label {
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-label svg,
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-label svg {
|
||||||
|
right: 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-options {
|
||||||
|
padding: 4px 0px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-icon-picker .ql-picker-item {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-options {
|
||||||
|
padding: 3px 5px;
|
||||||
|
width: 152px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker .ql-picker-item {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
float: left;
|
||||||
|
height: 16px;
|
||||||
|
margin: 2px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -9px;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
|
||||||
|
content: attr(data-label);
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header {
|
||||||
|
width: 98px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||||
|
content: 'Normal';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||||
|
content: 'Heading 1';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||||
|
content: 'Heading 2';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||||
|
content: 'Heading 3';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||||
|
content: 'Heading 4';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||||
|
content: 'Heading 5';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||||
|
content: 'Heading 6';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||||
|
font-size: 1.17em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||||
|
font-size: 0.83em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||||
|
font-size: 0.67em;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font {
|
||||||
|
width: 108px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||||
|
content: 'Sans Serif';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
|
||||||
|
content: 'Serif';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
|
||||||
|
content: 'Monospace';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
|
||||||
|
font-family: Georgia, Times New Roman, serif;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
|
||||||
|
font-family: Monaco, Courier New, monospace;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size {
|
||||||
|
width: 98px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||||
|
content: 'Normal';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
|
||||||
|
content: 'Small';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
|
||||||
|
content: 'Large';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
|
||||||
|
content: 'Huge';
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-formats {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker-label {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker-options {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
|
||||||
|
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
.ql-toolbar.ql-snow + .ql-container.ql-snow {
|
||||||
|
border-top: 0px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-shadow: 0px 0px 5px #ddd;
|
||||||
|
color: #444;
|
||||||
|
padding: 5px 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip::before {
|
||||||
|
content: "Visit URL:";
|
||||||
|
line-height: 26px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip input[type=text] {
|
||||||
|
display: none;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
font-size: 13px;
|
||||||
|
height: 26px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a.ql-preview {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 200px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a.ql-action::after {
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
content: 'Edit';
|
||||||
|
margin-left: 16px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a.ql-remove::before {
|
||||||
|
content: 'Remove';
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip a {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-editing input[type=text] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||||
|
border-right: 0px;
|
||||||
|
content: 'Save';
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip[data-mode=link]::before {
|
||||||
|
content: "Enter link:";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip[data-mode=formula]::before {
|
||||||
|
content: "Enter formula:";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-tooltip[data-mode=video]::before {
|
||||||
|
content: "Enter video:";
|
||||||
|
}
|
||||||
|
.ql-snow a {
|
||||||
|
color: #06c;
|
||||||
|
}
|
||||||
|
.ql-container.ql-snow {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,174 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface AuctionRecordProps {
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
width: 1180px;
|
||||||
|
height: 658px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
const CloseImage = styled(Image)`
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 56px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 196px;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 80px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 196px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 197px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionRecord: React.FC<AuctionRecordProps> = ({ onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const typeList = [
|
||||||
|
{ label: '全部交易', value: '1' },
|
||||||
|
{ label: '我发布的', value: '2' },
|
||||||
|
{ label: '我参与的', value: '3' },
|
||||||
|
]
|
||||||
|
const [typeIndex, setTypeIndex] = useState(0)
|
||||||
|
|
||||||
|
const ThemedList = ['NFT名称', '起拍价', '最新出价', '出价时间', '状态', '操作']
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
|
||||||
|
<HeaderText>拍卖记录</HeaderText>
|
||||||
|
<TypeFlex>
|
||||||
|
{typeList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TypeItem className={index === typeIndex ? 'active' : ''} onClick={() => setTypeIndex(index)}>
|
||||||
|
{item.label}
|
||||||
|
</TypeItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TypeFlex>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex>
|
||||||
|
<TdFlex>
|
||||||
|
<TdImage src="/images/nft/epic-icon.svg" width={24} height={40} />
|
||||||
|
{item.name}
|
||||||
|
</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.newPrice}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
<TdBtnFlex>
|
||||||
|
<DetailButton>详情</DetailButton>
|
||||||
|
<HashText>交易Hash</HashText>
|
||||||
|
</TdBtnFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionRecord
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface TableProps {
|
||||||
|
title?: string
|
||||||
|
th?: string[]
|
||||||
|
tr?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 34px 30px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
`
|
||||||
|
const DetailText = styled(Text)`
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 197px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionRule: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>拍卖规则</HeaderText>
|
||||||
|
<DetailText>1.当倒计时少于1小时时，每次加价增加倒计时时间1小时</DetailText>
|
||||||
|
<DetailText>2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得</DetailText>
|
||||||
|
<DetailText>3.拍卖成功后，平台将收取发布人收益的6%作为手续费</DetailText>
|
||||||
|
<DetailText>
|
||||||
|
4.拍卖结束后，发布人或最后出价人在拍卖历史内进行领取收益或领取NFT，出价人或发布人其中一方领取收益或NFT后，另一方将自动领取对应的收益或NFT
|
||||||
|
</DetailText>
|
||||||
|
<DetailText>5.发布人发布拍卖后，NFT将不可进行交易或转让</DetailText>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionRule
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface TableProps {
|
||||||
|
title?: string
|
||||||
|
th?: string[]
|
||||||
|
tr?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 405px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const CloseImage = styled(Image)`
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 197px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionTable: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const ThemedList = ['钱包地址', 'HASH', '拍卖价格', '拍卖时间', '状态']
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>拍卖纪录</HeaderText>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex>
|
||||||
|
<TdFlex>{item.name}</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.newPrice}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionTable
|
||||||
|
|
@ -0,0 +1,393 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Heading, Flex, Button, Text, Input, Image, useModal, Dropdown } from '@pancakeswap/uikit'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
|
||||||
|
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)`
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
width: 330px;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
& > .active {
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(180deg, #7be0fc 0%, #9961f0 100%);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 110px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
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;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 30px;
|
||||||
|
`
|
||||||
|
const StatusFlexContent = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
& > .statusActive {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const StatusFlexItem = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 104px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const SearchDiv = styled(Flex)`
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 270px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 30px 0 35px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const InputMain = styled(Flex)`
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 4px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SearchInput = styled(Input)`
|
||||||
|
background-color: transparent;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
:focus {
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const SearchBtn = styled.div`
|
||||||
|
width: 50px;
|
||||||
|
height: 37px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 19px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
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;
|
||||||
|
`
|
||||||
|
const SelectMain = styled(Flex)`
|
||||||
|
z-index: 999;
|
||||||
|
width: 120px;
|
||||||
|
`
|
||||||
|
const SelectText = styled(Text)`
|
||||||
|
font-size: 16px;
|
||||||
|
width: 120px;
|
||||||
|
color: #666666;
|
||||||
|
margin-left: 4px;
|
||||||
|
`
|
||||||
|
const FlexOption = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 999;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Content: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [detailVisible, setDetailVisible] = useState(false)
|
||||||
|
const typeList = [
|
||||||
|
{ label: t('All'), type: 1 },
|
||||||
|
{ label: t('bazaar'), type: 2 },
|
||||||
|
{ label: t('auction'), type: 3 },
|
||||||
|
]
|
||||||
|
const [typeIndex, setTypeIndex] = useState(0)
|
||||||
|
const auctionList = [
|
||||||
|
{ label: '拍卖中', value: '0' },
|
||||||
|
{ label: '已成交', value: '1' },
|
||||||
|
]
|
||||||
|
const [auctionSelect, setAuctionSelect] = useState({ label: '拍卖中', value: '0' })
|
||||||
|
const newPrice = [
|
||||||
|
{ label: '最新出价', value: '0' },
|
||||||
|
{ label: '最新发布', value: '1' },
|
||||||
|
{ label: '结束时间', value: '2' },
|
||||||
|
{ label: '价格从低到高', value: '3' },
|
||||||
|
{ label: '价格从高到低', value: '4' },
|
||||||
|
]
|
||||||
|
const [priceSelect, setPriceSelect] = useState({ label: '最新出价', value: '0' })
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 1 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 2, id: 2 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 3, id: 3 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 4, id: 4 },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 5 },
|
||||||
|
]
|
||||||
|
const statusList = [
|
||||||
|
{ label: t('All'), id: '1' },
|
||||||
|
{ label: t('epic'), id: '2' },
|
||||||
|
{ label: t('legend'), id: '3' },
|
||||||
|
{ label: t('uncommon'), id: '4' },
|
||||||
|
{ label: t('common'), id: '5' },
|
||||||
|
]
|
||||||
|
const [statusIndex, setStatusIndex] = useState(0)
|
||||||
|
|
||||||
|
const cutStatus = (index) => {
|
||||||
|
setStatusIndex(index)
|
||||||
|
}
|
||||||
|
|
||||||
|
const [searchTitle, setSearchTitle] = useState('')
|
||||||
|
const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { value: inputValue } = evt.target
|
||||||
|
setSearchTitle(inputValue)
|
||||||
|
}
|
||||||
|
const searchList = () => {
|
||||||
|
console.log('search')
|
||||||
|
}
|
||||||
|
const showDetail = () => {
|
||||||
|
setDetailVisible(!detailVisible)
|
||||||
|
}
|
||||||
|
const [onTransactionRecord] = useModal(<TransactionRecord />)
|
||||||
|
const [onAuctionRecord] = useModal(<AuctionRecord />)
|
||||||
|
const [onSellModal] = useModal(<SellModal />)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{detailVisible && <ShopDetail close={showDetail} />}
|
||||||
|
|
||||||
|
{!detailVisible && (
|
||||||
|
<>
|
||||||
|
<HeaderFlex>
|
||||||
|
<TypeFlex>
|
||||||
|
{typeList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TypeItem
|
||||||
|
key={item.type}
|
||||||
|
onClick={() => setTypeIndex(index)}
|
||||||
|
className={typeIndex === index ? 'active' : ''}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</TypeItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TypeFlex>
|
||||||
|
<Flex alignContent="center">
|
||||||
|
<HeaderButton onClick={onSellModal}>{t('I sell')}</HeaderButton>
|
||||||
|
{/* 当顶部切换选中的是全部和市场则显示交易记录，选中拍卖时展示拍卖纪录 */}
|
||||||
|
{typeIndex === 2 ? (
|
||||||
|
<HeaderButton onClick={onAuctionRecord}>拍卖纪录</HeaderButton>
|
||||||
|
) : (
|
||||||
|
<HeaderButton onClick={onTransactionRecord}>{t('transaction record')}</HeaderButton>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</HeaderFlex>
|
||||||
|
<Transaction />
|
||||||
|
<StatusFlex>
|
||||||
|
<StatusFlexContent>
|
||||||
|
{statusList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<StatusFlexItem
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => setStatusIndex(index)}
|
||||||
|
className={statusIndex === index ? 'statusActive' : ''}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</StatusFlexItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</StatusFlexContent>
|
||||||
|
<Flex>
|
||||||
|
<SelectMain>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<SelectFlex>
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
<SelectText>{auctionSelect.label}</SelectText>
|
||||||
|
</SelectFlex>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{auctionList.map((item) => {
|
||||||
|
return (
|
||||||
|
<FlexOption key={item.value} onClick={() => setAuctionSelect(item)}>
|
||||||
|
{item.label}
|
||||||
|
</FlexOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
</SelectMain>
|
||||||
|
<SelectMain>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<SelectFlex>
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
<SelectText>{priceSelect.label}</SelectText>
|
||||||
|
</SelectFlex>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{newPrice.map((item) => {
|
||||||
|
return (
|
||||||
|
<FlexOption key={item.value} onClick={() => setPriceSelect(item)}>
|
||||||
|
{item.label}
|
||||||
|
</FlexOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
</SelectMain>
|
||||||
|
</Flex>
|
||||||
|
</StatusFlex>
|
||||||
|
<SearchDiv>
|
||||||
|
<InputMain>
|
||||||
|
<SearchInput placeholder={t('Enter a keyword search')} value={searchTitle} onChange={handleChange} />
|
||||||
|
<SearchBtn onClick={searchList}>
|
||||||
|
<Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
|
||||||
|
</SearchBtn>
|
||||||
|
</InputMain>
|
||||||
|
</SearchDiv>
|
||||||
|
<ShopMain>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<ShopFlex 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 Content
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import React from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Flex, Text, Link } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
interface FlexProps {
|
||||||
|
name: string
|
||||||
|
value: string
|
||||||
|
paddings?: string
|
||||||
|
leftColor?: string
|
||||||
|
rightColor?: string
|
||||||
|
typeLink?: string
|
||||||
|
size?: string
|
||||||
|
textColor?: string
|
||||||
|
rightSize?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexDiv = styled(Flex)`
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 14px;
|
||||||
|
`
|
||||||
|
const TextLink = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const FlexCom: React.FC<FlexProps> = ({
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
paddings = '0px',
|
||||||
|
leftColor = '#666666',
|
||||||
|
rightColor = 'textSubtle',
|
||||||
|
typeLink,
|
||||||
|
size = '14px',
|
||||||
|
textColor = '#666666',
|
||||||
|
rightSize = '14px',
|
||||||
|
}) => {
|
||||||
|
const openPage = () => {
|
||||||
|
console.log(typeLink)
|
||||||
|
window.open(typeLink)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexDiv style={{ padding: paddings }}>
|
||||||
|
<Text style={{ fontSize: size, color: leftColor }}>{name}</Text>
|
||||||
|
{typeLink ? (
|
||||||
|
<TextLink
|
||||||
|
color={rightColor}
|
||||||
|
style={{ color: textColor, borderBottom: `1px solid ${textColor}` }}
|
||||||
|
onClick={openPage}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</TextLink>
|
||||||
|
) : (
|
||||||
|
<Text style={{ color: textColor, fontSize: rightSize }}>{value}</Text>
|
||||||
|
)}
|
||||||
|
</FlexDiv>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default FlexCom
|
||||||
|
|
@ -0,0 +1,293 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, Input, Flex, Link, Dropdown, useModal } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
import ShopModal from './ShopModal'
|
||||||
|
|
||||||
|
interface sellModalProps {
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
width: 1180px;
|
||||||
|
min-height: 598px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
const CloseImage = styled(Image)`
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
const SelectFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 35px 100px 30px 100px;
|
||||||
|
border-bottom: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const SellingWayFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 400px;
|
||||||
|
height: 35px;
|
||||||
|
background: #eeeaf4;
|
||||||
|
border: 1px solid #d7caec;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
`
|
||||||
|
const WayFlex = styled(Flex)`
|
||||||
|
width: 400px;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const FlexOption = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 400px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const SellInput = styled(Input)`
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 400px;
|
||||||
|
height: 35px;
|
||||||
|
background: #eeeaf4;
|
||||||
|
border: 1px solid #d7caec;
|
||||||
|
border-radius: 18px;
|
||||||
|
`
|
||||||
|
const FlexPrice = styled(Flex)`
|
||||||
|
width: 50%;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const PriceItem = styled(Flex)`
|
||||||
|
width: 180px;
|
||||||
|
/* margin-right: 80px; */
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const FlexCoinOption = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 180px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const PriceWay = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 180px;
|
||||||
|
height: 35px;
|
||||||
|
background: #eeeaf4;
|
||||||
|
border: 1px solid #d7caec;
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
`
|
||||||
|
const PriceInput = styled(Input)`
|
||||||
|
width: 180px;
|
||||||
|
height: 35px;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
const AddButton = styled(Button)`
|
||||||
|
width: 140px;
|
||||||
|
height: 35px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-left: 80px;
|
||||||
|
`
|
||||||
|
const Shop = styled(Flex)`
|
||||||
|
/* min-height: 366px; */
|
||||||
|
padding: 30px 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const AddNftButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 21px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
`
|
||||||
|
const PriceImage = styled(Image)`
|
||||||
|
margin: 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const ShopFlex = styled(Flex)`
|
||||||
|
width: 278px;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopName = styled(Text)`
|
||||||
|
padding: 26px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
`
|
||||||
|
const ShopButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
const SelectShopModal = styled(Flex)`
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(31, 11, 117, 0.39);
|
||||||
|
z-index: 999;
|
||||||
|
/* background-color: #7a6eaa; */
|
||||||
|
`
|
||||||
|
|
||||||
|
const SellModal: React.FC<sellModalProps> = ({ onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [tradingOnList, setTradingOnList] = useState([{ price: '', value: 'HCC' }])
|
||||||
|
const [sellingWay, setSellingWay] = useState(undefined)
|
||||||
|
const [coin, setCoin] = useState({ label: 'HCC', value: 'HCC' })
|
||||||
|
const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
|
||||||
|
const [showModal, setShowModal] = useState(false)
|
||||||
|
const coinList = [
|
||||||
|
{ label: 'HCC', value: 'HCC' },
|
||||||
|
{ label: 'USDT', value: 'USDT' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const SellingWayList = [
|
||||||
|
{ label: '拍卖', value: '0' },
|
||||||
|
{ label: '一口价', value: '1' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const selectTradingOn = (index, value) => {
|
||||||
|
tradingOnList[index].value = value
|
||||||
|
setTradingOnList([...tradingOnList])
|
||||||
|
}
|
||||||
|
const addTradingOn = () => {
|
||||||
|
tradingOnList.push({ price: '', value: 'HCC' })
|
||||||
|
setTradingOnList([...tradingOnList])
|
||||||
|
}
|
||||||
|
const reduceTradingOn = () => {
|
||||||
|
tradingOnList.splice(1, 1)
|
||||||
|
setTradingOnList([...tradingOnList])
|
||||||
|
}
|
||||||
|
|
||||||
|
// const [onShopDetail] = useModal(<ShopModal />)
|
||||||
|
const onSelectNft = () => {
|
||||||
|
setShowModal(!showModal)
|
||||||
|
}
|
||||||
|
const close = () => {
|
||||||
|
setShowModal(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
|
||||||
|
<HeaderText>出售NFT</HeaderText>
|
||||||
|
<SelectFlex>
|
||||||
|
<WayFlex>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<SellingWayFlex>
|
||||||
|
{sellingWay ? sellingWay.label : '出售方式'}
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
</SellingWayFlex>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{SellingWayList.map((item) => {
|
||||||
|
return (
|
||||||
|
<FlexOption key={item.value} onClick={() => setSellingWay(item)}>
|
||||||
|
{item.label}
|
||||||
|
</FlexOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
{sellingWay?.value === '0' && <SellInput placeholder="出售时间" />}
|
||||||
|
</WayFlex>
|
||||||
|
<FlexPrice>
|
||||||
|
<>
|
||||||
|
{tradingOnList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PriceItem>
|
||||||
|
<Dropdown
|
||||||
|
position="bottom"
|
||||||
|
target={
|
||||||
|
<PriceWay>
|
||||||
|
{item.value}
|
||||||
|
<Image src="/images/nft/bottom-arrows.svg" width={12} height={7} />
|
||||||
|
</PriceWay>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{coinList.map((coinItem) => {
|
||||||
|
return (
|
||||||
|
<FlexCoinOption key={coinItem.value} onClick={() => selectTradingOn(index, coinItem.value)}>
|
||||||
|
{coinItem.label}
|
||||||
|
</FlexCoinOption>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Dropdown>
|
||||||
|
<PriceInput placeholder="请输入金额" value={item.price} />
|
||||||
|
</PriceItem>
|
||||||
|
{index === 0 && tradingOnList.length === 2 && (
|
||||||
|
<PriceImage src="/images/nft/add.svg" width={20} height={20} />
|
||||||
|
)}
|
||||||
|
{index === 1 && (
|
||||||
|
<PriceImage src="/images/nft/reduce.svg" width={20} height={20} onClick={reduceTradingOn} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
{tradingOnList.length < 2 && <AddButton onClick={addTradingOn}>添加为交易对</AddButton>}
|
||||||
|
</FlexPrice>
|
||||||
|
</SelectFlex>
|
||||||
|
<Shop>
|
||||||
|
{/* <AddNftButton>添加NFT</AddNftButton> */}
|
||||||
|
{/* { label: 'Cat goddess Emerald ', type: 1, id: 1 } */}
|
||||||
|
<ShopFlex>
|
||||||
|
<ShopList item={shopData} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||||
|
<ShopName>{shopData.label}</ShopName>
|
||||||
|
</ShopFlex>
|
||||||
|
<ShopButton>立即出售</ShopButton>
|
||||||
|
<ShopButton onClick={onSelectNft}>重新选择NFT</ShopButton>
|
||||||
|
</Shop>
|
||||||
|
{showModal && (
|
||||||
|
<SelectShopModal>
|
||||||
|
<ShopModal close={close} />
|
||||||
|
</SelectShopModal>
|
||||||
|
)}
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SellModal
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Heading, Flex, Button, Text, Input, Image, useModal } from '@pancakeswap/uikit'
|
||||||
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
|
import useRefresh from 'hooks/useRefresh'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
import FlexCom from './FlexCom'
|
||||||
|
import AuctionTable from './AuctionTable'
|
||||||
|
import TransactionTable from './TransactionTable'
|
||||||
|
import AuctionRule from './AuctionRule'
|
||||||
|
|
||||||
|
interface DetailProps {
|
||||||
|
close: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeaderFlex = styled(Flex)`
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const FirstText = styled(Text)`
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const ShopText = styled(Text)`
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const MainFlex = styled(Flex)`
|
||||||
|
margin-top: 36px;
|
||||||
|
padding: 30px;
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
`
|
||||||
|
const ShopFlex = styled(Flex)`
|
||||||
|
width: 476px;
|
||||||
|
height: 580px;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
const Detail = styled.div`
|
||||||
|
width: 614px;
|
||||||
|
height: 580px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(245, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 67, 70, 0.15);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px 30px;
|
||||||
|
margin-left: 30px;
|
||||||
|
`
|
||||||
|
const TitleText = styled(Text)`
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
`
|
||||||
|
const PriceButton = styled(Button)`
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 30px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopDetail: React.FC<DetailProps> = ({ close }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const [shopData, setShopData] = useState({ label: 'Cat goddess Emerald ', type: 1, id: 1 })
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<HeaderFlex>
|
||||||
|
<FirstText onClick={close}>NFT市场</FirstText>
|
||||||
|
<ShopText> > Crumb 1</ShopText>
|
||||||
|
</HeaderFlex>
|
||||||
|
<MainFlex>
|
||||||
|
<ShopFlex>
|
||||||
|
<ShopList item={shopData} width={476} height={606} borderRadius="20px" />
|
||||||
|
</ShopFlex>
|
||||||
|
<Detail>
|
||||||
|
<Flex justifyContent="flex-end">
|
||||||
|
<Image src="/images/nft/share.svg" width={35} height={35} style={{ cursor: 'pointer' }} />
|
||||||
|
</Flex>
|
||||||
|
<TitleText>Cat goddess Emerald</TitleText>
|
||||||
|
<FlexCom name="拍卖倒计时" value="10:57:55:79" size="18px" rightSize="30px" textColor="#333333" />
|
||||||
|
<FlexCom name="当前价格（HCC）=100U" value="70.000.000" size="18px" rightSize="30px" textColor="#1FC7D4" />
|
||||||
|
<PriceButton>固定加价(10%溢价)</PriceButton>
|
||||||
|
<FlexCom name="拥有者" value="钱包地址" />
|
||||||
|
<FlexCom name="合约地址" value="合约地址" />
|
||||||
|
<FlexCom name="token ID" value="token ID" />
|
||||||
|
<FlexCom name="资产协议" value="资产协议" />
|
||||||
|
<FlexCom name="资产公链" value="资产公链" />
|
||||||
|
<FlexCom name="公链" value="公链" />
|
||||||
|
</Detail>
|
||||||
|
</MainFlex>
|
||||||
|
<AuctionTable />
|
||||||
|
<TransactionTable />
|
||||||
|
<AuctionRule />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopDetail
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled, { keyframes } from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Image, useModal } from '@pancakeswap/uikit'
|
||||||
|
|
||||||
|
const MainFlex = styled.div`
|
||||||
|
& > .epicBcg {
|
||||||
|
background-color: #ffd7d7;
|
||||||
|
}
|
||||||
|
& > .legendBcg {
|
||||||
|
background-color: #d7d7ff;
|
||||||
|
}
|
||||||
|
& > .uncommonBcg {
|
||||||
|
background-color: #cdf7d2;
|
||||||
|
}
|
||||||
|
& > .commonBcg {
|
||||||
|
background-color: #daf0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.md} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopItem = styled(Flex)`
|
||||||
|
/* height: 358px; */
|
||||||
|
/* border-radius: 20px; */
|
||||||
|
background: rgba(255, 255, 255, 0.39);
|
||||||
|
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > .ribbon {
|
||||||
|
width: 106px;
|
||||||
|
height: 108px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
|
z-index: 10;
|
||||||
|
& > .ribbon1 {
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: relative;
|
||||||
|
padding: 2px 0;
|
||||||
|
left: -36px;
|
||||||
|
top: 14px;
|
||||||
|
width: 121px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
& > .epic {
|
||||||
|
background: linear-gradient(-90deg, #efea48 0%, #f32121 100%);
|
||||||
|
}
|
||||||
|
& > .legend {
|
||||||
|
background: linear-gradient(-90deg, #4b84f5 0%, #bc21f3 100%);
|
||||||
|
}
|
||||||
|
& > .uncommon {
|
||||||
|
background: linear-gradient(-90deg, #3dffec 0%, #24bf52 100%);
|
||||||
|
}
|
||||||
|
& > .common {
|
||||||
|
background: linear-gradient(-90deg, #b5e9f3 0%, #1195d9 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const ItemText = styled(Flex)`
|
||||||
|
padding: 25px 0;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
interface ShopListItemProps {
|
||||||
|
item?: Detail
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
borderRadius?: string
|
||||||
|
}
|
||||||
|
interface Detail {
|
||||||
|
label?: string
|
||||||
|
type?: number | string
|
||||||
|
id?: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShopList: React.FC<ShopListItemProps> = ({ item, width = 186, height = 187, borderRadius = '20px' }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const getClassBcg = () => {
|
||||||
|
let bcg = ''
|
||||||
|
switch (item.type) {
|
||||||
|
case 1:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
bcg = 'legendBcg'
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
bcg = 'uncommonBcg'
|
||||||
|
break
|
||||||
|
case 4:
|
||||||
|
bcg = 'commonBcg'
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
bcg = 'epicBcg'
|
||||||
|
}
|
||||||
|
return bcg
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainFlex>
|
||||||
|
<ShopItem className={getClassBcg()} style={{ borderRadius }}>
|
||||||
|
<div className="ribbon">
|
||||||
|
{item.type === 1 && <div className="ribbon1 epic">{t('epic')}</div>}
|
||||||
|
{item.type === 2 && <div className="ribbon1 legend">{t('legend')}</div>}
|
||||||
|
{item.type === 3 && <div className="ribbon1 uncommon">{t('uncommon')}</div>}
|
||||||
|
{item.type === 4 && <div className="ribbon1 common">{t('common')}</div>}
|
||||||
|
</div>
|
||||||
|
{item.type === 1 && <Image src="/images/nft/epic-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 2 && <Image src="/images/nft/legend-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 3 && <Image src="/images/nft/uncommon-icon.svg" width={width} height={height} />}
|
||||||
|
{item.type === 4 && <Image src="/images/nft/box.svg" width={width} height={height} />}
|
||||||
|
</ShopItem>
|
||||||
|
</MainFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopList
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
import { Flex, Text, Button } from '@pancakeswap/uikit'
|
||||||
|
import ShopList from './ShopList'
|
||||||
|
|
||||||
|
interface ShopProp {
|
||||||
|
name?: string | number
|
||||||
|
value?: string | number
|
||||||
|
onDismiss?: () => void
|
||||||
|
close: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Main = styled.div`
|
||||||
|
width: 60%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px 15px;
|
||||||
|
border-radius: 30px;
|
||||||
|
/* height: 80%; */
|
||||||
|
z-index: 10;
|
||||||
|
`
|
||||||
|
const Shop = 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;
|
||||||
|
& > .active {
|
||||||
|
border: 3px solid #0deeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
${({ 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: 26px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666666;
|
||||||
|
`
|
||||||
|
|
||||||
|
const SelectFlex = styled(Flex)`
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 9;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
const SelectDiv = styled.div`
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background: #0deeff;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 1px;
|
||||||
|
margin-top: -1px;
|
||||||
|
`
|
||||||
|
const BtnFlex = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
`
|
||||||
|
const AddButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
|
||||||
|
border-radius: 21px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
`
|
||||||
|
const OutButton = styled(Button)`
|
||||||
|
width: 176px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 21px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 20px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [list, setList] = useState([])
|
||||||
|
|
||||||
|
const pitchOn = (index) => {
|
||||||
|
// list.forEach((item, i) => {
|
||||||
|
// item.select = i === index ? !item.select : false
|
||||||
|
// })
|
||||||
|
setList([...list])
|
||||||
|
}
|
||||||
|
const onClose = () => {
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setList([
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 1, select: true },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 2, id: 2, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 3, id: 3, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 4, id: 4, select: false },
|
||||||
|
{ label: 'Cat goddess Emerald ', type: 1, id: 5, select: false },
|
||||||
|
])
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Main>
|
||||||
|
<Shop>
|
||||||
|
{list.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<ShopFlex onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}>
|
||||||
|
<SelectFlex>{item.select && <SelectDiv />}</SelectFlex>
|
||||||
|
<ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
|
||||||
|
<ShopName>{item.label}</ShopName>
|
||||||
|
</ShopFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</Shop>
|
||||||
|
<BtnFlex>
|
||||||
|
<AddButton>{t('add NFT')}</AddButton>
|
||||||
|
<OutButton onClick={onClose}>{t('Sign out')}</OutButton>
|
||||||
|
</BtnFlex>
|
||||||
|
</Main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ShopModal
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import styled 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'
|
||||||
|
|
||||||
|
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;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
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;
|
||||||
|
${({ theme }) => theme.mediaQueries.xs} {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
${({ theme }) => theme.mediaQueries.lg} {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const Transaction: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TransactionFlex>
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('The total volume')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
<Separate />
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('The total number of transactions')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
<Separate />
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('Total number of auctions')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
<Separate />
|
||||||
|
<TransactionItem>
|
||||||
|
<TransactionItemNum>1.000000</TransactionItemNum>
|
||||||
|
<TransactionItemLabel>{t('Total auction commission')}</TransactionItemLabel>
|
||||||
|
</TransactionItem>
|
||||||
|
</TransactionFlex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Transaction
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface TransactionRecordProps {
|
||||||
|
onDismiss?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
width: 1180px;
|
||||||
|
height: 658px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
const CloseImage = styled(Image)`
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 56px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 236px;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 80px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 236px;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 236px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TransactionRecord: React.FC<TransactionRecordProps> = ({ onDismiss }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const typeList = [
|
||||||
|
{ label: '全部交易', value: '1' },
|
||||||
|
{ label: '出售中', value: '2' },
|
||||||
|
{ label: '已出售', value: '3' },
|
||||||
|
{ label: '已购买', value: '4' },
|
||||||
|
]
|
||||||
|
const [typeIndex, setTypeIndex] = useState(0)
|
||||||
|
|
||||||
|
const ThemedList = ['NFT名称', '价格', '时间', '状态', '操作']
|
||||||
|
|
||||||
|
const list = [{ name: 'Cat goddess Emerald ', icon: '', price: '1', time: '2022-02-02', status: '已售卖' }]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<CloseImage src="/images/nft/close.svg" width={15} height={15} onClick={onDismiss} />
|
||||||
|
<HeaderText>交易记录</HeaderText>
|
||||||
|
<TypeFlex>
|
||||||
|
{typeList.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<TypeItem className={index === typeIndex ? 'active' : ''} onClick={() => setTypeIndex(index)}>
|
||||||
|
{item.label}
|
||||||
|
</TypeItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TypeFlex>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex>
|
||||||
|
<TdFlex>
|
||||||
|
<TdImage src="/images/nft/epic-icon.svg" width={24} height={40} />
|
||||||
|
{item.name}
|
||||||
|
</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
<TdBtnFlex>
|
||||||
|
<DetailButton>详情</DetailButton>
|
||||||
|
<HashText>交易Hash</HashText>
|
||||||
|
</TdBtnFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TransactionRecord
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
|
||||||
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
||||||
|
interface TableProps {
|
||||||
|
title?: string
|
||||||
|
th?: string[]
|
||||||
|
tr?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlexMain = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
height: 405px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
z-index: 9999;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20px;
|
||||||
|
`
|
||||||
|
const CloseImage = styled(Image)`
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
`
|
||||||
|
const HeaderText = styled(Text)`
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
const TypeFlex = styled(Flex)`
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 35px;
|
||||||
|
padding-left: 30px;
|
||||||
|
& > .active {
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
const TypeItem = styled(Flex)`
|
||||||
|
width: 128px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid #1fc7d4;
|
||||||
|
border-radius: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
const TableThemed = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const ThemedItem = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
`
|
||||||
|
const TableBody = styled.div``
|
||||||
|
const TrFlex = styled(Flex)`
|
||||||
|
height: 42px;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
align-items: center;
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
`
|
||||||
|
const TdFlex = styled(Flex)`
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
`
|
||||||
|
const TdImage = styled(Image)`
|
||||||
|
margin-right: 20px;
|
||||||
|
`
|
||||||
|
const TdBtnFlex = styled(Flex)`
|
||||||
|
width: 197px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
const DetailButton = styled(Button)`
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 12px;
|
||||||
|
`
|
||||||
|
const HashText = styled(Text)`
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1fc7d4;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 1px solid #1fc7d4;
|
||||||
|
`
|
||||||
|
|
||||||
|
const AuctionTable: React.FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const ThemedList = ['事件', '单价', '卖方', '买方', '交易时间']
|
||||||
|
|
||||||
|
const list = [
|
||||||
|
{ name: 'Cat goddess Emerald ', icon: '', price: '1', newPrice: '2', time: '2022-02-02', status: '已售卖' },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FlexMain>
|
||||||
|
<HeaderText>交易历史</HeaderText>
|
||||||
|
<>
|
||||||
|
<TableThemed>
|
||||||
|
{ThemedList.map((item) => {
|
||||||
|
return <ThemedItem>{item}</ThemedItem>
|
||||||
|
})}
|
||||||
|
</TableThemed>
|
||||||
|
<TableBody>
|
||||||
|
{list.map((item) => {
|
||||||
|
return (
|
||||||
|
<TrFlex>
|
||||||
|
<TdFlex>{item.name}</TdFlex>
|
||||||
|
<TdFlex>{item.price}</TdFlex>
|
||||||
|
<TdFlex>{item.newPrice}</TdFlex>
|
||||||
|
<TdFlex>{item.time}</TdFlex>
|
||||||
|
<TdFlex>{item.status}</TdFlex>
|
||||||
|
</TrFlex>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</>
|
||||||
|
</FlexMain>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuctionTable
|
||||||
|
|
@ -1,24 +1,30 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
import Page from 'components/Layout/Page'
|
||||||
import { useAccount } from 'state/userInfo/hooks'
|
import { useAccount } from 'state/userInfo/hooks'
|
||||||
import useRefresh from 'hooks/useRefresh'
|
import useRefresh from 'hooks/useRefresh'
|
||||||
import { UnOpenModel } from 'components/Modal'
|
import { UnOpenModel } from 'components/Modal'
|
||||||
|
import Content from './components/Content'
|
||||||
|
|
||||||
const PageContent = styled.div`
|
const PageContent = styled.div`
|
||||||
height: calc(100vh - 64px);
|
height: calc(100vh - 64px);
|
||||||
/* background-image: url('/images/home/bg.svg');
|
background-image: url('/images/home/bg.svg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat; */
|
background-repeat: no-repeat;
|
||||||
background-image: url('/images/page/bazaar.jpg');
|
|
||||||
|
/* background-image: url('/images/page/bazaar.jpg');
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
background-size: 50% 90%;
|
background-size: 50% 90%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat; */
|
||||||
`
|
`
|
||||||
|
|
||||||
const Bazaar: React.FC = () => {
|
const Bazaar: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<PageContent>
|
<PageContent>
|
||||||
<UnOpenModel />
|
<Page>
|
||||||
|
<Content />
|
||||||
|
</Page>
|
||||||
|
{/* <UnOpenModel /> */}
|
||||||
</PageContent>
|
</PageContent>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,21 +16,21 @@ interface RoundDetailProps {
|
||||||
|
|
||||||
const PageContent = styled.div`
|
const PageContent = styled.div`
|
||||||
min-height: calc(100vh - 64px);
|
min-height: calc(100vh - 64px);
|
||||||
/* background-image: url('/images/nft/bg.svg');
|
background-image: url('/images/nft/bg.svg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat; */
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
background-image: url('/images/page/compound.jpg');
|
/* background-image: url('/images/page/compound.jpg');
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
background-size: 60% 90%;
|
background-size: 60% 90%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat; */
|
||||||
`
|
`
|
||||||
|
|
||||||
const NftBox: React.FC = () => {
|
const NftBox: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<PageContent>
|
<PageContent>
|
||||||
<UnOpenModel />
|
{/* <UnOpenModel /> */}
|
||||||
{/* <CompoundBox /> */}
|
<CompoundBox />
|
||||||
</PageContent>
|
</PageContent>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, MutableRefObject, useEffect, useRef } from 'react'
|
||||||
|
import { useLocation, useHistory, useParams } from 'react-router-dom'
|
||||||
|
import { FixedSizeList } from 'react-window'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
|
import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
|
||||||
import { useTranslation } from 'contexts/Localization'
|
import { useTranslation } from 'contexts/Localization'
|
||||||
|
|
@ -56,8 +58,9 @@ const TextDetail = styled(Text)`
|
||||||
const CourseCom: React.FC = () => {
|
const CourseCom: React.FC = () => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
const ref = useRef(null)
|
||||||
const [list, setListState] = useState([])
|
const [list, setListState] = useState([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setListState([
|
setListState([
|
||||||
{
|
{
|
||||||
|
|
@ -104,15 +107,90 @@ const CourseCom: React.FC = () => {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
setTimeout(() => {
|
||||||
|
const offsetTop = ref.current.offsetTop + 100
|
||||||
|
if (location.search) {
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop,
|
||||||
|
behavior: 'smooth',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
}, [t])
|
}, [t])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div ref={ref}>
|
||||||
<FirstPage>
|
<FirstPage>
|
||||||
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
<StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
|
||||||
<FlexMain>
|
<FlexMain>
|
||||||
<Stepper>
|
<Stepper>
|
||||||
{list.map((item, index) => (
|
<Step status="current" index={0}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#7645D9' }}>{t('Stage one: Origin')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('The project concept was born in May 2021')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Set up HiCity team in June 2021')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('May 2021 -- January 2022 Team run-in')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="past" index={1}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#1FC7D4' }}>{t('Stage two: Action')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t(
|
||||||
|
'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
|
||||||
|
)}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('In March 2022, project approval, web design, roadmap announcement, smart contract development')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="current" index={2}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#7645D9' }}>{t('Stage three: Creation')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Created by NFT in May 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('June 2022 social software development')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="past" index={3}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#1FC7D4' }}>{t('Stage four: Integration')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Launch of social software in December 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('December 2022 NFT bonus binding social software')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('In December 2022, HighCity Ecology was preliminarily completed')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
<Step status="current" index={4}>
|
||||||
|
<CardDiv style={{ height: '290px' }}>
|
||||||
|
<HeaderText style={{ color: '#7645D9' }}>{t('Stage five: Closing the curtain')}</HeaderText>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('HighCity Ecology completed in December 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Set up HiCity team in June 2021')}
|
||||||
|
</TextDetail>
|
||||||
|
<TextDetail color="textSubtle" marginTop="15px">
|
||||||
|
{t('Maintain dividend income growth in December 2022')}
|
||||||
|
</TextDetail>
|
||||||
|
</CardDiv>
|
||||||
|
</Step>
|
||||||
|
{/* {list.map((item, index) => (
|
||||||
<Step key={item.id} index={index} status={index % 2 ? 'current' : 'past'}>
|
<Step key={item.id} index={index} status={index % 2 ? 'current' : 'past'}>
|
||||||
<CardDiv style={{ height: '290px' }}>
|
<CardDiv style={{ height: '290px' }}>
|
||||||
<HeaderText style={{ color: index % 2 ? '#7645D9' : '#1FC7D4' }}>{item.title}</HeaderText>
|
<HeaderText style={{ color: index % 2 ? '#7645D9' : '#1FC7D4' }}>{item.title}</HeaderText>
|
||||||
|
|
@ -125,12 +203,12 @@ const CourseCom: React.FC = () => {
|
||||||
})}
|
})}
|
||||||
</CardDiv>
|
</CardDiv>
|
||||||
</Step>
|
</Step>
|
||||||
))}
|
))} */}
|
||||||
</Stepper>
|
</Stepper>
|
||||||
</FlexMain>
|
</FlexMain>
|
||||||
</StyledPage>
|
</StyledPage>
|
||||||
</FirstPage>
|
</FirstPage>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ const UnOpenModel: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FlexMain>
|
<FlexMain>
|
||||||
<HeaderText>{t('Stay tuned')}</HeaderText>
|
<HeaderText>{t('Coming Soon')}</HeaderText>
|
||||||
<TipText>{t('This page is not currently open')}</TipText>
|
<TipText>{t('This page is not currently open')}</TipText>
|
||||||
</FlexMain>
|
</FlexMain>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue