diff --git a/src/components/mobile/main/HeroBuyTop.vue b/src/components/mobile/main/HeroBuyTop.vue
index e636bf3..234ddbb 100644
--- a/src/components/mobile/main/HeroBuyTop.vue
+++ b/src/components/mobile/main/HeroBuyTop.vue
@@ -9,7 +9,7 @@
         />
       </div>
       <div class="gen" v-if="data.info.is_genesis">
-        <img width="31px" src="../../assets/market/hero/gen.png" alt="" />
+        <img width="31px" src="../../../assets/market/hero/gen.png" alt="" />
       </div>
       <!-- <div class="hero-name">
         {{ data.c_name }}
diff --git a/src/components/mobile/main/HeroList.vue b/src/components/mobile/main/HeroList.vue
index 627e0ce..e56e87b 100644
--- a/src/components/mobile/main/HeroList.vue
+++ b/src/components/mobile/main/HeroList.vue
@@ -34,6 +34,7 @@
       :type="type"
       :isPiecePut="isPiecePut"
       ref="selldialog"
+    
       @handPutShow="handPutShow"
       @handPutHide="handPutHide"
     ></TheSellDialog>
@@ -43,9 +44,11 @@
       :type="type"
       :isBuy="isBuy"
       ref="buydialog"
+        @handMessage="handMessage"
       @handBuyShow="handBuyShow"
       @handBuyHide="handBuyHide"
     ></TheBuyDialog>
+    <MessageBox ref="message"></MessageBox>
   </div>
 </template>
 
@@ -54,6 +57,7 @@ import HeroModal from "./HeroModal.vue";
 import TheSellDialog from "./TheSellDialog.vue";
 import TheBuyDialog from "./TheBuyDialog.vue";
 import HeroItem from "./HeroItem";
