<template>
    <div>
      <ul class="title-wrap">
        <li>
          <img src="../assets/img/parkingtotal.svg">
          <div>
            <p>{{parkingtotal|formatNum}}</p>
            <p>停车场总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/membertotal.svg">
          <div>
            <p>{{membertotal|formatNum}}</p>
            <p>会员总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/incometotal.svg">
          <div>
            <p>{{incometotal|formatNum}}</p>
            <p>今日收入总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/ordertotal.svg">
          <div>
            <p>{{ordertotal|formatNum}}</p>
            <p>今日订单数</p>
          </div>
        </li>
      </ul>
      <div class="flexfm" style="background: #f00"></div>
    </div>
</template>

<script>
export default {
  name: 'mapsection',
  data() {
    return {
      parkingtotal: '7338',
      membertotal: '738',
      incometotal: '1156738',
      ordertotal: '6738'
    }
  }
}
</script>

<style lang="scss" scoped>
  .title-wrap{
    display: flex;
    padding-top: 17px;
    padding-bottom: 18px;
      li{
      flex: 1;
      height: 45px;
      text-align: center;
      overflow: hidden;
      font-size: 0;
        img{
          display: inline-block;
          width: 45px;
          height: 45px;
          margin-right: 14px;
        }
        div{
          display: inline-block;
          vertical-align: top;
          text-align: left;
          max-width: 100px;
          overflow: hidden;
          p{
            &:nth-of-type(1){
              font-size:24px;
              font-weight:500;
              color:rgba(255,255,255,1);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            &:nth-of-type(2){
              font-size:14px;
              font-weight:bold;
              color:rgba(0,207,254,.7);
              margin-top: 7px;
            }
          }
        }
    }
  }
</style>
