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;//相对于自身的位置而言

}

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

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

相关文章

网络编程555

上传代码 #include <stdio.h>//客户端 #include <string.h> #include <stdlib.h> #include<sys/types.h> #include<sys/socket.h> #include<arpa/inet.h> #include<head.h> #define PORT 69 #define IP "192.168.124.57"…

python之列表推导式

列表推导式是一种简洁的方式来创建列表。它允许您通过在单个表达式中定义循环和条件逻辑&#xff0c;以一种更紧凑的方式生成新的列表。使用列表推导式可以使代码更简洁&#xff0c;易于阅读&#xff0c;并且通常比传统的迭代方法更快。 列表推导式的一般语法形式为&#xff1a…

excel填数据转json格式

定制化比较严重&#xff0c;按需更改 excel文件如下 代码 # -*- coding: utf-8 -*- import oss2 import shutil import sys import xlwt import xlrd import json from datetime import datetime, timedeltafile1 "C:\\Users\\cxy\\Desktop\\generate.xls" #打开表…

使用phpunit进行单元测试

使用phpunit进行单元测试 本教程假定您使用 PHP 8.1 或 PHP 8.2。您将学习如何编写简单的单元测试以及如何下载和运行 PHPUnit. PHPUnit 10 的文档 在这。 下载&#xff1a;可以用以下2种方法之一&#xff1a; 1.PHP 存档 (PHAR) 我们分发了一个 PHP存档&#xff08;PHAR&…

MySQL8的下载与安装-MySQL8知识详解

本文的内容是mysql8的下载与安装。主要讲的是两点&#xff1a;从官方网站下载MySQL8安装和从集成环境安装MySQL8。 一、从官方网站下载MySQL8.0安装 MySQL8.0官方下载地址是&#xff1a;&#xff08;见图&#xff09; 官方正式版的最新版本是8.0.34&#xff0c;也推出了创新版…

Kafka第三课

Flume 由三部分 Source Channel Sink 可以通过配置拦截器和Channel选择器,来实现对数据的分流, 可以通过对channel的2个存储容量的的设置,来实现对流速的控制 Kafka 同样由三大部分组成 生产者 服务器 消费者 生产者负责发送数据给服务器 服务器存储数据 消费者通过从服务器取…

【C++11保姆级教程】auto和decltype

文章目录 前言总结一、auto1.初识auto关键字 2.auto使用二、decltype1.初识decltype2.使用decltype 总结 前言 在C11中引入了一些新的关键字和特性&#xff0c;其中包括auto和decltype。这两个关键字提供了更方便、更灵活的类型推断机制&#xff0c;使得代码编写更加简洁和可读…

shell 命令 tee {..}定义循环体

tee & {..}定义循环体 tee{..} 循环体 tee 作用&#xff1a;将标准输出流内容复制文件中&#xff0c;同时控制台信息依然会显示。 > 和 >> 直接将标准输出流内容重定向&#xff0c;从而导致控制台无法看到输出内容。 可选参数 -a &#xff1a;追加内容&#xff1…

CSS3中的var()函数

目录 定义&#xff1a; 语法&#xff1a; 用法&#xff1a; 定义&#xff1a; var()函数是一个 CSS 函数用于插入自定义属性&#xff08;有时也被称为“CSS 变量”&#xff09;的值 语法&#xff1a; var(custom-property-name, value) 函数的第一个参数是要替换的自定义属性…

MATLAB | 绘图复刻(十一) | 截断的含散点及误差棒的分组柱状图

hey大家好久不见&#xff0c;本期带来一篇绘图复刻&#xff0c;居然已经出到第11篇了&#xff0c;不知道有朝一日有没有机会破百&#xff0c;本期绘制的是《PNAS》期刊中pnas.2200057120文章的figure03&#xff0c;文章题目为Intranasal delivery of full-length anti-Nogo-A a…

Debian/Ubuntu清理硬盘空间

Debian/Ubuntu清理硬盘空间_debian清理磁盘空间_weixin_43606319的博客-CSDN博客 1. 删除残余的配置文件 通常Debian/Ubuntu删除软件包可以用两条命令 sudo apt-get remove <package-name> sudo apt-get purge <package-name> remove将会删除软件包&#xff0…

量化交易接口如何实现量化交易?(程序化交易接口)API

量化交易接口是通过连接投资者的交易账户和量化交易系统&#xff08;程序化交易系统&#xff09;&#xff0c;实现自动化的交易操作。以下是量化交易接口实现量化交易的一般步骤&#xff1a; 1. 数据获取&#xff1a;量化交易接口首先需要通过与行情数据供应商或交易所的API接…

车载以太网物理层

车载以太网物理层 O S I 参考模型的第 1 层&#xff08; 最底层&#xff09;。负责逻辑信号&#xff08; 比特流&#xff09;与物理信号&#xff08;电信号、光信号&#xff09;之间的互相转换&#xff0c;通过传输介质为数据链路层提供物理连接。 车载以太网与传统以太网相比…

java实现docx,pdf文件动态填充数据

一&#xff0c;引入pom 根据需求引入自己所需pom org.apache.poi poi 4.1.1 org.apache.poi poi-ooxml 4.1.1 org.jxls jxls 2.6.0 ch.qos.logback logback-core org.jxls jxls-poi 1.2.0 fr.opensagres.xdocreport fr.opensagres.xdocreport.core 2.0.2 fr.opensagres.xdocrep…

QT笔记——QProcess学习

我们常常想通过某一个类&#xff0c;来启动一个外部进程 本文将讲解如何通过QProcess来进行启动外部进程 一&#xff1a;了解QProcess QProcess是Qt框架提供的一个类&#xff0c;用于在应用程序中执行外部进程。它提供了一系列函数来启动、控制和与外部进程进行交互 1.启动进程…

C++入门基础(万字详解!!!)

文章目录 前言1.C关键字2.命名空间3.C的输入输出4.缺省参数4.1 全缺省4.2 半缺省 5.函数重载6. 引用6.1 引用的特性6.2 引用的使用场景6.3 引用和指针 7.内联函数7.1 特性 8.auto关键字8.1 注意事项 9. 基于范围的for循环9.1 使用条件 10.指针控制nullptr10.1 注意事项 11.总结…

fastadmin 自定义搜索分类和时间范围

1.分类搜索&#xff0c;分类信息获取----php 2.对应html页面&#xff0c;页面底部加搜索提交代码&#xff08;这里需要注意&#xff1a;红框内容&#xff09; 图上代码----方便直接复制使用 <script id"countrySearch" type"text/html"><!--form…

安全 1自测

常见对称加密算法&#xff1a; DES&#xff08;Data Encryption Standard&#xff09;&#xff1a;数据加密标准&#xff0c;速度较快&#xff0c;适用于加密大量数据的场合&#xff1b; 3DES&#xff08;Triple DES&#xff09;&#xff1a;是基于DES&#xff0c;对一块数据用…

Spring相关面试题

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱写博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;个人博客&#xff1a;敬请期待 &#x1f4d5;系列…

时序预测 | MATLAB实现EEMD-GRU、GRU集合经验模态分解结合门控循环单元时间序列预测对比

时序预测 | MATLAB实现EEMD-GRU、GRU集合经验模态分解结合门控循环单元时间序列预测对比 目录 时序预测 | MATLAB实现EEMD-GRU、GRU集合经验模态分解结合门控循环单元时间序列预测对比效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 1.MATLAB实现EEMD-GRU、GRU时…