1080 lines
39 KiB
Vue
1080 lines
39 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="bigBg">
|
||
<view class="top">
|
||
<view class="header" :style="{height: menu.bottom + 5 +'px'}">
|
||
<view class="headerContent" :style="{height: (menu.bottom - menu.top) + 'px'}">
|
||
<image class="leftIcon" @click="handleBack" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
|
||
</view>
|
||
</view>
|
||
<view :style="{paddingTop: menu.bottom + 5 + 8 +'px'}">
|
||
<view class="tabBox" >
|
||
{{ServerpartName || ''}}
|
||
<!-- <image :class="selectTab===1?'selectTabItem':'tabItem'" @click="handleChangeTab(1)" :src="selectTab===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/activeFirstTab.png':'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/firstTab.png'"/>-->
|
||
</view>
|
||
<scroll-view class="scrollView" :current="currentScroll" scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
|
||
<view class="bigView" :style="{width: `${60*selectList.length +20}px`}">
|
||
<view :id="'item'+index" :class="currentScroll===`item${index}`?'selectScrollItem':'scrollItem'" v-for="(item,index) in selectList" :key="index" @click="handleChangMonth(index)">{{item}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="content">
|
||
<!-- 对客营收 -->
|
||
<view class="customerRevenue">
|
||
<view class="contentRevenue">
|
||
<view class="contentTop">
|
||
<view class="contentTopLeft">
|
||
<!-- <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
|
||
<span class="contentTitle">对客销售<span class="contentUnit">/万元</span></span>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="dataBox">
|
||
<view class="dataItem" style="width: 40%">
|
||
<span class="dataBigValue" :style="{color:topDetail.RevenueINC.increaseRate>0?'#E83944':topDetail.RevenueINC.increaseRate<0?'#0E9976':''}">{{topDetail.RevenueINC && topDetail.RevenueINC.increaseRate?topDetail.RevenueINC.increaseRate<0?`${topDetail.RevenueINC.increaseRate}%`:`+${topDetail.RevenueINC.increaseRate}%` :'-'}}</span>
|
||
<span class="dataLabel">同比去年</span>
|
||
</view>
|
||
<view class="dataItem" style="width: 30%">
|
||
<span class="dataValue">{{topDetail.RevenueINC ? $util.getMoney(topDetail.RevenueINC.curYearData /10000):'-'}}</span>
|
||
<span class="dataLabel">2024年</span>
|
||
</view>
|
||
<view class="dataItem" style="width: 30%">
|
||
<span class="dataValue">{{topDetail.RevenueINC ? $util.getMoney(topDetail.RevenueINC.lYearData / 10000):'-'}}</span>
|
||
<span class="dataLabel">2023年</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="addBox">
|
||
增长
|
||
<span class="addNumber" :style="{color:topDetail.RevenueINC.increaseData>0?'#E83944':topDetail.RevenueINC.increaseData<0?'#0E9976':''}">{{topDetail.RevenueINC ? `${topDetail.RevenueINC.increaseData<0?'':'+'}${$util.getMoney(topDetail.RevenueINC.increaseData / 10000)}`:'-'}}</span>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
<view class="tableBox">
|
||
<view class="tableTop">
|
||
<span class="tableTitle">营收明细</span>
|
||
<span class="tableUnit">/万元</span>
|
||
</view>
|
||
|
||
<view class="tableContent">
|
||
<view class="tableLeft">
|
||
<view class="label">类别</view>
|
||
<view class="firstLabel">自营</view>
|
||
<view class="secondLabel">便利店</view>
|
||
<view class="secondLabel">餐饮客房</view>
|
||
<view class="firstLabel">外包</view>
|
||
<view class="secondLabel">商铺租赁</view>
|
||
</view>
|
||
<scroll-view class="tableRight" scroll-x="true">
|
||
<view class="labelBox">
|
||
<span class="label">2024年</span>
|
||
<span class="label">2023年</span>
|
||
<span class="label">增长</span>
|
||
<span class="label">增幅</span>
|
||
</view>
|
||
|
||
<view :class="item.type===1?'firstLabelBox':'secondLabelBox'" v-for="(item,index) in pageRevenueList" :key="index">
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'">{{item.curYearData?$util.getMoney(item.curYearData/10000):'-'}}</span>
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'">{{item.lYearData?$util.getMoney(item.lYearData/10000):'-'}}</span>
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseData>0?'#E83944':item.increaseData<0?'#0E9976':''}">{{item.increaseData?`${item.increaseData<0?'':'+'}${$util.getMoney(item.increaseData/10000)}`:'-'}}</span>
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseRate>0?'#E83944':item.increaseRate<0?'#0E9976':''}">{{item.increaseRate?`${item.increaseRate<0?'':'+'}${item.increaseRate}%`:'-'}}</span>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 营业收入 -->
|
||
<view class="customerRevenue" style="margin-top: 24rpx">
|
||
<view class="contentRevenue" style="background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg2.png')">
|
||
<view class="contentTop">
|
||
<view class="contentTopLeft">
|
||
<!-- <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
|
||
<span class="contentTitle">营业收入<span class="contentUnit">/万元</span></span>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="dataBox">
|
||
<view class="dataItem" style="width: 40%">
|
||
<span class="dataBigValue" :style="{color:topDetail.AccountINC.increaseRate>0?'#E83944':topDetail.AccountINC.increaseRate<0?'#0E9976':''}">{{topDetail.AccountINC && topDetail.AccountINC.increaseRate?topDetail.AccountINC.increaseRate<0?`${topDetail.AccountINC.increaseRate}%`:`+${topDetail.AccountINC.increaseRate}%` :'-'}}</span>
|
||
<span class="dataLabel">同比去年</span>
|
||
</view>
|
||
<view class="dataItem" style="width: 30%">
|
||
<span class="dataValue">{{topDetail.AccountINC ? $util.getMoney(topDetail.AccountINC.curYearData /10000):'-'}}</span>
|
||
<span class="dataLabel">2024年</span>
|
||
</view>
|
||
<view class="dataItem" style="width: 30%">
|
||
<span class="dataValue">{{topDetail.AccountINC ? $util.getMoney(topDetail.AccountINC.lYearData /10000):'-'}}</span>
|
||
<span class="dataLabel">2023年</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="addBox">
|
||
增长
|
||
<span class="addNumber" :style="{color:topDetail.AccountINC.increaseData>0?'#E83944':topDetail.AccountINC.increaseData<0?'#0E9976':''}">{{topDetail.AccountINC ? `${topDetail.AccountINC.increaseData<0?'':'+'}${ $util.getMoney(topDetail.AccountINC.increaseData / 10000)}`:'-'}}</span>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
<view class="tableBox">
|
||
<view class="tableTop">
|
||
<span class="tableTitle">营收明细</span>
|
||
<span class="tableUnit">/万元</span>
|
||
</view>
|
||
|
||
<view class="tableContent" >
|
||
<view class="tableLeft">
|
||
<view class="label">类别</view>
|
||
<view class="firstLabel">自营</view>
|
||
<view class="secondLabel">便利店</view>
|
||
<view class="secondLabel">餐饮客房</view>
|
||
<view class="firstLabel">外包</view>
|
||
<view class="secondLabel">商铺租赁</view>
|
||
</view>
|
||
<scroll-view class="tableRight" scroll-x="true">
|
||
<view class="labelBox">
|
||
<span class="label">2024年</span>
|
||
<span class="label">2023年</span>
|
||
<span class="label">增长</span>
|
||
<span class="label">增幅</span>
|
||
</view>
|
||
<view :class="item.type===1?'firstLabelBox':'secondLabelBox'" v-for="(item,index) in pageAccountList" :key="index">
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'">{{item.curYearData?$util.getMoney(item.curYearData/10000):'-'}}</span>
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'">{{item.lYearData?$util.getMoney(item.lYearData/10000):'-'}}</span>
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseData>0?'#E83944':item.increaseData<0?'#0E9976':''}">{{item.increaseData?`${item.increaseData<0?'':'+'}${$util.getMoney(item.increaseData/10000)}`:'-'}}</span>
|
||
<span :class="item.type===1?'firstLabel':'secondLabel'" :style="{color:item.increaseRate>0?'#E83944':item.increaseRate<0?'#0E9976':''}">{{item.increaseRate?`${item.increaseRate<0?'':'+'}${item.increaseRate}%`:'-'}}</span>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 入区车流 -->
|
||
<view class="customerRevenue" style="margin-top: 24rpx">
|
||
<view class="contentRevenue" style="background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg3.png');background-size: cover;padding-bottom: 24rpx">
|
||
<view class="contentTop">
|
||
<view class="contentTopLeft">
|
||
<!-- <span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>-->
|
||
<span class="contentTitle">入区车流
|
||
<span class="contentUnit">/万辆</span>
|
||
</span>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="dataBox">
|
||
<view class="dataItem" style="width: 40%">
|
||
<span class="dataBigValue" :style="{color:topDetail.BayonetINC.increaseRate>0?'#E83944':topDetail.BayonetINC.increaseRate<0?'#0E9976':''}">{{topDetail.BayonetINC && topDetail.BayonetINC.increaseRate?`${topDetail.BayonetINC.increaseRate<0?'':'+'}${topDetail.BayonetINC.increaseRate}%` :'-'}}</span>
|
||
<span class="dataLabel">同比去年</span>
|
||
</view>
|
||
<view class="dataItem" style="width: 30%">
|
||
<span class="dataValue">{{topDetail.BayonetINC ? $util.getMoney(topDetail.BayonetINC.curYearData /10000):'-'}}</span>
|
||
<span class="dataLabel">2024年</span>
|
||
</view>
|
||
<view class="dataItem" style="width: 30%">
|
||
<span class="dataValue">{{topDetail.BayonetINC ? $util.getMoney(topDetail.BayonetINC.lYearData /10000):'-'}}</span>
|
||
<span class="dataLabel">2023年</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="addBox">
|
||
增长
|
||
<span class="addNumber" :style="{color:topDetail.BayonetINC.increaseData>0?'#E83944':topDetail.BayonetINC.increaseData<0?'#0E9976':''}">{{topDetail.BayonetINC ? `${topDetail.BayonetINC.increaseData<0?'':'+'}${$util.getMoney(topDetail.BayonetINC.increaseData / 10000)}`:'-'}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
export default {
|
||
data(){
|
||
return {
|
||
statusBarHeight: '',
|
||
menu: {},
|
||
lastDay: '',
|
||
searchText: '',
|
||
pageDataObj: {},
|
||
OwnerListSum: {},
|
||
MerchantSum: {},
|
||
thisMonth: 0,
|
||
selectTab: 1,// 选择的tab
|
||
selectIndex:0,// 选择的月份 或者累计
|
||
selectList:[],// 滚动的数组
|
||
currentScroll:'',// 当前滚动到的地方
|
||
useInfo:{},
|
||
topDetail:{},// tab是1 的时候 三块的顶部详情
|
||
pageRevenueList:[],// 页面上显示的对客营收
|
||
pageAccountList:[],// 页面上营业收入
|
||
curYear:2024,// 当前年
|
||
ServerpartId:'',
|
||
ServerpartName:'',// 服务区名称
|
||
}
|
||
},
|
||
async onLoad(option){
|
||
console.log('option',option)
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
uni.setStorageSync('phoneInfo',systemInfo)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
|
||
// 获取用户信息
|
||
let userInfo = uni.getStorageSync('vuex')
|
||
userInfo = JSON.parse(userInfo)
|
||
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
||
if (option.time){
|
||
this.lastDay = option.time
|
||
const date = new Date(this.lastDay)
|
||
let m = date.getMonth() + 1
|
||
}
|
||
if (option.id){
|
||
this.ServerpartId = option.id
|
||
}
|
||
if (option.name){
|
||
this.ServerpartName = option.name
|
||
}
|
||
if (option.month){
|
||
this.searchText = option.month
|
||
const selectDate = new Date(option.month)
|
||
let selectYear = selectDate.getFullYear()
|
||
this.curYear = selectYear
|
||
|
||
const nowDate = new Date()
|
||
let nowYear = nowDate.getFullYear()
|
||
let monthNumber = 0
|
||
if (nowYear>selectYear){
|
||
monthNumber = 12
|
||
}else{
|
||
monthNumber = selectDate.getMonth() + 1
|
||
}
|
||
let selectMonth = selectDate.getMonth() + 1
|
||
|
||
this.thisMonth = selectMonth
|
||
this.selectIndex = selectMonth
|
||
this.currentScroll = 'item' + this.thisMonth
|
||
|
||
for (let i=1;i<=monthNumber;i++){
|
||
this.selectList.push(`${i}月`)
|
||
}
|
||
this.selectList.unshift('累计')
|
||
}
|
||
console.log('this.selectList',this.selectList)
|
||
await this.handleGetRevenueData()
|
||
// await this.handleGetTableData()
|
||
uni.hideLoading()
|
||
},
|
||
methods:{
|
||
// 跳转到服务区排名
|
||
handleGoSort(type){
|
||
this.$util.toNextRoute('navigateTo', `/pages/revenueStatistics/servicePartList?type=${type}&yearMonth=${this.searchText}&thisMonth=${this.thisMonth}`)
|
||
},
|
||
async handleGetRevenueData(){
|
||
const date = new Date()
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
const type = this.currentScroll.split('item')[1]==='0'?2:1
|
||
let lastDay = uni.getStorageSync('lastDay')
|
||
const req = {
|
||
calcType: type,//计算方式：1【当月】，2【累计】
|
||
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
|
||
curYear: this.curYear,//本年年份
|
||
compareYear: this.curYear-1,//历年年份
|
||
StatisticsMonth:this.thisMonth===0?y>this.curYear?12:m:this.thisMonth,//结算月份
|
||
StatisticsDate: lastDay,
|
||
ServerpartId:this.ServerpartId
|
||
}
|
||
console.log('req',req)
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetMonthlyBusinessAnalysis',req)
|
||
console.log('data',data)
|
||
let res = data.Result_Data.List
|
||
if (res && res.length>0){
|
||
let everyTop = {}// 每一块顶部内容的汇总对象
|
||
let revenueList = [{},{},{},{},{}]// 对客营收
|
||
let accountList = [{},{},{}]// 营业收入
|
||
res.forEach(item=>{
|
||
if (item.ServerpartName==='累计'){
|
||
everyTop = item
|
||
}else if(item.SPRegionTypeId===1){
|
||
// SPRegionTypeId===1 自营
|
||
revenueList[0] = {...item.RevenueINC, type:1}
|
||
accountList[0] = {...item.AccountINC, type:1}
|
||
}else if(item.SPRegionTypeId===2){
|
||
// SPRegionTypeId===2 外包
|
||
revenueList[3] = {...item.RevenueINC, type:1}
|
||
accountList[3] = {...item.AccountINC, type:1}
|
||
}else if(item.ServerpartId===1){
|
||
revenueList[1] = {...item.RevenueINC, type:2}
|
||
accountList[1] = {...item.AccountINC, type:2}
|
||
}else if(item.ServerpartId===2){
|
||
revenueList[2] = {...item.RevenueINC,type:2}
|
||
accountList[2] = {...item.AccountINC,type:2}
|
||
}else if(item.ServerpartId===3){
|
||
revenueList[4] = {...item.RevenueINC,type:2}
|
||
accountList[4] = {...item.AccountINC,type:2}
|
||
}
|
||
})
|
||
this.topDetail = everyTop
|
||
this.pageRevenueList = revenueList
|
||
this.pageAccountList = accountList
|
||
}
|
||
},
|
||
async handleChangMonth(index){
|
||
this.selectIndex = index
|
||
this.currentScroll = 'item' + index
|
||
this.thisMonth = index
|
||
uni.showLoading({
|
||
title:'正在加载'
|
||
})
|
||
await this.handleGetRevenueData()
|
||
// await this.handleGetTableData()
|
||
uni.hideLoading()
|
||
},
|
||
handleChangeTab(value){
|
||
this.selectTab = value
|
||
// if (value===1){
|
||
// this.handleGetRevenueData()
|
||
// }else{
|
||
// this.handleGetTableData()
|
||
// }
|
||
},
|
||
handleBack(){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
handleGoMerchantAccount(){
|
||
uni.navigateTo({
|
||
url: '/pages/merchantAccount/index'
|
||
})
|
||
},
|
||
bindDateChange(e){
|
||
this.OwnerListSum = {}
|
||
this.MerchantSum = {}
|
||
this.pageDataObj = {}
|
||
this.searchText = e.detail.value
|
||
this.handleGetTableData()
|
||
},
|
||
async handleGetTableData(){
|
||
|
||
const date = new Date()
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
const type = this.currentScroll.split('item')[1]==='0'?2:1
|
||
const req = {
|
||
calcType: type,//计算方式：1【当月】，2【累计】
|
||
pushProvinceCode:'340000',
|
||
StatisticsMonth:`${this.curYear}${this.thisMonth===0?y>this.curYear?12:`${m<10?'0'+m:m}`:`${this.thisMonth<10?'0'+this.thisMonth:this.thisMonth}`}`,
|
||
StatisticsDate:this.lastDay
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetAccountReceivable',req)
|
||
if (data.Result_Code===100){
|
||
this.pageDataObj = data.Result_Data
|
||
let OwnerAcountSum = 0
|
||
let OwnerEntrySum = 0
|
||
let OwnerReceivableSum = 0
|
||
|
||
let MerchantAcountSum = 0
|
||
let MerchantEntrySum = 0
|
||
let MerchantReceivableSum = 0
|
||
this.pageDataObj.OwnerList.AcountList.forEach(item=>{
|
||
OwnerAcountSum+=Number(item.value)
|
||
})
|
||
this.pageDataObj.OwnerList.EntryList.forEach(item=>{
|
||
OwnerEntrySum+=Number(item.value)
|
||
})
|
||
this.pageDataObj.OwnerList.ReceivableList.forEach(item=>{
|
||
OwnerReceivableSum+=Number(item.value)
|
||
})
|
||
|
||
this.pageDataObj.MerchantList.AcountList.forEach(item=>{
|
||
MerchantAcountSum+=Number(item.value)
|
||
})
|
||
this.pageDataObj.MerchantList.EntryList.forEach(item=>{
|
||
MerchantEntrySum+=Number(item.value)
|
||
})
|
||
this.pageDataObj.MerchantList.ReceivableList.forEach(item=>{
|
||
MerchantReceivableSum+=Number(item.value)
|
||
})
|
||
let OwnerListSum = {
|
||
AcountSum:this.$util.getMoney(OwnerAcountSum/ 10000),
|
||
EntrySum:this.$util.getMoney(OwnerEntrySum/ 10000),
|
||
ReceivableSum:this.$util.getMoney(OwnerReceivableSum / 10000)
|
||
}
|
||
let MerchantSum = {
|
||
AcountSum:this.$util.getMoney(MerchantAcountSum/ 10000),
|
||
EntrySum:this.$util.getMoney(MerchantEntrySum/ 10000),
|
||
ReceivableSum:this.$util.getMoney(MerchantReceivableSum/ 10000)
|
||
}
|
||
this.OwnerListSum = OwnerListSum
|
||
this.MerchantSum = MerchantSum
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import '/static/public/revenueStatistics/stylesheet.css';
|
||
.main{
|
||
height: 100%;
|
||
background: #f5f5f5;
|
||
.bigBg{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 640rpx;
|
||
.top{
|
||
width: 100%;
|
||
//height: 640rpx;
|
||
//position: relative;
|
||
box-sizing: border-box;
|
||
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
|
||
//background-repeat: no-repeat;
|
||
//background-size: 100% 100%;
|
||
|
||
//background: linear-gradient(#FF7F37 0%, #FDA03E 60%, #F5F5F5 100%);
|
||
.header{
|
||
position: fixed;
|
||
top: 0;left: 0;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
box-sizing: border-box;
|
||
.headerContent{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
position: absolute;
|
||
bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
.leftIcon{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
.headerTimeBox{
|
||
margin-left: 24rpx;
|
||
.time{
|
||
display: flex;
|
||
align-items: center;
|
||
.timeIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.text{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
line-height: 44rpx;
|
||
}
|
||
.icon{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.pageTitle{
|
||
font-size: 56rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 68rpx;
|
||
position: absolute;
|
||
left: 32rpx;
|
||
}
|
||
.tabBox{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #FFFFFF;
|
||
line-height: 68rpx;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 32rpx;
|
||
.tabItem{
|
||
width: 204rpx;
|
||
height: 68rpx;
|
||
margin-right: 48rpx;
|
||
}
|
||
.selectTabItem{
|
||
width: 204rpx;
|
||
height: 68rpx;
|
||
margin-right: 48rpx;
|
||
}
|
||
}
|
||
.scrollView{
|
||
width: calc(100vw - 64rpx);
|
||
height: 70rpx;
|
||
margin-top: 24rpx;
|
||
margin-left: 32rpx;
|
||
.bigView{
|
||
height: 100%;
|
||
.scrollItem{
|
||
width: 60px;
|
||
display: inline-block;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #AFD1FF;
|
||
line-height: 44rpx;
|
||
font-style: normal;
|
||
text-align: center;
|
||
}
|
||
.selectScrollItem{
|
||
width: 60px;
|
||
display: inline-block;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
height: 50rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
position: relative;
|
||
}
|
||
.selectScrollItem:after{
|
||
content:'';
|
||
display: inline-block;
|
||
width: 80%;
|
||
position: absolute;
|
||
height: 4rpx;
|
||
left: 10%;
|
||
bottom: -5px;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx 48rpx;
|
||
margin-top: 24rpx;
|
||
//position: relative;
|
||
//top: -268rpx;
|
||
//transform: translateY(-260rpx);
|
||
.revenueBox{
|
||
width: 100%;
|
||
height: 100%;
|
||
background:#fff;
|
||
border-radius: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 4rpx;
|
||
.bigBox{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.revenueBoxHeader{
|
||
width: 100%;
|
||
border-radius: 12rpx 12rpx 0 0;
|
||
box-sizing: border-box;
|
||
padding: 22rpx 24rpx;
|
||
.headerTitle{
|
||
font-size: 36rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
line-height: 44rpx;
|
||
}
|
||
.revenueImg{
|
||
position: absolute;
|
||
top: 0;right: 0;
|
||
width: 266rpx;
|
||
height: 208rpx;
|
||
}
|
||
.revenueContent{
|
||
z-index: 2;
|
||
width: 100%;
|
||
position: relative;
|
||
.contentTitleBox{
|
||
display: flex;
|
||
align-items: center;
|
||
.selectMonth{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 24rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 4rpx;
|
||
background: #F2792E;
|
||
margin-right: 8rpx;
|
||
}
|
||
.contentTitle{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
.contentUnit{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.sumBox{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 24rpx;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
.sumLogo{
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
}
|
||
.headerTitle{
|
||
font-size: 36rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
line-height: 44rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.sumText{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
.sumMoney{
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
.sumUnit{
|
||
margin-top: 8rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
.unit{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.revenueAmount{
|
||
width: 100%;
|
||
margin-top: 62rpx;
|
||
.amountItem{
|
||
.itemTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.itemTopLeft{
|
||
display: flex;
|
||
align-items: center;
|
||
.leftIcon{
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
.itemTitle{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
.itemUnit{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
margin-left: 4rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.itemTopRight{
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
}
|
||
.itemBottom{
|
||
margin-top: 24rpx;
|
||
.itemBottomItem{
|
||
width: 25%;
|
||
display: inline-block;
|
||
.bottomItemTitle{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
.bottomItemValue{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.ydRevenue{
|
||
.revenueBoxHeader{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg4.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
//background: linear-gradient(#FCF3E5 0%, #FDF6EC 22%,#FFFFFF 40%, #FFFFFF 100%);
|
||
.headerTitle{
|
||
color: #EC6C00;
|
||
}
|
||
}
|
||
}
|
||
.merchantRevenue{
|
||
.revenueBoxHeader{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg5.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
//background: linear-gradient(#E9F5F9 0%, #E9F5F9 22%,#FFFFFF 40%, #FFFFFF 100%);
|
||
.headerTitle{
|
||
color: #018ABD;
|
||
}
|
||
}
|
||
}
|
||
.otherData{
|
||
.revenueBoxHeader{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg6.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
//background: linear-gradient(#F1F7FF 0%, #FFFFFF 20% , #FFFFFF 100%);
|
||
.headerTitle{
|
||
color: #096EF7;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.customerRevenue{
|
||
width: 100%;
|
||
padding: 2rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
.contentRevenue{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16rpx;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBg1.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 22rpx 0;
|
||
.contentTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.contentTopLeft{
|
||
display: flex;
|
||
align-items: center;
|
||
.contentMonth{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 24rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 4rpx;
|
||
margin-right: 8rpx;
|
||
background: #F2792E;
|
||
}
|
||
.contentTitle{
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 8rpx;
|
||
.contentUnit{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
.contentTopRight{
|
||
display: flex;
|
||
align-items: center;
|
||
.moreText{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #2C99FE;
|
||
line-height: 40rpx;
|
||
}
|
||
.moreIcon{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dataBox{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
.dataItem{
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 32rpx;
|
||
.dataBigValue{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 50rpx;
|
||
color: #E83944;
|
||
line-height: 64rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.dataLabel{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.dataValue{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #160002;
|
||
line-height: 64rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addBox{
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 16rpx;
|
||
.addNumber{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #E83944;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.line{
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #F5F4F4;
|
||
margin: 40rpx 0;
|
||
}
|
||
|
||
.tableBox{
|
||
.tableTop{
|
||
display: flex;
|
||
align-items: center;
|
||
.tableTitle{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.tableUnit{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.tableContent{
|
||
margin-top: 16rpx;
|
||
width: 100%;
|
||
height: 460rpx;
|
||
display: flex;
|
||
.tableLeft{
|
||
width: 192rpx;
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
box-shadow: 4rpx 0rpx 6rpx 0rpx rgba(0,0,0,0.05);
|
||
box-sizing: border-box;
|
||
padding: 24rpx 0 24rpx;
|
||
.label{
|
||
width: 100%;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #57607B;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
height: 50rpx;
|
||
}
|
||
.firstLabel{
|
||
width: 100%;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin: 32rpx 0;
|
||
}
|
||
.secondLabel{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding-left: 16rpx;
|
||
margin: 32rpx 0;
|
||
}
|
||
}
|
||
|
||
.tableRight{
|
||
width: calc(100% - 192rpx);
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 24rpx 0;
|
||
.labelBox{
|
||
width: 592rpx;
|
||
.label{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #57607B;
|
||
text-align: right;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 148rpx;
|
||
}
|
||
}
|
||
.firstLabelBox{
|
||
width: 592rpx;
|
||
height: 40rpx;
|
||
margin: 32rpx 0;
|
||
.firstLabel{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 26rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 148rpx;
|
||
}
|
||
}
|
||
.secondLabelBox{
|
||
width: 592rpx;
|
||
height: 40rpx;
|
||
margin: 32rpx 0;
|
||
.secondLabel{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 26rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 148rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|