subject_gxj/xj_project_app/pages/mine/change-account/index.vue

<template>
	<view class="container">
		<view class="back-btn" @click="backToBefore()">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto"></u-icon>

			<text class="back-text">切换账号</text>
		</view>

		<view class="account-content">
			<view class="account-item" @click="goToPage('/pages/mine/change-account/index')"
				v-for="(item,index) in accountList" :key="index">
				<view class="avatar">
					<image src="@/static/images/profile.jpg"></image>
				</view>
				<view class="account-item-content">{{item.name}}</view>

				<view v-if="item.active" class="account-item-active">
					<u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
				</view>

				<view v-else class="account-item-icon"></view>
			</view>

			<view class="account-item">
				<view class="add-account-icon">
					<u-icon name="plus" color="#D8D8D8" size="14" customStyle="margin:0 auto"></u-icon>
				</view>

				<view class="add-account-description">
					添加或注册新账号
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	function backToBefore() {
		uni.navigateBack({})
	};

	let accountList = ref([{
		name: '17788889999',
		active: true
	}, {
		name: '13344445555',
		active: false
	}])
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #EAF0FA;
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #1869F6 0%, #EAF0FA 64%, #EAF0FA 100%);

		.back-btn {
			position: absolute;
			top: 8%;
			left: 4%;
			display: flex;
			font-size: 40rpx;
			font-weight: 500;
			color: #FFF;

			.back-text {
				margin-left: 28rpx;
			}
		}
	}

	.account-content {
		position: absolute;
		top: 226rpx;
		left: 4%;
		width: 92%;
		min-height: 120rpx;
		padding: 19rpx 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 40rpx;
	}

	.account-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #9E9E9E;

		.avatar {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			height: 100%;
			line-height: 80rpx;
			text-align: center;

			image {
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
			}
		}

		.account-item-content {
			flex: 6;
			text-align: right;
			font-size: 32rpx;
			color: #343437;
		}

		.account-item-icon {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;
			border-radius: 50%;
			border: 2rpx solid #343437;
		}

		.account-item-active {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
			border-radius: 50%;
			background: #1869F6;
		}

		.add-account-icon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 52rpx;
			height: 52rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #EDF0F4;
			border-radius: 50%;
		}

		.add-account-description {
			text-align: right;
			font-size: 28rpx;
		}
	}
</style>