调整武器展示方式

src/components/market/NftDetail.vue

@@ -72,6 +72,54 @@
         <div class="top-left"></div>
         <div class="top-right"></div>
       </div>
+      <div class="card-container" v-if="nftData.type === 2">
+        <div class="card-border"></div>
+        <div class="border">
+          <div class="title">
+            Basic Data
+          </div>
+          <div class="info">
+            <div class="two-col-info">
+              <div class="one-info">
+                <div class="info-title">Attack</div>
+                <div class="info-val">{{nftData.attrMap.get('atk')}}</div>
+              </div>
+              <div class="one-info">
+                <div class="info-title">Clip</div>
+                <div class="info-val">{{nftData.attrMap.get('clip_volume')}}</div>
+              </div>
+            </div>
+            <div class="two-col-info">
+              <div class="one-info">
+                <div class="info-title">Reload</div>
+                <div class="info-val">{{nftData.attrMap.get('reload_time')}}</div>
+              </div>
+              <div class="one-info">
+                <div class="info-title">Rate</div>
+                <div class="info-val">{{nftData.attrMap.get('fire_rate')}}</div>
+              </div>
+            </div>
+            <div class="two-col-info">
+              <div class="one-info">
+                <div class="info-title">Speed</div>
+                <div class="info-val">{{nftData.attrMap.get('bullet_speed')}}</div>
+              </div>
+              <div class="one-info">
+                <div class="info-title">Range</div>
+                <div class="info-val">{{nftData.attrMap.get('range')}}</div>
+              </div>
+            </div>
+            <div class="one-col-info" v-if="nftData.attrMap.has('advanced_count')">
+              <div class="one-info">
+                <div class="info-title">Advanced Count</div>
+                <div class="info-val">{{nftData.attrMap.get('advanced_count')}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="top-left"></div>
+        <div class="top-right"></div>
+      </div>
 
       <div class="card-container" v-if="nftData.type === 1">
         <div class="card-border"></div>
@@ -104,7 +152,7 @@
           </div>
           <div class="ext-info">
             <div class="one-info" v-for="(data, index) in nftData.extAttrList" :key="data.key+index">
-              <div class="info-title">{{data.key}}</div>
+              <div class="info-title">{{data.key.replace(/_/g, ' ')}}</div>
               <div class="info-val">{{data.value}}</div>
             </div>
           </div>
@@ -382,6 +430,7 @@ export default class extends Vue {
         .info-title {
           font-size: 20px;
           width: 60%;
+          text-transform: capitalize;
         }
         .info-val {
           color: #3CF562;
@@ -530,6 +579,7 @@ export default class extends Vue {
           .info-title {
             font-size: 16px;
             width: 60%;
+            text-transform: capitalize;
           }
           .info-val {
             color: #3CF562;

src/components/market/NftInfo.vue

@@ -37,14 +37,40 @@
       </div>
     </div>
     <div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 2">
-      <div class="all-col-info" >
+      <div class="one-col-info">
-        <div class="half-info">
+        <div class="one-info">
-          <div class="info-title w50">Level</div>
+          <div class="info-title">Level</div>
           <div class="info-val">{{nftData.level}}</div>
         </div>
-        <div class="half-info" v-for="(data, index) in nftData.extAttrList" :key="data.key+index">
+      </div>
-          <div class="info-title">{{data.key.replace(/_/g, ' ')}}</div>
+      <div class="two-col-info">
-          <div class="info-val">{{data.value}}</div>
+        <div class="one-info">
+          <div class="info-title">Attack</div>
+          <div class="info-val">{{nftData.attrMap.get('atk')}}</div>
+        </div>
+        <div class="one-info">
+          <div class="info-title">clip</div>
+          <div class="info-val">{{nftData.attrMap.get('clip_volume')}}</div>
+        </div>
+      </div>
+      <div class="two-col-info">
+        <div class="one-info">
+          <div class="info-title">reload</div>
+          <div class="info-val">{{nftData.attrMap.get('reload_time')}}</div>
+        </div>
+        <div class="one-info">
+          <div class="info-title">rate</div>
+          <div class="info-val">{{nftData.attrMap.get('fire_rate')}}</div>
+        </div>
+      </div>
+      <div class="two-col-info">
+        <div class="one-info">
+          <div class="info-title">Speed</div>
+          <div class="info-val">{{nftData.attrMap.get('bullet_speed')}}</div>
+        </div>
+        <div class="one-info">
+          <div class="info-title">range</div>
+          <div class="info-val">{{nftData.attrMap.get('range')}}</div>
         </div>
       </div>
     </div>

src/types/Nft.ts

@@ -71,7 +71,7 @@ export function parseNftData(data: any) {
   const extAttrList = []
   if (info.attr) {
     for (const sub of info.attr) {
-      const val = sub.type ? `${sub.val}%` : sub.val
+      const val = parseInt(sub.type) === 2 ? `${sub.val}%` : sub.val
       extAttrList.push({ key: sub.name, value: val })
     }
   }