<template>
	<view class="memberStyle" :style="{'height':contentHeight}">
		<view class='memberTop'>
			<view  class="memberT_box">
				<view style='display: flex;flex-direction: row;align-items: center;margin-top: 10px;'>
					<u-avatar src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user_default.jpg" size="100"></u-avatar>
					<view style='margin-left: 30px;display: flex;flex-direction: column;justify-content: space-around;height: 50px;color: #fff;'>
						<Text>哈哈</Text>
						<view class="member">
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user_cardmember-0.png" mode='aspectFill' style="width: 24px;height: 24px;border-radius: 12px;"></image>
							<Text style='margin-right: 10px;'>普通用户</Text>
						</view>
					</view>
				</view>
				<view class='balance'>
					<view class='balance_l'>
						<Text style='font-size: 10px;'>账号余额</Text>
						<Text style='font-size: 22px;'>￥0.5</Text>
					</view>
					<view class='balance_r' @click="gobalance()">
							<Text>去充值</Text>
					</view>
				</view>
				<view style="width: 100%;height: 200px;border-radius: 10px;overflow: hidden;margin-top: 10px;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user_cardmember-0.png" mode='aspectFill' style="width: 100%;height: 100%;"></image>
				</view>
				<image src="../../../static/images/icon/card-bottom.png" mode='widthFix' style="width: 100%;position: absolute;left: 0;bottom: 0;" ></image>
			</view>
		</view>
		<view class="memberC">
			<image src="../../../static/images/icon/banner.png" mode='widthFix' style="width: 100%;margin-top: 5px;" ></image>
			<view class="mc_box" @click="goUrl()"> 
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentHeight:0,
				mainColor:'',
			}
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 uni.setNavigationBarTitle({
			   title: '会员中心',
			 });
		},
		methods: {
			goUrl(){
				uni.navigateTo({
					url: '/pages/member/privilege'
				});
			},
			gobalance(){
				
				uni.navigateTo({
					url: '/pages/balance/recharge'
				});
			}
		}
	}
</script>

<style>
	.memberStyle{
		background: #fff;
	}
	.memberStyle .memberTop{
		width: 100%;
		height: 350px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #292A30;
		position: relative;
		overflow: hidden;
	}
	 .memberStyle .memberTop .memberT_box{
		width: 90%;
		display: flex;
		flex-direction: column;
	}
	.memberStyle .memberTop .member{
		background: #3B3641;
		width: 80px;
		font-size: 10px;
		color:#fff;
		height: 18px;
		border-radius: 9px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.memberStyle .balance{
		width: 100%;
		height: 80px;
		background: #464954;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		margin-top: 10px;
	}
	.memberStyle .balance_l{
		display: flex;
		flex-direction: column;
		color: #fff;
	}
	.memberStyle .balance_r{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 30px;
		border-radius: 15px;
		border: 1px solid #fff;
		color: #fff;
	}
	.memberStyle .memberC{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.mc_box{
		width: 94%;
		height: 100px;
		border-radius: 10px;
		border: 1px solid #D6C8AB;
		margin-top: 10px;
	}
</style>
