<template>
	<view class="login">
		<view class="u-font-xl bold-600 u-margin-top-56">获取你的昵称、头像</view>
		
		<view>
			<view class="u-flex u-row-between u-col-center avatar u-margin-top-80">
				<text>头像</text>
				<view class="u-flex u-row-between flex1 u-margin-left-30">
					<u-image src="https://api.uviewui.com/uploads/67c169c5927ce709a7f508d3.jpeg" width="100rpx" height="100rpx" shape="circle"></u-image>
					<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
				</view>
			</view>
			
			<view class="u-flex u-row-between u-col-center avatar u-margin-top-80">
				<text>昵称</text>
				<view class="u-flex u-row-between flex1 u-margin-left-30">
					<view>用户昵称</view>
					<u-icon name="close" color="#9F9EA4" size="32"></u-icon>
				</view>
			</view>
			
			<view class="menu">
				<u-button @click="quickLogin"  hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">允许</u-button>
				<u-button class="u-margin-top-32"  hover-class="none" :customStyle="{color: '#000', border: 'none', padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">拒绝</u-button>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	
	.login {
		margin: 0 32rpx;
		
		.avatar text {
			font-size: 48rpx;
		}
		
		.menu {
			margin-top: 200rpx;
		}
	}
</style>