<template>
	<view style="width:100vw;height:100vh;" class="column">
		<scroll-view :scroll-y="true" 
		@scroll="scrollHandler" class="col" style="height: 1px;width: 100%;flex: 1;">
			<view class="headStatus" v-if="scrollTop > 50" :style="{
				zIndex: scrollTop < 10 ? 'unset' : 2,
				opacity: scrollTop < 10 ? '100' : scrollTop,
			}">
				<view class="title">{{ pageTitle }}</view>
			</view>
			<view class="userBox" style="height:100vh">
				<view class="userHeaderBox" :style="[titleStyle]">
					<view class="titlenav">
						<view class="carrHeader-left-icon" @click="goBack">
								<u-icon name="arrow-left" size="38" color="#000"></u-icon>
						</view>
						{{ pageTitle   }}
					</view>
					<view class="userHeadPic row">
						<view class="userHeadPicL">
							<u-avatar v-if="b2b_user_info.photo||statistics.image" :src="b2b_user_info.photo?b2b_user_info.photo:statistics.image" size="99" shape="circle"></u-avatar>
							<u-avatar v-else src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" size="99" shape="circle"></u-avatar>
							<!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" mode="widthFix"></image> -->
						</view>
						<view class="col column">
							<text v-if="b2b_user_info&&b2b_user_info.name" 
							class="userHeadPicR_title" @click="navigatorToProfile">
							Hello，{{ b2b_user_info.name }}
							</text>
							<text v-else-if="mall_UserInfo&&mall_UserInfo.Name" 
							class="userHeadPicR_title">
							Hello，{{mall_UserInfo.Name}}
							</text>
							<text class="userHeadPicR_text">
								尊敬的{{CustomerData.isVip==1?'VIP':''}}用户，<!-- #ifdef MP-DI -->国旅优选<!-- #endif --><!-- #ifdef MP-AG -->旅小友<!-- #endif -->已与您同行
								<text style="font-size: 28rpx;color: #9B571E;font-weight: bold;">{{ CustomerData.dayNum }}</text>天
							</text>
						</view>
					</view>
					<view class="userHeadPasBox">
						<view class="userHeadCostBox">
							<view class="userHeadCostType row-sb-n items-center">
								<view class="userHeadCostTText row items-center justify-center" 
								v-for="(item,index) in typeList" :key="index"
								:class="[msg.Type==item.ID?'active':'']"
								@click="InitialDate(item.ID)">
									<image v-show="msg.Type==item.ID" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638778211798604496.png" />
									<text>{{ item.Name }}</text>
								</view>
							</view>
							
							<view class="userHeadCostChart">
								<view style="position: relative;">
									<view class="userHeadCostTime row justify-center">
										<view>{{ StartTimes }}-{{ EndTimes }}</view>
									</view>
								</view>
								<!---->
								<view class="userHeadCostRing">
									<mrsongCharts v-if="chartsData.series[0].data.length>0"
									type='ring' 
									align='center'
									:config="config"
									:options="options"
									:charts-data="chartsData"
									height="600rpx" />
									<u-empty v-else text="暂无使用优惠，快去使用吧！" mode="coupon" padding-top="20" color="#000"></u-empty>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 21rpx;"></view>
				<view style="padding: 0 32rpx;width: 100vw;height: 1px;flex: 1;margin-bottom: 30rpx;">
					<view class="userMyOrderBox column">
						<view class="userMyOrderTitle row-sb-n" style="padding: 20rpx 0;">
							<view class="userMyOrderTL">省钱明细</view>
							<view class="userMyOrderTR row items-center" @click="goUrl('/pages/user-center/happinessPassbook')">
								<text class="userMyOrderTRTj">合计</text>
								<view class="userMyOrderTRQ"> <text>¥</text><text>{{ CustomerData.totalMoney }}</text></view>
								<!-- <u-icon class="userMyOrderTRR" name="arrow-down" size="28" color="#B2B3B3"></u-icon> -->
							</view>
						</view>
						<scroll-view :scroll-y="true" class="col"
						@scrolltolower="lower" 
						style="height: 1px;flex: 1; width: 100%;">
							<view class="userHeadPListBox">
								<view class="userHeadPList row" 
								v-for="(item,index) in dataList" :key="index"
								@click="goDetails(item)">
									<view class="userHeadPListL">
										<image mode="scaleToFill" :src="item.imgCover"/>
										<text>共{{item.peopleNum}}人</text>
									</view>
									<view class="userHeadPListA col column">
										<view class="userHeadPListATitel">
											<text>
												<template v-if="item.useType==1">幸福存折</template>
												<template v-if="item.useType==2">VIP折扣</template>
												<template v-if="item.useType==3">抵用券</template>
												<template v-if="item.useType==4">折扣券</template>
											</text>
											<!--{{ item.type==1?'收入':'支出' }}-->
											{{ item.lineName }}
										</view>
										<view class="userHeadPListATime row-sbas-n">
											<tetx>{{ item.updateTime }}</tetx>
										</view>
									</view>
									<view class="userHeadPListR row">
										¥{{item.type==1?'+':'-'}}{{ item.money }}
									</view>
								</view>
							</view>
							<u-empty v-if="dataList.length == 0 && !loading" text="暂无数据" mode="data" padding-top="20"></u-empty>
							<u-loadmore v-else :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#fff" />
						</scroll-view>
					</view>
				</view>
			</view>
			
			
		</scroll-view>
		<u-picker mode="time" v-model="showTime" :defaultTime="times" :params="params" @confirm = 'confirm'></u-picker>
	</view>
