<template>
<div class="flex">
  <div  class="cols-sm-12 col-md-12 col-xs-12 " >
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/pinpai.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">表具品牌</span>
        <span class="font-head">{{row.f_meter_brand}}</span>
      </div>

    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/leixing.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">表具类型</span>
        <span class="font-head">{{row.f_meter_type}}</span>
      </div>
    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/biaohao.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">表号</span>
        <span class="font-head">{{row.f_meternumber}}</span>
      </div>
    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/guige.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">表具规格</span>
        <span class="font-head">{{row.f_meter_style}}</span>
      </div>
    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/xinghao.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">表具型号</span>
        <span class="font-head">{{row.f_type}}</span>
      </div>
    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/bieming.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">表具别名</span>
        <span class="font-head">{{row.f_alias}}</span>
      </div>
    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/yue.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">剩余金额</span>
        <span class="font-head">{{row.f_balance_amount}}</span>
      </div>
    </div>
    <div class="col-sm-3 col-md-3 col-xs-4 meterinfo">
      <div class="flex" style="padding: 0.5rem;align-items: center">
        <img src="../../assets/qiliang.png" style="height:32px;width:32px;margin-bottom: 5px" alt="" >
        <span class="font-content">累计用气量</span>
        <span class="font-head">{{row.f_balance_gas}}</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    title: '基础信息',
    data () {
      return {
        msg: '',
        show: false
      }
    },
    props:['row'],
    ready () {
      // this.$appdata.load().then(() => {
      //   this.$emit('ready')
      // })
    }
  }
</script>
<style media="screen" scoped>
.font-head{
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.font-content{
  font-size: 12px;
  font-weight: normal;
  color: #666666;
}
  .meterinfo{
    border:1px solid #eeeeee;
    /*border-right: 2px solid #eeeeee;*/
  }
</style>
