当前位置: 首页 > 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…...

别再死磕Reduce Side Join了!用Map Side Join优化你的Hadoop数据处理流程(附完整代码)

突破性能瓶颈&#xff1a;Map Side Join在电商数据处理中的实战优化 当订单数据量突破千万级时&#xff0c;传统的Reduce Side Join开始显露出致命缺陷——我曾在一个深夜被报警电话惊醒&#xff0c;集群因OOM崩溃&#xff0c;而第二天早晨就是季度财报会议。这次事故让我彻底放…...

Keras模型转Web应用:TensorFlow.js实战指南

1. 项目概述最近在做一个机器学习项目时&#xff0c;我发现很多开发者训练完Keras模型后&#xff0c;往往只停留在本地测试阶段。实际上&#xff0c;将训练好的SavedModel格式模型部署为浏览器可运行的Web应用&#xff0c;能够极大提升模型的实用性和可访问性。本文将完整演示如…...

AngularJS Material-Start完全指南:从零开始构建现代化Web应用

AngularJS Material-Start完全指南&#xff1a;从零开始构建现代化Web应用 【免费下载链接】material-start Starter Repository for AngularJS Material 项目地址: https://gitcode.com/gh_mirrors/ma/material-start AngularJS Material-Start是一个基于AngularJS Mat…...

ezXSS入门指南:5分钟快速搭建专业的XSS测试环境

ezXSS入门指南&#xff1a;5分钟快速搭建专业的XSS测试环境 【免费下载链接】ezXSS ezXSS is an easy way for penetration testers and bug bounty hunters to test (blind) Cross Site Scripting. 项目地址: https://gitcode.com/gh_mirrors/ez/ezXSS ezXSS是一款专为…...

PatchTST论文精读与复现:手把手带你理解‘时间序列的64个词’

PatchTST论文精读与复现&#xff1a;手把手带你理解"时间序列的64个词" 当Transformer架构在NLP和CV领域大放异彩时&#xff0c;时间序列预测领域却长期被传统统计方法和浅层神经网络主导。直到2023年PatchTST的出现&#xff0c;才真正打破了这一僵局。这篇来自顶级学…...

零基础算法打卡第 11 天|LeetCode 80 删除有序数组中的重复项 II + 滑动窗口 / 双指针巩固

今天是算法学习第 11 天&#xff01;今天任务&#xff1a;LeetCode 80 删除有序数组中的重复项 II&#xff0c;在昨天去重的基础上升级&#xff0c;允许最多出现两次&#xff0c;超过两次才删掉&#xff0c;顺便巩固滑动窗口 / 双指针&#xff0c;并完成第二周学习小结。 一、今…...

深入浅出 TPM:从 Windows 11 强制要求到 Linux 内核级安全防护

前言说到 TPM (Trusted Platform Module)&#xff0c;很多小伙伴的第一反应可能是安装 Windows 11 时那个令人头疼的“系统要求”。但你真的了解这个住在你主板上的“小管家”吗&#xff1f;它仅仅是为了拦截老旧电脑升级吗&#xff1f;最近&#xff0c;在加州举行的 SCALE 23x…...

机器学习指标解析:AUC与KS值

import numpy as np from sklearn.metrics import confusion_matrixy_pred [0, 1, 0, 1] # 模型预测结果 y_true [0, 1, 1, 0] # 真实标签 print(混淆矩阵:\n, confusion_matrix(y_true, y_pred))# 输出&#xff1a; # [[1 1] # [1 1]]## accuracy from sklearn.metrics i…...

从‘找色块’到‘追小球’:用K210实现一个简易颜色追踪机器人(代码开源)

从静态识别到动态追踪&#xff1a;K210颜色追踪机器人开发实战 在创客教育和小型机器人开发领域&#xff0c;视觉追踪一直是个令人着迷的技术方向。想象一下&#xff0c;你的机器人能够像宠物一样跟随彩色小球移动&#xff0c;或者自动追踪特定颜色的目标——这正是K210芯片结合…...

STM32CubeMX实战:DHT11温湿度数据采集与串口打印

1. DHT11温湿度传感器基础认知 第一次接触DHT11这个蓝色小模块时&#xff0c;我完全没想到它会在后来的智能家居项目中扮演如此重要的角色。这个比硬币大不了多少的传感器&#xff0c;内部却藏着测量温湿度的精妙机制。DHT11采用电阻式感温元件和湿敏电容的组合设计&#xff0c…...