commit

src/components/ProductInfo.tsx

@@ -68,13 +68,22 @@ const ProductInfo = (props: ProductInfoProps) => {
       {data.type === 3 && !visibleTime && <div className='row-center mt-1'>
         <CountDown time={data.start_time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} onFinish={() => setVisibleTime(true)} />
       </div>}
-      {data.type !== 0 && <div className='mt-1 row-center'>
-        {data.type !== 3 && <i className={`iconfont icon-daohangshoucangyishoucang fz-20 ${isLike(data.id, likeNft) ? 'like-text' : 'sub-text'} mr-4`} onClick={() => setLike(data.id)} />}
+      <div className='mt-1 row-center'>
+        {data.type !== 3 && <i className={`iconfont icon-daohangshoucangyishoucang fz-20 ${isLike(data.id, likeNft) ? data.symbol + '-text' : 'sub-text'} mr-4`} onClick={() => setLike(data.id)} />}
         <i className='iconfont icon-shangchuandaochu fz-24' onClick={share} />
-      </div>}
+      </div>
       <div className='mt-3 fz-30 fz-wb-550'>{data.name}</div>
 
-      <div className={`price-tag mt-1 ${data.symbol}-bg`}>{data.symbol} {toThousands(data.price)}</div>
+      {
+        <div className='row-items'>
+          {
+            data.type === 0 && (
+              <div className='mr-1 fz-14  mt-1'>最近成交價</div>
+            )
+          }
+          <div className={`price-tag ${data.symbol}-bg  mt-1`}>{data.symbol} {toThousands(data.price)}</div>
+        </div>
+      }
 
       <div className='mt-3 row-between'>
         <div onClick={() => toShare('cast')}>
@@ -107,7 +116,7 @@ const ProductInfo = (props: ProductInfoProps) => {
         showConfirmButton
         backgroundColosed
       >
-        <div className='tac mt-2 like-text'>
+        <div className={`tac mt-2 ${data.symbol}-text`}>
           已複製鏈接
         </div>
       </Modal>

src/components/ProductItem.tsx

@@ -17,7 +17,7 @@ const ProductItem = (props: ProductItemProps) => {
       <div className='desc-box p-1'>
         <div className='tar fz-12'>{data.name}</div>
         <div className='row-justify-end mt-3px'>
-          <div className='price-tag fz-10'>{data?.symbol} {toThousands(data?.price)}</div>
+          <div className={`price-tag fz-10 ${data.symbol}-bg`}>{data?.symbol} {toThousands(data?.price)}</div>
           <div className='user-tag'>
             <img src={data.sell_url} className="user-img" alt="" />
             <div className='fz-10 ml-3px text-overflow'>{data.sell_name}</div>

src/pages/detail/AuctionNFT.tsx

@@ -52,14 +52,13 @@ const AuctionNFT = (props: AuctionNFTProps) => {
   return (
     <div className='mt-4 buy-nft'>
       <Button
-        className='button'
+        className={`button ${data.symbol}-bg`}
         style={{
-          background: 'linear-gradient(103deg, #1DD0DF -1%, #1DD0DF -1%, #1BEDFF -1%, #14BDEB 108%)',
           borderRadius: 10,
         }}
         onClick={openModal}
       >
-        <span className="fz-20 fz-wb-550">出價</span>
+        <span className="fz-20 fz-wb-550 white">出價</span>
       </Button>
       <Modal
         title={data.name}

src/pages/detail/BuyNft.tsx

@@ -19,7 +19,6 @@ const BuyNft = (props: BuyNftProps) => {
   const { push } = useRouter()
   const { userInfo, token } = store.state
   const [buyVisible, setBuyVisible] = useState(false)
-  const [successVisible, setSuccessVisible] = useState(false)
 
   const openBuyModal = () => {
     if (!token) return store.setVisibleUnLogin(true)
@@ -54,14 +53,13 @@ const BuyNft = (props: BuyNftProps) => {
   return (
     <div className='mt-4 buy-nft'>
       <Button
-        className='button'
+        className={`button ${data.symbol}-bg`}
         style={{
-          background: 'linear-gradient(103deg, #1DD0DF -1%, #1DD0DF -1%, #1BEDFF -1%, #14BDEB 108%)',
           borderRadius: 10,
         }}
         onClick={openBuyModal}
       >
-        <span className="fz-20 fz-wb-550">購買</span>
+        <span className="fz-20 fz-wb-550 white">購買</span>
       </Button>
       {/* Buy Modal */}
       <Modal

src/pages/detail/OnShelvesNFT.tsx

@@ -145,7 +145,7 @@ const OnShelvesNFT = (props: OnShelvesNFTProps) => {
 
 
           <div className="row-center mt-3">
-            <Button onClick={confirmSell} className={`markeup-button ${currentSymbol}-bg`}>確定出售</Button>
+            <Button onClick={confirmSell} className={`markeup-button ${currentSymbol}-bg`}>確定售賣</Button>
           </div>
         </div>
       </Modal>

src/pages/detail/RemoveMarketMyNFT.tsx

@@ -33,23 +33,23 @@ const RemoveMarketMyNFT = (props: RemoveMarketMyNFTProps) => {
   return (
     <div className='mt-4 buy-nft'>
       <Button
-        className='button'
+        className={`button ${data.symbol}-bg`}
         style={{
-          background: 'linear-gradient(103deg, #1DD0DF -1%, #1DD0DF -1%, #1BEDFF -1%, #14BDEB 108%)',
           borderRadius: 10,
         }}
         onClick={() => setVisible(true)}
       >
-        <span className="fz-20 fz-wb-550">下架</span>
+        <span className="fz-20 fz-wb-550 white">下架</span>
       </Button>
       <Modal
         title='確定下架嗎？'
         visible={visible}
         setVisible={setVisible}
-        buttonText={<div className='fz-wb-550 black'>確定下架</div>}
-        buttonClick={confirm}
+        showConfirmButton
       >
-        <></>
+        <div className='row-center'>
+          <Button onClick={confirm} className={`${data.symbol}-bg white fz-wb-550 mt-2`} style={{ width: '50%', borderRadius: 10 }}>確定下架</Button>
+        </div>
       </Modal>
     </div>
   )

src/pages/home/index.tsx

@@ -54,7 +54,7 @@ const Home = () => {
                               ) : (
                                 <div className='row-items'>
                                   <div>即將發售</div>
-                                  <div className='ml-1 fz-14 like-text mt-3px'>
+                                  <div className={`ml-1 fz-14 mt-3px ${item.symbol}-text`}>
                                     <CountDown time={item.start_time * 1000 - Date.now()} className={`${item.symbol}-text`} onFinish={() => store.updateIssueNftIsTime(index)} />
                                   </div>
                                 </div>
@@ -114,11 +114,11 @@ const Home = () => {
                       </div>
                     </div>
                     <div className='row-between'>
-                      <Button className='button' round onClick={() => push('/detail', { id: item.id, type: item.type })}>
-                        <div className='fz-wb-550'>出價</div>
+                      <Button className={`button ${item.symbol}-bg`} round onClick={() => push('/detail', { id: item.id, type: item.type })}>
+                        <div className='fz-wb-550 white'>出價</div>
                       </Button>
                       <i className={`
-                    iconfont icon-daohangshoucangyishoucang fz-18 ${like.isLike(item.id, likeNft) ? 'like-text' : 'sub-text'}
+                    iconfont icon-daohangshoucangyishoucang fz-18 ${like.isLike(item.id, likeNft) ? item.symbol + '-text' : 'sub-text'}
                     `} onClick={() => like.setLike(item.id)} />
                     </div>
                   </div>

src/pages/personal/AccountAssetsCard.tsx

@@ -37,7 +37,7 @@ const AccountAssetsCard = () => {
                   <div className='sub-color'>{item.title}</div>
                   <div className='mt-5px' style={{ wordBreak: 'break-word' }}>
                     <div className='mt-5px'>
-                      <span className='fz-24 fz-wb-550'>{toThousands(item.value)}</span>
+                      <span className='fz-20 fz-wb-550'>{toThousands(item.value)}</span>
                       <span className='ml-5px'>{item.symbol}</span>
                     </div>
                   </div>

src/pages/share/index.tsx

@@ -10,7 +10,7 @@ import { useRouter } from '~/hooks/useRouter'
 
 const Share = () => {
 
-  const { userInfo, token, likeNft, myNft } = store.state
+  const { userInfo, token, likeNft, myNft, shareTabIndex } = store.state
   const { push } = useRouter()
   const [visible, setVisible] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -151,6 +151,10 @@ const Share = () => {
       </div>
       <div className='mt-3'>
         <Tabs
+          defaultActive={shareTabIndex}
+          onChange={(_, index) => { 
+            store.setShareTabIndex(index)
+          }}
           lineWidth={100}
           background="none"
           titleInactiveColor='#000'

src/store/index.ts

@@ -22,6 +22,7 @@ class AppStore implements Store {
     sellNft: [] as MarketNFTData[], //售賣NFT
     issueNft: [] as MarketNFTData[], //發行搶購NFT
     rmdNft: [] as MarketNFTData[], //推薦NFT
+    shareTabIndex: 0,
   };
 
   constructor() {
@@ -139,6 +140,10 @@ class AppStore implements Store {
       this.state.buyNFTSuccessName = "";
     }
   }
+
+  setShareTabIndex(index: number) {
+    this.state.shareTabIndex = index;
+  }
 }
 
 const store = new AppStore();

src/styles/components.scss

@@ -30,7 +30,6 @@
     overflow: hidden;
 
     .price-tag{
-      background: linear-gradient(106deg, #320D6D 2%, #8A4CED 106%);
       color: $white;
       padding: 0px 15px 0px 5px;
       border-radius: 50px;
@@ -85,7 +84,6 @@
   }
 
   .price-tag{
-    // background: linear-gradient(104deg, #320D6D 3%, #8A4CED 106%);
     font-size: 14px;
     color: $white;
     padding: 8px 20px;

src/styles/global.scss

@@ -8,8 +8,7 @@ $colors:(
   red : $red,
   white : $white,
   black : $black,
-  page:$page,
-  like-text:$like
+  page:$page
 );
 
 $iterations: 5;