1039 lines
25 KiB
Vue
1039 lines
25 KiB
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> |