school-shunt-app/pages/my/my.vue

<template>
	<view class="page-container">
		<view class="bg" />
		<view class="main-content">
			<image :src="userInfo.avatar" class="avatar" mode=""></image>
			<view class="studentName">
				{{userInfo.studentName}}
			</view>
			<view class="studentNO">
				学号：{{userInfo.studentNO}}
			</view>
			<view class="majorName">
				班级：{{userInfo.majorName}} {{userInfo.gradeName}}
			</view>
			<u-panel class="list-container">
				<u-des-row label="个人信息" forward @click="toUserInfo">
					<image slot="left" style="width: 44rpx;height: 44rpx;margin-right: 40rpx;"
						src="/static/menber_info_icon.png" mode="widthFix"></image>
				</u-des-row>
				<u-des-row label="问题反馈" forward @click="toProblemFeedback">
					<div slot="left" style="width: 44rpx;height: 44rpx;margin-right: 40rpx;"
						src="/static/menber_info_icon.png" mode="widthFix"></div>
				</u-des-row>
			</u-panel>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			})
		},
		methods: {
			toUserInfo() {
				uni.navigateTo({
					url: '/pages/my/user-info/user-info'
				})
			},
			toProblemFeedback() {
				uni.navigateTo({
					url: '/pages/my/problem-feedback/problem-feedback'
				})
			},
		},
		onShow: function() {
			 this.$store.dispatch('user/updateUserInfo')
		},
	}
</script>
<style lang="scss" scoped>
	.page-container {
		.bg {
			width: 100%;
			height: 885rpx;
			background: url('/static/bg_icon.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-origin: content-box;
			position: absolute;
			top: 0;
			bottom: 0;
			z-index: -1;
		}

		.main-content {
			padding: 182rpx 0 0 0;
			text-align: center;

			.avatar {
				width: 149rpx;
				height: 149rpx;
				background: white;
				border-radius: 100%;
				margin-bottom: 50rpx;
			}

			.studentName {
				font-size: 49rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 40rpx;
			}

			.studentNO,
			.majorName {
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 40rpx;
			}

			.list-container {
				position: absolute;
				top: 828rpx;
				left: 0;
				right: 0;
				bottom: 0;
				background: white;
				border-radius: 26rpx 26rpx 0 0;
				padding-top: 48rpx;
				margin: 0;
			}
		}


	}
</style>