fix

src/components/market/Dundialog.vue

@@ -189,7 +189,7 @@
     </Transition>
     <Transition v-else>
       <div>
-        <MosaicChipDialog /></div
+        <WeaponMosaicChip :data="data" /></div
     ></Transition>
     <div class="buy-price">
       <div class="mynft" v-if="isType === 'mynft'">
@@ -217,9 +217,18 @@
       <div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
         WEAPON
       </div>
-      <div :class="isTabs ? 'hero-tab' : 'chip-tab'" @click="handChipTab">
+      <div>
+        <div
+          v-if="data.detail.chip_core.length > 0"
+          :class="isTabs ? 'hero-tab' : 'chip-tab'"
+          @click="handChipTab"
+        >
           CHIP
         </div>
+        <div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
+          <img width="46px" src="../../assets/market/lock.png" alt="aoi-hero" />
+        </div>
+      </div>
     </div>
     <Close @closeMyself="closeMyself" />
   </el-dialog>
@@ -228,7 +237,7 @@
 <script>
 import LeveStars from "./LeveStars.vue";
 import Close from "./Close.vue";
-import MosaicChipDialog from "./MosaicChipDialog.vue";
+import WeaponMosaicChip from "./WeaponMosaicChip.vue";
 import AccountCard from "./AccountCard.vue";
 import ProgressCard from "./ProgressCard.vue";
 import LuckyValue from "./LuckyValue.vue";
@@ -238,7 +247,7 @@ export default {
     Close,
     AccountCard,
     ProgressCard,
-    MosaicChipDialog,
+    WeaponMosaicChip,
     LuckyValue,
   },
   props: ["dialogVisible", "data", "isType"],

src/components/market/Herodialog.vue

@@ -9,12 +9,44 @@
         <div class="bg"></div>
         <div class="contaier">
           <div class="hero-left">
-            <img   v-if="hero.c_id" :src="require('@/assets/market/hero/details/' + hero.c_id + '_full.png')" alt="aoi-hero" />
+            <img
-             <img   v-if="hero.item_id" :src="require('@/assets/market/hero/details/' + hero.item_id + '_full.png')" alt="aoi-hero" />
+              v-if="hero.c_id"
+              :src="
+                require('@/assets/market/hero/details/' +
+                  hero.c_id +
+                  '_full.png')
+              "
+              alt="aoi-hero"
+            />
+            <img
+              v-if="hero.item_id"
+              :src="
+                require('@/assets/market/hero/details/' +
+                  hero.item_id +
+                  '_full.png')
+              "
+              alt="aoi-hero"
+            />
           </div>
           <div class="hero-left-info">
-            <img   v-if="hero.c_id" :src="require('@/assets/market/hero/details/' + hero.c_id + '_full.png')" alt="aoi-hero" />
+            <img
-             <img   v-if="hero.item_id" :src="require('@/assets/market/hero/details/' + hero.item_id + '_full.png')" alt="aoi-hero" />
+              v-if="hero.c_id"
+              :src="
+                require('@/assets/market/hero/details/' +
+                  hero.c_id +
+                  '_full.png')
+              "
+              alt="aoi-hero"
+            />
+            <img
+              v-if="hero.item_id"
+              :src="
+                require('@/assets/market/hero/details/' +
+                  hero.item_id +
+                  '_full.png')
+              "
+              alt="aoi-hero"
+            />
           </div>
           <div class="hero-right-token">
             <div class="token-name">TOKEN ID</div>
@@ -230,7 +262,7 @@
     </Transition>
     <Transition v-else>
       <div>
-        <MosaicChipDialog /></div
+        <MosaicChipDialog :type="type" :hero="hero" /></div
     ></Transition>
     <div class="buy-price">
       <div class="mynft" v-if="isType === 'mynft'">
@@ -258,9 +290,18 @@
       <div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
         HERO
       </div>
-      <div :class="isTabs ? 'hero-tab' : 'chip-tab'" @click="handChipTab">
+      <div>
+        <div
+          v-if="hero.detail.chip_core.length > 0"
+          :class="isTabs ? 'hero-tab' : 'chip-tab'"
+          @click="handChipTab"
+        >
           CHIP
         </div>
+        <div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
+          <img width="46px" src="../../assets/market/lock.png" alt="aoi-hero" />
+        </div>
+      </div>
     </div>
     <Close @closeMyself="closeMyself" />
   </el-dialog>
