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

复制代码
<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>
相关推荐
江城开朗的豌豆16 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician21 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥25 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN666836 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel1 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied1 小时前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html