910 lines
32 KiB
Vue
910 lines
32 KiB
Vue
<template>
|
||
<div class="main" >
|
||
<div class="img" :style="{left:allScreen?'100%':'0'}">
|
||
<div class="imgContent">
|
||
<div class="imgTop">
|
||
<span class="unit">单位：万元<span style="color: red">(可左滑查看)</span></span>
|
||
<div class="searchAllScreen">
|
||
<img class="allScreenIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allScreenIcon.png"/>
|
||
<span class="text" @click="handleShowAllScreen">全屏</span>
|
||
</div>
|
||
</div>
|
||
<qiunDataCharts
|
||
type="area"
|
||
:opts="opts"
|
||
:chartData="res"
|
||
:animation="false"
|
||
:canvas2d="true"
|
||
:inScrollView="true"
|
||
tooltipFormat="entryCarNumber"
|
||
:ontouch="true"
|
||
/>
|
||
</div>
|
||
|
||
<scroll-view scroll-y="true" class="scrollView">
|
||
<div class="noticeBox" v-if="selectFestival===0">
|
||
<div :class="selectFestival===0?'boxBg springBox':selectFestival===1?'boxBg qmBox':''"></div>
|
||
<div class="contentBox">
|
||
<!-- <img class="contentIcon" src=""/>-->
|
||
<img class="contentIcon" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/trendChart.png':selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/larburTrendChart.png':''"/>
|
||
<div class="contentText" v-if="selectFestival===0">
|
||
根据历史大数据显示：<br/>
|
||
<div style="text-indent: 2rem;font-size: 24rpx">
|
||
服务区会在春运前至农历小年夜前（<span class="red">农历二十二</span>）到底回程小高峰，然后流量逐步回落至春运最低点（<span class="red">除夕夜</span>），大年初二开始随着出行自驾游的高峰来临，流量逐步放大，会在初六达到整个春运最高峰，随后流量逐步回落至次低点（<span class="red">元宵节</span>），在正月十六出现一波返程小高峰后，流量逐步回复正常。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="noticeBox" style="height: 500rpx" v-if="selectFestival===2">
|
||
<div :class="selectFestival===0?'boxBg springBox':selectFestival===1?'boxBg qmBox':selectFestival===2?'boxBg labourBox':''"></div>
|
||
<div class="contentBox">
|
||
<img class="contentIcon" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/trendChart.png':selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/larburTrendChart.png':''"/>
|
||
<div class="contentText" >
|
||
根据历史大数据显示：<br/>
|
||
<div style="text-indent: 2rem;font-size: 24rpx">
|
||
2024年五一假期期间，预计安徽驿达服务区<span class="red">5月1日</span>（假期首日）10时-14时是<span class="red">出程入区高峰</span>时段，<span class="red">峰值</span>出现在11时-13时；
|
||
</div>
|
||
<div style="text-indent: 2rem;font-size: 24rpx;margin-top: 8px">
|
||
安徽驿达服务区返程入区高峰或将较为分散，预计<span class="red">5月4日</span>（假日第四天）15时-19时，<span class="red">5月5日</span>（假期末日）14时-20时为<span class="red">返程入区高峰</span>时段，预计<span class="red">入区峰值</span>出现在<span class="red">5月4日</span>（假日第四天）<span class="red">17时-19时</span>，<span class="red">5月5日</span>（假期末日）<span class="red">16时-18时</span>，5月6日恢复正常
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="allPkBox">
|
||
<div :class="selectFestival===0?'boxBg springBox':
|
||
selectFestival===1?'boxBg qmBox':
|
||
selectFestival===2?'boxBg labourBox':
|
||
selectFestival===3?'boxBg labourBox':
|
||
''"></div>
|
||
<div class="pkContent">
|
||
<div class="contentTop">
|
||
<!-- <img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />-->
|
||
<img class="titleImg" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png':
|
||
selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmSumData.png':
|
||
selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourAllData.png':
|
||
selectFestival===3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourAllData.png':
|
||
''" />
|
||
</div>
|
||
<div class="pkBox">
|
||
<div :class="selectFestival===0?'leftBox springLeftBox':
|
||
selectFestival===1?'leftBox qmLeftBox':
|
||
selectFestival===2?'leftBox labourLeftBox':
|
||
selectFestival===3?'leftBox dragonBoatLeftBox':
|
||
''">
|
||
<text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
|
||
<text class="label">2024年/万元</text>
|
||
</div>
|
||
<div :class="selectFestival===0?'rightBox springRightBox':
|
||
selectFestival===1?'rightBox qmRightBox':
|
||
selectFestival===2?'rightBox labourRightBox':
|
||
selectFestival===3?'rightBox dragonBoatRightBox':
|
||
''">
|
||
<text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
|
||
<text class="label">2023年/万元</text>
|
||
</div>
|
||
<img class="pkLogo" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png':
|
||
selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmPk1st.png':
|
||
selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS1st.png':
|
||
selectFestival===3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS1st.png':
|
||
''"/>
|
||
</div>
|
||
<div class="pkBox">
|
||
<div :class="selectFestival===0?'leftBox revenueLeft':
|
||
selectFestival===1?'leftBox qmRevenueLeft':
|
||
selectFestival===2?'leftBox labourRevenueLeft':
|
||
selectFestival===3?'leftBox dragonBoatRevenueLeft':
|
||
''">
|
||
<text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
|
||
<text class="label">2024年/万元</text>
|
||
</div>
|
||
<div :class="selectFestival===0?'rightBox revenueRight':
|
||
selectFestival===1?'rightBox qmRevenueRight':
|
||
selectFestival===2?'rightBox labourRevenueRight':
|
||
selectFestival===3?'rightBox dragonBoatRevenueRight':
|
||
''">
|
||
<text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
|
||
<text class="label">2023年/万元</text>
|
||
</div>
|
||
<img class="pkLogo" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png':
|
||
selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmPk2st.png':
|
||
selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS2st.png':
|
||
selectFestival===3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS2st.png':
|
||
''"/>
|
||
</div>
|
||
<div class="pkBox" style="margin-bottom: 20px">
|
||
<div :class="selectFestival===0?'leftBox carLeft':
|
||
selectFestival===1?'leftBox qmCarLeft':
|
||
selectFestival===2?'leftBox labourCarLeft':
|
||
selectFestival===3?'leftBox dragonBoatCarLeft':
|
||
''">
|
||
<text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
|
||
<text class="label">2024年/万辆</text>
|
||
</div>
|
||
<div :class="selectFestival===0?'rightBox carRight':
|
||
selectFestival===1?'rightBox qmCarRight':
|
||
selectFestival===2?'rightBox labourCarRight':
|
||
selectFestival===3?'rightBox dragonBoatCarRight':
|
||
'' ">
|
||
<text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
|
||
<text class="label">2023年/万辆</text>
|
||
</div>
|
||
<img class="pkLogo" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png':
|
||
selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmPk3st.png':
|
||
selectFestival===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS3st.png':
|
||
selectFestival===3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourVS3st.png':
|
||
''"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div class="allScreen" :style="{left:allScreen?'0':'100%'}" >
|
||
<div class="bigBox">
|
||
<div class="bigImg">
|
||
<qiunDataCharts
|
||
type="area"
|
||
:opts="opts2"
|
||
:chartData="res2"
|
||
:animation="false"
|
||
:canvas2d="true"
|
||
:inScrollView="true"
|
||
tooltipFormat="entryCarNumber2"
|
||
:ontouch="true"
|
||
:reshow="allScreen"
|
||
/>
|
||
</div>
|
||
<div class="closeBox">
|
||
<img class="closeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/closeIcon.svg" @click="handleShowAllScreen"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import qiunDataCharts from "./components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
|
||
import request from '@/util/index.js'
|
||
var uChartsInstance = {};
|
||
export default {
|
||
components: {qiunDataCharts},
|
||
data() {
|
||
return {
|
||
opts:{},
|
||
opts2:{},
|
||
res:{},
|
||
res2:{},
|
||
allScreen:false,
|
||
ScrollTop:0,
|
||
howDayNumber:0,
|
||
giveTrendObj:{},
|
||
selectFestival: 0,
|
||
}
|
||
},
|
||
onLoad(query){
|
||
if (query.detailObj){
|
||
this.giveTrendObj = JSON.parse(query.detailObj)
|
||
}
|
||
if (query.festivalType){
|
||
this.selectFestival = Number(query.festivalType)
|
||
}
|
||
|
||
this.lastDay = uni.getStorageSync('lastDay')
|
||
const lastDate = new Date(this.lastDay)
|
||
// 拿到是春运开始的第几天
|
||
let dayNumber = 0
|
||
let lastMonth = lastDate.getMonth() + 1
|
||
let lastDays = lastDate.getDate()
|
||
// 24年春运开始时间为 1.26
|
||
if (lastMonth === 1){
|
||
dayNumber = lastDays - 26 + 1
|
||
}else{
|
||
dayNumber = 6 + lastDays
|
||
}
|
||
console.log('dayNumber',dayNumber)
|
||
this.ScrollTop = (dayNumber-3)*30
|
||
if (this.selectFestival===0){
|
||
this.howDayNumber = dayNumber
|
||
}else if (this.selectFestival===1){
|
||
this.howDayNumber = 5
|
||
}else if (this.selectFestival===2){
|
||
this.howDayNumber = 7
|
||
}else if (this.selectFestival===3){
|
||
this.howDayNumber = 5
|
||
}
|
||
this.handleGetData()
|
||
},
|
||
methods:{
|
||
async handleGetData(){
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
const req = {
|
||
pushProvinceCode:'340000',
|
||
StatisticsDate: this.lastDay,
|
||
holidayType: this.selectFestival===0?2:this.selectFestival===1?3:this.selectFestival===2?4:this.selectFestival===3?5:'',
|
||
curYear:2024,
|
||
compareYear:2023,
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetHolidayCompare',req)
|
||
console.log('data',data)
|
||
let dateList = []
|
||
let dateList2 = []
|
||
|
||
// 去年的具体日期
|
||
let compareDateList = []
|
||
// 今年的具体日期
|
||
let curDateList = []
|
||
|
||
let dataObj = data.Result_Data
|
||
if (dataObj && dataObj.compareList && dataObj.compareList.length>0){
|
||
dataObj.compareList.forEach(item=>{
|
||
const date = new Date(item.name)
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
let dateText = `${m}.${d}`
|
||
item.easyDate = dateText
|
||
compareDateList.push(item.name)
|
||
})
|
||
}
|
||
if (dataObj && dataObj.curList && dataObj.curList.length>0){
|
||
dataObj.curList.forEach(item=>{
|
||
const date = new Date(item.name)
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
let dateText = `${m}.${d}`
|
||
item.easyDate = dateText
|
||
curDateList.push(item.name)
|
||
})
|
||
}
|
||
if (this.selectFestival===0){
|
||
for(let i = 1;i<=40;i++){
|
||
if (i===7){
|
||
// dateList.push(`北小年`)
|
||
dateList.push(`大年廿二`)
|
||
}else if(i===9){
|
||
dateList.push(`南小年`)
|
||
}else if(i===15){
|
||
dateList.push(`大年三十`)
|
||
}else if(i===16){
|
||
dateList.push(`春节`)
|
||
}else if(i===21){
|
||
dateList.push(`初六`)
|
||
}else if(i===23){
|
||
dateList.push(`初八`)
|
||
}else if(i===25){
|
||
dateList.push(`初十`)
|
||
}else if(i===26){
|
||
dateList.push(`正月十一`)
|
||
}else if(i===30){
|
||
dateList.push(`正月十五`)
|
||
}else if(i===31){
|
||
dateList.push(`正月十六`)
|
||
}else{
|
||
dateList.push(`第${i}天`)
|
||
}
|
||
}
|
||
for(let i = 1;i<=40;i++){
|
||
dateList2.push(i)
|
||
}
|
||
}else if (this.selectFestival===1){
|
||
for(let i = 1;i<=5;i++){
|
||
dateList.push(`第${i}天`)
|
||
}
|
||
for(let i = 1;i<=5;i++){
|
||
dateList2.push(i)
|
||
}
|
||
}else if (this.selectFestival===2){
|
||
for(let i = 1;i<=7;i++){
|
||
dateList.push(`第${i}天`)
|
||
}
|
||
for(let i = 1;i<=7;i++){
|
||
dateList2.push(`第${i}天`)
|
||
}
|
||
}else if (this.selectFestival===3){
|
||
for(let i = 1;i<=5;i++){
|
||
dateList.push(`第${i}天`)
|
||
}
|
||
for(let i = 1;i<=5;i++){
|
||
dateList2.push(i)
|
||
}
|
||
}
|
||
|
||
let max = 0
|
||
let compareList = []
|
||
let realCompareList = []
|
||
|
||
let curListList = []
|
||
let realCurList = []
|
||
|
||
// 农历日期
|
||
let tradDateList = []
|
||
if (dataObj){
|
||
dateList.forEach((item,index)=>{
|
||
// let beforeValue = dataObj.compareList.filter(filter=> filter.easyDate === item)[0]
|
||
// beforeValue = beforeValue?beforeValue.value:null
|
||
let beforeValue
|
||
if (dataObj.compareList && dataObj.compareList.length>0 && dataObj.compareList[index]){
|
||
beforeValue = dataObj.compareList[index].value
|
||
}
|
||
if (beforeValue){
|
||
if (Number(beforeValue) / 10000 > max){
|
||
max = Number(beforeValue) / 10000
|
||
}
|
||
compareList.push(Number(beforeValue) / 10000)
|
||
realCompareList.push(Number(beforeValue))
|
||
}
|
||
else{
|
||
compareList.push(0)
|
||
realCompareList.push(0)
|
||
}
|
||
|
||
// let compareValue = dataObj.curList.filter(filter=> filter.easyDate === item)[0]
|
||
// compareValue = compareValue?compareValue.value:null
|
||
let compareValue
|
||
if (dataObj.curList && dataObj.curList.length>0 && dataObj.curList[index]){
|
||
compareValue = dataObj.curList[index].value
|
||
}
|
||
if (compareValue){
|
||
if (Number(compareValue) / 10000 > max){
|
||
max = Number(compareValue) / 10000
|
||
}
|
||
curListList.push(Number(compareValue) / 10000)
|
||
realCurList.push(Number(compareValue))
|
||
}else{
|
||
curListList.push(0)
|
||
realCurList.push(0)
|
||
}
|
||
})
|
||
}
|
||
max = this.getSplitNumber(max)
|
||
|
||
let list = ['大年十六','大年十七','大年十八','大年十九','大年二十','大年廿一','大年廿二','北小年','南小年','大年廿五','大年廿六','大年廿七',
|
||
'大年廿八','大年廿九','除夕','春节','正月初二','正月初三','正月初四','正月初五','正月初六','正月初七','正月初八','正月初九','正月初十','正月十一',
|
||
'正月十二','正月十三','正月十四','元宵','正月十六','正月十七','正月十八','正月十九','正月二十','正月廿一','正月廿二','正月廿三','正月廿四','正月廿五']
|
||
|
||
|
||
let res = {
|
||
categories: dateList,
|
||
series:[
|
||
{
|
||
name:`24年`,
|
||
data:curListList,
|
||
real:realCurList,
|
||
tradDate:list,
|
||
howDayNumber:this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2024-04-30','2024-05-01','2024-05-02','2024-05-03','2024-05-04','2024-05-05','2024-05-06']//劳动节
|
||
realDateList: ['2024-06-07','2024-06-08','2024-06-09','2024-06-10','2024-06-11']
|
||
},
|
||
{
|
||
name:`23年`,
|
||
data:compareList,
|
||
real:realCompareList,
|
||
tradDate:list,
|
||
howDayNumber:this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2023-04-28','2023-04-29','2023-04-30','2023-05-01','2023-05-02','2023-05-03','2023-05-04']//劳动节
|
||
realDateList: ['2024-06-21','2024-06-22','2024-06-23','2024-06-24','2024-06-25']
|
||
},
|
||
],
|
||
max:Number(max.toFixed(2)),
|
||
selectFestival:this.selectFestival
|
||
}
|
||
let res2 = {
|
||
categories: dateList2,
|
||
series:[
|
||
{
|
||
name:`24年`,
|
||
data:curListList,
|
||
real:realCurList,
|
||
tradDate:list,
|
||
howDayNumber:this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2024-04-30','2024-05-01','2024-05-02','2024-05-03','2024-05-04','2024-05-05','2024-05-06']//劳动节
|
||
realDateList: ['2024-06-07','2024-06-08','2024-06-09','2024-06-10','2024-06-11']
|
||
},
|
||
{
|
||
name:`23年`,
|
||
data:compareList,
|
||
real:realCompareList,
|
||
tradDate:list,
|
||
howDayNumber:this.howDayNumber,
|
||
selectFestival: this.selectFestival,
|
||
// realDateList: ['2023-04-28','2023-04-29','2023-04-30','2023-05-01','2023-05-02','2023-05-03','2023-05-04']//劳动节
|
||
realDateList: ['2024-06-21','2024-06-22','2024-06-23','2024-06-24','2024-06-25']
|
||
},
|
||
],
|
||
max:Number(max.toFixed(2)),
|
||
}
|
||
console.log('res',res)
|
||
console.log('res2',res2)
|
||
this.res = res
|
||
this.res2 = res2
|
||
this.opts = {
|
||
categories: res.categories,
|
||
series: res.series,
|
||
animation: false,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
enableScroll: true,
|
||
background: "#FFFFFF",
|
||
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
|
||
padding: [15, 15, 5, 5],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: true,
|
||
position: "bottom",
|
||
lineHeight: 25,
|
||
float: 'center'
|
||
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 6,
|
||
scrollAlign: 'left',
|
||
// fontColor:'red',
|
||
// format:"entryCarNumberXFormat"
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
splitNumber:6,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
max: this.selectFestival===0?3000:1500
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: true,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||
console.log('phoneInfo',phoneInfo)
|
||
let _this = this
|
||
this.opts2 = {
|
||
// width:phoneInfo.screenHeight+'px',
|
||
// height:(2*phoneInfo.screenWidth)+'px',
|
||
categories: res.categories,
|
||
series: res.series,
|
||
animation: false,
|
||
rotate: true,
|
||
rotateLock: false,
|
||
enableScroll: true,
|
||
background: "#FFFFFF",
|
||
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
|
||
padding: [15, 15, 5, 5],
|
||
dataLabel: false,
|
||
legend: {
|
||
show: true,
|
||
position: "bottom",
|
||
lineHeight: 25,
|
||
float: 'center'
|
||
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 40
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
splitNumber:5,
|
||
data: [
|
||
{
|
||
min: 0,
|
||
// max:_this.selectFestival===2?2000:3000
|
||
max: 2000
|
||
}
|
||
]
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: true,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
}
|
||
uni.hideLoading()
|
||
},
|
||
handleShowAllScreen(){
|
||
this.allScreen = !this.allScreen
|
||
},
|
||
getSplitNumber(value){
|
||
if (value === 0 || value<5){
|
||
let num = Math.ceil(Number(value))
|
||
return num
|
||
}else{
|
||
let sum = Number(value) + Number(value) *0.2
|
||
return Number((Math.ceil(sum / 1000)).toFixed(0)) * 1000
|
||
}
|
||
},
|
||
// 写死赋值农历日期
|
||
handleGetTraditionalDate(){
|
||
let list = ['大年十六','大年十七','大年十八','大年十九','大年二十','大年廿十一','大年廿十二','大年廿十三','大年廿十四','大年廿十五','大年廿十六','大年廿十七',
|
||
'大年廿十八','大年廿十九','除夕','春节','正月初二','正月初三','正月初四','正月初五','正月初六','正月初七','正月初八','正月初九','正月初十','正月十一',
|
||
'正月十二','正月十三','正月十四','元宵','正月十六','正月十七','正月十八','正月十九','正月二十','正月廿十一','正月廿十二','正月廿十三','正月廿十四','正月廿十五']
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #F3F4F9;
|
||
box-sizing: border-box;
|
||
.img{
|
||
width: 100%;
|
||
height: calc(100vh - 64rpx);
|
||
position: fixed;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
top: 32rpx;
|
||
.imgContent{
|
||
width: 100%;
|
||
background: #fff;
|
||
padding: 24rpx;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
.imgTop{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.unit{
|
||
margin-left: 24rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
}
|
||
.searchAllScreen{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8rpx;
|
||
padding: 8rpx 10rpx;
|
||
border: 2rpx solid #DFDFDF;
|
||
background: #fff;
|
||
.allScreenIcon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.text{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6B6C78;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scrollView{
|
||
height: calc(100% - 312px);
|
||
margin-top: 24rpx;
|
||
.noticeBox{
|
||
width: 100%;
|
||
height: 400rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx;
|
||
padding: 4rpx;
|
||
position: relative;
|
||
.springBox{
|
||
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
|
||
}
|
||
.qmBox{
|
||
background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
|
||
}
|
||
.labourBox{
|
||
background: linear-gradient( 360deg, rgba(255,236,208,0) 0%, #FFECD0 100%);
|
||
}
|
||
.boxBg{
|
||
z-index: 1;
|
||
position: absolute;
|
||
top: 4rpx;left: 4rpx;
|
||
width: calc(100% - 8rpx);
|
||
height: 192rpx;
|
||
//background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
|
||
//background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
.contentBox{
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: calc(100% - 8rpx);
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 22rpx;
|
||
.contentIcon{
|
||
width: 180rpx;
|
||
height: 44rpx;
|
||
}
|
||
.contentText{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
//margin-top: 16rpx;
|
||
.red{
|
||
color: red;
|
||
//color: #226C61;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.allPkBox{
|
||
width: 100%;
|
||
height: 625rpx;
|
||
margin-top: 32rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx;
|
||
padding: 4rpx;
|
||
position: relative;
|
||
.springBox{
|
||
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
|
||
}
|
||
.qmBox{
|
||
background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
|
||
}
|
||
.labourBox{
|
||
background: linear-gradient( 360deg, rgba(255,236,208,0) 0%, #FFECD0 100%);
|
||
}
|
||
.boxBg{
|
||
z-index: 1;
|
||
position: absolute;
|
||
top: 4rpx;left: 4rpx;
|
||
width: calc(100% - 8rpx);
|
||
height: 192rpx;
|
||
//background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FFF1F1 100%);
|
||
//background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
.pkContent{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
z-index: 2;
|
||
padding: 22rpx;
|
||
.contentTop{
|
||
width: 100%;
|
||
.titleImg{
|
||
width: 144rpx;
|
||
height: 74rpx;
|
||
}
|
||
}
|
||
.pkBox{
|
||
width: 100%;
|
||
height: 140rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
margin-bottom: 32rpx;
|
||
.pkLogo{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
}
|
||
.leftBox,.rightBox{
|
||
width: 50%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
}
|
||
|
||
.leftBox{
|
||
left: 0;top: 0;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
.value{
|
||
font-size: 44rpx;
|
||
//font-family: DINAlternate, DINAlternate;
|
||
color: #FFFFFF;
|
||
font-weight: bold;
|
||
line-height: 52rpx;
|
||
}
|
||
.label{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
color: #FFFFFF;
|
||
font-weight: 400;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.springLeftBox{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/leftRed.png");
|
||
}
|
||
.qmLeftBox{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg1st.png");
|
||
}
|
||
.labourLeftBox{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo1.png");
|
||
}
|
||
.rightBox{
|
||
right: 0;top: 0;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
align-items: flex-end;
|
||
.value{
|
||
font-size: 44rpx;
|
||
//font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
color: #FF5A3C;
|
||
line-height: 52rpx;
|
||
}
|
||
.label{
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FF5A3C;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.springRightBox{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rightPink.png");
|
||
}
|
||
.qmRightBox{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg2st.png");
|
||
.value{
|
||
color: #2D7E72!important;
|
||
}
|
||
.label{
|
||
color: #2D7E72!important;
|
||
}
|
||
}
|
||
.labourRightBox{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo2.png");
|
||
.value{
|
||
color: #E17900!important;
|
||
}
|
||
.label{
|
||
color: #E17900!important;
|
||
}
|
||
}
|
||
.revenueLeft{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
|
||
}
|
||
.qmRevenueLeft{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg3st.png");
|
||
}
|
||
.labourRevenueLeft{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo3.png");
|
||
}
|
||
.revenueRight{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
|
||
.value{
|
||
color: #D48F00;
|
||
}
|
||
.label{
|
||
color: #D48F00;
|
||
}
|
||
}
|
||
.qmRevenueRight{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg4st.png");
|
||
.value{
|
||
color: #3873DD;
|
||
}
|
||
.label{
|
||
color: #3873DD;
|
||
}
|
||
}
|
||
.labourRevenueRight{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo4.png");
|
||
.value{
|
||
color: #F0490E;
|
||
}
|
||
.label{
|
||
color: #F0490E;
|
||
}
|
||
}
|
||
.carLeft{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
|
||
}
|
||
.qmCarLeft{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg5st.png");
|
||
}
|
||
.labourCarLeft{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo5.png");
|
||
}
|
||
.carRight{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
|
||
.value{
|
||
color: #3873DD;
|
||
}
|
||
.label{
|
||
color: #3873DD;
|
||
}
|
||
}
|
||
.qmCarRight{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmBg6st.png");
|
||
.value{
|
||
color: #0793BB;
|
||
}
|
||
.label{
|
||
color: #0793BB;
|
||
}
|
||
}
|
||
.labourCarRight{
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourNo6.png");
|
||
.value{
|
||
color: #A59301;
|
||
}
|
||
.label{
|
||
color: #A59301;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.allScreen{
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100vh;
|
||
height: 100vh;
|
||
background: black;
|
||
//padding: 5vh 0;
|
||
.bigBox{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #fff;
|
||
.bigImg{
|
||
width: 100vw;
|
||
height: calc(100vh - 50rpx);
|
||
background: #fff;
|
||
}
|
||
.closeBox{
|
||
width: 100vw;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.closeIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|