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

VUE div的右上角的角标/标签

news 2025/12/28 4:47:04

一、效果图

二、代码

<div class="comp-overview"><div class="overview-item" v-for="(item,index) in overviewInfoList" :key="index"><div class="angle_mark"><span>{{item.label}}</span></div><div class="home-chart-title"><span>{{item.title}}</span></div></div>
</div>

.overview-item {//父容器position: relative;display: inline-block;width: 32.6%;color: #7c979e;font-size: 16px;margin-right: 1%;margin-bottom: 18px;height: 206px;border-radius: 4px;background: #FFFFFF;border: 1px solid rgba(136, 136, 136, 0.1);padding: 20px 17px 0;// 角标.angle_mark {position: absolute;top: 0;right: 0;width: 58px;height: 25px;border-radius: 0 3px 0 4px;background: rgba(52, 117, 235, 0.1);// 角标文字span {position: absolute;display: inline-block;width: 100%;text-align: center;font-family: 思源黑体;font-size: 12px;font-weight: normal;line-height: 25px;color: #3475EB;}}
}

相关文章：

VUE div的右上角的角标/标签

一、效果图 二、代码 <div class"comp-overview"><div class"overview-item" v-for"(item,index) in overviewInfoList" :key"index"><div class"angle_mark"><span>{{item.label}}</span>&…...

编程日记 2024/6/26 5:34:53

WPS复制后转置粘贴

1. WPS复制后转置粘贴 复制-》右键-》顶部第一行-》粘贴行列转置&#xff0c;如下图&#xff1a; 2. Excel office365 本地版 2. Excel office365 在线版...

编程日记 2024/6/26 5:33:52

Shell编程之正则表达式与文本处理器

一&#xff0c;正则表达式 1&#xff1a;正则表达式概述 1.正则表达式的定义 正则表达式&#xff08;Regular Expression&#xff0c;RegEx&#xff09;是一种高度灵活的文本处理工具&#xff0c;它结合了字符序列、特殊控制字符&#xff08;称为元字符&#xff09;、以及特定…...

编程日记 2024/6/26 5:26:44

linux文本粘贴格式错乱的问题

vi/vim :set paste然后再 insert, 粘贴...

编程日记 2024/6/26 5:25:43

第二节课 6月13日 ssh密钥登陆方式

centos和ubuntu openssh服务的初始安装 一、实验&#xff1a;ubuntu系统激活root用户 ubuntu系统如何激活root用户&#xff0c;允许root用户ssh登陆&#xff1f; 1、ubuntu默认root用户未设置密码&#xff0c;未激活 激活root用户&#xff0c;设置root密码 sudo passwd roo…...

编程日记 2024/6/26 5:23:39

图书馆借阅表

