<template>
	<view class="content">
		<view class="header">
			<view class="headportrait" @click="uploadAvatar()">
				<img src="" alt="">
			</view>
		</view>
		<view class="band">
			<view class="contentItem">
			  <text>真实名称</text>
			  <input class="user-input" type="text"  placeholder="请输入姓名"/>
			</view>
			<view class="contentItem">
			  <text>昵称</text>
			  <input class="user-input" maxlength="10"  type="text"  placeholder="请输入3~10个字符"/>
			</view>
			<view class="contentItem">
			  <text>个人简介</text>
			  <textarea class="user-textarea"></textarea>
			</view>
		</view>
		<view class="footer">
			<button class="user-button">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		CommonUpload
	} from '@/util/uploaderFile'
	export default {
		data() {
			return {

			}
		},
		methods:{
			uploadAvatar(event) {
				let that = this;
				CommonUpload()
					.then(res => {
						// that.headUrl = res[0].url
					})
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
	}
	.user-input{
		text-align: right;
	}
	.user-textarea{
		border: 1px solid #C7C7C7;width: 540rpx;
		height: 270rpx;
		border-radius: 10rpx;
	}
.band{
	margin: 0 20rpx;
	font-size: 26rpx;
}
	.header {
		display: flex;
		justify-content: center;
	}

	.headportrait {
		width: 260rpx;
		height: 260rpx;
		border: 1rpx solid aqua;
		border-radius: 50%;
	}
	.contentItem{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #E4E4E4;
		padding: 20rpx;
	}
	.footer{
		width: 500rpx;
		height: 80rpx;
		opacity: 1;
		margin: 80rpx auto;
	}
	.user-button{
		color: #FFFFFF;
		background: #20269B;
		border-radius: 80px;
	}
</style>