@@ -272,7 +313,7 @@ import Close from "./Close.vue";
 import AccountCard from "./AccountCard.vue";
 import ProgressCard from "./ProgressCard.vue";
 import LuckyValue from "./LuckyValue.vue";
-import MosaicChipDialog from "./MosaicChipDialog.vue";
+import MosaicChipDialog from "./MosaicChip.vue";
 
 export default {
   props: ["dialogVisible", "hero", "isType"],
@@ -595,7 +636,8 @@ export default {
   .hero-tab {
     width: 306px;
     height: 80px;
-    font-size: 46px;
+    // font-size: 46px;
+    font-size: 63px;
     font-family: "SairaStencilOne";
     font-weight: 400;
     color: #ffffff;
@@ -608,7 +650,7 @@ export default {
   .chip-tab {
     width: 290px;
     height: 70px;
-    font-size: 63px;
+    font-size: 46px;
     line-height: 70px;
     margin-right: 10px;
     text-align: center;

src/components/market/MosaicChip.vue

@@ -0,0 +1,445 @@
+<template>
+  <div class="hero-right">
+    <div class="bg"></div>
+    <div class="container">
+      <div class="left-img" v-show="type == 'hero'">
+        <img
+          v-if="hero.c_id"
+          :src="
+            require('@/assets/market/hero/details/' + hero.c_id + '_full.png')
+          "
+          alt="aoi-hero"
+        />
+        <img
+          v-if="hero.item_id"
+          :src="
+            require('@/assets/market/hero/details/' +
+              hero.item_id +
+              '_full.png')
+          "
+          alt="aoi-hero"
+        />
+      </div>
+      <div class="img-details" v-show="type == 'hero'">
+        <img
+          v-if="hero.c_id"
+          :src="
+            require('@/assets/market/hero/details/' + hero.c_id + '_full.png')
+          "
+          alt="aoi-hero"
+        />
+        <img
+          v-if="hero.item_id"
+          :src="
+            require('@/assets/market/hero/details/' +
+              hero.item_id +
+              '_full.png')
+          "
+          alt="aoi-hero"
+        />
+      </div>
+      <div class="chip-left">
+        <div class="chip-tab-left">
+          <div class="chip-item">
+            <div class="bg">
+              <img
+                class="hill-icon-img"
+                width="169px"
+                src="../../assets/market/chip-item-bg.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="chip-item">
+            <div class="bg">
+              <img
+                class="hill-icon-img"
+                width="169px"
+                src="../../assets/market/chip-item-bg.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <!-- <div class="left-content"></div> -->
+        <div class="chip-tab-right">
+          <div class="chip-item">
+            <div class="bg">
+              <img
+                class="hill-icon-img"
+                width="169px"
+                src="../../assets/market/chip-item-bg.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="chip-item">
+            <div class="bg">
+              <img
+                class="hill-icon-img"
+                width="169px"
+                src="../../assets/market/chip-item-bg.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="chip-item">
+            <div class="bg">
+              <img
+                class="hill-icon-img"
+                width="169px"
+                src="../../assets/market/chip-item-bg.png"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="chip-right">
+        <div class="chip-right-top">
+          <div class="token-lable">TOKEN ID</div>
+          <div class="token-id">#3006985843100103</div>
+        </div>
+        <div class="chip-right-bottom">
+          <div class="chip-assult">
+            <div class="owner">
+              <div class="owner-content">
+                <div>Owner :</div>
+                <div>0x21cE………e1a4</div>
+              </div>
+              <div class="owner-mint">
+                <div>Mint Time :</div>
+                <div>2022-12-31 23:59:59 UTC</div>
+              </div>
+              <div class="owner-history">
+                <div>History :</div>
+                <div>#3006985843100103 (NFTLink)</div>
+              </div>
+            </div>
+            <div class="def-content">
+              <div class="def-item">
+                <div>DEF PCT</div>
+                <div>+8%</div>
+              </div>
+              <div class="def-item">
+                <div>DEF PCT</div>
+                <div>+7.2%</div>
+              </div>
+              <div class="def-item" style="justify-content: center">
+                Unlocked at Lv.5
+              </div>
+              <div class="def-item">LUCKY Unlocked at Lv.5</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="buy-price">
+        <div class="price"><span class="price-number">9999.99</span></div>
+        <div>
+          <a href="javascript:void(0)">
+            <img
+              width="263px"
+              height="71px"
+              src="../../assets/market/hero/buy.png"
+              alt="aoi-hero"
+          /></a>
+        </div>
+      </div> -->
+    </div>
+
+    <!-- <span @click="closeTip" class="close">
+      <img
+        src="../../assets/market/hero/cose.png"
+        width="56px"
+        height="56px"
+        alt=""
+    /></span> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["hero", "isTab", "type"],
+  components: {},
+  data() {
+    return {
+      piece: "",
+    };
+  },
+  methods: {
+    closeTip() {
+      // 分发自定义事件(事件名: closeTip)
+      this.$emit("closeTip", false);
+    },
+    showTip() {
+      this.$emit("showTip", true);
+    },
+    closeMyself() {},
+    init(data) {
+      this.dialogVisible = true;
+      this.piece = data;
+      console.log(data, "dfgdg");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog,
+.el-pager li {
+  position: relative;
+  width: 1354px !important;
+  height: 775px !important;
+  background: url("../../assets/market/piece/details/bg.png") no-repeat;
+  background-size: 100% 100%;
+  box-shadow: none;
+}
+::v-deep .el-dialog__body {
+  padding: 0px 0px !important;
+}
+::v-deep .el-dialog__header {
+  padding: 0px 0px 0px;
+}
+
+.contaier {
+  display: flex;
+}
+.close {
+  position: absolute;
+  cursor: pointer;
+  right: -46px;
+  top: -31px;
+}
+.container {
+  display: flex;
+
+  .chip-left {
+    position: relative;
+    margin-left: 128px;
+    // margin-top: 137px;
+    display: flex;
+    margin-right: 51px;
+    .left-content {
+      width: 232px;
+    }
+    .chip-tab-left {
+      position: absolute;
+      right: 198px;
+      margin-left: 96px;
+      margin-top: 129px;
+      .chip-item {
+        width: 252px;
+        display: flex;
+        height: 238px;
+        background: url("../../assets/market/chip-bg.png") no-repeat;
+        background-size: 100% 100%;
+        .bg {
+          margin-left: 33px;
+          margin-top: 54px;
+        }
+      }
+    }
+    .chip-item {
+      width: 252px;
+      height: 238px;
+      display: flex;
+      background: url("../../assets/market/chip-bg.png") no-repeat;
+      background-size: 100% 100%;
+      .bg {
+        margin-left: 33px;
+        margin-top: 53px;
+      }
+    }
+  }
+  .chip-right {
+    width: 431px;
+    margin-top: 24px;
+  }
+  .chip-right-top {
+    color: #ffffff;
+    // margin-left: 137px;
+    width: 431px;
+    margin: 0 auto;
+    .token-lable {
+      text-align: center;
+      font-size: 46px;
+      font-weight: bold;
+      color: #ffffff;
+    }
+    .token-id {
+      font-size: 36px;
+      font-family: "Bahnschrift";
+      font-weight: bold;
+      color: #ffffff;
+      width: 398px;
+      height: 66px;
+      margin: 0 auto;
+      line-height: 66px;
+      text-align: center;
+      margin-bottom: 26px;
+      background: #28c1ed;
+      border: 4px solid rgba(91, 211, 246, 0.4);
+      border-radius: 24px;
+    }
+  }
+  .chip-right-bottom {
+    display: flex;
+  }
+  .chip-assult {
+  }
+  .owner {
+    width: 428px;
+    height: 147px;
+    background: rgba(5, 57, 68, 0.3);
+    border-radius: 14px;
+    padding-top: 30px;
+    padding-left: 25px;
+    font-size: 21px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .assult-rifle {
+    width: 431px;
+    height: 263px;
+    display: flex;
+    flex-direction: column;
+    // justify-content: space-between;
+    background: rgba(5, 57, 68, 0.3);
+    border-radius: 20px;
+  }
+  .assult-rifle-name {
+    margin-top: 20px;
+    margin-left: 20px;
+    height: 26px;
+    font-size: 37px;
+    // font-family: "SairaStencilOne";
+    color: #ffffff;
+  }
+
+  .hill-icon {
+    margin-top: 14px;
+    margin-right: 14px;
+    .hill-icon-img {
+    }
+  }
+  .assult-rifle-content {
+    display: flex;
+    justify-content: space-between;
+  }
+  .level {
+    margin-top: 23px;
+    margin-left: 20px;
+    display: flex;
+    justify-content: space-between;
+    .level-number {
+      font-size: 41px;
+      font-style: italic;
+      margin-left: 4px;
+      color: #ffffff;
+    }
+    .piece-number {
+      font-size: 29px;
+      margin-right: 24px;
+      font-family: "Bahnschrift";
+      font-weight: bold;
+      line-height: 52px;
+      color: #ffffff;
+    }
+    .level-name {
+      font-size: 31px;
+      font-family: "Bahnschrift";
+      font-weight: bold;
+      color: #ffffff;
+      margin-left: 5px;
+    }
+  }
+}
+.owner-content {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 25px;
+}
+.owner-mint {
+  display: flex;
+  margin-top: 20px;
+  margin-right: 25px;
+  justify-content: space-between;
+}
+.owner-history {
+  display: flex;
+  margin-top: 20px;
+  margin-right: 25px;
+  justify-content: space-between;
+}
+
+// .buy-price {
+//   position: absolute;
+//   right: 44px;
+//   bottom: -33px;
+//   display: flex;
+//   .price {
+//     width: 201px;
+//     height: 71px;
+//     font-size: 32px;
+//     position: relative;
+//     font-family: "Arciform";
+//     margin-right: 20px;
+//     color: #ffffff;
+//     background: url("../../assets/market/hero/price.png") no-repeat;
+//     background-size: 100% 100%;
+//     .price-number {
+//       position: absolute;
+//       right: 19px;
+//       top: 13px;
+//       font-size: 34px;
+//       // right: 82px;
+//       // bottom: -41px;
+//     }
+//   }
+// }
+.left-img {
+  width: 802px;
+  img {
+    width: 100%;
+    opacity: 0;
+  }
+}
+.img-details {
+  width: 802px;
+  height: 651px;
+  position: absolute;
+  top: -41px;
+  left: -40px;
+  // opacity: 0;
+  img {
+    width: 100%;
+    // opacity: 0;
+  }
+}
+.def-content {
+  width: 428px;
+  padding-top: 25px;
+  padding-left: 15px;
+  padding-right: 15px;
+  height: 265px;
+  background: rgba(5, 57, 68, 0.3);
+  border-radius: 14px;
+  margin-top: 25px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
+  .def-item {
+    width: 369px;
+    height: 48px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 10px;
+    margin-bottom: 14px;
+    padding-right: 18px;
+    padding-left: 19px;
+  }
+}
+</style>

src/components/market/WeaponMosaicChip.vue

@@ -2,9 +2,21 @@
   <div class="hero-right">
     <div class="bg"></div>
     <div class="container">
-      <div class="left-img">
+      <div class="hero-left-info">
-        <img src="" alt="" />
+        <div class="hero-left-info-img">
+          <img
+            v-if="data.item_id"
+            :src="require('@/assets/market/weapon/' + data.item_id + '.png')"
+            alt="aoi-hero"
+          />
+          <img
+            v-if="data.c_id"
+            :src="require('@/assets/market/weapon/' + data.c_id + '.png')"
+            alt="aoi-hero"
+          />
         </div>
+      </div>
+
       <div class="chip-left">
         <div class="chip-tab-left">
           <div class="chip-item">
@@ -126,7 +138,7 @@
 
 <script>
 export default {
-  props: ["hero", "isTab"],
+  props: ["data", "isTab", "type"],
   components: {},
   data() {
     return {
@@ -177,12 +189,35 @@ export default {
   right: -46px;
   top: -31px;
 }
+.hero-left-info {
+  width: 702px;
+  height: 702px;
+  margin-top: 32px;
+  margin-left: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: url("../../assets/market/weapon/elliptical-bg.png") no-repeat;
+  background-size: cover;
+  .hero-left-info-img {
+    width: 605px;
+    height: 274px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 100%;
+      // opacity: 0;
+    }
+  }
+}
+
 .container {
   display: flex;
 
   .chip-left {
     position: relative;
-    margin-left: 88px;
+    margin-left: 190px;
     // margin-top: 137px;
     display: flex;
     margin-right: 51px;
@@ -366,6 +401,21 @@ export default {
 // }
 .left-img {
   width: 802px;
+  img {
+    width: 100%;
+  }
+}
+.img-details {
+  width: 802px;
+  height: 651px;
+  position: absolute;
+  top: -41px;
+  left: -40px;
+  // opacity: 0;
+  img {
+    width: 100%;
+    // opacity: 0;
+  }
 }
 .def-content {
   width: 428px;

src/views/desktop/Market.vue

@@ -61,7 +61,7 @@
             desc=""
           ></result-no>
           <pagination
-            v-if="totalPage > 1"
+            v-if="totalPage > 10"
             :total="totalPage"
             :current="currentPage"
             @to-page="toPage"