dykj-outsource-12123/pages/my/components/install/index.vue

<template>
	<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
		<!-- 导航栏 -->
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
			<view class="van-nav-bar__content">
				<view class="page-icon" @click="gotoBack">
					<uni-icons color="#fff" type="back" size="26"></uni-icons>
					<view>返回</view>
				</view>
				<view class="page-navbar">设置</view>
			</view>
		</view>
		<!-- 功能页 -->
		<view style="background-color: #f5f9fa; height: 94vh;">
			<view style="height: 20rpx;" />
			<view v-for="item in serve" :key="item.id" class="userlist">
				<view :class="{ active: item.id === 5 }">
					<view class="userlist-box">
						<view style="margin: 0 0.8rem">
							<image :src="item.icon"
								:style="{ width: item.id == 0 ? '1.25rem' : '1.45rem', height: '1.45rem', transform: 'translateY(0.2rem)' }">
							</image>
						</view>
						<view class="userlist-box-text"
							:style="{ 'border-bottom': item.id == 5 || item.id == 4 ? 'node' : '1rpx solid #eee' }">
							<view :style="{ transform: item.id == 0 ? 'translateX(0.2rem)' : '' }">{{ item.text }}</view>
							<view style="margin-right: 0.7rem"><uni-icons color="#c1c1c3" type="forward" size="18"></uni-icons></view>
						</view>
					</view>
				</view>
			</view>
			<view class="buttom">退出登录</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	const serve = ref([{
			text: '登录密码修改',
			icon: '../../../../static/wodeshezhi/1.png',
			id: 0
		},
		{
			text: '手势密码修改',
			icon: '../../../../static/wodeshezhi/2.png',
			id: 1
		},
		{
			text: '删除帐号',
			icon: '../../../../static/wodeshezhi/3.png',
			id: 2
		},
		{
			text: '帐号迁移',
			icon: '../../../../static/wodeshezhi/4.png',

			id: 3
		},
		{
			text: '大字版',
			icon: '../../../../static/wodeshezhi/5.png',

			id: 4
		},
		{
			text: '分享12123给好友',
			icon: '../../../../static/wodeshezhi/6.png',
			id: 5
		},
		{
			text: '清理缓存',
			icon: '../../../../static/wodeshezhi/7.png',
			id: 6
		},
		{
			text: '关于',
			icon: '../../../../static/wodeshezhi/8.png',
			id: 7
		}
	]);
	const gotoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style lang="scss" scoped>
	.van-nav-bar__content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 3rem;
		background-color: #2c66a9;
		color: #fff;
		letter-spacing: 1.5px;
		position: relative;

		.page-icon {
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
		}

		.page-navbar {
			font-size: 1.1rem;
		}
	}

	.userlist {
		letter-spacing: 1.5px;
		font-weight: 600;

		.userlist-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			.userlist-box-text {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 96%;
				padding: 1rem 0;
			}
		}
	}

	.buttom {
		width: 90%;
		margin: 2rem auto 0rem;
		padding: 0.7rem 0rem;
		background-color: #ff6769;
		color: #fff;
		border-radius: 0.5rem;
		text-align: center;
	}

	.active {
		padding: 0.2rem 0rem;
		margin: 0.8rem 0rem;
		background-color: #f5f9fa;
	}
</style>