vue+element (el-progress)标签 隐藏百分比(%) ,反向显示 ,自定义颜色, demo 复制粘贴拿去用

1 效果:

2 页面代码:

<el-row :gutter="10" ><el-col :span="12"><el-card ><div class="fourqu"><div><span slot="title">{{'推送任务TOP5'}}</span></div></div><div class="progress1"><p class="toptable"><span>{{'任务名称'}}</span><span>{{'推送数据量'}}</span></p><p class="p1"><span class="b1"><span>{{'测试1'}} :</span><span>{{'100'}}</span></span><el-progress :percentage="50" color="#f05459" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试2'}} :</span><span>{{'200'}}</span></span><el-progress :percentage="60" color="#df912f" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试3'}} :</span><span>{{'300'}}</span></span><el-progress :percentage="70" color="#e9e210" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试4'}} :</span><span>{{'400'}}</span></span><el-progress :percentage="80" color="#58ba2d" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试5'}} :</span><span>{{'500'}}</span></span><el-progress :percentage="90" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'其 它'}} :</span><span>{{'1000'}}</span></span><el-progress :percentage="100" color="#6914F3" :text-inside="true"></el-progress></p></div></el-card></el-col><el-col :span="12"><el-card ><div ><div class="fourqu"><div><span slot="title">{{'推送目的地TOP5'}}</span></div></div></div><div class="progress1 destination"><p class="toptable"><span>{{'任务名称'}}</span><span>{{'推送数据量'}}</span></p><p class="p1"><span class="b1"><span>{{'测试1'}} :</span><span>{{'100'}}</span></span><el-progress :percentage="50" color="#f05459" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试2'}} :</span><span>{{'200'}}</span></span><el-progress :percentage="60" color="#df912f" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试3'}} :</span><span>{{'300'}}</span></span><el-progress :percentage="70" color="#e9e210" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试4'}} :</span><span>{{'400'}}</span></span><el-progress :percentage="80" color="#58ba2d" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'测试5'}} :</span><span>{{'500'}}</span></span><el-progress :percentage="90" :text-inside="true"></el-progress></p><p class="p1"><span class="b1"><span>{{'其 它'}} :</span><span>{{'1000'}}</span></span><el-progress :percentage="100" color="#6914F3" :text-inside="true"></el-progress></p></div></el-card></el-col></el-row>

3 css代码:(注意我用的是 "scss")

<style  lang="scss" scoped>
.fourqu {display: flex;justify-content: space-between;align-items: center;height: 40px;border-bottom: 2px solid rgb(222, 225, 232);margin-bottom: 20px;
}
.p1 {padding: 0 20px 0 15px;margin-bottom: 20px;.b1 {display: flex;justify-content: space-between;}
}
.toptable {background: #ece8e8;height: 30px;line-height: 30px;margin-bottom: 20px;display: flex;justify-content: space-between;padding: 0 10px;
}
// 隐藏百分比单位
::v-deep .el-progress-bar__innerText {display: none !important;
}
//控制反向显示
::v-deep .destination .el-progress-bar__outer {display: flex;justify-content: end;.el-progress-bar__inner {position: static;}
}
</style>

老规矩复制粘贴拿去用``````

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

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

相关文章

【RT-DETR有效改进】大核注意力 | LSKAttention助力极限涨点

一、本文介绍 在这篇文章中,我们将讲解如何将LSKAttention大核注意力机制应用于RT-DETR,以实现显著的性能提升。首先,我们介绍LSKAttention机制的基本原理,它主要通过将深度卷积层的2D卷积核分解为水平和垂直1D卷积核,减少了计算复杂性和内存占用。接着,我们介绍将这一…

MySQL篇—事务和隔离级别介绍

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

SG-8201CJA(汽车可编程晶体振荡器)

爱普生的SG-8021CJA是一款符合AEC-Q100标准的晶体振荡器&#xff0c;专为要求苛刻的汽车/ADAS应用&#xff08;如激光雷达和相机ECU&#xff09;而设计。它采用爱普生的内部低噪声小数NPLL&#xff0c;输出 频率高达170MHz&#xff0c;相位抖动小于1/25&#xff0c;稳定性比之前…

【前端素材】推荐实用的后台管理系统ebazer电商平台模板(附带源码)

一、需求分析 后台管理系统网站是指用于管理和控制网站、应用程序或系统后台运行的管理工具。它通常是网站或应用程序的管理者、管理员或内容编辑人员使用的界面&#xff0c;具有一系列功能来管理用户、内容、数据和系统设置。以下是后台管理系统网站的功能和特点&#xff1a;…

Open Systems Interconnection(开放式系统互联)

OSI&#xff08;Open Systems Interconnection&#xff0c;开放式系统互联&#xff09;模型是一个描述计算机网络体系结构和通信系统的参考模型&#xff0c;它将计算机网络分成七个抽象的层级&#xff0c;每个层级负责不同的功能&#xff0c;从物理连接到最终的应用程序。以下是…

CapCut - 剪映国际版11.1.0

