src/views/homeMenu.vue

   1 <style scoped>
   2 .accounts {
   3     width: 100%;
   4     height: 200px;
   5     overflow-x: hidden;
   6     overflow-y: scroll;
   7     margin-bottom: 25px;
   8 }
   9 .accounts::-webkit-scrollbar {
  10     display: none;
  11 }
  12 .accounts i {
  13     font-size: 24px;
  14 }
  15
  16 .menu-panel {
  17     height: 520px;
  18     width: 230px;
  19     padding: 40px 30px;
  20 }
  21 .menu-list {
  22     border-top: 1px solid #c9c9c9;
  23     padding-top: 15px;
  24 }
  25 .account {
  26     width: 150px;
  27     display: inline-block;
  28     vertical-align: middle;
  29 }
  30 .account-alias {
  31     width: 150px;
  32     font-size: 19px;
  33     overflow: hidden;
  34     white-space: nowrap;
  35     text-overflow: ellipsis;
  36 }
  37 .account-asset {
  38     font-size: 15px;
  39 }
  40 </style>
  41
  42 <template>
  43     <div class="bg-gray menu-panel warp-chlid">
  44         <div>
  45             <i class="iconfont btn-close" @click="$router.go(-1)">&#xe605;</i>
  46             <div class="menu-title">{{$t('menu.title')}}</div>
  47         </div>
  48         <div class="menu-content">
  49             <div class="list accounts">
  50                 <div v-for="(account, index) in accounts" :key="index" @click="accountSelected(account)">
  51                     <div :class="(selectedAccount != undefined && account.address == selectedAccount.address) ? 'list-item active': 'list-item'">
  52                         <i class="iconfont icon-user"></i>
  53                         <div class="account">
  54                             <div class="account-alias">{{account.alias}}</div>
  55                             <div class="account-asset">{{account.balance}} BTM</div>
  56                         </div>
  57                     </div>
  58                 </div>
  59             </div>
  60             <div class="list menu-list">
  61                 <router-link :to="{name: 'menu-account-creation'}">
  62                     <div class="list-item">
  63                         <i class="iconfont icon-plusbox"></i>{{ $t('menu.createAccount') }}
  64                     </div>
  65                 </router-link>
  66                 <router-link :to="{name: 'menu-backup'}">
  67                     <div class="list-item">
  68                         <i class="iconfont icon-backup"></i>{{ $t('menu.backup') }}
  69                     </div>
  70                 </router-link>
  71                 <router-link :to="{name: 'menu-help'}">
  72                     <div class="list-item">
  73                         <i class="iconfont icon-help"></i>{{ $t('menu.help') }}
  74                     </div>
  75                 </router-link>
  76                 <router-link :to="{name: 'menu-settings'}">
  77                     <div class="list-item">
  78                         <i class="iconfont icon-settings"></i>{{ $t('menu.setting') }}
  79                     </div>
  80                 </router-link>
  81             </div>
  82         </div>
  83
  84         <!-- child menu -->
  85         <router-view></router-view>
  86     </div>
  87 </template>
  88
  89 <script>
  90 export default {
  91     name: "",
  92     data() {
  93         return {
  94             accounts: [],
  95             selectedAccount: {},
  96         };
  97     },
  98     methods: {
  99         accountSelected: function (accountInfo) {
 100             this.selectedAccount = Object.assign({}, accountInfo);
 101             this.$router.push({ name: 'home', params: { selectedAccount: this.selectedAccount } })
 102         },
 103     }, mounted() {
 104         let params = this.$route.params;
 105
 106         this.accounts = params.accounts
 107         this.selectedAccount = params.selected
 108     }
 109 };
 110 </script>