自封组件-渐变色的数据展示组件

复制代码
<template>
  <el-row>
    <el-col :span="6" class="box_gradient">
      <div class="line_green"></div>
      <div class="line_gradient_green">
        <div class="green_num">{{ dqjhz }}</div>
        <div class="gradient_text">当前计划值(MW)</div>
      </div>
    </el-col>
    <el-col :span="6" class="box_gradient">
      <div class="line_blue"></div>
      <div class="line_gradient_blue">
        <div class="blue_num">{{ qdsjz }}</div>
        <div class="gradient_text">当前实际值(MW)</div>
      </div>
    </el-col>
    <el-col :span="6" class="box_gradient">
      <div class="line_yellow"></div>
      <div class="line_gradient_yellow">
        <div class="yellow_num">{{ dqsrz }}</div>
        <div class="gradient_text">当前输入值(MW)</div>
      </div>
    </el-col>
    <el-col :span="6" class="box_gradient">
      <div class="line_purple"></div>
      <div class="line_gradient_purple">
        <div class="purple_num">{{ clpc }}</div>
        <div class="gradient_text">出力偏差(MW)</div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'GradientBox',
  data(){
    return{
      dqjhz: 112.6,
      qdsjz: 121.7,
      dqsrz: 109.2,
      clpc: 107.7,
    }
  },
}
</script>

<style scoped>
.box_gradient{
  height: 70px;
  padding: 0 2px;
}
.line_green{
  width: 100%;
  height: 2px;
  background-color: #1DFBD1;
  margin-bottom: 2px;
}
.gradient_text{
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}
.line_gradient_green{
  width: 100%;
  height: 76px;
  background-image: linear-gradient(to top, transparent, #1DFBD150);
}
.green_num{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bolder;
  font-size: 26px;
  background: linear-gradient(to top, #91F4E1, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.line_blue{
  width: 100%;
  height: 2px;
  background-color: #1dc7fb;
  margin-bottom: 2px;
}
.line_gradient_blue{
  width: 100%;
  height: 76px;
  background-image: linear-gradient(to top, transparent, #1dc7fb50);
}
.blue_num{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bolder;
  font-size: 26px;
  background: linear-gradient(to top, #48A1D2, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.line_yellow{
  width: 100%;
  height: 2px;
  background-color: #FFC35E;
  margin-bottom: 2px;
}
.line_gradient_yellow{
  width: 100%;
  height: 76px;
  background-image: linear-gradient(to top, transparent, #FFC35E50);
}
.yellow_num{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bolder;
  font-size: 26px;
  background: linear-gradient(to top, #FCDAA4, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.line_purple{
  width: 100%;
  height: 2px;
  background-color: #AC42FD;
  margin-bottom: 2px;
}
.line_gradient_purple{
  width: 100%;
  height: 76px;
  background-image: linear-gradient(to top, transparent, #AC42FD50);
}
.purple_num{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bolder;
  font-size: 26px;
  background: linear-gradient(to top, #B991F4, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>