src/views/youdaopingsection.vue

<template>
  <div>
    <titlesection title="道闸/诱导屏"></titlesection>
    <ul class="flexfm ydp-dz-wrap">
      <li>
        <div>
          <div class="bg-wrap">
            <p class="dznum-total">{{ dzNum|formatNum }}</p>
            <p class="name">道闸</p>
          </div>
        </div>
        <div>
          <div class="bg-wrap">
            <p class="ydpnum-total">{{ ydpNum|formatNum }}</p>
            <p class="name">诱导屏</p>
          </div>
        </div>
      </li>
      <li>
        <allPieChart :chart-data="pieChartData"/>
      </li>
    </ul>
  </div>
</template>
<script>
import titlesection from '../components/titlesection'
import allPieChart from '../components/allPieChart'
import {fetchList} from '../api/api'
export default {
  name: 'youdaopingsection',
  components: {
    titlesection,
    allPieChart
  },
  data() {
    return {
      pieChartData:  [35, 55],
      dzNum: '23454',
      ydpNum: '4454'
    }
  },
  created() {
  },
  methods: {
    getList() {
      fetchList()
      .then(res => {
        console.log(res);
      });
    },
  }
}
</script>
<style lang="scss"  scoped>
  .ydp-dz-wrap{
    display: flex;
    text-align: center;
    padding: 0 23px;
    li{
      height: 100%;
      flex: 1;
      &:nth-of-type(1)>div{
        height: 50%;
        .bg-wrap{
          width: 115px;
          height: 59px;
          padding: 13px 0 0 0;
          position: relative;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background:url("../assets/img/bg-wrap.png") no-repeat;
          .dznum-total,.ydpnum-total{
            @include fonttextStyle(20px);
          }
          .dznum-total{
            background-image: $fontBlue;
          }
          .ydpnum-total{
            background-image: $fontOrange;
          }
          .name{
            padding-top: 5px;
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }
</style>