​【应用名称】&#xff1a;CapCut - 剪映国际版 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#CapCut #剪映国际版 【应用版本】&#xff1a;11.1.0 【应用大小】&#xff1a;231MB 【软件说明】&#xff1a;软件升级更新。目前大家广泛使用的最令人惊叹、最专…

小程序--loading和toast

一、loading wx.showLoading({})显示loading提示框。wx.hideLoading({})隐藏loading提示框。 title&#xff1a;文字提示内容 mask&#xff1a;是否显示透明蒙层&#xff0c;防止触摸穿透。 更多属性参考showLoading官方文档。 wx.showLoading({title: 加载中...,mask: true }…

力扣面试150 验证回文串 双指针 Character API

Problem: 125. 验证回文串 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 参考题解 Character.isLetterorDigit(char c)&#xff1a;判读字符 c 是否是字母或者数字 Character.toLowerCase(char c)&#xff1a;将字符 c 转换为小写字母 复杂度 时间复杂度: …

docker (八)-dockerfile制作镜像

一 dockerfile dockerfile通常包含以下几个常用命令&#xff1a; FROM ubuntu:18.04 WORKDIR /app COPY . . RUN make . CMD python app.py EXPOSE 80 FROM 打包使用的基础镜像WORKDIR 相当于cd命令&#xff0c;进入工作目录COPY 将宿主机的文件复制到容器内RUN 打包时执…

十、计算机视觉-腐蚀操作

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、什么是腐蚀二、如何实现腐蚀三、腐蚀的原理 一、什么是腐蚀 在我们生活中常会见到腐蚀&#xff0c;比如金属表面受到氧化或其他化学物质的侵蚀&#xff0c;导致…

观察者模式和发布订阅模式的区别

从下图中可以看出&#xff0c;观察者模式中观察者和目标直接进行交互&#xff0c;而发布订阅模式中统一由调度中心进行处理&#xff0c;订阅者和发布者互不干扰。这样一方面实现了解耦&#xff0c;还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息&#xff0c;但…

Project_Euler-06 题解

Project_Euler-06 题解 题目描述 两个公式 等差数列求和公式 i i i项&#xff1a; a i a_{i} ai​ 项数&#xff1a; n n n 公差&#xff1a; d d d 和&#xff1a; S n S_{n} Sn​ a n a 1 ( n − 1 ) d S n n ( a 1 a n ) 2 a_{n} a_{1} (n - 1)d\\ S_{n} \frac{n(a_…

深究 DevOps 与平台工程的区别

今天&#xff0c;我们将讨论平台工程和 DevOps 的关系。尽管这两个概念有一些共同点&#xff0c;但它们仍然是截然不同的&#xff0c;我们将具体了解它们之间的区别。本文旨在解释当代软件工程中的这两个基本概念。通过实际案例&#xff0c;我们将分别说明这两个方法如何塑造了…

leetcode刷题电话号码的字母组合(人工智能解答版本)

题目描述 解题思路 一开始想用暴力破解的方法来进行解题&#xff0c;就是循环。但是想到随着数字的增多&#xff0c;循环行不通。想到最近使用的一个人工智能助手&#xff0c;于是我把题目发送给了它&#xff0c;直接给出了递归的解决方法。递归分为两个条件&#xff0c;一个就…

【k近邻】 K-Nearest Neighbors算法原理及流程

【k近邻】 K-Nearest Neighbors算法原理及流程 【k近邻】 K-Nearest Neighbors算法距离度量选择与数据维度归一化 k近邻算法&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09;是一种常用的监督学习算法&#xff0c;可以用于分类和回归问题。在OpenCV中&#xff…

【关于python变量类型学习笔记】

python的变量类型 在创建变量时会在内存中开辟一个空间&#xff0c;变量是存储在内存中的值。 根据变量的数据类型&#xff0c;解释器会分配指定内存&#xff0c;并决定什么数据可以被存储在内存中。 变量可以指定不同的数据类型&#xff0c;这些变量可以存储整数&#xff0c;…

C++基础学习

string char转string vector转string 截取字符串 字符串反转 string转int 正则匹配

Nginx 反向代理配置

Nginx就不废话了&#xff0c;web服务器。 最近在备案一个域名&#xff0c;想要备案&#xff0c;部署一个服务器&#xff0c;平常很少自己配置Nginx&#xff0c;今天记录下。 1、反向代理 正向代理 指 客户端通过代理访问后端服务 反向代理 指 服务器推出一个客户&#xff0…

环信IM Android端实现华为推送详细步骤

首先我们要参照华为的官网去完成 &#xff0c;以下两个配置都是华为文档为我们提供的 1.https://developer.huawei.com/consumer/cn/doc/HMSCore-Guides/android-config-agc-0000001050170137#section19884105518498 2.https://developer.huawei.com/consumer/cn/doc/HMSCore…

#gStore-weekly | gMaster功能详解之数据库管理

gMaster提供了数据库管理功能。该功能可以对集群中的数据库进行集中管理&#xff0c;可以查看各个数据库详细信息。能够方便的对数据库进行新建、构建、导出、备份、还原、删除操作。 登录gMaster&#xff0c;点击左侧菜单【数据库】下的【数据库管理】&#xff0c;进入数据库…