+import MessageBox from "./MessageBox";
 export default {
   props: ["nftList", "isType"],
   components: {
@@ -61,6 +65,7 @@ export default {
     TheBuyDialog,
     TheSellDialog,
     HeroItem,
+    MessageBox
   },
   data() {
     return {
@@ -127,6 +132,12 @@ export default {
     handBuyHide() {
       this.isBuy = false;
     },
+    handMessage() {
+      this.$nextTick(() => {
+        this.$refs.message.open(1);
+        console.log('chegn');
+      });
+    },
   },
 };
 </script>
@@ -169,11 +180,10 @@ export default {
         margin-top: 100px;
         margin-bottom: 70px;
         width: 378px;
-        img{
+        img {
           width: 100%;
         }
       }
-      
     }
   }
   .type-img {
diff --git a/src/components/mobile/main/MessageBox.vue b/src/components/mobile/main/MessageBox.vue
index 17bcab3..2612fc0 100644
--- a/src/components/mobile/main/MessageBox.vue
+++ b/src/components/mobile/main/MessageBox.vue
@@ -1,13 +1,176 @@
 <template>
-  
+  <div class="wmassageMask" v-if="dialogVisible == true" @touchmove.prevent>
+    <div class="messageMaskContent content">
+      <div class="container" v-show="msgType == 0">
+        <div class="title">Transfaction Failed</div>
+        <div class="wangning-img">
+          <img src="../../../assets/market/dialog/wangning.png" alt="" />
+        </div>
+        <div class="view">View in Poiygonscan</div>
+        <div class="confirm-btn">Confirm</div>
+      </div>
+      <div class="success-container" v-show="msgType == 1">
+        <div class="title">Transfaction Complete</div>
+        <div class="wangning-img">
+          <img src="../../../assets/market/dialog/success.png" alt="" />
+        </div>
+        <div class="view">View in Poiygonscan</div>
+        <div class="confirm-btn">Confirm</div>
+      </div>
+      <span @click="closeTip" class="close">
+        <img src="../../../assets/market/hero/cose.png" alt="" />
+      </span>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-
-}
+  data() {
+    return {
+      dialogVisible: false,
+      msgType: null,
+    };
+  },
+  methods: {
+    closeTip() {
+      // 分发自定义事件(事件名: closeTip)
+      // this.$emit("closeTip");
+      this.dialogVisible = false;
+    },
+    open(type) {
+      this.dialogVisible = true;
+      this.msgType = type;
+      console.log("type", type, this.dialogVisible);
+    },
+    handMessage() {},
+  },
+};
 </script>
 
-<style>
+<style lang="scss" scoped>
+.wmassageMask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(20, 28, 34, 0.6);
+  z-index: 9999;
+  .content {
+    position: relative;
+    .close {
+      width: 75px;
+      height: 75px;
+      position: absolute;
+      cursor: pointer;
+      right: -74px;
+      top: -74px;
+      img {
+        width: 100%;
+      }
+    }
+  }
 
-</style>
\ No newline at end of file
+  .messageMaskContent {
+    position: absolute;
+    top: 257px;
+    left: 109px;
+    width: 864px;
+    height: 848px;
+    background: url("../../../assets/market/dialog/msg-bg.png") no-repeat;
+    background-size: 100% 100%;
+    .price-title {
+      margin-top: 30px;
+      font-size: 50px;
+      font-weight: bold;
+      padding-bottom: 29px;
+      text-align: center;
+      color: #ffffff;
+    }
+  }
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .title {
+    font-size: 43px;
+    margin-top: 76px;
+    // font-family: Bahnschrift;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .wangning-img {
+    width: 210px;
+    height: 210px;
+    margin-top: 85px;
+    margin-bottom: 65px;
+    img {
+      width: 100%;
+    }
+  }
+  .view {
+    font-size: 26px;
+    font-weight: 600;
+    text-decoration: underline;
+    color: #ffffff;
+    margin-bottom: 18px;
+  }
+  .confirm-btn {
+    text-align: center;
+     width: 644px;
+    height: 109px;
+    line-height: 109px;
+    background: #2bcced;
+    border: 3px solid rgba(133, 234, 255, 0.3);
+    border-radius: 37px;
+    font-size: 40px;
+    font-weight: 600;
+    color: #ffffff;
+  }
+}
+
+.success-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .title {
+    font-size: 43px;
+    margin-top: 76px;
+    // font-family: Bahnschrift;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .wangning-img {
+    width: 210px;
+    height: 210px;
+    margin-top: 85px;
+    margin-bottom: 65px;
+    img {
+      width: 100%;
+    }
+  }
+  .view {
+    font-size: 26px;
+    font-weight: 600;
+    text-decoration: underline;
+    color: #ffffff;
+    margin-bottom: 18px;
+  }
+  .confirm-btn {
+    text-align: center;
+    width: 644px;
+    height: 109px;
+    line-height: 109px;
+    background: #2bcced;
+    border: 3px solid rgba(133, 234, 255, 0.3);
+    border-radius: 37px;
+    font-size: 40px;
+    font-weight: 600;
+    color: #ffffff;
+  }
+}
+</style>
diff --git a/src/components/mobile/main/TheBuyDialog.vue b/src/components/mobile/main/TheBuyDialog.vue
index febd557..c524504 100644
--- a/src/components/mobile/main/TheBuyDialog.vue
+++ b/src/components/mobile/main/TheBuyDialog.vue
@@ -97,7 +97,9 @@ export default {
       this.piece = data;
       console.log(data, "dfgdg");
     },
-    handMessage() {},
+    handMessage() {
+      this.$emit("handMessage")
+    },
   },
 };
 </script>
@@ -129,7 +131,7 @@ export default {
   .messageMaskContent {
     position: absolute;
     top: 342px;
-    left: 113px;
+    left: 153px;
     width: 756px;
     height: 1021px;
     background: url("../../../assets/market/dialog/sell-mb-bg.png") no-repeat;
diff --git a/src/components/mobile/main/TheSellDialog.vue b/src/components/mobile/main/TheSellDialog.vue
index 2781343..2fc484a 100644
--- a/src/components/mobile/main/TheSellDialog.vue
+++ b/src/components/mobile/main/TheSellDialog.vue
@@ -126,7 +126,9 @@ export default {
       this.piece = data;
       console.log(data, "dfgdg");
     },
-    handMessage() {},
+    handMessage() {
+     
+    },
   },
 };
 </script>