wanzai_school_app/pages/student/student.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />

		<!-- 学生信息区域 -->
		<view class="identity">学生</view>
		<view class="box">
			<img class="box_img" src="../../static/images/user-photo.png" />
			<view class="box_info">
				<view class="info_name">李商隐</view>
				<view class="info_phone">13677985689</view>
			</view>

			<view class="box_btn" @click="callPhone">呼叫</view>
		</view>

		<!-- 家长信息区域 -->
		<view class="identity">家长</view>
		<view class="box mb-50" v-for="item in familyList" :key="item.id">
			<img class="box_img" src="../../static/images/user-photo.png" />
			<view class="box_info">
				<view class="info_name">
					{{ item.name }}
					<view class="info_type">{{ item.identity }}</view>
				</view>
				<view class="info_phone">{{ item.phone }}</view>
			</view>

			<view class="box_btn" @click="callPhone">呼叫</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const familyList = ref([
	{
		id: 1,
		url: '',
		name: '李白',
		phone: '13677985689',
		identity: '父亲'
	},
	{
		id: 2,
		url: '',
		name: '李白白',
		phone: '13677985689',
		identity: '母亲'
	},
	{
		id: 3,
		url: '',
		name: '李桃桃',
		phone: '13677985689',
		identity: '叔叔'
	}
])
// 点击呼叫按钮回调
const callPhone = () => {
	console.log(666)
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	padding: 0 20rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 背景图片区域样式
	.img_bg {
		position: absolute;
		top: -70rpx;
		right: -32rpx;
		width: 589rpx;
		height: 320rpx;
		pointer-events: none;
	}

	.identity {
		margin: 20rpx 0 40rpx 0;
		color: #808080;
		font-size: 28rpx;
	}

	.box {
		display: flex;
		margin-bottom: 30rpx;
		height: 120rpx;

		.box_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.box_info {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin-left: 22rpx;

			.info_name {
				display: flex;
				align-items: center;
				font-size: 32rpx;

				.info_type {
					margin-left: 15rpx;
					padding: 0 14rpx;
					height: 37rpx;
					line-height: 37rpx;
					font-size: 20rpx;
					color: #0061ff;
					border: 1rpx solid #0061ff;
					border-radius: 6rpx;
					background-color: #d9e7ff;
				}
			}

			.info_phone {
				color: #808080;
				font-size: 28rpx;
			}
		}

		.box_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			align-self: center;
			margin-left: auto;
			width: 140rpx;
			height: 68rpx;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			background-color: #0061ff;
		}
	}

	.mb-50 {
		margin-bottom: 50rpx;
	}
}
</style>