<!-- 我的成绩 -->
<template>
	<view class="achievement">
		<!-- 学生信息 -->
		<view class="userinfo">
			<text>平均学分绩班级排名：{{credit}}</text>
			<text>学年综合素质测评班级排名：{{ranking}}</text>
			<text>学年：{{year}}</text>
		</view>
		<!-- 成绩信息 -->
		<view class="score">
			<view class="scoreList" v-for="(item,index) in scoreList" :key="item.index">
				<text class="title"> {{item.title}}</text>
				<text>成绩:{{item.achievement}}</text>
				<text>是否通过:{{item.ture}}</text>
				<text>学年:{{item.studyear}}</text>

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

<script>
	export default {
		data() {
			return {
				// 学分
				credit: "1",
				ranking: "1",
				year: "2023-2024",
				scoreList: [{
					title: "习近平新时代中国特色社会主义思想概论",
					achievement:"优秀",
					ture: "是",
					studyear: "2022-2023-1 学期"
				},
				{
					title: "WINFORM应用技术项目实战",
					achievement:"良好",
					ture: "是",
					studyear: "2022-2023-1 学期"
				}
				
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.achievement {

		.userinfo {

			padding: 10rpx 40rpx;
			// width: 100%;
			height: 160rpx;
			background-color: #3388CC;
			display: flex;
			flex-direction: column;
			color: white;

			text {
				/* 强制文本内部换行 */
				white-space: pre-wrap;
				margin-bottom: 10rpx;
			}
		}

		.score {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			.scoreList {
				display: flex;
				flex-direction: column;
				width: 90%;
				height: 240rpx;
				border-bottom: 1px solid #D8D8D8;

				.title {
					font-size: 35rpx;
					font-weight: bold;
					color: black;
				}

				text {
					margin-top: 10rpx;
					color: #9C9C9C;
				}
			}
		}
	}
</style>