jp-education-student/pages/teacher/editProfile/editProfile.vue

<template>
	<view>
		<u-navbar title="编辑资料"></u-navbar>
		<view class="main">
			
			<view class="photo">
				<img src="../../../assets/img/photowoman.png" alt="">
				<view class="camera">
					<img src="../../../assets/img/md-camera_alt@1x.png" alt="">
				</view>
			</view>
			<view class="infos">
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="content">
						夏奕琳
					</view>
				</view>
				<view class="item">
					<view class="title">
						手机号
					</view>
					<view class="content">
						13477489404
					</view>
				</view>
				<view class="item">
					<view class="title">
						所属学部
					</view>
					<view class="content">
						文艺部
					</view>
				</view>
				<view class="item">
					<view class="title">
						所属项目中心
					</view>
					<view class="content">
						中国舞项目中心
					</view>
				</view>
				<view class="item">
					<view class="title">
						所属学科
					</view>
					<view class="content">
						芭蕾舞
					</view>
				</view>
				<view class="honour">
					<view class="title">
						荣誉奖项
					</view>
					<textarea name="" id="" cols="30" rows="10" placeholder="请简短描述您所获得的荣誉奖项及教学优质案例"></textarea>
				</view>
			</view>
			
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<button class="btn">保存</button>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		.photo{
			width: 108px;
			height: 108px;
			margin: auto;
			padding-top: 20px;
			position: relative;
			img{
			   
				width: 108px;
				height: 108px;
				border-radius: 999px;
			}
			.camera{
				width: 52rpx;
				height: 52rpx;
				border-radius: 999px;
				background-color: rgba(13, 186, 199, 1);
				text-align: center;
				border: 2px solid rgba(255, 255, 255, 1);
				position: absolute;
				bottom: -32rpx;
				right: 0;
				img{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
			}
		}
		.infos{
			padding: 40px 16px 20px 16px;
			.item{
				display: flex;
				justify-content: space-between;
				line-height:44px;
				border-bottom: 1px solid rgba(229, 231, 234, 1);
				.title{
					color: rgba(119, 119, 119, 1);
				}
				.content{
					color: rgba(16, 16, 16, 1);
				}
			}
			.honour{
				padding-top: 12px;
				.title{
					color: rgba(119, 119, 119, 1);
				}
				uni-textarea{
					width: 100%;
					height: 160rpx;
					 border-radius: 8px;
					 background-color: rgba(229, 231, 234, 1);
					 margin-top:8px;
					 text-indent: 14px;
				}
				
			}
		}
	}
     .bottom{
		 position: fixed;
		 left: 0;
		 right: 0;
		 bottom: 0;
		 background-color: #fff;
		 padding: 10px 0;
		 .btn{
			 width: 91.4%;
			 background-color: rgba(13, 186, 199, 1);
			 color: rgba(255, 255, 255, 1);
			 font-size: 16px;
			 line-height: 40px;
			 border-radius: 50px;
			 
		 }
	 }
</style>