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

用css滤镜做颜色不同的数据卡片(背景图对于css滤镜的使用)

<template>
<div class="xx_modal_maincon"><div class="xx_model_bt">履约起始日至计算日配额及履约情况</div><el-row><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_blue"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.tpess }}</span><a>碳配额试算(tCO₂)</a></div></div><div class="mod_bottom_box img_blue"></div></div></el-col><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_pur"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.tpfl }}</span><a>碳排放量(吨)</a></div></div><div class="mod_bottom_box img_pur"></div></div></el-col><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_yellow"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.tpeyy }}</span><a>{{tpeyytitle}}</a></div></div><div class="mod_bottom_box img_yellow"></div></div></el-col><el-col :span="6"><div class="xx_modal_mod"><div class="mod_top_box img_green"><div class="mod_img_box"></div><div class="mod_right_box"><span>{{ reportobj.yjndtscyl }}</span><a>预计年度碳市场盈利(万元)</a></div></div><div class="mod_bottom_box img_green"></div></div></el-col></el-row></div>
</template><style>
.xx_modal_box{width: 100%;height: 100%;.xx_modal_tit{width: 100%;height: 2rem;text-align: center;padding: 10px 0;line-height: 2rem;}h4{color: #0f538d;font-size: 1.5rem;letter-spacing: .3rem;}.xx_modal_maincon{width: 90%;height: auto;margin: 10px 5%;padding: 10px;background-color: #f1f9f9;border-radius: 10px;.xx_model_bt{color: #0f538d;font-size: 1.3rem;letter-spacing: .3rem;height: 40px;line-height: 40px;padding-left: 30px;border-radius: 20px;background-image: linear-gradient(135deg, #d7edff  0%, #16407000 70%);}.xx_modal_mod{margin: 5px;padding: 5px;background-color: #ffffff;border-radius: 4px;box-shadow: 3px 3px 11px 0px #cccccc;height: 120px;.mod_top_box{display: flex;margin-top: 10px;.mod_right_box{height: 60px;a{font-size: 16px;color: #5a98d5}span{font-size: 30px;font-weight: bold;color: #5a98d5;line-height: 40px;display: block;}}.mod_img_box{margin: 15px;width: 60px;height: 60px;background: url(./assets/xx_img_blue.png) no-repeat;background-size: contain;}}.mod_bottom_box{height: 20px;background: url(./assets/xx_img_tiao.png) no-repeat;background-size: 100% 100%;}}}
}
//滤镜 
.img_blue{filter: hue-rotate(10deg) brightness(1.1) contrast(1.2);
}
.img_pur{filter: hue-rotate(127deg) brightness(1.1) contrast(1.2);
}
.img_green{filter: hue-rotate(286deg) brightness(1.1) contrast(1.2);
}
.img_yellow{filter: hue-rotate(198deg) brightness(1.1) contrast(1.2);
}
//底部提示
.xx_modal_tips{height: 50px;width: 100%;line-height: 50px;color: #0f538d;text-align: center;
}
</style>

实例: 

相关文章:

用css滤镜做颜色不同的数据卡片(背景图对于css滤镜的使用)

<template> <div class"xx_modal_maincon"><div class"xx_model_bt">履约起始日至计算日配额及履约情况</div><el-row><el-col :span"6"><div class"xx_modal_mod"><div class"mod…...

2024年第六届区块链与物联网国际会议(BIOTC 2024)即将召开!

2024年第六届区块链与物联网国际会议&#xff08;简称&#xff1a;BIOTC 2024&#xff09;将于2024 年 7 月 19 日至 21 日在日本福冈召开&#xff0c;旨在为来自行业、学术界和政府的研究人员、从业者和专业人士提供一个论坛&#xff0c;就研发区块链和物联网的专业实践进行交…...

Django动态路由实例

Django动态路由实例 先说需求&#xff1a; 比如我前端有两个按钮&#xff0c;点击按钮1跳转到user1的用户信息页面&#xff0c;按钮2跳转user2用户信息页面&#xff0c;但是他俩共用同一个视图层 直接上代码 路由层 urlpatterns [path(user/<str:username>/, views…...

基于Vue.js和D3.js的智能停车可视化系统

引言 随着物联网技术的发展&#xff0c;智能停车系统正逐渐普及。前端作为用户交互的主要界面&#xff0c;对于提供直观、实时的停车信息至关重要。 目录 引言 一、系统设计 二、代码实现 1. 环境准备 首先&#xff0c;确保您的开发环境已经安装了Node.js和npm。然后&…...

数据之王国:解析Facebook的大数据应用

引言 作为全球最大的社交媒体平台之一&#xff0c;Facebook拥有庞大的用户群体和海量的数据资源。这些数据不仅包括用户的个人信息和社交行为&#xff0c;还涵盖了广告点击、浏览记录等多方面内容。Facebook通过巧妙地利用这些数据&#xff0c;构建了强大的大数据应用系统&…...

前端小白的学习之路(ES6 一)

提示&#xff1a;关键字声明&#xff1a;let与const,长度单位&#xff1a;em与rem,vw与wh&#xff0c;解构赋值&#xff0c;箭头函数(简介) 目录 一、ES6介绍 二、let&const 1.let 1) 用 let 关键字声明的变量不能提前引用 2) 不允许重复声明变量 3) 可以产生块级作用…...

Linux CentOS 7.6安装Redis 6.2.6 详细保姆级教程

1、安装依赖 //检查是否有依赖 gcc -v //没有则安装 yum install -y gcc2、下载redis安装包 //进入home目录 cd /home //通过wget下载redis安装包 wget https://download.redis.io/releases/redis-6.2.6.tar.gz //解压安装包 tar -zxvf redis-6.2.6.tar.gz3、编译 //进入解压…...

Android 优化 - 数据结构

一、概念 数据结构&#xff1a;数据存储在内存中的顺序和位置关系&#xff0c;选择合适的数据结构能提高内存的利用率。 线性结构链表结构树形结构 二、线性结构 结构优点缺点数组数据呈线性排列&#xff0c;初始化时就要指定长度且无法更改&#xff0c;会开辟一块连续的内…...

Linux环境开发工具之vim

前言 上一期我们已经介绍了软件包管理器yum&#xff0c; 已经可以在linux上查找、安装、卸载软件了&#xff0c;本期我们来介绍一下文本编辑器vim。 本期内容介绍 什么是vim vim的常见的模式以及切换 vim命令模式常见的操作 vim底行模式常见的操作 解决普通用户无法执行sudo问…...

「Linux系列」Shell介绍及起步

文章目录 一、Shell简介二、Shell脚本三、Shell解释器四、相关链接 一、Shell简介 Shell本身是一个用C语言编写的程序&#xff0c;它既是一种命令语言&#xff0c;又是一种程序设计语言。作为命令语言&#xff0c;它交互式地解释和执行用户输入的命令&#xff1b;作为程序设计…...

用pdf2docx将PDF转换成word文档

pdf2docx是一个Python模块&#xff0c;可以将PDF文件转换为docx格式的Word文档。 pdf2docx模块基于Python的pdfminer和python-docx库开发&#xff0c;可以在Windows、Linux和Mac系统上运行。它可以从PDF文件中提取文本和图片&#xff0c;并将其转换成可编辑的Word文档&#xf…...

STM32U5 ADC 自校准不成功的问题分析

1、引言 很多 STM32 系列中的 ADC 都带有自校准的功能。它提供了一个自动校准的过程&#xff0c;用于驱动包括 ADC 上电/掉电序列在内的所有校准动作。在这个过程中&#xff0c;ADC 计算出一个校准因子&#xff0c;并在内部应用到此 ADC 模块&#xff0c;直到下一次 ADC 掉电。…...

使用光标精灵更换电脑鼠标光标样式,一键安装使用

想要让自己在使用电脑时更具个性化&#xff0c;让工作和娱乐更加愉快&#xff0c;改变你的电脑指针光标皮肤可能是一个简单而有效的方法。很多人或许并不清楚如何轻松地调整电脑光标样式&#xff0c;下面我就来分享一种简单的方法。 电脑光标在系统里通常只有几种默认图案&…...

微服务day04(上)-- RabbitMQ学习与入门

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但…...

Halcon 3D 平面拟合(区域采样、Z值过滤、平面拟合、平面移动)

Halcon 3D 平面拟合(区域采样、Z值过滤、平面拟合、平面移动) 链接:https://pan.baidu.com/s/1UfFyZ6y-EFq9jy0T_DTJGA 提取码:ewdi * 1.读取图片 ****************...

npm 插件 中 版本号为 星号 是什么意思

npm 插件 中 版本号为 星号 是什么意思 "dependencies": {"hstool/side-adaptor": "*","hsui/core": "*","h_ui": "*" }, "devDependencies": {"plugin-jsx": "*","…...

Codeforces\ Round\ 930(C.Bitwise Operation Wizard)

C o d e f o r c e s R o u n d 930 ( C . B i t w i s e O p e r a t i o n W i z a r d ) \Huge{Codeforces\ Round\ 930(C.Bitwise Operation Wizard)} Codeforces Round 930(C.BitwiseOperationWizard) 文章目录 题意思路注意 标程 题目链接&#xff1a;[B.Bitwise Operati…...

监控系统prometheus+grafana+发送告警信息

1、基础环境准备两台或更多的主机 2、关闭selinux vi /etc/selinux/config&#xff0c;修改SELINUX的值为disabled 3、关闭防火墙 systemctl disable firewalld systemctl stop firewalld 4、prometheus官网下载 https://prometheus.io/download/ 5、grafana官网下载 https…...

IoT 物联网场景中如何应对安全风险?——青创智通

工业物联网解决方案-工业IOT-青创智通 ​随着物联网&#xff08;IoT&#xff09;技术的快速发展&#xff0c;越来越多的设备、系统和应用被连接到互联网上&#xff0c;从而构建了一个庞大的物联网生态系统。然而&#xff0c;这种连接性也带来了前所未有的安全风险。在物联网场景…...

滴滴基于 Clickhouse 构建新一代日志存储系统

滴滴基于 Clickhouse 构建新一代日志存储系统 ClickHouse 是2016年开源的用于实时数据分析的一款高性能列式分布式数据库,支持向量化计算引擎、多核并行计算、高压缩比等功能,在分析型数据库中单表查询速度是最快的。2020年开始在滴滴内部大规模地推广和应用,服务网约车和日…...

nli-distilroberta-base实操手册:企业级NLI服务部署与多场景API集成指南

nli-distilroberta-base实操手册&#xff1a;企业级NLI服务部署与多场景API集成指南 1. 项目概述 nli-distilroberta-base是一个基于DistilRoBERTa模型的自然语言推理(NLI)Web服务&#xff0c;专门用于判断两个句子之间的逻辑关系。这个轻量级但功能强大的服务可以帮助企业快…...

股市学习心得-六大算力方向

1、顺灏股份&#xff08;太空算力&#xff09; ・卫星互联网 算力双重题材 ・市场辨识度高&#xff0c;机构愿意接力 ・位置偏低&#xff0c;短线弹性比较足 2、神剑股份&#xff08;算力配套&#xff09; ・做航天结构材料&#xff0c;受益算力基建 ・上游材料需求持续放量 ・…...

告别CPU搬运工:手把手教你用PL330 DMA指令集优化Exynos 4412数据传输

告别CPU搬运工&#xff1a;手把手教你用PL330 DMA指令集优化Exynos 4412数据传输 在嵌入式系统开发中&#xff0c;数据搬运往往是性能瓶颈的关键所在。想象一下&#xff0c;当你设计的智能摄像头系统因为频繁的图像数据传输而出现卡顿&#xff0c;或者音频处理设备因为实时流处…...

Photoshop、GIMP里的‘保留细节2.0’是啥?拆解Bicubic插值在主流修图软件中的应用

Photoshop与GIMP中的‘保留细节2.0’&#xff1a;Bicubic插值实战指南 当你需要在Photoshop或GIMP中缩放一张照片时&#xff0c;是否曾被"双立方"、"双三次"或"保留细节2.0"这些选项搞得一头雾水&#xff1f;作为设计师或摄影师&#xff0c;理解…...

实测6款热门论文AI工具|毕业之家vs笔捷AIvsPaperRed等,谁能真正拯救论文党?

作为常年测评各类学习办公工具的博主&#xff0c;每到毕业季&#xff0c;后台最多的求助就是“论文写不下去了&#xff0c;求推荐靠谱的AI辅助工具”。毕竟对大多数学生来说&#xff0c;论文写作的痛点太集中&#xff1a;选题迷茫、格式繁琐、查重降重头疼&#xff0c;还要担心…...

别再用HAL_Delay()了!STM32 HAL库延时函数的3个致命坑与替代方案

别再用HAL_Delay()了&#xff01;STM32 HAL库延时函数的3个致命坑与替代方案 在STM32开发中&#xff0c;HAL_Delay()可能是最常被调用的函数之一。这个看似简单的毫秒级延时函数&#xff0c;却隐藏着不少开发陷阱。许多工程师在项目后期才会突然发现&#xff1a;为什么我的系统…...

从MPS笔试题到实战:数字IC设计中的分频器与后端流程精解

1. 从MPS笔试题看数字IC设计核心能力 去年面试MPS时&#xff0c;那道3分频器的笔试题让我记忆犹新。当时看到"50%占空比"这个要求时&#xff0c;我意识到这不仅是考察基础编码能力&#xff0c;更是检验对时序逻辑本质的理解。数字IC设计工程师的日常工作中&#xff0…...

用AI修复和复刻老照片

最近&#xff0c;用AI修复了自己不同时期的照片&#xff0c;非常感慨。尤其是小时的场景&#xff0c;我并没有留下多少童年照片&#xff0c;现在&#xff0c;AI根据我的口述&#xff0c;把我放进去了。也算是拼接上了久远的时间轴。包括老的数码、彩照&#xff0c;黑白&#xf…...

Fast Screen Recorder屏幕录制软件:解决录屏区域选择与音频同步难题

在日常工作中&#xff0c;你是否需要录制一个软件操作教程发给同事&#xff0c;却不知道如何只录制特定窗口而非整个桌面&#xff1f;是否在录制游戏或会议时&#xff0c;发现系统声音或麦克风没有录进去&#xff1f;或者录制的视频文件过大&#xff0c;无法通过邮件发送&#…...

【仅限首批教育决策者获取】:2026奇点大会AGI教育实施框架V2.3(含政策适配矩阵+师资再培训SOP)

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AGI的教育变革 2026奇点智能技术大会(https://ml-summit.org) AGI驱动的自适应学习引擎 大会首次公开展示了基于通用人工智能&#xff08;AGI&#xff09;内核构建的教育操作系统EduOS v3.1&#xff0c;该系统可实时解析学…...