当前位置: 首页 > 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的初始化设置; 初始化…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...