fix

src/components/market/Chipdialog.vue

@@ -102,7 +102,9 @@ export default {
   components: { Close },
   props: ["dialogVisible", "data"],
   data() {
-    return {};
+    return {
+      dialogVisible:false
+    };
   },
   methods: {
     closeMyself(hide) {

src/components/market/Piecedialog.vue

@@ -0,0 +1,359 @@
+<template>
+  <el-dialog :show-close="false" :visible.sync="dialogVisible">
+    <div class="bg"></div>
+    <div class="container">
+      <div class="chip-left">
+        <img
+          width="214px"
+          :src="
+            require('@/assets/market/piece/details/details_' +
+              piece.chipid +
+              '.png')
+          "
+          alt=""
+        />
+      </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="assult-rifle">
+              <div class="assult-rifle-content">
+                <div class="assult-rifle-name">Assult Rifle</div>
+                <div class="hill-icon">
+                  <img
+                    width="28px"
+                    src="../../assets/market/hero/hill-icon.png"
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div class="level">
+                <div>
+                  <span class="level-name">Lv</span>
+                  <span class="level-number">04</span>
+                </div>
+                <div class="piece-number">9999.99</div>
+              </div>
+            </div>
+            <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>
+          <!-- <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 class="buy-price">
+        <div class="price"><span class="price-number">9999.99</span></div>
+        <div>
+          <a href="javascript:void(0)">
+            <img
+              width="345px"
+              src="../../assets/market/hero/buy.png"
+              alt="aoi-hero"
+          /></a>
+        </div>
+      </div>
+    </div>
+
+    <Close @closeMyself="closeMyself" />
+  </el-dialog>
+</template>
+
+<script>
+import Close from "./Close.vue";
+export default {
+  components: { Close },
+  data() {
+    return {
+      piece: "",
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    closeTip() {
+      // 分发自定义事件(事件名: closeTip)
+      this.$emit("closeTip");
+    },
+    closeMyself(data) {
+      this.dialogVisible = data;
+    },
+    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: 753px !important;
+  height: 479px !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: -18px;
+  top: -20px;
+}
+.container {
+  display: flex;
+  .chip-left {
+    margin-left: 88px;
+    margin-top: 137px;
+    margin-right: 51px;
+  }
+  .chip-right {
+    width: 343px;
+    margin-top: 23px;
+  }
+  .chip-right-top {
+    color: #ffffff;
+    // margin-left: 137px;
+    width: 343px;
+    .token-lable {
+      text-align: center;
+      font-size: 34px;
+      font-weight: bold;
+      color: #ffffff;
+    }
+    .token-id {
+      font-size: 28px;
+      font-family: "Bahnschrift";
+      font-weight: bold;
+      color: #ffffff;
+      width: 343px;
+      height: 41px;
+      line-height: 49px;
+      text-align: center;
+      margin-bottom: 12px;
+      background: #28c1ed;
+      border: 4px solid rgba(91, 211, 246, 0.4);
+      border-radius: 24px;
+    }
+  }
+  .chip-right-bottom {
+    display: flex;
+  }
+  .chip-assult {
+  }
+  .owner {
+    width: 343px;
+    height: 111px;
+    padding-top: 18px;
+    background: rgba(5, 57, 68, 0.3);
+    border-radius: 14px;
+    margin-top: 18px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .assult-rifle {
+     width: 343px;
+    height: 142px;
+    display: flex;
+    flex-direction: column;
+    // justify-content: space-between;
+    background: rgba(26, 58, 175, 0.3);
+    border-radius: 20px;
+  }
+  .assult-rifle-name {
+    margin-top: 20px;
+    margin-left: 20px;
+    height: 26px;
+    font-size: 34px;
+    // font-family: "SairaStencilOne";
+    color: #ffffff;
+  }
+  .def-content {
+    width: 222px;
+    padding-top: 25px;
+    padding-left: 15px;
+    padding-right: 15px;
+    height: 238px;
+    background: rgba(5, 57, 68, 0.3);
+    border-radius: 14px;
+    margin-left: 18px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+  .hill-icon {
+    margin-top: 24px;
+    margin-right: 23px;
+  }
+  .assult-rifle-content {
+    display: flex;
+    justify-content: space-between;
+  }
+  .level {
+    margin-top: 33px;
+    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: 35px;
+      font-style: italic;
+      margin-left: 5px;
+      color: #ffffff;
+    }
+    .lucky-value {
+      width: 140px;
+      height: 51px;
+      margin-right: 19px;
+      background: rgba(249, 140, 23, 0.7);
+      display: flex;
+      align-items: center;
+      border-radius: 29px;
+    }
+    .lucky-img {
+      width: 45px;
+      height: 45px;
+      background: rgba(250, 178, 100, 0.8);
+      display: flex;
+      margin-left: 4px;
+      justify-content: center;
+      align-items: center;
+      line-height: 45px;
+      margin-right: 5px;
+      border-radius: 50%;
+    }
+    .lucky-text {
+      font-size: 13px;
+      margin-top: 3px;
+      font-style: italic;
+      color: #ffffff;
+      line-height: 23px;
+    }
+    .lucky-number {
+      font-size: 20px;
+      font-style: italic;
+      color: #ffffff;
+    }
+    .lucky-boder {
+      width: 90px;
+      height: 2px;
+      background: linear-gradient(
+        90deg,
+        #ffffff 0%,
+        rgba(255, 255, 255, 0.1) 90%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      border-radius: 1px;
+    }
+  }
+}
+.owner-content {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 13px;
+  margin-right: 13px;
+}
+.owner-mint {
+  display: flex;
+  margin-top: 10px;
+  margin-right: 13px;
+  justify-content: space-between;
+  margin-left: 13px;
+}
+.owner-history {
+  display: flex;
+  margin-top: 10px;
+  margin-right: 13px;
+  justify-content: space-between;
+  margin-left: 13px;
+}
+.def-item {
+  width: 202px;
+  height: 43px;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+  margin-bottom: 14px;
+  padding-right: 7px;
+  padding-left: 13px;
+}
+.buy-price {
+  position: absolute;
+  right: 63px;
+  bottom: -41px;
+  display: flex;
+  .price {
+    width: 187px;
+    height: 66px;
+    font-size: 32px;
+    position: relative;
+    font-family: "Arciform";
+    margin-right: 20px;
+    color: #ffffff;
+    background: url("../../assets/market/hero/price.png") no-repeat;
+    background-size: contain;
+    .price-number {
+      position: absolute;
+      right: 19px;
+      top: 13px;
+      // right: 82px;
+      // bottom: -41px;
+    }
+  }
+}
+</style>

src/components/market/nft/PieceNft.vue

@@ -1,82 +1,108 @@
 <template>
-  <div class="container">
+  <div>
-    <div @click="ChipDialog(chip)"  class="list-content"  v-for="piece,i in pieceList" :key="i">
+    <div class="container">
-      <div class="chip-bg">
+      <div
-        <img
+        
-          width="125px"
+        class="list-content"
-          :src="require('@/assets/market/piece/piece_' + piece.chipid + '.png')"
+        v-for="(piece, i) in pieceList"
-          alt=""
+        @click="showTip(piece)"
-        />
+        :key="i"
-      </div>
+      >
-      <div class="level-content">
+        <div class="chip-bg">
-        <!-- <div class="level-lv">
+          <img
+            width="125px"
+            :src="
+              require('@/assets/market/piece/piece_' + piece.chipid + '.png')
+            "
+            alt=""
+          />
+        </div>
+        <div class="level-content">
+          <!-- <div class="level-lv">
           Lv <span class="level-number">{{ piece.level }}</span>
         </div> -->
-        <div class="tree-guard">Tree guard</div>
+          <div class="tree-guard">Tree guard</div>
-      </div>
+        </div>
-      <div class="price-content">
+        <div class="price-content">
-        <div class="price-left">
+          <div class="price-left">
-          <div>
+            <div>
+              <img
+                width="32px"
+                src="../../../assets/market/chip/t-icon.png"
+                alt=""
+              />
+            </div>
+
+            <div class="price">9999.99</div>
+          </div>
+          <div class="buy">
             <img
-              width="32px"
+              width="78px"
-              src="../../../assets/market/chip/t-icon.png"
+              src="../../../assets/market/chip/buy.png"
               alt=""
             />
           </div>
-
-          <div class="price">9999.99</div>
-        </div>
-        <div class="buy">
-          <img width="78px" src="../../../assets/market/chip/buy.png" alt="" />
         </div>
       </div>
     </div>
+    <Piecedialog
+      v-if="isShow"
+      ref="dialog"
+      @closeTip="closeTip"
+      @showTip="showTip"
+    ></Piecedialog>
   </div>
 </template>
 
 <script>
+import Piecedialog from "../Piecedialog.vue";
 export default {
+  components: { Piecedialog },
   data() {
     return {
+      isShow: false,
       pieceList: [
         {
-         
           chipid: "01",
           price: 9999,
         },
         {
-          
           chipid: "02",
           price: 9999,
         },
         {
-          
           chipid: "03",
           price: 9999,
         },
         {
-          
           chipid: "04",
           price: 9999,
         },
         {
-        
           chipid: "05",
           price: 9999,
         },
         {
-         
           chipid: "06",
           price: 9999,
         },
       ],
     };
   },
-  methods:{
+  methods: {
-    ChipDialog(){
+    closeTip() {
-
+      this.isShow = false;
-    }
+    },
-  }
+    showTip(data) {
+      this.isShow = true;
+      this.$nextTick(() => {
+        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
+        //init调用的是dialog-component组件里面的init方法
+        //data是传递给弹窗页面的值
+        this.$refs.dialog.init(data);
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -155,14 +181,14 @@ export default {
   }
 }
 .chip-bg {
- width: 216px;
+  width: 216px;
   height: 182px;
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 182px;
   background: url("../../../assets/market/piece/bg-there.png") no-repeat;
-  background-size:100% 100%;
+  background-size: 100% 100%;
 }
 .tree-guard {
   font-size: 21px;