diff --git a/.env.development b/.env.development
index 1b7d5b3..bc82b1a 100644
--- a/.env.development
+++ b/.env.development
@@ -1,9 +1,9 @@
 VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
 VUE_APP_BASE_API='http://game2006api-test.kingsome.cn'
-VUE_APP_CHAIN_ID=1338
-VUE_APP_CHAIN_RPC='http://192.168.100.22:8545'
+VUE_APP_CHAIN_ID=97
+VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
 VUE_APP_CHAIN_NAME='Smart Chain - Testnet'
-VUE_APP_CHAIN_EXPLORERURL = 'https://testnet.bscscan.com'
+VUE_APP_CHAIN_EXPLORERURL='https://testnet.bscscan.com'
 VUE_APP_CHAIN_CURRENCY_NAME='name'
 VUE_APP_CHAIN_CURRENCY_SYMBOL='BNB'
 VUE_APP_CHAIN_CURRENCY_DECIMALS=18
diff --git a/.env.production b/.env.production
index 727237f..9a5223b 100644
--- a/.env.production
+++ b/.env.production
@@ -1,9 +1,9 @@
 VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
-VUE_APP_BASE_API='http://192.168.100.21:81'
-VUE_APP_CHAIN_ID=1338
-VUE_APP_CHAIN_RPC='http://192.168.100.22:8545'
+VUE_APP_BASE_API='https://market.cebg.games'
+VUE_APP_CHAIN_ID=97
+VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545'
 VUE_APP_CHAIN_NAME='Smart Chain - Testnet'
-VUE_APP_CHAIN_EXPLORERURL = 'https://testnet.bscscan.com'
+VUE_APP_CHAIN_EXPLORERURL='https://testnet.bscscan.com'
 VUE_APP_CHAIN_CURRENCY_NAME='name'
 VUE_APP_CHAIN_CURRENCY_SYMBOL='BNB'
 VUE_APP_CHAIN_CURRENCY_DECIMALS=18
