Element 进度条样式优化

在开发后台管理系统时,经常会用到进度条这样一个控件,Element UI中提供了progress这样一个组件,如下图所示:

 该组件默认的颜色会比较单一,为此时常需要对该组件的样式进行一些优化,以满足实际项目的需求。

上图是对该组件经过样式优化后的效果,下面提供代码供大家参考:

<template><div id="orderAnalysis"><el-row><el-col :span="12"><div class="progress-box" v-for="(item,index) in progressLeftData" :key="index"><div class="progress-title"><img src="./images/1.png" alt="首充用户数" v-if="index==0"><img src="./images/2.png" alt="二充用户数" v-if="index==1"><img src="./images/3.png" alt="三充用户数" v-if="index==2"><span class="num" v-if="index>2">{{index+1}}</span><span class="text">{{item.title}}</span> </div><div class="progress-body-left"><el-progress :text-inside="true" :percentage="item.rate" :stroke-width="22"></el-progress></div><div class="progress-result"><div>{{item.ucount}}人,占{{item.rate}}%</div><div>ARPPU: ¥{{item.arppu}}</div></div></div></el-col><el-col :span="12"><div class="progress-box" v-for="(item,index) in progressRightData" :key="index"><div class="progress-title"><img src="./images/1.png" alt="累充<=30元" v-if="index==0"><img src="./images/2.png" alt="累充30-100元" v-if="index==1"><img src="./images/3.png" alt="累充100-200元" v-if="index==2"><span class="num"  v-if="index>2">{{index+1}}</span><span class="text">{{item.title}}</span> </div><div class="progress-body-right"><el-progress :text-inside="true" :percentage="item.rate" :stroke-width="22"></el-progress></div><div class="progress-result"><div>{{item.ucount}}人,占{{item.rate}}%</div></div></div></el-col></el-row></div>
</template><script>export default {name: "orderAnalysis",data() {return {// 模拟数据progressLeftData:[{title:"首充用户数",rate:100,ucount:9813,arppu:40.45},{title:"二充用户数",rate:16.83,ucount:1652,arppu:53.58},{title:"三充用户数",rate:9.09,ucount:892,arppu:82.78},{title:"四充用户数",rate:4.3,ucount:422,arppu:94.87},{title:"五充及以上",rate:2.08,ucount:204,arppu:69.06}],progressRightData:[{title:"累充<=30元",ucount:9982,rate:63.59},{title:"累充30-100元",ucount:4131,rate:26.32},{title:"累充100-200元",ucount:1052,rate:6.7},{title:"累充200-300元",ucount:497,rate:3.17},{title:"累充300元以上",ucount:36,rate:0.23},]};},
};
</script><style lang="scss" scoped>#orderAnalysis {margin:20px;padding: 20px;background:#fff;border:1px solid #ccc;width:1000px;.progress-box{height:32px;line-height: 32px;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-bottom:25px;.progress-title{width:130px;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;img{width:20px;height:20px;margin-right:10px;}.num{width:20px;margin-right:10px;text-align: center;}.text{width:100px;font-size:14px;color:#666;}}.progress-body-left,.progress-body-right{flex:1;margin: 0 10px;}.progress-result{width:150px;div{height:16px;line-height: 16px;font-size:14px;text-align: left;color:#666;}}}
}</style><style lang="scss">// 组件样式优化代码
#orderAnalysis {.el-progress-bar__outer{border-radius:0px;background: #FFF4F5;}.el-progress-bar__innerText{color:blue;}.el-progress-bar__inner{border-radius:0px;background: linear-gradient(270deg,#FD3546 0%,#FC8434 100%);}.el-progress-bar__inner{border-radius:0px;background: linear-gradient(270deg,#DF35FC 0%,#FC6060 100%);}}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/31865.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue跳转页面 如果登录了直接跳转 没有登录登录完以后直接跳转,使用vuex管理登录状态

在Vue.js中&#xff0c;如果你需要在用户登录后重定向到他们原本想要访问的页面&#xff0c;你可以使用Vue Router的beforeEach守卫来实现这个功能。以下是实现这一需求的步骤&#xff1a; 存储目标路由&#xff1a;在用户被重定向到登录页面之前&#xff0c;存储他们想要访问的…

shinydashboard与shiny详细教程

以下是一个详细的教程&#xff0c;展示如何使用 shinydashboard 和 shiny 创建一个交互式的仪表板应用。我们将逐步讲解如何设置基本的仪表板结构、添加交互组件以及将数据集成到应用中。 安装必要的包 首先&#xff0c;确保你已经安装了 shiny 和 shinydashboard 包&#xf…

skywalking segment索引占用elasticsearch大量磁盘空间

现象&#xff1a; skywalking segment索引占用elasticsearch大量磁盘空间 原因 recordDataTTL 是SkyWalking的一个配置项&#xff0c;用于设置记录数据的存活时间&#xff08;TTL, Time To Live&#xff09;。SkyWalking是一个开源的应用性能监控系统&#xff0c;用于监控分…

精准测试与传统的手工测试

大部分测试从业人员都经历了手工测试到自动化测试递进&#xff0c;测试技术及思路都发生了日新月异的变化&#xff0c;有些中厂及大厂都有一套强大且复杂的自动化测试用例时刻保障产品的稳定性及正确性。 所谓精准测试&#xff0c;就是借助一定的技术手段、通过算法的辅助对传…

人工智能在气象预报领域的崛起:GraphCast引领新纪元

最近&#xff0c;谷歌推出的天气预测大模型GraphCast在全球范围内引起了广泛关注&#xff0c;其卓越的表现不仅刷新了人们对AI能力的认知&#xff0c;更预示着传统天气预报工作模式的深刻变革。 GraphCast是一款基于机器学习技术的天气预测工具&#xff0c;它通过深度学习和大数…

基于语音识别的智能电子病历(五)电子病历编辑器

前言 首先我们要明确一个概念&#xff1a;很多电子病历的编辑器&#xff0c;在输入文字的地方&#xff0c;有个麦克风按钮&#xff0c;点击一下&#xff0c;可以进行录音&#xff0c;然后识别的文字会自动输入到电子病历中&#xff0c;这种方式其实不能称为“基于语音识别的智…

自定义平台后台登录地址前缀的教程

修改平台后台地址默认的 admin 前缀 修改后端 config/admin.php 配置文件,为自定义的后缀修改 平台后台前端源码中 src/settings.js 文件,修改为和上面一样的配置修改后重新打包前端代码,并且覆盖到后端的 public 目录下重启 swoole 服务即可

教案:在 Spark 上使用 Horovod 进行分布式训练

教案&#xff1a;在 Spark 上使用 Horovod 进行分布式训练 课程目标 理解 Horovod 与 Spark 的集成及其优势。学习使用 Horovod 的 Estimator API 进行模型训练。掌握使用 Horovod 的 Run API 实现更细粒度的控制。掌握在 GPU 和 CPU 环境下配置 Spark 集群进行深度学习任务。…

从移动、桌面端到AR/VR:HOOPS Visualize如何实现卓越的3D模型可视化?

在当今迅速发展的技术环境中&#xff0c;高性能、跨平台的图形引擎是工程应用程序开发的核心需求。HOOPS Visualize作为一款领先的3D图形SDK&#xff0c;为桌面、移动和AR/VR应用程序提供了强大的2D和3D图形支持。其设计旨在实现工程应用程序中的高性能可视化&#xff0c;确保在…

io_uring

转&#xff1a;[译] Linux 异步 I_O 框架 io_uring&#xff1a;基本原理、程序示例与性能压测&#xff08;2020&#xff09; 新一代异步IO框架 io_uring &#xff5c; 得物技术 干翻 nio &#xff0c;王炸 io_uring 来了 &#xff01;&#xff01;&#xff08;图解史上最全&a…

JavaScript的作用域介绍

JavaScript的作用域介绍 作用域&#xff08;scope&#xff09;是编程语言中的一个基本概念&#xff0c;它定义了程序中变量、函数、对象等标识符&#xff08;identifier&#xff09;的可见性和生命周期。简单说&#xff0c;就是决定了在程序的哪些部分可以访问或使用这些标识符…

ioquake笔记

ioquake代码分析一 目录结构主流程框架main函数流程Com_Init 初始化过程OpenGL初始化流程InitOpenGL 其他信息NET_InitNET_Config 流程 wiki &#xff1a;http://wiki.ioquake3.org 目录结构 misc&#xff1a;各个工程和配置文件 msvc/msvc10nsisosxfe/setupico图标和照片文件…

print(“{}{}“.format())

print("{}{}".format()) 是 Python 中用于格式化字符串并将其输出到控制台的一种方法。format 方法允许你在字符串中插入变量或表达式的值&#xff0c;并以指定的格式显示它们。 基本语法 print("format_string".format(value1, value2, ...))format_str…

JAVA学习笔记DAY7——Spring_Ioc

文章目录 Bean配置注解方式配置注解配置文件调用组件 注解方法作用域 DI注入注解引用类型自动装配文件结构自动装配实现 基本数据类型DI装配 Bean配置 注解方式配置 类上添加Ioc注解配置文件中告诉SpringIoc容器要检查哪些包 注解仅是一个标记 注解 不同注解仅是为了方便开…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 反射计数(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 https://app5938.acapp.acwing.com.cn/contest/2/problem/OD…

单例模式---线程安全实现

文章目录 1.单例模式的特点&#x1f60a;2.单例模式两种实现&#x1f923;&#x1f917;&#x1f60a;2.1 饿汉式2.2 懒汉式 3.传统单例模式的线程安全问题4.解决方法4.1静态局部变量4.2加锁4.3双重检查锁&#xff08;DCL&#xff09;4.4pthread_once 1.单例模式的特点&#x1…

刷代码随想录有感(111):动态规划——零钱兑换II

干&#xff0c;被上了一课。注意题干&#xff0c;到底是求能装最大价值的方案还是装满这个容量共有多少种方法。他们的公式都不同&#xff0c;最大价值的方案是&#xff1a; dp[j] max(dp[j], dp[j - weight[i]] value[i]); 而装满有多少种方法是&#xff1a; dp[j] dp[j…

FISSURE:一款功能强大的RF和逆向工程框架

关于FISSURE FISSURE是一款功能强大的RF和逆向工程框架&#xff0c;该工具适用于不同技能水平的安全研究人员&#xff0c;并提供了信号检测、信号分类、协议发现、渗透测试、IQ操作、漏洞分析、自动化和AI/机器学习等功能。该框架旨在促进软件模块、无线电、协议、信号数据、脚…

Spring相关注解详细版

1、RestController RequestMapping("/api")这两个的作用分别是什么&#xff1f;如何相互区分&#xff1f; RestController 注解用于标识一个类是RESTful风格的Controller&#xff0c;它会将方法的返回值直接转换为HTTP响应体&#xff0c;通常用于返回JSON或XML格式的…

[力扣二叉树]本地调试环境指导手册

以236. 二叉树的最近公共祖先为例子 本地编译软件为Viusal Studio 2022 写代码 项目里文件位置 CreateTree.h #pragma once #ifndef CLIONPROJECT_LEETCODECREATETREE_H #define CLIONPROJECT_LEETCODECREATETREE_H #include<vector> #include<queue> using na…