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

ElementUi的tabs样式太难修改,自定义tabs标签页

ElementUi的Tabs组件在某些情况下难以是自己想要的样式,这时候自定义 Tabs 会是一个更好的选择,可以根据自己想要而设置样式,如图:

一、ElementUi的Tabs样式

链接:Tabs 标签页 | Element Plus

基础:

选项卡:

卡片化:

自定义:

以上样式都不是想要的效果,那么自定义一个tabs是一个选择。

二、自定义tabs

界面渲染

<div class="custom-tabs"><div class="tabs-header"><div v-for="(tab, index) in tabs" :key="index"class="tab-item":class="{ 'active': currentTab === index }"@click="currentTab = index">{{ tab.label }}</div></div><div class="tabs-content"><component :is="tabs[currentTab].component" /></div>
</div>

js

// 这里是vue2写法。引入需要的组件,或直接展示内容
import userInfo from "@/views/userg.vue";
import setting from "@/views/setting.vue";
export default {name: "",components: {userInfo,setting},data() {return {currentTab: 0,tabs: [{ label: "用户信息", component: "userInfo" },{ label: "系统设置", component: "setting" }]}},

部分scss

.custom-tabs {margin: 20px;display: flex;flex-direction: column;.tabs-header {display: flex;height: 60px;background-color: rgba(0,0,0,0.04);border-radius: 10px;.tab-item {flex: 1;text-align: center;padding: 12px 0;cursor: pointer;font-size: 20px;color: black;position: relative;transition: all 0.3s ease;&:hover {color: black;}&.active {color: #409EFF;font-weight: bold;&::after {content: '';position: absolute;bottom: 0px;left: 0;width: 100%;height: 2px;background-color: #409EFF;}}}}.tabs-content {height: 400px;flex: 1;padding: 20px 0;overflow: auto;min-height: 0;}
}

 

.custom-tabs {margin: 20px;display: flex;flex-direction: column;.tabs-header {display: flex;align-items: center;height: 60px;background-color: rgba(0,0,0,0.04);border-radius: 10px;.tab-item {height: 46px;flex: 1;display: flex;align-items: center;justify-content: center;margin: 10px 10px;border-radius: 10px;cursor: pointer;font-size: 20px;color: black;position: relative;transition: all 0.3s ease;&:hover {color: black;}&.active {color: #409EFF;font-weight: bold;background-color: white;&::after {content: '';position: absolute;bottom: 0px;left: 0;width: 100%;}}}}.tabs-content {height: 400px;flex: 1;padding: 20px 0;overflow: auto;min-height: 0;}
}

想要什么样式,就修改成什么样式,很实用。

若文章对你有帮助,点赞、收藏加关注吧!

相关文章:

ElementUi的tabs样式太难修改,自定义tabs标签页

ElementUi的Tabs组件在某些情况下难以是自己想要的样式&#xff0c;这时候自定义 Tabs 会是一个更好的选择&#xff0c;可以根据自己想要而设置样式&#xff0c;如图&#xff1a; 一、ElementUi的Tabs样式 链接&#xff1a;Tabs 标签页 | Element Plus 基础&#xff1a; 选…...

制作一款打飞机游戏23:编辑器ui

今天&#xff0c;我想重点介绍编辑器的实际用户界面&#xff08;UI&#xff09;。 关于Excel的讨论 很多人使用Excel来编辑他们程序的数据&#xff0c;因为大多数时候它都能很好地完成工作。Excel就像是一把瑞士军刀&#xff0c;可以修改各种数据。但是&#xff0c;在某些情况…...

课程9. 机器翻译,Seq2Seq与Attention

课程9. 机器翻译&#xff0c;Seq2Seq与Attention 机器翻译的任务. Seq2Seq 架构通过实战理解加载和预处理数据构建 Seq2Seq 模型编码器解码器Seq2Seq网络训练 Seq2Seq 架构问题注意力机制&#xff08;Attention&#xff09;注意选项Transformer 架构介绍——BERT 课程计划 机器…...

ASP.NET MVC​ 入门指南二

9. 表单处理与提交 9.1 创建表单视图 在视图文件夹下创建一个用于创建产品的视图&#xff0c;如 Create.cshtml&#xff1a; html model YourNamespace.Product{ViewBag.Title "创建产品"; }<h2>创建产品</h2>using (Html.BeginForm()) {Html.Anti…...

JavaWeb学习打卡-Day3-MyBatis相关

MyBatis 什么是MyBatis? MyBatis是一款优秀的持久层框架&#xff0c;用于简化JDBC的开发。MyBatis免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。 JDBC JDBC&#xff08;Java DataBase Connectivity&#xff09;&#xff1a;使用Java语言操作关系型数据库的…...

浅谈AI Agent 演进之路

1、了解下 AI Agent 的定义 AI Agent&#xff08;人工智能代理&#xff09;简单来说是一种能够感知环境、进行决策和执行动作的智能实体。与传统的人工智能相比&#xff0c;AI Agent 具备独立思考和调用工具逐步完成目标的能力。 例如&#xff1a;当要求 AI Agent 帮助下单外…...

佳博票据和标签打印:Web网页端与打印机通信 | iOS

文章目录 引言I Web网页端与打印机通信webSDK(包含示例页)打印测试II iOS与佳博打印机通信引言 佳博工具下载ESC是票据打印指令,TSC是标签打印指令 工业打印机:佳博GP-H430F工业机标签条码打印机物流快递电子面单条码机碳带机 应用场景:打印商品价格标签、打印交易小票 I…...

视频噪点多,如何去除画面噪点?

你是否遇到过这样的困扰&#xff1f;辛辛苦苦拍摄的视频&#xff0c;导出后却满屏 “雪花”&#xff0c;夜景变 “噪点盛宴”&#xff0c;低光环境秒变 “马赛克现场”&#xff1f; 无论是日常拍摄的vlog、珍贵的家庭录像&#xff0c;还是专业制作的影视作品&#xff0c;噪点问…...

微信小程序直传阿里云 OSS 实践指南(V4 签名 · 秒传支持 · 高性能封装)

文章目录 前言一、为什么要使用直传 OSS&#xff1f;二、整体架构与实现思路三、阿里云 OSS 配置&#xff08;V4 签名&#xff09;1. 权限设置2. 后端生成签名参数&#xff08;返回给小程序&#xff09; 四、微信小程序端上传流程&#xff08;功能模块拆解与封装&#xff09;第…...

云原生--核心组件-容器篇-1-Docker和云原生关系(Docker是云原生的基石)

1、基本概念 &#xff08;1&#xff09;、云原生&#xff08;Cloud Native&#xff09; 是一种构建和运行应用程序的方法论&#xff0c;旨在充分利用云计算环境&#xff08;公有云、私有云、混合云&#xff09;的特性&#xff0c;通过容器化、微服务、服务网格、声明式API等技…...

GAEA情感坐标背后的技术原理

基于GAEA的去中心化物理基础设施网络&#xff08;DePIN&#xff09;&#xff0c;用户有机会在GAEA平台上获得宝贵的数据共享积分。为了提升这些洞察的丰富性&#xff0c;用户必须花费一定数量的积分&#xff0c;将过去的网络数据与当前的情感数据绑定&#xff0c;从而产生一种新…...

day01_编程语言介绍丶Java语言概述丶开发环境搭建丶常用DOS命令

编程语言介绍 ‌编程语言是一种用于人与计算机之间通信的语言&#xff0c;允许程序员编写代码&#xff0c;这些代码告诉计算机要执行哪些操作‌。编程语言可以被视为计算机可以理解并执行的指令集合&#xff0c;它是一种标准化的交流技巧&#xff0c;用于向计算机发出指令。‌…...

STM32系列官方标准固件库的完整下载流程

一、官网导航与版本确认 访问ST官网 打开浏览器进入 ST官网&#xff0c;点击左侧 “工具与软件” 标签&#xff0c;展开后选择 “嵌入式软件” 。若页面未直接显示&#xff0c;可在搜索框输入“STM32 Standard Peripheral Libraries”查找。 → “STM32标准外设库”&#xff0…...

Android 14 系统统一修改app启动时图标大小和圆角

Android 14 统一修改app启动时图标大小和圆角 修改如下&#xff1a; 目录&#xff1a;frameworks/base/core/java/android/window/SplashScreenView.java frameworks/base/libs/WindowManager/Shell/src/com/android/wm/shell/startingsurface/SplashscreenContentDrawer.ja…...

MySQL 详解之函数:数据处理与计算的利器

在 MySQL 中,函数可以接受零个或多个输入参数,并返回一个值。这些函数可以在 SELECT 语句的字段列表、WHERE 子句、HAVING 子句、ORDER BY 子句以及 UPDATE 和 INSERT 语句中使用。合理利用函数,可以简化 SQL 语句,提高开发效率。 MySQL 提供了大量的内置函数 (Built-in F…...

Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)

目录 一、技术选型&#xff1a;为什么选择Tailwind Kooboo&#xff1f; 二、CDN方案 vs 传统安装 三、CDN方式实战步骤 一、技术选型&#xff1a;为什么选择Tailwind Kooboo&#xff1f; 1.1 黄金组合优势 Tailwind CSS&#xff1a;原子化CSS框架&#xff0c;提供&#x…...

Java基础 — 条件结构与随机数

介绍 Java条件结构与随机数是程序逻辑控制的重要工具。条件结构通过if-else和switch实现分支判断&#xff1a;if(条件){代码}用于单分支&#xff0c;else if添加多条件判断&#xff0c;switch则基于固定值匹配不同case。随机数生成常用两种方式&#xff1a;Math.random()方法返…...

AI网络渗透kali应用(gptshell)

kali安装gptshell 一、shellGPT 工具介绍 ShellGPT‌是一款由AI大型语言模型&#xff08;LLM&#xff09;驱动的终端命令行工具。它能帮助用户直接在终端与AI交互&#xff0c;自动生成、解释、执行各类 Linux 命令&#xff0c;大大提升了运维和开发效率。ShellGPT 支持接入 O…...

如何实现Android屏幕和音频采集并启动RTSP服务?

技术背景 在移动直播和视频监控领域&#xff0c;实现高效的屏幕和音频采集并提供流媒体服务是关键技术之一。本文将详细介绍如何基于大牛直播SDK实现Android屏幕和麦克风/扬声器采集&#xff0c;并启动轻量级RTSP服务以对外提供拉流的RTSP URL。在Android平台上&#xff0c;轻…...

大模型提示词如何编写

一、提示词的核心三要素 明确目标&#xff08;What&#xff09; 告诉 AI「你要它做什么」&#xff0c;越具体越好。 ❌ 模糊&#xff1a;写一篇文章 ✅ 清晰&#xff1a;写一篇 800 字的高考作文&#xff0c;主题 “坚持与创新”&#xff0c;结构分引言、三个论点&#xff08;…...

Serverless 在云原生后端的实践与演化:从函数到平台的革新

📝个人主页🌹:慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言:从服务器到“无服务器”的后端演变 在传统后端开发中,我们需要为服务配置并维护服务器资源,无论是物理机、虚拟机还是容器化服务,都需要: 管理系统运行环境 监控负载与扩缩容 保证高可用与安…...

反爬虫机制中的验证码识别:类型、技术难点与应对策略

在互联网数据抓取领域&#xff0c;验证码识别是爬虫过程中的关键环节之一。下面对常见验证码类型、技术难点及应对策略进行详细解析&#xff0c;并提供多种场景下的代码实现示例。 一、验证码类型与技术难点 &#xff08;一&#xff09;图形验证码 1. 字符验证码 特征&#…...

.NET 10 中的新增功能

.NET 运行时 .NET 10 运行时引入了新功能和性能改进。 关键更新包括&#xff1a; 数组接口方法反虚拟化&#xff1a;JIT 现在可以取消虚拟化和内联数组接口方法&#xff0c;从而提高数组枚举的性能。数组枚举去抽象化&#xff1a;改进功能以通过枚举器减少数组迭代的抽象开销…...

通过音频的pcm数据格式利用canvas绘制音频波形图

上面是一个完整的音频的波形图&#xff0c;可以大概知道音频整个的简略信息 数据准备&#xff1a;需要有这个音频的pcm数据&#xff0c;也就是时域采样值&#xff0c;每个数字代表某一时刻音频波形的振幅。 <!DOCTYPE html> <html lang"en"> <head&…...

Dubbo负载均衡策略深度解析

互联网大厂Java求职者面试&#xff1a;Dubbo负载均衡策略详解 第一轮提问&#xff1a; 面试官&#xff1a;马架构&#xff0c;您好&#xff01;请问您了解Dubbo的负载均衡策略吗&#xff1f;Dubbo支持哪些负载均衡策略呢&#xff1f; 马架构&#xff1a;您好&#xff01;Dub…...

【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合

async/await原理剖析&#xff1a;Generator和Promise的完美结合 今天咱们聊聊async/await&#xff0c;这玩意儿用起来是真香&#xff0c;但你知道它背后是怎么运作的吗&#xff1f;其实它就是Generator和Promise的"爱情结晶"。 1. 先搞懂Generator Generator&…...

量子加密通信技术及其应用:构建无条件安全的通信网络

一、引言 在数字化时代&#xff0c;信息安全成为全球关注的焦点。随着量子计算技术的快速发展&#xff0c;传统的加密算法面临着前所未有的挑战。量子加密通信技术应运而生&#xff0c;它利用量子力学的基本原理&#xff0c;如量子叠加态和量子纠缠&#xff0c;实现了无条件安全…...

软考中级-软件设计师 知识点速过1(手写笔记)

第一章&#xff1a;数值及其转换 没什么可说的&#xff0c;包括二进制转八进制和十六进制 第二章&#xff1a;计算机内部数据表示 真值和机器数&#xff1a; 原码&#xff08;后面都拿x 19举例) &#xff1a; 反码&#xff1a; 补码&#xff1a; 移码&#xff1a; 定点数&…...

【prompt是什么?有哪些技巧?】

Prompt&#xff08;提示词&#xff09;是什么&#xff1f; Prompt 是用户输入给AI模型&#xff08;如ChatGPT、GPT-4等&#xff09;的指令或问题&#xff0c;用于引导模型生成符合预期的回答。它的质量直接影响AI的输出效果。 Prompt 的核心技巧 1. 明确目标&#xff08;Clar…...

C++进阶----多态

目录 引言1.多态的概念2.多态的定义及实现2.1 多态的构成条件2.2虚函数2.3 虚函数的重写2.4 关键字override和final2.5 重载、覆盖&#xff08;重写&#xff09;、隐藏对比 3.抽象类3.1 抽象类概念 4.多态的原理4.1 虚函数表4.2虚函数表的底层4.3多态的原理4.4 动态绑定和静态绑…...

银发科技:AI健康小屋如何破解老龄化困局

随着全球人口老龄化程度的不断加深&#xff0c;如何保障老年人的健康、提升他们的生活质量&#xff0c;成为了社会各界关注的焦点。 在这场应对老龄化挑战的战役中&#xff0c;智绅科技顺势而生&#xff0c;七彩喜智慧养老系统构筑居家养老安全网。 而AI健康小屋作为一项创新…...

【黑马 微服务面试篇】

分布式事务 cap定理-Availability CAP定理-Partition tolerance BASE理论 BASE理论是对CAP的一种解决思路&#xff0c;包含三个思想&#xff1a; BasicallyAvailable&#xff08;基本可用&#xff09;&#xff1a;分布式系统在出现故障时&#xff0c;允许损失部分可用性&#…...

斗鱼娱乐电玩平台源码搭建实录

在本篇文章中&#xff0c;我们将以技术人的角度详细拆解一款风格接近850平台的斗鱼娱乐电玩系统源码&#xff0c;包含完整服务器端、前台补全资源和双端APP构建流程。基于七月最新更新内容&#xff0c;本教程将突出技术关键点、实战配置与代码示范&#xff0c;旨在为开发者和搭…...

缓存与数据库一致性深度解析与解决方案

缓存与数据库一致性深度解析与解决方案 一、一致性问题本质与挑战 1. 核心矛盾分析 缓存与数据库一致性问题源于数据存储的异步性与分布性&#xff0c;核心挑战包括&#xff1a; 读写顺序不确定性&#xff1a;并发场景下写操作顺序可能被打乱&#xff08;如先写缓存后写数据…...

Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统

在复杂的 Flutter 应用开发中&#xff0c;弹窗管理是一个常见难题。手动管理弹窗的显示顺序和条件判断不仅繁琐&#xff0c;还容易出错。为此&#xff0c;我们实现了一个支持优先级的线程安全通用弹窗队列管理系统。它能够自动管理弹窗的显示顺序&#xff0c;支持条件判断&…...

【Langchain】RAG 优化:提高语义完整性、向量相关性、召回率--从字符分割到语义分块 (SemanticChunker)

RAG 优化&#xff1a;提高语义完整性、向量相关性、召回率–从字符分割到语义分块 (SemanticChunker) 背景&#xff1a;提升 RAG 检索质量 在构建基于知识库的问答系统&#xff08;RAG&#xff09;时&#xff0c;如何有效地将原始文档分割成合适的文本块&#xff08;Chunks&a…...

Linux 官方蓝牙协议栈 BlueZ 第一篇:入门与架构概览

Linux 官方蓝牙协议栈 BlueZ,包含内核驱动、用户态守护进程和 DBus 接口,支持 Classic Bluetooth 和 BLE。本篇将从协议栈演进、架构组件、安装调试、核心流程和开发入门五个角度,结合 PlantUML 图、C/Python 代码示例,帮助你全面掌握 BlueZ 基础。 目录 协议栈演进与概念 …...

多层级的对象如何修改、或json格式

场景&#xff1a; 对象有多层级&#xff0c;一层套一层&#xff0c;list套对象&#xff0c;对象套list。 现在需要修改期中一个list的内容&#xff0c;怎么弄呢? 注&#xff1a;每一层都new一个新list再set不可取&#xff0c;太麻烦&#xff0c;看起来乱而且还容易错。 最好…...

产品动态|千眼狼sCMOS科学相机捕获单分子荧光信号

单分子荧光成像技术&#xff0c;作为生物分子动态研究的关键工具&#xff0c;对捕捉微弱信号要求严苛。传统EMCCD相机因成本高昂&#xff0c;动态范围有限&#xff0c;满阱容量低等问题&#xff0c;制约单分子研究成果产出效率。 千眼狼精准把握科研需求与趋势&#xff0c;自研…...

VsCode如何使用默认程序打开word Excel pdf等文件

如何使用在VsCode使用默认程序打开文件? 1.在插件市场里搜open插件并安装 2.安装完后,右键文件打开,点击Open with default application,就可以了 是不是非常方便!!!...

【T-MRMSM】文本引导多层次交互多尺度空间记忆融合多模态情感分析

在特征提取的部分用了k-means abstract (背景) 近年来,随着多模态数据量的迅速增加,多模态情感分析(MSA)越来越受到关注.该方法通过整合不同数据模态间的信息,提高了情感极性提取的准确性,从而实现了信息的全面融合,提高了情感分析的精度。 (针对创新处的不足) …...

python pymysql如何保证数据库更新成功

python pymysql如何保证数据库更新成功 在使用Python的PyMySQL库与MySQL数据库交互时,确保数据库更新操作成功执行,可以通过以下几种方式: 使用execute()和commit() 当执行一个更新(UPDATE)、插入(INSERT)或删除(DELETE)操作时,你需要调用execute()方法来执行SQL语句…...

Redis是单线程的,如何提高多核CPU的利用率?

一句话回答&#xff1a; Redis 是单线程处理客户端命令&#xff0c;但可以通过 多实例部署、I/O 多路复用、后台线程 Redis 6 的 I/O Thread 支持&#xff0c;来充分利用多核 CPU。 一、Redis 单线程 ≠ 整个 Redis 都是单线程&#xff01; Redis 主要的 网络事件 命令执行 …...

01.oracle SQL基础

SQL是结构化查询语言 SQL分类 数据定义语言&#xff08;DDL --- create/alter/drop&#xff09; sysdate --- 可以拿到当前系统时间 案例&#xff1a;创建学生表&#xff0c;教师表&#xff0c;课程表 -- 学生表 create table t_student(sid number(11) primary key,sname n…...

BEVPoolv2:A Cutting-edge Implementation of BEVDet Toward Deployment

背景 该论文是在BEVDet的基础上进行了一个调整优化&#xff0c;传统的方法是将特征图与深度预测进行外积得到视椎特征图&#xff0c;再将它与预处理好的体素索引结合&#xff0c;将每个视椎特征分类到每个voxel中进行累加和的操作。BEVFusion与BEVDepth等方法是避免了累加和&a…...

FreeRTOS学习笔记【10】-----任务上下文切换

1 概念性内容 开机到调度需要经历的步骤有&#xff1a; 系统初始化任务创建启动调度器上下文切换时间分片任务执行 1.1 任务本质 FreeRTOS 的 任务&#xff08;Task&#xff09;本质上就是一个运行在任务自己的栈区中无限循环的函数 一段上下文&#xff08;context&#x…...

PDFMathTranslate:基于LLM的PDF文档翻译及双语对照的工具【使用教程】

1.简介 PDFMathTranslate 是一个用于科学 PDF 文档翻译及双语对照的工具&#xff0c;是一个功能强大且灵活的科学文档翻译工具&#xff0c;适合科研人员、学生和专业人士使用&#xff0c;能够有效提高文档翻译的效率和质量。其具有以下特点和功能&#xff1a; 核心功能 保留格…...

CSS 入门全解析

CSS 入门全解析&#xff1a;从选择器到布局的全面教学 一、CSS 是什么&#xff1f;二、CSS 的基本语法结构三、常见选择器讲解四、盒模型讲解&#xff08;重点&#xff09;五、字体与颜色样式六、布局方式6.1 浮动布局&#xff08;了解&#xff09;6.2 Flex 弹性布局&#xff0…...

用户案例--慧眼科技

作者&#xff1a;算力魔方创始人/英特尔创新大使刘力 每个行业都有其独特的需求&#xff0c;算力魔方推出了全面的定制化服务&#xff0c;从概念到产品化&#xff0c;满足各行各业&#xff0c;用户可以根据具体应用需求定制更多接口或更强图形处理的需求&#xff0c;且算力魔方…...

面试中被问到mybatis与jdbc有什么区别怎么办

1. 核心区别 维度JDBCMyBatis抽象层级底层API&#xff0c;直接操作数据库高层持久层框架&#xff0c;封装JDBC细节代码量需要手动编写大量样板代码&#xff08;连接、异常处理等&#xff09;通过配置和映射减少冗余代码SQL管理SQL嵌入Java代码&#xff0c;维护困难SQL与Java代…...