奇怪的异形选项卡样式、弧形边框选项卡

news2025/3/29 5:57:03

 

<template>
  <div :class="$options.name">
    <div class="tab">默认选项卡</div>
    <div class="tab" active>选中选项卡</div>
    <el-divider />
    <el-tabs v-model="tabActiveName" @tab-click="(tab, event) => {}" type="">
      <el-tab-pane
        :label="tab.label"
        :name="tab.value.toString()"
        v-for="(tab, index) in tabs"
        :key="index"
        :disabled="tab.disabled"
      >
        <span slot="label">
          <el-badge
            :value="(tab.badge || {}).value"
            :max="99"
            :type="(tab.badge || {}).type || `danger`"
            :hidden="!tab.badge"
          >
            {{ tab.label }}
          </el-badge>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "demo",

  data() {
    return {
      tabs: [
        { value: 1, label: "显示文本1" },
        { value: 2, label: "显示文本2" },
        { value: 3, label: "显示文本3" },
      ],
      tabActiveName: "1", //name必须是String类型,否者tab默认样式聚焦状态下不会显示下划线
    };
  },
};
</script>
<style lang="scss" scoped>
.demo {
  >>> .el-tabs__active-bar {
    display: none;
  }
  >>> .el-tabs__item,
  .tab {
    // transform: perspective(30px) rotateX(20deg);//3D立体效果
    $backgroundColor: #bedeff;
    $backgroundColorAcitve: #409eff;

    $cornerWidth: 15px;
    $cornerHeight: 15px;
    $tabHeight: 40px;
    // ----------------------------------------
    box-sizing: border-box;
    padding: 0 20px !important;
    width: max-content;
    height: $tabHeight;
    background-color: $backgroundColor;
    border-radius: $cornerWidth $cornerWidth 0 0;
    position: relative;
    transform-origin: center bottom;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: $backgroundColorAcitve;

    @mixin leftBg($backgroundColor: $backgroundColorAcitve) {
      background: radial-gradient(
        circle at 0 0,
        transparent $cornerWidth,
        $backgroundColor $cornerWidth
      );
    }
    @mixin rightBg($backgroundColor: $backgroundColorAcitve) {
      background: radial-gradient(
        circle at 100% 0,
        transparent $cornerWidth,
        $backgroundColor $cornerWidth
      );
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: $cornerWidth;
      height: $cornerWidth;
      bottom: 0;
    }

    &::before {
      left: -$cornerWidth;
      @include leftBg($backgroundColor);
    }

    &::after {
      right: -$cornerWidth;
      @include rightBg($backgroundColor);
    }
    &[active],
    &.active,
    &.is-active {
      z-index: 1;
      $backgroundColor: $backgroundColorAcitve;
      color: white;
      background-color: $backgroundColor;
      &::before {
        @include leftBg($backgroundColor);
      }

      &::after {
        @include rightBg($backgroundColor);
      }
    }
  }
}
</style>

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

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

相关文章

3.23 代码随想录第二十四天打卡

122.买卖股票的最佳时机II (1)题目描述: (2)解题思路: class Solution { public:int maxProfit(vector<int>& prices) {int result 0;for (int i 1; i < prices.size(); i) {result max(prices[i] - prices[i - 1], 0);}return result;} }; (3)总结: 1.假…

Python---数据分析(Pandas十一:二维数组DataFrame统计计算二)

1、std 用于计算 DataFrame 中数值的标准差。 DataFrame.std(axis0, skipnaTrue, ddof1, numeric_onlyFalse, **kwargs) 描述说明axis {0 或 ‘index’, 1 或 ‘columns’, None}, 默认为 0。这个参数决定了计算标准差是在哪个轴上进行&#xff1a; 如果 axis0 或 axisindex&…

OpenCV平滑处理:图像去噪与模糊技术详解

引言 在图像处理中&#xff0c;噪声是一个常见的问题&#xff0c;它可能来自于图像采集设备、传输过程或环境干扰。为了去除噪声并改善图像质量&#xff0c;平滑处理&#xff08;Smoothing&#xff09;是一种常用的技术。OpenCV提供了多种平滑处理方法&#xff0c;包括均值滤波…

使用Python将视频转化为gif

使用Python将视频转化为gif 一、前言二、准备三、测试 一、前言 最近想把喜欢的视频片段作成gif&#xff0c;就试着用Python做了下&#xff0c;感觉效果还行&#xff0c;这里做个记录。 二、准备 先下载安装对应的库&#xff0c;命令如下&#xff1a; pip install moviepy …

HTTP长连接与短连接的前世今生

HTTP长连接与短连接的前世今生 大家好&#xff01;作为一名在互联网摸爬滚打多年的开发者&#xff0c;今天想跟大家聊聊HTTP中的长连接和短连接这个话题。 记得我刚入行时&#xff0c;对这些概念一头雾水&#xff0c;希望这篇文章能帮助新入行的朋友少走些弯路。 什么是HTTP…

批量将 PPT 文档中的图片提取到文件夹

在 PPT 文档中我们可以插入很多的图片来丰富我们的幻灯片页面&#xff0c;但是当我们需要将 PPT 幻灯片中的图片提取出来的时候&#xff0c;会非常的麻烦&#xff0c;因为我们需要打开 PPT 然后将图片保存起来。会非常的耗费我们的时间和精力。今天给大家介绍的就是一种批量将 …

yolo目标检测算法在DJI上的研究分析(大纲)

