uView修改样式(持续更新)

场景

通过样式穿透修改uView2.0组件样式,用于app
注意版本不一样方法可能不同

实现

  1. 通用
.uni-body{
	line-height: 0;
}
  1. 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;
}
  1. 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;
	}
}
  1. 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;
	}
}
  1. 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;
}
  1. 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; //线宽
// }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值