712 lines
19 KiB
Vue
712 lines
19 KiB
Vue
<template>
|
||
<view class="" :style="lineRotate? 'overflow:hidden;height:100%;':''">
|
||
<div class="uni-flex ai-center jc-between">
|
||
<view class="uni-inline-item modle-title">
|
||
<image src="/static/images/revenue/ysqs.png" mode="aspectFit"></image>
|
||
<text class="strong-text">{{theRequest.name||'省内'}}营收趋势</text>
|
||
|
||
</view>
|
||
<view class="uni-flex ai-center line-tab-box">
|
||
<view class="line-tab-unit" v-for="(d,index) in dateTypeList " :key="index" :class="{'active': revenueLineDate==d.type}" @click="changeDate('revenueLineDate',d.type)">
|
||
{{d.name}}
|
||
</view>
|
||
|
||
</view>
|
||
</div>
|
||
<view class="pop-revenue-canvas" :class="{'active':lineRotate}">
|
||
<view class="uni-flex align-center pop-revenue-date" >
|
||
<view v-for="(d,index) in dateTypeList " :key="index" :class="{'active': revenueLineDate==d.type}" @click="changeDate('revenueLineDate',d.type)">
|
||
{{d.bigName}}
|
||
</view>
|
||
</view>
|
||
<view v-show="lineRotate">
|
||
<canvas canvas-id="ratateRevenueLine" id="ratateRevenueLine" class="operation-content"
|
||
@touchstart="touchLine($event,'ratateRevenueLine')"></canvas>
|
||
</view>
|
||
<view class="pop-revenue-title">
|
||
|
||
<view class="canvas-title">
|
||
<view >
|
||
{{showMsg.timeText || theRequest.time}}
|
||
</view>
|
||
<view v-show="showMsg.Revenue_Amount">
|
||
营收金额：¥{{$util.fmoney(showMsg.Revenue_Amount,2)}}
|
||
</view>
|
||
</view>
|
||
<view class="pop-title">
|
||
<view>{{theRequest.name||'省内'}}营收趋势</view>
|
||
<text class="uni-icon uni-icon-close-filled" @tap="lineRotate =false"></text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="revenue-line-box" v-show="revenueLineMsg[revenueLineDate].Revenue_Amount">
|
||
<view class="uni-flex ai-center ">
|
||
<view class="revenue-line-data" :class="{'active': revenueLineType==0}" @click="changeDate('revenueLineType',0)">
|
||
<p>营收金额<p>
|
||
<p>{{revenueLineDate == 2? yearAmout :$util.fmoney(revenueLineMsg[revenueLineDate].Revenue_Amount,2)}} <text v-if="revenueLineDate == 2" style="font-size: 24rpx;">亿</text></p>
|
||
|
||
</view>
|
||
<view class="revenue-line-data" :class="{'active': revenueLineType==1}" @click="changeDate('revenueLineType',1)">
|
||
<p>客单笔数</p>
|
||
<p>{{$util.fmoney(revenueLineMsg[revenueLineDate].Ticke_Count,2)}}</p>
|
||
</view>
|
||
<view class="revenue-line-data" :class="{'active': revenueLineType==2}" @click="changeDate('revenueLineType',2)">
|
||
<p>客单均价</p>
|
||
<p>{{$util.fmoney(revenueLineMsg[revenueLineDate].Average_Amount,2)}}</p>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="text-title"> {{typeName[revenueLineType]}}比上{{dateTypeList[revenueLineDate].type==0? '周':dateTypeList[revenueLineDate].name}} <text class="text-week">({{sevenDate[revenueLineDate]}})</text></view>
|
||
<view :class="revenuelineList[revenueLineDate][revenueLineType].isTopUp ? 'up-text-title':'down-text-title'">{{revenuelineList[revenueLineDate][revenueLineType].Top_Difference}}%</view>
|
||
<view class="text-title">
|
||
{{typeName[revenueLineType]}}趋势
|
||
<cover-view class="rotate-btn" @tap="rotaCanvas('revenueLine')">
|
||
<cover-image src="/static/images/revenue/rotate.png" mode="aspectFit"></cover-image>
|
||
</cover-view>
|
||
</view>
|
||
<view :style="lineRotate? 'display:none;': ''">
|
||
|
||
<canvas canvas-id="revenueLine" id="revenueLine" class="operation-content" @touchstart="touchLine($event,'revenueLine')"></canvas>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="revenue-line-box" v-if="revenueLineMsg[revenueLineDate].down_deff">
|
||
<view class="title">客单交易</view>
|
||
<view class="text-title"> 客单数量比上{{dateTypeList[revenueLineDate].type==0? '周':dateTypeList[revenueLineDate].name}} </view>
|
||
<view :class="revenuelineList[revenueLineDate][3].isTopUp ? 'up-text-title':'down-text-title'">{{revenueLineMsg[revenueLineDate].down_deff}}%</view>
|
||
<view :style="lineRotate? 'display:none;': ''">
|
||
<canvas canvas-id="revenueClounm" id="revenueClounm" class="operation-content"
|
||
@touchstart="touchLine($event,'revenueClounm')"></canvas>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex';
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
|
||
var rincanvas = {};
|
||
var _self;
|
||
export default {
|
||
data (){
|
||
const lastDay = this.$util.cutDate(new Date(), 'YYYY/MM/DD', -1)
|
||
return {
|
||
lastDay: lastDay,
|
||
sevenDate: [],
|
||
theRequest:{},
|
||
revenueLineDate: 0,
|
||
lineRotate: false,
|
||
urlName: 'WeChat/GetRevenueTrends',
|
||
yearAmout: 0,
|
||
showMsg: {
|
||
|
||
height: this.pageWindowHeight
|
||
}, //横屏显示的信息
|
||
dateTypeList: [
|
||
{
|
||
type: 0,
|
||
staticticsType: 'Week',
|
||
name: '近七日',
|
||
bigName:'近七日',
|
||
value:[]
|
||
},
|
||
{
|
||
type: 1,
|
||
staticticsType: 'Month',
|
||
name: '月',
|
||
bigName:'近1月',
|
||
value: []
|
||
},
|
||
{
|
||
type: 2,
|
||
staticticsType: 'Year',
|
||
name: '年',
|
||
bigName:'近1年',
|
||
value: []
|
||
}
|
||
] , // 0 周统计， 1 月统计 2 年统计
|
||
revenueLineType: 0, // 0 Revenue, 1 Ticke, 2 Average
|
||
revenueLineMsg: {0:{},1:{},2:{}}, // 营收趋势
|
||
revenuelineList: {0:[],1:[],2:[]},
|
||
typeName: ['营收金额','客单笔数','客单均价'] //
|
||
}
|
||
},
|
||
computed:{
|
||
...mapGetters({'user':'getUser'}),
|
||
|
||
},
|
||
methods:{
|
||
rotaCanvas(id){
|
||
let listMsg = this.revenuelineList[this.revenueLineDate][this.revenueLineType]
|
||
if(listMsg){
|
||
this.showLine({
|
||
id: 'ratateRevenueLine',
|
||
data: listMsg.data,
|
||
categories: listMsg.categories,
|
||
rotate: true,
|
||
width: uni.upx2px(434),
|
||
height: this.showMsg.height- uni.upx2px(90)
|
||
});
|
||
|
||
}
|
||
this.lineRotate = true
|
||
// let opt = {
|
||
// categories: listMsg.categories,
|
||
// series: listMsg.data,
|
||
// rotate: opts.rotate = !opts.rotate
|
||
// }
|
||
|
||
// rincanvas[id].updateData(opt)
|
||
},
|
||
changeDate(name,index){
|
||
let _this =this
|
||
let oldDateType = _this.revenueLineDate.toString()
|
||
|
||
if(name=='revenueLineDate' && oldDateType !=index)
|
||
{
|
||
let column = _this.revenuelineList[index][3]
|
||
if(column){
|
||
_this.showClounm({
|
||
id: 'revenueClounm',
|
||
data: column.data,
|
||
categories: column.categories,
|
||
revenueLineDate:index
|
||
});
|
||
}
|
||
}
|
||
this[name] = index
|
||
|
||
let listMsg = _this.revenuelineList[_this.revenueLineDate][_this.revenueLineType]
|
||
if(listMsg){
|
||
_this.showLine({
|
||
id: 'revenueLine',
|
||
data: listMsg.data,
|
||
categories: listMsg.categories
|
||
});
|
||
if(_this.lineRotate ){
|
||
_this.showLine({
|
||
id: 'ratateRevenueLine',
|
||
rotate: true,
|
||
width: uni.upx2px(434),
|
||
height: _this.showMsg.height-uni.upx2px(90),
|
||
data: listMsg.data,
|
||
categories: listMsg.categories,
|
||
|
||
});
|
||
}
|
||
}else{
|
||
uni.showLoading({
|
||
title: '正在加载...',
|
||
mask:true
|
||
})
|
||
this.getTender()
|
||
}
|
||
|
||
},
|
||
|
||
touchLine(e,id) {
|
||
let _this = this
|
||
|
||
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||
rincanvas[id].showToolTip(e, {
|
||
format: function (item, category) {
|
||
if(id=="ratateRevenueLine"){
|
||
_this.showMsg.Revenue_Amount = item.data
|
||
_this.showMsg.timeText = category
|
||
_this.$forceUpdate()
|
||
return category
|
||
}else {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
getTender() { // 营收趋势
|
||
let _this = this
|
||
let obj = this.theRequest
|
||
let Statictics_Type= this.dateTypeList.map(n=>{return n.staticticsType} )
|
||
let Report_Type= ['Revenue','Ticke','Average']
|
||
let bili = ['Revenue_Amount','Ticke_Count','Average_Amount']
|
||
let typeName= ['营收金额','客单笔数','客单均价']
|
||
let DateIndex = parseInt(_this.revenueLineDate)
|
||
let typeIndex = parseInt(_this.revenueLineType)
|
||
let revenueLineMsg = _this.revenueLineMsg[DateIndex]
|
||
_this.$request.$webGet(this.urlName,{
|
||
Statictics_Type: Statictics_Type[DateIndex],
|
||
Report_Type: Report_Type[typeIndex],
|
||
groupType: obj.GroupType,
|
||
pushProvinceCode: obj.ProvinceCode,
|
||
Serverpart_Id: obj.Serverpart_Id,
|
||
Statistics_Date: _this.theRequest.time || this.lastDay
|
||
}).then(res=>{
|
||
|
||
if(res.Result_Code==100) {
|
||
revenueLineMsg.Revenue_Amount = res.Result_Data.Revenue_Amount
|
||
revenueLineMsg.Ticke_Count = res.Result_Data.Ticke_Count
|
||
revenueLineMsg.Average_Amount = res.Result_Data.Average_Amount
|
||
|
||
|
||
let _list = []
|
||
let listRevenueDetils = _this.pushCanvasData(res.Result_Data.listRevenueDetils)
|
||
let list = _this.pushCanvasData(res.Result_Data.listTickeDetils)
|
||
let listAverageDetils = _this.pushCanvasData(res.Result_Data.listAverageDetils)
|
||
_list.push(listRevenueDetils,list,listAverageDetils)
|
||
_this.showLine({
|
||
id: 'revenueLine',
|
||
categories: listRevenueDetils[0],
|
||
data: [{name:typeName[typeIndex],data:listRevenueDetils[1]}],
|
||
|
||
});
|
||
_this.showClounm({
|
||
id: 'revenueClounm',
|
||
categories: list[0],
|
||
data: [{name:'客单交易',data:list[1],textColor: '#B3B3B3'}],
|
||
revenueLineDate: DateIndex
|
||
});
|
||
_this.yearAmout = ( res.Result_Data.Revenue_Amount / 100000000).toFixed(2)
|
||
if(_this.lineRotate){
|
||
_this.showLine({
|
||
id: 'ratateRevenueLine',
|
||
rotate: true,
|
||
width: uni.upx2px(434),
|
||
height: _this.showMsg.height-uni.upx2px(90),
|
||
categories: listRevenueDetils[0],
|
||
data: [{name:typeName[typeIndex],data:listRevenueDetils[1]}],
|
||
|
||
});
|
||
}
|
||
bili.forEach((biliName,i)=>{
|
||
let topDeff = res.Result_Data[Report_Type[i]+'_Proportion'].replace('%','')
|
||
_this.revenuelineList[_this.revenueLineDate][i] = {
|
||
categories: _list[i][0],
|
||
data: [{name:typeName[i], data:_list[i][1]}],
|
||
Top_Difference: topDeff.replace('-',''),
|
||
isTopUp: topDeff.indexOf('-')>-1? false:true
|
||
}
|
||
if(i==1){ // 客单笔数柱状图
|
||
revenueLineMsg.down_deff = topDeff.replace('-','')
|
||
|
||
_this.revenuelineList[_this.revenueLineDate][3] = {
|
||
data: [{name:'客单交易',data:list[1],textColor: '#B3B3B3'}],
|
||
categories: list[0],
|
||
Top_Difference: topDeff.replace('-',''),
|
||
isTopUp: topDeff.indexOf('-')>-1? false:true
|
||
}
|
||
|
||
}
|
||
})
|
||
// _this.rotaCanvas('ratateRevenueLine')
|
||
_this.$forceUpdate()
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
},
|
||
pushCanvasData(list) { // 拼接营收趋势数据
|
||
let _this = this
|
||
let _list = [[],[]]
|
||
if(list.length){
|
||
|
||
list.map(n=>{
|
||
let date = _this.revenueLineDate ==2 ? n.Statictics_Date:_this.$util.cutDate(n.Statictics_Date,'MM/DD')
|
||
_list[0].push(date)
|
||
_list[1].push(n.Statictics_Amount)
|
||
|
||
})
|
||
}
|
||
return _list
|
||
},
|
||
showLine (obj) {
|
||
rincanvas[obj.id] = new uCharts({
|
||
$this:_self,
|
||
canvasId: obj.id,
|
||
colors: ['#667ED5'],
|
||
type: 'area',
|
||
fontSize: 12,
|
||
legend: {show:false},
|
||
dataLabel: false,
|
||
dataPointShape: false,
|
||
padding: [30,20,12,12],
|
||
background:'#FFFFFF',
|
||
dataPointShapeType:'hollow',
|
||
categories: obj.categories,
|
||
series: obj.data,
|
||
animation: false,
|
||
rotate: obj.rotate || false,
|
||
// enableScroll:true, //开启图表拖拽功能
|
||
xAxis: {
|
||
disabled: false,
|
||
disableGrid: true,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
labelCount: 5,
|
||
// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
|
||
// scrollShow: true,//新增是否显示滚动条，默认false
|
||
// scrollAlign: 'left',//滚动条初始位置
|
||
},
|
||
yAxis: {
|
||
|
||
data: [{
|
||
disabled: false,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
format:(val)=>{return val<10000 ? parseInt(val) : parseInt(val/10000)+'w'}
|
||
}],
|
||
gridType: 'dash',
|
||
gridColor: '#eee',
|
||
dashLength: 2,
|
||
splitNumber: 3,
|
||
|
||
},
|
||
width: obj.width || uni.upx2px(686),
|
||
height: obj.height || uni.upx2px(350),
|
||
extra: {
|
||
area:{
|
||
addLine: true,
|
||
gradient:true,
|
||
type: 'curve'
|
||
},
|
||
tooltip:{
|
||
// dashLength: uni.upx2px(4),
|
||
gridType: 'dash',
|
||
gridColor: '#acacac',
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
showClounm(obj) {
|
||
let xAxis = {
|
||
disabled: false,
|
||
disableGrid: true,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
labelCount: 12,
|
||
// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
|
||
// scrollShow:true,//新增是否显示滚动条，默认false
|
||
// scrollAlign:'left',//滚动条初始位置
|
||
}
|
||
if(obj.revenueLineDate!==0) {
|
||
xAxis = {
|
||
disabled: false,
|
||
disableGrid: true,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
labelCount: 6,
|
||
// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
|
||
// scrollShow:true,//新增是否显示滚动条，默认false
|
||
// scrollAlign:'left',//滚动条初始位置
|
||
}
|
||
}
|
||
rincanvas[obj.id] = new uCharts({
|
||
$this:_self,
|
||
canvasId: obj.id,
|
||
type: 'column',
|
||
legend: { show: false },
|
||
dataLabel: false,
|
||
colors: ['#D1DBEF'],
|
||
fontSize: 11,
|
||
background:'#FFFFFF',
|
||
// padding: [30,12,12,12],
|
||
animation: true,
|
||
categories: obj.categories,
|
||
series: obj.data,
|
||
enableScroll: false, //开启图表拖拽功能obj.revenueLineDate!==0 ? true:
|
||
xAxis: xAxis,
|
||
yAxis: {
|
||
data: [{
|
||
disabled: false,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
format:(val)=>{return val<10000 ? parseInt(val) : parseInt(val/10000)+'w'}
|
||
}],
|
||
|
||
gridType: 'dash',
|
||
gridColor: '#eee',
|
||
dashLength: 2,
|
||
splitNumber: 3,
|
||
},
|
||
|
||
width: uni.upx2px(686),
|
||
height: uni.upx2px(350),
|
||
extra: {
|
||
column: {
|
||
type:'group',
|
||
width: obj.revenueLineDate!==0 ? uni.upx2px(8*obj.revenueLineDate) :uni.upx2px(26),
|
||
border: 0
|
||
},
|
||
|
||
}
|
||
});
|
||
|
||
},
|
||
|
||
},
|
||
onLoad(option) {
|
||
_self = this
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
|
||
if(option.time){
|
||
let start = option.time
|
||
this.sevenDate =
|
||
[
|
||
`${this.$util.cutDate(new Date(start),'MM.DD',-13)}-${this.$util.cutDate(new Date(start),'MM.DD',-7)}`,
|
||
`${this.$util.cutDate(new Date(start),'MM.DD',-58)}-${this.$util.cutDate(new Date(start),'MM.DD',-29)}`,
|
||
`${this.$util.cutDate(new Date(start),'YYYY.MM',-720)}-${this.$util.cutDate(new Date(start),'YYYY.MM',-364)}`
|
||
]
|
||
this.theRequest.time = option.time
|
||
this.theRequest.name = option.name ||''
|
||
this.theRequest.ProvinceCode = option.ProvinceCode || this.user.ProvinceCode
|
||
if(option.id){
|
||
|
||
this.theRequest.Serverpart_Id = option.id
|
||
this.theRequest.GroupType = 1010
|
||
}else{
|
||
|
||
this.urlName = 'WeChat/GetRevenueTrendsById'
|
||
|
||
}
|
||
this.getTender()
|
||
|
||
|
||
}else{
|
||
uni.hideLoading()
|
||
this.theRequest = {}
|
||
this.isLoading = false
|
||
this.showPage = false
|
||
this.noDataText = '抱歉,暂无营收趋势数据'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.modle-title {
|
||
padding-left: 24rpx;
|
||
font-size: 30rpx;
|
||
padding-top: 42rpx;
|
||
padding-bottom: 20rpx;
|
||
font-weight: bolder;
|
||
}
|
||
.modle-title image {
|
||
max-width: 36rpx;
|
||
max-height: 36rpx;
|
||
}
|
||
/* 营收分析 */
|
||
.line-tab-box {
|
||
padding-top: 20rpx;
|
||
/* padding-bottom: 30rpx; */
|
||
}
|
||
.line-tab-unit {
|
||
/* width: 60rpx; */
|
||
height: 44rpx;
|
||
font-size: 26rpx;
|
||
color: #A9A9A9;
|
||
background: #ececec;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
margin-right: 32rpx;
|
||
padding: 0 10rpx;
|
||
|
||
}
|
||
.line-tab-unit.active {
|
||
background-color: #667ED5;
|
||
color: #fff;
|
||
}
|
||
.revenue-line-box {
|
||
background-color: #fff;
|
||
margin: 0 16rpx;
|
||
border-radius: 20rpx;
|
||
padding: 34rpx 16rpx 34rpx 16rpx;
|
||
box-shadow: 1rpx 0rpx 6rpx 0px rgba(224,224,224,0.54);
|
||
}
|
||
.revenue-line-box + .revenue-line-box {
|
||
margin-top: 38rpx;
|
||
}
|
||
.revenue-line-data {
|
||
width: 216rpx;
|
||
height: 144rpx;
|
||
background-color: #F8F8F8;
|
||
border-radius: 12rpx;
|
||
color: #A5A5A5;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
padding-top: 20rpx;
|
||
border: 2rpx solid #F8F8F8;
|
||
box-sizing: border-box;
|
||
}
|
||
.revenue-line-data + .revenue-line-data {
|
||
margin-left: 24rpx;
|
||
}
|
||
.revenue-line-data p:last-child {
|
||
font-size: 40rpx;
|
||
font-family: 'Bahnschrift Regular';
|
||
line-height: 1.2;
|
||
}
|
||
.revenue-line-data.active {
|
||
border: 2rpx solid #889DED;
|
||
background-color: #f1f3fb;
|
||
color: #667ED5;
|
||
}
|
||
.revenue-line-box .text-title {
|
||
color: #9498A4;
|
||
font-size: 24rpx;
|
||
margin-top: 38rpx;
|
||
position: relative;
|
||
}
|
||
.revenue-line-box .up-text-title {
|
||
color: #E76E40;
|
||
font-family: 'Bahnschrift Regular';
|
||
font-size: 36rpx;
|
||
line-height: 1.5;
|
||
}
|
||
.up-text-title:after {
|
||
content: "";
|
||
margin-left: 12rpx;
|
||
width: 20rpx;
|
||
height: 22rpx;
|
||
display: inline-block;
|
||
background: url('/static/images/revenue/up-arrow.png') no-repeat center;
|
||
background-size: contain;
|
||
|
||
}
|
||
.text-week {
|
||
color: #C2C2C2;
|
||
margin-left: 32rpx;
|
||
}
|
||
.down-text-title:after {
|
||
content: "";
|
||
margin-left: 12rpx;
|
||
width: 20rpx;
|
||
height: 22rpx;
|
||
display: inline-block;
|
||
background: url('/static/images/revenue/down-arrow.png') no-repeat center;
|
||
background-size: contain;
|
||
|
||
}
|
||
.revenue-line-box .down-text-title {
|
||
color: #39A15E;
|
||
font-family: 'Bahnschrift Regular';
|
||
font-size: 36rpx;
|
||
line-height: 1.5;
|
||
}
|
||
.revenue-line-box .title {
|
||
color: #000;
|
||
font-size: 28rpx;
|
||
font-weight: bolder;
|
||
}
|
||
.revenue-line-box canvas.operation-content {
|
||
height: 350rpx;
|
||
width: 686rpx;
|
||
/* margin: 0 auto 0 auto; */
|
||
background-color: #fff;
|
||
}
|
||
.rotate-btn {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 14rpx;
|
||
height: 56rpx;
|
||
width: 56rpx;
|
||
text-align: center;
|
||
}
|
||
.rotate-btn cover-image {
|
||
width: 27rpx;
|
||
height: 27rpx;
|
||
}
|
||
/* 弹出横屏 */
|
||
.pop-revenue-canvas {
|
||
width: 750rpx;
|
||
height: calc(100vh);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
background-color: #fff;
|
||
opacity: 0;
|
||
transition: all 0.5s;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-top: 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.pop-revenue-canvas.active {
|
||
z-index: 9999;
|
||
opacity: 1;
|
||
}
|
||
.pop-revenue-canvas .pop-revenue-date {
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 106rpx;
|
||
}
|
||
.pop-revenue-canvas .pop-revenue-date view {
|
||
transform: rotate(90deg);
|
||
width: 197rpx;
|
||
text-align: center;
|
||
flex-direction: column;
|
||
|
||
margin: 142rpx 0;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
|
||
}
|
||
.pop-revenue-canvas .pop-revenue-date view.active {
|
||
background: #E7F1FD;
|
||
color: #7C91DC;
|
||
}
|
||
.pop-revenue-canvas .pop-revenue-title {
|
||
/* width: 120rpx; */
|
||
display: flex;
|
||
}
|
||
.pop-revenue-canvas .pop-revenue-title view {
|
||
line-height: 1;
|
||
}
|
||
.pop-revenue-canvas .pop-revenue-title text{
|
||
transform: rotate(90deg);
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
}
|
||
.pop-revenue-canvas .pop-title {
|
||
font-size: 30rpx;
|
||
padding: 0 37rpx 0 32rpx;
|
||
border-left: 1rpx solid #eee;
|
||
width: 96rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
height: calc(100vh - 100rpx);
|
||
}
|
||
|
||
.pop-revenue-canvas .canvas-title {
|
||
width: 69rpx;
|
||
background-color: #ECEFFC;
|
||
margin: 0 10rpx 30rpx 0;
|
||
padding: 40rpx 22rpx 0 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
.pop-revenue-canvas .canvas-title view,.pop-revenue-canvas .pop-title view {
|
||
white-space: nowrap;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.pop-revenue-canvas .canvas-title view + view {
|
||
margin-top: 220rpx;
|
||
}
|
||
.pop-revenue-canvas canvas.operation-content {
|
||
width: 434rpx;
|
||
height: calc(100vh - 100rpx);
|
||
|
||
background-color: #fff;
|
||
}
|
||
</style>
|