diff --git a/public/assets/fonts/zitic.ttf b/public/assets/fonts/zitic.ttf
index 6c5b13f..6c0454c 100755
Binary files a/public/assets/fonts/zitic.ttf and b/public/assets/fonts/zitic.ttf differ
diff --git a/public/assets/fonts/zitic_b.ttf b/public/assets/fonts/zitic_b.ttf
new file mode 100755
index 0000000..6c5b13f
Binary files /dev/null and b/public/assets/fonts/zitic_b.ttf differ
diff --git a/public/index.html b/public/index.html
index 1b9f088..8506238 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,22 +2,24 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet"
-          href="https://fonts.googleapis.com/css?family=Oxanium">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <!--    <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script src="/assets/libs/spine-webgl.js"></script>
+    <script src="assets/libs/spine-webgl.js"></script>
     <style>
         @font-face {
             font-family: title;
-            src: url('/assets/fonts/title.ttf');
+            src: url('assets/fonts/title.ttf');
         }
         @font-face {
             font-family: zitic;
-            src: url('/assets/fonts/zitic.ttf');
+            src: url('assets/fonts/zitic.ttf');
+        }
+        html *
+        {
+            font-family: zitic,serif;
         }
         .video-js .vjs-big-play-button {
             top: 0;
diff --git a/src/components/main/GamePlaySection.vue b/src/components/main/GamePlaySection.vue
index 010bf54..7ee44df 100644
--- a/src/components/main/GamePlaySection.vue
+++ b/src/components/main/GamePlaySection.vue
@@ -157,13 +157,13 @@ export default class extends Vue {
   width: 600px;
   height: 800px;
   position: absolute;
-  left: 100px;
+  left: 1px;
   bottom: 10px;
 }
 .hero-anim-img {
   width: 600px;
   position: absolute;
-  left: 100px;
+  left: 1px;
   bottom: 10px;
 }
 .bottom-cover{
@@ -203,6 +203,7 @@ export default class extends Vue {
 @media (max-width: 767px) {
   .title {
     top: 60px;
+    width: 90vw;
   }
   .title img {
     width: 100%;
@@ -210,11 +211,11 @@ export default class extends Vue {
   .hero-anim{
     width: 450px;
     height: 600px;
-    left: 10px;
+    left: 1px;
   }
   .hero-anim-img{
     width: 50vw;
-    left: 10px;
+    left: 1px;
     height: auto;
     bottom: 20vh;
   }
@@ -277,7 +278,13 @@ export default class extends Vue {
   .hero-anim{
     width: 200px;
     height: 500px;
-    left: 10px;
+    left: 1px;
+  }
+  .hero-anim-img{
+    width: 50vw;
+    left: 1px;
+    height: auto;
+    bottom: 20vh;
   }
   .color-content {
     width: 70%;
diff --git a/src/components/main/HomeHero.vue b/src/components/main/HomeHero.vue
index c7d2a9b..b4c954d 100644
--- a/src/components/main/HomeHero.vue
+++ b/src/components/main/HomeHero.vue
@@ -14,7 +14,6 @@ declare module 'vue/types/vue' {
     data: ISpineData
   }
 }
-// TODO:: 光效果显示一段时间后, 在显示英雄
 @Component({
   name: 'HomeHero',
   props: ['data'],
diff --git a/src/components/main/MainFooter.vue b/src/components/main/MainFooter.vue
index 6446b0f..113495b 100644
--- a/src/components/main/MainFooter.vue
+++ b/src/components/main/MainFooter.vue
@@ -4,14 +4,14 @@
       <img src="@/assets/main/p1/icon_logo_t.png">
     </div>
     <div class="centerPart link-list">
-      <a href="">Home</a>
-      <a href="">Instruction</a>
-      <a href="">About</a>
-      <a href="">Marketplace</a>
-      <a href="">Contact us</a>
-      <a href="">Blog</a>
-      <a href="">Policy</a>
-      <a href="">Whitepaper</a>
+      <a href="https://www.cebg.games">Home</a>
+      <a href="#">Instruction</a>
+      <a href="#">About</a>
+      <a href="#">Marketplace</a>
+      <a href="#">Contact us</a>
+      <a href="#">Blog</a>
+      <a href="#">Policy</a>
+      <a href="https://whitepaper.cebg.games">Whitepaper</a>
     </div>
     <div class="rightPart">
       <span class="community-title">JOIN OUR COMMUNITY</span>
diff --git a/src/components/main/MainHeader.vue b/src/components/main/MainHeader.vue
index 9b6979b..58dc958 100644
--- a/src/components/main/MainHeader.vue
+++ b/src/components/main/MainHeader.vue
@@ -21,9 +21,9 @@
         <li data-menuanchor="nft"  @click="changeSection"  :class="{'active': currentSection === 'nft'}">
           <a href="#nft_section">Pre-sale</a>
         </li>
-        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">
-          <a href="#chip_section">Chip</a>
-        </li>
+<!--        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">-->
+<!--          <a href="#chip_section">Chip</a>-->
+<!--        </li>-->
         <li v-if="accountId">
           <a href="mynft" >Mine</a>
         </li>
@@ -46,9 +46,9 @@
         <li data-menuanchor="nft"  @click="changeSection"  :class="{'active': currentSection === 'nft'}">
           <a href="#nft_section">Pre-sale</a>
         </li>
-        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">
-          <a href="#chip_section">CHIP</a>
-        </li>
+<!--        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">-->
+<!--          <a href="#chip_section">CHIP</a>-->
+<!--        </li>-->
         <li v-if="accountId">
           <a href="mynft" >Mine</a>
         </li>
@@ -220,7 +220,7 @@ export default class extends Vue {
     top: 40px;
     right: 0;
     width: 50vw;
-    background-image: url('../../assets/main/p1/bg_header.png');
+    background-color: #282828d9;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     justify-content: flex-start;
diff --git a/src/components/main/NftSection.vue b/src/components/main/NftSection.vue
index e1403dd..75af27d 100644
--- a/src/components/main/NftSection.vue
+++ b/src/components/main/NftSection.vue
@@ -205,6 +205,7 @@ export default class extends Vue {
         const priceData: any = data.currency_list[0]
         heroData.discount = priceData.discount_rate
         heroData.price = priceData.original_price
+        heroData.decimals = priceData.decimals || 0
         heroData.priceDiscount = priceData.discount_price
         heroData.currency = priceData.name
         heroData.coinAddress = priceData.contract_address
diff --git a/src/components/market/NftItem.vue b/src/components/market/NftItem.vue
index 329359b..2deb97d 100644
--- a/src/components/market/NftItem.vue
+++ b/src/components/market/NftItem.vue
@@ -7,8 +7,8 @@
       <div class="info-div" v-if="data.showBuy" @click="buyItem" :class="{'gray': data.stopBuy}">
         <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>
         <div class="price-label">
-          <span :class="{'price': data.price !== data.priceDiscount}">{{data.priceDiscount || data.price}} {{data.currency}}</span>
-          <span v-if="data.price!==data.priceDiscount" class="price-old">{{data.price}} {{data.currency}}</span>
+          <span :class="{'price': data.price !== data.priceDiscount}">{{priceDiscountShow}} {{data.currency}}</span>
+          <span v-if="data.price!==data.priceDiscount" class="price-old">{{priceShow}} {{data.currency}}</span>
         </div>
       </div>
       <div class="class-div">
@@ -46,6 +46,16 @@ export default class extends Vue {
     return AppModule.walletConnected
   }
 
+  get priceDiscountShow() {
+    const v = Math.pow(10, this.data.decimals!)
+    return (this.data.priceDiscount! / v).toFixed(3)
+  }
+
+  get priceShow() {
+    const v = Math.pow(10, this.data.decimals!)
+    return (this.data.price! / v).toFixed(3)
+  }
+
   get accountId() {
     return AppModule.accountId
   }
@@ -71,20 +81,22 @@ export default class extends Vue {
     EventBus.$emit(PRESALE_BEGIN)
     const account = AppModule.accountId
     try {
+      const price = this.bc.parsePrice(this.data.priceDiscount!, this.data.decimals!)
       const { nonce, signature } = await this.bc.signPresale({
         type: this.data.recordId!,
         paymentTokenAddress: this.data.coinAddress!,
-        price: this.data.priceDiscount!,
+        price,
         buyerAddress: account
       })
       const buyData = {
         buyer_address: AppModule.accountId,
         type: this.data.recordId,
-        price: this.data.priceDiscount,
+        price,
         payment_token_address: this.data.coinAddress,
         nonce,
         signature
       }
+      await this.bc.increaseAllowance(this.data.coinAddress!, price)
       const res: any = await buyBox(buyData)
       const orderId = res.order_id
       localStorage.setItem('tmp_presale_order_id', orderId)
diff --git a/src/decorators/singleton.decorator.ts b/src/decorators/singleton.decorator.ts
index f48993e..ba31acf 100644
--- a/src/decorators/singleton.decorator.ts
+++ b/src/decorators/singleton.decorator.ts
@@ -2,7 +2,6 @@
  * @singleton
  * class Test {}
  * new Test() === new Test() // returns `true`
- * 也可以不使用 decorator
  * const TestSingleton = singleton(Test)
  * new TestSingleton() === new TestSingleton() //returns 'true'
  */
diff --git a/src/utils/SpineRender.ts b/src/utils/SpineRender.ts
index 6e3a784..e850124 100644
--- a/src/utils/SpineRender.ts
+++ b/src/utils/SpineRender.ts
@@ -26,6 +26,7 @@ export interface ISpineData {
   discount?: number
   recordId?: number
   coinAddress?: string
+  decimals?: number
   directBuy?: boolean
   showBuy?: boolean
   stopBuy?: boolean
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 8da18cc..39e5c43 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -4,15 +4,18 @@ import Web3Modal, { isMobile } from 'web3modal'
 import { AppModule } from '@/store/modules/app'
 import Web3 from 'web3'
 import { MessageBox } from 'element-ui'
+import { ERC20ABI, MALL_ADDRESS } from '@/utils/config_chain'
 
 @singleton
 export class BlockChain {
   provider:any
   web3: Web3
   web3Modal: Web3Modal
+  coinInstanceMap: Map<string, any>
 
   constructor() {
     const chainId = parseInt(process.env.VUE_APP_CHAIN_ID!)
+    this.coinInstanceMap = new Map()
     AppModule.updateChainID(chainId)
     const rpc: any = { }
     rpc[chainId] = process.env.VUE_APP_CHAIN_RPC!
@@ -41,6 +44,11 @@ export class BlockChain {
     }
   }
 
+  loadJson(url: string) {
+    return fetch(url)
+      .then(response => response.json())
+  }
+
   get isWalletConnect() {
     return !!this.web3Modal.cachedProvider
   }
@@ -75,11 +83,30 @@ export class BlockChain {
       if (accounts && accounts.length > 0) {
         AppModule.updateAccount(accounts[0])
       }
+
       AppModule.updateWalletStatus(true)
     } catch (err) {
     }
   }
 
+  private async initInstance(abi: any, address: string, account: string) {
+    return new this.web3.eth.Contract(
+      abi,
+      address,
+      { from: account }
+    )
+  }
+
+  private async getCoinInstance(address: string) {
+    if (this.coinInstanceMap.has(address)) {
+      return this.coinInstanceMap.get(address)
+    } else {
+      const coinInstance = await this.initInstance(ERC20ABI, address, AppModule.accountId)
+      this.coinInstanceMap.set(address, coinInstance)
+      return coinInstance
+    }
+  }
+
   public async disconnect() {
     try {
       await this.provider?.disconnect()
@@ -163,7 +190,7 @@ export class BlockChain {
   public async signPresale({ type, paymentTokenAddress, price, buyerAddress }:
                              {type: number
                                paymentTokenAddress: string
-                               price: number
+                               price: any
                                buyerAddress: string
                              }) {
     const nonce = Math.random() * 100000 | 0
@@ -175,4 +202,15 @@ export class BlockChain {
     signature = signature.replace(/00$/, '1b').replace(/01$/, '1c')
     return { nonce, signature }
   }
+
+  public async increaseAllowance(address: string, price: string) {
+    const coinInstance: any = await this.getCoinInstance(address)
+    await coinInstance.methods.increaseAllowance(MALL_ADDRESS, price).send({ gas: 1000000 })
+  }
+
+  public parsePrice(price: number, decimals: number) {
+    const v = Math.pow(10, decimals)
+    const priceStr = (price / v) + ''
+    return this.web3.utils.toWei(priceStr)
+  }
 }
diff --git a/src/utils/config_chain.ts b/src/utils/config_chain.ts
new file mode 100644
index 0000000..b8bd4d2
--- /dev/null
+++ b/src/utils/config_chain.ts
@@ -0,0 +1,290 @@
+export const ERC20ABI = [
+  {
+    inputs: [
+      {
+        internalType: 'string',
+        name: 'name_',
+        type: 'string'
+      },
+      {
+        internalType: 'string',
+        name: 'symbol_',
+        type: 'string'
+      }
+    ],
+    stateMutability: 'nonpayable',
+    type: 'constructor'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'owner',
+        type: 'address'
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'spender',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'value',
+        type: 'uint256'
+      }
+    ],
+    name: 'Approval',
+    type: 'event'
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'from',
+        type: 'address'
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'to',
+        type: 'address'
+      },
+      {
+        indexed: false,
+        internalType: 'uint256',
+        name: 'value',
+        type: 'uint256'
+      }
+    ],
+    name: 'Transfer',
+    type: 'event'
+  },
+  {
+    inputs: [],
+    name: 'name',
+    outputs: [
+      {
+        internalType: 'string',
+        name: '',
+        type: 'string'
+      }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    inputs: [],
+    name: 'symbol',
+    outputs: [
+      {
+        internalType: 'string',
+        name: '',
+        type: 'string'
+      }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    inputs: [],
+    name: 'decimals',
+    outputs: [
+      {
+        internalType: 'uint8',
+        name: '',
+        type: 'uint8'
+      }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    inputs: [],
+    name: 'totalSupply',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'account',
+        type: 'address'
+      }
+    ],
+    name: 'balanceOf',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'recipient',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256'
+      }
+    ],
+    name: 'transfer',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool'
+      }
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'owner',
+        type: 'address'
+      },
+      {
+        internalType: 'address',
+        name: 'spender',
+        type: 'address'
+      }
+    ],
+    name: 'allowance',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256'
+      }
+    ],
+    stateMutability: 'view',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'spender',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256'
+      }
+    ],
+    name: 'approve',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool'
+      }
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'sender',
+        type: 'address'
+      },
+      {
+        internalType: 'address',
+        name: 'recipient',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256'
+      }
+    ],
+    name: 'transferFrom',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool'
+      }
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'spender',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'addedValue',
+        type: 'uint256'
+      }
+    ],
+    name: 'increaseAllowance',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool'
+      }
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  },
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'spender',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'subtractedValue',
+        type: 'uint256'
+      }
+    ],
+    name: 'decreaseAllowance',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool'
+      }
+    ],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]
+
+export const MALL_ADDRESS = '0x31F29C9A3D0c1c13C825475aebF0d964b5B47c45'
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 317d5eb..695b0e6 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -9,7 +9,6 @@
       <video-section></video-section>
       <game-play-section></game-play-section>
       <nft-section></nft-section>
-      <chip-section></chip-section>
       <main-footer></main-footer>
     </main>
   </div>
@@ -22,13 +21,11 @@ import HomeSection from '@/components/main/HomeSection.vue'
 import VideoSection from '@/components/main/VideoSection.vue'
 import GamePlaySection from '@/components/main/GamePlaySection.vue'
 import NftSection from '@/components/main/NftSection.vue'
-import ChipSection from '@/components/main/ChipSection.vue'
 import MainFooter from '@/components/main/MainFooter.vue'
 @Component({
   name: 'Index',
   components: {
     MainFooter,
-    ChipSection,
     NftSection,
     GamePlaySection,
     VideoSection,
