From 59afa144e6ff9e244cd291f99f287d49dabfc13d Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Sat, 19 Mar 2022 12:16:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8clip-path=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E5=8E=9F=E6=9C=89=E7=9A=84=E8=BE=B9=E6=A1=86=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/NftDetail.vue | 255 ++++++++++++++++++----------
 src/views/desktop/Item.vue          |  36 +++-
 2 files changed, 199 insertions(+), 92 deletions(-)

diff --git a/src/components/market/NftDetail.vue b/src/components/market/NftDetail.vue
index 1059341..3fe4789 100644
--- a/src/components/market/NftDetail.vue
+++ b/src/components/market/NftDetail.vue
@@ -16,83 +16,105 @@
           LV.{{data.info.level}}
         </div>
         <level-star :level="nftQuality"></level-star>
-        <div class="owner-info">
-          <div class="owner">
-            <div>Owner: </div>
-            <div>{{addressShow}}</div>
-          </div>
-          <div class="mint">
-            <div>Mint Time: </div>
-            <div>{{mintTime}}</div>
+        <div class="owner-container">
+          <div class="owner-border"></div>
+          <div class="owner-info">
+            <div class="owner">
+              <div>Owner: </div>
+              <div>{{addressShow}}</div>
+            </div>
+            <div class="mint">
+              <div>Mint Time: </div>
+              <div>{{mintTime}}</div>
+            </div>
           </div>
         </div>
+
       </div>
     </div>
     <div class="right-part">
       <div class="nft-id-desktop">#{{data.id}}</div>
-      <div class="border basic-data">
-        <div class="title">
-          Basic Data
-        </div>
-        <div class="info">
-          <div class="two-col-info">
-            <div class="one-info">
-              <div class="info-title">HP</div>
-              <div class="info-val">{{data.info.hp}}</div>
-            </div>
-            <div class="one-info">
-              <div class="info-title">Speed</div>
-              <div class="info-val">{{data.info.speed}}</div>
-            </div>
+      <div class="card-container">
+        <div class="card-border"></div>
+        <div class="border">
+          <div class="title">
+            Basic Data
           </div>
-          <div class="two-col-info">
-            <div class="one-info">
-              <div class="info-title">Attack</div>
-              <div class="info-val">{{data.info.atk}}</div>
+          <div class="info">
+            <div class="two-col-info">
+              <div class="one-info">
+                <div class="info-title">HP</div>
+                <div class="info-val">{{data.info.hp}}</div>
+              </div>
+              <div class="one-info">
+                <div class="info-title">Speed</div>
+                <div class="info-val">{{data.info.speed}}</div>
+              </div>
             </div>
-            <div class="one-info">
-              <div class="info-title">Defence</div>
-              <div class="info-val">{{data.info.def}}</div>
+            <div class="two-col-info">
+              <div class="one-info">
+                <div class="info-title">Attack</div>
+                <div class="info-val">{{data.info.atk}}</div>
+              </div>
+              <div class="one-info">
+                <div class="info-title">Defence</div>
+                <div class="info-val">{{data.info.def}}</div>
+              </div>
             </div>
-          </div>
-          <div class="one-col-info">
-            <div class="one-info">
-              <div class="info-title">Advanced Count</div>
-              <div class="info-val">{{data.info.advancedCount}}</div>
+            <div class="one-col-info">
+              <div class="one-info">
+                <div class="info-title">Advanced Count</div>
+                <div class="info-val">{{data.info.advancedCount}}</div>
+              </div>
             </div>
           </div>
         </div>
+        <div class="top-left"></div>
+        <div class="top-right"></div>
       </div>
