menber-center/pages/setting/setting.vue

<template>
	<view class="container">
		<view class="menu-item-box" @click="onUpdateTel" v-if="false">
			<view class="lebal-box">
				手机号 123xxxxxx4567
			</view>
			<view class="suffix-box">
				<view class="desc">
					更换绑定手机号
				</view>
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="menu-item-box" @click="onUpdatePwd" v-if="false">
			<view class="lebal-box">
				修改密码
			</view>
			<view class="suffix-box">
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="menu-item-box" @click="onInfoExport" v-if="false">
			<view class="lebal-box">
				个人信息副本导出
			</view>
			<view class="suffix-box">
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="menu-item-box" @click="onRemoveInfo">
			<view class="lebal-box">
				删除个人信息
			</view>
			<view class="suffix-box">
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
		<view class="menu-item-box" @click="onCancelAccount">
			<view class="lebal-box">
				账号注销
			</view>
			<view class="suffix-box">
				<view class="iconfont icon-chevron-right"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	function onUpdateTel() {
		uni.navigateTo({
			url: '/pages/setting/updateTel/updateTel'
		})
	}
	function onUpdatePwd() {
		uni.navigateTo({
			url: '/pages/setting/updatePwd/updatePwd'
		})
	}
	function onInfoExport() {
		uni.navigateTo({
			url: '/pages/setting/infoExport/infoExport'
		})
	}
	function onRemoveInfo() {
		uni.navigateTo({
			url: '/pages/setting/removeInfo/removeInfo'
		})
	}
	function onCancelAccount() {
		uni.navigateTo({
			url: '/pages/setting/cancelAccount/cancelAccount'
		})
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	width: 100vw;
	padding: 0 20rpx;
	padding-top: 20rpx;
	background-color: $uni-bg-color;
	.menu-item-box {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin-bottom: 50rpx;
		border: 1px solid #E3E3E3;
		border-radius: 10px;
		.lebal-box {
			width: 60%;
		}
		.suffix-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			text-align: end;
		}
		&:active {
			background: #e0e0e0; /* 按下的背景色 */
		}
	}
}
</style>