uni-ui样式修改

因为之前官网uni-ui有些组件的样式不好看,所以要做一些调整,做个记录。用分段器举例~

官网原生样式

调整后的

首先找到我们的static文件夹,里面一般存着项目的全局样式文件,没有的话自己创一个

uniui.scss

  /deep/ .segmented-control__item--text {font-weight: bold;border-bottom-width: 0 !important;}/deep/ .segmented-control__item--text::after {content: ""; /* 伪元素内容为空 */position: absolute; /* 绝对定位 */left: calc(50% - 10px); /* 从左边开始 */bottom: 0; /* 与内容底部对齐 */width: 20px; /* 设置下划线的宽度 */height: 4px; /* 下划线的高度 */background-color: #0574ff;border-radius: 4px; /* 设置圆角 */}

在全局scss文件index.scss中引入uniui.scss

// global
@import "./global.scss";
// color-ui
@import "@/static/scss/colorui.css";
// iconfont
@import "@/static/font/iconfont.css";
// uni ui 
@import "./uniui.scss";

在App.vue入口文件中引入样式

<style lang="scss">
@import "@/static/scss/index.scss";
</style>

搞定~

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

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

相关文章

【SqlSugar雪花ID常见问题】.NET开源ORM框架 SqlSugar 系列

系列文章目录 &#x1f380;&#x1f380;&#x1f380; .NET开源 ORM 框架 SqlSugar 系列 &#x1f380;&#x1f380;&#x1f380; 文章目录 系列文章目录一、前言 &#x1f343;二、ORM中使用雪花ID ❄️2.1 普通插入2.2 导航插入2.3 手动调用雪花ID 三、雪花ID重复 问题 …

有序归并(JOIN 简化和提速系列 8)

八、有序归并 我们再来看同维表和主子表的 JOIN&#xff0c;这两种情况的优化提速手段是类似的。 我们前面讨论过&#xff0c;HASH JOIN 算法的计算复杂度&#xff08;即关联键的比较次数&#xff09;是 sum(ni*mi)&#xff0c;比全遍历的复杂度 n*m 要小很多&#xff0c;不过…

详细教程:SQL2008数据库备份与还原全流程!

数据的安全性至关重要&#xff0c;无论是操作系统、重要文件、磁盘存储&#xff0c;还是企业数据库&#xff0c;备份都是保障其安全和完整性的关键手段。拥有备份意味着即使发生误删、系统崩溃或病毒攻击等问题&#xff0c;也能迅速通过恢复功能解决&#xff0c;避免数据丢失带…

低代码开发:开启企业数智化转型“快捷键”

一、低代码开发浪潮来袭&#xff0c;企业转型正当时 在当今数字化飞速发展的时代&#xff0c;低代码开发已如汹涌浪潮&#xff0c;席卷全球。从国际市场来看&#xff0c;诸多企业巨头纷纷布局低代码领域&#xff0c;像微软的 PowerApps、OutSystems 等平台&#xff0c;凭借强大…

MySQL数据库——常见慢查询优化方式

本文详细介绍MySQL的慢查询相关概念&#xff0c;分析步骤及其优化方案等。 文章目录 什么是慢查询日志&#xff1f;慢查询日志的相关参数如何启用慢查询日志&#xff1f;方式一&#xff1a;修改配置文件方式二&#xff1a;通过命令动态启用 分析慢查询日志方式一&#xff1a;直…

C# 设计模式(结构型模式):享元模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;享元模式 (Flyweight Pattern) 在软件开发中&#xff0c;尤其是在处理大量对象时&#xff0c;我们常常会面临内存和性能上的挑战。当多个对象具有相似的状态时&#xff0c;通常会占用大量的内存资源&#xff0c;从而…

SQL 实战:分页查询的多种方式对比与优化

在处理大数据表时&#xff0c;分页查询是非常常见的需求。分页不仅可以提高用户体验&#xff0c;还能有效减少数据库查询返回的数据量&#xff0c;避免一次性加载大量记录引起的性能瓶颈。 然而&#xff0c;在数据量较大或复杂查询中&#xff0c;简单的分页方式可能导致性能下降…

JR-RLAA系20路模拟音频多功能编码器

JR-RLAA系20路模拟音频多功能编码器 产品特色 (1)工业级19英寸标准设备&#xff0c;内置双电源 (2)内嵌Web Server&#xff0c;支持远程Web页面登陆后的统一配置操作 (3)支持20路音频输入 (4)支持Dolby Digital(AC-3) &#xff0c;MPEG-2&#xff0c;AAC-LC/HE-AAC&#x…

javaEE初阶————计算机是如何工作的

今天给大家带来javaEE初阶的知识&#xff0c;相信大家已经学完javaSE了吧&#xff0c;我们从本期博客开始为大家一一讲解&#xff0c;我们现在开始吧 我们作为程序员&#xff0c;大概了解这部分即可嗷 1&#xff0c;计算机的组成 祖师爷提出的&#xff1a; 冯诺依曼体系结构…

【Nginx】Nginx代理模式相关概念解释及Nginx安装

Nginx代理模式 Nginx 是一个高性能的HTTP和反向代理服务器&#xff0c;同时也支持IMAP/POP3代理服务。它可以在多种场景下使用&#xff0c;其中就包括正向代理和反向代理模式。 相关概念 反向代理 (Reverse Proxy) 在反向代理模式中&#xff0c;Nginx 通常位于网络的内部&a…

基于AI大模型的医院SOP优化:架构、实践与展望

一、引言 1.1 研究背景与意义 近年来,人工智能(AI)技术取得了迅猛发展,尤其是大模型的出现,为各个领域带来了革命性的变化。在医疗领域,AI 医疗大模型正逐渐崭露头角,展现出巨大的应用潜力。随着医疗数据的海量积累以及计算能力的大幅提升,AI 医疗大模型能够对复杂的…

【论文阅读-思维链的构造方法02】4.1.2 Automatic Construction-01

提示1&#xff1a;本篇博客中涉及4篇相关论文&#xff0c;预计阅读时间10分钟&#xff0c;望各位友友耐心阅读&#xff5e; 提示2&#xff1a;本篇所有涉及的论文已打包发布&#xff0c;不需要任何积分即可下载&#xff0c;指路 --> 论文集下载地址 大模型技术-思维链CoT …

uniapp——微信小程序,从客户端会话选择文件

微信小程序选择文件 文章目录 微信小程序选择文件效果图选择文件返回数据格式 API文档&#xff1a; chooseMessageFile 微信小程序读取文件&#xff0c;请查看 效果图 选择文件 /*** description 从客户端会话选择文件* returns {String} 文件路径*/ const chooseFile () &g…

Android GameActivity(NativeActivity)读写文件

最近研究native android相关内容&#xff0c;其中最棘手的就是文件读写问题&#xff0c;最主要的是相关的文档很少。这里写下我所知道的方法。 由于本人使用的是Android14[arm64-v8a]版本的设备,能访问的路径相当有限&#xff0c;如果想要访问更多的路径&#xff0c;就不得不申…

YOLO11改进 | 卷积模块 | ECCV2024 小波卷积

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 本文给大家带来的教程是将YOLO11的Conv替…

从0开始的opencv之旅(1)cv::Mat的使用

目录 Mat 存储方法 创建一个指定像素方式的图像。 尽管我们完全可以把cv::Mat当作一个黑盒&#xff0c;但是笔者的建议是仍然要深入理解和学习cv::Mat自身的构造逻辑和存储原理&#xff0c;这样在查找问题&#xff0c;或者是遇到一些奇奇怪怪的图像显示问题的时候能够快速的想…

【Hadoop】Hadoop安全之Knox网关

目录 一、概述 2.1 knox介绍 2.2 版本信息 二、部署 三、验证Knox网关 3.1 Hdfs RESTFULL 3.2 HDFSUI 3.3 YARNUI 3.4 HBASEUI 一、概述 2.1 knox介绍 Apache Knox网关是一个用于与Apache Hadoop部署的REST api和ui交互的应用程序网关。Knox网关为所有与Apache Hadoop…

走方格(蓝桥杯2020年试题H)

【问题描述】在平面上有一些二维点阵。这些点的编号就像二维数组的编号一样&#xff0c;从上到下依次为第1~n行&#xff0c;从左到右依次为第1~m列&#xff0c;每个点可以用行号和列号表示。 现在有个人站在第1行第1列&#xff0c;他要走到第n行第m列&#xff0c;只能向右或者向…

uniapp Stripe 支付

引入 Stripe npm install stripe/stripe-js import { loadStripe } from stripe/stripe-js; Stripe 提供两种不同类型组件 Payment Element 和 Card Element&#xff1a;如果你使用的是 Payment Element&#xff0c;它是一个更高级别的组件&#xff0c;能够自动处理多种支…

Visual Studio 2022安装教程

1、下载网址 Visual Studio 2022 IDE安装网址借助 Visual Studio 设计&#xff0c;具有自动完成、构建、调试、测试功能的代码将与 Git 管理和云部署融为一体。https://visualstudio.microsoft.com/zh-hans/vs/ 点击图片所示 双击运行 2、安装 点击C桌面开发&#xff08;右边…