1081 lines
34 KiB
Vue
1081 lines
34 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="top" :style="{height:menu.height + menu.top+212+'rpx'}">
|
||
<!-- <image class="topBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png"/>-->
|
||
<div class="header" :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
|
||
<image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
||
</div>
|
||
<div class="topContent" :style="{top:200+'rpx'}">
|
||
<p class="pageTitle" >欢度国庆</p>
|
||
</div>
|
||
</div>
|
||
<div class="pageContent" :style="{backgroundPositionY:-(menu.height + menu.top+200)+'rpx'}">
|
||
<div class="tabBox">
|
||
<div :class="selectTab===1?'tabItem selectTab':'tabItem'" @click="changeTab(1)">排行分析</div>
|
||
<div :class="selectTab===2?'tabItem selectTab':'tabItem'" @click="changeTab(2)">同比分析</div>
|
||
</div>
|
||
|
||
<div v-if="selectTab===1">
|
||
<!-- 服务区当日营收 Top5-->
|
||
<div class="dailyRevenue">
|
||
<div class="dailyContent">
|
||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/revenueItemBg.png"/>
|
||
<div class="list">
|
||
<div class="listTop">
|
||
<p class="title">{{ dayName }}营收 Top5</p>
|
||
<div class="moreBox" @click="handleGoMore(1)">
|
||
<span class="text">查看更多</span>
|
||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||
</div>
|
||
</div>
|
||
<div class="listBox">
|
||
<div class="itemTop">
|
||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/firstItemIcon.svg"/>
|
||
<div class="revenueBox">
|
||
<p class="revenueValue">{{ $util.fmoney(revenueSum,2) }}</p>
|
||
<p class="revenueText">总营收 <span>/元</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="listItemTop" >
|
||
<div class="listTopItem" v-for="(item,index) in revenueList" :key="index">
|
||
<div class="itemLeft">
|
||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||
<!-- <span class="type">{{item.ShopRegionName}}</span>-->
|
||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}</span>
|
||
</div>
|
||
<div class="itemRight">
|
||
<span class="itemValue">{{$util.fmoney(item.CashPay,2)}}<span class="unit">/元</span></span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 当日入区车流量 Top5-->
|
||
<div class="dailyEntry">
|
||
<div class="dailyContent">
|
||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryIcon.png"/>
|
||
<div class="list">
|
||
<div class="listTop">
|
||
<p class="title">{{dayName}}入区车流量 Top5</p>
|
||
<div class="moreBox" @click="handleGoMore(2)">
|
||
<span class="text">查看更多</span>
|
||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||
</div>
|
||
</div>
|
||
<div class="listBox">
|
||
<div class="itemTop">
|
||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pass.svg"/>
|
||
<div class="revenueBox">
|
||
<p class="revenueValue">{{$util.noDecimal(entrySum)}}</p>
|
||
<p class="revenueText">总车流量<span>/辆</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="listItemTop" >
|
||
<div class="listTopItem" v-for="(item,index) in entryCarList" :key="index">
|
||
<div class="itemLeft">
|
||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
|
||
</div>
|
||
<div class="itemRight">
|
||
<span class="itemValue">{{$util.noDecimal(item.Vehicle_Count) }}<span class="unit">/辆</span></span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 当日入区车流量增幅 Top5-->
|
||
<div class="dailyEntryAdd">
|
||
<div class="dailyContent">
|
||
<image class="itemBg" src="https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/entryAdd.png"/>
|
||
<div class="list">
|
||
<div class="listTop">
|
||
<p class="title">{{dayName}}入区车流量增幅 Top5</p>
|
||
<div class="moreBox" @click="handleGoMore(3)">
|
||
<span class="text">查看更多</span>
|
||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
||
</div>
|
||
</div>
|
||
<div class="listBox">
|
||
<div class="listItemTop" >
|
||
<div class="listTopItem" v-for="(item,index) in addList" :key="index">
|
||
<div class="itemLeft">
|
||
<image class="itemIcon" :src="'https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/Top'+ (index +1) +'.png'" />
|
||
<span class="name">{{item.Serverpart_Name.split('服务区')[0]}}<span class="type">{{item.Serverpart_Region || ''}}</span></span>
|
||
</div>
|
||
<div class="itemRight">
|
||
<image class="addIcon" src='/static/images/examine/add.svg'/>
|
||
<span class="itemValue">{{item.Entry_GrowthRate}}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="selectTab===2" class="selectTab2">
|
||
<div class="detail">
|
||
<div class="detailTop">
|
||
<p class="tabTitle">营收同比</p>
|
||
<span class="timeText">{{showTimeText}}</span>
|
||
</div>
|
||
<div class="money">
|
||
<div class="moneyTop">
|
||
<p class="moneyTitle">2023年对客营收金额：</p>
|
||
<!-- -->
|
||
<p class="sumMoney">{{ $util.fmoney(currentRevenue,2) }}元</p>
|
||
</div>
|
||
<div class="moneyTop">
|
||
<p class="moneyTitle">2022年对客营收金额：</p>
|
||
<p class="sumMoney">{{ $util.fmoney(compareRevenue,2) }}元</p>
|
||
</div>
|
||
<div class="moneyTop">
|
||
<p class="moneyTitle">同期对比：</p>
|
||
<p class="sumMoney">{{add}}%</p>
|
||
</div>
|
||
<div class="desc">
|
||
<div class="descLeft">
|
||
<p style="line-height: 36rpx">注:</p>
|
||
</div>
|
||
<div class="descRight">
|
||
<p>2022年国庆假期为10.1-10.7,共7日</p>
|
||
<p>2023年双节假期为9.28-10.6,共8日</p>
|
||
<p></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail">
|
||
<p class="tabTitle">入区车流量</p>
|
||
<span class="unit">单位：辆</span>
|
||
<YearRevenue :dataList="carCompareList"/>
|
||
<p class="descText">注：入区车辆数按当期卡口设备的服务区，计算的平均每日入区数量</p>
|
||
</div>
|
||
|
||
<div class="detail">
|
||
<p class="tabTitle">营收特征分析</p>
|
||
<span class="unit">单位：万元</span>
|
||
<EntryCarNumber :data="compareRevenueList"/>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
import YearRevenue from "./components/yearRevenue.vue";
|
||
import EntryCarNumber from "./components/entryCarNumber.vue";
|
||
export default {
|
||
name: "index",
|
||
components: {EntryCarNumber, YearRevenue},
|
||
data(){
|
||
return {
|
||
selectTab:1,
|
||
statusBarHeight:0,
|
||
menu:{},
|
||
revenueList: [],// 营收排行
|
||
revenueSum:0,// 营收总计
|
||
entryCarList:[],//入区排行
|
||
entrySum:0,// 入区总计
|
||
addList:[],// 增幅排行
|
||
time:'',
|
||
dayName:'',
|
||
showTimeText:'',// 右上角显示的时间
|
||
carCompareList:{},// 车流对比
|
||
currentRevenue:0,//今年的营收总额
|
||
compareRevenue:0,// 去年的营收总额
|
||
add:0,// 增幅
|
||
compareRevenueList:{},// 营收图表数据
|
||
flagGetRevenue:false,// 拿到营收排行
|
||
flagGetCar:false,// 车流排行
|
||
flagGetCarCompare:false,//车流比较
|
||
flagGetRevenueCompare:false,// 营收比较
|
||
}
|
||
},
|
||
onLoad(query){
|
||
// 获取手机参数对页面进行适配
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
// 获取用户信息
|
||
let userInfo = uni.getStorageSync('vuex')
|
||
userInfo = JSON.parse(userInfo)
|
||
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
this.time = query.time
|
||
const date = new Date(query.time)
|
||
if (new Date(query.time).getTime() > new Date('2023-09-27').getTime()){
|
||
const date = new Date(query.time)
|
||
let m = date.getMonth()+1
|
||
let d = date.getDate()
|
||
this.showTimeText = `9.28-${m}.${d}`
|
||
}else{
|
||
this.showTimeText = `9.28-9.28`
|
||
}
|
||
|
||
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
// ${y}年
|
||
this.dayName = `${m}月${d}日`
|
||
// 拿到营收排行
|
||
this.handleGetRevenue(query.time)
|
||
// 车流排行
|
||
this.handleGetCar(query.time)
|
||
},
|
||
methods:{
|
||
// 切换标签卡
|
||
changeTab(num){
|
||
this.selectTab = num
|
||
if (num===2 && JSON.stringify(this.carCompareList)==='{}' || num===2 && JSON.stringify(this.compareRevenueList)==='{}'){
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
this.handleGetCarCompare()
|
||
this.handleGetRevenueCompare()
|
||
}
|
||
},
|
||
handleGoMore(type){
|
||
uni.navigateTo({
|
||
url:`/pages/nationalPage/moreList?type=${type}&time=${this.time}&dayName=${this.dayName}`
|
||
})
|
||
},
|
||
handleBack(){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
// 拿到营收排行
|
||
async handleGetRevenue(date){
|
||
const req= {
|
||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||
Statistics_Date:date,
|
||
Revenue_Include:1
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetSPRevenueRank',req)
|
||
console.log('拿到营收排行',data)
|
||
this.revenueSum = data.Result_Data.OtherData
|
||
this.revenueList = data.Result_Data.List.slice(0,5)
|
||
this.flagGetRevenue = true
|
||
if (this.flagGetRevenue && this.flagGetCar){
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
// 车流排行
|
||
async handleGetCar(date){
|
||
const req= {
|
||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||
StatisticsEndDate:date,
|
||
ShowGrowthRate:true
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BigData/GetBayonetGrowthAnalysis',req)
|
||
this.entrySum = data.Result_Data.sumEntryCount
|
||
this.entryCarList = data.Result_Data.EntryList.slice(0,5)
|
||
let list = []
|
||
data.Result_Data.GrowthList.forEach(item=>{
|
||
if (item.Entry_GrowthRate>100){
|
||
list.push(item)
|
||
}
|
||
})
|
||
this.addList = list.slice(0,5)
|
||
this.flagGetCar=true
|
||
if (this.flagGetRevenue && this.flagGetCar){
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
// 车流比较
|
||
async handleGetCarCompare(){
|
||
const req = {
|
||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||
StatisticsStartDate:'2023/09/28',
|
||
StatisticsEndDate:'2023/10/07'
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BigData/GetBayonetCompare',req)
|
||
console.log('compare',data)
|
||
let list = data.Result_Data
|
||
let compareList = []
|
||
let curList = []
|
||
let max = 0
|
||
data.Result_Data.compareList.forEach(item=>{
|
||
if (Number(item.value)>max){
|
||
max = Number(item.value)
|
||
}
|
||
compareList.push(Number(item.value))
|
||
})
|
||
data.Result_Data.curList.forEach(item=>{
|
||
if (Number(item.value)>max){
|
||
max = Number(item.value)
|
||
}
|
||
curList.push(Number(item.value))
|
||
})
|
||
let res = {
|
||
categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||
series:[
|
||
{
|
||
name:"2022年",
|
||
data:compareList
|
||
},
|
||
{
|
||
name:"2023年",
|
||
data:curList
|
||
}
|
||
],
|
||
max:max
|
||
}
|
||
this.carCompareList = res
|
||
this.flagGetCarCompare= true
|
||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
// 营收比较
|
||
async handleGetRevenueCompare(){
|
||
const req = {
|
||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||
StatisticsStartDate:'2023/09/28',
|
||
StatisticsEndDate:'2023/10/07',
|
||
StatisticsDate:this.time
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueYOY',req)
|
||
console.log('22222',data)
|
||
this.currentRevenue = data.Result_Data.curRevenue
|
||
this.compareRevenue = data.Result_Data.compareRevenue
|
||
if (data.Result_Data.curRevenue && data.Result_Data.compareRevenue){
|
||
this.add = ((data.Result_Data.curRevenue / data.Result_Data.compareRevenue)*100).toFixed(2)
|
||
}
|
||
let list = data.Result_Data
|
||
let compareList = []
|
||
let realCompareList = []
|
||
let curList = []
|
||
let realCurList = []
|
||
let max =0
|
||
data.Result_Data.compareList.forEach(item=>{
|
||
let number = Number((item.value / 10000).toFixed(2))
|
||
if (number>max){
|
||
max = number
|
||
}
|
||
compareList.push(number)
|
||
realCompareList.push(item.value)
|
||
})
|
||
data.Result_Data.curList.forEach(item=>{
|
||
let number = Number((item.value / 10000).toFixed(2))
|
||
if (number>max){
|
||
max = number
|
||
}
|
||
curList.push(number)
|
||
realCurList.push(item.value)
|
||
})
|
||
let res = {
|
||
categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
|
||
series:[
|
||
{
|
||
name:"2022年",
|
||
data:compareList,
|
||
real:realCompareList
|
||
},
|
||
{
|
||
name:"2023年",
|
||
data:curList,
|
||
real:realCurList
|
||
}
|
||
],
|
||
max:max
|
||
}
|
||
this.compareRevenueList = res
|
||
console.log('this.compareRevenueList',this.compareRevenueList)
|
||
this.flagGetRevenueCompare=true
|
||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style scoped lang="scss">
|
||
@import '/static/public/fontNational/stylesheet.css';
|
||
.main{
|
||
width: 100%;
|
||
height: 100%;
|
||
.top{
|
||
width: 100%;
|
||
position: relative;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: cover;
|
||
z-index:3;
|
||
.topBg{
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 4;
|
||
}
|
||
.header{
|
||
position: fixed;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: cover;
|
||
width: 100%;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 2;
|
||
.backArrow{
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 16px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
.topContent{
|
||
position: absolute;
|
||
left: 32rpx;
|
||
.pageTitle{
|
||
font-size: 56rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 68rpx;
|
||
text-shadow: 0px 8px 20px rgba(158,29,0,0.25);
|
||
background: linear-gradient(180deg, #FEFFFE 0%, #FFC7B6 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
.pageContent{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx 28rpx;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/nationalDay/pageBg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
//transform: translateY(-260rpx);
|
||
|
||
.tabBox{
|
||
width: 100%;
|
||
height: 76rpx;
|
||
background: #F6E8E5;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 8rpx;
|
||
.tabItem{
|
||
width: 50%;
|
||
height: 100%;
|
||
display: inline-block;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
color: #786B6C;
|
||
}
|
||
.selectTab{
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
color: #F95222;
|
||
}
|
||
}
|
||
|
||
.dailyRevenue{
|
||
width: 100%;
|
||
height: 680rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 2px;
|
||
.dailyContent{
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 22rpx 24rpx;
|
||
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, rgba(255,233,229,0.7) 21%, #FFE9E5 100%);
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
.itemBg{
|
||
width: 266rpx;
|
||
height: 208rpx;
|
||
position: absolute;
|
||
right: 0;top: 0;
|
||
z-index:1;
|
||
}
|
||
.list{
|
||
position: absolute;
|
||
width: calc(100% - 48rpx);
|
||
z-index: 2;
|
||
.listTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: 36rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
color: #F95222;
|
||
line-height: 44rpx;
|
||
}
|
||
.moreBox{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.text{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
}
|
||
.moreIcon{
|
||
width: 20rpx;
|
||
height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.listBox{
|
||
width: 100%;
|
||
background: #fff;
|
||
margin-top: 22rpx;
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
.itemTop{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding-bottom: 36rpx;
|
||
border-bottom: 2rpx solid #F7F4F4;
|
||
.itemIcon{
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
.revenueBox{
|
||
.revenueValue{
|
||
font-size: 40rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 48rpx;
|
||
}
|
||
.revenueText{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
span{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.listItemTop{
|
||
margin-top: 34rpx;
|
||
.listTopItem{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0;
|
||
.itemLeft{
|
||
display: flex;
|
||
align-items: center;
|
||
.itemIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.name{
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
.type{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.itemRight{
|
||
.itemValue{
|
||
font-size: 32rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
.unit{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dailyEntry{
|
||
width: 100%;
|
||
height: 680rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 2px;
|
||
margin-top: 28rpx;
|
||
.dailyContent{
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 22rpx 24rpx;
|
||
background: linear-gradient(360deg, rgba(238,242,255,0) 0%, rgba(238,242,255,0.7) 20%, #EEF2FF 100%);
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
.itemBg{
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
position: absolute;
|
||
right: 0;top: 0;
|
||
z-index:1;
|
||
}
|
||
.list{
|
||
position: absolute;
|
||
width: calc(100% - 48rpx);
|
||
z-index: 2;
|
||
.listTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: 36rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
color: #096EF7;
|
||
line-height: 44rpx;
|
||
}
|
||
.moreBox{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.text{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
}
|
||
.moreIcon{
|
||
width: 20rpx;
|
||
height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.listBox{
|
||
width: 100%;
|
||
background: #fff;
|
||
margin-top: 22rpx;
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
.itemTop{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding-bottom: 36rpx;
|
||
border-bottom: 2rpx solid #F7F4F4;
|
||
.itemIcon{
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
.revenueBox{
|
||
.revenueValue{
|
||
font-size: 40rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 48rpx;
|
||
}
|
||
.revenueText{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
span{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.listItemTop{
|
||
margin-top: 34rpx;
|
||
.listTopItem{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0;
|
||
.itemLeft{
|
||
display: flex;
|
||
align-items: center;
|
||
.itemIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.name{
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
.type{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.itemRight{
|
||
.itemValue{
|
||
font-size: 32rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
.unit{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dailyEntryAdd{
|
||
width: 100%;
|
||
height: 500rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 2px;
|
||
margin-top: 28rpx;
|
||
.dailyContent{
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 22rpx 24rpx;
|
||
background: linear-gradient(360deg, rgba(229,247,255,0) 0%, rgba(229,247,255,0.7) 23%, #E5F7FF 100%);
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
.itemBg{
|
||
width: 320rpx;
|
||
height: 320rpx;
|
||
position: absolute;
|
||
right: 0;top: 0;
|
||
z-index:1;
|
||
}
|
||
.list{
|
||
position: absolute;
|
||
width: calc(100% - 48rpx);
|
||
z-index: 2;
|
||
.listTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: 36rpx;
|
||
font-family: Alimama ShuHeiTi;
|
||
font-weight: bold;
|
||
color: #018ABD;
|
||
line-height: 44rpx;
|
||
}
|
||
.moreBox{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.text{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
}
|
||
.moreIcon{
|
||
width: 20rpx;
|
||
height: 40rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.listBox{
|
||
width: 100%;
|
||
background: #fff;
|
||
margin-top: 22rpx;
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
.listItemTop{
|
||
.listTopItem{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0;
|
||
.itemLeft{
|
||
display: flex;
|
||
align-items: center;
|
||
.itemIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.name{
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
.type{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.itemRight{
|
||
.addIcon{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.itemValue{
|
||
display: inline-block;
|
||
width: 80px;
|
||
text-align: left;
|
||
margin-left: 8rpx;
|
||
font-size: 32rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.selectTab2{
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
.detail{
|
||
margin-bottom: 24rpx;
|
||
.tabTitle{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.unit{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
}
|
||
.descText{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.detailTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.tabTitle{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.timeText{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx
|
||
}
|
||
}
|
||
|
||
.money{
|
||
width:calc(100% - 32px);
|
||
padding: 18px 16px;
|
||
background: #F7F7F7;
|
||
border-radius: 4px;
|
||
.moneyTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 4px;
|
||
//.moneyTopItem{
|
||
// display: flex;
|
||
// align-items: center;
|
||
.moneyTitle{
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 36rpx;
|
||
}
|
||
.icon{
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
.sumMoney{
|
||
font-size: 16px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #341D00;
|
||
line-height: 24px;
|
||
.notice{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 20px;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.desc{
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: flex-end;
|
||
.descLeft{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.descRight{
|
||
p{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
.bottom{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 24px;
|
||
.icon{
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 4px;
|
||
}
|
||
.add{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FA5151;
|
||
line-height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
.text{
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
</style>
|