<template>
	<view class="container">
		<VNavigationBarVue titleColor="#333" backgroundColor="#fff" title="我的资料"></VNavigationBarVue>
		<view class="body">
			<view class="formItem">
				<text class="formLabel">头像</text>
				<image class="avatar" src="../../static/images/avatar.png" mode="aspectFit"></image>
			</view>
			<view class="formItem">
				<text class="formLabel">昵称</text>
				<text class="formValue">用户昵称</text>
				<image class="formBtn" src="../../static/icons/homeInfoMore.png" mode="aspectFit"></image>
				
			</view>
			<view class="formItem">
				<text class="formLabel">手机号</text>
				<text class="formValue">157****9706</text>
				<image class="formBtn" src="../../static/icons/homeInfoMore.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBarVue from '../../components/VNavigationBar.vue';
	export default {
		components: {
			VNavigationBarVue
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #fff;
		
		.body {
			
		}
		
		.formItem {
			box-sizing: border-box;
			width: 686rpx;
			margin: 0 auto;
			padding: 40rpx;
			
			display: flex;
			align-items: center;
			justify-content: space-between;
			column-gap: 20rpx;
			
			border-bottom: 1rpx solid #DDDDDD;
		}
		
		.formLabel {
			font-size: 32rpx;
			color: #333333;
		}
		
		.formValue {
			flex: 1;
			width: 0;
			text-align: right;
			font-size: 32rpx;
			color: #999999;
		}
		
		.formBtn {
			width: 24rpx;
			height: 24rpx;
		}
		
		.avatar {
			width: 108rpx;
			height: 108rpx;
		}
	}
</style>