PunchSettle-MiniProgram/pages/userInfo/userInfo.vue

<template>
	<main-layout>
		<template>
			<view class="header">
				<view class="avatar">
					<uni-icons type="person" size="70"></uni-icons>	
				</view>
				<span class="nickname">昵称</span>
			</view>
			<view class="func-wrap">
				<view class="func">
					<uni-icons type="person" size="30"></uni-icons>	
					<span class="name">头像</span>
					<span class="right-icon">
						<uni-icons type="right" size="30"></uni-icons>	
					</span>
				</view>
				<view class="func">
					<uni-icons type="person" size="30"></uni-icons>	
					<span class="name">昵称</span>
					<span class="right-icon">
						<uni-icons type="right" size="30"></uni-icons>	
					</span>	
				</view>
			</view>
			<view class="func-wrap">
				<view class="func">
					<uni-icons type="person" size="30"></uni-icons>	
					<span class="name">奖励结算记录</span>
					<span class="right-icon">
						<uni-icons type="right" size="30"></uni-icons>	
					</span>
				</view>
				<view class="func">
					<uni-icons type="person" size="30"></uni-icons>
					<span class="name">奖励领取记录</span>
					<span class="right-icon">
						<uni-icons type="right" size="30"></uni-icons>	
					</span>
				</view>
				<view class="func">
					<uni-icons type="person" size="30"></uni-icons>
					<span class="name">刮刮乐投入与中奖记录</span>
					<span class="right-icon">
						<uni-icons type="right" size="30"></uni-icons>	
					</span>
				</view>
			</view>
			<view class="cancel-btn">注销</view>
		</template>
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import { getSafeArea } from '@/utils/system.js';
	
	/**
	 * 安全区
	 */
	const safeArea = ref({});
	
	onLoad(() => {
		safeArea.value = getSafeArea();
	});
	
	const logout = () => {
		uni.removeStorageSync("token");
		uni.reLaunch({
			url: "/pages/index/index"
		});
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		margin-top: 100rpx;
		
		.avatar {
			width: 180rpx;
			height: 180rpx;
			opacity: 1;
			background: #FFFFFF;
			border-radius: 50%;
			
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.nickname {
			margin-top: 16rpx;
			font-size: 36rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 52.13rpx;
			color: #000000;
		}
	}
	
	.func-wrap {
		border-radius: 24rpx;
		background: #FFFFFF;
		padding: 16rpx 24rpx;
		margin-top: 24rpx;
		position: relative;
		
		.func {
			display: flex;
			justify-content: left;
			align-items: center;
			
			.name {
				font-size: 26rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 37.65rpx;
				color: #000000;
			}
			
			.right-icon {
				position: absolute;
				right: 0rpx;
			}
		}
	}
	
	.cancel-btn {
		margin-top: 24rpx;
		height: 54rpx;
		opacity: 1;
		border-radius: 24rpx;
		background: #F2607A;
		
		/** 文本1 */
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 37.65rpx;
		color: #FFFFFF;
		
		display: flex;
		justify-content: center;
		align-content: center;
	}
</style>