teaching-uniapp/pages/login_three/login_three.vue

<template>
	<view class="login_three">
		<statusBar :item="navBarData"></statusBar>
		<view class="inpBlock">
			<view class="inps">
				<input class="inp" type="text" placeholder="输入验证码">
				<button class="yzm">获取验证码</button>
			</view>
			<view class="inpTip">
				验证码已发送到您的手机
				<text>17739460336</text>
			</view>
			<view class="inps">
				<input class="inp" type="text" placeholder="输入新密码">
				<view class="icon">
					<uni-icons type="eye" size="25"></uni-icons>
				</view>
			</view>
			<view class="inps">
				<input class="inp" type="text" placeholder="输入新密码">
				<view class="icon">
					<uni-icons type="eye-slash" size="25" color="#bdbdbd"></uni-icons>
				</view>
			</view>
		</view>
		<button class="btn">修改并登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData:{
					title:'找回密码',
					btn:1  //判断是否显示返回按钮
				},
			};
		}
	}
</script>

<style lang="scss">
	.login_three{
		height: 100vh;
		background-color: #ffffff;
		.inpBlock{
			width: 700rpx;
			padding-top: 100px;
			margin: auto;
			.inpTip{
				font-size: 14px;
				width: 100%;
				color: #666666;
				padding: 0 45rpx;
				margin-bottom: 10px;
				text{
					color: #73aff4;
				}
			}
			.inps{
				width: 100%;
				padding: 0 30rpx;
				margin-bottom: 20px;
				position: relative;
				// font-size: 25px;
				.inp{
					padding: 10rpx 15rpx;
					border-bottom: 1px #ccc solid;
				}
				.yzm{
					position: absolute;
					bottom: 10rpx;
					right: 20rpx;
					font-size: 12px;
					background-color: #7eb5f6;
					color: #fff;
				}
				.icon{
					position: absolute;
					right: 10px;
					top: 5px;
				}
			}
			.inps:nth-child(1){
				margin-bottom: 10px;
			}
		}
		.btn{
			background-color: #999999;
			color: #ffffff;
			border-radius: 30px;
			margin: 40rpx 55rpx;
			font-size: 16px;
			margin-top: 50px;
		}
	}
</style>