h5-tiyu/pages/login/changePasswoed.vue

<template>
	<view class="page">
		<view class="title">密码设置</view>
		<view class="input u-flex" style="margin-top: 28rpx;">
			<u-input placeholder-style='font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #222222;opacity: 0.5;' placeholder='密码6-20位，须包含数字、字母' v-model="phone" type="text" :border="false"
				:clearable='false' />
		</view>
		<view class="input u-flex">
			<u-input placeholder-style='font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #222222;opacity: 0.5;' placeholder='再次确认密码' v-model="code" type="text" :border="false" :clearable='false' />
			<view class="code">
				获取验证码
			</view>
		</view>
		<view class="button" @click="">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				phone: ''
			};
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.page {
		padding: 52rpx 36rpx 0;
		border-top: 2rpx solid #979797;
	}

	.code {
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #06A971;
	}

	.button {
		width: 678rpx;
		height: 84rpx;
		background: #06A971;
		border-radius: 8rpx;
		opacity: 0.5;
		text-align: center;
		margin-top: 46rpx;
		line-height: 84rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.title {
		height: 74rpx;
		font-size: 52rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 74rpx;
	}

	.input {
		height: 122rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.14);
	}
</style>