pbl-student/src/components/score.vue

<template>
	<div class="pb_content">
		<div class="pb_content_body">
			<div class="body_student">
				<div class="student_head">
					<div class="box_course">
						<div class="wheel"><img src="../assets/sp2.png" alt="" /></div>
						<div style="font-size: 18px; margin: 15px;">
							鱼类的起源2.0，实践课程
						</div>
					</div>
				</div>
				<div class="student_body">
					<div style="padding: 20px 30px">
						个人中心 > 我的作品 > 鱼类的起源2.0，实践课程
					</div>
					<div class="project_box">
						<div class="star"><img src="../assets/starts.png" alt="" /></div>
					</div>
				</div>
				<div class="student_body1">
					<div style="padding: 20px 30px">评论（2）</div>
					<div class="two_ete_box">
						<div class="other_evaluate">
							<div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
							<div class="right_ete">
								<div class="first_other_ete">
									<div class="ete_name">樟子松</div>
									<div class="ete_time">2021/2/5</div>
								</div>
								<div class="ete_content">
									作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不辜负老师的期望。
								</div>
							</div>
						</div>
						<div class="other_evaluate">
							<div class="evaluate"><img src="../assets/tx.png" alt="" /></div>
							<div class="right_ete">
								<div class="first_other_ete">
									<div class="ete_name">灰色与青</div>
									<div class="ete_time">2021/2/5</div>
								</div>
								<div class="ete_content">作品已经看完了，好看！！</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {},
		created() {},
	};
</script>

<style scoped>
	.body_student {
		margin: 0px auto;
		width: 80%;
		height: 100%;
	}
	.student_head {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		height: 30%;
	}
	.wheel > img,
	.project > img,
	.star > img,
	.evaluate > img {
		width: 100%;
		height: 100%;
	}
	.box_course {
		display: flex;
		flex-direction: column;
	}
	.wheel {
		width: 100%;
	}
	.right_box {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
		justify-content: space-around;
	}
	.right_box_title {
		font-size: 23px;
	}
	.people {
		display: flex;
	}
	.student_body,
	.student_body1 {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		height: 100%;
	}
	.student_body1 {
		height: 500px !important;
		overflow: auto !important;
	}
	.project {
		width: 165px;
	}
	.project_box {
		margin: 0 0 10px 30px;
	}
	.star {
		width: 100%;
	}
	.evaluate {
		width: auto;
		height: 65px;
		border-radius: 100%;
		overflow: hidden;
	}
	.two_ete_box {
		padding: 20px 0 5px 30px;
		border-bottom: 1px solid #999;
	}
	.other_evaluate {
		display: flex;
		margin-bottom: 25px;
	}
	.right_ete {
		margin-left: 15px;
	}
	.first_other_ete {
		display: flex;
	}
	.ete_time {
		margin-left: 10px;
		line-height: 21px;
		font-size: 13px;
		color: #999;
		margin-bottom: 10px;
	}
	.ete_content {
		height: auto;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		width: 500px;
		line-height: 20px;
		font-size: 14px;
	}
</style>