td_official/src/views/largeScreen/components/leftPage.vue

<template>
  <div class="leftPage">
    <!--  -->
    <div class="kpi_box">
      <TitleComponent :title="'支付KPI'" style="margin-bottom: 20px;"/>
      <ProgressComponent 
        title="应收账款" 
        value="123,456.78" 
        percentageChange="+25.30%" 
        progressPercentage="75" 
        progressColor="rgba(255, 77, 79, 1)"
      />
      <ProgressComponent 
        title="应付账款" 
        value="123,456.78" 
        percentageChange="+25.30%" 
        progressPercentage="25" 
        progressColor="rgba(29, 214, 255, 1)"
      />
      <ProgressComponent 
        title="本月付款" 
        value="123,456.78" 
        percentageChange="+25.30%" 
        progressPercentage="45" 
        progressColor="rgba(0, 227, 150, 1)"
      />
      <ProgressComponent 
        title="本月收款" 
        value="123,456.78" 
        percentageChange="+25.30%" 
        progressPercentage="10" 
        progressColor="rgba(255, 147, 42, 1)"
      />
    </div>
    <div class="contract_box">

    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
import echarts from 'echarts';
import TitleComponent  from './TitleComponent.vue';
import ProgressComponent from './ProgressComponent.vue';
</script>

<style lang="scss">
.leftPage {
  width: 100%;
  height: 100%;
  .kpi_box{
    margin-bottom: 10px;
  }
  .kpi_box,.contract_box {
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(29, 214, 255, 0.3);
  }
}
</style>