yolo目标检测算法在DJI上的研究分析 面向边缘计算的实时目标检测系统设计与部署 第一章 绪论 1.1 研究背景与意义 目标检测技术需求&#xff1a; DJI设备&#xff08;如无人机、摄像头&#xff09;在安防、巡检、农业等场景中的广泛应用现有YOLO算法在高分辨率图像或资源受限…

MyBatisPlus(SpringBoot版)学习第二讲:基本CRUD

目录 1.BaseMapper 2. 基本CRUD 1. 插入一条记录 2. 删除 1>. 根据ID删除 2>. 根据实体&#xff08;ID&#xff09;删除 3>. 根据columnMap条件删除 4>. 根据entity条件删除 5>. 根据ID批量删除 3. 修改 1>. 根据ID修改 2>. 根据whereEntity条…

基于Spring Boot的企业内管信息化系统的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

Bitcoin Thunderbolt 内测通道开启,加速比特币交易新时代

比特币作为全球领先的加密货币&#xff0c;一直占据着去中心化金融的核心地位。然而&#xff0c;随着比特币生态的不断扩展&#xff0c;其交易速度和扩容问题逐渐成为制约发展的关键瓶颈。为解决这一难题&#xff0c; 比特币雷电网络&#xff08;Bitcoin Thunderbolt&#xff0…

QT笔记----QCheckBox

文章目录 概要1、QCheckBox 的基本概念2、单个QCheckBox3、多个QCheckBox同时应用3.1、实现效果3.2、实现Demo 概要 在 Qt 应用程序开发中&#xff0c;QCheckBox 是一个常用的用户界面元素&#xff0c;它允许用户在两种状态&#xff08;选中和未选中&#xff09;之间进行切换&a…

GR00T N1——英伟达开源的通用人形VLA:类似Helix的快与慢双系统,且可类似ViLLA利用海量的无标注视频做训练

前言 就在昨天3.19日的凌晨&#xff0c;英伟达发布的GR00T N1还是很有含金量的(上午已有好几个朋友私我了)&#xff0c;由此可以看到很多相关工作的影子&#xff0c;比如helix π0 LAPA&#xff0c;具体而言&#xff0c;其具有双系统架构 VLM模块(系统2)通过视觉和语言指令解…

数据建模流程: 概念模型>>逻辑模型>>物理模型

数据建模流程 概念模型 概念模型是一种高层次的数据模型&#xff0c;用于描述系统中的关键业务概念及其之间的关系。它主要关注业务需求和数据需求&#xff0c;而不涉及具体的技术实现细节。概念模型通常用于在项目初期帮助业务人员和技术人员达成共识&#xff0c;确保对业务需…

光谱仪与光谱相机的核心区别与协同应用

一、核心功能与数据维度 ‌光谱仪‌ ‌功能定位‌&#xff1a;专注单点或线状区域的光谱分析&#xff0c;通过色散元件&#xff08;光栅/棱镜&#xff09;分离波长&#xff0c;生成一维或二维光谱曲线&#xff0c;用于量化光强、吸收率等参数‌。 ‌数据维度‌&#xff1a;输…

运行时智控:PanLang 开发者指南(一)运行时系统核心模块实现——PanLang 原型全栈设计方案与实验性探索5

运行时智控&#xff1a;PanLang 开发者指南&#xff08;一&#xff09;运行时系统核心模块实现——PanLang 原型全栈设计方案与实验性探索5 文章目录 运行时智控&#xff1a;PanLang 开发者指南&#xff08;一&#xff09;运行时系统核心模块实现——PanLang 原型全栈设计方案与…

操作系统导论——第13章 抽象:地址空间

一、早期系统 从内存来看&#xff0c;早期的机器并没有提供多少抽象给用户。基本上&#xff0c;机器的物理内存如图13.1所示 操作系统曾经是一组函数&#xff08;实际上是一个库&#xff09;&#xff0c;在内存中&#xff08;在本例中&#xff0c;从物理地址0开始&#xff09;&…

C# 调用 VITS,推理模型 将文字转wav音频net8.0 跨平台

一、系统环境 操作系统&#xff1a;win10&#xff0c;win11 运行环境&#xff1a;dotnet8 工具:命令行&#xff0c;powershell 开源库:sherpa-onnx 二、工具和源码下载 开源库:https://k2-fsa.github.io/sherpa/onnx/index.html 运行环境下载 https://dotnet.microsoft.c…

C#基于MVC模式实现TCP三次握手,附带简易日志管理模块

C#基于MVC模式实现TCP三次握手 1 Model1.1 ServerModel1.2 ClientModel1.3 配置参数模块1.4 日志管理模块1.4.1 数据结构1.4.1 日志管理工具类1.4.1 日志视图展示1.4.1.1 UcLogManage.cs1.4.1.2 UcLogManage.Designer.cs 2 视图&#xff08;View&#xff09;2.1 ViewServer2.1.…

分布式算法:Paxos Raft 两种共识算法

1. Paxos算法 Paxos算法是 Leslie Lamport&#xff08;莱斯利兰伯特&#xff09;在 1990 年提出的一种分布式系统共识算法。也是第一个被证明完备的共识算法&#xff08;前提是不存在恶意节点&#xff09;。 1.1 简介 Paxos算法是第一个被证明完备的分布式系统共识算法。共识…

什么是数据库监控

数据库监控是一个综合的过程&#xff0c;涉及观察、分析和优化组织内数据库的性能、运行状况和可用性。通过持续跟踪查询执行时间、CPU使用率、内存消耗和存储I/O等指标&#xff0c;数据库监控使管理员能够主动识别和解决潜在问题。这种对数据库操作的实时可见性对于确保应用程…