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

vue 控件的四个角设置 父视图position:relative

父视图relative,子视图 absolute

<div class="bg1">

                            <i class="topL"></i>

                            <i class="topR"></i>

                            <i class="bottomL"></i>

                            <i class="bottomR"></i>

                            <div class="tableTitle">

                                <div style="float: left;;">7日内出库排行</div>

                            </div>

                            <div id="main11" style="width: 100% !important;height:calc(100vh * 340 / 1080) ;"

                                class="echart">

                            </div>

                        </div>

.topL {

    width: 5px;

    height: 5px;

    border-top-width: 2px;

    border-top-color: #26c6f0;

    border-top-style: solid;

    border-left-width: 2px;

    border-left-color: #26c6f0;

    border-left-style: solid;

    position: absolute;//根据父视图决定位置

    top: -2px;

    left: -2px;

}

.topR {

    width: 5px;

    height: 5px;

    border-top-width: 2px;

    border-top-color: #26c6f0;

    border-top-style: solid;

    border-right-width: 2px;

    border-right-color: #26c6f0;

    border-right-style: solid;

    position: absolute;

    top: -2px;

    right: -2px;

}

.bottomL {

    width: 5px;

    height: 5px;

    border-bottom-width: 2px;

    border-bottom-color: #26c6f0;

    border-bottom-style: solid;

    border-left-width: 2px;

    border-left-color: #26c6f0;

    border-left-style: solid;

    position: absolute;

    bottom: -2px;

    left: -2px;

}

.bottomR {

    width: 5px;

    height: 5px;

    border-bottom-width: 2px;

    border-bottom-color: #26c6f0;

    border-bottom-style: solid;

    border-right-width: 2px;

    border-right-color: #26c6f0;

    border-right-style: solid;

    position: absolute;

    bottom: -2px;

    right: -2px;

}

.bg1 {

    height: calc(100vh *385 / 1080);

    width: 100%;

    border-radius: 5px;

    border: 1px solid rgba(25, 186, 139, .17);

    background: rgba(255, 255, 255, .04);

    position: relative;//相对于自身的位置而言

}

相关文章:

vue 控件的四个角设置 父视图position:relative

父视图relative&#xff0c;子视图 absolute <div class"bg1"> <i class"topL"></i> <i class"topR"></i> <i class"bottomL"></i> <i class"bottomR"></i> <di…...

VM中linux虚拟机配置桥接模式(虚拟机与宿主机网络互通)

VM虚拟机配置桥接模式&#xff0c;可以让虚拟机和物理主机一样存在于局域网中&#xff0c;可以和主机相通&#xff0c;和互联网相通&#xff0c;和局域网中其它主机相通。 vmware为我们提供了三种网络工作模式&#xff0c;它们分别是&#xff1a;Bridged&#xff08;桥接模式&…...

7.Eclipse中改变编码方式及解决部分乱码问题

1、改变整个工作空间的编码方式&#xff1a; 点击Window->Preference->General->workplace&#xff0c;然后选择默认编码方式 2、改变某个项目的编码方式&#xff1a; 右键点击项目名->Properties>Resource&#xff0c;然后选择默认编码方式。 问题&#xff…...

grafana 的 ws websocket 连接不上的解决方式

使用了多层的代理方式&#xff0c;一层没有此问题 错误 WebSocket connection to ‘wss://ip地址/grafana01/api/live/ws’ failed: 日志报错 msg“Request Completed” methodGET path/api/live/ws status403 解决方式 # allowed_origins is a comma-separated list of o…...

多环境_部署项目

多环境&#xff1a; 指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。 为什么需要&#xff1f; 1. 每个环境互不影响 2. 区分不同的阶段&#xff1a;开发 / 测试 / 生产 3. 对项目进行优化&#xff1a; 1. 本地日志级别 2. 精简依赖&a…...

go web框架 gin-gonic源码解读02————router

go web框架 gin-gonic源码解读02————router 本来想先写context&#xff0c;但是发现context能简单讲讲的东西不多&#xff0c;就准备直接和router合在一起讲好了 router是web服务的路由&#xff0c;是指讲来自客户端的http请求与服务器端的处理逻辑或者资源相映射的机制。&…...

【Java后端封装数据】常见后端封装数据的格式,用于返回给前端使用(109)

数据格式一&#xff1a;包装 List Map 返回&#xff0c;常用于数据展示&#xff1b; // Controller&#xff1a;public Result selectRegConfig(RequestBody String param) {try {Map<String, Object> paramMap JsonUtils.readValue(param, Map.class);return Result.su…...

无脑入门pytorch系列(三)—— nn.Linear

