<!-- 我的 -->
<template>
	<view class="my">
		<!-- 顶部背景 -->
		<view class="head-Bg">
			<lwTopnav :bgColor="bgColor" lwColor="#fff" lwTitle="我的"></lwTopnav>
			<view class="my-avatar">
				<u-avatar size="130" :showSex="avatar!==''" :sexIcon="sex" :src="avatar"
				@click="toShowDetail"></u-avatar>
				<text @click="toShowDetail">请点击登录</text>
			</view>
		</view>
		<view class="my-detail" @click="toShowDetail">
			<text>个人信息</text>
			<u-icon name="arrow-right" size="28" color="#aab1c0"></u-icon>
		</view>
		<view class="login-out" v-if="isLogin">
			退出登录
		</view>
	</view>
</template>

<script>
	import lwTopnav from "@/components/lw-topnav/lw-topnav";
	export default {
		components: {
			lwTopnav
		},
		data(){
			return{
				avatar: '',//头像
				sex: 'man',// 性别-man、woman
				isLogin: false,// 是否登录
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我的'
			})
		},
		methods:{
			// 前往我的信息
			toShowDetail(){
				uni.navigateTo({
					url: '/pages/my/mySetting'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.my{
	background-color: #f9f9f9;
	display: flex;
	align-items: center;
	flex-direction: column;
	height: calc(100vh - 50px);
	.head-Bg{
		height: 500rpx;
		top: 0rpx;
		left: 0rpx;
		z-index: 1;
		width: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
		background: -webkit-linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
		background: linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
		border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%;
	}
	.my-avatar{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 30rpx;
		text{
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: 600;
			margin-top: 20rpx;
		}
	}
	.my-detail{
		margin-top: -70rpx;
		border-radius: 12rpx;
		z-index: 2;
		width: 85%;
		height: 130rpx;
		color: #000;
		background-color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
	}
	.login-out{
		position: absolute;
		box-shadow: 0px 5px 9px 0px rgba(100, 100, 111, 0.2);
		bottom: 60px;
		width: 85%;
		border-radius: 80rpx;
		border: 2rpx solid #ff2e0a;
		height: 90rpx;
		color: #ff2e0a;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		font-size: 34rpx;
	}
}
</style>