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

Element UI的Tabs 标签页位置导航栏去除线条

在这里插入图片描述
在实际开发中,我们调整了相关样式,导致导航栏的相关样式跟随不上,如下图所示:
在这里插入图片描述

因为我跳转了前边文字的样式并以在导航栏添加了相关头像,导致右边的线条定位出现问题,我在想,要不我继续调整右边线条的样式跟随左边的点击nav进行变化,要不干脆去掉算了,然后我在前端找半天,发现:
在这里插入图片描述
这玩意我在样式中硬是找不到,卡了我许久,最后发现样式调整可以在:

<template><el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"><el-radio-button label="top">top</el-radio-button><el-radio-button label="right">right</el-radio-button><el-radio-button label="bottom">bottom</el-radio-button><el-radio-button label="left">left</el-radio-button></el-radio-group><!--在这里新增一个div块--><div  class="leftTabs"><el-tabs :tab-position="tabPosition" style="height: 200px;"><el-tab-pane label="用户管理">用户管理</el-tab-pane><el-tab-pane label="配置管理">配置管理</el-tab-pane><el-tab-pane label="角色管理">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane></el-tabs></div>
</template>
<script>export default {data() {return {tabPosition: 'left'};}};
</script><style scoped>/*去掉tabs底部的下划线*/
.leftTabs >>>.el-tabs__nav-wrap::after{position: static !important;
}.leftTabs >>>.el-tabs__active-bar{background-color: transparent !important;}
</style>

在以上代码的基础上完成我司的系统功能效果如下:
在这里插入图片描述
已经去除掉线条的背景色了。

相关文章:

Element UI的Tabs 标签页位置导航栏去除线条

在实际开发中&#xff0c;我们调整了相关样式&#xff0c;导致导航栏的相关样式跟随不上&#xff0c;如下图所示&#xff1a; 因为我跳转了前边文字的样式并以在导航栏添加了相关头像&#xff0c;导致右边的线条定位出现问题&#xff0c;我在想&#xff0c;要不我继续调整右边…...

【Python 训练营】N_1 验证密码

N_1 验证密码 题目 设计一个用户密码验证程序&#xff0c;要求密码输入只有3次机会&#xff0c;且密码中不能包含”*”字符。 分析 需要考虑3个问题&#xff1a;验证次数、特殊字符和正误密码判断&#xff1b;验证次数需要使用循环&#xff0c;3个问题需要用到分支结构&…...

Pinia 和 Vuex 的对比,storeToRefs 的原理

目录 1&#xff0c;Pinia 介绍2&#xff0c;和 Vuex 的对比3&#xff0c;storeToRefs 源码分析 1&#xff0c;Pinia 介绍 官网简介 Pinia 使用上的问题&#xff0c;官方文档很详细&#xff0c;这里不做赘述。 Pinia 是 Vue 的专属状态管理库&#xff0c;支持vue2和vue3&#x…...

Mycat分库分表的操作(配置)

Mycat是一个开源的分布式数据库中间件&#xff0c;它可以对数据库进行分库分表的操作&#xff0c;以下是Mycat分库分表的操作步骤&#xff1a; 配置数据源&#xff1a;将要操作的数据库和表通过Mycat的配置文件配置到数据源中。配置分片规则&#xff1a;根据分库分表的需求&am…...

android的canvas的clipRegion废弃替代代码

由于clipRegion的一些问题&#xff0c;导致他被废弃了&#xff0c;但又有时候会用到&#xff0c;所以写了一个工具类来替代它 代码如下 package com.example;import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.g…...

KubeSphere 社区双周报 | Fluent Operator 2.6.0 发布 | 2023.11.10-11.23

KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过 commit 的贡献者&#xff0c;并对近期重要的 PR 进行解析&#xff0c;同时还包含了线上/线下活动和布道推广等一系列社区动态。 本次双周报涵盖时间为&#xff1a;2023.11.10-2023.…...

【通俗易懂】git原理、安装及连接gitlab,github

目录 一、GIT原理【这部分也挺简单&#xff0c;可以看看&#xff0c;如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…...

TCP /UDP协议的 socket 调用的过程

在传输层有两个主流的协议 TCP 和 UDP&#xff0c;socket 程序设计也是主要操作这两个协议。这两个协议的区别是什么呢&#xff1f;通常的答案是下面这样的。 TCP 是面向连接的&#xff0c;UDP 是面向无连接的。TCP 提供可靠交付&#xff0c;无差错、不丢失、不重复、并且按序…...

外贸独立站外部优化:提升网站可见度与吸引力的策略