-      <div class="border special-data">
-        <div class="title">
-          Special Data
-        </div>
-        <div class="info">
-          <div class="two-col-info">
-            <div class="one-info">
-              <div class="info-title">Lucky</div>
-              <div class="info-val">{{data.info.lucky}}</div>
-            </div>
-            <div class="one-info">
-              <div class="info-title font14">Success Rate</div>
-              <div class="info-val">{{data.info.successRate}}</div>
+
+      <div class="card-container">
+        <div class="card-border"></div>
+        <div class="border special-data">
+          <div class="title">
+            Special Data
+          </div>
+          <div class="info">
+            <div class="two-col-info">
+              <div class="one-info">
+                <div class="info-title">Lucky</div>
+                <div class="info-val">{{data.info.lucky}}</div>
+              </div>
+              <div class="one-info">
+                <div class="info-title font14">Success Rate</div>
+                <div class="info-val">{{data.info.successRate}}</div>
+              </div>
             </div>
           </div>
         </div>
+        <div class="top-left"></div>
+        <div class="top-right"></div>
       </div>
-      <div class="border price-data" v-if="data.priceDiscount">
-        <div class="title">
-          Price
-        </div>
-        <div class="info">
-          <div class="one-col-info">
-            <div class="one-info">
-              <div class="info-title price">{{data.currency}}</div>
-              <div class="info-val price">{{data.priceDiscount}}</div>
+
+      <div class="card-container">
+        <div class="card-border"></div>
+        <div class="border price-data" v-if="data.priceDiscount">
+          <div class="title">
+            Price
+          </div>
+          <div class="info">
+            <div class="one-col-info">
+              <div class="one-info">
+                <div class="info-title price">{{data.currency}}</div>
+                <div class="info-val price">{{data.priceDiscount}}</div>
+              </div>
             </div>
           </div>
         </div>
+        <div class="top-left"></div>
+        <div class="top-right"></div>
       </div>
+
       <div class="btn-div" v-if="data.priceDiscount">
         <div class="buy-btn">
           <img v-if="canBuy" src="@/assets/main/detail/btn_buy.png" alt="btn-buy">
