<!--
 * @Date: 2020-12-14 09:07:03
 * @LastEditors: zwq
 * @LastEditTime: 2022-01-23 00:14:53
 * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
 * @Description:
-->
<template>
  <el-row class="util-chart">
    <el-col :span="20" class="chart-main-box">
      <div class="chart-main">
        <div class="chart-cover" :style="{width: percent + '%', backgroundImage: `linear-gradient(to right, ${leftColor}, ${rightColor})`}" />
      </div>
    </el-col>
    <el-col :span="3" :offset="1">
      {{ percent }}%
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'UtilChart',
  props: {
    percent: {
      type: Number,
      default: () => 0
    },
    leftColor: {
      type: String,
      default: () => 'rgba(18, 149, 255, 1)'
    },
    rightColor: {
      type: String,
      default: () => 'rgba(157, 213, 255, 1)'
    }
  },
  data() {
    return {}
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
  .util-chart{
    width: 100%;
    .chart-main-box {
      position: relative;
      height: 1em;
      .chart-main {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: rgba(30, 45, 69, 1);
        border-radius: 1em;
        .chart-cover {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          border-radius: 1em;
        }
      }
    }
  }
</style>
