zhgdyun/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftTop.vue

<template>
<!-- 进度总览 -->
<div class="containerBox">
    <div class="titleTxt">{{ title }}</div>
    <div class="content">
      <div class="num">
        679
        <p>完成任务数</p>
      </div>
      <div class="num">
        67%
        <p>完成率</p>
      </div>
      <div class="num">
        45
        <p>延期天数</p>
      </div>
    </div>
    <div class="charts">
      <div class="chart">
        <JRingChart title="89%" subTitle="总进度" :color="['#547ced','#162a51']" 
        :data="[
            { value: 7, name: '' },
            { value: 3, name: '' }
          ]"/>
      </div>
      <div class="chart">
        <JRingChart title="89%" subTitle="总进度" :color="['#5be1f5','#193f54']" 
        :data="[
            { value: 3, name: '' },
            { value: 5, name: '' }
          ]"/>
      </div>
      <div class="chart">
        <JRingChart title="89%" subTitle="总进度" :color="['#fe6b7e','#39273d']" 
        :data="[
            { value: 4, name: '' },
            { value: 6, name: '' }
          ]"/>
      </div>
    </div>
</div>
</template>

<script>
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
  components: { JRingChart },

  props: {
    title: {
      type: String,
      default: "default title"
    }
  },
  data() {
    return {

    };
  },


}
</script>

<style lang="less" scoped>
.containerBox {
  width: 100%;
  height: 100%;
  border: 1px solid #0081c3;

  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .content{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    margin-left: 30px;
  }
  .num{
    width: 88px;
    line-height: 38px;
    height: 38px;
    text-align: center;
    margin-right: 35px;
    color: #47b1c4;
    background-image: url(~@/assets/images/projectImg/numBgc.png);
    p{
      color: #d3d5d9;
      font-size: 14px;
    }
  }
  .charts {
    padding: 10px 30px 0;
    display: flex;
    justify-content: space-around;
  .chart {
      width: 200px;
      height: 200px;
    }
  }
}
</style>