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

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.kler.cn/a/464904.html

相关文章:

  • 探索AI在地质科研绘图中的应用:ChatGPT与Midjourney绘图流程与效果对比
  • 期末速成C++【大题汇总完】
  • 【MySQL基础篇】三、表结构的操作
  • 高等数学学习笔记 ☞ 无穷小比较与等价无穷小替换
  • UE5失真材质
  • OWASP ZAP之API 请求基础知识
  • SpringCloudAlibaba实战入门之Sentinel服务降级和服务熔断(十五)
  • AWS EMR上的Spark用Kafka搜集大数据日志Tableau报表展示的设计和实现
  • nacos 笔记2-配置中心
  • 使用CSS 和 JavaScript 实现鼠标悬停时图片放大、缩小和抖动
  • Linux驱动开发学习准备(Linux内核源码添加到工程-Workspace)
  • SpringCloud源码分析-Gateway
  • Elasticsearch DSL版
  • 从企业级 RAG 到 AI Assistant,阿里云 Elasticsearch AI 搜索技术实践
  • C语言面的向对象编程(OOP)
  • 高效管理deepin和Docker中的后台任务
  • 如何查看docker默认的网段的4种办法
  • [python SQLAlchemy数据库操作入门]-16.CTE:简化你的复杂查询
  • 计算机网络•自顶向下方法:路由选路算法
  • neo4j学习笔记
  • Kali Linux 和Xshell的安装和使用
  • java04 1个简单程序/ 输入输出/ 方法(子函数)/ 数组
  • Windows注册表的HKEY_CLASSES_ROOT是HKEY_LOCAL_MACHINE\SOFTWARE\Classes合并HKEY_CURRENT_USER\Software\Classes
  • HCIE-day9-OSPF2
  • 五年制物联网专业智能家居实训室建设方案
  • MySQL_增删改查基础