<x-table :full-bordered="false"
         :content-bordered="true"
         :cell-bordered="false"
         style="background-color:#fff;"
         v-for='(item,index) in tableList'
        >
  <thead>
  <tr>
    <th class="TLeft">
      <div class="font1">{{item.titles}}</div>
      <div class="font2">{{item.dateTime}}</div>
    </th>
    <th class="TCenter">
        <div></div>
    </th>
    <th class="TRight">
      <div class="font3" v-show='item.turnsOutAccount<0'>{{item.turnsOutAccount}}</div>
      <div class="font4" v-show='item.turnsOutAccount>0'>{{item.turnsOutAccount}}</div>
    </th>
  </tr>
  </thead>
</x-table>

.font1 {
  font: normal 600 12px/24px sans-serif;
}
.font2{
  font: normal 500 12px/24px sans-serif;
  color: #bfbfbf;
}
.font3{
  font: normal 600 12px/24px sans-serif;
  color: rgb(77, 172, 34);
}
.font4{
  font: normal 600 12px/24px sans-serif;
  color: rgb(239, 64, 47);
}
.TLeft {
  text-align: left;
  padding-left: 10px;
  width: 40%;
}
.TCenter {
  text-align: center;
  width: 20%
}
.TRight {
  text-align: right;
  padding-right: 10px;
  width: 40%;
}

import {XTable} from 'vux'

data () {
  return {
    tableList:[
      {titles:'BTC',dateTime:'2018.02.03 03:00:00',turnsOutAccount:'-2.000'},
      {titles:'云算力',dateTime:'2018.02.03 03:00:00',turnsOutAccount:'+2.000'}
    ]
  }
},