自封组件-带边框的渐变色数据卡片

<template>
<el-row :gutter="10"><el-col :span="8"><div class="dplay_green"><div class="dplay_num_green">{{ jhdl }}</div><div class="dplay_text_green">提示文字</div></div></el-col><el-col :span="8"><div class="dplay_green"><div class="dplay_num_green">{{ jhdl }}</div><div class="dplay_text_green">提示文字</div></div></el-col><el-col :span="8"><div class="dplay_green"><div class="dplay_num_green">{{ jhdl }}</div><div class="dplay_text_green">提示文字</div></div></el-col>
</el-row>
</template><script>
export default {name: 'DplayCard',data(){return{jhdl: 1200,sjfdl: 1265,pcdl: 65,}}
}
</script><style scoped>
.dplay_text_green{width: 60%;height: 20px;line-height: 20px;text-align: center;color: #ffffff;font-size: 12px;margin: 0 20%;background:  linear-gradient(to right, transparent, #1DF6CE80, transparent);
}
.dplay_green{width: 100%;height: 70px;background: url("/img/bg/dplay_green.png");background-size: 100% 100%;
}
.dplay_num_green{width: 100%;height: 36px;line-height: 36px;text-align: center;font-weight: bolder;font-size: 22px;color: #1DF6CE;padding-top: 6px;
}
.dplay_text_blue{width: 100%;height: 20px;line-height: 20px;text-align: center;color: #ffffff;font-size: 12px;
}
.dplay_green{width: 100%;height: 70px;background: url("/img/bg/dplay_green.png");background-size: 100% 100%;
}
.dplay_num_blue{width: 100%;height: 36px;line-height: 36px;text-align: center;font-weight: bolder;font-size: 22px;color: #50DBFF;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/233768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络——数据链路层-可靠传输的实现机制:选择重传协议SR(介绍、工作原理、窗口尺寸、题目练习)

目录 选择重传协议SR 介绍 工作原理 窗口尺寸 练习 题目 答案 解析 示意图 选择重传协议SR 介绍 在上篇中&#xff0c;我们介绍了回退N帧协议。回退N帧协议的接收窗口尺寸只能等于一&#xff0c;因此接收方只能按序接收正确到达的数据分组&#xff1b;一个数据分组…

宣布推出 ML.NET 3.0

作者&#xff1a;Jeff Handley 排版&#xff1a;Alan Wang ML.NET 是面向 .NET 开发人员的开源、跨平台的机器学习框架&#xff0c;可将自定义机器学习模型集成到 .NET 应用程序中。ML.NET 3.0 版本现已发布&#xff0c;其中包含大量新功能和增强功能&#xff01; 此版本中的深…

零刻EQ12 N100 双2.5G网口 All In One新手教程

零刻EQ12 N100 双2.5G网口 All In One新手教程 前言1.硬件配置2.准备工作2.1. ESXI8.0U2镜像2.2. Rufus磁盘工具下载2.3. ikuai镜像下载2.4. StarWindConverter虚拟磁盘格式转换工具下载2.5. OpenWrt镜像下载2.6. 黑群晖RR引导镜像下载(DSM7.2)2.7. 需要准备的硬件2.8. 格式化需…

kafka offset sasl加密连接

kafka-tool&#xff08;offset&#xff09; 进行SCRAM连接&#xff0c;直接上图 填写jaas的认证&#xff08;账密 引用包&#xff09;

图片曝光修正方法(直方图均衡和CNN)

图像过曝或曝光不足时需要曝光处理&#xff0c; 这里以曝光不足举例。 直方图均衡法&#xff1a; 通过RGB通道的直方图均衡达到处理曝光不足的效果。 代码&#xff1a; underexpose cv2.imread("exposure_test.jpg") #underexpose cv2.cvtColor(underexpose, cv2…

Android WorkManager入门(一)

WorkManager入门 前言一、WorkManager是什么&#xff1f;二、使用1.添加依赖2.定义工作3.创建 WorkRequest并提交 一次性的任务&#xff08;OneTimeWorkRequest&#xff09;4.setExpedited 加急方法5. setInitialDelay 延时任务6.约束 总结参考资料 前言 在当今快节奏的生活中…

袋鼠目标检测数据集VOC+YOLO格式1400多张

袋鼠是双门齿目袋鼠亚目袋鼠科大袋鼠属的哺乳动物。袋鼠跳得最高、最远。雌性袋鼠都长有一个前开的育儿袋&#xff0c;袋鼠也因此得名。 [8]袋鼠泛指任一种属于袋鼠目的有袋动物&#xff0c; [7]它头小眼大耳朵长&#xff0c;面部较长&#xff0c;鼻孔两侧有黑色须痕。袋鼠胆小…

java --- 多线程

目录 一、java多线程的三种实现方式 1.1 多线程的第一种实现方式&#xff1a;继承Thread类 1.2 多线程的第二种实现方式&#xff1a;Runnable接口 1.3 多线程的第三种实现方式&#xff1a;Callable接口和Future接口 1.3 多线程三种实现方式的对比 二、线程常用的成员方…

<软考>软件设计师-5计算机网络(总结)

1 网络功能和分类 1-1计算机网络的功能 计算机网络是计算机技术与通信技术相结合的产物&#xff0c;它实现了远程通信、远程信息处理和资源共享。计算机网络的功能:数据通信、资源共享、负载均衡、高可靠性。 1-2计算机网络按分布范围划分 1-3网络的拓扑结构 总线型&#xff0…

深度学习环境配置------windows系统(GPU)------Pytorch

深度学习环境配置------windows系统&#xff08;GPU&#xff09;------Pytorch 准备工作明确操作系统明确显卡系列 CUDA和Cudnn下载与安装1.下载2.安装 环境配置过程1.安装Anacoda2.配置环境1&#xff09;创建一个新的虚拟环境2&#xff09;pytorch相关库的安装 2.安装VScode1&…

C# Tcplistener,Tcp服务端简易封装

文章目录 前言相关文章前言设计代码简单使用运行结果 前言 我最近有个需求要写Tcp服务端&#xff0c;我发现Tcp服务端的回调函数比较麻烦&#xff0c;简化Tcp的服务&#xff0c;我打算自己封装一个简单的Tcp服务端。 相关文章 C# TCP应用编程三 异步TCP应用编程 C# Tcpclient…

ZLMediaKit的转流流程

zlmediakit的优势就是支持多种媒体容器和媒体协议。我从推流和拉流的两个角度&#xff0c;梳理出了转流的核心骨架。 推流 协议和容器格式的转换&#xff0c;最基本的内核就是音视频数据的扭转。对视频而言就是&#xff0c;解封装帧数据&#xff0c;组帧&#xff0c;封装帧。…

OpenHarmony 启动流程优化

目前rk3568的开机时间有21s&#xff0c;统计的是关机后从按下 power 按键到显示锁屏的时间&#xff0c;当对openharmony的系统进行了裁剪子系统&#xff0c;系统app&#xff0c;禁用部分服务后发现开机时间仅仅提高到了20.94s 优化微乎其微。在对init进程的log进行分析并解决其…

基于CNN+数据增强+残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)+数据集+模型(五)

