zhxy-desk/components/studentInfo/teacher.vue

<template>
	<view class="student">
		<view class="student-title">
			<view class="student-title-left">
				<view class="student-title-left-img">
					<image @click="portrait" style="width: 100%;height: 100%;" src="@/static/image/male.png" mode=""></image>
				</view>
				<view class="student-title-left-text">
					<view class="student-title-left-text-name">
						<view class="student-title-left-text-name-text">
							{{info.name}}
						</view>
						<!-- <view class="student-title-left-text-name-color">

						</view>
						<view class="student-title-left-text-name-status">
							在校
						</view> -->
					</view>
					<view class="student-title-left-text-school">
						{{info.school_name}}
					</view>
				</view>
			</view>
			<view @click="goHome" class="student-title-right">
				<image style="width: 24rpx;height: 24rpx;margin-right: 10rpx;" src="@/static/image/cut.png" mode="">
				</image>
				切换班级
			</view>
		</view>
		<view class="student-bottom">
			<view v-for="(item,index) in list" :key="index" class="student-bottom-item"
				style="`border:${index== list.length-1 ?0:'' }`">
				<view class="student-bottom-top">
					{{info[item.key]}}
				</view>
				<view class="student-bottom-bottom">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				list: [{
					name: '学生总数',
					key: 'student_total',

				}, {
					name: '在校学生',
					key: 'student_at',
				}, {
					name: '离校学生 ',
					key: 'student_excuse',
				}, {
					name: '请假学生 ',
					key: 'student_leave',
				}]
			}

		},

		methods: {
			goHome() {
				this.$emit('cutClass')
			},
			portrait(){
				uni.navigateTo({
					url:'/pages/PortraitTeacher/PortraitTeacher'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.student {
		width: 100%;
		height: 100%;
		padding: 32rpx;
		box-sizing: border-box;

		.student-title {
			display: flex;
			justify-content: space-between;

			.student-title-left {
				display: flex;

				.student-title-left-img {
					width: 94rpx;
					height: 94rpx;
					margin-right: 24rpx;
				}

				.student-title-left-text {
					font-size: 32rpx;
					color: #333;

					.student-title-left-text-school {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}

					.student-title-left-text-name {
						display: flex;
						align-items: center;

						.student-title-left-text-name-status {
							color: #05CCA1;

						}

						.student-title-left-text-name-color {
							width: 22rpx;
							height: 22rpx;
							background-color: #05CCA1;
							border-radius: 50%;
							margin: 0 12rpx;
						}
					}
				}

			}

			.student-title-right {

				font-size: 24rpx;
				color: #999;
			}

		}

		.student-bottom {
			width: 100%;
			margin-top: 58rpx;
			display: flex;
			justify-content: space-between;

			.student-bottom-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-right: 0.33px solid #e5e5e5;

				.student-bottom-top {
					font-size: 28rpx;
					color: #333;
				}

				.student-bottom-bottom {
					color: #999;
					font-size: 24rpx;
				}
			}

			.student-bottom-item:nth-child(4) {
				border: 0;

			}

		}

	}
</style>