nft

src/App.tsx

@@ -48,6 +48,7 @@ const Pool = lazy(() => import('./views/Pool'))
 const PoolFinder = lazy(() => import('./views/PoolFinder'))
 const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
+const Nft = lazy(() => import('./views/Nft'))
 
 // This config is required for number formatting
 BigNumber.config({
@@ -89,6 +90,9 @@ const App: React.FC = () => {
             <Route path="/referral">
               <Referral />
             </Route>
+            <Route path="/nft">
+              <Nft />
+            </Route>
             {/* <Route path="/lottery">
               <Lottery />
             </Route>
@@ -138,6 +142,7 @@ const App: React.FC = () => {
             <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
             <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
             <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
+            <Route exact strict path="/nft" component={Nft} />
 
             {/* Redirect */}
             {/* <Route path="/staking">

src/components/Menu/config.ts

@@ -40,6 +40,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
     icon: 'PoolIcon',
     href: '/referral',
   },
+	{
+	  label: 'NFT',
+	  icon: 'TicketIcon',
+	  href: '/nft'
+	},
   // {
   //   label: t('Prediction (BETA)'),
   //   icon: 'PredictionsIcon',

src/views/Nft/index.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+// import SearchInput from 'components/SearchInput'
+import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
+
+import 'swiper/swiper.min.css'
+
+import 'swiper/components/pagination/pagination.min.css';
+
+SwiperCore.use([Keyboard, Mousewheel, Pagination])
+
+
+const MainDiv = styled.div`
+    width: 100%;
+    min-height: calc(100vh - 64px);
+    background: ${({ theme }) => theme.colors.gradients.bubblegum};
+`
+
+const StyledPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 16px;
+  padding-bottom: 0;
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    background-size: auto;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding: 24px;
+    padding-bottom: 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    min-height: calc(100vh - 64px);
+  }
+  
+`
+
+const BodyWrapper = styled(Card)`
+  border-radius: 24px;
+  max-width: 500px;
+  width: 100%;
+  overflow:visible;
+  position: relative;
+`
+
+const HindDiv = styled.div`
+    width:32px;
+    position: absolute;
+    top:-40px;
+    left:0;
+    z-index:10
+`
+const BlindboxImage = styled(Image)`
+  max-width:377px;
+  max-height:367px;
+  z-index:9
+`
+
+const Divs = styled.div`
+    box-sizing:border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 16px;
+    padding-bottom: 0;
+    min-height: calc(100vh - 104px);
+    background: ${({ theme }) => theme.colors.gradients.bubblegum};
+`
+
+const DetailInfo = styled.div`
+  padding:0 21px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top:24px;
+`
+
+const SwiperDiv = styled(Swiper)`
+  height:730px;
+  & > .swiper-wrapper > .swiper-slide > div > div{
+    background:transparent;
+  }
+
+  & > .swiper-pagination{
+      & > .swiper-pagination-bullet{
+          background:#fff;
+          width:14px;
+          height:9px;
+          opacity:1;
+          border-radius:3px;
+      }
+      & > .swiper-pagination-bullet-active{
+          background:#000;
+      }
+  }
+`
+
+
+const Nft: React.FC = () => {
+    const [valNumber, setInputState] = useState(1)
+    const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
+    const onAdd = (type) => {
+         if (type === 'add') {
+            setInputState(valNumber + 1)
+        } else {
+            if (valNumber === 0) return
+            setInputState(valNumber - 1)
+        }
+        
+    }
+
+    return (
+        <MainDiv>
+            <SwiperDiv loop pagination={{ clickable: true }} spaceBetween={16} freeModeMomentumRatio={0.25} freeModeMomentumVelocityRatio={0.5}>
+                {
+                    blindboxList.map((item) => {
+                        return <SwiperSlide key={item.id}>
+                            <StyledPage>
+                                <Divs>
+                                    <BodyWrapper>
+                                        <HindDiv>
+                                            <Image src='/images/nft/hint.png' alt="" width={32} height={32} />
+                                        </HindDiv>
+                                        <Flex justifyContent='center' marginTop="-40px">
+                                            <BlindboxImage src='/images/nft/blindbox.png' alt="" width={377} height={367} />
+                                        </Flex>
+                                        <DetailInfo>
+                                            <Text color='#999' fontSize="18px">系列</Text>
+                                            <Text color='#2F3748' fontSize="16px">法式盛宴</Text>
+                                        </DetailInfo>
+                                        <DetailInfo>
+                                            <Text color='#999' fontSize="18px">价格</Text>
+                                            <Flex alignItems='center'>
+                                                <Text color='#1FC7D4' fontSize="24px">500</Text>
+                                                <Text color='#2F3748' fontSize="16px">黄油</Text>
+                                            </Flex>
+                                        </DetailInfo>
+                                        <DetailInfo>
+                                            <Text color='#999' fontSize="18px">数量</Text>
+                                            <Flex justifyContent="space-between" alignItems='center' width={120}>
+                                                <Image src='/images/nft/sub-icon.png' alt="" onClick={() => onAdd('sub')} width={25} height={25} />
+                                                <Text width={60} textAlign='center' color='#2F3748' fontSize="16px">{valNumber}</Text>
+                                                <Image src='/images/nft/add-icon.png' alt="1" onClick={() => onAdd('add')} width={25} height={25} />
+                                            </Flex>
+                                        </DetailInfo>
+                                        <Flex justifyContent="flex-end" alignItems='center' marginTop={12} padding="0 21px">
+                                            <Text color='#6B6472' fontSize="14px">钱包中的 BUTTER：</Text>
+                                            <Text color='#1FC7D4' fontSize="14px">0</Text>
+                                        </Flex>
+                                        <Flex justifyContent="flex-end" alignItems='center' marginTop={12} padding="0 21px">
+                                            <Text color='#6B6472' fontSize="14px">回收点数抵扣：</Text>
+                                            <Text color='#1FC7D4' fontSize="14px">0</Text>
+                                        </Flex>
+                                        <Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
+                                            <Text color='#6B6472' fontSize="14px">实际黄油成本：</Text>
+                                            <Text color='#1FC7D4' fontSize="14px">0</Text>
+                                        </Flex>
+                                    </BodyWrapper>
+                                </Divs>
+                            </StyledPage>
+                        </SwiperSlide>
+                    })
+                }
+            </SwiperDiv>
+        </MainDiv>
+    )
+}
+export default Nft