DDL 用户表 (Users) 图书表 (Books) 图书类别表 (BookCategories) 图书与类别关联表 (BookCategoryRelations) 借阅记录表 (BorrowRecords) 供应商表 (Suppliers) 采购记录表 (PurchaseRecords) CREATE TABLE Users (user_id INT PRIMARY KEY AUTO_INCREMENT,username …...

编程日记 2024/6/26 5:20:36

云动态摘要 2024-06-25

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新产品更新 Web应用防火墙 - 验证码支持微信小程序接入 阿里云 2024-06-25 支持客户从微信小程序场景下接入&#xff0c;提供人机识别的安全防护。 工业数字模型驱动引擎 - iDME控制台换新升级 华为云…...

编程日记 2024/6/26 5:16:32

Docker编译nanopc-t4源码流程介绍

官方文档 Android系统编译 vnc加环境变量配置 https://github.com/friendlyarm/docker-cross-compiler-novnc 下载 git clone https://github.com/friendlyarm/docker-ubuntu-lxde-novnc cd docker-ubuntu-lxde-novnc docker build --no-cache -t docker-ubuntu-lxde-novnc …...

编程日记 2024/6/26 5:15:30

Redis八股文目录

Redis缓存穿透-CSDN博客 Redis缓存击穿-CSDN博客 Redis缓存雪崩&#xff08;主从复制、哨兵模式&#xff08;脑裂&#xff09;、分片集群&#xff09;-CSDN博客 Redis双写一致性-CSDN博客 Redis持久化-CSDN博客 Redis数据过期、淘汰策略-CSDN博客 分布式锁&#xff08;Re…...

编程日记 2024/6/26 5:14:27

Ext JS+Spring Boot 使用Ajax方式上传文件

实现方式 使用 Ext JS 进行 AJAX 调用以传递文件通常涉及到创建一个 FormData 对象，将文件附加到这个对象中，然后通过 Ext JS 的 AJAX API 发送这个对象。 基本步骤 以下是使用 Ext JS 发送文件的基本步骤： 准备文件和数据: 首先需要获取到要传递的文件 创建 FormData 对…...

编程日记 2024/6/26 5:12:25

windows桌面运维----第九天

1、新的电脑需要安装哪些驱动&#xff1a; 显卡驱动、声卡驱动、主板驱动、网卡驱动、打印机驱动、外设驱动、 2、网络打印机如何开启打印机共享核客户端连接共享打印机&#xff1a; 一、打开控制面板并定位到设备和打印机&#xff1a; 首先&#xff0c;我们在电脑桌面上找…...

编程日记 2024/6/26 5:09:22

【Docker】安装和加速

目录 1.安装 2.了解 docker 信息 3.查询状态 4. 重新启动Docker 1.安装 yum install –y docker 2.了解 docker 信息 cat /etc/redhat-release 3.查询状态 systemctl status docker 4.支持 1.12 的 docker 镜像加速 sudo mkdir -p /etc/docker sudo tee /etc/docke…...

编程日记 2024/6/26 5:08:19

如何关闭win10音量调节时 左上角出现的黑框

目录 1.谷歌浏览器&#xff1a; 2.edge浏览器&#xff1a; 3.没得办法的办法&#xff1a; 4.官方回复&#xff1a; 1.谷歌浏览器&#xff1a; 把这行地址chrome://flags/#hardware-media-key-handling 输入到chrome的地址栏里&#xff0c;回车&#xff0c;把黄色里的Hardwa…...

编程日记 2024/6/26 5:05:15

准确率（accuracy）、召回率（recall）的意义和区别

准确率&#xff08;accuracy&#xff09;、召回率&#xff08;recall&#xff09;的意义和区别 对于准确率和召回率&#xff1a;一句话&#xff0c;准确率就是“找的对”&#xff0c;召回率就是“找的全” &#xff08;精确率&#xff1a;正样本中找对的准确率&#xff09; 注…...

编程日记 2024/6/26 5:03:13

分享5个卫星影像查看网站

我们在《分享5个图源二维码及使用方法》一文中&#xff0c;为你分享了5个图源二维码。 现在再为你为分享5种在线卫星影像&#xff0c;如果你需要更多的图源二维码&#xff0c;请在文末查看领取方式。 MapBox卫星影像 可能很多人都知道MapBox的地名路网地图&#xff0c;但可能…...

编程日记 2024/6/26 5:02:12

37岁，被裁员，失业三个月，被面试官嫌弃“太水”：就这也叫10年以上工作经验？

今年部门要招两个自动化测试&#xff0c;这几个月我面试了几十位候选人。发现一个很奇怪的现象&#xff0c;面试中一问到元素定位、框架api、脚本编写之类的&#xff0c;很多候选人都对答如流。但是一问到实际项目&#xff0c;比如“项目中UI自动化和接口自动化如何搭配使用&am…...

编程日记 2024/6/26 5:00:09

如何选择一款优质的酱香酒？

很多人在评价一款酒的好坏时&#xff0c;往往只关注一个标准&#xff1a;口感是否顺滑。然而&#xff0c;真正品鉴一款酒的品质&#xff0c;首要的是香味&#xff0c;其次是味道&#xff0c;最后才是岁月带来的柔和。这种由岁月赋予的柔和&#xff0c;才能展现出酒的力量感和层…...

编程日记 2024/6/26 4:52:00

SQL Server数据库安装

原文&#xff1a;https://blog.c12th.cn/archives/26.html SQL Server数据库安装 测试&#xff1a;笔记本原装操作系统&#xff1a;Windows 10 家庭中文版 资源分享链接&#xff1a;提取码&#xff1a;qbt2 注意事项&#xff1a; 请严格按照步骤安装&#xff0c;SQL软件安装较…...

编程日记 2024/6/26 4:48:57

Hadoop 面试题（十）

1. 简述下列关于Hadoop命令中&#xff0c;命令执行成功返回0&#xff0c;执行失败返回-1&#xff0c;下列命令返回-1的是 &#xff1f; A&#xff1a;hadoop fs -mv /user/hadoop/file1 /user/hadoop/file2 B&#xff1a;hdfs dfs -mv hdfs:///testData file:///tmp/testData …...

编程日记 2024/6/26 4:47:56

Python网络安全项目开发实战，如何看清Web攻击

注意：本文的下载教程，与以下文章的思路有相同点，也有不同点，最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程： Python网络安全项目开发实战_看清Web攻击_编程案例解析实例详解课程教程.pdf 一、引言 在网络安全领域，Web攻击一直是一个严峻的问题。攻击者通过各…...

编程日记 2024/6/26 4:45:53

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/12/27 18:24:33

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/12/27 5:06:10

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/12/21 5:00:07

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/12/19 23:21:33

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/12/9 19:30:18

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/12/24 20:33:48

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2025/12/25 10:50:28

跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

编程新知 2025/12/25 11:32:20