OnlineEducation-student-front/src/views/student/user/index.vue

<template>
	<a-row :gutter="10">
		<a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="mb-3">
			<a-card :bordered="false">
				<div class="account-center-avatarHolder">
					<div class="avatar">
						<img :src="userInfo.avatar" />
					</div>
					<div class="username">{{ userInfo.name }}</div>
					<div class="bio">{{ userInfo.nickname }}</div>
				</div>
				<div class="account-center-detail">
					<p>{{ userInfo.fallDue }}</p>
					<p>{{ userInfo.gradesIdName }}</p>
					<p>{{ userInfo.majorIdName }}</p>
				</div>
			</a-card>
		</a-col>
		<a-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17">
			<a-card>
				<a-descriptions :title="`${userInfo.name}个人信息`" :column="1">
					<a-descriptions-item label="性别">{{ userInfo.gender }}</a-descriptions-item>
					<a-descriptions-item label="邮箱">{{ userInfo.email }}</a-descriptions-item>
					<a-descriptions-item label="手机">{{ userInfo.phone }}</a-descriptions-item>
					<a-descriptions-item label="生日">{{ userInfo.birthday }}</a-descriptions-item>
					<a-descriptions-item label="学号">{{ userInfo.studentNum }}</a-descriptions-item>
					<a-descriptions-item label="入学时间">{{ userInfo.fallDue }}</a-descriptions-item>
					<a-descriptions-item label="班级">{{ userInfo.gradesIdName }}</a-descriptions-item>
					<a-descriptions-item label="专业">{{ userInfo.majorIdName }}</a-descriptions-item>
				</a-descriptions>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup>
	import tool from '@/utils/tool'
	const userInfo = tool.data.get('USER_INFO')
</script>

<style lang="less" scoped>
	.avatar {
		margin: 0 auto;
		width: 104px;
		height: 104px;
		margin-bottom: 20px;
		border-radius: 50%;
		overflow: hidden;
		img {
			height: 100%;
			width: 100%;
		}
	}
	.username {
		font-size: 20px;
		line-height: 28px;
		font-weight: 500;
		margin-bottom: 4px;
		text-align: center;
	}
</style>