<template>
	<view>
	
	<view class="main">
		
		<view class="modify">
			<image class="modify-icon" src="/static/my/main/modify-icon.png" @click="goToModify()"></image>
		</view>
		<view class="info">
			<view class="info1">
				<view class="head-portrait"></view>
				<view class="nickname">{{nickname}}</view>
			</view>
			<view class="info2">
				<view class="school">
					<view class="school-icon"></view>
					<view class="school-name">学&emsp;&emsp;校：{{schoolName}}</view>
				</view>
				<view class="team">
					<view class="team-icon"></view>
					<view class="team-name">运动小队：{{teamName}}</view>
				</view>
				<view class="point">
					<view class="point-icon"></view>
					<view class="point-num">运动积分：{{point}}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="func">
				<view class="my-post">
					<view class="my-post-icon"></view>
					<view>我的帖子</view>
				</view>
				<view class="running-record">
					<view class="running-record-icon"></view>
					<view>运动记录</view>
				</view>
				<view class="setting">
					<view class="setting-icon" @click="goToSetting()"></view>
					<view>设置</view>
				</view>
				<view class="reset-password">
					<view class="reset-password-icon" @click="goToResetpassword()"></view>
					<view>修改密码</view>
				</view>
			</view>
		</view>
		
	</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				iStatusBarHeight:0,
				nickname:'王二蛋',
				schoolName:'福州大学',
				teamName:'must go',
				point:'1250'
			}
		},
		methods:{
			goToModify() {
				uni.navigateTo({
					url: '/pages/my/modify'
				})
			},
			goToSetting() {
				uni.navigateTo({
					url: '/pages/my/my-setting'
				})
			},
			goToResetpassword() {
				uni.navigateTo({
					url: '/pages/my/my-resetpassword'
				})
			}
		},
		onLoad() {
		    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			plus.navigator.setStatusBarBackground('#EDEEF0');
		}
	}
</script>

<style>
	
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #EDEEF0;
	}
	.modify{
		
		height: 10%;
	}
	.modify-icon{
		
		margin-top: 50rpx;
		margin-left: 85%;
		width: 70rpx;
		height: 70rpx;
	}
	.info{
		
		height: 60%;
	}
	.info1{
		
		height: 30%;
	}
	.head-portrait {
		
		margin-top: 50rpx;
		margin-left: 15%;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-size:100% 100%;
		background-image:url("/static/my/main/head-portrait.png") ;
		background-repeat:no-repeat;
		float: left;
	}
	.nickname{
		
		width: 250rpx;
		height: 50rpx;
		font-size: 60rpx;
		text-align: left;
		float: right;
		margin-top: 100rpx;
		margin-right: 100rpx;
	}
	.info2{
		
		border-radius: 20rpx;
		background-color: #FFFFFF;
		width:75%;
		height: 60%;
		margin-top: 50px;
		margin-left: auto;
		margin-right: auto;
	}
	.school{
		
		height: 30%;
		margin-top: 20rpx;
	}
	.school-icon{
		
		width: 70rpx;
		height: 70rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		background-size:100% 100%;
		background-image:url("/static/my/main/school-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.school-name{
		
		width: 320rpx;
		height: 30rpx;
		margin-top: 60rpx;
		margin-right: 55rpx;
		font-size: 35rpx;
		text-align: left;
		float: right;
	}
	.team{
		
		height: 30%;
	}
	.team-icon{
		
		width: 70rpx;
		height: 70rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		background-size:100% 100%;
		background-image:url("/static/my/main/team-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.team-name{
		
		width: 320rpx;
		height: 30rpx;
		margin-top: 60rpx;
		margin-right: 55rpx;
		font-size: 35rpx;
		text-align: left;
		float: right;
	}
	.point{
		
		height: 30%;
	}
	.point-icon{
		
		width: 70rpx;
		height: 70rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		background-size:100% 100%;
		background-image:url("/static/my/main/point-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.point-num{
		
		width: 320rpx;
		height: 30rpx;
		margin-top: 60rpx;
		margin-right: 55rpx;
		font-size: 35rpx;
		text-align: left;
		float: right;
	}
	.func{
		
		width:75%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		text-align: center;
		font-size: 20rpx;
	}
	.my-post{
		
		width:200rpx;
		height: 250rpx;
	}
	.my-post-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/my-post-icon.png");
		background-repeat:no-repeat;
	}
	.running-record{
		
		width:200rpx;
		height: 250rpx;
	}
	.running-record-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/running-record-icon.png");
		background-repeat:no-repeat;
	}
	.setting{
		
		width:200rpx;
		height: 250rpx;
	}
	.setting-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/setting-icon.png");
		background-repeat:no-repeat;
	}
	.reset-password{
		
		width:200rpx;
		height: 250rpx;
	}
	.reset-password-icon{
		
		width: 100rpx;
		height: 100rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		background-size:100% 100%;
		background-image:url("/static/my/main/reset-password-icon.png");
		background-repeat:no-repeat;
	}
</style>