diff --git a/.postcssrc.js b/.postcssrc.js
index ae3cdf5..43d1ea8 100644
--- a/.postcssrc.js
+++ b/.postcssrc.js
@@ -1,22 +1,22 @@
 
-  module.exports = {
-    plugins: {
-      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
-      "postcss-px-to-viewport": {
-        unitToConvert: "px", // 要转化的单位
-        viewportWidth: 1080, // UI设计稿的宽度
-        unitPrecision: 6, // 转换后的精度，即小数点位数
-        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
-        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
-        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
-        selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
-        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
-        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
-        replace: true, // 是否转换后直接更换属性值
-        exclude: [/\/src\/views\/desktop\//], // 设置忽略文件，用正则做目录名匹配
-        landscape: false // 是否处理横屏情况
-      },
+  // module.exports = {
+  //   plugins: {
+  //     autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
+  //     "postcss-px-to-viewport": {
+  //       unitToConvert: "px", // 要转化的单位
+  //       viewportWidth: 1080, // UI设计稿的宽度
+  //       unitPrecision: 6, // 转换后的精度，即小数点位数
+  //       propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+  //       viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
+  //       fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
+  //       selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
+  //       minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+  //       mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+  //       replace: true, // 是否转换后直接更换属性值
+  //       exclude: [/\/src\/views\/desktop\//], // 设置忽略文件，用正则做目录名匹配
+  //       landscape: false // 是否处理横屏情况
+  //     },
       
-    }
-  };
+  //   }
+  // };
 
diff --git a/src/components/market/Dundialog.vue b/src/components/market/Dundialog.vue
index 4b1ff72..850d997 100644
--- a/src/components/market/Dundialog.vue
+++ b/src/components/market/Dundialog.vue
@@ -23,7 +23,8 @@
             <div class="hill">
               <div class="hill-content">
                 <div class="hill-name">
-                   {{ data.c_name ? data.c_name : data.detail.gun_name }}<span class="name">Name</span>
+                  {{ data.c_name ? data.c_name : data.detail.gun_name
+                  }}<span class="name">Name</span>
                 </div>
                 <div>
                   <img
@@ -231,13 +232,14 @@
     ></Transition>
     <div class="buy-price">
       <div class="mynft" v-if="isType === 'mynft'">
-         <!-- <div class="for-rent-btn" v-if="orderId">
-          <div class="adjust"  @click="handPutShow"></div>
+        <div class="for-rent-btn" v-if="data.selling > 0">
+          <div class="adjust" @click="handPutShow"></div>
           <div class="remove"></div>
-        </div> -->
-        <div class="rent"></div>
-        <div class="sell" @click="handPutShow">Sell</div>
-        
+        </div>
+        <div v-else>
+          <div class="rent"></div>
+          <div class="sell" @click="handPutShow">Sell</div>
+        </div>
       </div>
       <div class="maeket" v-else>
         <div class="price">
@@ -509,7 +511,7 @@ export default {
   margin-bottom: 13px;
 }
 .hero-item-def {
- margin-bottom: 13px;
+  margin-bottom: 13px;
 }
 .hero-item-cri {
   margin-bottom: 13px;
@@ -518,13 +520,13 @@ export default {
   margin-bottom: 13px;
 }
 .hero-item-dodge {
- margin-bottom: 13px;
+  margin-bottom: 13px;
 }
 .hero-item-reduces {
- margin-bottom: 13px;
+  margin-bottom: 13px;
 }
 .hero-item-speed {
- margin-bottom: 13px;
+  margin-bottom: 13px;
 }
 .hp-bottom {
   width: 435px;
@@ -588,19 +590,19 @@ export default {
     height: 100px;
     margin-right: 30px;
   }
-   .for-rent-btn {
+  .for-rent-btn {
     display: flex;
     .adjust {
       width: 384px;
       height: 89px;
-       cursor: pointer;
+      cursor: pointer;
       background: url("../../assets/market/hero/adjust.png") no-repeat;
       background-size: 100% 100%;
     }
     .remove {
       width: 384px;
       height: 89px;
-       cursor: pointer;
+      cursor: pointer;
       margin-left: 14px;
       background: url("../../assets/market/hero/remove.png") no-repeat;
       background-size: 100% 100%;
diff --git a/src/components/market/Herodialog.vue b/src/components/market/Herodialog.vue
index a4b7330..556e45e 100644
--- a/src/components/market/Herodialog.vue
+++ b/src/components/market/Herodialog.vue
@@ -53,7 +53,10 @@
             <div class="token-id">#{{ hero.detail.token_id }}</div>
             <div class="hill">
               <div class="hill-content">
-                <div class="hill-name">{{hero.c_name ? hero.c_name : hero.detail.hero_name}}<span class="name">Name</span></div>
+                <div class="hill-name">
+                  {{ hero.c_name ? hero.c_name : hero.detail.hero_name
+                  }}<span class="name">Name</span>
+                </div>
                 <div>
                   <img
                     width="34px"
@@ -272,12 +275,14 @@
     ></Transition>
     <div class="buy-price">
       <div class="mynft" v-if="isType === 'mynft'">
-        <!-- <div class="for-rent-btn" v-if="orderId">
+        <div class="for-rent-btn" v-if="hero.selling > 0">
           <div class="adjust" @click="handPutShow"></div>
           <div class="remove"></div>
-        </div> -->
-        <div class="rent"></div>
-        <div class="sell" @click="handPutShow">Sell</div>
+        </div>
+        <div v-else>
+          <div class="rent"></div>
+          <div class="sell" @click="handPutShow">Sell</div>
+        </div>
       </div>
       <div class="maeket" v-else>
         <div class="price">
@@ -630,14 +635,14 @@ export default {
     .adjust {
       width: 384px;
       height: 89px;
-       cursor: pointer;
+      cursor: pointer;
       background: url("../../assets/market/hero/adjust.png") no-repeat;
       background-size: 100% 100%;
     }
     .remove {
       width: 384px;
       height: 89px;
-       cursor: pointer;
+      cursor: pointer;
       margin-left: 14px;
       background: url("../../assets/market/hero/remove.png") no-repeat;
       background-size: 100% 100%;
@@ -652,7 +657,7 @@ export default {
   .hero-tab {
     width: 306px;
     height: 80px;
-     cursor: pointer;
+    cursor: pointer;
     font-size: 63px;
     font-family: "SairaStencilOne";
     font-weight: 400;
diff --git a/src/components/market/Piecedialog.vue b/src/components/market/Piecedialog.vue
index 8778504..f258901 100644
--- a/src/components/market/Piecedialog.vue
+++ b/src/components/market/Piecedialog.vue
@@ -73,12 +73,14 @@
       </div>
       <div class="buy-price">
         <div class="mynft" v-if="isType === 'mynft'">
-          <!-- <div class="for-rent-btn" v-if="orderId">
-            <div class="adjust"  @click="handPutShow"></div>
+          <div class="for-rent-btn" v-if="piece.selling > 0">
+            <div class="adjust" @click="handPutShow"></div>
             <div class="remove"></div>
-          </div> -->
-          <div class="rent"></div>
-          <div class="sell" @click="handPutShow">Sell</div>
+          </div>
+          <div v-else>
+            <div class="rent"></div>
+            <div class="sell" @click="handPutShow">Sell</div>
+          </div>
         </div>
         <div class="maeket" v-else>
           <div class="price">
diff --git a/src/components/market/nft/Chip.vue b/src/components/market/nft/Chip.vue
index 95b5d3b..91aeb27 100644
--- a/src/components/market/nft/Chip.vue
+++ b/src/components/market/nft/Chip.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <!-- <div class="no-sale">
-        <img
-              width="205px"
-              src="../../../assets/market/hero/no-sale.png"
-              alt=""
-            />
-    </div> -->
+    <div class="no-sale" v-if="chip.selling > 0" @click="chipDialog(chip)">
+      <img
+        width="205px"
+        src="../../../assets/market/hero/for-rent.png"
+        alt=""
+      />
+    </div>
     <div @click="chipDialog(chip)">
       <div class="chip-bg">
         <img
@@ -66,14 +66,14 @@
     <ChipBuyDialog
       :type="type"
       :isBuy="isBuy"
-       :data="chip"
+      :data="chip"
       @handBuyShow="handBuyShow"
       @handBuyHide="handBuyHide"
     ></ChipBuyDialog>
     <TheSellDialog
       :type="type"
       :data="chip"
-        v-if="currencyTypeList"
+      v-if="currencyTypeList"
       :currencyTypeList="currencyTypeList"
       :isPiecePut="isPiecePut"
       @handPutShow="handPutShow"
@@ -87,7 +87,7 @@ import ChipDialog from "../ChipDialog";
 import ChipBuyDialog from "../ChipBuyDialog.vue";
 import TheSellDialog from "../TheSellDialog.vue";
 export default {
-  props: ["chip", "isType",'currencyTypeList'],
+  props: ["chip", "isType", "currencyTypeList"],
   components: {
     ChipDialog,
     TheSellDialog,
@@ -125,7 +125,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .price-content {
   display: flex;
   align-items: center;
diff --git a/src/components/market/nft/HeroNft.vue b/src/components/market/nft/HeroNft.vue
index 69db9df..8029bfa 100644
--- a/src/components/market/nft/HeroNft.vue
+++ b/src/components/market/nft/HeroNft.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="container" @click="handDialog(data)">
-      <!-- <div class="no-sale">
+      <div class="no-sale" v-if="data.selling > 0">
         <div class="for-rent">
           <div class="for-rent-img">
             <img
@@ -10,9 +10,8 @@
               alt=""
             />
           </div>
-         
         </div>
-      </div> -->
+      </div>
       <div class="type-img" v-if="data.info !== null">
         <img
           v-if="data.info.is_genesis"
@@ -55,7 +54,7 @@
       </div>
       <div class="info">
         <div class="info-level">
-           <span>Lv:</span>
+          <span>Lv:</span>
           <span class="level"> {{ fillZero(levelNumber) }}</span>
         </div>
 
@@ -136,7 +135,7 @@ import TheSellDialog from "../TheSellDialog.vue";
     TheSellDialog,
     HeroBuyDialog,
   },
-  props: ["data", "isType",'currencyTypeList'],
+  props: ["data", "isType", "currencyTypeList"],
 })
 export default class HeroNft extends Vue {
   quality: any = 1;
diff --git a/src/components/market/nft/PieceNft.vue b/src/components/market/nft/PieceNft.vue
index 4f9df9a..4dbe1ea 100644
--- a/src/components/market/nft/PieceNft.vue
+++ b/src/components/market/nft/PieceNft.vue
@@ -7,13 +7,13 @@
         @click="showTip(piece)"
         :key="i"
       >
-        <!-- <div class="no-sale">
+        <div class="no-sale" v-if="piece.selling > 0">
           <img
             width="205px"
-            src="../../../assets/market/hero/no-sale.png"
+            src="../../../assets/market/hero/for-rent.png"
             alt=""
           />
-        </div> -->
+        </div>
         <div class="chip-bg">
           <img
             v-if="piece.c_id"
@@ -193,6 +193,7 @@ export default {
     background: #3c3c3c;
     border: 4px solid #cdd8fd;
     opacity: 0.8;
+    z-index: 99;
     border-radius: 16px;
   }
 }
diff --git a/src/components/market/nft/WeaponList.vue b/src/components/market/nft/WeaponList.vue
index afb9b26..8cec2f3 100644
--- a/src/components/market/nft/WeaponList.vue
+++ b/src/components/market/nft/WeaponList.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <!-- <div class="no-sale">
-      <img width="205px" src="../../../assets/market/hero/no-sale.png" alt="" />
-    </div> -->
+    <div class="no-sale" v-if="weapon.selling > 0" @click="chipDialog">
+      <img width="205px" src="../../../assets/market/hero/for-rent.png" alt="" />
+    </div>
     <div @click="chipDialog">
       <div class="gun-bg">
         <img
diff --git a/src/components/mobile/main/HeroBuyTop.vue b/src/components/mobile/main/HeroBuyTop.vue
index ba9a30f..e636bf3 100644
--- a/src/components/mobile/main/HeroBuyTop.vue
+++ b/src/components/mobile/main/HeroBuyTop.vue
@@ -1,20 +1,19 @@
 <template>
   <div class="hero-top">
     <div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
-      <div>
+      <div class="hero-img">
         <img
           v-if="data.c_id"
-          width="hero-img"
-          :src="require('@/assets/market/hero/' + data.c_id + '.png')"
+           :src="require('@/assets/mobile/market/hero/' + data.c_id + '.png')"
           alt=""
         />
       </div>
       <div class="gen" v-if="data.info.is_genesis">
         <img width="31px" src="../../assets/market/hero/gen.png" alt="" />
       </div>
-      <div class="hero-name">
+      <!-- <div class="hero-name">
         {{ data.c_name }}
-      </div>
+      </div> -->
     </div>
     <div class="hero-right">
       <div class="userinfo">
@@ -23,15 +22,15 @@
           <div>ERC721</div>
         </div>
         <div class="token-id">
-          <div>token-id</div>
+          <div class="token-lable">Token-id</div>
           <div>#{{ data.token_id }}</div>
         </div>
       </div>
       <div class="priece">
         <div class="priece-btn">
-          <span class="priece-number">{{
-            data.s_price ? data.s_price : " "
-          }}</span>
+          <div class="priece-number">
+            {{ data.s_price ? data.s_price : " " }}
+          </div>
         </div>
       </div>
     </div>
@@ -58,27 +57,45 @@ export default {
     font-weight: bold;
     color: #ffffff;
     .userinfo {
-      width: 371px;
-      height: 87px;
-      font-size: 25px;
-      font-weight: bold;
-      color: #ffffff;
-      background: #28c1ed;
-      border: 4px solid rgba(91, 211, 246, 0.4);
-      border-radius: 18px;
       .srabded {
         display: flex;
         margin-top: 10px;
         margin-bottom: 10px;
-        margin-right: 18px;
         margin-left: 19px;
+        width: 291px;
+        height: 75px;
+        padding-left: 18px;
+        padding-right: 19px;
+        background: #28c1ed;
+        border: 4px solid rgba(91, 211, 246, 0.4);
+        border-radius: 18px;
+        align-items: center;
+        font-size: 38px;
+        font-family: "Bahnschrift";
+        font-weight: bold;
         justify-content: space-between;
       }
       .token-id {
         display: flex;
+        flex-direction: column;
         margin-left: 19px;
-        margin-right: 18px;
-        justify-content: space-between;
+        font-size: 33px;
+        font-family: "Bahnschrift";
+        font-weight: bold;
+        color: #ffffff;
+        width: 327px;
+        height: 112px;
+        background: #28c1ed;
+        border: 4px solid rgba(91, 211, 246, 0.4);
+        border-radius: 18px;
+        justify-content: center;
+        align-items: center;
+      }
+      .token-lable {
+        font-size: 38px;
+        font-family: "Bahnschrift";
+        font-weight: bold;
+        color: #ffffff;
       }
     }
     .priece {
@@ -87,31 +104,34 @@ export default {
       justify-content: flex-end;
 
       .priece-btn {
-        width: 158px;
-        height: 63px;
+        width: 231px;
+        height: 81px;
         font-size: 25px;
         font-weight: bold;
         margin-top: 22px;
         position: relative;
-        line-height: 63px;
+        line-height: 81px;
         //   text-align: center;
         background: url("../../../assets/market/hero/price.png") no-repeat;
         background-size: 100% 100%;
         .priece-number {
-          position: absolute;
-          left: 55px;
-          top: 2px;
+          margin-left: 75px;
         }
       }
     }
   }
 }
 .hero-img {
-  width: 272px;
+  width: 100%;
+    height: 100%;
+  img{
+    width: 100%;
+    height: 100%;
+  }
 }
 .piece-left {
- width: 272px;
-height: 303px;
+  width: 272px;
+  height: 303px;
   position: relative;
   background: url("../../../assets/market/hero/type-1.png") no-repeat;
   background-size: 100% 100%;
@@ -130,13 +150,13 @@ height: 303px;
     color: #fff;
     bottom: 0px;
   }
-  img{
+  img {
     width: 100%;
   }
 }
 .piece-left-gen {
- width: 272px;
-height: 303px;
+  width: 272px;
+  height: 303px;
   background: url("../../../assets/market/hero/type-0.png") no-repeat;
   background-size: 100% 100%;
   position: relative;
@@ -160,7 +180,7 @@ height: 303px;
     color: #fff;
     bottom: 0px;
   }
-  img{
+  img {
     width: 100%;
   }
 }
diff --git a/src/components/mobile/main/TheBuyDialog.vue b/src/components/mobile/main/TheBuyDialog.vue
index d658f98..677fbd7 100644
--- a/src/components/mobile/main/TheBuyDialog.vue
+++ b/src/components/mobile/main/TheBuyDialog.vue
@@ -3,7 +3,7 @@
     <div class="messageMaskContent content">
       <div class="price-title">PRIECE SETTIONG</div>
       <div class="container">
-        <HeroBuyTop :data="piece"></HeroBuyTop>
+        <HeroBuyTop :data="piece" :type="type"></HeroBuyTop>
         <div class="priece-bottom">
           <div class="token-usid">
             <div class="token-item-top">
@@ -35,12 +35,11 @@
             </div>
           </div>
         </div>
-        <div class="pending">
-          <div class="pending-order" @click="handMessage">PEBDING ORDER</div>
-          <div class="confirm">CONFIRM</div>
-        </div>
       </div>
-
+      <div class="pending">
+        <div class="pending-order" @click="handMessage">PEBDING ORDER</div>
+        <div class="confirm">CONFIRM</div>
+      </div>
       <span @click="closeTip" class="close">
         <img src="../../../assets/market/hero/cose.png" alt="" />
       </span>
@@ -127,11 +126,11 @@ export default {
   }
 }
 .container {
-  padding-top: 28px;
-  padding-left: 35px;
-  padding-right: 34px;
-  padding-bottom: 33px;
-  height: 540px;
+  // padding-top: 28px;
+  padding-left: 68px;
+  padding-right: 66px;
+  // padding-bottom: 33px;
+  // height: 540px;
   position: relative;
   .price-title {
     font-size: 33px;
@@ -194,9 +193,8 @@ export default {
           background: url("../../../assets/market/hero/price.png") no-repeat;
           background-size: 100% 100%;
           .priece-number {
-            position: absolute;
-            left: 55px;
-            top: 2px;
+            margin-left: 30px;
+            line-height: 63px;
           }
         }
       }
@@ -208,16 +206,15 @@ export default {
     .token-usid {
       width: 622px;
       height: 249px;
+      margin: 0 auto;
       background: rgba(26, 58, 175, 0.3);
       border-radius: 20px;
       .token-item-top {
         display: flex;
-        height: 50px;
-        // width: 100%;
-        // padding-top: 15px;
-        padding-left: 25px;
-        padding-right: 55px;
-        font-size: 26px;
+        height: 81px;
+        padding-left: 38px;
+        padding-right: 39px;
+        font-size: 42px;
         font-weight: bold;
         color: #ffffff;
         align-items: center;
@@ -228,24 +225,24 @@ export default {
       .token-item {
         display: flex;
         justify-content: space-between;
-        padding-top: 20px;
+        padding-top: 34px;
         color: #ffffff;
-        padding-right: 55px;
-        font-size: 22px;
+        padding-right: 40px;
+        padding-left: 42px;
+        font-size: 35px;
         font-weight: 600;
         color: #ffffff;
-        padding-left: 27px;
       }
       .token-item-balance {
         display: flex;
         justify-content: space-between;
-        padding-top: 15px;
+        padding-top: 33px;
         color: #ffffff;
-        padding-right: 55px;
-        font-size: 22px;
+        padding-right: 40px;
+        padding-left: 42px;
+        font-size: 35px;
         font-weight: 600;
         color: #ffffff;
-        padding-left: 27px;
         .balance {
           font-weight: 600;
           color: #ff3b3b;
@@ -257,7 +254,7 @@ export default {
       margin-top: 10px;
       .title {
         text-align: center;
-        font-size: 22px;
+        font-size: 32px;
         font-weight: 600;
         color: #fe3c3e;
       }
@@ -266,21 +263,21 @@ export default {
         align-items: center;
         justify-content: center;
         .approve-progress {
-          width: 17px;
-          height: 17px;
+          width: 27px;
+          height: 26px;
           background: rgba(43, 204, 237, 1);
           border: 2px solid #557cda;
           border-radius: 50%;
         }
         .boder {
-          width: 250px;
+          width: 380px;
           height: 2px;
           background: #cfdcff;
           border-radius: 1px;
         }
         .buy-progress {
-          width: 17px;
-          height: 17px;
+          width: 27px;
+          height: 26px;
           background: #ffffff;
           border: 2px solid #557cda;
           border-radius: 50%;
@@ -290,7 +287,7 @@ export default {
         display: flex;
         margin-left: 106px;
         margin-right: 133px;
-        font-size: 22px;
+        font-size: 33px;
         font-weight: 600;
         color: #ffffff;
         margin-top: 6px;
@@ -301,25 +298,25 @@ export default {
 
   .pending {
     position: absolute;
-    right: 95px;
+    right: 56px;
     bottom: -125px;
     font-size: 26px;
     .pending-order {
-      width: 426px;
-      height: 76px;
+      width: 647px;
+      height: 115px;
       text-align: center;
       color: #ffffff;
       cursor: pointer;
-      line-height: 76px;
+      line-height: 115px;
       margin-bottom: 47px;
       background: url("../../../assets/market/dialog/order.png") no-repeat;
       background-size: 100% 100%;
     }
     .confirm {
-      width: 426px;
-      height: 76px;
+      width: 647px;
+      height: 115px;
       text-align: center;
-      line-height: 76px;
+      line-height: 115px;
       cursor: pointer;
       color: #9dabd3;
       background: url("../../../assets/market/dialog/confirm.png") no-repeat;
diff --git a/src/components/mobile/main/WeaponBuyTop.vue b/src/components/mobile/main/WeaponBuyTop.vue
new file mode 100644
index 0000000..e69de29