zhywpt-sp/subpackage/personal-center/forgetPassword.vue

<template>
	<view class="container">
		<view class="middle">
			<w-cell title="注册手机号" isLine isChance>
				<input class="weui-input" placeholder="请输入手机号" type="number" maxlength="11" data-prop="phone"
					bindinput="changeInput"></input>
			</w-cell>
			<w-cell title="验证码" isLine isChance>
				<view class="codeview">
					<input class="weui-input" placeholder="请输入验证码" data-prop="verifyCode" bindinput="changeInput"
						type="number" maxlength="6"></input>
					<view class="btn" wx:if="{{time<61}}">{{time}}s后重试</view>
					<view class="btn" wx:else bindtap="getVerifyCode">获取验证码</view>
				</view>
			</w-cell>
			<w-cell title="新密码" isLine isChance>
				<input class="weui-input" placeholder="请输入新密码" data-prop="newPassWord" bindinput="changeInput" password
					type="text"></input>
			</w-cell>
			<w-cell title="确认密码" isLine isChance>
				<input class="weui-input" placeholder="请输入确认密码" password type="text" data-prop="password"
					bindinput="changeInput"></input>
			</w-cell>
			<view class="red-text">新密码长度至少为8位，由数字和字母组成</view>
		</view>
		<view class="up_btn">
			<button aria-disabled="true" bindtap="submitfn">确定</button>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.codeview {
		display: flex;
		width: 100%;
		justify-content: left;
		align-items: center;
	}

	.codeview>.weui-input {
		width: calc(100% - 220rpx);
	}

	.codeview>.btn {
		width: 80px;
		height: 60rpx;
		background-color: #4CD95F;
		text-align: center;
		border-radius: 5px;
		font-size: 12px;
		color: #fff;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	/*提交按钮样式*/
	.up_btn {
		width: 85%;
		height: 100rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	.up_btn button {
		width: 100%;
		color: white;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		background: linear-gradient(to right,#13E7C1,#43A1E0);
		outline: none;
	}

	.red-text {
		padding: 30rpx;
		color: red;
	}
</style>