当前位置: 首页 > 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;是一个开源的计算机视觉和机器学习软件库。它…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...