css仿el-tabs标签页效果

简介: 【8月更文挑战第9天】

1.效果

2.主要代码详解
主要代码如下:active是下划线,activeitem是选中后改变字体颜色, 'item-' + (index + 1),用item来区分获取当前文字对应的距离和宽度好计算下划线的位置



{ { item.label || "" }}



选中后设置的样式,active是一个块级元素
.active {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: #409eff;
  border-radius: 50px;
  transition: left 0.3s ease;
}
.activeitem {
  color: #409eff;
}

3.完整代码




项目







{ { item.label || "" }}






相关文章
|
存储 前端开发 Java
spring boot 实现Minio分片上传
spring boot 实现Minio分片上传
1894 1
|
消息中间件 缓存 监控
Sentry 开发人员文档(中文手册,二次开发指南)
Sentry 开发人员文档(中文手册,二次开发指南)
4161 0
Sentry 开发人员文档(中文手册,二次开发指南)
|
小程序 计算机视觉
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts
4954 0
|
人工智能 自然语言处理 Cloud Native
Bolt.diy 评测方案:从部署到创意实践的全方位探索
Bolt.diy 是阿里云推出的低代码开发平台,基于函数计算(FC)与百炼大模型服务构建。它通过自然语言交互、全栈开发支持及快速云端部署,让开发者和非技术人员能轻松实现创意落地。本文详细解析了 Bolt.diy 的部署流程、功能实践与应用场景,并结合测试案例探讨其价值与优化方向。无论是在教育、企业内部工具定制还是个人兴趣开发中,Bolt.diy 均展现出高效便捷的优势,但复杂业务需求仍需传统工具补充。未来,随着大模型能力升级,Bolt.diy 将进一步推动 AI 辅助开发的发展。
|
人工智能 Cloud Native 安全
Bolt.diy 部署与应用体验全流程总结
按照官方指引,我完成了 Bolt.diy 的部署与测试。通过云原生应用开发平台 CAP,默认配置下部署仅需 1 分钟。首次使用需授权访问控制,部署完成后进入示例应用。注意,资源须通过 HTTPS 提供以支持 WebAssembly 和 SharedArrayBuffer。 随后,在阿里云百炼平台创建 API-KEY 并配置到 Bolt.diy 中,开始尝试提示词创作。例如输入中端 SaaS 首页需求后,Bolt.diy 自动生成代码并展示预览效果,生成效率和质量令人满意。
|
人工智能 安全 API
大模型推理主战场:通信协议的标配
DeepSeek加速了模型平权,大模型推理需求激增,性能提升主战场从训练转向推理。SSE(Server-Sent Events)和WebSocket成为大模型应用的标配网络通信协议。SSE适合服务器单向推送实时数据,如一问一答场景;WebSocket支持双向实时通信,适用于在线游戏、多人协作等高实时性场景。两者相比传统HTTPS协议,能更好地支持流式输出、长时任务处理和多轮交互,满足大模型应用的需求。随着用户体量扩大,网关层面临软件变更、带宽成本及恶意攻击等挑战,需通过无损上下线、客户端重连机制、压缩算法及安全防护措施应对。
2201 176
大模型推理主战场:通信协议的标配
|
NoSQL JavaScript Java
基于 RuoYi-Vue-Pro 定制了一个后台管理系统 , 开源出来!
从职业生涯伊始,我一直是微服务架构的坚定拥趸,这很大程度上源于长期深耕互联网行业,习惯了高并发、分布式架构下的开发模式。 然而,去年在优化某航空公司核心用户中心系统时,我的技术认知受到了不小的冲击。 因为航空公司用户中心是一个典型的单体应用——尽管业务量不小,但稳定的业务模型和有限的扩展需求,使得单体架构反而比微服务更高效、更经济。
基于 RuoYi-Vue-Pro 定制了一个后台管理系统 , 开源出来!
|
传感器 自然语言处理 监控
快速部署实现Bolt.diy
Bolt.diy 是 Bolt.new 的开源版本,提供灵活的自然语言交互与全栈开发支持。基于阿里云函数计算 FC 和百炼模型服务,最快5分钟完成部署。新手注册阿里云账号后可领取免费额度,按指引开通相关服务并授权。通过项目模板一键部署,配置 API-KEY 后即可使用。Bolt.diy 支持多种场景,如物联网原型开发、久坐提醒、语音控制灯光等,助力快速实现创意应用。
2738 22
|
存储 Java 开发工具
【三方服务集成】最新版 | 阿里云OSS对象存储服务使用教程(包含OSS工具类优化、自定义阿里云OSS服务starter)
阿里云OSS(Object Storage Service)是一种安全、可靠且成本低廉的云存储服务,支持海量数据存储。用户可通过网络轻松存储和访问各类文件,如文本、图片、音频和视频等。使用OSS后,项目中的文件上传业务无需在服务器本地磁盘存储文件,而是直接上传至OSS,由其管理和保障数据安全。此外,介绍了OSS服务的开通流程、Bucket创建、AccessKey配置及环境变量设置,并提供了Java SDK示例代码,帮助用户快速上手。最后,展示了如何通过自定义starter简化工具类集成,实现便捷的文件上传功能。
6201 7
【三方服务集成】最新版 | 阿里云OSS对象存储服务使用教程(包含OSS工具类优化、自定义阿里云OSS服务starter)
|
前端开发 PHP
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局
本文介绍了ThinkPHP6中实现模板布局的三种方式:全局配置方式、模板标签方式和动态方法布局,并通过示例代码展示了如何在项目中应用这些布局方式。
ThinkPHP6布局的方式之模板布局,全局配置方式,模板标签方式,动态方法布局