场景
通过样式穿透修改uView2.0组件样式,用于app
注意版本不一样方法可能不同
实现
- 通用
.uni-body{
line-height: 0;
}
- u-input
::v-deep .u-input{
height: 20.51rpx !important;
padding: 0 6.59rpx !important;
}
::v-deep .uni-input-input{
height:50%;
font-size: 8.79rpx;
}
::v-deep .uni-input-placeholder{
font-size: 8.79rpx;
}
- u-button
<u-button type="primary" shape="circle" text="登录" class="loginBtn"/>
...
.u-button__text{
font-size: 10.25rpx !important;
}
.loginBtn{
height: 20.51rpx;
width: 100%;
background-color: #fff;
font-family: 'PingFang SC';
font-weight: 500;
font-size: 10.25rpx;
color: #333;
border: none;
}
.prompt{
font-family: 'PingFang SC';
font-weight: 500;
font-size: 8.79rpx;
color: #fff;
text-align: center;
margin-top: 8.79rpx;
text{
color: #2A81EB;
}
}
- u–form
::v-deep .u-form-item__body{
padding: 0;
}
// rules样式
::v-deep .u-form-item__body__right__message{
margin: 0;
padding: 0 !important;
line-height: 0 !important;
height: 0 !important;
span{
font-size: 8.79rpx;
}
}
- u-tabs
.u-tabs{
// height: 18.31rpx;
}
.u-tabs__wrapper__nav__item{
height: 18.31rpx !important;
}
.u-tabs__wrapper__nav__item__text{
span{
font-size: 10.25rpx !important;
}
}
.u-tabs__wrapper__nav__line{
height: 2.2rpx !important;
}
6.u-checkbox-group 单个复选框
::v-deep .u-checkbox__icon-wrap{
width: 11.72rpx !important;
height: 11.72rpx !important;
}
::v-deep .u-icon-checkbox-mark{
font-size: 8.79rpx !important;
line-height: 8.79rpx !important;
}
- u-slider 滑块
uni-slider{
margin: 0 8rpx !important; //左右边距可以不管,但上下必须消除
}
// .uni-slider-handle{
// width: 14.65rpx !important;
// height: 14.65rpx !important;
// margin-left: 7.32rpx !important;
// margin-top: 7.32rpx !important;
// }
// .uni-slider-thumb{
// width: 7.32rpx !important;
// height: 7.32rpx !important;
// margin-left: 3.66rpx !important;
// margin-top: 3.66rpx !important;
// }
// .uni-slider-handle-wrapper{
// height:10rpx !important; //线宽
// }