KindergartenAppletUI/pages/index/index2.vue

<template>
	<view class="content">
		<view class="top">
			<view class="info">
				学生成绩
			</view>
			<view class="nicheng">
				<view class="tx-w">
					<view class="tx">
						<image class="tx-img" :src="yonghuwx.avatarUrl"></image>
						<view class="zx"></view>
					</view>
					<view class="studentName">姓名：张三</view>
					<view class="name">昵称：{{yonghuwx.nickName}} </view>
				</view>
			</view>
		</view>
		<view class="test">幼儿体质检测记录</view>
		<view class="score">
			
			
				<view class="itemName">弹跳</view>
				<view class="time">2022/8/16</view>
				<view class="overallScore">综合得分：89</view>
				<view class="report">查看报告</view>


			<!-- <view class="th">项目名称</view>
			<view class="th">个人成绩</view>
			<view class="th">查看报告</view> -->
		</view>
		<view class="score1">

			<view class="itemName">奔跑</view>
			<view class="time">2022/8/16</view>
			<view class="overallScore">综合得分：99</view>
			<view class="report">查看报告</view>
			<!-- <view class="th">项目名称</view>
			<view class="th">个人成绩</view>
			<view class="th">查看报告</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				yonghuwx: []
			}
		},
		onLoad() {
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// 获取用户信息				
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							that.yonghuwx = infoRes.userInfo
							console.log(that.yonghuwx)
						}
					});
				}
			});
		},
		methods: {
	
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ebeef6;
		height: 700px;
	}

	.top {
		width: 100%;
		height: 150px;
		background-color: #4486e8;
	}

	.info {
		color: #ffffff;
		text-align: center;
		margin-top: 20px;
		font-size: 18px;
	}

	.nicheng {
		width: 350px;
		height: 120px;
		background-color: #ffffff;
		position: absolute;
		margin-top: 10px;
		margin-left: 13px;
		box-shadow: 0px 1px 0px 0px #a9caf5;
		border-radius: 10px;
		
	}



	.tx-w {
		margin-top: 25px;
	}

	.tx {
		margin-left: 45px;
	}

	.tx image {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
	}

	.studentName {
		margin-top: -60px;
		margin-left: 140px;
	}

	.name {
		text-align: center;
		margin-left: 7px;
		margin-top: 5px;
	}

	.name-qm {
		margin-left: ;
		text-align: center;
		margin-top: 20upx;
		font-size: 30upx;
	}

	/* 测试成绩 */
	.test{
		width: 150px;
		height: 52px;
		line-height: 52px;
		background-color: #ffffff;
		color: #4486e8;
		border-radius: 30%;
		margin-top: 40px;
		text-align: center;
	}
	.score {
		position: absolute;
		width: 350px;
		height: 100px;
		background-color: #ffffff;
		margin-top: 250px;
		border-radius: 10px;
	}

	.score1 {
		position: absolute;
		width: 350px;
		height: 100px;
		background-color: #ffffff;
		margin-top: 360px;
		border-radius: 10px;
	}

	/*.th1 {
		text-align: center;
		height: 30px;
		line-height: 50px;
		padding-bottom: 15px;
		border-bottom: #eeecec 1px solid;
		 padding-left: 30px; 
	}*/

	.itemName {
		height: 50px;
		width: 50%;
		border-right: #eeecec 1px solid;
		line-height: 50px;
		/* padding-bottom: 15px; */
		border-bottom: #eeecec 1px solid;
		text-align: center;
	}

	.time {
		height: 50px;
		width: 50%;
		line-height: 50px;
		/* padding-bottom: 15px; */
		border-bottom: #eeecec 1px solid;
		margin-top: -51px;
		margin-left: 172px;
		text-align: center;
	}

	.overallScore {
		height: 50px;
		width: 50%;
		border-right: #eeecec 1px solid;
		line-height: 50px;
		/* padding-bottom: 15px; */
		/* border-bottom: #eeecec 1px solid; */
		text-align: center;
	}

	.report {
		height: 50px;
		width: 50%;
		line-height: 50px;
		/* padding-bottom: 15px; */
		/* border-bottom: #eeecec 1px solid; */
		margin-top: -50px;
		margin-left: 172px;
		text-align: center;
	}

	.th {
		height: 30px;
		line-height: 50px;
		padding-bottom: 15px;
		border-bottom: #eeecec 1px solid;
		padding-left: 30px;

	}
</style>