zhxy-desk/components/stuInfo.vue

<template>
	<view class="stu">
		<view class="stu-top">
			<view class="stu-top-left">
				<view class="stu-top-left-img">
					<image style="width: 100%;height: 100%;border-radius: 50%;" :src="info.student_photo == ''? '@/static/image/female.png':info.student_photo" mode=""></image>
				</view>
				<view class="stu-top-left-text">
					<view class="stu-top-left-text-title">
						{{info.student_name}}
					</view>
					<view class="stu-top-left-text-value">
						{{info.student_number}}
					</view>
					<view class="stu-top-left-text-value">
					{{info.school_name}}{{info.class_name}}
					</view>
				</view>
			</view>
			<!-- <view @click="goEnter" class="stu-top-right">
				<uni-icons color='#fff' type="compose" size="18"></uni-icons> 编辑信息
			</view> -->
		</view>
		<view v-for="(item,index) in info.parents" :key="index" class="stu-number">
			<uni-icons type="phone-filled" color='#fff' size="16"></uni-icons>
			<view class="stu-number-number">
				{{item.parent_phone}}
			</view>
			<view class="stu-number-name">
				家长
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "stuInfo",
		props:{
			info:{
				type:Object,
				default:() => {}
			}
		},
		data() {
			return {

			};
		},
		methods:{
			goEnter(){
				uni.navigateTo({
					url: '/pages/stuEnter/stuEnter'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.stu {
		padding: 32rpx;
		color: #fff;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;

		.stu-top {
			display: flex;
          margin-bottom: 30rpx;
			.stu-top-left {
				flex: 1;
				display: flex;

				.stu-top-left-text {
					color: #fff;
					pointer-events: all;
					z-index: 11;

					.stu-top-left-text-title {
						font-size: 32rpx;
					}

					.stu-top-left-text-value {
						font-size: 24rpx;
					}
				}
			}
		}

		.stu-top-right {
			pointer-events: all;
			z-index: 11;
			line-height: 30rpx;
		}

		.stu-top-left-img {
			width: 128rpx;
			height: 128rpx;
			margin-right: 30rpx;
		}

		.stu-number {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}

		.stu-number-number {
			pointer-events: all;
			z-index: 11;
			margin: 0 10rpx;
		}

		.stu-number-name {
			pointer-events: all;
			z-index: 11;
			margin-right: 10rpx;
		}
	}
</style>