From 4bf19316dbc7f9de8cfa7afaf67735fdad8bca81 Mon Sep 17 00:00:00 2001
From: huangjinming <huangjinming@kingsome.cn>
Date: Wed, 21 Dec 2022 17:25:47 +0800
Subject: [PATCH] fix

---
 src/components/market/HeroBuyTop.vue      | 209 ++++++++++++++--------
 src/components/market/HeroSellTop.vue     |  52 +++++-
 src/components/market/PieceSellTop.vue    |  28 ++-
 src/components/market/TheBuyDialog.vue    |   6 +-
 src/components/market/TheSellDialog.vue   |   2 +-
 src/components/market/WeaponBuyDialog.vue |  46 ++++-
 src/components/market/WeaponSellTop.vue   |  36 +++-
 src/components/market/nft/HeroNft.vue     |   2 +-
 src/components/market/nft/WeaponList.vue  |   1 +
 9 files changed, 288 insertions(+), 94 deletions(-)

diff --git a/src/components/market/HeroBuyTop.vue b/src/components/market/HeroBuyTop.vue
index 1376137..4b2f92d 100644
--- a/src/components/market/HeroBuyTop.vue
+++ b/src/components/market/HeroBuyTop.vue
@@ -1,96 +1,161 @@
 <template>
   <div>
-     <div class="hero-top">
-        <div class="hero-left"></div>
-        <div class="hero-right">
-          <div class="userinfo">
-            <div class="srabded">
-              <div>Srabded</div>
-              <div>ERC721</div>
-            </div>
-            <div class="token-id">
-              <div>ERC721</div>
-              <div>#3006985843100103</div>
-            </div>
+    <div class="hero-top">
+      <div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
+        <div>
+          <img
+            v-if="data.c_id"
+            width="159px"
+            :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="priece">
-            <div class="priece-btn">
-              <span class="priece-number">{{ hero.s_price ? hero.s_price : " " }}</span>
-            </div>
+          <div class="token-id">
+            <div>ERC721</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>
   </div>
 </template>
 
 <script>
-
 export default {
- props:['hero']
-}
+  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 {
+  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;
-      .userinfo {
-        width: 371px;
-        height: 87px;
+      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;
-        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;
-          }
+        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;
         }
       }
     }
   }
-</style>
\ No newline at end of file
+}
+.piece-left {
+  width: 159px;
+  height: 177px;
+  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;
+  }
+}
+.piece-left-gen {
+  width: 159px;
+  height: 177px;
+  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;
+  }
+}
+</style>
diff --git a/src/components/market/HeroSellTop.vue b/src/components/market/HeroSellTop.vue
index c37bf75..c327ea9 100644
--- a/src/components/market/HeroSellTop.vue
+++ b/src/components/market/HeroSellTop.vue
@@ -5,13 +5,22 @@
         <div>
           <img
             v-if="data.item_id"
-            width="214px"
+            width="159px"
             :src="require('@/assets/market/hero/' + data.item_id + '.png')"
             alt=""
           />
         </div>
-        <div></div>
-        <div class="name"></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.detail.hero_name }}
+        </div>
+
       </div>
       <div class="piece-right">
         <div class="userinfo">
@@ -120,13 +129,50 @@ export default {
 .piece-left {
   width: 159px;
   height: 177px;
+  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;
+  }
 }
 .piece-left-gen {
   width: 159px;
   height: 177px;
   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;
+  }
 }
 </style>
diff --git a/src/components/market/PieceSellTop.vue b/src/components/market/PieceSellTop.vue
index 4bed5b5..45e15a5 100644
--- a/src/components/market/PieceSellTop.vue
+++ b/src/components/market/PieceSellTop.vue
@@ -1,7 +1,19 @@
 <template>
   <div>
     <div class="piece-top">
