<template>
	<view class="bg-white">
		<view class="index-top">
			<view v-if="userIsLogin">
				<view style="z-index: 2;">
					<image src="http://122.152.205.72:88/group1/M00/00/05/CpoxxFw_-5-AFyVyAABLIH8xBTw233.png"
						class="face"></image>
					<view class="username">张三</view>
				</view>

			</view>
			<view class="set-wapper" v-if="userIsLogin">
				<image src="../../static/me/settings.png" class="settings" @tap="toSetting"></image>
			</view>
		</view>
		<view class="index-menu">
			<view class="uni-padding-wrap uni-common-mt">

				<view class="uni-flex uni-row">
					<view class="flex-item">
						<view class="">
							<image src="../../static/me/me-parkrecord.png" class="index-icon"></image>
						</view>
						<view class="index-title">停车缴费</view>
					</view>
					<view class="flex-item">
						<view class="">
							<image src="../../static/me/me-recoder.png" class="index-icon"></image>
						</view>
						<view class="index-title">停车记录</view>
					</view>
					<view class="flex-item">
						<view class="">
							<image src="../../static/me/me-balance.png" class="index-icon"></image>
						</view>
						<view class="index-title">我的钱包</view>
					</view>

				</view>
				<view class="uni-flex uni-row">
					<view class="flex-item">
						<view class="">
							<image src="../../static/me/me-coupon.png" class="index-icon"></image>
						</view>
						<view class="index-title">卡券管理</view>
					</view>
					<view class="flex-item" @click="toInvoicePage">
						<view class="">
							<image src="../../static/me/me-fapao.png" class="index-icon"></image>
						</view>
						<view class="index-title">发票申领</view>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import common from "../../common/common.js";


	export default {
		data() {
			return {
				userIsLogin: true,
			}
		},
		onLoad() {

		},
		methods: {
			toSetting() {
				uni.navigateTo({
					url: '../setting/setting'

				});
			},
			toInvoicePage() {
				uni.navigateTo({
					url: '../invoiceClaim/invoiceClaim'
				
				});
			}
		}
	}
</script>

<style lang="scss">
	.index-top {
		height: 200upx;
		background-color: #2d7bf7;
		position: relative;
		text-align: center;
		z-index: 2;
	}

	.index-top:after {
		width: 140%;
		height: 300upx;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: linear-gradient(#2d7bf7, #2d7bf7);
	}

	.face {

		margin-top: 50upx;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;

	}

	.username {
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		color: #fff;
		z-index: 2;
	}

	.set-wapper {
		height: 40rpx;
		position: absolute;
		top: 30upx;
		right: 50upx;
		z-index: 2;
	}

	.settings {
		width: 40upx;
		height: 40upx;
	}

	.index-menu {
		width: 100%;
		height: 440upx;
		margin-top: 160upx;
	}

	.flex-item {
		width: 33.3%;
		height: 200upx;
		text-align: center;

	}

	.index-icon {
		width: 48upx;
		height: 48upx;
		// border: 50%;
	}

	.index-title {
		height: 80upx;
		line-height: 80upx;
		// width: 80upx;
	}
</style>