本系列教程适用于没有任何pytorch的同学&#xff08;简单的python语法还是要的&#xff09;&#xff0c;从代码的表层出发挖掘代码的深层含义&#xff0c;理解具体的意思和内涵。pytorch的很多函数看着非常简单&#xff0c;但是其中包含了很多内容&#xff0c;不了解其中的意思…...

SQL Server用sql语句添加列,添加列注释

SQL Server用sql语句添加列&#xff0c;添加列注释 微软文档&#xff1a; https://learn.microsoft.com/zh-cn/sql/relational-databases/tables/add-columns-to-a-table-database-engine?viewsql-server-ver15 alter table article add RedirectURL varchar(600) nu…...

springBoot中service层查询使用多线程CompletableFuture(有返回值)

重点&#xff1a; 1. 创建线程池 Executor executor Executors.newCachedThreadPool();//保存线程List<CompletableFuture<Void>> futures new ArrayList<>();2.使用 //这里可以是多个看下面代码是在for中使用的 CompletableFuture<Void> future …...

畜牧虚拟仿真 | 鱼授精过程VR模拟演练系统

随着科技的发展&#xff0c;虚拟现实(VR)技术逐渐渗透到各个领域&#xff0c;为人们提供了更加真实、直观的体验。在动物养殖教育领域&#xff0c;鱼授精过程VR模拟演练系统正成为一种新的教学手段&#xff0c;它能够帮助人们更好地理解和掌握鱼授精的操作技巧&#xff0c;从而…...

第一百一十四回 局部动态列表

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了dart语言中的 setter/getter相关的内容&#xff0c;本章回中将介绍 局部动态列表.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 在正常情况下列表位于整个页面中&#xff0c;而且可以在整个页面中滚动…...

多尺度目标检测【动手学深度学习】

在上篇博客《锚框【目标检测】》中,我们以输入图像的每个像素为中心,生成多个锚框。基本而言,这些锚框代表了图像不同区域的样本。然而如果以每个像素都生成的锚框,最后可能会得到太多需要计算的锚框。想象一个561728的输入图像,如果以每个像素为中心生成五个形状不同的锚…...

elasticsearch 基础

ES 搜索技术历史 今天看的是《Elasticsearch实战与原理解析》 第一章 搜索技术发展史 1、搜索技术发展史 宏观而言&#xff0c;搜索引擎的发展经历了五个尖端和两大分类。五个阶段分别是ftp文件检索阶段、分类目录阶段、文本相关性检索阶段、网页链接分析阶段和用户意图识别…...

【BUG】docker安装nacos,浏览器却无法访问到页面

个人主页&#xff1a;金鳞踏雨 个人简介&#xff1a;大家好&#xff0c;我是金鳞&#xff0c;一个初出茅庐的Java小白 目前状况&#xff1a;22届普通本科毕业生&#xff0c;几经波折了&#xff0c;现在任职于一家国内大型知名日化公司&#xff0c;从事Java开发工作 我的博客&am…...

C#引用Web Service 类型方法,添加搜索本地服务器Web Service 接口调用方法

首先保证现在网络能调用web service接口&#xff0c;右键项目添加服务引用 ![![在这里插入图片描述](https://img-blog.csdnimg.cn/555ba4fa5e2a418f8f85539a9406bcd6.png) 点击高级 添加web服务 输入搜索的服务器接口&#xff0c;选中你要添加调用的方法即可 添加完成调用方…...

yolov8训练进阶:新增配置参数

续yolov8训练进阶&#xff1a;自定义训练脚本&#xff0c;从配置文件载入训练超参数_CodingInCV的博客-CSDN博客 尽管yolov8有很多参数可以设置&#xff0c;但难免我们训练过程中会需要增加自己的参数&#xff0c;如新的数据增强、自定义的一些条件。那么在yolov8中如何实现呢&…...

轻量级自动化测试框架WebZ

一、什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架&#xff0c;基于WebDriver。 设计该框架的初衷是&#xff1a;用自动化测试让测试人员从一些简单却重复的测试中解放出来。之所以用“关键字驱动”模式是因为我觉得这样能让测试人员&#xff08;测试执行人员…...

如何实现安全上网

l 场景描述 政府、军工、科研等涉密单位或企业往往要比其他组织更早接触高精尖的技术与产品&#xff0c;相对应的数据保密性要求更高。常规的内外网物理隔离手段&#xff0c;已经满足不了这些涉密单位的保密需求&#xff0c;发展到现在&#xff0c;需求已经演变成既要保证网络…...

Redis心跳检测

