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>
搞定~