@@ -157,7 +179,9 @@ export default class extends Vue {
 <style lang="scss" scoped>
 @import '../../scss/breakpoints.scss';
 @import '../../scss/tooltip.scss';
-
+.info-root{
+  position: relative;
+}
 .container{
   color: white;
   width: 100vw;
@@ -178,6 +202,7 @@ export default class extends Vue {
     padding-top: 20px;
     z-index: 2;
     .base-info {
+      margin-bottom: 24%;
       .nft-id-mobile{
         display: none;
       }
@@ -194,26 +219,37 @@ export default class extends Vue {
         color: #FFCF49;
       }
     }
-    .owner-info {
-      display: flex;
-      flex-direction: column;
-      background-image: url("../../assets/main/detail/border-bg-1.png");
-      background-size: contain;
-      background-repeat: no-repeat;
-      padding: 30px 60px 20px 30px;
-      height: 200px;
-      font-size: 20px;
-      div{
+    .owner-container{
+      width:  448px;
+      position: relative;
+      .owner-border{
+        position: absolute;
+        top:  0;
+        left:  0;
+        right: 0;
+        bottom: 0;
+        background: #24E0C8;
+        clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 60px, 100% 100%, 0 100%, 0 2px,
+          2px 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 60px, calc(100% - 40px) 2px, 2px 2px
+        );
+      }
+      .owner-info {
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin-top: 10px;
-      }
-      .owner {
-        color: #FFC359
-      }
-      .mint{
-        font-size: 17px;
+        flex-direction: column;
+        padding: 30px 60px 20px 30px;
+        font-size: 20px;
+        div{
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 10px;
+        }
+        .owner {
+          color: #FFC359
+        }
+        .mint{
+          font-size: 17px;
+        }
       }
     }
   }
@@ -246,17 +282,54 @@ export default class extends Vue {
     flex-direction: column;
     justify-content: end;
     padding-bottom: 60px;
+    margin-right: 20px;
     .nft-id-desktop{
       color: #46E0F4;
       font-size: 26px;
     }
+    .card-container{
+      width:  100%;
+      position: relative;
+      margin-top: 20px;
+      .card-border{
+        position: absolute;
+        top:  0;
+        left:  0;
+        right: 0;
+        bottom: 0;
+        background: #24E0C8;
+        clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 14px,
+          2px 12px, 2px calc(100% - 14px), 14px calc(100% - 2px), calc(100% - 14px) calc(100% - 2px), calc(100% - 2px) calc(100% - 14px),
+          calc(100% - 2px) 14px, calc(100% - 14px) 2px, 14px 2px, 2px 14px, 0 14px
+        );
+      }
+      .top-left{
+        position: absolute;
+        left: 6px;
+        top: 6px;
+        width: 9px;
+        height: 9px;
+        background: #24E0C8;
+        clip-path: polygon(9px 0, 9px 9px, 0 9px);
+      }
+      .top-right{
+        position: absolute;
+        right: 6px;
+        top: 6px;
+        width: 9px;
+        height: 9px;
+        background: #24E0C8;
+        clip-path: polygon(0 0, 9px 9px, 0 9px);
+      }
+    }
+
     .border {
       display: flex;
       flex-direction: column;
       line-height: 60px;
       background-color: #0C1737;
-      margin-top: 20px;
       .title {
+        clip-path: polygon(14px 2px, calc(100% - 14px) 2px, calc(100% - 2px) 14px, calc(100% - 2px) 100%, 2px 100%, 2px 14px);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -265,14 +338,10 @@ export default class extends Vue {
         color: #E3AE50;
         background-color: #070912;
         border: 20px solid #070912;
-        border-image-source: url('../../assets/main/detail/border-bg-t.png');
-        border-image-slice: 20 20 20 20;
       }
       .info{
-        border: 20px solid #070912;
-        border-image-source: url('../../assets/main/detail/border-bg-b.png');
-        border-image-slice: 20 20 20 20;
         margin-top: -20px;
+        padding: 20px;
         .font14 {
           font-size: 14px!important;
         }
@@ -390,6 +459,7 @@ export default class extends Vue {
       }
       .base-info{
         margin-top: 100px;
+        margin-bottom: 20px;
         .nft-id-mobile{
           color: #46E0F4;
           font-size: 20px;
@@ -404,13 +474,16 @@ export default class extends Vue {
             font-size: 36px;
           }
         }
-        .owner-info{
-          padding: 0 40px 20px 20px;
-          font-size: 15px;
-          width: 76vw;
-          height: 29vw;
-          .mint{
-            font-size: 12px;
+        .owner-container{
+          width: 91vw;
+          .owner-info{
+            padding: 0 40px 20px 20px;
+            font-size: 15px;
+            width: 76vw;
+            height: 29vw;
+            .mint{
+              font-size: 12px;
+            }
           }
         }
       }
@@ -423,8 +496,10 @@ export default class extends Vue {
       .nft-id-desktop{
         display: none;
       }
-      .border{
+      .card-container{
         width: 91%;
+      }
+      .border{
         .title {
           font-size: 24px;
         }
diff --git a/src/views/desktop/Item.vue b/src/views/desktop/Item.vue
index bb8f5f8..04142de 100644
--- a/src/views/desktop/Item.vue
+++ b/src/views/desktop/Item.vue
@@ -53,8 +53,40 @@ export default class Item extends Vue {
       account: this.accountId,
       token_id: this.nftId
     }
-    const res: any = await getNftDetail(reqData)
-    const data = res.info
+    // const res: any = await getNftDetail(reqData)
+    // const data = res.info
+    const data = {
+      id: '100000000001',
+      token_id: 100000000001,
+      type: 0,
+      skelName: 'n_aoi',
+      name: 'miffy',
+      price: 10,
+      priceDiscount: 10,
+      decimals: 0,
+      currency: 'BNB',
+      class: 0,
+      repeat: false,
+      showBuy: false,
+      mint_time: 1647652513621,
+      owner_address: '',
+      currency_list: [
+        {
+          discount_rate: 1,
+          original_price: 1,
+          discount_price: 1,
+          contract_address: '0x111',
+          name: 'cec'
+        }
+      ],
+      info: {
+        level: 1,
+        advanced_count: 1,
+        success_rate: 2,
+        name: 'astral',
+        job: '1'
+      }
+    }
     const nftInfo: INftAttr = data.info
     nftInfo.mintTime = data.mint_time
     nftInfo.owner = data.owner_address