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

<template>
	<view class="page-container">
		<u-nav-bar title="本人成绩" ></u-nav-bar>
		<view class="u-bg"/>
		<view class="main-content">
			<view class="des">
				<view style="margin-bottom: 12rpx;">您的成绩绩点 {{myGrades.avgScore.toFixed(2) || '--'}} 已超越了</view>
				<view class="">
					<text class="value">{{myGrades.avgScoreMaxRank || '--'}}</text> 位同学
				</view>
			</view>
			<view class="statistics-item u-flex">
				<view class="name-grade">
					<view class="name">
						{{myGrades.studentName}}
					</view>
					<view class="grade">
						<!-- {{myGrades.genderId || '--'}} {{myGrades.majorName || '--'}} {{myGrades.gradeName}} -->
						{{myGrades.gradeName || '--'}} 
					</view>
				</view>
				<view class="avg-score">
					平均绩点：<text class="value">{{myGrades.avgScore.toFixed(2)}}</text>
				</view>

				<view class="icon-container u-flex-center">
					<view class="name">
						{{ Math.min(myGrades.avgScoreRank, myGrades.avgScoreMaxRank) }}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myGrades: {},
			}
		},
		mounted() {
		
			this.init()
		},
		methods: {
			async init() {
				uni.showLoading({
					title: '加载中'
				});
				this.$ajax.post('/shunt/score').then(res => {
					this.myGrades = res.data || {}
				}).catch(error => {
					this.myGrades = {}
				}).finally(() => {
					uni.hideLoading();
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	$bg-height: 560rpx;
	.page-container {
		.u-bg {
			height: $bg-height;
			background: url('/static/my_grades_bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-origin: content-box;
		}
		.main-content {
			padding: 0 32rpx;
		}
		
		.des {
			margin-top: $bg-height - 112rpx - 230rpx - $u-nav-bar-height;
			height: 112rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			.value {
				font-weight: bold;
				font-size: 64rpx;
				margin-right: 16rpx;
			}
		}

		.statistics-item {
			height: 230rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 22px 0px rgba(232, 237, 251, 0.8);
			border-radius: 16px;
			padding: 20rpx 20rpx 20rpx 126rpx;
			position: relative;
			transform: translateY(50%);

			.name-grade {
				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 40rpx;
				}

				.grade {
					font-size: 24rpx;

					font-weight: bold;
					color: #A3ABBF;
				}
			}

			.avg-score {

				font-size: 28rpx;

				font-weight: 400;
				color: #A3ABBF;

				.value {
					font-weight: bold;
					color: #ED6E4E;
				}
			}
			.icon-container {
				position: absolute;
				top: 1rpx;
				left: 20rpx;
				width: 74rpx;
				height: 85rpx;
				background: url('/static/achievement_label.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-origin: content-box;

				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;

			}
		}

	}
</style>