使用clip-path替换原有的边框图片

src/components/market/NftDetail.vue

@@ -16,6 +16,8 @@
           LV.{{data.info.level}}
         </div>
         <level-star :level="nftQuality"></level-star>
+        <div class="owner-container">
+          <div class="owner-border"></div>
           <div class="owner-info">
             <div class="owner">
               <div>Owner: </div>
@@ -27,10 +29,14 @@
             </div>
           </div>
         </div>
+
+      </div>
     </div>
     <div class="right-part">
       <div class="nft-id-desktop">#{{data.id}}</div>
-      <div class="border basic-data">
+      <div class="card-container">
+        <div class="card-border"></div>
+        <div class="border">
           <div class="title">
             Basic Data
           </div>
@@ -63,6 +69,12 @@
             </div>
           </div>
         </div>
+        <div class="top-left"></div>
+        <div class="top-right"></div>
+      </div>
+
+      <div class="card-container">
+        <div class="card-border"></div>
         <div class="border special-data">
           <div class="title">
             Special Data
@@ -80,6 +92,12 @@
             </div>
           </div>
         </div>
+        <div class="top-left"></div>
+        <div class="top-right"></div>
+      </div>
+
+      <div class="card-container">
+        <div class="card-border"></div>
         <div class="border price-data" v-if="data.priceDiscount">
           <div class="title">
             Price
@@ -93,6 +111,10 @@
             </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,14 +219,24 @@ export default class extends Vue {
         color: #FFCF49;
       }
     }
+    .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: 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{
           display: flex;
@@ -217,6 +252,7 @@ export default class extends Vue {
         }
       }
     }
+  }
   .back-btn {
     display: flex;
     flex-direction: row;
@@ -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,6 +474,8 @@ export default class extends Vue {
             font-size: 36px;
           }
         }
+        .owner-container{
+          width: 91vw;
           .owner-info{
             padding: 0 40px 20px 20px;
             font-size: 15px;
@@ -415,6 +487,7 @@ export default class extends Vue {
           }
         }
       }
+    }
     .right-part{
       width: 100vw;
       align-items: center;
@@ -423,8 +496,10 @@ export default class extends Vue {
       .nft-id-desktop{
         display: none;
       }
-      .border{
+      .card-container{
         width: 91%;
+      }
+      .border{
         .title {
           font-size: 24px;
         }

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 res: any = await getNftDetail(reqData)
-    const data = res.info
+    // 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