-      <div class="piece-left"></div>
+      <div class="piece-left">
+        <div class="piece-img">
+          <img
+            v-if="data.detail.item_id"
+            width="97px"
+            :src="
+              require('@/assets/market/piece/' + data.detail.item_id + '.png')
+            "
+            alt=""
+          />
+        </div>
+        <div class="name">{{ data.detail.name }}</div>
+      </div>
       <div class="piece-right">
         <div class="userinfo">
           <div class="srabded">
@@ -49,11 +61,9 @@
 
 <script>
 export default {
-  props: ["data",'cunout'],
+  props: ["data", "cunout"],
   data() {
-    return {
-      
-    };
+    return {};
   },
   methods: {
     handReduce() {
@@ -181,5 +191,13 @@ export default {
   height: 150px;
   background: url("../../assets/market/chip/bg-there.png") no-repeat;
   background-size: 100% 100%;
+  .piece-img {
+    margin-top: 20px;
+    margin-left: 21px;
+  }
+  .name {
+    width: 100%;
+    text-align: center;
+  }
 }
 </style>
diff --git a/src/components/market/TheBuyDialog.vue b/src/components/market/TheBuyDialog.vue
index 5ed0797..8bdca5f 100644
--- a/src/components/market/TheBuyDialog.vue
+++ b/src/components/market/TheBuyDialog.vue
@@ -2,7 +2,7 @@
   <el-dialog :show-close="false" :visible.sync="isBuy">
     <div class="bg"></div>
     <div class="container">
-      <HeroBuyTop :hero="hero"></HeroBuyTop>
+      <HeroBuyTop :data="data"></HeroBuyTop>
       <div class="priece-bottom">
         <div class="token-usid">
           <div class="token-item-top">
@@ -11,7 +11,7 @@
           </div>
           <div class="token-item">
             <div>Price</div>
-            <div>{{ hero.s_price ? hero.s_price : " " }}</div>
+            <div>{{ data.s_price ? data.s_price : " " }}</div>
           </div>
           <div class="token-item-balance">
             <div>Balance</div>
@@ -53,7 +53,7 @@
 <script>
 import HeroBuyTop from "./HeroBuyTop.vue";
 export default {
-  props: ["isBuy", "hero"],
+  props: ["isBuy", "data"],
   components: { HeroBuyTop },
   data() {
     return {
diff --git a/src/components/market/TheSellDialog.vue b/src/components/market/TheSellDialog.vue
index d50127c..1811494 100644
--- a/src/components/market/TheSellDialog.vue
+++ b/src/components/market/TheSellDialog.vue
@@ -92,7 +92,7 @@ export default {
   data() {
     return {
       piece: "",
-      price:0,
+      price:'',
       cunout: 1,
       dialogVisible: false,
       isWeapon: false,
diff --git a/src/components/market/WeaponBuyDialog.vue b/src/components/market/WeaponBuyDialog.vue
index bda3ef2..a193549 100644
--- a/src/components/market/WeaponBuyDialog.vue
+++ b/src/components/market/WeaponBuyDialog.vue
@@ -3,7 +3,19 @@
     <div class="bg"></div>
     <div class="container">
       <div class="hero-top">
-        <div class="hero-left"></div>
+        <div class="piece-weapon-left">
+          <div class="weapon">
+            <img
+              v-if="data.c_id"
+              width="168px"
+              :src="require('@/assets/market/weapon/' + data.c_id + '.png')"
+              alt=""
+            />
+          </div>
+          <div class="weapon-name">
+            {{ data.detail.gun_name }}
+          </div>
+        </div>
         <div class="hero-right">
           <div class="userinfo">
             <div class="srabded">
@@ -12,7 +24,7 @@
             </div>
             <div class="token-id">
               <div>ERC721</div>
-              <div>#3006985843100103</div>
+              <div>#{{data.token_id}}</div>
             </div>
           </div>
           <div class="priece">
@@ -71,7 +83,7 @@
 
 <script>
 export default {
-  props: ["isBuy"],
+  props: ["isBuy",'data'],
   data() {
     return {
       piece: "",
@@ -130,11 +142,31 @@ export default {
   .hero-top {
     display: flex;
     justify-content: space-between;
-    .hero-left {
-      width: 217px;
-      height: 101px;
-      background: url("../../assets/market/chip/bg-there.png") no-repeat;
+     .piece-weapon-left {
+      width: 200px;
+      height: 93px;
+      position: relative;
+      background: url("../../assets/market/weapon/gun-bg.png") no-repeat;
       background-size: 100% 100%;
+      .weapon {
+        margin-top: 16px;
+        margin-left: 17px;
+      }
+      .weapon-name {
+        //  width: 46px;
+        height: 15px;
+        // max-width: 86px;
+        line-height: 15px;
+        padding-right: 10px;
+        padding-left: 10px;
+        background: url("../../assets/market/hero/name-bg.png") no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        right: 0px;
+        text-align: center;
+        color: #fff;
+        bottom: 0px;
+      }
     }
     .hero-right {
       font-size: 25px;
diff --git a/src/components/market/WeaponSellTop.vue b/src/components/market/WeaponSellTop.vue
index 1f0aaae..05d64f6 100644
--- a/src/components/market/WeaponSellTop.vue
+++ b/src/components/market/WeaponSellTop.vue
@@ -2,7 +2,19 @@
   <div>
     <div class="weapon-piece-top">
       <div class="item-top">
-        <div class="piece-weapon-left"></div>
+        <div class="piece-weapon-left">
+          <div class="weapon">
+            <img
+              v-if="data.item_id"
+              width="168px"
+              :src="require('@/assets/market/weapon/' + data.item_id + '.png')"
+              alt=""
+            />
+          </div>
+          <div class="weapon-name">
+            {{ data.detail.gun_name }}
+          </div>
+        </div>
         <div class="piece-weapon-right">
           <div class="weapon-userinfo">
             <div class="srabded">
@@ -56,8 +68,28 @@ export default {
     .piece-weapon-left {
       width: 200px;
       height: 93px;
-      background: url("../../assets/market/chip/bg-there.png") no-repeat;
+      position: relative;
+      background: url("../../assets/market/weapon/gun-bg.png") no-repeat;
       background-size: 100% 100%;
+      .weapon {
+        margin-top: 16px;
+        margin-left: 17px;
+      }
+      .weapon-name {
+        //  width: 46px;
+        height: 15px;
+        // max-width: 86px;
+        line-height: 15px;
+        padding-right: 10px;
+        padding-left: 10px;
+        background: url("../../assets/market/hero/name-bg.png") no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        right: 0px;
+        text-align: center;
+        color: #fff;
+        bottom: 0px;
+      }
     }
     .piece-weapon-right {
       .weapon-userinfo {
diff --git a/src/components/market/nft/HeroNft.vue b/src/components/market/nft/HeroNft.vue
index 89462b5..9d77fa9 100644
--- a/src/components/market/nft/HeroNft.vue
+++ b/src/components/market/nft/HeroNft.vue
@@ -140,7 +140,7 @@
     <TheBuyDialog
       :type="type"
       :isBuy="isBuy"
-      :hero="data"
+      :data="data"
       @handBuyShow="handBuyShow"
       @handBuyHide="handBuyHide"
     ></TheBuyDialog>
diff --git a/src/components/market/nft/WeaponList.vue b/src/components/market/nft/WeaponList.vue
index d7070d2..3eb8284 100644
--- a/src/components/market/nft/WeaponList.vue
+++ b/src/components/market/nft/WeaponList.vue
@@ -113,6 +113,7 @@
     <TheBuyDialog
       :type="type"
       :isBuy="isBuy"
+      :data="weapon"
       @handBuyShow="handBuyShow"
       @handBuyHide="handBuyHide"
     ></TheBuyDialog>