school/pages/user/userInfo.vue

<template>
	<view class="content">
		<view class="row1">
			<text class="tit">头像</text>
			<view class="background-img"><image class="background-img"   mode="aspectFill"></image></view>
		</view>
		<view class="row">
			<text class="tit">家长</text>
			<input class="input" type="text"  placeholder-class="placeholder" />
		</view>
		<view class="row">
			<text class="tit">学生</text>
			<input class="input" type="text"  placeholder-class="placeholder" />
		</view>
		<view class="row">
			<text class="tit">手机号</text>
			<input class="input" type="text"  placeholder-class="placeholder" />
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.row1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;
		margin-bottom: 20upx;
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: $font-lg;
			color: $font-color-dark;
		}
		
		.background-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #f2f2f2;
		}
	}
	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;
	
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: $font-lg;
			color: $font-color-dark;
		}
		.tit1 {
			flex-shrink: 0;
			width: 150upx;
			font-size: $font-lg;
			color: $font-color-dark;
			
		}
		.input {
			flex: 1;
			font-size: $font-base;
			color: $color-gray;
		}
	}
</style>