<template>
	<view>
		<view class="bgImg">
			<view class="userInfo">
				<image src="../../static/image/del/Ellipse-1@2x.png" mode=""></image>
				<view class="user">
					<view class="userName">
						李强
					</view>
					<view class="userDept">
						监管部
					</view>
				</view>
			</view>
			<view class="handle">
				<view class="handleList">
					<navigator class="handleItem" url="us?pgType=aboutUs" hover-class="none">
						<view class="imgTxt">
							<image src="../../static/image/icon_my_us.png" mode=""></image>
							关于我们 
						</view>
						<image class="arrow" src="../../static/image/icon_arrow.png" mode=""></image>
					</navigator>
					<navigator class="handleItem" url="opinion" hover-class="none">
						<view class="imgTxt">
							<image src="../../static/image/icon_my_mail.png" mode=""></image>
							意见反馈 
						</view>
						<image class="arrow" src="../../static/image/icon_arrow.png" mode=""></image>
					</navigator>
					<navigator class="handleItem" url="us?pgType=contactUs" hover-class="none">
						<view class="imgTxt">
							<image src="../../static/image/icon_my_contact.png" mode=""></image>
							联系我们 
						</view>
						<image class="arrow" src="../../static/image/icon_arrow.png" mode=""></image>
					</navigator>
					<view class="handleItem" @click="logout">
						<view class="imgTxt">
							<image src="../../static/image/icon_my_out.png" mode=""></image>
							退出登录 
						</view>
						<image class="arrow" src="../../static/image/icon_arrow.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			logout(){
				uni.reLaunch({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style>
	page{background: #f7f8fa;}
	.bgImg{height: 652rpx;background: url(../../static/image/img_my_bg.png) no-repeat;background-size: 100% 652rpx;padding: 0 48rpx;position: relative;}
	.bgImg .userInfo{position: absolute;height: 124rpx;top: 136rpx;width: 654rpx;display: flex;align-items: center;}
	.userInfo image{width: 124rpx;height: 124rpx;}
	.userInfo .user{flex: 1;padding-left: 32rpx;color: #fff;}
	.user .userName{font-size: 40rpx;}
	.use .userDept{font-size: 28rpx;}
	.bgImg .handle{position: absolute;width: 654rpx;height: 584rpx;background: #ffffff;border-radius: 28rpx;top: 324rpx;}
	.handle .handleList{padding: 24rpx 48rpx;}
	.handleList .handleItem{display: flex;justify-content: space-between;align-items: center;height: 108rpx;}
	.handleItem .imgTxt{display: flex;align-items: center;font-size: 30rpx;}
	.imgTxt image{width: 56rpx;height: 56rpx;margin-right: 24rpx;}
	.handleItem .arrow{width: 32rpx;height: 32rpx;}
</style>