From 416d556b1d61f97219fbfdb416004ae9e3d442d7 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Sat, 23 Apr 2022 21:56:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=AD=A6=E5=99=A8=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=AD=97=E6=AE=B5=E7=9A=84=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/NftInfo.vue | 41 ++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/market/NftInfo.vue b/src/components/market/NftInfo.vue
index 5bc883e..e1eea20 100644
--- a/src/components/market/NftInfo.vue
+++ b/src/components/market/NftInfo.vue
@@ -37,15 +37,13 @@
       </div>
     </div>
     <div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 2">
-      <div class="one-col-info">
-        <div class="one-info">
+      <div class="all-col-info" >
+        <div class="half-info">
           <div class="info-title w50">Level</div>
           <div class="info-val">{{nftData.level}}</div>
         </div>
-      </div>
-      <div class="one-col-info" v-for="(data, index) in nftData.extAttrList" :key="data.key+index">
-        <div class="one-info">
-          <div class="info-title w50">{{data.key}}</div>
+        <div class="half-info" v-for="(data, index) in nftData.extAttrList" :key="data.key+index">
+          <div class="info-title">{{data.key.replace(/_/g, ' ')}}</div>
           <div class="info-val">{{data.value}}</div>
         </div>
       </div>
@@ -157,6 +155,25 @@ export default class extends Vue {
           width: 40%;
         }
       }
+      .all-col-info {
+        display: flex;
+        flex-wrap: wrap;
+        .half-info{
+          width: 50%;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          .info-title{
+            width: 60%;
+            text-transform: capitalize;
+          }
+          .info-val{
+            width: 40%;
+            margin-left: 10px;
+            color: #3CF562;
+          }
+        }
+      }
     }
   }
   @media (max-width: 767px) {
@@ -199,6 +216,18 @@ export default class extends Vue {
             display: flex;
           }
         }
+        .all-col-info {
+          .half-info{
+            width: 100%;
+            margin-bottom: 8px;
+            .info-title{
+              width: 60%;
+            }
+            .info-val{
+              width: 40%;
+            }
+          }
+        }
         .coming{
           color: #6B6E91;
           text-align: center;