<template>
	<gui-page :customHeader="true">
		<view slot="gHeader"><gui-demo-header></gui-demo-header></view>
		<view slot="gBody" class="gui-margin" style="padding-bottom:50rpx;">
			<view class="gui-list gui-margin-top gui-padding">
				<view class="gui-list-items">
					<view class="gui-list-image ucenter-face gui-relative">
						<image class="gui-list-image ucenter-face-image"
							src="https://images.unsplash.com/photo-1553532070-2ca3b5876896?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxNzZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=60"
							mode="widthFix"></image>
					</view>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<text class="gui-list-title-text gui-primary-color">{{name}}</text>
						</view>
						<text class="gui-list-body-desc gui-color-gray gui-block-text">性别：{{sex == 1 ? '女' : '男'}}</text>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
			</view>
			<view class="ucenter-line"></view>
			<view class="gui-flex gui-space-around">
				<view class="" @click="userInfo">
					<text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text>
					<view class="gui-text-small">
						个人信息
					</view>

				</view>
				<view class="" @click="myLove">
					<text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text>
					<view class="gui-text-small">
						我的食物
					</view>

				</view>
				<view class="" @click="userInfo">
					<text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text>
					<view class="gui-text-small">
						账户设置
					</view>

				</view>

				<view class="" @click="outLogin()">
					<text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text>
					<view class="gui-text-small">
						退出登录
					</view>

				</view>
			</view>
			<view class="" style="width: 100%;height: 30upx;">

			</view>
			<view class="gui-list-items gui-boo" @click="outLogin()" style="position: absolute; bottom: 0; text-align: center; width: 100%;margin-left: -5%;">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe62e;</text>

				<text class="gui-list-title-text">退出登录</text>

			</view>
			
			
		</view>



		</view>
	</gui-page>
</template>
<script>
		var graceJS = require('@/GraceUI5/js/grace.js');
	export default {
		data() {
			return {
				name:"花花",
				tems: [
					[80, '', '动态'],
					[100, '', '好友'],
					[50, '', '私信'],
					['￥199', '', '余额']
				]
			}
		},
		onLoad() {
		this.name = graceJS.getStorage("name")
		this.sex = graceJS.getStorage("sex")
		},
		methods: {
			outLogin(){
				uni.reLaunch({
					url: '../login/login'
				});
				
			},
			myLove(){
				uni.navigateTo({
					url:"../myLove/myLove"
				})
			},
			userInfo(){
				uni.navigateTo({
					url:"../userInfo/userInfo"
				})
			}
		}
	}
</script>
<style>
	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		background-color: #F6F7F8;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}
</style>