</template>

<script>
	import mrsongCharts from '@/uni_modules/mrsong-charts/components/mrsong-charts/mrsong-charts.vue';
	export default {
		components: {
			mrsongCharts
		},
		data() {
			return {
				pageTitle: "省钱统计",
				scrollTop: 0,
				showAuth: false,
				b2b_user_info: {},
				mall_UserInfo: {},
				typeList:[
					{Name:'累计省钱',ID:0},
					{Name:'月度省钱',ID:1},
					{Name:'年度省钱',ID:2},
				],
				msg:{
					StartTime:'',//	开始时间
					EndTime:'',
					Type: 0,
					pageIndex: 1,
					pageSize: 10,
				},
				statistics:{},
				dataList: [],
				status: "加载中",
				page_count: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				loading: false,
				showTime: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				year: '',
				month: '',
				StartTimes: '',
				EndTimes: '',
				CustomerData:{},
				titleStyle:{},
				config:{
					itemCount: 3, // x轴单屏显示数据的数量，默认为5个
					scrollShow: false, // 新增是否显示滚动条，默认false
					scrollAlign: 'left', // 滚动条初始位置
					rotateLabel: true, // X轴label旋转
					min: 0, // Y轴最小值
					// "max": 150, //Y轴大值
					unit: '', // Y轴单位
					enableScroll: false, // 开启滚动模式
					color: [
						// 颜色设置
						'#5A3645',
						'#CC8F5A',
						'#B73F10',
						'#193E7B',
						'#77432B',
					],
				},
				options:{
					xAxis: {
						itemCount: 3, // x轴单屏显示数据的数量，默认为5个
						scrollShow: false, // 新增是否显示滚动条，默认false
						scrollAlign: 'left', // 滚动条初始位置
						rotateLabel: true // X轴label旋转
					},
					yAxis: {
						data: [
							{
								min: 0, // Y轴最小值
								// "max": 150, //Y轴大值
								unit: '' // Y轴单位
							}
						]
					},
					enableScroll: true, // 开启滚动模式
					fontColor: "#4F360D",
					padding:[
						10,10,10,10
					],
					dataLabel: true,
					rotate: false,
					rotateLock: false,
					// color: ["#F6E7C8","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					title: {
						name: "已为您节省",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "¥24582",
						fontSize: 25,
						color: "#080A09",
						fontWeight: "700",
					},
					extra: {
          				ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 5,
							offsetAngle: 0,
							labelWidth: 0,
							border: true,
							borderWidth: 5,
							// borderColor: "rgba(255,255,255,.8)",
							linearType: "custom",
							customColor:[
								"#fff","#fff","#fff","#fff","#fff"
							],
							customRadius: 90,
							centerColor: "#fff",
							
						},
					},
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					pixelRatio: 1,
					animation: true,
				},
				chartsData:{
					series: [{
						data: [
							// {
							// 		name: '一班',
							// 		value: 82,
									
							// 	},
							// 	{
							// 		name: '二班',
							// 		value: 63
							// 	},
							// 	{
							// 		name: '三班',
							// 		value: 50
							// 	},
							// 	{
							// 		name: '四班',
							// 		value: 40,
							// 		"labelText":"四班:40人"
							// 	},
							// 	{
							// 		name: '五班',
							// 		value: 30,
							// 	}
							]
					}]
				},
			};
		},
		onLoad() {
			this.b2b_user_info = uni.getStorageSync('b2b_user');
			this.mall_UserInfo = uni.getStorageSync("mall_UserInfo");
			this.showAuth = !this.mall_UserInfo || !this.b2b_user_info;
		},
		onShow() {
			const that = this
            uni.getSystemInfo({
                success(res) {
                    that.titleStyle = {
                    paddingTop: `${res.statusBarHeight}px`
                    };
                },
            });
			this.InitialDate(-1)
			this.GetCustomerCenter()
			
		},
		methods: {
			formatNumberWithUnit(num) {
                if (num === 0) return '0.00';
                const units = ['', 'K', 'M', 'B', 'T']; // 单位数组：千(k)、百万(M)、十亿(B)、万亿(T)
                const exponent = Math.floor(Math.log10(num));
                const unitIndex = Math.max(0, Math.floor(exponent / 3)) - 1; // 计算单位索引
                // 缩放数值并保留三位有效数字
                const scaledNum = num / (10 ** (unitIndex * 3));
                const formatted = scaledNum.toLocaleString('en-US', { 
                    precision: 5, // 保留三位有效数字
                    rounding: 'round-trip' // 四舍五入
                });
                // 处理科学计数法（如 1.23e3 → 1230）
                if (formatted.includes('e')) {
                    const [significand, exp] = formatted.split('e');
                    return significand + '0'.repeat(parseInt(exp)) + units[unitIndex + 1];
                }
                if(formatted.substring(3,4)==',') return formatted.substring(0,3) + units[unitIndex + 1];
                return formatted.substring(0,4) + units[unitIndex + 1];
            },
			InitialDate(ID){
				if(ID!=-1){
					if(ID==this.msg.Type) return
					if(ID>=0) this.msg.Type = ID
				}
				const now = new Date();
				this.year = now.getFullYear();
				this.month = String(now.getMonth() + 1).padStart(2, '0');

				// this.msg.StartTime = this.year + '-' + this.month + '-01'
				// now.setMonth(now.getMonth() + 1, 0);
				// this.msg.EndTime = this.year + '-' + this.month + '-'+now.getDate()

				this.msg.EndTime = this.year + '-' + this.month + '-'+now.getDate()
				if(this.msg.Type==0){
					this.msg.StartTime = '2025' + '-' + '01' + '-01'
					this.StartTimes = '2025' + '.' + '01'
				}else if(this.msg.Type==1){
					this.msg.StartTime = this.year + '-' + this.month + '-01'
					this.StartTimes = this.year + '.' + this.month
				}else if(this.msg.Type==2){
					this.msg.StartTime = this.year + '-' + '01' + '-01'
					this.StartTimes = this.year + '.' + '01'
				}
				this.EndTimes = this.year + '.' + this.month
				this.chartsData.series[0].data = []
				this.getStatistics()
				this.dataList = []
				this.msg.pageIndex = 1
				this.getList()
			},
			confirm(e){
				uni.hideLoading()
				if(this.year==e.year&&this.month==e.month) return
				this.year = e.year
				this.month = e.month 
				this.times = this.year + '-' + this.month
				const now = new Date(this.year, this.month, 1); // 设置为下个月第1天
				now.setDate(now.getDate() - 1); // 减1天即为上个月最后一天
				this.msg.StartTime = this.year + '-' + this.month + '-01'
				this.msg.EndTime = this.year + '-' + this.month + '-'+now.getDate()
				this.research()
			},
			SelectDate(){
				this.showTime = true
			},
			goDetails(item) {
				let obj = JSON.stringify(item);
				let path = `/pages/user-center/discountDetails?data=${encodeURIComponent(obj)}&discountType=${item.useType}`
				uni.navigateTo({
					url: path,
				});
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			goUrl(url) {
				uni.navigateTo({ url });
			},
			GetCustomerCenter(){
				this.apipost('b2b_get_GetCustomerCenter_New',
					{},
					(res) => {
						uni.hideLoading()
						this.statistics = res.data
					},err=>{
						uni.showToast({
							title: err.message,
							icon: "none",
						});
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			research() {
				this.msg.pageIndex = 1
				this.dataList = []
				this.getList()
			},
			getStatistics() {
				this.apipost('b2b_get_GetCustomerSavingsStat',this.msg,
					(res) => {
						this.CustomerData = res.data
						this.options.subtitle.name = "¥" + res.data.totalMoney
						if(res.data.totalMoney>99999){
							this.options.subtitle.name = "¥" + this.formatNumberWithUnit(res.data.totalMoney)
						}
						let list = []
						res.data.list.forEach(item => {
							if(item.money>0){
								let name = item.type==2?item.typeName.substring(0,3):item.typeName.substring(0,1)
								let obj = {
									name: item.typeName,
									value: item.money,
									labelText: `${name}:${item.money}`
								}
								list.push(obj)
							}
						});
						this.chartsData.series[0].data = list
						if(this.chartsData.series[0].data.length==1){
							this.options.extra.ring.border = false
						}
					},(err)=>{
						
					}
				);
			},
			getList() {
				this.loading = true
				uni.showLoading({
					title: '加载中',
					icon: 'none'
				})
				this.apipost('b2b_get_GetCustomerSavingsPageList',this.msg,
					(res) => {
						this.loading = false
						uni.hideLoading();
						this.dataList = this.dataList.concat(res.data.pageData)
						this.page_count = res.data.pageCount
					},(err)=>{
						this.loading = false
						uni.hideLoading();
						uni.showToast({
							title: err.message,
							icon: "none",	
						})
					}
				);
			},
            goBack(){
                uni.navigateBack({delta:-1})
            }
		}
	};
</script>

<style scoped>
	@import url('../../asset/css/flex.css');
	.row-sbas-n {
		justify-content: space-between;
	}
	.relative {
		position: relative;
	}

	.userBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638779993389868884.png')no-repeat #E8D1A2;
        background-size: 100% auto;
	    height: 100vh;
		// padding-bottom: env(safe-area-inset-bottom);
	}

	.order_bar_list {
		padding: 22rpx 55rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

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

	.badge {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		padding: 0 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		background: #FF3166;
		color: #fff;
		min-width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
	}

	.headStatus {
		position: fixed;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background-image: linear-gradient(to right, #e6b865, #ebb45e);
	}

	.headStatus .title {
		font-size: 18px;
		color: #fff;
		flex: 1;
		width: 1px;
		line-height: 34px;
		text-align: center;
	}
	.userMyOrder {
		background: #FFF;
		border-radius: 20rpx;
		padding: 33rpx 0 22rpx 0;
	}
	.userMyOrderTitle {
		padding: 23rpx 31rpx 0 31rpx;
	}
	.userMyOrderTitL {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
	}
	.userMyOrderTitR {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #B2B3B3;
		align-items: center;
	}
	.userMyOrderTitRIght {
		margin-left: 11rpx;
		transform: rotate(90deg);
	}

	.orderProductBox {
		padding: 0 20rpx;
	}
	.orderProduct {
		width: 648rpx;
		height: 132rpx;
		background: #F7F7F7;
		border-radius: 18rpx;
		padding: 21rpx 20rpx;
	}
	.orderProductL {
		width: 91rpx;
		height: 88rpx;
		border-radius: 14rpx;
		overflow: hidden;
		margin-right: 18rpx;
	}
	.orderProductR_state {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #080A09;
		padding-top: 5rpx;
	}
	.orderProductR_text {
		width: 100%;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8C8C8C;
		padding-top: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
    .userMyOrderBox{
        background: #FFFFFF;
        height: 100%;
        overflow: hidden;
        border-radius: 20rpx;
        padding: 25rpx 34rpx 45rpx 34rpx;
    }
    .userHeadPList{
        padding: 20rpx 0;
    }
    .userHeadPListL{
        width: 91rpx;
        height: 88rpx;
        border-radius: 14rpx;
        overflow: hidden;
        position: relative;
    }
    .userHeadPListL image{
        width: 91rpx;
        height: 88rpx;
        display: block;
    }
    .userHeadPListL text{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: rgb(178, 179, 179,.8);
        border-radius: 0rpx 0rpx 14rpx 14rpx;
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx 0;
        text-align: center;
    }
    .userHeadPListA{
        margin-left: 29rpx;
        margin-right: 20rpx;
    }
    .userHeadPListATitel{
        font-weight: bold;
        font-size: 28rpx;
        color: #080A09;
        margin-top: 5rpx;
		width: 348rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
    }
	.userHeadPListATitel text{
		color: #8C8C8C;
		font-weight: 100;
		font-size: 28rpx;
		margin-right: 5rpx;
	}
    .userHeadPListATime{
        font-weight: 500;
        font-size: 24rpx;
        color: #8C8C8C;
        margin-top: 18rpx;
    }
    .userHeadPListR{
        font-weight: bold;
        font-size: 28rpx;
        color: #B99846;
    }
	.userHeaderBox{
        width: 750rpx;
    }
    .titlenav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #000;
        position: relative;
	}
    .carrHeader-left-icon{
        position: absolute;
        left: 32rpx;
        top: 7rpx;
        z-index: 2;
    }
    .userHeadPic{
        padding: 49rpx 20rpx 25rpx 62rpx;
    }
    .userHeadPicL{
        width: 97rpx;
        height: 97rpx;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 27rpx;
    }
    .userHeadPicL image{
        width: 97rpx;
        height: 97rpx;
        display: block;
    }
    .userHeadPicR_title{
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #080A09;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .userHeadPicR_text{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #61462E;
        margin-top: 16rpx;
        letter-spacing: 1rpx;
    }
    .jz_LineDetaVipPr{
		margin-top: 28rpx;
		position: relative;
		left: -20rpx;
	}
	.jz_LineDetaVip{
		width: 100%;
		height: 120rpx;
		background: linear-gradient(90deg, #3F423F, #313131);
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		padding: 15rpx 0 6rpx 0;
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}
	.jz_LineDetaVipTop{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #E2C27A;
		letter-spacing: .1rpx;
		display: flex;
		align-content: center;
		padding: 0 34rpx;
	}
	.jz_LineDetaVipTop img{
		width: 21rpx;
		height: 21rpx;
		display: inline-block;
		margin-left: 5rpx;
	}
	.jz_LineDetaVPB{
		display: flex;
		
	}
	.jz_LineDetaVPBBox{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaVPBN{
		width: 30rpx;
		height: 30rpx;
		background: #2E2E2E;
		border-radius: 50%;
		text-align: center;
		line-height: 28rpx;
		font-family: DIN Black;
		font-weight: bold;
		font-size: 24rpx;
		color:  #494949;;
	}
	.jz_LineDetaVPBLine{
		flex: 1;
		height: 10rpx;
		background: #000;
	}
	.jz_LineDetaVPBBoxI{
		position: relative;
		flex: 1;
	}
	.jz_LineDetaVPBBoxI img{
		width: 87rpx;
		height: 99rpx;
		position: absolute;
		bottom: -35rpx;
		right: 8rpx;
		z-index: 2;
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
		background: linear-gradient(270deg, #C99E59, #FFFFB3);
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
		background: #C99E59;
		color: #583F2C;
	}
    .VPBLRadiusL{
		border-radius: 20rpx 0 0 20rpx ;
	}
	.VPBLRadiusR{
		border-radius: 0 20rpx 20rpx 0;
	}
	.jz_LineDetaVPBY{
		position: absolute;
		left: -29rpx;
		right: 0;
		top: 0;
	}
    .userHeadPasBox{
        padding: 0 30rpx;
    }
    .userHeadCostBox{
        border-radius: 16rpx;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#FBF3E1), to(#F6E9CB));
        padding: 25rpx 22rpx 0rpx 22rpx;
    }
    .userHeadCostType{
        width: 641rpx;
        height: 93rpx;
        background: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638778209274571586.png")no-repeat;
        background-size: 641rpx auto;
		padding: 13rpx 16rpx;
    }
	.userHeadCostType image{
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}
	.userHeadCostTText{
		flex: 1;
		line-height: 64rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #4F360D;
		text-align: center;
	}
	.userHeadCostTText.active{
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(247,236,211,0.38);
		border-radius: 14rpx;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#313131), to(#3F423F ));
		color: #F3F1EF;
	}
	.userHeadCostTime{
		position: absolute;
		left: 0;
		right: 0;
		top: 32rpx;
	}
	.userHeadCostTime view{
		font-weight: 500;
		font-size: 24rpx;
		color: #4F360D;
		background: #EDDDBA;
		box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(211,181,119,0.5);
		border-radius: 19rpx;
		padding: 0 23rpx;
	}
	.userHeadCostChart{
		height: 570rpx;
		overflow: hidden;
	}
	.userHeadCostRing{
		padding-top: 20rpx;
	}
	.userMyOrderTL{
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
	}
	.userMyOrderTRTj{
		font-weight: 500;
		font-size: 24rpx;
		color: #B2B3B3;
	}
	.userMyOrderTRQ{
		font-weight: bold;
		font-size: 36rpx;
		color: #000;
		padding: 0 7rpx 0 10rpx;
	}
	.userMyOrderTRQ:first-child{
		font-size: 26rpx;
	}
	.userMyOrderTRR{
		transform: rotate(-90deg);
	}
</style>