<template>
	<HeaderNav title="个人信息" :is-back="true"></HeaderNav>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">
		<view class="detail-container">
			<view class="detail-content-container">
				<view class="detail-content">
					<view class="detail-content-item">
						<view class="detail-item-title">头像</view>
						<view class="detail-item-content">
							<view class="detail-item-background"></view>
							<image class="img" mode="aspectFill" :src="user.avatar"/>
						</view>
					</view>
					<view class="detail-content-item">
						<view class="detail-item-title">昵称</view>
						<view class="detail-item-content">{{user.nickname}}
							<u-icon class="arrow-right" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="detail-content-item">
						<view class="detail-item-title">生日</view>
						<view class="detail-item-content">{{user.birthday}}
							<u-icon class="arrow-right" name="arrow-right"></u-icon>
						</view>
						
					</view>
					<view class="detail-content-item">
						<view class="detail-item-title">手机</view>
						<view class="detail-item-content">{{user.phone}}
							<u-icon class="arrow-right" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="detail-content-item">
						<view class="detail-item-title">性别</view>
						<view class="detail-item-content">{{user.sex}}
							<u-icon class="arrow-right" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="detail-content-item">
						<view class="detail-item-title">背景</view>
						<view class="detail-item-content">
							<image class="img" mode="aspectFill" :src="user.background"/>
							<view class="detail-item-background"></view>
						</view>
					</view>
					<view class="detail-logout-button">
						退出登录
					</view>
				</view>
			</view>
			<view class="detail-background-container">
				<view class="detail-background"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import api from '@/utils/functions.js';
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	export default {
		components:{
			HeaderNav
		},
		data: {
				staticImage:{
					wallpaperBgImage:imghost+'/static/image/background.png',
				},
				user:{
					avatar:imghost+'/static/image/banner.png',
					nickname:'清晨的风',
					background:imghost+'/static/image/banner.png',
					sex:'女',
					phone:'15012345678',
					coupons:221,
					id:88685,
					birthday:'2002-05-11',
				},
		},
		onLoad() {

		},
		methods: {

		},
		onPageScroll(res) {

		},
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop+
			// api.navHeight().navHeight + (api.navHeight().headerPadding *2))
		}
	}
</script>

<style lang="scss">
	@import '@/pages/UserDetail/components/index.scss';
</style>