调整wallet页面

src/components/market/wallet/TotalBalance.vue

@@ -2,11 +2,11 @@
   <div class="total-balance" :class="{'mobile': mobile}">
     <div class="content">
       <div class="name"><span>Other Currencies</span></div>
-      <div class="coin">-- WBNB</div>
+      <template v-for="d in currencies">
-      <div class="subCoin space">-- USD</div>
+        <div class="coin" :key="d.name+'1'">{{d.amount}} {{d.name}}</div>
-      <div class="coin">-- BUSD</div>
+        <div class="subCoin space" :key="d.name+'2'">{{d.price}} USD</div>
-      <div class="subCoin">-- USD</div>
+      </template>
-      <div class="wrongNetwork"><span>Wrong network</span></div>
+      <div class="wrongNetwork hide"><span>Wrong network</span></div>
     </div>
   </div>
 </template>
@@ -14,12 +14,31 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule, DeviceType } from '@/store/modules/app'
 
+export interface ICurrentData{
+  name: string
+  amount: number
+  price: number
+}
+
 @Component({
   name: 'TotalBalance',
   components: {
   }
 })
 export default class TotalBalance extends Vue {
+  private currencies: ICurrentData[] = [
+    {
+      name: 'WBNB',
+      amount: 1000,
+      price: 10000
+    },
+    {
+      name: 'WKCS',
+      amount: 1000,
+      price: 10000
+    }
+  ]
+
   get mobile() {
     return AppModule.device === DeviceType.Mobile
   }
@@ -39,6 +58,9 @@ export default class TotalBalance extends Vue {
     flex: 1;
     .wrongNetwork {
       margin-top: 0.5em;
+      &.hide{
+        display: none;
+      }
       span {
         font-weight: bold;
         font-size: 0.8125em;

src/components/market/wallet/WalletPanel.vue

@@ -11,22 +11,20 @@
     </div>
     <div class="wallet">
       <total-balance></total-balance>
-      <coin-card></coin-card>
+      <coin-card v-for="d in coinList" :coin-data="d" :key="d.symbol"></coin-card>
-      <coin-card></coin-card>
     </div>
     <div class="header ingame"><span class="label">Ingame Currency</span>
     </div>
     <div class="horizonalBar"></div>
     <div class="wallet">
-      <game-coin-card></game-coin-card>
+      <game-coin-card v-for="d in gameCoinList" :coin-data="d" :key="d.symbol"></game-coin-card>
-      <game-coin-card></game-coin-card>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import TotalBalance from '@/components/market/wallet/TotalBalance.vue'
-import CoinCard from '@/components/market/wallet/CoinCard.vue'
+import CoinCard, { ICoinData } from '@/components/market/wallet/CoinCard.vue'
 import GameCoinCard from '@/components/market/wallet/GameCoinCard.vue'
 
 @Component({
@@ -37,7 +35,41 @@ import GameCoinCard from '@/components/market/wallet/GameCoinCard.vue'
     TotalBalance
   }
 })
-export default class WalletPanel extends Vue {}
+export default class WalletPanel extends Vue {
+  private coinList: ICoinData[] = [
+    {
+      name: 'CEBG Coin',
+      symbol: 'CEC',
+      amount: 100,
+      icon: require('@/assets/market/cec.png'),
+      price: 100
+    },
+    {
+      name: 'CEBG Gem',
+      symbol: 'CEG',
+      amount: 100,
+      icon: require('@/assets/market/ceg.png'),
+      price: 100
+    }
+  ]
+
+  private gameCoinList: ICoinData[] = [
+    {
+      name: 'CEBG Coin',
+      symbol: 'gCEC',
+      amount: 100,
+      icon: require('@/assets/market/cec.png'),
+      price: 100
+    },
+    {
+      name: 'CEBG Gem',
+      symbol: 'gCEG',
+      amount: 100,
+      icon: require('@/assets/market/ceg.png'),
+      price: 100
+    }
+  ]
+}
 </script>
 <style lang="scss" scoped>
 @import '../../../scss/breakpoints.scss';