在命令传播阶段&#xff0c;从服务器默认会以每秒一次的频率&#xff0c;向主服务器发送命令&#xff1a; REPLCON FACK <rep1 ication_ offset>其中replication_offset是从服务器当前的复制偏移量。 发送REPLCONF ACK命令对于主从服务器有三个作用&#xff1a; 检测主…...

AssetStudio深度解析:Unity资源提取原理与跨版本兼容实践

1. 这不是个“点开即用”的工具&#xff0c;而是一把需要校准的Unity资源解剖刀AssetStudio这个名字听起来像某个轻量级小工具&#xff0c;但实际用过的人很快会意识到&#xff1a;它根本不是拿来就跑的“一键提取器”&#xff0c;而是一套需要你亲手调参、理解Unity底层序列化…...

ARM工业平板在机器人示教器控制系统中的应用与实现

1. 项目概述&#xff1a;ARM工业平板如何重塑机器人示教体验在工业机器人的世界里&#xff0c;示教器&#xff08;Teach Pendant&#xff0c;简称TP&#xff09;是连接操作员与机械臂的“神经中枢”。过去&#xff0c;这个角色通常由专用、封闭的硬件设备扮演&#xff0c;它们功…...

2025-2026年护眼灯品牌推荐:十大评测专业排行防蓝光伤眼价格特点

摘要 当消费者对家庭光环境的认知从“照亮空间”跃迁至“健康护眼”&#xff0c;如何从纷繁复杂的市场中精准选择一盏真正经得起科学检验的护眼灯&#xff0c;已成为现代家庭决策者的核心焦虑。根据全球知名市场研究机构Grand View Research发布的报告&#xff0c;全球LED照明市…...

软考中级《嵌入式系统设计师》全套备考资料(真题 + 教材 + 笔记)

大家好&#xff0c;今天给大家分享一份软考中级「嵌入式系统设计师」的完整备考资料包&#xff0c;从教材、真题到高频笔记全配齐&#xff0c;帮你省去整理资料的时间&#xff0c;直接进入高效备考状态&#xff01; &#x1f4c1; 资料清单 这套资料覆盖了嵌入式系统设计师备考…...

前端架构演进:从单体到微前端

前端架构演进&#xff1a;从单体到微前端 前端架构的发展历程 第一阶段&#xff1a;单体应用&#xff08;Mono Repo&#xff09; ├── src/ │ ├── components/ │ ├── pages/ │ ├── services/ │ ├── utils/ │ └── styles/ └── index.html…...

【编号884】江西省各城市-春节人口迁徙规模数据(2019-2025)

今天分享的是 江西省各城市-春节人口迁徙规模数据&#xff08;2019-2025&#xff09;数据概况 江西省各城市-春节人口迁徙规模数据&#xff08;2019-2025&#xff09; 春节地级市人口迁徙指数&#xff08;2019-2025&#xff09;迁徙指数依托位置时空大数据构建&#xff0c;形…...

[智能体-7]:业务数据序列化为 JSON 字符串 完整示例

一、概念序列化&#xff1a;把程序里的对象 / 字典 / 实体数据 → 转换成JSON 格式字符串&#xff0c;用于网络传输、接口请求、存储。反序列化&#xff1a;JSON 字符串 → 还原成程序可直接使用的数据对象。二、Python 示例&#xff08;最常用&#xff0c;对接 OpenAI / 大模型…...

Win11自带加密真香!手把手教你用‘属性加密’保护私密文件夹(附防忘密码小技巧)

Win11原生加密全指南&#xff1a;从基础设置到高阶安全实践 在数字时代&#xff0c;隐私保护已成为每个电脑用户的刚需。当你刚升级到Win11系统&#xff0c;面对全新的界面和操作逻辑&#xff0c;可能会对如何保护敏感文件感到困惑。第三方加密软件固然功能强大&#xff0c;但它…...

伺服电机电流环PI参数整定:从数学模型到工程实践

1. 项目概述&#xff1a;高带宽电流环设计的核心价值在伺服电机控制领域&#xff0c;追求极致的动态响应和稳态精度&#xff0c;是所有工程师的终极目标。上一期我们聊透了EtherCAT如何通过精准的同步信号&#xff08;Sync&#xff09;为整个控制系统打下坚实的时间基准&#x…...

ops-rand:AI 训练中的随机数生成

AI 训练离不开随机数。权重初始化要随机、Dropout 要随机、数据打乱要随机、噪声注入要随机。每一次随机操作的背后&#xff0c;都有一组随机数生成器在工作。 CANN 的 ops-rand 仓库提供了 NPU 上的随机数生成算子——Dropout、随机 Shuffle、随机初始化、正态分布采样等。这…...