uni-ui样式修改

洗发水很好用2025-01-02 11:21

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

官网原生样式

调整后的

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

uniui.scss

css 复制代码

  /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

css 复制代码

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

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

css 复制代码

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

搞定~