986 lines
30 KiB
Vue
986 lines
30 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'}">
|
||
<picker mode="selector" :range="festival" range-key="label" :value="selectIndex-1" @change="handleChangeType" >
|
||
<div style="display: flex;align-items: center">
|
||
<p class="pageTitle" style="margin-right: 8px">{{`欢度${festival[selectIndex - 1].label}`}}</p>
|
||
<img style="width: 20px;height: 20px" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDownArrow.svg"/>
|
||
</div>
|
||
</picker>
|
||
</div>
|
||
</div>
|
||
<div class="pageContent" :style="{backgroundPositionY:-(menu.height + menu.top+200)+'rpx'}">
|
||
<div 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年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.30-5.4':'1.31-2.09'},共${selectIndex===1?'7':selectIndex===2?'5':'10'}日`}}</p>
|
||
|
||
<p>{{`2023年${festival[selectIndex - 1].label}假期为${selectIndex===1?'10.1-10.7':selectIndex===2?'4.29-5.5':'1.20-1.29'},共${selectIndex===3?10:7}日`}}</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";
|
||
import moment from "moment";
|
||
import {getLunar} from "chinese-lunar-calendar";
|
||
export default {
|
||
name: "index",
|
||
components: {EntryCarNumber, YearRevenue},
|
||
data(){
|
||
return {
|
||
statusBarHeight:0,
|
||
festival:[{label:'国庆',value:1},{label:'五一',value:2},{label:'春节',value:3}],
|
||
selectIndex:1,
|
||
menu:{},
|
||
time:'',// 传入的时间
|
||
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.showTimeText = this.selectIndex===1?'9.28-10.7':this.selectIndex===2?'4.29-5.5':'1.20-1.29'
|
||
this.handleGetCarCompare()
|
||
this.handleGetRevenueCompare()
|
||
},
|
||
methods:{
|
||
handleBack(){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
// 车流比较
|
||
async handleGetCarCompare(){
|
||
const req = {
|
||
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
||
StatisticsStartDate:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
|
||
StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
|
||
ShowDateFormat:this.selectIndex===3?2:1
|
||
}
|
||
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
|
||
let dateList = []
|
||
|
||
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))
|
||
|
||
if (this.selectIndex===3){
|
||
const date = new Date(item.name)
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth() + 1
|
||
let day = date.getDate()
|
||
const lunarDate = getLunar(year, month, day);
|
||
dateList.push(lunarDate.dateStr.slice(2,4))
|
||
// item.lunarDate = lunarDate.dateStr.slice(2,4)
|
||
}else{
|
||
dateList.push(moment(item.name).format('M.D'))
|
||
}
|
||
})
|
||
|
||
let res = {
|
||
categories: dateList,
|
||
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:this.selectIndex===1?'2023/09/28':this.selectIndex===2?'2023/04/29':'2023/01/20',
|
||
StatisticsEndDate:this.selectIndex===1?'2023/10/07':this.selectIndex===2?'2023/05/05':'2023/01/29',
|
||
StatisticsDate:this.time,
|
||
ShowDateFormat:this.selectIndex===3?2:1
|
||
}
|
||
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
|
||
let dateList = []
|
||
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)
|
||
|
||
if (this.selectIndex===3){
|
||
const date = new Date(item.name)
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth() + 1
|
||
let day = date.getDate()
|
||
const lunarDate = getLunar(year, month, day);
|
||
dateList.push(lunarDate.dateStr.slice(2,4))
|
||
// item.lunarDate = lunarDate.dateStr.slice(2,4)
|
||
}else{
|
||
dateList.push(moment(item.name).format('M.D'))
|
||
}
|
||
})
|
||
|
||
// if (this.selectIndex===3){
|
||
// let smallDateList = []
|
||
// let smallCompareList = []
|
||
// let smallCurList = []
|
||
// dateList.forEach((item,index)=>{
|
||
// if (smallDateList.length>=10){
|
||
// return
|
||
// }
|
||
// if (index%4===0){
|
||
// if (smallDateList.length===9){
|
||
// smallDateList.push('2.15')
|
||
// }else{
|
||
// smallDateList.push(item)
|
||
// }
|
||
// }
|
||
// })
|
||
//
|
||
// compareList.forEach((item,index)=>{
|
||
// if (smallCompareList.length>=10){
|
||
// return
|
||
// }
|
||
// if (index%4===0){
|
||
// if (smallDateList.length===9){
|
||
// smallCompareList.push(compareList[compareList.length-1])
|
||
// }else{
|
||
// smallCompareList.push(item)
|
||
// }
|
||
// }
|
||
// })
|
||
//
|
||
// curList.forEach((item,index)=>{
|
||
// if (smallCurList.length>=10){
|
||
// return
|
||
// }
|
||
// if (index%4===0){
|
||
// if (smallDateList.length===9){
|
||
// smallCurList.push(smallCurList[smallCurList.length-1])
|
||
// }else{
|
||
// smallCurList.push(item)
|
||
// }
|
||
// }
|
||
// })
|
||
// dateList = smallDateList
|
||
// compareList = smallCompareList
|
||
// curList = smallCurList
|
||
// }
|
||
|
||
let res = {
|
||
categories: dateList,
|
||
series:[
|
||
{
|
||
name:"2022年",
|
||
data:compareList,
|
||
real:realCompareList
|
||
},
|
||
{
|
||
name:"2023年",
|
||
data:curList,
|
||
real:realCurList
|
||
}
|
||
],
|
||
max:max
|
||
}
|
||
this.compareRevenueList = res
|
||
this.flagGetRevenueCompare=true
|
||
if (this.flagGetCarCompare && this.flagGetRevenueCompare){
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
// 切换节日类型
|
||
handleChangeType(e){
|
||
console.log('e',e)
|
||
this.selectIndex = Number(e.detail.value) + 1
|
||
uni.showLoading({
|
||
title:' 正在加载...'
|
||
})
|
||
this.showTimeText = this.selectIndex===1?'4.29-5.5':this.selectIndex===2?'9.28-10.7':'1.07-2.15'
|
||
this.handleGetCarCompare()
|
||
this.handleGetRevenueCompare()
|
||
}
|
||
}
|
||
}
|
||
</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>
|