当前位置: 首页 > news >正文

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>

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

相关文章:

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&…...

Android轻量级进程间通信Messenger源码分析

一. 概述 Android中比较有代表性的两大通信机制&#xff1a;1. 线程间Handler通信 2. 进程间Binder通信&#xff0c;本篇文章中我们在理解AIDL原理的基础上来解读一下Messenger的源代码&#xff0c; 并结合示例Demo加深理解。 在看本篇文章前&#xff0c;建议先查阅一下笔者的…...

C#开发AGV地图编辑软件

C#自己开发AGV地图编辑软件&#xff1a; 1、自由添加和删除站点、停车位、小车、运行路径。 2、编辑得地图以XML文件保存。 3、导入编辑好地图的XML文件。 4、程序都是源码&#xff0c;可以直接在此基础上进行二次开发。 下载链接&#xff1a;https://download.csdn.net/d…...

嵌入式学习day22 Linux

文件IO: 1. lseek off_t lseek(int fd, off_t offset, int whence); 功能: 重新设定文件描述符的偏移量 参数: fd:文件描述符 offset:偏移量 whence: SEEK_SET 文件开头 …...

不确定性问题的论文笔记

Statistics starting from 01/2024, 仅列出了优秀工作中的一部分 每一年的排列顺序: CVPR, ICLR, ECCV, ICCV, ICML, AAAI, TPAMI&#xff0c;TIP&#xff0c;Arxiv 等 每周更新 2024 论文信息速览笔记是 否 已精读精读笔记Shao W, Xu Y, Peng L, et al. Failure Detection fo…...

C语言推荐书籍

本书详细讲解了C语言的基本概念和编程技巧。全书共17章。第1章、第2章介绍了C语言编程的预备知识。第3章&#xff5e;第15章详细讲解了C语言的相关知识&#xff0c;包括数据类型、格式化输入/输出、运算符、表达式、语句、循环、字符输入和输出、函数、数组和指针、字符和字符串…...

基于uniapp微信小程序的汽车租赁预约系统

随着现代汽车租赁管理的快速发展&#xff0c;可以说汽车租赁管理已经逐渐成为现代汽车租赁管理过程中最为重要的部分之一。但是一直以来我国传统的汽车租赁管理并没有建立一套完善的行之有效的汽车租赁管理系统&#xff0c;传统的汽车租赁管理已经无法适应高速发展&#xff0c;…...

ClickHouse 基础(一)

官网 ClickHouse release 24.1, 2024-01-30 以毫秒为单位查询数十亿行 ClickHouse是用于实时应用和分析的最快、资源效率最高的开源数据库。 安装ClickHouse 使用ClickHouse&#xff0c;你有三个选择: ClickHouse云:官方ClickHouse作为一项服务&#xff0c;-由ClickHouse的创…...

07-k8s中secret资源02-玩转secret

一、回顾secret资源的简单实用 第一步&#xff1a;将想要的数据信息【key&#xff1a;value】中的value值&#xff0c;使用base64编码后&#xff0c;写入secret资源清单中&#xff1b; 第二步&#xff1a;创建secret资源&#xff1b; 第三步&#xff1a;pod资源引用secret资源&…...

HTTP特性

大家好我是苏麟 , 今天说说HTTP特性. 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 到目前为止&#xff0c;HTTP 常见到版本有 HTTP/1.1&#xff0c;HTTP/2.0,HTTP/3.0&#xff0c;不同版本的 HTTP 特性是不一样的。 这里先用 HTTP/1.1 版本给大家介…...

ARM 之十六 详解 CMSIS 版本变迁、各组件使用示例

目前,CMSIS 已经发展到了第六版,其目录结构也发生了重大的变化。在不断发展中,很多原来 CMSIS 的组件被不断独立出去,并因此成立了很多开源社区,今天就来学习一下! 由于 CMSIS 已经包含了相当丰富的文档,因此,本文重点学习版本之间的变化以及一些实际使用示例。 什么是…...

【北京游戏业:出海竞争实力全面】

本文将深入分析北京的游戏行业发展。在上海、广州、北京、深圳、成都、杭州、福建七大游戏产业中心城市中&#xff0c;北京无疑是出海竞争力最强的游戏产业集群。本文将全面剖析北京游戏行业的发展现状。 北京是中国游戏产业的发源地。拥有从游戏引擎到美术设计等完整的产业链…...

课程大纲:图像处理中的矩阵计算

课程名称&#xff1a;《图像处理中的矩阵计算》 课程简介&#xff1a; 图像处理中的矩阵计算是图像分析与处理的核心部分。本课程旨在教授学员如何应用线性代数中的矩阵计算&#xff0c;以实现各种图像处理技术。我们将通过强调实际应用和实践活动来确保学员能够理解和掌握这些…...

【Go语言】Go语言的数据类型

GO 语言的数据类型 Go 语言内置对以下这些基本数据类型的支持&#xff1a; 布尔类型&#xff1a;bool 整型&#xff1a;int8、byte、int16、int、uint、uintptr 等 浮点类型&#xff1a;float32、float64 复数类型&#xff1a;complex64、complex128 字符串&#xff1a;st…...

2024年2月19日 - mis

当需要在两个或多个子模式间插入文本时&#xff0c;这个特性尤其有用。这里有个脚本&#xff0c;它使用子模式在大数字中插入逗号。 $ echo "1234567" | sed { > :start > s/\(.*[0-9]\)\([0-9]\{3\}\)/\1,\2/ > t start > } 1,234,567 $​ 这个脚本将匹…...

【JavaWeb】网上蛋糕商城-项目搭建

学习目标 了解网上蛋糕商城的项目需求 了解网上蛋糕商城的功能结构 熟悉E-R图和数据表的设计 熟悉项目环境的搭建 通过前面章节的学习&#xff0c;相信读者应该已经掌握了Web开发的基础知识&#xff0c;学习这些基础知识就是为开发Web网站奠定基础。如今&#xff0c;电子商…...

【Flink状态管理五】Checkpoint的设计与实现

文章目录 1. Checkpoint的整体设计2. Checkpoint创建源码解析2.1. DefaultExecutionGraphBuilder.buildGraph2.2. ExecutionGraph.enableCheckpointing 由于系统原因导致Flink作业无法正常运行的情况非常多&#xff0c;且很多时候都是无法避免的。对于Flink集群来讲&#xff0c…...

How to install a specific version of a package in R

How to install a specific version of a package in R 在使用R语言完成数据分析的过程中&#xff0c;很多时候&#xff0c;因为项目实际需要&#xff0c;我们应该指定某些库文件的安装包的版本&#xff0c;这个时候&#xff0c;我们可以基于devtools包中的函数install_version…...

SIGSEGV 段错误

SIGSEGV是在Unix/Linux系统中表示"Segmentation Fault"&#xff08;分段错误&#xff09;的信号。当一个进程访问未分配给它的内存、访问超出其内存边界或者访问不允许的内存区域时&#xff0c;就会产生SIGSEGV信号&#xff0c;导致进程被操作系统终止。 SIGSEGV的常…...

OpenCV 4基础篇| OpenCV简介

目录 1. 什么是OpenCV2. OpenCV的发展历程3. 为什么用OpenCV4. OpenCV应用领域5. OpenCV的功能模块5.1 基本模块5.2 扩展模块5.3 常用函数目录 1. 什么是OpenCV OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...