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>

搞定~