系列文章目录 基于CNN数据增强残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)数据集模型&#xff08;一&#xff09; 基于CNN数据增强残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)数据集模型&#xf…

butterfly蝴蝶分类

一、分类原因 由于植物分类所使用的数据集存在一定问题&#xff0c;修改起来比较麻烦&#xff0c;本次采用kaggle的ButterflyMothsImageClassification数据集&#xff0c;对100这种蝴蝶进行分类。 二、100中蝴蝶类别 ‘ADONIS’,‘AFRICAN GIANT SWALLOWTAIL’,‘AMERICAN S…

基于ssm高校推免报名系统源码和论文

网络的广泛应用给生活带来了十分的便利。所以把高校推免报名管理与现在网络相结合&#xff0c;利用java技术建设高校推免报名管理系统&#xff0c;实现高校推免报名的信息化。则对于进一步提高高校推免报名管理发展&#xff0c;丰富高校推免报名管理经验能起到不少的促进作用。…

Tomcat 部署论坛

一、安装好mysql数据库和jdk之后 开始部署论坛 用Navicat Premium 15连接mysql数据库并创建jforum数据库 下载版本 点击安装选择minninum点击下一步 点击一下一步 选择默认安装路径 安装验证&#xff0c;在安装完毕且启动Apache Tomcat&#xff0c;通过浏览器访问tomcat的80…

【QT】非常简单的登录界面实现

本系列是作者自学实践过程的记录 本文是关于登录界面设计 有问题欢迎讨论 效果图&#xff1a; 一、创建项目和主界面 创建Qt Widget Application 这里我们使用qmake而不是cmake 这是主界面&#xff0c;登录界面等后面再创建&#xff0c;这里要勾选上generate form&#xff0…

如何提高React组件的渲染效率的?在React中如何避免不必要的render?

面试官&#xff1a;说说你是如何提高组件的渲染效率的&#xff1f;在React中如何避免不必要的render&#xff1f; 一、是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合&#xff0c;实现了对 DOM 最小粒度的更新&#xff0c;大多数情况下&#xff0c;React 对 DOM 的渲染…

RocketMQ系统性学习-SpringCloud Alibaba集成RocketMQ以及消费收发实战

文章目录 Spring Cloud Alibaba 集成 RocketMQ 最佳实践集成依赖DashBoard消息收发实战 Spring Cloud Alibaba 集成 RocketMQ 最佳实践 SpringBoot 相对于 SSM 来说已经很大程度上简化了开发&#xff0c;但是使用 SpringBoot 集成一些第三方的框架&#xff0c;还是需要花费一些…