src/views/sfysection.vue

<template>
  <div>
    <titlesection title="收费员"></titlesection>
    <totalsection :totalNum="totalVal"></totalsection>
    <ul class="flexfm sfy-wrap">
      <li>
        <div class="sign">
          <p class="signnum">{{ signNum|formatNum }}</p>
          <p class="text">签到</p>
        </div>
      </li>
      <li>
        <div class="nosign">
          <p class="signnum">{{ nosignNum|formatNum }}</p>
          <p class="text">未签到</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import titlesection from '../components/titlesection'
import totalsection from '../components/total'
import {fetchList} from '../api/api'
export default {
  name: 'sfysection',
  components: {
    titlesection,
    totalsection
  },
  data() {
    return {
      totalVal: '219734',
      signNum: '454',
      nosignNum: '5125'
    }
  },
  created() {
  },
  methods: {
    getList() {
      fetchList()
      .then(res => {
        console.log(res);
      });
    },
  }
}
</script>
<style lang="scss"  scoped>
  .sfy-wrap{
    display: flex;
    padding: 0 23px;
    li{
      flex: 1;
      display: flex;
      align-items:center;
      >div{
        width: 100%;
        height: 49px;
        padding-left: 71px;
        color: #fff;
      }
      .sign{
        background: url("../assets/img/nosign.png") no-repeat;
        .signnum{
          padding: 5px 0;
          @include fonttextStyle(24px);
          background-image: $fontBlue;
        }
      }
      .nosign{
        background: url("../assets/img/sign.png") no-repeat;
        .signnum{
          padding: 5px 0;
          @include fonttextStyle(24px);
          background-image: $fontOrange;
        }
      }
      .text{
        color: #fff;
        font-size: 12px;
      }
    }
  }
</style>