diff --git a/src/components/mobile/main/HeroBuyTop.vue b/src/components/mobile/main/HeroBuyTop.vue
new file mode 100644
index 0000000..ba9a30f
--- /dev/null
+++ b/src/components/mobile/main/HeroBuyTop.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="hero-top">
+    <div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
+      <div>
+        <img
+          v-if="data.c_id"
+          width="hero-img"
+          :src="require('@/assets/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">
+        {{ data.c_name }}
+      </div>
+    </div>
+    <div class="hero-right">
+      <div class="userinfo">
+        <div class="srabded">
+          <div>Srabded</div>
+          <div>ERC721</div>
+        </div>
+        <div class="token-id">
+          <div>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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["data"],
+};
+</script>
+<style lang="scss" scoped>
+.hero-top {
+  display: flex;
+  justify-content: space-between;
+  .hero-left {
+    width: 173px;
+    height: 192px;
+    background: url("../../../assets/market/chip/bg-there.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .hero-right {
+    font-size: 25px;
+    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;
+        justify-content: space-between;
+      }
+      .token-id {
+        display: flex;
+        margin-left: 19px;
+        margin-right: 18px;
+        justify-content: space-between;
+      }
+    }
+    .priece {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+
+      .priece-btn {
+        width: 158px;
+        height: 63px;
+        font-size: 25px;
+        font-weight: bold;
+        margin-top: 22px;
+        position: relative;
+        line-height: 63px;
+        //   text-align: center;
+        background: url("../../../assets/market/hero/price.png") no-repeat;
+        background-size: 100% 100%;
+        .priece-number {
+          position: absolute;
+          left: 55px;
+          top: 2px;
+        }
+      }
+    }
+  }
+}
+.hero-img {
+  width: 272px;
+}
+.piece-left {
+ width: 272px;
+height: 303px;
+  position: relative;
+  background: url("../../../assets/market/hero/type-1.png") no-repeat;
+  background-size: 100% 100%;
+  .hero-name {
+    //  width: 46px;
+    height: 24px;
+    // max-width: 86px;
+    line-height: 24px;
+    padding-right: 14px;
+    padding-left: 14px;
+    background: url("../../../assets/market/hero/name-bg.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    right: -1px;
+    text-align: center;
+    color: #fff;
+    bottom: 0px;
+  }
+  img{
+    width: 100%;
+  }
+}
+.piece-left-gen {
+ width: 272px;
+height: 303px;
+  background: url("../../../assets/market/hero/type-0.png") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  .gen {
+    position: absolute;
+    left: 3px;
+    top: 6px;
+  }
+  .hero-name {
+    //  width: 46px;
+    height: 24px;
+    // max-width: 86px;
+    line-height: 24px;
+    padding-right: 14px;
+    padding-left: 14px;
+    background: url("../../../assets/market/hero/name-bg.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    right: -1px;
+    text-align: center;
+    color: #fff;
+    bottom: 0px;
+  }
+  img{
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/mobile/main/HeroList.vue b/src/components/mobile/main/HeroList.vue
index a22f6cf..91807f0 100644
--- a/src/components/mobile/main/HeroList.vue
+++ b/src/components/mobile/main/HeroList.vue
@@ -15,6 +15,7 @@
       @closeTip="closeTip"
       @showTip="showTip"
       :isPiecePut="isPiecePut"
+       @handBuyShow="handBuyShow"
       @handPutShow="handPutShow"
       @handPutHide="handPutHide"
     ></HeroModal>
@@ -27,17 +28,26 @@
     ></TheSellDialog>
     <!-- v-if="currencyTypeList"
       :currencyTypeList="currencyTypeList" -->
+    <TheBuyDialog
+      :type="type"
+      :isBuy="isBuy"
+      ref="buydialog"
+      @handBuyShow="handBuyShow"
+      @handBuyHide="handBuyHide"
+    ></TheBuyDialog>
   </div>
 </template>
 
 <script>
 import HeroModal from "./HeroModal.vue";
-import TheSellDialog from './TheSellDialog.vue'
+import TheSellDialog from "./TheSellDialog.vue";
+import TheBuyDialog from "./TheBuyDialog.vue";
 import HeroItem from "./HeroItem";
 export default {
   props: ["nftList", "isType"],
   components: {
     HeroModal,
+    TheBuyDialog,
     TheSellDialog,
     HeroItem,
   },
@@ -45,6 +55,7 @@ export default {
     return {
       isShow: false,
       type: "hero",
+      isBuy: false,
       isPiecePut: false,
     };
   },
@@ -93,6 +104,18 @@ export default {
     handPutHide() {
       this.isPiecePut = false;
     },
+    handBuyShow(data) {
+      this.isBuy = true;
+      this.$nextTick(() => {
+        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
+        //init调用的是dialog-component组件里面的init方法
+        //data是传递给弹窗页面的值
+        this.$refs.buydialog.init(data);
+      });
+    },
+    handBuyHide() {
+       this.isBuy = false;
+    },
   },
 };
 </script>
diff --git a/src/components/mobile/main/HeroModal.vue b/src/components/mobile/main/HeroModal.vue
index 0d78695..42bbaa4 100644
--- a/src/components/mobile/main/HeroModal.vue
+++ b/src/components/mobile/main/HeroModal.vue
@@ -241,10 +241,10 @@
       </div>
       <div class="buy-price" v-else>
         <div class="price"><span class="price-number">9999.99</span></div>
-        <div class="buy-img">
-          <a href="">
+        <div class="buy-img"  @click="handBuyShow">
+        
             <img src="../../../assets/market/hero/buy.png" alt="aoi-hero"
-          /></a>
+          />
         </div>
       </div>
       <span @click="closeTip" class="close">
@@ -348,6 +348,9 @@ export default {
     handPutShow() {
       this.$emit("handPutShow", this.hero);
     },
+    handBuyShow(){
+      this.$emit("handBuyShow", this.hero);
+    }
   },
   // watch: {
   //   isShow: {
diff --git a/src/components/mobile/main/HeroSellTop.vue b/src/components/mobile/main/HeroSellTop.vue
index de493a4..f135697 100644
--- a/src/components/mobile/main/HeroSellTop.vue
+++ b/src/components/mobile/main/HeroSellTop.vue
@@ -13,9 +13,6 @@
         <div class="gen" v-if="data.info.is_genesis">
           <img width="31px" src="../../../assets/market/hero/gen.png" alt="" />
         </div>
-        <!-- <div class="hero-name">
-          {{ data.detail.hero_name }}
-        </div> -->
       </div>
       <div class="piece-right">
         <div class="userinfo">
diff --git a/src/components/mobile/main/LevelStar.vue b/src/components/mobile/main/LevelStar.vue
index e59c243..72f3602 100644
--- a/src/components/mobile/main/LevelStar.vue
+++ b/src/components/mobile/main/LevelStar.vue
@@ -71,7 +71,6 @@ export default {
   width: 344px;
   height: 67px;
   background: rgba(255, 255, 255, 0.2);
-  // opacity: 0.2;
   border-radius: 30px;
   margin-left: 23px;
   margin-top: 19px;
diff --git a/src/components/mobile/main/TheBuyDialog.vue b/src/components/mobile/main/TheBuyDialog.vue
new file mode 100644
index 0000000..d658f98
--- /dev/null
+++ b/src/components/mobile/main/TheBuyDialog.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="wmassageMask" v-show="detailVisible && piece" @touchmove.prevent>
+    <div class="messageMaskContent content">
+      <div class="price-title">PRIECE SETTIONG</div>
+      <div class="container">
+        <HeroBuyTop :data="piece"></HeroBuyTop>
+        <div class="priece-bottom">
+          <div class="token-usid">
+            <div class="token-item-top">
+              <div>Token</div>
+              <div>USDT</div>
+            </div>
+            <div class="token-item">
+              <div>Price</div>
+              <div>{{ piece.s_price ? piece.s_price : " " }}</div>
+            </div>
+            <div class="token-item-balance">
+              <div>Balance</div>
+              <div class="balance">0.37</div>
+            </div>
+          </div>
+          <div class="buy-state">
+            <div class="title">You don’t hane enough USDT to purchase.</div>
+            <div class="progress-content">
+              <div class="progress">
+                <div class="approve-progress"></div>
+                <div class="boder"></div>
+                <div class="buy-progress"></div>
+              </div>
+
+              <div class="progress-neme">
+                <div>Approve</div>
+                <div>buy</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pending">
+          <div class="pending-order" @click="handMessage">PEBDING ORDER</div>
+          <div class="confirm">CONFIRM</div>
+        </div>
+      </div>
+
+      <span @click="closeTip" class="close">
+        <img src="../../../assets/market/hero/cose.png" alt="" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeroBuyTop from "./HeroBuyTop.vue";
+export default {
+  components: {
+    HeroBuyTop,
+  },
+  props: ["isType", "type"],
+  name: "HeroModal",
+  data() {
+    return {
+      detailVisible: false,
+      piece: "",
+      prices: "",
+      value: "",
+      currencyTypeList: [],
+    };
+  },
+  created() {
+    console.log(this.hero, "hero");
+  },
+  methods: {
+    closeTip() {
+      // 分发自定义事件(事件名: closeTip)
+      // this.$emit("closeTip");
+      this.detailVisible = false;
+    },
+    init(data) {
+      this.detailVisible = true;
+      this.piece = data;
+      console.log(data, "dfgdg");
+    },
+    handMessage() {},
+  },
+};
+</script>
+
+<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: 104px;
+      height: 104px;
+      position: absolute;
+      cursor: pointer;
+      right: -74px;
+      top: -74px;
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .messageMaskContent {
+    position: absolute;
+    top: 342px;
+    left: 113px;
+    width: 756px;
+    height: 1021px;
+    background: url("../../../assets/market/dialog/sell-mb-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 {
+  padding-top: 28px;
+  padding-left: 35px;
+  padding-right: 34px;
+  padding-bottom: 33px;
+  height: 540px;
+  position: relative;
+  .price-title {
+    font-size: 33px;
+    font-weight: bold;
+    padding-bottom: 14px;
+    text-align: center;
+    color: #ffffff;
+  }
+  .hero-top {
+    display: flex;
+    justify-content: space-between;
+    .hero-left {
+      width: 173px;
+      height: 192px;
+      background: url("../../../assets/market/chip/bg-there.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .hero-right {
+      font-size: 25px;
+      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;
+          justify-content: space-between;
+        }
+        .token-id {
+          display: flex;
+          margin-left: 19px;
+          margin-right: 18px;
+          justify-content: space-between;
+        }
+      }
+      .priece {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+
+        .priece-btn {
+          width: 158px;
+          height: 63px;
+          font-size: 25px;
+          font-weight: bold;
+          margin-top: 22px;
+          position: relative;
+          line-height: 63px;
+          //   text-align: center;
+          background: url("../../../assets/market/hero/price.png") no-repeat;
+          background-size: 100% 100%;
+          .priece-number {
+            position: absolute;
+            left: 55px;
+            top: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  .priece-bottom {
+    margin-top: 19px;
+    .token-usid {
+      width: 622px;
+      height: 249px;
+      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;
+        font-weight: bold;
+        color: #ffffff;
+        align-items: center;
+        justify-content: space-between;
+        background: rgba(26, 58, 175, 0.3);
+        border-radius: 20px;
+      }
+      .token-item {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 20px;
+        color: #ffffff;
+        padding-right: 55px;
+        font-size: 22px;
+        font-weight: 600;
+        color: #ffffff;
+        padding-left: 27px;
+      }
+      .token-item-balance {
+        display: flex;
+        justify-content: space-between;
+        padding-top: 15px;
+        color: #ffffff;
+        padding-right: 55px;
+        font-size: 22px;
+        font-weight: 600;
+        color: #ffffff;
+        padding-left: 27px;
+        .balance {
+          font-weight: 600;
+          color: #ff3b3b;
+        }
+      }
+    }
+    .buy-state {
+      width: 100%;
+      margin-top: 10px;
+      .title {
+        text-align: center;
+        font-size: 22px;
+        font-weight: 600;
+        color: #fe3c3e;
+      }
+      .progress {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .approve-progress {
+          width: 17px;
+          height: 17px;
+          background: rgba(43, 204, 237, 1);
+          border: 2px solid #557cda;
+          border-radius: 50%;
+        }
+        .boder {
+          width: 250px;
+          height: 2px;
+          background: #cfdcff;
+          border-radius: 1px;
+        }
+        .buy-progress {
+          width: 17px;
+          height: 17px;
+          background: #ffffff;
+          border: 2px solid #557cda;
+          border-radius: 50%;
+        }
+      }
+      .progress-neme {
+        display: flex;
+        margin-left: 106px;
+        margin-right: 133px;
+        font-size: 22px;
+        font-weight: 600;
+        color: #ffffff;
+        margin-top: 6px;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  .pending {
+    position: absolute;
+    right: 95px;
+    bottom: -125px;
+    font-size: 26px;
+    .pending-order {
+      width: 426px;
+      height: 76px;
+      text-align: center;
+      color: #ffffff;
+      cursor: pointer;
+      line-height: 76px;
+      margin-bottom: 47px;
+      background: url("../../../assets/market/dialog/order.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .confirm {
+      width: 426px;
+      height: 76px;
+      text-align: center;
+      line-height: 76px;
+      cursor: pointer;
+      color: #9dabd3;
+      background: url("../../../assets/market/dialog/confirm.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>