1367 lines
55 KiB
Vue
1367 lines
55 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div :class="selectFestival===0?'top springTop':
|
|
selectFestival===1?'top qmTop':
|
|
selectFestival===2?'top labourTop':
|
|
selectFestival===3?'top dragonBoatTop':
|
|
selectFestival===4?'top summerHolidayTop':
|
|
selectFestival===5?'top midAutumnTop':
|
|
selectFestival===6?'top nationalDayTop':
|
|
''">
|
|
<div :class="selectFestival===0?'header headerSpring':
|
|
selectFestival===1?'header headerQm':
|
|
selectFestival===2?'header headerLabour':
|
|
selectFestival===3?'header headerDragonBoat':
|
|
selectFestival===4?'header summerHolidayBoat':
|
|
selectFestival===5?'header midAutumnBoat':
|
|
selectFestival===6?'header nationalDayBoat':
|
|
'' " :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>
|
|
|
|
<div class="contentPage">
|
|
<div class="revenueDetail">
|
|
<div :class="selectFestival===0?'revenueDetailTitleBox springTitleBox':
|
|
selectFestival===1?'revenueDetailTitleBox qmTitleBox':
|
|
selectFestival===2?'revenueDetailTitleBox labourTitleBox':
|
|
selectFestival===3?'revenueDetailTitleBox dragonBoatTitleBox':
|
|
selectFestival===4?'revenueDetailTitleBox summerHolidayTitleBox':
|
|
selectFestival===5?'revenueDetailTitleBox midAutumnTitleBox':
|
|
selectFestival===6?'revenueDetailTitleBox nationalDayTitleBox':
|
|
''">
|
|
<div class="left">
|
|
<img class="detailLogo" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png':
|
|
selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmServicepartDetail.png':
|
|
selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourServerPartDetail.png':
|
|
selectFestival===3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatDetail.png':
|
|
selectFestival===4?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayDetail.png':
|
|
selectFestival===5?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnDetail.png':
|
|
selectFestival===6?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayDetail.png':
|
|
''"/>
|
|
<!-- <text class="modalUnit">{{selectDateText || ''}}</text>-->
|
|
<text class="modalUnit">{{`/统计到${allDateDay || ''}`}}</text>
|
|
</div>
|
|
<div class="right">
|
|
<div class="typeChangeBox">
|
|
<div :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</div>
|
|
<div :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="revenueContent">
|
|
<div class="navBigList" v-if="pageType===1">
|
|
<!-- <div class="allBox">-->
|
|
<!-- <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>-->
|
|
<!-- </div>-->
|
|
<scroll-view scroll-x="true" :class="selectFestival===0?'navList springNav':
|
|
selectFestival===1?'navList qmNav':
|
|
selectFestival===2?'navList labourNav':
|
|
selectFestival===3?'navList dragonBoatNav':
|
|
selectFestival===4?'navList summerHolidayNav':
|
|
selectFestival===5?'navList midAutumnNav':
|
|
selectFestival===6?'navList nationalDayNav':
|
|
''" :scrollIntoView="currentScroll" :scroll-with-animation="true">
|
|
<div :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</div>
|
|
</scroll-view>
|
|
</div>
|
|
<!-- <span class="dateText">{{selectDateText || ''}}</span>-->
|
|
<div class="modalBox">
|
|
<div class="modalTitleBox">
|
|
<div class="modalTitleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">
|
|
<div class="modalIndex" :style="{background: selectFestival===0?'#DB6465':
|
|
selectFestival===1?'#3B9285':
|
|
selectFestival===2?'#D14702':
|
|
selectFestival===3?'#3E8958':
|
|
selectFestival===4?'#007797':
|
|
selectFestival===5?'#3E8958':
|
|
selectFestival===6?'#3E8958':
|
|
''}"></div>
|
|
<text class="modalText">{{ type===1?'对客销售':type===2?'营业收入':type===3?'入区车流':'' }}</text>
|
|
<text class="modalUnit">{{type===3?'/万辆':'/万元'}}</text>
|
|
</div>
|
|
</div>
|
|
|
|
<view class="sortBox">
|
|
<view class="sortItem" @click="handleChangeSortName(1)">
|
|
<text class="sortText">{{ `24年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortItem" @click="handleChangeSortName(2)">
|
|
<text class="sortText">{{ `23年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortItem" @click="handleChangeSortName(3)">
|
|
<text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增长` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortItem" @click="handleChangeSortName(4)">
|
|
<text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增幅` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<div class="modalDetail">
|
|
<!-- <div class="modalDetailTitle">-->
|
|
<!-- <div class="titleItem" :style="{width: 'calc(100% - 440rpx)',textAlign:'left'}">服务区</div>-->
|
|
<!-- <div class="titleItem" style="width: 110rpx">2024年</div>-->
|
|
<!-- <div class="titleItem" style="width: 110rpx">2023年</div>-->
|
|
<!-- <div class="titleItem" style="width: 110rpx">增长</div>-->
|
|
<!-- <div class="titleItem" style="width: 110rpx">增幅</div>-->
|
|
<!-- </div>-->
|
|
<scroll-view :scroll-y="true" class="typeFirst" >
|
|
<div class="listItem" v-for="(item,index) in dataList" :key="index">
|
|
<div class="itemLeft" >
|
|
<image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
|
|
<view class="nameBox">
|
|
<text class="serviceName">{{item.ServerpartName ? item.ServerpartName.split('服务区')[0]:''}}</text>
|
|
<text class="serviceLabel">服务区</text>
|
|
</view>
|
|
</div>
|
|
<div class="contentRight">
|
|
<div class="rightTop">
|
|
<view class="rightTopLeft">
|
|
<view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/car/1stBg.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/2stBg.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/3stBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/4stBg.svg'})`}">{{index+1}}</view>
|
|
</view>
|
|
<view class="rightTopRight">
|
|
<text class="entryRateLabel">增幅</text>
|
|
<div class="entryRateValue">
|
|
<span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?item.AccountINC.increaseRate>0?'#E83944':'#0E9976': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">
|
|
{{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?item.AccountINC.increaseRate>0?'+':'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}
|
|
</span>
|
|
<span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?item.AccountINC.increaseRate>0?'#E83944':'#0E9976': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">
|
|
{{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :
|
|
type===2?item.AccountINC.increaseRate?item.AccountINC.increaseRate:'-' :
|
|
type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%
|
|
</span>
|
|
</div>
|
|
</view>
|
|
</div>
|
|
<div class="rightBottom">
|
|
<view class="rightBottomItem">
|
|
<text class="itemLabel">{{curYear}}</text>
|
|
<text class="itemValue">
|
|
{{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':
|
|
type===2?item.AccountINC.curYearData?$util.getMoney(item.AccountINC.curYearData / 10000):'0.00':
|
|
type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}
|
|
</text>
|
|
</view>
|
|
<view class="rightBottomItem">
|
|
<text class="itemLabel">{{ compareYear }}</text>
|
|
<text class="itemValue">
|
|
{{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':
|
|
type===2?item.AccountINC.lYearData?$util.getMoney(item.AccountINC.lYearData / 10000):'0.00':
|
|
type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}
|
|
</text>
|
|
</view>
|
|
<view class="rightBottomItem">
|
|
<text class="itemLabel">增长</text>
|
|
<text class="itemValue">
|
|
{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':
|
|
type===2?item.AccountINC.increaseData?$util.getMoney(item.AccountINC.increaseData / 10000):'0.00':
|
|
type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}
|
|
</text>
|
|
</view>
|
|
</div>
|
|
|
|
<div class="otherCarBox" v-if="type!==3">
|
|
<div class="left">
|
|
<span class="carLabel">车流增幅</span>
|
|
<span :style="{color: item.BayonetINC.increaseRate>1000?'':item.BayonetINC.increaseRate>0?'#E83944':item.BayonetINC.increaseRate<0?'#0E9976':''}">
|
|
{{item.BayonetINC.increaseRate>1000?'':item.BayonetINC.increaseRate>0?'+':''}}
|
|
</span>
|
|
<span :style="{color: item.BayonetINC.increaseRate>1000?'':item.BayonetINC.increaseRate>0?'#E83944':item.BayonetINC.increaseRate<0?'#0E9976':''}">
|
|
{{item.BayonetINC.increaseRate?item.BayonetINC.increaseRate>1000?'-':item.BayonetINC.increaseRate:'-'}}%
|
|
</span>
|
|
</div>
|
|
<div class="MoreBox" @click="handleGoServerPartDetail(item)">
|
|
<img class="goMoreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row" v-for="(item,index) in dataList" :key="index">-->
|
|
<!-- <div class="valueItem bigFather" :style="{width: 'calc(100% - 430rpx)',textAlign:'left'}">{{item.ServerpartName.split('服务区')[0]}}</div>-->
|
|
<!-- <div class="compareItem" style="width: 110rpx">-->
|
|
<!-- {{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':-->
|
|
<!-- type===2?'':-->
|
|
<!-- type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}-->
|
|
<!-- </div>-->
|
|
<!-- <div class="compareItem" style="width: 110rpx">-->
|
|
<!-- {{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':-->
|
|
<!-- type===2?'':-->
|
|
<!-- type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}-->
|
|
<!-- </div>-->
|
|
<!-- <div class="compareItem" style="width: 110rpx">-->
|
|
<!-- <span>{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':-->
|
|
<!-- type===2?'':-->
|
|
<!-- type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="addItem" style="width: 110rpx">-->
|
|
<!-- <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
|
|
<!-- {{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}-->
|
|
<!-- </span>-->
|
|
<!-- <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
|
|
<!-- {{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :-->
|
|
<!-- type===2?'':-->
|
|
<!-- type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%-->
|
|
<!-- </span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</scroll-view>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import moment from "moment";
|
|
export default {
|
|
name: "rankPage",
|
|
data(){
|
|
return {
|
|
scrollList:[],
|
|
selectDateText:'',
|
|
currentScroll:'',
|
|
lastDay:'',
|
|
allDateDay:'',
|
|
dataList:[],
|
|
type: 0,
|
|
useInfo:{},
|
|
curYear:'',
|
|
compareYear:'',
|
|
ServerpartIds:'',
|
|
sortType: 1,// 正序降序 0正序 1降序
|
|
sortName: 3,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
|
|
statusBarHeight:0,
|
|
menu:'',
|
|
pageType:1,// 选择的类型
|
|
serverPartList:[],// 服务区列表
|
|
selectFestival:0,// 选择的节日
|
|
}
|
|
},
|
|
onLoad(query){
|
|
console.log('query',query)
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
if (query.type){
|
|
this.type = Number(query.type)
|
|
}
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
// this.lastDay = '2024-04-03'
|
|
|
|
if (query.festivalType){
|
|
this.selectFestival = Number(query.festivalType)
|
|
}
|
|
if (this.selectFestival===0){
|
|
if (query.time){
|
|
this.currentScroll = 'item'+ query.time
|
|
}else{
|
|
this.currentScroll = 'item'+ '2024-03-05'
|
|
}
|
|
}else{
|
|
this.currentScroll = 'item'+ this.lastDay
|
|
}
|
|
// else if (this.selectFestival===1){
|
|
// this.currentScroll = 'item'+ this.lastDay
|
|
// }else if (this.selectFestival===2){
|
|
// this.currentScroll = 'item'+ this.lastDay
|
|
// }else if (this.selectFestival===3){
|
|
// this.currentScroll = 'item'+ this.lastDay
|
|
// }
|
|
|
|
|
|
this.ServerpartIds = query.ServerpartIds
|
|
|
|
// 获取用户信息
|
|
let userInfo = uni.getStorageSync('vuex')
|
|
userInfo = JSON.parse(userInfo)
|
|
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
|
// 拿到是春运开始的第几天
|
|
let dayNumber = 0
|
|
const lastDate = new Date(this.lastDay)
|
|
let y = lastDate.getFullYear()
|
|
this.curYear = y
|
|
this.compareYear = y - 1
|
|
let lastMonth = lastDate.getMonth() + 1
|
|
let lastDays = lastDate.getDate()
|
|
this.allDateDay = `${lastMonth<10?'0'+lastMonth:lastMonth}月${lastDays<10?'0'+lastDays:lastDays}日`
|
|
// 24年春运开始时间为 1.26
|
|
// if (lastMonth === 1){
|
|
// dayNumber = lastDays - 26 + 1
|
|
// }else{
|
|
// dayNumber = 6 + lastDays
|
|
// }
|
|
if (this.selectFestival===0){
|
|
dayNumber = moment().diff("2024-01-26", "days")
|
|
this.howDayNumber = dayNumber<=40?dayNumber:40
|
|
}else if(this.selectFestival===1){
|
|
dayNumber = moment().diff("2024-04-03", "days")
|
|
if (dayNumber<=5){
|
|
this.howDayNumber = dayNumber
|
|
}else{
|
|
this.howDayNumber = 5
|
|
this.currentScroll = 'item'+ '2024-04-07'
|
|
this.allDateDay = '2024-04-07'
|
|
}
|
|
}else if(this.selectFestival===2){
|
|
dayNumber = moment().diff("2024-04-30", "days")
|
|
if (dayNumber<=7){
|
|
this.howDayNumber = dayNumber
|
|
}else{
|
|
this.howDayNumber = 7
|
|
this.currentScroll = 'item'+ '2024-05-06'
|
|
this.lastDay = '2024-05-06'
|
|
this.allDateDay = '2024-05-06'
|
|
}
|
|
}else if(this.selectFestival===3){
|
|
dayNumber = moment().diff("2024-06-07", "days")
|
|
if (dayNumber<=5){
|
|
this.howDayNumber = dayNumber
|
|
}else{
|
|
this.howDayNumber = 5
|
|
this.currentScroll = 'item'+ '2024-06-11'
|
|
this.allDateDay = '2024-06-11'
|
|
}
|
|
}else if (this.selectFestival===4){
|
|
dayNumber = moment().diff("2024-07-01", "days")// 暑期
|
|
if (dayNumber<=62){
|
|
this.howDayNumber = dayNumber
|
|
}else{
|
|
this.howDayNumber = 62
|
|
this.currentScroll = 'item'+ '2024-08-31'
|
|
this.lastDay = '2024-08-31'
|
|
this.allDateDay = '2024-09-01'
|
|
}
|
|
}else if (this.selectFestival===5){
|
|
dayNumber = moment().diff("2024-09-14", "days")// 中秋
|
|
if (dayNumber<=5){
|
|
this.howDayNumber = dayNumber
|
|
}else{
|
|
this.howDayNumber = 5
|
|
this.currentScroll = 'item'+ '2024-09-18'
|
|
this.lastDay = '2024-09-18'
|
|
this.allDateDay = '2024-09-18'
|
|
}
|
|
}else if (this.selectFestival===6){
|
|
dayNumber = moment().diff("2024-09-30", "days")// 国庆
|
|
if (dayNumber<=9){
|
|
this.howDayNumber = dayNumber
|
|
}else{
|
|
this.howDayNumber = 9
|
|
this.currentScroll = 'item'+ '2024-10-08'
|
|
this.lastDay = '2024-10-08'
|
|
this.allDateDay = '2024-10-08'
|
|
}
|
|
}
|
|
|
|
let dateList = []
|
|
for (let i = 1;i<=this.howDayNumber;i++){
|
|
if (this.selectFestival===0){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-01-25").add(i, 'days').format("YYYY-MM-DD")})
|
|
}else if(this.selectFestival===1){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-04-02").add(i, 'days').format("YYYY-MM-DD")})
|
|
}else if (this.selectFestival===2){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-04-29").add(i, 'days').format("YYYY-MM-DD")})
|
|
}else if (this.selectFestival===3){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-06-06").add(i, 'days').format("YYYY-MM-DD")})
|
|
}else if (this.selectFestival===4){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-06-30").add(i, 'days').format("YYYY-MM-DD")})// 端午
|
|
}else if (this.selectFestival===5){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-09-13").add(i, 'days').format("YYYY-MM-DD")})// 中秋
|
|
}else if (this.selectFestival===6){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-09-29").add(i, 'days').format("YYYY-MM-DD")})// 国庆
|
|
}
|
|
// if (i<7){
|
|
// dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
|
|
// }else{
|
|
// dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
|
|
// }
|
|
}
|
|
if(dateList && dateList.length>0){
|
|
this.scrollList = dateList
|
|
this.selectDateText = dateList[this.howDayNumber-1].value
|
|
}
|
|
this.handleGetData()
|
|
},
|
|
methods:{
|
|
// 点击了累计还是选择了日期
|
|
handleChangeTime(date){
|
|
if (date==='all'){
|
|
this.currentScroll = 'all'
|
|
const time = new Date(this.lastDay)
|
|
let m = time.getMonth()+1
|
|
let d = time.getDate()
|
|
this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
|
|
}else{
|
|
this.currentScroll = 'item'+ date
|
|
const time = new Date(date)
|
|
let m = time.getMonth()+1
|
|
let d = time.getDate()
|
|
this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
|
|
}
|
|
|
|
this.handleGetData(date)
|
|
|
|
},
|
|
// 获取排名信息
|
|
async handleGetData(date){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
let time = date?
|
|
date==='all'?this.lastDay:
|
|
this.currentScroll.split('item')[1]:
|
|
this.currentScroll.split('item')[1]
|
|
const req = {
|
|
calcType:this.pageType,
|
|
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
|
|
curYear: this.curYear,
|
|
compareYear: this.compareYear,
|
|
HolidayType:this.selectFestival===0?2:this.selectFestival===1?3:this.selectFestival===2?4:this.selectFestival===3?5:this.selectFestival===4?6:this.selectFestival===5?7:this.selectFestival===6?8:'',
|
|
StatisticsDate:time,
|
|
businessRegion:1,
|
|
SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`
|
|
}
|
|
// this.dataList
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetServerpartINCAnalysis',req)
|
|
console.log('data',data)
|
|
if (data.Result_Data){
|
|
this.dataList = this.handleGetSort(data.Result_Data.List)
|
|
let list = []
|
|
if (data.Result_Data.List && data.Result_Data.List.length>0){
|
|
data.Result_Data.List.forEach(item=>{
|
|
list.push({name:item.ServerpartName,value:item.ServerpartId})
|
|
})
|
|
}
|
|
this.serverPartList = list
|
|
}
|
|
uni.hideLoading()
|
|
},
|
|
// 修改排序字段
|
|
handleChangeSortName(value){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
if (value===this.sortName){
|
|
if (this.sortType===1){
|
|
this.sortType=0
|
|
}else{
|
|
this.sortType=1
|
|
}
|
|
}else{
|
|
this.sortName = value
|
|
this.sortType=1
|
|
}
|
|
let list = this.handleGetSort(this.dataList)
|
|
this.dataList = list
|
|
console.log('this.dataList',this.dataList)
|
|
this.$forceUpdate()
|
|
uni.hideLoading()
|
|
},
|
|
// 切换模块
|
|
handleChangeType(value){
|
|
this.pageType = value
|
|
if (value===2){
|
|
this.handleGetData('all')
|
|
}else{
|
|
this.handleGetData()
|
|
}
|
|
},
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 排序方法
|
|
handleGetSort(list){
|
|
var len = list.length;
|
|
|
|
for (var i = 0; i < len - 1; i++) {
|
|
for (var j = 0; j < len - 1 - i; j++) {
|
|
// 判断按照那个排序
|
|
if (this.type===1){
|
|
// 正序
|
|
if (this.sortType===0){
|
|
// 24年营收
|
|
if (this.sortName===1){
|
|
if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].RevenueINC.lYearData > list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].RevenueINC.increaseData > list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].RevenueINC.increaseRate > list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
// 降序
|
|
// 24年营收
|
|
if (this.sortName===1){
|
|
if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].RevenueINC.lYearData < list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].RevenueINC.increaseData < list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].RevenueINC.increaseRate < list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if(this.type===2){
|
|
// 正序
|
|
if (this.sortType===0){
|
|
// 24年营收
|
|
if (this.sortName===1){
|
|
if (list[j].AccountINC.curYearData > list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].AccountINC.lYearData > list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].AccountINC.increaseData > list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].AccountINC.increaseRate > list[j + 1].AccountINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
// 降序
|
|
else{
|
|
// 24年营收
|
|
if (this.sortName===1){
|
|
if (list[j].AccountINC.curYearData < list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].AccountINC.lYearData < list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].AccountINC.increaseData < list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].AccountINC.increaseRate < list[j + 1].AccountINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if(this.type===3){
|
|
// 正序
|
|
if (this.sortType===0){
|
|
// 24年车流
|
|
if (this.sortName===1){
|
|
if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].BayonetINC.lYearData > list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].BayonetINC.increaseData > list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].BayonetINC.increaseRate > list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}else{
|
|
// 降序
|
|
// 24年车流
|
|
if (this.sortName===1){
|
|
if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].BayonetINC.lYearData < list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].BayonetINC.increaseData < list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].BayonetINC.increaseRate < list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return list;
|
|
},
|
|
// 跳转去看服务区排名
|
|
handleGoServerPartDetail(obj){
|
|
let springObj = {
|
|
SERVERPART_NAME: obj.ServerpartName,
|
|
SPREGIONTYPE_NAME: obj.SPRegionTypeName,
|
|
SPRegionType_ID: obj.SPRegionTypeId,
|
|
Serverpart_ID: obj.ServerpartId,
|
|
}
|
|
uni.setStorageSync('springService',springObj) //当前选中服务区信息
|
|
this.$util.toNextRoute('navigateTo', `/pages/nationalPage/merchantRevenue?ServerpartId=${obj.ServerpartId}&type=${this.type}&serverPartList=${JSON.stringify(this.serverPartList)}¤tScroll=${this.currentScroll}&festivalType=${this.selectFestival}`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
background: #fff;
|
|
.springTop{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
}
|
|
.qmTop{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
|
|
}
|
|
.labourTop{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourBg.png");
|
|
}
|
|
.dragonBoatTop{
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatBg.png");
|
|
}
|
|
.summerHolidayTop{
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
|
|
}
|
|
.midAutumnTop{
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
|
|
}
|
|
.nationalDayTop{
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayBg.png") !important;
|
|
}
|
|
.top{
|
|
width: 100%;
|
|
height: 324rpx;
|
|
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
.headerSpring{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
}
|
|
.headerQm{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
|
|
}
|
|
.headerLabour{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourBg.png");
|
|
}
|
|
.headerDragonBoat{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatBg.png");
|
|
}
|
|
.summerHolidayBoat{
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
|
|
}
|
|
.midAutumnBoat{
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
|
|
}
|
|
.nationalDayBoat{
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayBg.png") !important;
|
|
}
|
|
.header{
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 324rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 2;
|
|
.backArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
.contentPage{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
transform: translateY(-120rpx);
|
|
.revenueDetail{
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
margin-top: 24rpx;
|
|
.springTitleBox{
|
|
background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
|
|
}
|
|
.qmTitleBox{
|
|
background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
|
|
}
|
|
.labourTitleBox{
|
|
background: linear-gradient( 360deg, rgba(255,236,208,0) 0%, #FFECD0 100%);
|
|
}
|
|
.dragonBoatTitleBox{
|
|
background: linear-gradient( 360deg, rgba(225,241,237,0) 0%, #E1F1ED 100%);
|
|
}
|
|
.summerHolidayTitleBox{
|
|
background: linear-gradient( 360deg, rgba(214,238,243,0) 0%, #D1E9EE 100%);
|
|
}
|
|
.midAutumnTitleBox{
|
|
background: linear-gradient( 360deg, rgba(255,215,180,0) 0%, #FFF3E9 100%);
|
|
}
|
|
.nationalDayTitleBox{
|
|
background: linear-gradient( 360deg, rgba(255,218,210,0) 0%, #FFF2F0 100%);
|
|
}
|
|
|
|
|
|
.revenueDetailTitleBox{
|
|
width: 100%;
|
|
height: 90rpx;
|
|
//background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
|
|
//background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
|
|
border-radius: 14rpx 14rpx 0rpx 0rpx;
|
|
box-sizing: border-box;
|
|
padding: 36rpx 34rpx 22rpx;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
.detailLogo{
|
|
width: 178rpx;
|
|
height: 32rpx;
|
|
}
|
|
.modalUnit{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
position: absolute;
|
|
left: 220rpx;
|
|
top: 30rpx;
|
|
}
|
|
}
|
|
.right{
|
|
.typeChangeBox{
|
|
display: flex;
|
|
align-items: center;
|
|
background: #FFFFFF;
|
|
border-radius: 6rpx;
|
|
box-sizing: border-box;
|
|
padding: 4rpx;
|
|
.normal{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 36rpx;
|
|
padding: 6rpx 16rpx;
|
|
}
|
|
.select{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 36rpx;
|
|
background: #F5EFEF;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.revenueContent{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx 24rpx;
|
|
.navBigList{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 32rpx;
|
|
.allBox{
|
|
width: 70rpx;
|
|
height: 100%;
|
|
.scrollItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #ED3E48;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.navList{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding-bottom: 24rpx;
|
|
border-bottom: 1px solid #F5F4F4;
|
|
.scrollItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
margin-right: 32rpx;
|
|
display: inline-block;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
//color: #ED3E48;
|
|
//color: #226C61;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
.springNav{
|
|
.selectItem {
|
|
color: #ED3E48!important;
|
|
}
|
|
}
|
|
.qmNav{
|
|
.selectItem {
|
|
color: #226C61!important;
|
|
}
|
|
}
|
|
.labourNav{
|
|
.selectItem {
|
|
color: #D14702!important;
|
|
}
|
|
}
|
|
.dragonBoatNav{
|
|
.selectItem {
|
|
color: #3E8958!important;
|
|
}
|
|
}
|
|
.summerHolidayNav{
|
|
.selectItem {
|
|
color: #007797!important;
|
|
}
|
|
}
|
|
.midAutumnNav{
|
|
.selectItem{
|
|
color: #DA5015;
|
|
}
|
|
}
|
|
.nationalDayNav{
|
|
.selectItem{
|
|
color: #D52020;
|
|
}
|
|
}
|
|
}
|
|
.dateText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
margin: 16rpx 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.modalBox{
|
|
margin-top: 40rpx;
|
|
.modalTitleBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
margin-bottom: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.modalTitleItem{
|
|
display: flex;
|
|
align-items: center;
|
|
.modalIndex{
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #DB6465;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
.modalText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
.modalUnit{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
.moreBox{
|
|
display: flex;
|
|
align-items: center;
|
|
.moreText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
.moreIcon{
|
|
width: 24rpx;
|
|
height: 36rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
.modalTitleItem1{
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.sortBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
.sortItem{
|
|
display: flex;
|
|
align-items: center;
|
|
.sortText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
.sortIconBox{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 16rpx;
|
|
.upIcon{
|
|
width: 16rpx;
|
|
height: 12rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
.bottomIcon{
|
|
width: 16rpx;
|
|
height: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modalDetail{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.modalDetailTitle{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8rpx 0;
|
|
.titleItem{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.typeFirst{
|
|
height: calc(100vh - 300px);
|
|
.row{
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 32rpx;
|
|
.valueItem{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
text-indent: 8rpx;
|
|
}
|
|
.bigFather{
|
|
position: relative;
|
|
font-weight: 600;
|
|
}
|
|
.bigFather:before{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -8rpx;
|
|
transform: translateY(-50%);
|
|
content:'';
|
|
display: inline-block;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: #DB6465;
|
|
}
|
|
.father{
|
|
position: relative;
|
|
font-weight: 600;
|
|
}
|
|
.father:before{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -8rpx;
|
|
transform: translateY(-50%);
|
|
content:'';
|
|
display: inline-block;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: #3188FF;
|
|
}
|
|
|
|
.son{
|
|
position: relative;
|
|
}
|
|
.son:before{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -8rpx;
|
|
transform: translateY(-50%);
|
|
content:'';
|
|
display: inline-block;
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: orangered;
|
|
}
|
|
.compareItem{
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
.addItem{
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
color: #E83944;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.listItem{
|
|
width:100%;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 16rpx;
|
|
background: #F7F7F7;
|
|
margin-bottom: 24rpx;
|
|
display: flex;
|
|
.itemLeft{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 16rpx;
|
|
//border: 2rpx solid #E6E6E6;
|
|
position: relative;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
.bg{
|
|
position: absolute;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
top: 0;left: 0;
|
|
z-index: 1;
|
|
}
|
|
.statueBox{
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 0;right: 0;
|
|
width: 76rpx;
|
|
height: 32rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 28rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
}
|
|
.nameBox{
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 32rpx;
|
|
left: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.serviceName{
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #7F020B;
|
|
line-height: 30rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
.serviceLabel{
|
|
font-size: 20rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #7F020B;
|
|
line-height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.contentRight{
|
|
width: calc(100% - 176rpx);
|
|
margin-left: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.rightTop{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.rightTopLeft{
|
|
display: flex;
|
|
align-items: center;
|
|
.indexBox{
|
|
width: 36rpx;
|
|
height: 32rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FEFFFF;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.areaName{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.rightTopRight{
|
|
display: flex;
|
|
align-items: center;
|
|
.entryRateLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 32rpx;
|
|
}
|
|
.entryRateValue{
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 32rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.rightBottom{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.rightBottomItem{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.itemLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
.itemValue{
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 32rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
.otherCarBox{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
.MoreBox{
|
|
width: 30%;
|
|
height: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.goMoreIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.typeSecond{
|
|
.listValueBox{
|
|
width: 100%;
|
|
.row{
|
|
width: 100%;
|
|
display: flex;
|
|
margin-top: 32rpx;
|
|
.rowItem{
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|