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

news2024/11/14 13:27:35
<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>

实例: 

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

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

相关文章

asp.net在线租车平台

说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net架构和sql server数据库 功能模块&#xff1a; asp.net在线租车平台 用户功能有首页 行业新闻用户注册车辆查询租车介绍访问后台 后台管理员可以进行用户管理 管…

第七届强网杯-PWN-【simpleinterpreter】

对于一个刚入门的三个月的菜鸡pwn手打算按照难度慢慢复现qwb的题目 先simpleinterpreter吧 simpleinterpreter libc 2.27 逆向 解释器相关用到的陌生函数 法1 方法1参考链接 程序实现了一个 C 语言解释器,可用的关键字如下: char else enum if int return sizeof whi…

NVIDIA 推出地球-2云平台,使用AI超级计算机的模拟技术,预测整个地球的气候变化

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

视频无水印批量下载软件|抖音视频提取工具

视频无水印批量下载软件 在当今社交媒体充斥着大量优质视频内容的时代&#xff0c;很多用户都希望能够轻松下载自己喜爱的视频进行收藏或分享。为了满足用户的需求&#xff0c;我们特别推出了一款专业的视频无水印批量下载软件&#xff0c;让您可以方便快捷地获取喜爱的视频内容…

[C++]20:unorderedset和unorderedmap结构和封装。

unorderedset和unorderedmap结构和封装 一.哈希表&#xff1a;1.直接定址法&#xff1a;2.闭散列的开放定址法&#xff1a;1.基本结构&#xff1a;2.insert3.find4.erase5.补充&#xff1a;6.pair<k,v> k的数据类型&#xff1a; 3.开散列的拉链法/哈希桶&#xff1a;1.基…

Jackson 2.x 系列【3】解析器 JsonParser

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 前言2. 解析原理3. 案例演示3.1 创建 JsonParser3.2 解析3.3 读取3.4 测试 1. 前…

流畅的 Python 第二版(GPT 重译)(三)

第五章&#xff1a;数据类构建器 数据类就像孩子一样。它们作为一个起点是可以的&#xff0c;但要作为一个成熟的对象参与&#xff0c;它们需要承担一些责任。 马丁福勒和肯特贝克 Python 提供了几种构建简单类的方法&#xff0c;这些类只是一组字段&#xff0c;几乎没有额外功…

隐私计算实训营学习一:数据可信流通,从运维信任到技术信任

文章目录 一、数据可信流通二、数据可信流通的技术信任基础三、技术信任开启数据密态时代&#xff0c;保障广域数据可信流通 一、数据可信流通 可信数据流通体系&#xff1a;数据二十条第一次明确提出可信流通&#xff0c;建立数据来源可确认、使用范围可界定、流通过程可追溯…

【数据可视化】Echarts中的其它图表

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. 绘制散点图2.1 绘制基本散点图2.2 绘制两个序列的散点图2.3 绘制带涟漪特效的散点图 3. 绘制气泡图3.1 绘制标准气泡图3.2 绘制各国人均寿命与GDP气泡图3.3 绘制城市A、城市B、城市C三个城市空气污染指数气…

智慧公园:AI智能分析网关V4城市公园视频智能监管方案

一、背景分析 随着天气渐渐转暖&#xff0c;城市公园的花卉也逐渐盛开&#xff0c;春暖花开时节&#xff0c;前往公园赏花游玩的城市居民也渐渐多起来&#xff0c;因此安全问题也成为相关监管部门的重要管理任务之一。随着科技的不断进步&#xff0c;智能监控技术已经成为现代…

使用paho.mqtt.client实现MQTT Client连接EMQX Broker

目录 概述 1 认识paho.mqtt.client 2 实现MQTT Client 2.1 功能介绍 2.2 paho.mqtt.client库函数介绍 2.3 MQTT Client实现 2.3.1 创建项目 2.3.2 编写MQTT Client代码 2.3.3 Log工具源码 2.4 功能测试代码实现 2.4.1 功能介绍 2.4.2 代码实现 3 测试 3.1 EMQX上创…

回归预测 | Matlab基于SAO-LSTM雪消融算法优化长短期记忆神经网络的数据多输入单输出回归预测

回归预测 | Matlab基于SAO-LSTM雪消融算法优化长短期记忆神经网络的数据多输入单输出回归预测 目录 回归预测 | Matlab基于SAO-LSTM雪消融算法优化长短期记忆神经网络的数据多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SAO-LSTM雪消融…

课时70:流程控制_for循环_嵌套循环

2.4.4 嵌套循环 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 简介 这里的嵌套实践&#xff0c;与选择语句的嵌套实践基本一致&#xff0c;只不过组合的方式发生了一些变化。常见的组合样式如下&#xff1a;for嵌套for语句for …

[STM32] Keil MDK 新建工程编译不通过(warning: #2803-D和Error: L6218E)解决方法备忘

按照野火的PDF教程的第4章&#xff1a;[野火]《RT-Thread 内核实现与应用开发实战—基于STM32》.pdf 新建 Keil MDK 工程&#xff0c;工程设置完成后点击编译按钮&#xff0c;编译不通过&#xff1a; RTE\Device\ARMCM3\startup_ARMCM3.c(75): warning: #2803-D: unrecognize…

nodejs社区垃圾分类管理平台的设计与实现python-flask-django-php

近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;社区垃圾分类管理平台利用计算机网络实现信息化管理&#xff0c;使整个社区垃圾分类管理的发展和服务水平有显著提升。 语言&#xf…

Hash类型

2.3.Hash类型 Hash类型&#xff0c;也叫散列&#xff0c;其value是一个无序字典&#xff0c;类似于Java中的HashMap结构。 String结构是将对象序列化为JSON字符串后存储&#xff0c;当需要修改对象某个字段时很不方便&#xff1a; Hash结构可以将对象中的每个字段独立存储&am…

【Qt】使用Qt实现Web服务器(三):QtWebApp中HttpRequest和HttpResponse

1、HttpRequest 1.1 示例 1)在Demo1的Dump HTTP request示例 在浏览器中输入http://127.0.0.1:8080点击Dump HTTP request 2)切换到页面:http://127.0.0.1:8080/dump 该页面显示请求和响应的内容: Request: Method: GET Path: /dump Version: HTTP/1.1 Headers: accep…

图片编辑器中实现文件上传的三种方式和二进制流及文件头校验文件类型

背景 最近在 vue-design-editor 开源项目中实现 psd 等多种文件格式上传解析成模板过程中, 发现搞定设计文件上传没有使用 input 实现文件上传, 所以我研究了一下相关技术, 总结了以下三种文件上传方法 input 文件选择window.showOpenFilePicker 和 window.showDirectoryPicke…

树莓派夜视摄像头拍摄红外LED灯

NoIR相机是一种特殊类型的红外摄像头&#xff0c;其名称来源于"No Infrared"的缩写。与普通的彩色摄像头不同&#xff0c;NoIR相机具备红外摄影和低光条件下摄影的能力。 一般摄像头能够感知可见光&#xff0c;并用于普通摄影和视频拍摄。而NoIR相机则在设计上去除了…

【Hadoop】Hadoop 编译源码

目录 为什么要源码编译Hadoop 编译源码1前期工作准备2jar 包安装2.1安装 Maven2.2安装 ant2.3安装 glibc-headers 和 g2.4安装 make 和 cmake2.5安装 protobuf2.6安装 openssl 库2.7安装 ncurses-devel 库 3编译源码3.1解压源码到 /opt/ 目录3.2 进入到 hadoop 源码主目录 /opt…