<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="userStyle">
			<view class="headStatus" v-if="scrollTop > 50" :style="[headStyle,
			    {
			      zIndex: scrollTop < 10 ? 'unset' : 2,
			      opacity: scrollTop < 10 ? '100' : scrollTop,
			    },
			  ]">
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
			</view>
			<view class="userBox" :style="{ 'margin-bottom': bottommargin }">
				<view :style="{ 'background-image': 'url(' + (meueData.user_center.top_pic_url ? meueData.user_center.top_pic_url : '') + ')', backgroundSize: '100% 310px' }"
				 class="imgbg" :class="{'miniHeadTop':meueData.user_center.is_foot_bar_status!=1&&meueData.user_center.is_account_status!=1}">
					<view class="titlenav" :style="{paddingTop:nav}">{{pageTitle}}</view>
					<view class='topheard' :style="{'margin-top':modelstype==0?'52px':(modelstype==1?'37px':(modelstype==2)?'33px':0) }"
					 v-if="meueData.user_center.top_style == 1">
						<u-avatar :src="user_info.avatar" size="140" style="margin-left: 50rpx;"></u-avatar>
						<view style="display: flex;flex-direction: column;justify-content: center;height: 50px;margin-left: 20rpx">
							<Text style="color: #FFF;font-size: 36rpx;max-width: 200px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;"
							 @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
							<view class="member" v-if="is_icon_members_grade == 1&& user_info.nickname">
								<image :src="user_info.identity.level_icon" mode="aspectFill" style="width: 22px;height: 22px;border-radius: 11px;"></image>
								<Text style="margin-right: 10px;">{{ user_info.identity.level_name != null ? user_info.identity.level_name : '普通用户' }}</Text>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;margin-top: 23px;margin-bottom: 5px;" v-if="meueData.user_center.top_style == 2">
						<u-avatar :src="user_info.avatar" size="120"></u-avatar>
						<Text style="color: #FFF;font-size: 36rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
						<view class="member" v-if="is_icon_members_grade == 1&&user_info.nickname">
							<image :src="user_info.identity.level_icon" mode="aspectFill" style="width: 22px;height: 22px;border-radius: 11px;"></image>
							<Text style="margin-right: 10px;">{{ user_info.identity.level_name != null ? user_info.identity.level_name : '普通用户' }}</Text>
						</view>
					</view>
					<view class="top_b">
						<view class="top_b_item" v-if="meueData.user_center.is_foot_bar_status == 1" @click="goUrl('/pages/favorite/favorite')">
							<text style="font-size: 21px;">{{user_info.favorite?user_info.favorite:0}}</text>
							<text>{{meueData.user_center.foot_bar[0].name}}</text>
						</view>
						<view class="top_b_item" v-if="meueData.user_center.is_foot_bar_status == 1" @click="goUrl('/pages/foot/index/index')">
							<text style="font-size: 21px;">{{user_info.footprint?user_info.footprint:0}}</text>
							<text>{{meueData.user_center.foot_bar[1].name}}</text>
						</view>
						<view class="top_b_item" v-if="meueData.user_center&&meueData.user_center.is_account_status == 1" @click="goUrl(couponsObj.link_url)">
							<text style="font-size: 21px;">{{user_info.coupon?user_info.coupon:0}}</text>
							<text>{{couponsObj.name}}</text>
						</view>
					</view>
					<view class="ReceiptAdder" v-if="IsEducation!=1" @click="goUrl('/pages/address/address')" :style="{top:modelstype==0?'160rpx':(modelstype==1?'180rpx':'160rpx')}">
						<u-icon name="location" color="#fff" size="23"></u-icon>
						<Text style="color: #fff;font-size: 12px;margin-left: 20rpx;">收货地址</Text>
					</view>
					<view class="Receiptbalance" v-if="meueData.user_center&&meueData.user_center.is_account_status == 1">
						<view class="Receiptbalance_item" v-for="(item, index) in meueData.user_center.account" :key="index" v-if="item.link_url == '/pages/balance/balance'"
						 @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 22px;height: auto" mode='widthFix'></image>
							<view style="margin-left: 15px;display: flex;flex-direction: column;justify-content: space-between;">
								<span style='font-size: 21px;color: #0D0D0D;font-weight: 200;'>{{user_info.balance?(user_info.balance>10000?(user_info.balance/10000).toFixed(1)+'w':user_info.balance):0}}</span>
								<span style=''>{{item.name}}</span>
							</view>
						</view>
						<view style="width: 1px;height: 34px;background: #E8E8E8;"></view>
						<view class="Receiptbalance_item" v-for="(item, index) in meueData.user_center.account" :key="index" v-if="item.link_url == '/pages/user-center/integral-detail/integral-detail'"
						 @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 17px;;height: auto" mode='widthFix'></image>
							<view style="margin-left: 15px;display: flex;flex-direction: column;justify-content: space-between;">
								<span style='font-size: 21px;color: #0D0D0D;font-weight: 200;'>{{user_info.integral?(user_info.integral>10000?(user_info.integral/10000).toFixed(1)+'w':user_info.integral):0}}</span>
								<span>{{item.name}}</span>
							</view>
						</view>
					</view>
				</view>
				<!-- 排课点数 -->
				<view class="order_bar paike"  style="" @click="gopointBalance" v-if="meueData.user_center.is_point_status==1">
					<span style='font-size: 14px;color: #111111;'>可用余额(点数)：</span>
					<span style='font-size: 22px;color: #111111;font-family: aa;'>{{PointNum}}</span>
				</view>
				<view class="order_bar" v-if="meueData.user_center.is_order_bar_status == 1">
					<u-section title="我的订单" sub-title="查看更多" style="width: 100%;padding:0px 0 10px ;" @click="goUrl('/pages/order/index/index?status=0')"></u-section>
					<view class="order_bar_list">
						<view class="order_bar_item" v-for="(item, index) in meueData.user_center.order_bar" :key="index" :name="item.name"
						 @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 60rpx;height: auto" mode='widthFix'></image>
							<Text style="margin-top: 10rpx;">{{ item.name }}</Text>
							<!-- 待付款 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=1' && user_info.MyOrder.NonPayment > 0" class="badge"
							 :style="{ background: mainColor }">
								{{ user_info.MyOrder.NonPayment }}
							</view>
							<!-- 待发货 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=2' && user_info.MyOrder.WaitSendGoods > 0" class="badge"
							 :style="{ background: mainColor }">
								{{ user_info.MyOrder.WaitSendGoods }}
							</view>
							<!-- 待收货 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=3' && user_info.MyOrder.WaitReceiving > 0" class="badge"
							 :style="{ background: mainColor }">
								{{ user_info.MyOrder.WaitReceiving }}
							</view>
							<!-- 待评价 -->
							<view v-if="item.link_url == '/pages/order/order-commit' && user_info.MyOrder.WaitCommentNum > 0" class="badge"
							 :style="{ background: mainColor }">
								{{ user_info.MyOrder.WaitCommentNum }}
							</view>
							<!-- 售后 -->
							<view v-if="item.link_url == '/pages/order/after-sale/refunds-list' && user_info.MyOrder.AfterSaleNum > 0" class="badge"
							 :style="{ background: mainColor }">
								{{ user_info.MyOrder.AfterSaleNum }}
							</view>
						</view>
					</view>
				</view>
				<view class="order_bar" style="margin-top:20rpx;" v-if="meueData.user_center.is_sdorder_bar_status == 1">
					<u-section title="司导订单" sub-title="查看更多" style="width: 100%;padding:0px 0 10px ;" @click="goUrl('/pages/guidecar/orderList?status=0')"></u-section>
					<view class="order_bar_list">
						<view class="order_bar_item" v-for="(item, index) in meueData.user_center.sdorder_bar" :key="index" :name="item.name"
						 @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 60rpx;height: auto" mode='widthFix'></image>
							<Text style="margin-top: 10rpx;">{{ item.name }}</Text>
							<!-- 待付款 -->
							<view v-if="item.link_url == '/pages/guidecar/orderList?status=1' && user_info.MyGuideCarOrder.NonPayment > 0"
							 class="badge" :style="{ background: mainColor }">
								{{ user_info.MyGuideCarOrder.NonPayment }}
							</view>
							<!-- 待确认 -->
							<view v-if="item.link_url == '/pages/guidecar/orderList?status=2' && user_info.MyGuideCarOrder.WaitSendGoods > 0"
							 class="badge" :style="{ background: mainColor }">
								{{ user_info.MyGuideCarOrder.WaitSendGoods }}
							</view>
							<!-- 待出行 -->
							<view v-if="item.link_url == '/pages/guidecar/orderList?status=3' && user_info.MyGuideCarOrder.WaitReceiving > 0"
							 class="badge" :style="{ background: mainColor }">
								{{ user_info.MyGuideCarOrder.WaitReceiving }}
							</view>
							<!-- 出行中 -->
							<view v-if="item.link_url == '/pages/guidecar/orderList?status=4' && user_info.MyGuideCarOrder.Completed > 0"
							 class="badge" :style="{ background: mainColor }">
								{{ user_info.MyGuideCarOrder.Completed }}
							</view>
							<!-- 待评价 -->
							<view v-if="item.link_url == '/pages/guidecar/order-commit' && user_info.MyGuideCarOrder.GuideCarWaitCommentNum > 0"
							 class="badge" :style="{ background: mainColor }">
								{{ user_info.MyGuideCarOrder.GuideCarWaitCommentNum }}
							</view>
						</view>
					</view>
				</view>
				<template v-if="meueData.user_center&&meueData.user_center.nar_menus.length>0">
					<view v-if="meueData.user_center && meueData.user_center.is_menu_status == 1" v-for="(mItem,mIndex) in meueData.user_center.nar_menus"
					 :key="mIndex" :style="{'marginTop':mIndex==0&&(meueData.user_center.is_foot_bar_status==1||meueData.user_center.is_account_status==1)?'25px':''}"
					 class="headCommon">
						<view style="margin:10px;">{{mItem.MenuNavTitle}}</view>
						<view :class="mItem.MenuNavStyle == 1 ? 'menus' : 'menus2'" style="width:100%;">
							<view :class="mItem.MenuNavStyle == 1 ? 'menus_item' : 'menus_item2'" v-for="(item, index) in mItem.MeunList"
							 :key="index" :name="item.name" @click="goUrl(item.link_url)" v-if="pandu(item)">
								<image :src="item.icon_url" :style="{width:mItem.MenuNavStyle == 1 ?'20px':'12px',height: 'auto'}" mode="widthFix"></image>
								<Text :style="{ 'margin-top': mItem.MenuNavStyle == 1 ? '10rpx' : '0rpx', 'margin-left': mItem.MenuNavStyle == 1 ? '0rpx' : '10rpx' }">
									{{ item.name }}
								</Text>
								<button open-type="contact" class="contButton" v-if="item.link_url == 'contact' && item.name == '客服'"></button>
							</view>
						</view>
					</view>
				</template>
			</view>
			<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
			<tabbars></tabbars>
		</view>
	</scroll-view>
