chuangte_bike_newxcx/page_shanghu/guanli/yunying.vue

<template>
	<view class="page">
		<u-navbar title="运营状况" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
			title-size='36' height='45'></u-navbar>
		<scroll-view class="page-scroll" refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="leiji">
				<view class="li">
					<view class="top">
					    {{qbobj.orderUserCount == null ? '0人' : qbobj.orderUserCount + '人'}}
					</view>
					<view class="bot">
						累计用户
					</view>
				</view>
				<view class="li">
					<view class="top">
						￥{{qbobj.bonusActualAmount == null ? 0 : qbobj.bonusActualAmount}}
					</view>
					<view class="bot">
						累计收益
					</view>
				</view>
				<view class="li">
					<view class="top">
						￥{{qbobj.orderActualTotalAmount == null ? 0 : qbobj.orderActualTotalAmount}}
					</view>
					<view class="bot">
						订单金额 
					</view>
				</view>
				<view class="li">
					<view class="top">
						{{qbobj.orderCount == null ? '0' : qbobj.orderCount}}笔
					</view>
					<view class="bot">
						订单数量
					</view>
				</view>
			</view>
			<view class="time">
				<view class="timewz">
					时间范围 
				</view>
				<view class="inptime">
					<view class="date-btn date-btn-start" hover-class="is-hover" hover-stay-time="100" @click="showTimePicker('start')">
					  <u-icon name="calendar" color="#2C8AF0" size="28"></u-icon>{{kstime}}
					</view> 
					--
			        <view class="date-btn" hover-class="is-hover" hover-stay-time="100" @click="showTimePicker('end')">
			        	{{jstime}}
			        </view> 					
				</view>
			</view>
			<u-picker mode="time" v-model="oneshow" :params="oneparams" @confirm="confirmone"></u-picker>
			<u-picker mode="time" v-model="twoshow" :params="twoparams" @confirm="confirmtwo"></u-picker>
			
			<view class="riqi">
				<view class="riqi-item" :class="riqiindex == 0 ? 'actives' : ''" hover-class="is-hover" hover-stay-time="100" @click="btnriqi(0)">
					今日
				</view>
				<view class="riqi-item" :class="riqiindex == 1 ? 'actives' : ''" hover-class="is-hover" hover-stay-time="100" @click="btnriqi(1)">
					昨日
				</view>
				<view class="riqi-item" :class="riqiindex == 2 ? 'actives' : ''" hover-class="is-hover" hover-stay-time="100" @click="btnriqi(2)">
					本月
				</view>
				<view class="riqi-item" :class="riqiindex == 3 ? 'actives' : ''" hover-class="is-hover" hover-stay-time="100" @click="btnriqi(3)">
					上月
				</view>
			</view>
			<view class="" style="width: 100%;height: 20rpx;"></view>
			<!-- 营收类 -->
			<view class="" style="height: 64vh;overflow: scroll;" v-if="index == 0">
				<view class="ordertj">
					<view class="one">
						<view class="two">
							￥{{yunyingobj.orderActualAmount == null ? 0 : yunyingobj.orderActualAmount}}
						</view>
						<view class="thr">
							订单总金额
						</view>
					</view>
					<view class="one">
						<view class="two">
							{{yunyingobj.orderCount == null ? 0 : yunyingobj.orderCount}}笔
						</view>
						<view class="thr">
							订单总数
						</view>
					</view>
					<view class="one">
						<view class="two">
							{{yunyingobj.finishedOrderCount == null ? 0 : yunyingobj.finishedOrderCount}}笔
						</view>
						<view class="thr">
							已完成订单
						</view>
					</view>
					<view class="one">
						<view class="two">
							{{yunyingobj.orderStatusMap.PROCESSING == null ? 0 : yunyingobj.orderStatusMap.PROCESSING}}笔
						</view>
						<view class="thr">
							进行中订单
						</view>
					</view>
				</view>
				<view class="yinshouqk">
					<view class="name income-title">
						<text class="tip-icon" hover-class="is-hover" hover-stay-time="100" @click.stop="showIncomeExplain('bonus')">?</text>
						我的收入<text style="color: rgb(242,75,23);margin-left: 10rpx;font-size: 32rpx;">{{yunyingobj.bonusActualAmount == null ? 0 : yunyingobj.bonusActualAmount}}</text>元
					</view>
					<view class="name income-title" style="margin-top: 10rpx;">
						<text class="tip-icon" hover-class="is-hover" hover-stay-time="100" @click.stop="showIncomeExplain('order')">?</text>
						订单收入<text style="color: rgb(242,75,23);margin-left: 10rpx;font-size: 32rpx;">{{yunyingobj.orderActualReceivedAmount == null ? 0 : yunyingobj.orderActualReceivedAmount}}</text>元
					</view>
					<view class="zupibox">
						<view class="zupi">
							<view class="one">
								<view class="onewz">
									骑行费
								</view>
								<view class="twowz">
									￥{{yunyingobj.orderRiddingFee == null ? 0 : yunyingobj.orderRiddingFee}}
								</view>
							</view>
							<view class="one">
								<view class="onewz">
									调度费
								</view>
								<view class="twowz">
									￥{{yunyingobj.orderDispatchFee == null ? 0 : yunyingobj.orderDispatchFee}}
								</view>
							</view>
							<view class="one">
								<view class="onewz">
									管理费
								</view>
								<view class="twowz">
									￥{{yunyingobj.orderManageFee == null ? 0 : yunyingobj.orderManageFee}}
								</view>
							</view>
						</view>
						<view class="zupi" style="margin-top: 30rpx;">
							<view class="one">
								<view class="onewz">
									车损费
								</view>
								<view class="twowz">
									￥{{yunyingobj.orderDeductionFee == null ? 0 : yunyingobj.orderDeductionFee}}
								</view>
							</view>
							<view class="one">
								<view class="onewz">
									自动退款
								</view>
								<view class="twowz">
									￥{{yunyingobj.orderAutoRefundAmount == null ? 0 : yunyingobj.orderAutoRefundAmount}}
								</view>
							</view>
							<view class="one">
								<view class="onewz">
									人工退款
								</view>
								<view class="twowz">
									￥{{yunyingobj.orderAdminRefundAmount == null ? 0 : yunyingobj.orderAdminRefundAmount}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 运维类 -->
			<view class="yunwei" v-if="index == 1">
				<view class="cheliang" style="padding: 30rpx 62rpx;box-sizing: border-box;">
					<view class="name">
						工单管理
					</view>
					<view class="dabox">
						<view class="li">
							<view class="bfb">
								236
							</view>
							<view class="cl">
								调度工单
							</view>
						</view>
						<view class="li">
							<view class="bfb">
								365
							</view>
							<view class="cl">
								维修工单
							</view>
						</view>
						<view class="li">
							<view class="bfb">
								3256
							</view>
							<view class="cl">
								投诉工单
							</view>
						</view>
					</view>
				</view>
				<view class="clzb">
					<view class="name">
						车辆指标
					</view>
					<view class="ul">
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								总投放
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								待使用
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								使用中
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								临时锁车
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								仓库中
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								禁用中
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								投放中
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								运营中P点外
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								运营中超区
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								零收益车辆
							</view>
						</view>
						<view class="li">
							<view class="shu">
								100
							</view>
							<view class="zi">
								调度设备
							</view>
						</view>
						<view class="li"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		
        <!-- <TabBar :indexs='1' style=""></TabBar> -->
	</view>
</template>

<script>
	import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				index:0,
				successAmount:'',
				riqiindex:0,
				oneparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				oneshow: false,
				twoparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				twoshow: false,
				kstime:'',
				jstime:'',
				yunyingobj:{},
				qbobj:{},
				infoobj:{},
				areaId:'',
				waitDivideAmount:'',
				isRefreshing: false,
			}
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync('adminAreaid')) {
				this.areaId = uni.getStorageSync('adminAreaid')
				console.log(this.areaId);
				this.getinfo()
				this.getCurrentDate(this.riqiindex)
			}else{
				this.getinfo()
				this.getCurrentDate(this.riqiindex)
			}
			
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.getinfo()
				this.getCurrentDate(this.riqiindex)
				setTimeout(() => {
					this.isRefreshing = false
				}, 1000)
			},
			// 点击跳转到账户明细
			btnmx(){
				uni.navigateTo({
					url:'/page_shanghu/mingxi?userId=' + this.infoobj.userId
				})
			},
			// 请求个人信息
			getinfo() {
			    this.$u.get(`/getInfo`).then(res => {
			        if (res.code == 200) {
			            this.infoobj = res.user
						this.successAmount = res.stat.withdraw.successAmount == null ? 0 : Number(res.stat.withdraw.successAmount)
						this.waitDivideAmount = res.stat.bonus.waitDivideAmount == null ? 0 : res.stat.bonus.waitDivideAmount
						this.gettongji()
						this.getqb()
			        }
			    })
			}, 
			// 请求全部运营统计数据
			getqb() {
				
			    let StatKeys = 'order_user_count,bonus_actual_amount,order_actual_amount,order_count'
			    this.$u.get(`/dashboard/revenueStat?keys=${StatKeys}&dateRange=&userId=${this.infoobj.userId}&areaId=${this.areaId}`).then(res => {
			        if (res.code == 200) {
			            this.qbobj = res.data
			        }
			    })
			}, 
			// 请求筛选运营统计数据
			gettongji() {
			    let StatKeys = 'order_actual_amount,order_count,order_end_status_count,order_status_count,bonus_actual_amount,order_ridding_fee,order_deduction_fee,order_dispatch_fee,order_manage_fee,order_refund_amount'
			    this.$u.get(`/dashboard/revenueStat?keys=${StatKeys}&dateRange=${this.kstime + ',' + this.jstime}&userId=${this.infoobj.userId}&areaId=${this.areaId}`).then(res => {
			        if (res.code == 200) {
			            this.yunyingobj = res.data
			        }
			    })
			}, 
			// 一开始就获取当前年月日
			getCurrentDate(num) {
			    const currentDate = new Date()
			    const year = currentDate.getFullYear()
			    const month = currentDate.getMonth() + 1
			    const day = currentDate.getDate()
			    const formatDate = (year, month, day) => {
			        const formattedMonth = month < 10 ? `0${month}` : month
			        const formattedDay = day < 10 ? `0${day}` : day
			        return `${year}-${formattedMonth}-${formattedDay}`
			    }
			    const getFirstDayOfMonth = (year, month) => {
			        return new Date(year, month - 1, 1)
			    }
			    const getLastDayOfMonth = (year, month) => {
			        return new Date(year, month, 0)
			    }
			    switch (num) {
			        case 0:
			            this.kstime = formatDate(year, month, day)
			            this.jstime = formatDate(year, month, day)
			            break
			        case 1:
			            const yesterday = new Date(currentDate)
			            yesterday.setDate(currentDate.getDate() - 1)
			            this.kstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
			            this.jstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
			            break
			        case 2:
			            const firstDayOfMonth = getFirstDayOfMonth(year, month)
			            this.kstime = formatDate(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, firstDayOfMonth.getDate())
			            this.jstime = formatDate(year, month, day)
			            break
			        case 3:
			            const lastMonthFirstDay = getFirstDayOfMonth(year, month - 1)
			            const lastMonthLastDay = getLastDayOfMonth(year, month - 1)
			            this.kstime = formatDate(lastMonthFirstDay.getFullYear(), lastMonthFirstDay.getMonth() + 1, lastMonthFirstDay.getDate())
			            this.jstime = formatDate(lastMonthLastDay.getFullYear(), lastMonthLastDay.getMonth() + 1, lastMonthLastDay.getDate())
			            break
			        default:
			            this.kstime = formatDate(year, month, day)
			            this.jstime = formatDate(year, month, day)
			            break
			    }
			},
			// 选择开始时间
			confirmone(e){
				this.kstime = e.year + '-' + e.month + '-' + e.day
				this.riqiindex = -1
				this.gettongji()
			},
			// 选择结束时间
			confirmtwo(e){
				this.jstime = e.year + '-' + e.month + '-' + e.day
				this.riqiindex = -1
				this.gettongji()
			},
			// 点击跳转到提现
			btntx(){
				uni.navigateTo({
					url:'/page_shanghu/gongzuotai/AccountDetails'
				})
			},
			// 点击切换日期
			btnriqi(num){
				this.riqiindex = num
				this.getCurrentDate(this.riqiindex)
				this.gettongji()
			},
			// 点击切换tab
			btntab(num){
				this.index = num
			},
			showTimePicker(type) {
				if(type === 'start') {
					this.oneshow = true
				} else {
					this.twoshow = true
				}
			},
			showIncomeExplain(type) {
				const message = type === 'bonus' ? '结算后的分成收入' : '创建时间在此期间的订单收入'
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 5000
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		background: linear-gradient(180deg, #F3F4F6 0%, #FFFFFF 100%);
	}
	.page-scroll{
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.is-hover{
		opacity: 0.85;
		transform: scale(0.98);
	}
	.ordertj{
		width: 710rpx;
		height: auto;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		margin: auto;
		margin-top: 30rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;
		.one{
			text-align: center;
			flex: 1;
			position: relative;
			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 20%;
				height: 60%;
				width: 2rpx;
				background: #F3F4F6;
			}
			.two{
				font-weight: bold;
				font-size: 34rpx;
				color: #3B82F6;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			}
			.thr{
				margin-top: 16rpx;
				color: #6B7280;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
	page {
		background: #F3F4F6;
	}
	.actives{
		color: #fff !important;
		background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%) !important;
		border-color: transparent !important;
		box-shadow: 0 8rpx 20rpx rgba(59, 130, 246, 0.25) !important;
	}
	.clzb{
		width: 710rpx;
		height: auto;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		margin: auto;
		margin-top: 30rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		.name{
			font-weight: 600;
			font-size: 34rpx;
			color: #1F2937;
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 28rpx;
				background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
				border-radius: 4rpx;
			}
		}
		.ul{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 10rpx;
		   .li{
		   	  width: 25%;
		   	  text-align: center;
			  margin-top: 40rpx;
			  position: relative;
			  .shu{
				  font-weight: bold;
				  font-size: 36rpx;
				  color: #3B82F6;
				  font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			  }
			  .zi{
				  font-size: 24rpx;
				  font-weight: 500;
				  color: #6B7280;
				  margin-top: 12rpx;
			  }
		   }	
		}
	}
	.cheliang{
		width: 710rpx;
		height: auto;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		margin: auto;
		margin-top: 30rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		.name{
			font-weight: 600;
			font-size: 34rpx;
			color: #1F2937;
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 28rpx;
				background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
				border-radius: 4rpx;
			}
		}
		.dabox{
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			background: #F8FAFC;
			border-radius: 24rpx;
			padding: 30rpx 0;
			border: 1rpx solid #F1F5F9;
			.li{
				text-align: center;
				flex: 1;
				position: relative;
				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					top: 20%;
					height: 60%;
					width: 2rpx;
					background: #E5E7EB;
				}
				.bfb{
					font-weight: bold;
					font-size: 40rpx;
					color: #3B82F6;
					font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
				}
				.cl{
					font-size: 26rpx;
					font-weight: 500;
					color: #6B7280;
					margin-top: 12rpx;
				}
			}
		}
	}
	.zupibox{
		width: 100%;
		height: auto;
		background: #F8FAFC;
		border-radius: 24rpx;
		border: 1rpx solid #F1F5F9;
		margin: auto;
		margin-top: 30rpx;
		padding: 36rpx 20rpx;
		box-sizing: border-box;
		.zupi{
			display: flex;
			justify-content: space-between;
			justify-content: center;
			.one{
				width: 33%;
				text-align: center;
				position: relative;
				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					top: 20%;
					height: 60%;
					width: 2rpx;
					background: #E5E7EB;
				}
				.onewz{
					font-size: 26rpx;
					font-weight: 500;
					color: #6B7280;
					margin-top: 10rpx;
				}
				.twowz{
					font-size: 30rpx;
					font-weight: bold;
					color: #3B82F6;
					margin-top: 16rpx;
					font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
				}
			}
		}
	}
	.yinshouqk{
		width: 710rpx;
		height: auto;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 30rpx;
		.zongfy{
			display: flex;
			justify-content: space-between;
			margin-top: 54rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			.top{
				text-align: center;
				.topwz{
					font-weight: bold;
					font-size: 36rpx;
					color: #1F2937;
					font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
				}
				.botwz{
					font-size: 26rpx;
					font-weight: 500;
					color: #6B7280;
					margin-top: 10rpx;
				}
			}
			image{
				width: 78rpx;
				height: 78rpx;
			}
		}
		.name{
			font-weight: 600;
			font-size: 30rpx;
			color: #1F2937;
		}
		.income-title{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			text {
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			}
		}
		.tip-icon{
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
			color: #FFFFFF;
			text-align: center;
			font-size: 22rpx;
			font-weight: 600;
			margin-right: 12rpx;
			flex-shrink: 0;
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 10rpx rgba(59, 130, 246, 0.3);
			&:active {
				transform: scale(0.9);
			}
		}
	}
	.riqi{
		.riqi-item{
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: blur(10px);
			border-radius: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #3B82F6;
			text-align: center;
			border: 1rpx solid #BFDBFE;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			&:active {
				transform: scale(0.95);
			}
		}
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		width: 710rpx;
		box-sizing: border-box;
	}
	.time{
		width: 710rpx;
		height: 110rpx;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40rpx;
		align-items: center;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		.timewz{
			font-weight: 600;
			font-size: 30rpx;
			color: #1F2937;
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 28rpx;
				background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
				border-radius: 4rpx;
			}
		}
		.inptime{
			display: flex;
			align-items: center;
			color: #3B82F6;
			background: #EFF6FF;
			border-radius: 36rpx;
			width: 480rpx;
			justify-content: space-between;
			padding: 0 16rpx;
			height: 72rpx;
			.date-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
				height: 56rpx;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #3B82F6;
				transition: all 0.3s ease;
				&:active {
					background: #DBEAFE;
				}
			}
			.date-btn-start{
				column-gap: 8rpx;
			}
			span, text {
				color: #9CA3AF;
				font-size: 24rpx;
			}
		}
	}
	.leiji{
		width: 710rpx;
		height: auto;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		box-sizing: border-box;
		margin: auto;
		margin-top: 30rpx;
		.li{
			text-align: center;
			flex: 1;
			position: relative;
			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 20%;
				height: 60%;
				width: 2rpx;
				background: #F3F4F6;
			}
			.top{
				font-weight: bold;
				font-size: 34rpx;
				color: #3B82F6;
				margin-top: 12rpx;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			}
			.bot{
				margin-top: 16rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #6B7280;
			}
		}
	}
	.yinshoubox{
		display: flex;
		justify-content: space-between;
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		margin: 30rpx auto;
		width: 710rpx;
		background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(59, 130, 246, 0.25);
		.rt{
			.tx{
				width: 160rpx;
				height: 64rpx;
				background: #FFFFFF;
				box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
				border-radius: 32rpx;
				text-align: center;
				line-height: 64rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #3B82F6;
				margin-top: 30rpx;
				transition: all 0.3s ease;
				&:active {
					transform: scale(0.95);
				}
			}
			.txjl{
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(255,255,255,0.9);
				margin-top: 30rpx;
				text-align: right;
			}
		}
		.lt{
			.zhye{
				font-weight: 500;
				font-size: 28rpx;
				color: rgba(255,255,255,0.8);
			}
			.price{
				font-weight: bold;
				font-size: 56rpx;
				color: #FFFFFF;
				margin-top: 12rpx;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			}
			.ljtx{
				margin-top: 30rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(255,255,255,0.8);
			}
		}
	}
	.active{
		color: #fff !important;
		text{
			display: block;
			width: 64rpx;
			height: 8rpx;
			background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
			border-radius: 4rpx;
			margin: auto;
			margin-top: 12rpx;
			box-shadow: 0 4rpx 10rpx rgba(59, 130, 246, 0.4);
		}
	}
	.tabs{
		display: flex;
		padding-top: 108rpx;
		padding-left: 56rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		view{
			margin-right: 72rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: rgba(255,255,255,0.8);
			transition: all 0.3s ease;
			&:active {
				opacity: 0.8;
			}
		}
	}
    .bj{
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient(180deg, #1E3A8A 0%, #3B82F6 100%);
		border-radius: 0 0 60rpx 60rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
		box-shadow: 0 12rpx 40rpx rgba(59, 130, 246, 0.2);
	}
</style>