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

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...