</template>

<script>
	import tabbars from '@/components/tabbar/index';
	import auth from '../../components/auth/index.vue';
	export default {
		data() {
			return {
				isloading: true,
				pageTitle: '用户中心',
				navHeight: 0,
				contentHeight: 0,
				cstyle: {},
				meueData: {}, //菜单
				user_info: {}, //个人信息
				headStyle: {},
				bottommargin: 0,
				listbottom: 0,
				showAuth: false,
				mainColor: '',
				secondary: '',
				u: {},
				is_icon_members_grade: 0,
				nav: 0,
				scrollTop: 0,
				couponsObj: {},
				modelstype: 0, //机型类型
				shopBasics: {},
				mall_UserInfo: {},
				IsEducation: 0, //1是0否是网课模式
				PointNum:0,
			};
		},
		components: {
			tabbars,
			auth
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.IsEducation = uni.getStorageSync('basedata') ?
				(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall.setting.mallStyle
					.IsEducation : 0) :
				0;
			this.userinfo();
		},
		onLoad() {
			this.navHeight = this.$navHeight - 2;
			this.u = wx.getStorageSync('basedata').user_info;
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo");
			this.nav = uni.getMenuButtonBoundingClientRect().top + 'px';
			this.headStyle.background = `linear-gradient(to right, '#6E75EA',80%, '#B984EC')`;
			this.headStyle.paddingTop = this.nav;
			if (!this.mall_UserInfo) {
				this.showAuth = true;
			}
		},
		mounted() {
			let currentPages = getCurrentPages();
			let c = this.$uiConfig.is_bang ? 80 : 52;
			this.bottommargin = c - 2 + 'px';
			this.listbottom = c - 2 + 50 + 'px';
			this.contentHeight = this.$utils.calcContentHeight(c);
			if (this.contentHeight > 690 && this.contentHeight < 776) {
				this.modelstype = 1
			} else if (this.contentHeight >= 776) {
				this.modelstype = 2
			}

			this.is_icon_members_grade = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.is_icon_members_grade :
				0;
			let u = '/' + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
			uni.setNavigationBarTitle({
				title: '用户中心'
			});
		},
		onShow() {
			this.userinfo(2);
			if (this.mall_UserInfo) {
				this.getUserPoint()
			}
		},
		methods: {
			goHome() {
				uni.redirectTo({
					url: '/pages/index/main'
				});
			},
			pandu(item) {
				let flag = true;
				let IsOpen = this.shopBasics.model && this.shopBasics.model.IsOpen ? this.shopBasics.model.IsOpen : 1;
				let SmallShopId = this.mall_UserInfo.SmallShopId ? this.mall_UserInfo.SmallShopId : 0;
				let UserSmallShopId = this.mall_UserInfo.UserSmallShopId ? this.mall_UserInfo.UserSmallShopId : 0;
				switch (item.link_url) {
					case "/pages/share/index/index":
						if (this.user_info.isShowDistributionCenter == 1) {
							flag = true;
						} else {
							flag = false;
						}
						break;
					case "/pages/friendcircle/my-news":
						if (this.mall_UserInfo.UserTeacher > 0) {
							flag = true;
						} else {
							flag = false;
						}
						break;
					case "/pages/microShop/index/index":
						//开启
						if (IsOpen == 2) {
							flag = true;
						}
						//关闭
						else {
							if (SmallShopId != 0 || UserSmallShopId != 0) {
								flag = true;
							} else {
								flag = false;
							}
						}
						break;
					case "/pages/appointment/personal/studentAppointmentList":
						if(this.meueData.user_center.is_point_status==1){
							flag = true;
						}else{
							flag = false;
						}
						break;
					case "/pages/appointment/personal/teacherOrderList":
						if(this.meueData.user_center.is_point_status==1 && this.mall_UserInfo.UserTeacher>0){
							flag = true;
						}else{
							flag = false;
						}
						break;
					case "/pages/appointment/appointment?teacher=1":
						if(this.meueData.user_center.is_point_status==1 && this.mall_UserInfo.UserTeacher>0){
							flag = true;
						}else{
							flag = false;
						}
						break;
				}
				return flag;
			},
			//获取菜单配置
			userinfo(type = 1) {
				uni.showNavigationBarLoading();
				this.request2({
						url: '/api/Mall/GetUserCenter',
						data: {}
					},
					res => {
						uni.hideNavigationBarLoading();
						this.meueData = res.data.config;
						this.user_info = res.data.user_info;
						this.meueData.user_center.account.forEach(x => {
							if (x.link_url == "/pages/coupon/index/index") {
								this.couponsObj = x
							}
						})
						if (this.mall_UserInfo && type == 1) {
							this.getLogin()
						}
					}
				);
				let u = uni.getStorageSync("mall_UserInfo");
				if (u && type == 1) {
					this.getMicroShopBasics()
				}
			},
			getLogin() {
				var that = this;
				let pid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				let Up = uni.getStorageSync("Up") ? uni.getStorageSync("Up").Up : 0;
				let SmallShopId = uni.getStorageSync("SmallShopId") ? uni.getStorageSync("SmallShopId").SmallShopId : 0;
				let CounponPassword = uni.getStorageSync("CounponPassword") ? uni.getStorageSync("CounponPassword").CounponPassword : 0;
				let KeyWord = uni.getStorageSync("KeyWord") ? uni.getStorageSync("KeyWord").KeyWord : '';
				that.request2({
						url: '/api/AppletLogin/Login',
						data: {
							Source: 1,
							OpenId: this.mall_UserInfo.OpenId,
							Name: this.mall_UserInfo.Name,
							Photo: this.mall_UserInfo.Photo,
							Moblie: '',
							SuperiorId: pid,
							SmallShopId: SmallShopId,
							UserPageType: Up,
							CounponPassword:CounponPassword,
							KeyWord:KeyWord,
						}
					},
					res => {
						if (res.resultCode == 1) {
							uni.setStorageSync('mall_UserInfo', res.data);
							uni.removeStorageSync('pid');
							uni.removeStorageSync('SmallShopId');
							uni.removeStorageSync("Up");
							uni.removeStorageSync("CounponPassword");
							uni.removeStorageSync("KeyWord");
						}
					}
				);
			},
			getMicroShopBasics() {
				this.request2({
						url: '/api/AppletUser/GetMicroShopBasics',
						data: {}
					},
					(res) => {
						this.shopBasics = res.data;
					}
				);
			},
			getUserPoint(){
				this.request2({
						url: '/api/AppletPoint/GetAppletUserPointDetailPageList',
						data: {pageIndex:1,pageSize:10,Type:0}
					},
					(res) => {
						this.PointNum = res.data.pageData.PointNum;
					}
				);
			},
			goUrl(url) {
				if (url == '/pages/balance/balance') {
					uni.navigateTo({
						url: '/pages/balance/balance?balance=' + this.user_info.balance
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			reloadUserinfo() {
				this.userinfo();
				this.u = this.user_info;
				this.mall_UserInfo = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo") : {};
				this.getUserPoint()
			},
			login(name) {
				if ((name && name.nickname == '') || !name || !name.nickname) {
					this.showAuth = true;
				}
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			gopointBalance(){//跳转点数余额
				uni.navigateTo({
					url: '/pages/appointment/personal/pointBalance'
				});
			},
		}
	};
</script>

<style>
	.body {
		background: #f3f4f6;
	}

	.userStyle .userBox {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f4f6;
		min-height: 100vh;
	}

	.userStyle .imgbg {
		width: 100%;
		height: 310px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

	}

	.userStyle .headimg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-left: 60rpx;
	}

	.userStyle .footprint {
		width: 80%;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.userStyle .footprint_item {
		width: 200rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.userStyle .footprint_item_bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.userStyle .account_bar {
		width: 94%;
		height: 110rpx;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;
	}

	.userStyle .account_bar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-right: 1px solid #d1d1d1;
		width: 25%;
	}

	.userStyle .account_bar_item:last-child {
		border-right: 0;
	}

	.userStyle .order_bar {
		width: 94%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		margin-top: 80rpx;
	}

	.userStyle .order_bar .order_bar_list {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.userStyle .order_bar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		position: relative;
	}

	.userStyle .badge {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #fff;
		height: 30rpx;
		border-radius: 15rpx;
	}

	.userStyle .menus {
		width: 94%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 30rpx;
	}

	.userStyle .menus2 {
		width: 94%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.userStyle .menus .menus_item {
		width: 25%;
		height: 110rpx;
		margin: 20rpx 0 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		position: relative;
	}

	.menus_item2 .contButton,
	.menus_item .contButton {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.userStyle .menus2 .menus_item2 {
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;
		position: relative;
	}

	.userStyle .copyright {
		padding: 70rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userStyle .ReceiptAdder {
		position: absolute;
		right: 0;
		top: 160rpx;
		width: 100px;
		height: 24px;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
		background: rgba(55, 55, 55, 0.15)
	}

	.userStyle .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;
		margin-top: 10px;
	}

	.userStyle .titlenav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #FFFFFF;
	}

	.userStyle .top_b {
		width: 86%;
		height: 65px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.userStyle .top_b_item {
		width: 26%;
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
		font-size: 12px;
	}

	.userStyle .Receiptbalance {
		width: 94%;
		height: 62px;
		position: absolute;
		left: 3%;
		bottom: -20px;
		background: #FFFFFF;
		border-radius: 6px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 10px;
	}

	.userStyle .Receiptbalance_item {
		width: 40%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 12px;
		color: #534D62;

	}

	.userStyle .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background-image: linear-gradient(to right,
			#6E75EA,
			#B984EC);

	}

	.userStyle .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.userStyle .headStatus .title {
		font-size: 18px;
		color: #fff;
		flex: 1;
		width: 1px;
		line-height: 34px;
		text-align: center;
	}

	.userStyle .topheard {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 20px;
	}

	.userStyle .miniHeadTop {
		height: 200px;
	}

	.userBox .headCommon {
		width: 94%;
		margin-top: 25px;
		border-radius: 10px;
		background-color: #fff;
	}

	.userBox .headHasTOP {
		margin-top: 25px;
	}
	.userBox .paike{
		margin-top: 15px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;
	}
</style>