deepChartVueApp/pages/setting/nextPwd.vue

<template>
	<view class="main">
		<view :style="{height:iSMT+'px'}"></view>

		<view style="height:1.5vh;" />

		<view class="title">
			<text class="label">确认新密码</text>
		</view>

		<view class="top">
			<view class="top-list">
				<view class="left">
					<img src="/static/my/unlock.png" />
					<input type="password" :type="pwdType" placeholder="请输入新密码" class="input" />
					<img :src="pwdType === 1 ? '/static/my/hideEye.png' : '/static/my/openEye.png'"
						@click="changeEye(1)" />
				</view>
			</view>

			<view class="top-list">
				<view class="left">
					<img src="/static/my/unlock.png" />
					<input type="password" :type="pwdType2" placeholder="再次确认" class="input" />
					<img :src="pwdType === 1 ? '/static/my/hideEye.png' : '/static/my/openEye.png'"
						@click="changeEye(2)" />
				</view>
			</view>

			<text class="tips">密码最少8位数</text>
		</view>

		<view class="bottom">
			<button class="change-btn">确认</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	const iSMT = ref(0)
	const pwdType = ref('password')
	const pwdType2 = ref('password')

	const changeEye = (type) => {
		if (type === 1) {
			pwdType.value = pwdType.value === 'password' ? 'text' : 'password'
		} else {
			pwdType2.value = pwdType2.value === 'password' ? 'text' : 'password'
		}
	}

	onMounted(() => {
		// 状态栏高度
		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
		console.log('看看高度', iSMT.value)
	})
</script>

<style>
	.title {
		height: 8.5vh;
		background-color: white;
	}

	.label {
		height: 8.5vh;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 0 60rpx;
	}

	.top {
		height: auto;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top-list {
		width: 630rpx;
		height: 7vh;
		margin: 0rpx 40rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.input {
		flex: 1;
		height: 70rpx;
		font-size: 29rpx;
		margin-left: 20rpx;
	}

	.bottom {
		height: 22vh;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.change-btn {
		height: 85rpx;
		width: 610rpx;
		padding: 0 20rpx;
		background-color: black;
		color: white;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.tips {
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
		margin-left: 60rpx;
		align-self: flex-start;
		/* 这是左对齐 */
	}
</style>