解决小程序中兑换页面表单兼容问题

pages/change/change.vue

@@ -13,11 +13,11 @@
 			</view>
 			<view class="formChange">
 				<u-form :model="form" ref="uForm">
-					<u-form-item class="formitem card_number" prop="card_number" :border-bottom="false">
-						<u-input type="text" v-model="form.card_number" placeholder="请输入卡号"/>
+					<u-form-item class="formitem" prop="card_number" :border-bottom="false" >
+						<u-input type="text" class="card_number" v-model="form.card_number" placeholder="请输入卡号"/>
 					</u-form-item>
 					<u-form-item class="formitem password" prop="password" :border-bottom="false">
-						<u-input type="password" v-model="form.password" placeholder="请输入密码" :password-icon="false" />
+						<u-input class="password" type="password" v-model="form.password" placeholder="请输入密码" :password-icon="false" />
 					</u-form-item>
 				</u-form>
 				<u-button class="formitem submitform" form-type="submit" :plain="true" @click="goSubmit">点击提货</u-button>
@@ -141,7 +141,7 @@
 		width: 68.7%;
 		margin: 0 auto;
 	}
-	/deep/ u-form-item.formitem{
+	/deep/ .u-form-item{
 		margin-bottom: 40rpx;
 		height: 74rpx;
 		width: 100%;
@@ -149,38 +149,54 @@
 		border-radius: 50rpx;
 		background-color: #f4f3f2;
 		border: none;
-		padding: 0;
-		padding-left: 104rpx;
-		padding-right: 40rpx;
+		padding: 0 !important;
+		
 		border: none !important;
-		background-position: left 40rpx center;
-		background-size: 38rpx auto;
-		background-repeat: no-repeat;
+		
 		font-size: 20rpx;
 		color: #676767;
 	}
-	/deep/ u-form-item.formitem.card_number{
-		background-image: url(../../static/icon-change1.png);
-	}
-	/deep/ u-form-item.formitem.password{
+
+	/deep/ .u-form-item.password{
 		background-image: url(../../static/icon-change2.png);
 	}
-	/deep/ u-form-item.formitem u-input{
+	/deep/ .u-input{
+
+		
+	}
+
+	/deep/ .u-form-item .u-input__input{
 		display: block;
 		border: none;
 		width: 100%;
-		height: 100%;
-		line-height: 76rpx;
-		color: #676767;
-		font-size: 20rpx;
+		height: 74rpx;
+		line-height: 74rpx;
+		color: #676767 !important;
+		font-size: 20rpx !important;
+		padding-left: 104rpx;
+		padding-right: 40rpx;
+		background-position: left 40rpx center;
+		background-size: 38rpx auto;
+		background-repeat: no-repeat;
 	}
-	/deep/ u-form-item.formitem.submitform{
-		color: #b98b44;
-		font-size: 24rpx;
+	/deep/ .card_number .u-input__input{
+		background-image: url(../../static/icon-change1.png) !important;
+	}
+	/deep/ .password .u-input__input{
+		background-image: url(../../static/icon-change2.png) !important;
+	}
+	/deep/ .u-btn{
+		color: #b98b44 !important;
+		font-size: 24rpx !important;
 		font-weight: bold;
 		padding: 0;
+		height: 74rpx !important;
+		width: 100%;
+		line-height: 74rpx !important;
+		border-radius: 50rpx;
+		background-color: #f4f3f2 !important;
 	}
-	/deep/ u-form-item.formitem.submitform::after{
+	/deep/ .u-btn::after{
 		display: none;
 	}
 </style>