随着全球电子商务的快速发展&#xff0c;外贸独立站已经成为众多企业拓展海外市场、提升品牌影响力的关键工具。然而&#xff0c;要想在竞争激烈的外贸市场中脱颖而出&#xff0c;除了产品优质、服务周到外&#xff0c;还需要做好网站的外部优化工作。本文将详细探讨如何通过有…...

buildAdmin 后端控制器的代码分析

buildAdmin的代码生成&#xff0c;很像是 fastadmin 的生成模式&#xff0c;当我们利用数据库生成了一个控制器的时候&#xff0c;我们可以看到&#xff0c; 它的生成代码很简洁 <?phpnamespace app\admin\controller\askanswer;use app\common\controller\Backend;/*** 回…...

Python丨让简历脱颖而出的关键,居然是“它”!

进入疫情后时代&#xff0c;各行各业都在力争新的发展&#xff01;财会行业亦是如此&#xff0c;浏览各大招聘网站&#xff0c;不难发现财会相关岗位的招聘要求越来越“卷”&#xff0c;那求职者如何才能让自己获得面试邀请呢&#xff1f; 答案就是&#xff1a;一份亮眼且具有…...

CMake中常见的预定义变量

文章目录 CMake常见的预定义变量CMake variables官方文档 CMake常见的预定义变量 在 CMake 中&#xff0c;有一些常见的预定义变量&#xff0c;它们提供了有关项目、目录结构和构建环境的信息。这些变量可用于设置路径、传递参数、以及进行其他与构建过程相关的操作。 以下是…...

.netcore 获取appsettings

我的开发环境是abpvnext net6.0 。 因为业务需要&#xff0c;从原来老项目net4.5工程里复制了一个报表导出的业务类到net6项目里面&#xff0c;但是他的获取appsettings的代码其实不用想都知道会报错。因为原来framwork时代获取appsettings的方法常见的是 System.Configura…...

额温枪方案,MS8551,MS8601;MS1112,MS1100

鉴于测温的传感器信号非常微弱&#xff0c;需要用高精度、低噪声的运算放大器和高精度、低功耗的ADC。 运算放大器可供选择&#xff1a;MS8551 or MS8601&#xff0c;具有低失调&#xff08;1uV&#xff09;、低噪&#xff08;22nV√Hz &#xff09;、封装小等优点&#xff0c…...

数字图像处理基础-用通俗语言进行超详细的总结

目录 图像感知与获取 韦伯定理 马赫带效应 图像获取 图像的采样和量化 图像内插&#xff08;重采样&#xff09; 图像的表示与描述 像素间的关系 exercise&#xff1a;4-邻域连通区域标记 本文章讲解数字图像处理的基础&#xff0c;大部分内容来源于课堂笔记中 图像感…...

3.3.1详解linux内核链表list_head及其接口应用

文章目录 1 list定义2 list接口2.1 list初始化方法1:定义并初始化链表方法2:先定义再初始化链表2.2 list_add2.3 list_del2.4 list_replace2.5 list_move2.6 list_splice3 list遍历3.1 list_entry3.2 list_first_entry3.3 list_last_entry3.4 list_first_entry_or_null3.5 li…...

发挥云计算潜力:Amazon Lightsail 与 Amazon EC2 的综述

文章作者&#xff1a;Libai 欢迎来到云计算世界&#xff0c;这里有无数的机会和无限的应用程序增长。 在当今的数字时代&#xff0c;企业可能会发现管理基础架构和扩展应用程序具有挑战性。 传统的本地解决方案需要大量的硬件、软件和维护前期投资。 要满足不断增长的需求&…...

【深度学习】卷积神经网络(CNN)

一、引子————边界检测 我们来看一个最简单的例子&#xff1a;“边界检测&#xff08;edge detection&#xff09;”&#xff0c;假设我们有这样的一张图片&#xff0c;大小88&#xff1a; 图片中的数字代表该位置的像素值&#xff0c;我们知道&#xff0c;像素值越大&#…...

科普:多领域分布式协同仿真

分布式协同仿真是一种在分布式计算环境中进行协同工作的仿真方法。使用该方法进行协同仿真时&#xff0c;仿真任务将被分发到多个计算节点上&#xff0c;并且这些节点可以同时工作以模拟完整的系统行为。分布式协同仿真已被广泛应用于工程、科学和军事领域&#xff0c;以便更好…...

openstack(2)

目录 块存储服务 安装并配置控制节点 安装并配置一个存储节点 验证操作 封装镜像 上传镜像 块存储服务 安装并配置控制节点 创建数据库 [rootcontroller ~]# mysql -u root -pshg12345 MariaDB [(none)]> CREATE DATABASE cinder; MariaDB [(none)]> GRANT ALL PR…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...