mbBigScreen/src/views/dashboard/components/misdata/yearmoney.vue

<template>
  <div class="yearmoney">
    <div class="boxmoney">
      <div class="slider">
        <div class="before" style="width:50%;left:0%;"></div>
        <div class="last" style="width:30%;left:50%;"></div>
        <div class="current" style="width:20%;left:80%;"></div>

        <div class="beforetitle" style="width:50%;left:0%;">
          <div class="money"><label class="ledfont">{{ beforeNextMonthPay }}</label><label>元</label></div>
          <div class="title">上月之前收费</div>
        </div>
        <div class="lasttitle" style="width:30%;left:50%;">
          <div class="money"><label class="ledfont">{{ nextMonthPay }}</label><label>元</label></div>
          <div class="title">上月收费</div>
        </div>
      </div>
      <div class="yeartitle">
        <div class="money"><label class="ledfont">{{ curYearPay }}</label><label>元</label></div>
        <div class="title">本年度收费</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getThisYearPay}  from '@/api/comprehensive'
import config from '@/views/config/requestConfig'
export default {
  name: 'yearmoney',
  data() {
    return {
      beforeNextMonthPay:0,
      nextMonthPay:0,
      curYearPay:0,
      curMonthPay:0
    }
  },
  components: {
  },
  created(){
    getThisYearPay({token:config.token}).then(res=>{
      if(res.Code == 200){
        this.curYearPay = parseFloat(res.Result.ThisYearPay)
        this.curMonthPay = parseFloat(res.Result.ThismonthPay === '' ? 0 : res.Result.ThismonthPay)
        this.nextMonthPay = parseFloat(res.Result.lastmonthPay)
        this.beforeNextMonthPay = (this.curYearPay - this.curMonthPay - this.nextMonthPay).toFixed(2)
      }
    })
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
     
    },
  }
}
</script>

<style lang="scss">
  .yearmoney{
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    padding: 8px;
    // border: 1px red solid;

    .boxmoney{
      width: 100%;
      height: 100%;
      background: #062F50;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      justify-content: center ;
      align-items: center ;
      // border: 1px red solid;

      .slider{
        width: 76%;
        height: 10px;
        background: #0880EE;
        // border: 1px red solid;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content:flex-start;
        // z-index: 100;

        .before{
          height: 100%;
          background: #BEB56A;
          position: absolute;
          // border: 1px red solid;
          // z-index: 101;
        }
        .last{
          height: 100%;       
          background: #D7CB69;
          position: absolute;
          // z-index: 102;
          // border: 1px red solid;
        }
        .current{
          height: 100%;
          background: #02B1C5;
          position: absolute;
          // z-index: 103;
          // border: 1px red solid;
        }


        .beforetitle{
          height: 40px;
          top:-46px;
          text-align: left;
          position: absolute;
          // border: 1px red solid;
          // z-index: 101;

          .money{
            color: #BEB56A;
          }
        }

        .lasttitle{
          height: 40px;
          top:10px;
          text-align: left;
          position: absolute;
          // border: 1px red solid;
          // z-index: 101;

          .money{
            color: #D7CB69;
          }
        }
      }

      .yeartitle{
        width: 20%;
        height: 40px;
        margin-left: 6px;
        text-align: left;
        overflow: hidden;
        // border: 1px red solid;

        .money{
          color: #0880EE;
        }
      }
      .ledfont{
        font-size: 20px;
        font-family: "myFont";
      }

      .money{
        width: 100%;
        font-size: 16px;
        font-weight: bold;
      }

      .title{
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        color: #A4D9F9;
      }
    }
  }
</style>