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

elementUI进度条el-progress不显示白色

效果图

通过设置百分比为100,动态修改进度条的宽度完成

<template><div class="myProgressBox"><div class="index">{{ index }}</div><div class="typeTitle">{{ typeTitle }}</div><div class="twoProgressBox"><el-progress :stroke-width="12" :percentage="percentage1" :format="formatZS"></el-progress><el-progress class="yjcprogress" :stroke-width="12" :percentage="percentage2" :format="formatYJC"  :style="{ width: '80%' }"></el-progress></div></div>
</template><script>export default {components: {},props: {index: {type: String,default: '1'},typeTitle: {type: String,default: '类型1'},ZSNumber: {//总数type: String,default: '918'},YJCNumber: {//已解除type: String,default: '500'},percentage1: {//总数百分比type: Number,default: 100},percentage2: {//已解除百分比type: Number,default: 100},},data() {return {};},mounted() { },methods: {// 返回总数formatZS(percentage) {return this.ZSNumber},// 返回已解除formatYJC(percentage) {return this.YJCNumber}},
};
</script><style scoped lang="scss">
.myProgressBox {.twoProgressBox {.yjcprogress {.el-progress{width: 50%;}}.el-progress.yjcprogress.el-progress--line{// width: 50%;}}}
</style>

相关文章:

elementUI进度条el-progress不显示白色

效果图 通过设置百分比为100,动态修改进度条的宽度完成 <template><div class"myProgressBox"><div class"index">{{ index }}</div><div class"typeTitle">{{ typeTitle }}</div><div class"twoP…...

学习笔记——路由——IP组播-PIM(协议无关组播)-概述/PIM模式

八、PIM(协议无关组播) 1、前言 在单播中&#xff0c;是一对一的模型&#xff0c;路由器将IP数据包发往目标地址&#xff0c;因此&#xff0c;单播路由器不用关心发送数据包得源地址。而组播数据流量由组播产生&#xff0c;发向一组接收者&#xff0c;那们组播路由器如何这道…...

TCP 协议学习

一、引言 在当今的网络通信世界中&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是最为重要的协议之一。它为各种网络应用提供了可靠的、有序的数据传输服务&#xff0c;是互联网通信的基石。无论是网页浏览、电子邮件发送、…...

python3的基本数据类型:String(字符串)

一. 简介 本文简单学习了一下 python3中的一种数据类型&#xff1a; String&#xff08;字符串&#xff09;。 Python中的String类型是一种用于表示文本数据的数据类型。‌ 它可以包含字母、数字、符号等字符&#xff0c;用于存储文本信息。 二. python3的基本数据类型&…...

面试总结(2024/10/16)

面试总结&#xff08;2024/10/16&#xff09; 面试11.闭包2.promise3.全局数据的保存4.多模板切换&#xff0c;布局&#xff0c;系统主题颜色5.同一个搜索&#xff0c;不同的搜索条件&#xff0c;输入框不同的校验方法6.自定义一个组件&#xff0c;包括哪些属性7.多个父组件之间…...

从图像识别到聊天机器人:Facebook AI的多领域应用

随着人工智能技术的快速发展&#xff0c;Facebook已在多个领域内广泛应用AI技术&#xff0c;以提升用户体验、提高效率并推动创新。从图像识别到聊天机器人&#xff0c;Facebook的AI应用涵盖了社交媒体的方方面面&#xff0c;下面我们将深入探讨这些应用的具体实现及其对用户生…...

linux中级(NFS服务器)

NFS&#xff1a;用于在NNIX/Linux主机之间进行文件共享的协议 流程&#xff1a;首先服务端开启RPC服务&#xff0c;并开启111端口&#xff0c;服务器端启动NFS服务&#xff0c;并向RPC注册端口信息&#xff0c;客户端启动RPC&#xff0c;向服务器RPC服务请求NFS端口&#xff0…...

微软主动出击,“钓”出网络钓鱼者

微软正采取一种巧妙的策略来对抗网络钓鱼行为者&#xff0c;其手段是通过访问Azure平台创建高度仿真的蜜罐租户&#xff0c;以此作为诱饵&#xff0c;吸引网络犯罪分子进入&#xff0c;进而收集他们的相关信息。 凭借所收集的数据&#xff0c;微软能够绘制出恶意基础设施的地图…...

Xcode16 编译运行YYCache iOS18 sqlite3_finalize 闪退问题解决方案

问题原因 升级Xcode 16 之后&#xff0c;真机运行APP&#xff0c;发现会有Crash&#xff0c;崩溃堆栈线上Crash 在 YYCache 之中。如下图所示 崩溃堆栈如下&#xff1a; * thread #1, queue com.apple.main-thread, stop reason signal SIGABRTframe #0: 0x00000001d9391…...

Kafka-Windows搭建全流程(环境,安装包,编译,消费案例,远程连接,服务自启,可视化工具)

目录 一. Kafka安装包获取 1. 官网地址 2. 百度网盘链接 二. 环境要求 1. Java 运行环境 (1) 对 java 环境变量进行配置 (2) 下载完毕之后进行解压 三. 启动Zookeeper 四. 启动Kafka (1) 修改Conf下的server.properties文件&#xff0c;修改kafka的日志文件路径 (2)…...

django模板相关配置

模板引擎配置 Django支持多种模板引擎&#xff0c;最常用的是Django自带的模板引擎和Jinja2模板引擎。模板引擎的配置主要在settings.py文件中的TEMPLATES列表中进行。 BACKEND&#xff1a;指定模板引擎。例如&#xff0c;BACKEND: django.template.backends.django.DjangoTe…...

MongoDB等保限制下的连接认证问题

目录 一、问题描述 二、解决方案 三、代码示例 四、拓展知识 一、问题描述 用户调整用户连接认证机制以满足等保要求,调整后程序连接mongodb失败。数据库日志报错如下: {"t":{"$date":"2024-10-10T14:39:07.825+08:00"},"s":&q…...

2024 睿抗机器人开发者大赛(RAICOM)-【网络安全】CTF 部分WP

文章目录 一、前言二、MICS你是黑客么循环的压缩包Goodtime 三、WEBpy 四、Crypto变异凯撒RSAcrypto3 一、前言 WP不完整&#xff0c;仅供参考&#xff01; 除WEB&#xff0c;RE&#xff0c;PWN外&#xff0c;其余附件均已打包完毕 也是一个对MISC比较友好的一个比赛~ 123网…...

idea 无法输入中文 快速解决

idea在某些情况会出现无法输入中文的情况&#xff0c;我们不去深究内部原因&#xff0c;直接上解决方案&#xff1a; 1、点击菜单help->Edit Custom VM Options 2、最后一行&#xff0c;追加&#xff1a; -Drecreate.x11.input.methodtrue 、 3、重启...

掌握ElasticSearch(五):查询和过滤器

一、查询和过滤器的区别 在 Elasticsearch 中&#xff0c;查询&#xff08;Query&#xff09;和过滤器&#xff08;Filter&#xff09;是用于检索和筛选数据的重要组成部分。它们虽然都能用来查找文档&#xff0c;但在性能和用法上有所不同。下面详细介绍查询和过滤器的概念以…...

自学[vue+SpringCloud]-012-SpringCloud工程发送邮件

文章目录 前言一、配置QQ邮箱1.1 设置1.2 获取授权码 二、服务发送邮件2.1 引入依赖包2.2 新建AlarmMessageDto2.3 增加controller代码2.4 main方法测试 总结 前言 skywalking监控通过webhook调用SpringCloud服务接口&#xff0c;接口中发送告警邮件。 一、配置QQ邮箱 1.1 设…...

STM32通信协议-I2C

目录 一&#xff0c;IC2的协议规则 I2C总线是PHILIPS公司开发的两线式串行总线&#xff0c;I2C总线主要解决了单片机一对多通信的问题 两根通信线&#xff1a;SCL,SDA&#xff0c;同步&#xff0c;半双工通信&#xff0c;支持数据应答机制&#xff0c;支持总线挂载多设备。 …...

廉颇老矣尚能饭否,实践甘肃数据挖掘挑战赛作物与杂草的智能识别,基于YOLOv3全系列【tiny/l/spp】参数模型开发构建田间低头作物杂草智能化检测识别模型

一、背景 田间杂草的有效管理是现代农业生产中面临的重要挑战之一。杂草不仅竞争作物的养分、 水分和阳光&#xff0c;还可能成为害虫和病原体的寄主&#xff0c;从而降低农作物的产量和品质。因此&#xff0c;开发 高效、精确的杂草检测和管理系统对于提高农业生产效率、降低化…...

基于Django+Python的宾馆管理系统设计与实现

项目运行 需要先安装Python的相关依赖&#xff1a;pymysql&#xff0c;Django3.2.8&#xff0c;pillow 使用pip install 安装 第一步&#xff1a;创建数据库 第二步&#xff1a;执行SQL语句&#xff0c;.sql文件&#xff0c;运行该文件中的SQL语句 第三步&#xff1a;修改源…...

MySQL--mysql的安装

1.Linux上mysql的安装: Ubuntu下: (1)安装前首先切换到管理员身份:sudo su (2)然后执行命令:apt install mysql-server (注意:装的是服务器端,客户端自动就安装了) (3)执行过程中按y; 2.Mysql初始化配置 注意,一定是sudo su,必须是管理员才能进行Mysql的初始化设置; 初始化…...

造相-Z-Image-Turbo亚洲美女LoRA创作实战:三个案例教你玩转AI绘画

造相-Z-Image-Turbo亚洲美女LoRA创作实战&#xff1a;三个案例教你玩转AI绘画 1. 认识造相-Z-Image-Turbo与亚洲美女LoRA 造相-Z-Image-Turbo是一款强大的AI图片生成模型&#xff0c;而亚洲美女LoRA则是专门针对亚洲人物特征优化的风格适配器。这个组合让普通用户也能轻松创作…...

别再手动改配置了!用Flutter的--dart-define实现开发/测试/生产环境一键切换

Flutter多环境配置实战&#xff1a;用--dart-define打造全链路自动化工作流 每次切换环境都要手动修改十几个配置项&#xff1f;还在为不同环境的API地址、应用图标和包名管理头疼&#xff1f;是时候告别这种低效的开发方式了。作为一位经历过无数个深夜调试环境的Flutter开发者…...

Anaconda+AKShare保姆级教程:5分钟搞定Python量化环境(附常见报错解决方案)

AnacondaAKShare极速配置指南&#xff1a;零基础搭建Python量化环境全攻略 刚接触量化投资的新手们&#xff0c;往往在第一步——环境搭建上就卡壳了。明明跟着教程一步步操作&#xff0c;却总是遇到各种报错提示&#xff0c;让人望而生畏。本文将手把手带你用Anaconda和AKSha…...

5分钟打造私人语音助手:开源离线语音键盘Sayboard全解析

5分钟打造私人语音助手&#xff1a;开源离线语音键盘Sayboard全解析 【免费下载链接】Sayboard An open-source on-device voice IME (keyboard) for Android using the Vosk library. 项目地址: https://gitcode.com/gh_mirrors/sa/Sayboard 在智能手机普及的今天&…...

如何通过Vial-QMK打造专属键盘体验:从入门到精通的个性化定制指南

如何通过Vial-QMK打造专属键盘体验&#xff1a;从入门到精通的个性化定制指南 【免费下载链接】vial-qmk QMK fork with Vial-specific features. 项目地址: https://gitcode.com/gh_mirrors/vi/vial-qmk 在数字化时代&#xff0c;键盘作为人与计算机交互的核心工具&…...

WarcraftHelper终极指南:5大核心功能让魔兽争霸3在现代系统完美运行

WarcraftHelper终极指南&#xff1a;5大核心功能让魔兽争霸3在现代系统完美运行 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款…...

jcifs-ng:Java SMB客户端库如何简化企业文件共享?

jcifs-ng&#xff1a;Java SMB客户端库如何简化企业文件共享&#xff1f; 【免费下载链接】jcifs-ng A cleaned-up and improved version of the jCIFS library 项目地址: https://gitcode.com/gh_mirrors/jc/jcifs-ng jcifs-ng是一个经过清理和改进的jCIFS库版本&#…...

WebSocket代理避坑指南:Nginx中proxy_set_header的3个关键配置项

WebSocket代理实战&#xff1a;Nginx中proxy_set_header的3个黄金法则 当在线聊天室的用户突然集体掉线&#xff0c;或是实时协作文档频繁失去同步时&#xff0c;问题往往藏在那些容易被忽视的HTTP头信息里。WebSocket作为现代实时应用的血管&#xff0c;其代理配置的精细程度直…...

新手避坑指南:用Python+ROS搞定AVP项目中的.bag数据读取与深度图转点云

从零开始处理AVP项目中的.bag数据&#xff1a;深度图与点云实战解析 停车场里75个RealSense相机同时工作&#xff0c;产生的.bag数据像一座未经开采的金矿——但当你第一次打开这些文件时&#xff0c;可能会感到无从下手。作为刚接触ROS和点云处理的新手&#xff0c;我清楚地记…...

单片机通用按键处理模块设计与实现

单片机通用按键处理模块设计与实现1. 项目概述1.1 模块功能特性本按键处理模块为单片机系统提供了一套完整的按键事件处理解决方案&#xff0c;具有以下核心功能&#xff1a;基础按键检测&#xff1a;支持按下(PRESS)和释放(RELEASE)事件检测高级触发模式&#xff1a;长按触发(…...