diff --git a/src/components/mobile/main/ChipList.vue b/src/components/mobile/main/ChipList.vue
index 6be40fc..0a7fae2 100644
--- a/src/components/mobile/main/ChipList.vue
+++ b/src/components/mobile/main/ChipList.vue
@@ -183,6 +183,7 @@ export default {
   height: 531px;
   padding-top: 45px;
   padding-left: 46px;
+  // margin: 0 auto;
   // padding-right: 31px;
   margin-bottom: 20px;
   background: url("../../../assets/mobile/market/chip/bg.png") no-repeat;
diff --git a/src/components/mobile/main/ChipModal.vue b/src/components/mobile/main/ChipModal.vue
index f143373..fa308fd 100644
--- a/src/components/mobile/main/ChipModal.vue
+++ b/src/components/mobile/main/ChipModal.vue
@@ -79,7 +79,11 @@
         </div>
       </div>
       <div class="mynft-sell" v-if="isType == 'mynft'">
-        <div class="sell" @click="handPutShow">Sell</div>
+         <div class="for-rent-btn" v-if="chip.o_link > 0">
+            <div class="adjust" @click="handPutShow"></div>
+            <div class="remove" @click="handRemove"></div>
+          </div>
+        <div class="sell" @click="handPutShow" v-else>Sell</div>
       </div>
       <div class="buy-price" v-else>
         <div class="price"><span class="price-number">{{formatPriceShow(chip.s_price,18)}}</span></div>
@@ -98,6 +102,9 @@
 import { formatSelect } from "@/utils/UTCTime";
 import { formatPrice } from "@/utils/chain.util";
 import { formatAddress } from "@/utils/formatAddress";
+import { AppModule } from "@/store/modules/app";
+import { CONTRACT_ADDRESS } from "@/configs/config_chain";
+import ChainManager from "@/chain/ChainManager";
 export default {
   props: ["isType"],
   name: "HeroModal",
@@ -105,6 +112,8 @@ export default {
     return {
       detailVisible: false,
       chip: "",
+      loadingInstance:null,
+      chainManager: new ChainManager(),
       chipArrid: {
         39: "Hp Pct",
         40: "Atk Pct",
@@ -152,6 +161,40 @@ export default {
     handBuyShow() {
       this.$emit("handBuyShow", this.chip);
     },
+    async handRemove() {
+    
+      try {
+        this.showLoading()
+        const nftres = await this.chainManager.bc.beginCancelOrder(
+          this.chip.o_link,
+          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+        );
+         if (nftres.status == true) {
+          this.$emit("handMessage", 1); 
+          this.hideLoading();
+           setTimeout(() => {
+            this.$emit("handMessageHide");
+            this.$emit("on-close");
+            setTimeout(() => {
+              this.$emit("getMarketNftList");
+            }, 1000);
+          }, 1000);
+        }
+      } catch (err) {
+        console.log("query order status error", err);
+        this.hideLoading();
+          this.$emit("handMessage", 1);
+      }
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+
+    hideLoading() {
+      this.loadingInstance?.close();
+    },
   },
 };
 </script>
@@ -407,6 +450,24 @@ export default {
     background: url("../../../assets/market/hero/sell-mb-btn.png") no-repeat;
     background-size: 100% 100%;
   }
+    .for-rent-btn {
+    display: flex;
+    .adjust {
+      width: 344px;
+      height: 89px;
+      cursor: pointer;
+      background: url("../../../assets/market/hero/adjust.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .remove {
+      width: 344px;
+      height: 89px;
+      cursor: pointer;
+      margin-left: 14px;
+      background: url("../../../assets/market/hero/remove.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }
 .buy-price {
   position: absolute;
diff --git a/src/components/mobile/main/HeroList.vue b/src/components/mobile/main/HeroList.vue
index fa9cc1f..f84be5c 100644
--- a/src/components/mobile/main/HeroList.vue
+++ b/src/components/mobile/main/HeroList.vue
@@ -140,7 +140,7 @@ export default {
   width: 100%;
   display: flex;
   margin-top: 34px;
-  margin-left: 27px;
+  margin-left: 39px;
   margin-right: 27px;
   flex-direction: row;
   justify-content: flex-start;
diff --git a/src/components/mobile/main/HeroModal.vue b/src/components/mobile/main/HeroModal.vue
index 4fe5dcb..169fa37 100644
--- a/src/components/mobile/main/HeroModal.vue
+++ b/src/components/mobile/main/HeroModal.vue
@@ -50,7 +50,9 @@
         <div class="hero-bottom">
           <div class="hero-right-token">
             <div class="token-name">TOKEN ID</div>
-            <div class="token-id">#{{hero.detail.token_id? hero.detail.token_id :''}}</div>
+            <div class="token-id">
+              #{{ hero.detail.token_id ? hero.detail.token_id : "" }}
+            </div>
             <div class="hill">
               <div class="hill-content">
                 <div class="hill-name">
@@ -237,11 +239,17 @@
       </div>
       <MosaicChip v-if="isTabs" :data="hero"></MosaicChip>
       <div class="mynft-sell" v-if="isType == 'mynft'">
-        <div class="sell" @click="handPutShow">Sell</div>
+        <div class="for-rent-btn" v-if="hero.o_link > 0">
+          <div class="adjust" @click="handPutShow(hero)"></div>
+          <div class="remove" @click="handremove"></div>
+        </div>
+        <div class="sell" @click="handPutShow" v-else>Sell</div>
       </div>
       <div class="buy-price" v-else>
         <div class="price">
-          <span class="price-number">{{formatPriceShow(hero.s_price,18)  }}</span>
+          <span class="price-number">{{
+            formatPriceShow(hero.s_price, 18)
+          }}</span>
         </div>
         <div class="buy-img" @click="handBuyShow">
           <img src="../../../assets/market/hero/buy.png" alt="aoi-hero" />
@@ -263,6 +271,9 @@ import MosaicChip from "./MosaicChip.vue";
 import { formatAddress } from "@/utils/formatAddress";
 import { formatPrice } from "@/utils/chain.util";
 import { formatSelect } from "@/utils/UTCTime";
+import { AppModule } from "@/store/modules/app";
+import { CONTRACT_ADDRESS } from "@/configs/config_chain";
+import ChainManager from "@/chain/ChainManager";
 export default {
   props: ["isType"],
   components: { LevelStar, ProgressCard, LevelValue, AccountCard, MosaicChip },
@@ -270,11 +281,13 @@ export default {
   data() {
     return {
       detailVisible: false,
+      chainManager: new ChainManager(),
       hero: "",
       isTabs: false,
       chipsid: 0,
       cunter: 0,
-      name: ""
+      name: "",
+      loadingInstance: null,
     };
   },
   // created() {
@@ -289,14 +302,14 @@ export default {
     level() {
       return this.hero.info ? this.hero.info.level : false;
     },
-     
-     chipinfo(){
-      if(this.hero?.detail?.chips_info ){
-          return this.hero.detail.chips_info
-      }else{
-        return false
-      }   
-     },
+
+    chipinfo() {
+      if (this.hero?.detail?.chips_info) {
+        return this.hero.detail.chips_info;
+      } else {
+        return false;
+      }
+    },
     address() {
       return formatAddress(
         this.hero.detail.chips_info[this.chipsid].nft_address
@@ -346,31 +359,40 @@ export default {
     handBuyShow() {
       this.$emit("handBuyShow", this.hero);
     },
-  },
-  // watch: {
-  //   isShow: {
-  //     //弹出层禁止背景页面滑动
-  //     watch: {
-  //       isShow: {
-  //         //弹出层禁止背景页面滑动
-  //         handler(val) {
-  //           var mo = function (e) {
-  //             e.preventDefault();
-  //           };
-  //           if (val) {
-  //             document.getElementById("container").style.overflow = "hidden";
-  //             document.getElementById("container").style.position = "fixed";
-  //             document.addEventListener("touchmove", mo, false); //禁止页面滑动
-  //           } else {
-  //             document.getElementById("container").style.overflow = ""; //出现滚动条
-  //             document.getElementById("container").style.position = "";
-  //             document.removeEventListener("touchmove", mo, false);
-  //           }
-  //         },
-  //       },
-  //     },
-  //   },
-  // },
+    async handremove() {
+      try {
+        this.showLoading();
+        const nftres = await this.chainManager.bc.beginCancelOrder(
+          this.hero.o_link,
+          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+        );
+        if (nftres.status == true) {
+          this.$emit("handMessage", 1);
+          this.hideLoading();
+          setTimeout(() => {
+            this.$emit("handMessageHide");
+            this.$emit("on-close");
+            setTimeout(() => {
+              this.$emit("getMarketNftList");
+            }, 1000);
+          }, 1000);
+        }
+      } catch (err) {
+        this.hideLoading();
+        this.$emit("handMessage", 0);
+        console.log("query order status error", err);
+      }
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+
+    hideLoading() {
+      this.loadingInstance?.close();
+    },
+  }
 };
 </script>
 
@@ -807,6 +829,24 @@ export default {
       background-size: 100% 100%;
     }
   }
+  .for-rent-btn {
+    display: flex;
+    .adjust {
+      width: 384px;
+      height: 89px;
+      cursor: pointer;
+      background: url("../../../assets/market/hero/adjust.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .remove {
+      width: 384px;
+      height: 89px;
+      cursor: pointer;
+      margin-left: 14px;
+      background: url("../../../assets/market/hero/remove.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }
 .star-img {
   width: 47px;
diff --git a/src/components/mobile/main/HeroSellTop.vue b/src/components/mobile/main/HeroSellTop.vue
index f135697..d2a07e7 100644
--- a/src/components/mobile/main/HeroSellTop.vue
+++ b/src/components/mobile/main/HeroSellTop.vue
@@ -9,6 +9,12 @@
             :src="require('@/assets/mobile/market/hero/' + data.item_id + '.png')"
             alt=""
           />
+            <img
+            class="hero-img"
+            v-if="data.c_id"
+            :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="" />
diff --git a/src/components/mobile/main/PieceList.vue b/src/components/mobile/main/PieceList.vue
index 4c43f7f..348904d 100644
--- a/src/components/mobile/main/PieceList.vue
+++ b/src/components/mobile/main/PieceList.vue
@@ -166,14 +166,14 @@ export default {
   align-items: center;
   flex-direction: row;
   margin-top: 43px;
-  margin-left: 28px;
+  margin-left: 72px;
   align-items: center;
   flex-wrap: wrap;
 }
 .list-content {
   display: flex;
   flex-direction: column;
-  margin-right: 18px;
+  margin-right: 41px;
   width: 382px;
   height: 504px;
   padding-top: 35px;
diff --git a/src/components/mobile/main/PieceModal.vue b/src/components/mobile/main/PieceModal.vue
index a75172e..23ea20f 100644
--- a/src/components/mobile/main/PieceModal.vue
+++ b/src/components/mobile/main/PieceModal.vue
@@ -61,10 +61,18 @@
         </div>
       </div>
       <div class="mynft-sell" v-if="isType == 'mynft'">
-        <div class="sell" @click="handPutShow">Sell</div>
+        <div class="for-rent-btn" v-if="piece.o_link > 0">
+          <div class="adjust" @click="handPutShow"></div>
+          <div class="remove" @click="handRemove"></div>
+        </div>
+        <div class="sell" @click="handPutShow" v-else>Sell</div>
       </div>
       <div class="buy-price" v-else>
-        <div class="price"><span class="price-number">{{formatPriceShow(piece.s_price,18)}}</span></div>
+        <div class="price">
+          <span class="price-number">{{
+            formatPriceShow(piece.s_price, 18)
+          }}</span>
+        </div>
         <div class="buy-img" @click="handBuyShow">
           <img src="../../../assets/market/hero/buy.png" alt="aoi-hero" />
         </div>
@@ -80,13 +88,18 @@
 import { formatSelect } from "@/utils/UTCTime";
 import { formatPrice } from "@/utils/chain.util";
 import { formatAddress } from "@/utils/formatAddress";
+import { AppModule } from "@/store/modules/app";
+import { CONTRACT_ADDRESS } from "@/configs/config_chain";
+import ChainManager from "@/chain/ChainManager";
 export default {
   props: ["isType"],
   name: "HeroModal",
   data() {
     return {
       detailVisible: false,
-      piece: ""
+      piece: "",
+      loadingInstance: null,
+      chainManager: new ChainManager(),
     };
   },
   created() {
@@ -105,7 +118,7 @@ export default {
       // 分发自定义事件(事件名: closeTip)
       this.$emit("closeTip");
     },
-     formatPriceShow(price, decimals, fixed = 2) {
+    formatPriceShow(price, decimals, fixed = 2) {
       return formatPrice(price, decimals, fixed);
     },
     init(data) {
@@ -119,6 +132,40 @@ export default {
     handBuyShow() {
       this.$emit("handBuyShow", this.piece);
     },
+    async handRemove() {
+      try {
+        this.showLoading();
+        const nftres = await this.chainManager.bc.beginCancelOrder(
+          this.piece.o_link,
+          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+        );
+        // console.log(nftres, "beginSell");
+        if (nftres.status == true) {
+          this.$emit("handMessage", 1);
+          this.hideLoading();
+          setTimeout(() => {
+            this.$emit("handMessageHide");
+            this.$emit("closeTip", false);
+            setTimeout(() => {
+              this.$emit("getMarketNftList");
+            }, 1000);
+          }, 1000);
+        }
+      } catch (err) {
+        this.hideLoading();
+        this.$emit("handMessage", 0);
+        console.log("query order status error", err);
+      }
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+
+    hideLoading() {
+      this.loadingInstance?.close();
+    },
   },
 };
 </script>
@@ -370,6 +417,24 @@ export default {
     background: url("../../../assets/market/hero/sell-mb-btn.png") no-repeat;
     background-size: 100% 100%;
   }
+   .for-rent-btn {
+    display: flex;
+    .adjust {
+      width: 274px;
+      height: 89px;
+      cursor: pointer;
+      background: url("../../../assets/market/hero/adjust.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .remove {
+      width: 274px;
+      height: 89px;
+      cursor: pointer;
+      margin-left: 14px;
+      background: url("../../../assets/market/hero/remove.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 }
 .buy-price {
   position: absolute;
diff --git a/src/components/mobile/main/PieceSellTop.vue b/src/components/mobile/main/PieceSellTop.vue
index 6f0f45b..2d5ff59 100644
--- a/src/components/mobile/main/PieceSellTop.vue
+++ b/src/components/mobile/main/PieceSellTop.vue
@@ -31,7 +31,7 @@
 
         <div v-if="isBuy == true">
           <div class="amount">Amount</div>
-          <div class="count-content">cunout
+          <div class="count-content">
             <div class="count">
               <div class="left" @click="handReduce"></div>
               <div class="conunt-number">{{ cunout }}</div>
@@ -44,7 +44,7 @@
         <div class="priece" v-else>
           <div class="priece-btn">
             <div class="priece-number">
-              {{ formatPriceShow(data.s_price,18)}}
+              {{ formatPriceShow(data.s_price, 18) }}
             </div>
           </div>
         </div>
@@ -55,24 +55,22 @@
 
 <script>
 import { formatPrice } from "@/utils/chain.util";
- 
+
 export default {
-  props: ["data", "isBuy",'cunout'],
+  props: ["data", "isBuy", "cunout"],
   data() {
-    return {
-    };
+    return {};
   },
   methods: {
     handReduce() {
-      this.$emit("handReduce")
+      this.$emit("handReduce");
     },
     handPlus() {
-        this.$emit("handPlus")
+      this.$emit("handPlus");
     },
     formatPriceShow(price, decimals, fixed = 2) {
       return formatPrice(price, decimals, fixed);
     },
-    
   },
 };
 </script>
diff --git a/src/components/mobile/main/TheBuyDialog.vue b/src/components/mobile/main/TheBuyDialog.vue
index 2083002..95dd181 100644
--- a/src/components/mobile/main/TheBuyDialog.vue
+++ b/src/components/mobile/main/TheBuyDialog.vue
@@ -407,6 +407,7 @@ export default {
       height: 115px;
       text-align: center;
       line-height: 115px;
+       opacity: 0;
       cursor: pointer;
       color: #9dabd3;
       background: url("../../../assets/market/dialog/confirm.png") no-repeat;
diff --git a/src/components/mobile/main/TheSellDialog.vue b/src/components/mobile/main/TheSellDialog.vue
index 917f9f4..2ccd1ca 100644
--- a/src/components/mobile/main/TheSellDialog.vue
+++ b/src/components/mobile/main/TheSellDialog.vue
@@ -161,6 +161,7 @@ export default {
       // 分发自定义事件(事件名: closeTip)
       // this.$emit("closeTip");
       this.detailVisible = false;
+      this.shell.price =''
     },
     init(data) {
       this.detailVisible = true;
@@ -556,6 +557,7 @@ $item-size: 22px;
     text-align: center;
     line-height: 115px;
     cursor: pointer;
+    opacity: 0;
     color: #9dabd3;
     background: url("../../../assets/market/dialog/confirm.png") no-repeat;
     background-size: 100% 100%;
diff --git a/src/components/mobile/main/WeaponModal.vue b/src/components/mobile/main/WeaponModal.vue
index 36edcc0..97f2f60 100644
--- a/src/components/mobile/main/WeaponModal.vue
+++ b/src/components/mobile/main/WeaponModal.vue
@@ -226,7 +226,11 @@
       </div>
       <MosaicChip v-if="isTabs" :data="weapon"></MosaicChip>
       <div class="mynft-sell" v-if="isType == 'mynft'">
-        <div class="sell" @click="handPutShow">Sell</div>
+          <div class="for-rent-btn" v-if="weapon.o_link > 0">
+          <div class="adjust" @click="handPutShow(hero)"></div>
+          <div class="remove" @click="handRemove"></div>
+        </div>
+        <div class="sell" @click="handPutShow" v-else>Sell</div>
       </div>
       <div class="buy-price" v-else>
         <div class="price"><span class="price-number">{{formatPriceShow(weapon.s_price,18)}}</span></div>
@@ -248,6 +252,9 @@ import AccountCard from "./AccountCard.vue";
 import ProgressCard from "./ProgressCard.vue";
 import MosaicChip from "./MosaicChip.vue";
 import { formatPrice } from "@/utils/chain.util";
+import { AppModule } from "@/store/modules/app";
+import { CONTRACT_ADDRESS } from "@/configs/config_chain";
+import ChainManager from "@/chain/ChainManager";
 export default {
   props: ["isType"],
   components: { LevelStar, ProgressCard, LevelValue, AccountCard, MosaicChip },
@@ -255,8 +262,10 @@ export default {
   data() {
     return {
       detailVisible: false,
+      chainManager: new ChainManager(),
       weapon: "",
       isTabs: false,
+      loadingInstance:null
     };
   },
   created() {
@@ -288,6 +297,41 @@ export default {
     handBuyShow() {
       this.$emit("handBuyShow", this.weapon);
     },
+     async handRemove() {
+      try {
+        this.showLoading()
+        const nftres = await this.chainManager.bc.beginCancelOrder(
+          this.weapon.o_link,
+          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+        );
+        console.log(nftres, "beginSell");
+        if (nftres.status == true) {
+        
+          this.$emit("handMessage", 1);
+            this.hideLoading();
+             setTimeout(() => {
+            this.$emit("handMessageHide");
+            this.$emit("on-close");
+            setTimeout(() => {
+              this.$emit("getMarketNftList");
+            }, 1000);
+          }, 1000);
+        }
+      } catch (err) {
+        this.hideLoading();
+        this.$emit("handMessage", 0);
+        console.log("query order status error", err);
+      }
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+
+    hideLoading() {
+      this.loadingInstance?.close();
+    },
   },
 };
 </script>
@@ -708,6 +752,24 @@ export default {
       background: url("../../../assets/market/hero/sell-mb-btn.png") no-repeat;
       background-size: 100% 100%;
     }
+      .for-rent-btn {
+    display: flex;
+    .adjust {
+      width: 384px;
+      height: 89px;
+      cursor: pointer;
+      background: url("../../../assets/market/hero/adjust.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .remove {
+      width: 384px;
+      height: 89px;
+      cursor: pointer;
+      margin-left: 14px;
+      background: url("../../../assets/market/hero/remove.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
   }
   .buy-price {
     position: absolute;