wz-uniapp/pages/military/profile/profile.vue

<template>
	<view class="profile-page">
		<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
			<view class="safe-top"></view>
			<view class="page-body">
			<text class="page-title">个人主页</text>

			<view class="user-area" @click="onTap('授权登录')">
				<view class="avatar-wrap">
					<view class="avatar">
						<uni-icons type="person-filled" color="#8ca0be" :size="38" />
					</view>
					<view class="avatar-badge">绵若 军教</view>
				</view>
				<text class="login-tip">点击授权登陆</text>
			</view>

			<view class="vip-card">
				<view>
					<text class="vip-title">VIP 会员暂未开通</text>
					<text class="vip-desc">请您开通会员才可以畅享内容</text>
				</view>
				<view class="vip-btn" @click="onTap('兑换会员')">兑换会员</view>
			</view>

			<view class="menu-list">
				<view v-for="item in menus" :key="item.title" class="menu-row" @click="onTap(item.title)">
					<view class="menu-left">
						<view class="menu-icon" :style="{ backgroundColor: item.bg }">
							<uni-icons :type="item.icon" color="#ffffff" :size="16" />
						</view>
						<text class="menu-title">{{ item.title }}</text>
					</view>
					<uni-icons type="arrow-right" color="#9aa2af" :size="14" />
				</view>
			</view>

				<view class="bottom-space"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			enterActive: false,
			menus: [
				{ title: '已购买课程', icon: 'folder-add-filled', bg: '#3fa567' },
				{ title: '企业入住', icon: 'shop-filled', bg: '#3e8be4' },
				{ title: '在线客服', icon: 'chatbubble-filled', bg: '#8a5ae0' },
				{ title: '商务合作', icon: 'gift-filled', bg: '#de5a5a' },
				{ title: '系统设置', icon: 'gear-filled', bg: '#4da65a' }
			]
		};
	},
	onShow() {
		this.playEnter();
	},
	methods: {
		playEnter() {
			this.enterActive = false;
			setTimeout(() => {
				this.enterActive = true;
			}, 20);
		},
		onTap(label) {
			uni.showToast({
				title: `${label} 可点击`,
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
.profile-page {
	min-height: 100vh;
	background: #f7f8fb;
}

.page-content {
	min-height: 100vh;
}

.page-fade {
	opacity: 0;
	transform: translateY(8rpx);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-fade.enter-active {
	opacity: 1;
	transform: translateY(0);
}

.safe-top {
	height: calc(var(--status-bar-height) + 16rpx);
}

.page-body {
	padding: 0 24rpx;
}

.page-title {
	display: block;
	text-align: center;
	font-size: 38rpx;
	font-weight: 700;
	color: #28364d;
}

.user-area {
	margin-top: 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar-wrap {
	position: relative;
}

.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	background: #edf1f7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatar-badge {
	position: absolute;
	right: -6rpx;
	bottom: 0;
	height: 42rpx;
	padding: 0 14rpx;
	border-radius: 21rpx;
	font-size: 20rpx;
	color: #ffffff;
	background: #df4f4f;
	display: flex;
	align-items: center;
}

.login-tip {
	margin-top: 16rpx;
	font-size: 30rpx;
	font-weight: 700;
	color: #2c3950;
}

.vip-card {
	margin-top: 28rpx;
	padding: 24rpx;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #ffe8cc 0%, #ffd7a8 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vip-title {
	display: block;
	font-size: 30rpx;
	font-weight: 700;
	color: #6d4218;
}

.vip-desc {
	display: block;
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #8f6238;
}

.vip-btn {
	height: 62rpx;
	padding: 0 22rpx;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #ffffff;
	font-weight: 600;
	background: #ff8a33;
	display: flex;
	align-items: center;
}

.menu-list {
	margin-top: 22rpx;
	padding: 8rpx 20rpx;
	border-radius: 22rpx;
	background: #ffffff;
	box-shadow: 0 8rpx 20rpx rgba(40, 52, 79, 0.08);
}

.menu-row {
	height: 94rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eef2f7;
}

.menu-row:last-child {
	border-bottom: none;
}

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

.menu-icon {
	width: 46rpx;
	height: 46rpx;
	border-radius: 14rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-title {
	margin-left: 14rpx;
	font-size: 28rpx;
	color: #2d3a4f;
}

.bottom-space {
	height: 180rpx;
}
</style>