src/popup/framework/home.vue

   1 <style lang="" scoped>
   2 .account {
   3   /* text-align: center; */
   4   font-size: 18px;
   5 }
   6 .account .btn-menu {
   7   float: left;
   8   margin: 20px 8px 0 20px;
   9 }
  10
  11 select.btn-toggle {
  12   appearance: none;
  13   -moz-appearance: none;
  14   -webkit-appearance: none;
  15   background: transparent;
  16   border: none;
  17   outline: none;
  18 }
  19 .account .btn-toggle {
  20   float: right;
  21   margin-top: 22px;
  22   margin-right: 20px;
  23   border: 2px solid #fff;
  24   border-radius: 18px;
  25   padding: 0 10px;
  26   font-size: 14px;
  27 }
  28 .account span {
  29   display: block;
  30   padding-top: 20px;
  31   font-size: 18px;
  32   font-weight: bold;
  33   width: 120px;
  34   overflow: hidden;
  35   text-overflow: ellipsis;
  36   white-space: nowrap;
  37 }
  38
  39 .balance {
  40   margin-top: 20px;
  41   text-align: center;
  42   padding: 0 30px 20px;
  43 }
  44 .balance .balance-icon {
  45   display: inline-flex;
  46   height: 40px;
  47   width: 40px;
  48   background: #fff;
  49   border: 1px solid #dedede;
  50   border-radius: 25px;
  51   padding: 8px;
  52   margin: 8px;
  53 }
  54 .balance .amount {
  55   padding-bottom: 10px;
  56 }
  57 .balance .token-amount {
  58   font-size: 32px;
  59 }
  60 .qrcode {
  61   margin-left: 5px;
  62   vertical-align: middle;
  63 }
  64 .btn-transfer {
  65   width: 200px;
  66   font-size: 20px;
  67   line-height: 22px;
  68   height: 40px;
  69   line-height: 40px;
  70 }
  71
  72 .transactions {
  73   font-size: 14px;
  74   /* line-height: 40px; */
  75   /* display: contents; */
  76 }
  77 .transactions h3 {
  78   padding: 10px;
  79   margin: 0;
  80   color: #cacaca;
  81 }
  82 .transactions .list {
  83   padding: 0 20px;
  84 }
  85 .list-item {
  86   display: flex;
  87   border-bottom: 1px solid #5e5e5e;
  88 }
  89
  90 .list-item .value {
  91   position: absolute;
  92   right: 20px;
  93   margin-top: 13px;
  94 }
  95 .mask {
  96   z-index: 25;
  97   position: fixed;
  98   height: 100%;
  99   width: 100%;
 100   top: 0;
 101   left: 0;
 102   right: 0;
 103   bottom: 0;
 104   opacity: 1;
 105   visibility: visible;
 106   background-color: rgba(0, 0, 0, 0.3);
 107 }
 108 .faster {
 109   animation-duration: 0.3s;
 110 }
 111 </style>
 112
 113 <template>
 114   <div>
 115     <section class="bg-green">
 116       <div class="row account">
 117           <a class="btn-menu" href="#"><i class="iconfont icon-menu" @click="openMenu"></i></a>
 118           <select class="btn-toggle">
 119             <option value="">BYTOM主网络</option>
 120             <option value="">BYTOM测试网络</option>
 121           </select>
 122           <span>账户1aaadfddssdsd</span>
 123       </div>
 124       <div class="row balance">
 125           <img src="../../assets/logo.png" class="balance-icon">
 126           <div class="amount">
 127               <div class="token-amount">100.123 BTM</div>
 128               <p class="account-address">bm1qsgh.....2dz8uny<i class="iconfont qrcode" @click="showQrcode">&#xe7dd;</i></p>
 129           </div>
 130           <a href="#" class="btn btn-primary btn-transfer">转账</a>
 131       </div>
 132     </section>
 133
 134     <section class="transactions">
 135       <h3 class="color-gray">交易记录</h3>
 136       <ul class="list">
 137         <li class="list-item">
 138             <div>
 139               <div class="time">2018-08-22</div>
 140               <div class="addr">bm1qsg...8uny</div>
 141             </div>
 142             <div class="value">+2344 BTM</div>
 143         </li>
 144         <li class="list-item">
 145             <div>
 146               <div class="time">2018-08-22</div>
 147               <div class="addr">bm1qsg...8uny</div>
 148             </div>
 149             <div class="value">-1234 BTM</div>
 150         </li>
 151       </ul>
 152     </section>
 153
 154     <!-- modal -->
 155     <div v-show="maskOpen" class="mask"></div>
 156     <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
 157     <transition name="custom-classes-transition"
 158         enter-active-class="animated slideInLeft faster"
 159         leave-active-class="animated slideOutLeft faster"
 160         v-on:after-leave="afterLeave">
 161         <Menu v-show="menuOpen" @closeNotify="menuOpen=false"></Menu>
 162     </transition>
 163   </div>
 164 </template>
 165
 166 <script>
 167 import Menu from "./components/menu/main";
 168 export default {
 169   name: "",
 170   components: {
 171     Menu
 172   },
 173   data() {
 174     return {
 175       menuOpen: false,
 176       maskOpen: false
 177     };
 178   },
 179   methods: {
 180     openMenu: function() {
 181       this.maskOpen = true;
 182       this.menuOpen = true;
 183     },
 184     afterLeave: function() {
 185       this.maskOpen = false;
 186     },
 187     showQrcode: function() {}
 188   },
 189   mounted() {
 190     this.$Bytom.accounts.listAll().then(resp=>{
 191       console.log(resp)
 192     });
 193     // this.openMenu()
 194   }
 195 };
 196 </script>