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

复制代码
<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>
相关推荐
qq_3985865421 分钟前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊1 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表1 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子2 小时前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色2 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz2 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom2 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1233 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023373 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦3 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js