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

master
DESKTOP-SORBLEM\xuyay 2 years ago
parent b9d04de5d8
commit e6cdc4ac24

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