update
This commit is contained in:
parent
bb8a95d483
commit
6c70d3c75d
@ -274,7 +274,9 @@
|
||||
{
|
||||
"path": "map",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"disableScroll": true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,9 +1,78 @@
|
||||
<template>
|
||||
<view class="mapView">
|
||||
<map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
|
||||
<view class="main">
|
||||
<view 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/commercial/navigation-left.svg" @click="handleBack"/>
|
||||
</view>
|
||||
<view class="mapView">
|
||||
<map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
|
||||
</view>
|
||||
|
||||
<view class="listBox" :style="{height:showMore?`calc(100vh - ${menu.bottom + 14}px)`:'calc(100vh - 680rpx)',transform:showMore?`translateY(-${340 - menu.bottom - 14}px)`:'translateY(-32rpx)'}">
|
||||
<view class="listTop"></view>
|
||||
<view class="contentList">
|
||||
<view class="expand" @click="handleChangeShowMore">
|
||||
<img class="showMore" :style="{transform: showMore?'rotate(90deg)':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
|
||||
</view>
|
||||
<view class="contentTop">
|
||||
<span class="listTitle">商家营收</span>
|
||||
|
||||
<!-- <view class="typeChangeBox">-->
|
||||
<!-- <view :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</view>-->
|
||||
<!-- <view :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
|
||||
<!-- <view 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="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">-->
|
||||
<!-- <view :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}}</view>-->
|
||||
<!-- </scroll-view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<!-- <view class="listTitle">-->
|
||||
<!-- <view class="titleItem"></view>-->
|
||||
<!-- </view>-->
|
||||
<scroll-view v-if="dataList && dataList.length>0" scroll-y="true" class="list" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
|
||||
<view class="listItem" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="leftItem">
|
||||
<img class="img" :src="item.Brand_ICO?item.Brand_ICO:'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png'"/>
|
||||
</view>
|
||||
<view class="rightItem">
|
||||
<view class="itemTop">
|
||||
<view class="itemTitle">{{ item.Brand_Name || '' }}</view>
|
||||
<span class="type">{{item.BrandType_Name || ''}}</span>
|
||||
</view>
|
||||
<view class="itemBox" v-if="item.Bussiness_Name">
|
||||
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shop.svg"/>
|
||||
<span class="name">{{item.Bussiness_Name || ''}}</span>
|
||||
</view>
|
||||
<view class="itemBox" v-if="item.Bussiness_Time">
|
||||
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/time.svg"/>
|
||||
<span class="name">{{item.Bussiness_Time || ''}}</span>
|
||||
</view>
|
||||
<view class="otherItem">
|
||||
<span class="other">{{item.Bussiness_State==='1000'?'运营中':'已暂停'}}</span>
|
||||
<span class="other">{{item.Business_Trade|| ''}}</span>
|
||||
</view>
|
||||
<view class="curRevenue">
|
||||
<span class="label">实时营收：</span>
|
||||
<span class="value">{{item.CurRevenue?$util.getMoney(item.CurRevenue):''}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else class="noDataBox" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
|
||||
<img class="noDataImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"/>
|
||||
<text class="noDataText">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import request from '@/util/index.js'
|
||||
export default {
|
||||
name: "map",
|
||||
data(){
|
||||
@ -11,13 +80,35 @@ export default {
|
||||
longitude:'',
|
||||
latitude:'',
|
||||
markers:{},// 标点
|
||||
id:''
|
||||
id:'',
|
||||
statusBarHeight:0,
|
||||
menu:{},
|
||||
pageType: 1,
|
||||
currentScroll:'',
|
||||
scrollList:[],
|
||||
nowDay:'',
|
||||
dataList:[],//
|
||||
showMore: false,// 是否展开
|
||||
curYear:'',
|
||||
compareYear:''
|
||||
}
|
||||
},
|
||||
onLoad(query){
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
|
||||
console.log('query',query)
|
||||
this.longitude = query.longitude
|
||||
this.latitude = query.latitude
|
||||
if (!query.longitude || !query.latitude){
|
||||
let seat = uni.getStorageSync('seatInfo')
|
||||
this.longitude = seat.longitude
|
||||
this.latitude = seat.latitude
|
||||
}else{
|
||||
this.longitude = query.longitude
|
||||
this.latitude = query.latitude
|
||||
}
|
||||
|
||||
this.id=query.id
|
||||
let markers = []
|
||||
markers.push({
|
||||
@ -28,6 +119,103 @@ export default {
|
||||
})
|
||||
// }
|
||||
this.markers = markers
|
||||
|
||||
const date = new Date()
|
||||
let y = date.getFullYear()
|
||||
let m = date.getMonth() + 1
|
||||
let d = date.getDate()
|
||||
if (m<10){
|
||||
m = '0' + m
|
||||
}
|
||||
if (d<10){
|
||||
d = '0' + d
|
||||
}
|
||||
// this.nowDay = `${y}-${m}-${d}`
|
||||
// this.currentScroll = 'item'+ this.nowDay
|
||||
// 拿到是春运开始的第几天
|
||||
let dayNumber = 0
|
||||
this.curYear = y
|
||||
this.compareYear = y - 1
|
||||
// 24年春运开始时间为 1.26
|
||||
let mNumber = date.getMonth() + 1
|
||||
let dNumber = date.getDate()
|
||||
if (mNumber === 1){
|
||||
dayNumber = mNumber - 26 + 1
|
||||
}else{
|
||||
dayNumber = 6 + dNumber
|
||||
}
|
||||
this.howDayNumber = dayNumber
|
||||
console.log('dayNumber',dayNumber)
|
||||
// let dateList = []
|
||||
// for (let i = 1;i<=dayNumber;i++){
|
||||
// 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}`})
|
||||
// }
|
||||
// }
|
||||
// this.scrollList = dateList
|
||||
// 请求页面数据
|
||||
this.handleGetData()
|
||||
},
|
||||
methods:{
|
||||
handleBack(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
handleChangeType(value){
|
||||
this.pageType = value
|
||||
},
|
||||
handleChangeTime(date){
|
||||
this.currentScroll = 'item'+ date
|
||||
this.handleGetData()
|
||||
},
|
||||
async handleGetData(date){
|
||||
uni.showLoading({
|
||||
title:'加载中'
|
||||
})
|
||||
let time = date?
|
||||
date==='all'?this.nowDay:
|
||||
this.currentScroll.split('item')[1]:
|
||||
this.currentScroll.split('item')[1]
|
||||
|
||||
let req = {
|
||||
ProvinceCode:'340000',
|
||||
Serverpart_ID:this.id,
|
||||
Statistics_Date:time,
|
||||
}
|
||||
let data = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
|
||||
if (data.Result_Code===100){
|
||||
let list = data.Result_Data.ShopBrandList
|
||||
let resList = []
|
||||
list.forEach(item=>{
|
||||
if (item.CurRevenue){
|
||||
resList.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
this.dataList = this.handleSortList(resList)
|
||||
console.log('dataList',this.dataList)
|
||||
}
|
||||
uni.hideLoading()
|
||||
},
|
||||
handleChangeShowMore(){
|
||||
this.showMore = !this.showMore
|
||||
},
|
||||
handleSortList(list){
|
||||
var len = list.length;
|
||||
for (var i = 0; i < len - 1; i++) {
|
||||
for (var j = 0; j < len - 1 - i; j++) {
|
||||
if (list[j].CurRevenue < list[j + 1].CurRevenue){
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
return list
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -35,12 +223,273 @@ export default {
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mapView{
|
||||
width: 100vw;
|
||||
.main{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.map{
|
||||
background: #fff;
|
||||
.header{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 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;
|
||||
}
|
||||
}
|
||||
.mapView{
|
||||
width: 100vw;
|
||||
height: 680rpx;
|
||||
.map{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.listBox{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
transform: translateY(-32rpx);
|
||||
padding: 4rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.listTop{
|
||||
position: absolute;
|
||||
top: 4rpx;left: 4rpx;
|
||||
width: calc(100% - 8rpx);
|
||||
height: 212rpx;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(360deg, rgba(230,238,255,0) 0%, #E6EEFF 100%);;
|
||||
}
|
||||
.contentList{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 4rpx;left: 4rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 28rpx 30rpx;
|
||||
.expand{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.showMore{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
.contentTop{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.listTitle{
|
||||
font-size: 32rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #1E2535;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.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: #EFEFF5;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navBigList{
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
.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: #2363FF;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
//.listTitle{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// .titleItem{
|
||||
// font-size: 28rpx;
|
||||
// font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 400;
|
||||
// color: #A69E9F;
|
||||
// line-height: 40rpx;
|
||||
// }
|
||||
//}
|
||||
.list{
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
.listItem{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F8F9F9;
|
||||
display: flex;
|
||||
//align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
.leftItem{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.rightItem{
|
||||
width: calc(100% - 144rpx);
|
||||
.itemTop{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.itemTitle{
|
||||
font-size: 34rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 48rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.type{
|
||||
display: inline-block;
|
||||
padding: 2rpx 8rpx;
|
||||
background: #EDF0F4;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.itemBox{
|
||||
display: flex;
|
||||
//align-items: center;
|
||||
margin-bottom: 4rpx;
|
||||
.icon{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.name{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
.otherItem{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.other{
|
||||
display: inline-block;
|
||||
padding: 2rpx 8rpx;
|
||||
background: #EDF0F4;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
.curRevenue{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 24rpx;
|
||||
justify-content: flex-end;
|
||||
//justify-content: space-between;
|
||||
.label{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.value{
|
||||
font-size: 40rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #FACB7F;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noDataBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.noDataImg{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.noDataText{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="top">
|
||||
<image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/specialBg.png"/>
|
||||
<img class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/specialBg.png"/>
|
||||
<div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
|
||||
<image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
||||
<div class="timeSelect">
|
||||
<img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>
|
||||
<!-- <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDate.png"/>-->
|
||||
<picker mode="date" :value="searchText" :end="lastDay" @change="bindDateChange" >
|
||||
<view class="time">
|
||||
<view class="text">{{ searchText }}</view>
|
||||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
|
||||
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/timeDown.png"/>
|
||||
</view>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topBox">
|
||||
<div class="boxLeft" style="width: 100%">
|
||||
<div class="boxLeft">
|
||||
<div class="headerTitle">实时分析</div>
|
||||
<!-- 注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
|
||||
<span class="notice" v-if="selectTab===1">{{ `注: 1个小时入区流量比${showMonth}月同一时间流量增幅150%以上且每小时入区车辆超过100辆` }}</span>
|
||||
@ -23,166 +23,96 @@
|
||||
</div>
|
||||
<div class="boxRight">
|
||||
<span class="day">{{showDay}}</span>
|
||||
<image class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dayBox.png"/>
|
||||
<img class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dateBg.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="contentTab">
|
||||
<div :class="selectTab===1?'selectTab tabItem':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>
|
||||
<div :class="selectTab===2?'selectTab tabItem':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>
|
||||
<div :class="selectTab===1?'selectTab tabItem':'tabItem'" @click="handleTab(1)">
|
||||
<span>{{`${startTime}时入区车流预警`}}</span>
|
||||
</div>
|
||||
<div :class="selectTab===2?'selectTab2 tabItem':'tabItem'" @click="handleTab(2)">
|
||||
<span>
|
||||
{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="noticeBox">-->
|
||||
|
||||
<!-- </div>-->
|
||||
|
||||
<scroll-view class="listBigBox" :scroll-y="true">
|
||||
<div class="listItem" v-for="(item,index) in tableList" :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.name}}</text>
|
||||
<text class="serviceLabel">{{item.SERVERPART_REGION + '区'}}</text>
|
||||
</view>
|
||||
<div class="contentList">
|
||||
<div class="sortBox">
|
||||
<div class="sortItem" :style="{width:'calc(100% - 330rpx)'}">服务区</div>
|
||||
<div class="sortItem">
|
||||
<span class="sortItemText" @click="handleChangeSort(1)">当月</span>
|
||||
<img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
|
||||
</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>
|
||||
<!-- <text class="areaName">{{item.SPRegionType_Name||'-'}}</text>-->
|
||||
</view>
|
||||
<view class="rightTopRight">
|
||||
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>
|
||||
<span class="add">{{item.VEHICLE_RATE}}%</span>
|
||||
<div class="sortItem">
|
||||
<span class="sortItemText" @click="handleChangeSort(2)">月均</span>
|
||||
<img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
|
||||
</div>
|
||||
<div class="sortItem">
|
||||
<span class="sortItemText" @click="handleChangeSort(3)">增幅</span>
|
||||
<img class="sortIcon" :style="{transform:sortType===1?'':`rotate(-180deg)`}" :src="sortNumber===3?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectSortIcon.png':'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/sortIcon.png'"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unitBox" v-if="selectTab===2">
|
||||
<span class="unit">单位：万辆</span>
|
||||
</div>
|
||||
|
||||
<scroll-view class="listBigBox" :style="{height:selectTab===1?'calc(100ch - 320px)':'calc(100ch - 356px)'}" :scroll-y="true">
|
||||
<div class="listItem" v-for="(item,index) in tableList" :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.name}}</text>
|
||||
<text class="serviceLabel">{{item.SERVERPART_REGION + '区'}}</text>
|
||||
</view>
|
||||
</div>
|
||||
<div class="rightBottom">
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemLabel">当前车流 /辆</text>
|
||||
<text class="itemValue">{{ item.VEHICLE_COUNT || '-'}}</text>
|
||||
</view>
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemLabel">月均车流 /辆</text>
|
||||
<text class="itemValue">{{item.MONTHVEHICLE_COUNT || '-'}}</text>
|
||||
</view>
|
||||
<view class="rightBottomItem">
|
||||
<text class="itemLabel"></text>
|
||||
<div class="contentRight">
|
||||
<div class="rightTop">
|
||||
<view class="rightTopLeft">
|
||||
<img class="NoIcon" v-if="index<=2" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No1.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No2.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No3.png':''"/>
|
||||
<view class="otherIcon" v-else>{{index+1}}</view>
|
||||
<!-- <view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No1.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No2.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/No3.svg':''})`}">{{index+1}}</view>-->
|
||||
<!-- <text class="areaName">{{item.SPRegionType_Name||'-'}}</text>-->
|
||||
</view>
|
||||
<view class="rightTopRight">
|
||||
<view class="valueItem">{{item.VEHICLE_COUNT?item.VEHICLE_COUNT<100?`${item.VEHICLE_COUNT}(辆)`:selectTab===2?$util.getMoney(item.VEHICLE_COUNT / 10000):$util.getMoneyNoDecimal(item.VEHICLE_COUNT):''}}</view>
|
||||
<view class="valueItem">{{item.MONTHVEHICLE_COUNT?item.MONTHVEHICLE_COUNT<100?`${item.MONTHVEHICLE_COUNT}(辆)`:selectTab===2?$util.getMoney(item.MONTHVEHICLE_COUNT / 10000):$util.getMoneyNoDecimal(item.MONTHVEHICLE_COUNT):''}}</view>
|
||||
<view class="valueItem">
|
||||
<span :style="{color:item.VEHICLE_RATE>0?'red':item.VEHICLE_RATE<0?'#0E9976':''}">{{item.VEHICLE_RATE>0?'+':item.VEHICLE_RATE<0?'':''}}</span>
|
||||
<span :style="{color:item.VEHICLE_RATE>0?'red':item.VEHICLE_RATE<0?'#0E9976':''}">{{item.VEHICLE_RATE?item.VEHICLE_RATE+'%':'-'}}</span>
|
||||
</view>
|
||||
<!-- <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
|
||||
<!-- <span class="add">{{item.VEHICLE_RATE}}%</span>-->
|
||||
</view>
|
||||
</div>
|
||||
<div class="rightBottom">
|
||||
<span class="distance">{{item.SERVERPART_DISTANCE?item.SERVERPART_DISTANCE+'km':''}}</span>
|
||||
<span class="address">{{item.OWNERUNIT_NAME?item.OWNERUNIT_NAME+'km':''}}</span>
|
||||
<!-- <view class="rightBottomItem">-->
|
||||
<!-- <text class="itemLabel">当前车流 /辆</text>-->
|
||||
<!-- <text class="itemValue">{{ item.VEHICLE_COUNT || '-'}}</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="rightBottomItem">-->
|
||||
<!-- <text class="itemLabel">月均车流 /辆</text>-->
|
||||
<!-- <text class="itemValue">{{item.MONTHVEHICLE_COUNT || '-'}}</text>-->
|
||||
<!-- </view>-->
|
||||
<view class="goMap" @click="handleGoMap(item)">
|
||||
<image class="mapIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/navigation.svg"/>
|
||||
<text class="mapText">导航</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<!-- <div class="contentList" v-if="selectTab===1">-->
|
||||
<!-- <div class="contentItem" :style="{borderBottom:index + 1===tableList.length?'0px solid #EEEEEE':'1px solid #EEEEEE'}" v-for="(item,index) in tableList" :key="index">-->
|
||||
<!-- <div class="index">-->
|
||||
<!-- <div class="boxBg" v-if="index<=2"></div>-->
|
||||
<!-- <span class="indexText" :style="{fontWeight:index<=2?'bold':'normal',color:index<=2?'#160002':'#786B6C'}">{{index + 1}}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="serviceBox">-->
|
||||
<!-- <span class="name">{{item.name}}</span>-->
|
||||
<!-- <span class="position">{{item.SERVERPART_REGION}}区</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="numberBox">-->
|
||||
<!-- <span class="number">{{item.VEHICLE_COUNT}}</span>-->
|
||||
<!-- <span class="unit">/辆</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="addBox">-->
|
||||
<!-- <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
|
||||
<!-- <span class="add">{{item.VEHICLE_RATE}}%</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="contentList" v-if="selectTab===2">-->
|
||||
<!-- <div class="contentItem" v-for="(item,index) in tableList" :key="index">-->
|
||||
<!-- <div class="index">-->
|
||||
<!-- <div class="boxBg" v-if="index<=2"></div>-->
|
||||
<!-- <span class="indexText" :style="{fontWeight:index<=2?'bold':'normal'}">{{index + 1}}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="serviceBox">-->
|
||||
<!-- <span class="name">{{item.name}}</span>-->
|
||||
<!-- <span class="position">{{item.SERVERPART_REGION}}区</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="numberBox">-->
|
||||
<!-- <span class="number">{{item.VEHICLE_COUNT}}</span>-->
|
||||
<!-- <span class="unit">/辆</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="addBox">-->
|
||||
<!-- <image v-if="item.VEHICLE_RATE!==0" class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'/static/images/examine/add.svg':Number(item.VEHICLE_RATE)===100?'':'/static/images/examine/reduce.svg'"/>-->
|
||||
<!-- <span class="add">{{item.VEHICLE_RATE===0?'-':item.VEHICLE_RATE+'%'}}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</scroll-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <div class="main">-->
|
||||
<!-- <div style="width: 100%;height: 40px;display: flex;align-items: center">-->
|
||||
<!-- <div class="select">-->
|
||||
<!-- <div class="time">-->
|
||||
<!-- <view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– 时间选择器 –>-->
|
||||
<!-- <!– <picker mode="date" fields="day" :value="single" :end="endData" @change="bindDateChange" >–>-->
|
||||
<!-- <!– <view class="time">–>-->
|
||||
<!-- <!– <view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>–>-->
|
||||
<!-- <!– <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>–>-->
|
||||
<!-- <!– </view>–>-->
|
||||
<!-- <!– </picker>–>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="list">-->
|
||||
<!-- <div class="tabs">-->
|
||||
<!-- <div :class="selectTab===1?'selectTab':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>-->
|
||||
<!-- <!– 凌晨12点到1点之间查看 应该是23时到0时 这里做了个判断 –>-->
|
||||
<!-- <div :class="selectTab===2?'selectTab':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="width: 100%;border-bottom: 1px solid #ccc;margin-top: 10px;padding-bottom: 4px">-->
|
||||
<!-- <p class="notice" v-if="selectTab===1">注: 1个小时入区流量比4月同一时间流量增幅150%以上且每小时入区车辆超过100辆</p>-->
|
||||
<!-- <p class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</p>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div style="height: calc(100vh - 130px);overflow: scroll;}">-->
|
||||
<!-- <div v-if="selectTab===1" class="item" v-for="(item,index) in firstData" :key="index">-->
|
||||
<!-- <div class="box" >-->
|
||||
<!-- <text>{{index + 1}}、</text>-->
|
||||
<!-- <div class="name">{{item.name}}<div class="normal">{{item.SERVERPART_REGION}}区</div></div>-->
|
||||
<!-- <div class="enter">{{startTime}}时入区: {{item.VEHICLE_COUNT }}辆</div>-->
|
||||
<!-- <div class="add">-->
|
||||
<!-- <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
|
||||
<!-- <text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div v-if="selectTab===2" class="item" v-for="(item,index) in secondData" :key="index">-->
|
||||
<!-- <div class="box">-->
|
||||
<!-- <text>{{index + 1}}、</text>-->
|
||||
<!-- <div class="name">{{item.name}}<text class="normal">{{item.SERVERPART_REGION}}区</text></div>-->
|
||||
<!-- <div class="enter">今日入区: {{item.VEHICLE_COUNT }}辆</div>-->
|
||||
<!-- <div class="add">-->
|
||||
<!-- <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
|
||||
<!-- <text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -203,15 +133,39 @@ export default {
|
||||
menu:'',
|
||||
searchText:'',
|
||||
showMonth:'',// 上个月
|
||||
showDay:''// 顶部右侧显示的日期
|
||||
showDay:'',// 顶部右侧显示的日期
|
||||
seat:{},// 当前用户的经纬度位置
|
||||
serviceList:[],// 服务区列表
|
||||
sortType: 1,// 1正序 2倒序
|
||||
sortNumber: 1,// 1当月 2月均 3增幅
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
async onLoad(){
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
|
||||
|
||||
this.seat = uni.getStorageSync('seatInfo')
|
||||
let _this = this
|
||||
console.log('this.seat11',this.seat)
|
||||
if (this.seat){
|
||||
//获取用户的经纬度位置存在stroge里面
|
||||
wx.getFuzzyLocation({
|
||||
type:'gcj02',
|
||||
altitude:true,
|
||||
success: (res) =>{
|
||||
let seatInfo = {
|
||||
latitude:res.latitude,
|
||||
longitude:res.longitude
|
||||
}
|
||||
uni.setStorageSync('seatInfo', seatInfo);
|
||||
_this.seat = seatInfo
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// let storeTime = uni.getStorageSync('lastDay')
|
||||
// if (storeTime){
|
||||
// this.time = storeTime
|
||||
@ -246,7 +200,9 @@ export default {
|
||||
}
|
||||
// this.startTime = 19
|
||||
//传入的时间用在最上面的选择器上
|
||||
this.handleTab(1)
|
||||
await this.handleGetServiceList()
|
||||
|
||||
await this.handleTab(1)
|
||||
},
|
||||
methods:{
|
||||
// 查看服务区详情
|
||||
@ -260,7 +216,7 @@ export default {
|
||||
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
|
||||
console.log('total',total)
|
||||
uni.navigateTo({
|
||||
url:`/pages/commercialBI/map?longitude=${total.Result_Data.ServerpartInfo.SERVERPART_X}&latitude=${total.Result_Data.ServerpartInfo.SERVERPART_Y}&id=${item.SERVERPART_ID}`
|
||||
url:`/pages/commercialBI/map?longitude=${total.Result_Data.ServerpartInfo?total.Result_Data.ServerpartInfo.SERVERPART_X:''}&latitude=${total.Result_Data.ServerpartInfo?total.Result_Data.ServerpartInfo.SERVERPART_Y:''}&id=${item.SERVERPART_ID}`
|
||||
})
|
||||
uni.hideLoading()
|
||||
},
|
||||
@ -271,12 +227,15 @@ export default {
|
||||
this.showMonth = m
|
||||
const d = date.getDate()
|
||||
this.searchText = e.detail.value
|
||||
this.showDay = d
|
||||
this.showDay = d<10?'0'+d:d
|
||||
// 改变时间重新调数据的方法
|
||||
this.onRefresh()
|
||||
},
|
||||
handleTab(val){
|
||||
this.selectTab = val
|
||||
uni.showLoading({
|
||||
title:'正在加载'
|
||||
})
|
||||
if (val === 2 ){
|
||||
const req= {
|
||||
StatisticsDate:this.searchText,
|
||||
@ -288,7 +247,9 @@ export default {
|
||||
res.Result_Data.List.forEach(item=>{
|
||||
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
||||
})
|
||||
this.tableList = res.Result_Data.List
|
||||
this.tableList = this.handleList(res.Result_Data.List,this.serviceList)
|
||||
this.tableList = this.handleSortList(this.tableList)
|
||||
uni.hideLoading()
|
||||
console.log('this.tableList',this.tableList)
|
||||
})
|
||||
}else if(val === 1 ){
|
||||
@ -302,18 +263,110 @@ export default {
|
||||
res.Result_Data.List.forEach(item=>{
|
||||
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
||||
})
|
||||
this.tableList = res.Result_Data.List
|
||||
this.tableList = this.handleList(res.Result_Data.List,this.serviceList)
|
||||
this.tableList = this.handleSortList(this.tableList)
|
||||
uni.hideLoading()
|
||||
console.log('this.tableList',this.tableList)
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onRefresh(){
|
||||
this.handleTab(this.selectTab)
|
||||
},
|
||||
handleBack(){
|
||||
handleBack(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
// 拿到服务区列表的方法
|
||||
async handleGetServiceList(){
|
||||
const req = {
|
||||
Province_Code:'340000',
|
||||
longitude:this.seat.longitude,
|
||||
latitude:this.seat.latitude
|
||||
}
|
||||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
||||
this.serviceList = data.Result_Data.List
|
||||
},
|
||||
// 数据数组拼上服务区数据
|
||||
handleList(list,filterList){
|
||||
let res = []
|
||||
if (list && list.length>0){
|
||||
list.forEach((item=>{
|
||||
let filter = filterList.filter(filterItem=> filterItem.SERVERPART_ID===item.SERVERPART_ID)
|
||||
if (filter && filter.length>0){
|
||||
let filterRes = filter[0]
|
||||
item.SERVERPART_DISTANCE = filterRes.SERVERPART_DISTANCE
|
||||
item.OWNERUNIT_NAME = filterRes.OWNERUNIT_NAME
|
||||
}
|
||||
res.push(item)
|
||||
}))
|
||||
}
|
||||
return res
|
||||
},
|
||||
// 点击切换排序方法
|
||||
handleChangeSort(value){
|
||||
if (this.sortNumber===value){
|
||||
if (this.sortType===1){
|
||||
this.sortType = 2
|
||||
}else{
|
||||
this.sortType = 1
|
||||
}
|
||||
}else{
|
||||
this.sortNumber = value
|
||||
}
|
||||
this.tableList = this.handleSortList(this.tableList)
|
||||
},
|
||||
// 手动排序
|
||||
handleSortList(list){
|
||||
var len = list.length;
|
||||
for (var i = 0; i < len - 1; i++) {
|
||||
for (var j = 0; j < len - 1 - i; j++) {
|
||||
if (this.sortType === 1){
|
||||
if (this.sortNumber ===1){
|
||||
if (list[j].VEHICLE_COUNT < list[j + 1].VEHICLE_COUNT) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}else if(this.sortNumber===2){
|
||||
if (list[j].MONTHVEHICLE_COUNT < list[j + 1].MONTHVEHICLE_COUNT) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}else if(this.sortNumber===3){
|
||||
if (list[j].VEHICLE_RATE < list[j + 1].VEHICLE_RATE) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if (this.sortNumber ===1){
|
||||
if (list[j].VEHICLE_COUNT > list[j + 1].VEHICLE_COUNT) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}else if(this.sortNumber===2){
|
||||
if (list[j].MONTHVEHICLE_COUNT > list[j + 1].MONTHVEHICLE_COUNT) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}else if(this.sortNumber===3){
|
||||
if (list[j].VEHICLE_RATE > list[j + 1].VEHICLE_RATE) { // 比较相邻元素大小并交换位置
|
||||
var temp = list[j];
|
||||
list[j] = list[j + 1];
|
||||
list[j + 1] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return list
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -356,11 +409,15 @@ export default {
|
||||
align-items: center;
|
||||
.text{
|
||||
margin: 0 5px;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-family: AlimamaShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.icon{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -371,8 +428,10 @@ export default {
|
||||
top: 100px;
|
||||
width: calc(100% - 32px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.boxLeft{
|
||||
width: calc(100% - 200rpx);
|
||||
.headerTitle{
|
||||
font-size: 24px;
|
||||
font-family: AlimamaShuHeiTi;
|
||||
@ -388,19 +447,18 @@ export default {
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.boxRight{
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
position: relative;
|
||||
.day{
|
||||
font-size: 24px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-size: 48rpx;
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #21ADBA;
|
||||
line-height: 28px;
|
||||
color: #4983FD;
|
||||
line-height: 56rpx;
|
||||
position: absolute;
|
||||
top: 50%;left: 50%;
|
||||
transform: translate(-50%,-7px);
|
||||
@ -420,29 +478,100 @@ export default {
|
||||
width: 100%;
|
||||
height: calc(100vh - 212px);
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
//padding: 16px;
|
||||
transform: translateY(-32rpx);
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
.contentTab{
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
height: 108rpx;
|
||||
border-radius: 4px;
|
||||
background: #F3F1F5;
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTab.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
.tabItem{
|
||||
width: 50%;
|
||||
width: 44%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
line-height: 30rpx;
|
||||
padding: 32rpx 26rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selectTab{
|
||||
background: #fff;
|
||||
color: #21ADBA!important;
|
||||
width: 56%;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectLeftTab.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.selectTab2{
|
||||
width: 56%;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTabRight.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.contentList{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx;
|
||||
.sortBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
.sortItem{
|
||||
width: 110rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
.sortItemText{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.sortIcon{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.unitBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.unit{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noticeBox{
|
||||
@ -547,7 +676,7 @@ export default {
|
||||
}
|
||||
.listBigBox{
|
||||
width: 100%;
|
||||
height: calc(100ch - 300px);
|
||||
|
||||
margin-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 12px;
|
||||
@ -625,6 +754,25 @@ export default {
|
||||
.rightTopLeft{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.NoIcon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.otherIcon{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: linear-gradient(141deg, #BABCC3 0%, #CBCCD1 45%, #B5B6BA 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.indexBox{
|
||||
width: 36rpx;
|
||||
height: 32rpx;
|
||||
@ -649,6 +797,17 @@ export default {
|
||||
.rightTopRight{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.valueItem{
|
||||
width: 110rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #9A9A9A;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.addIcon{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
@ -665,6 +824,48 @@ export default {
|
||||
.rightBottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.distance{
|
||||
display: inline-block;
|
||||
width: 94rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.address{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 36rpx;
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.goMap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 16rpx;
|
||||
background: #4e92f6;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
.mapIcon{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.mapText{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.rightBottomItem{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -684,24 +885,8 @@ export default {
|
||||
line-height: 32rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.goMap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 16rpx;
|
||||
background: #4e92f6;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
.mapIcon{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.mapText{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,9 +202,9 @@ const cfu = {
|
||||
}
|
||||
let curData = opts.series.filter(subItem=> subItem.name === '24年')[0].real[index]
|
||||
let compareData = opts.series.filter(subItem=> subItem.name === '23年')[0].real[index]
|
||||
let add = (((curData/compareData)-1)*100).toFixed(2)
|
||||
let add = Number(((curData/compareData)-1)*100).toFixed(2)
|
||||
if (index<day){
|
||||
return `${item.name}：${getMoney(data / 10000,2)}万元，${add>0?'+':add<0?'':''}${add?add+'%':''}，${realDate?realDate:''}`
|
||||
return `${item.name}：${getMoney(data / 10000,2)}万元${add>0?'，+':add<0?'，':''}${add?add+'%':''}，${realDate?realDate:''}`
|
||||
}else{
|
||||
return ' '
|
||||
}
|
||||
@ -220,7 +220,19 @@ const cfu = {
|
||||
let day = opts.series.filter(subItem=> subItem.name === item.name)[0].howDayNumber
|
||||
console.log('data',data)
|
||||
console.log('day',day)
|
||||
return item.name + "：" + getMoney(data / 10000,2) + '万元'
|
||||
let curData = opts.series.filter(subItem=> subItem.name === '24年')[0].real[index]
|
||||
let compareData = opts.series.filter(subItem=> subItem.name === '23年')[0].real[index]
|
||||
let add = Number(((curData/compareData)-1)*100).toFixed(2)
|
||||
if (item.name==='24年'){
|
||||
if (data){
|
||||
return `${item.name}：${data?getMoney(data / 10000,2):''}万元${add>0?'，+':add<0?'，':''}${add?add+'%':''}`
|
||||
}else{
|
||||
return ' '
|
||||
}
|
||||
}else{
|
||||
return `${item.name}：${data?getMoney(data / 10000,2):''}万元`
|
||||
}
|
||||
|
||||
},
|
||||
entryCarNumberXFormat:function (value,index,opts){
|
||||
return value
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="main" >
|
||||
<scroll-view scroll-y="true" class="img" :style="{left:allScreen?'100%':'0'}">
|
||||
<div class="img" :style="{left:allScreen?'100%':'0'}">
|
||||
<div class="imgContent">
|
||||
<div class="imgTop">
|
||||
<span class="unit">单位：万元</span>
|
||||
<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>
|
||||
@ -16,69 +16,71 @@
|
||||
:animation="false"
|
||||
:canvas2d="true"
|
||||
:inScrollView="true"
|
||||
:pageScrollTop="ScrollTop"
|
||||
tooltipFormat="entryCarNumber"
|
||||
:ontouch="true"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div class="noticeBox">
|
||||
<div class="boxBg"></div>
|
||||
<div class="contentBox">
|
||||
<img class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png"/>
|
||||
<div class="contentText">
|
||||
根据历史大数据显示：<br/>
|
||||
<div style="text-indent: 2rem;font-size: 24rpx">
|
||||
服务区会在春运前至农历小年夜前（<span class="red">农历二十二</span>）到底回程小高峰，然后流量逐步回落至春运最低点（<span class="red">除夕夜</span>），大年初二开始随着出行自驾游的高峰来临，流量逐步放大，会在初六达到整个春运最高峰，随后流量逐步回落至次低点（<span class="red">元宵节</span>），在正月十六出现一波返程小高峰后，流量逐步回复正常。
|
||||
|
||||
<scroll-view scroll-y="true" class="scrollView">
|
||||
<div class="noticeBox">
|
||||
<div class="boxBg"></div>
|
||||
<div class="contentBox">
|
||||
<img class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/imgDesc.png"/>
|
||||
<div class="contentText">
|
||||
根据历史大数据显示：<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>
|
||||
|
||||
<div class="allPkBox">
|
||||
<div class="boxBg"></div>
|
||||
<div class="pkContent">
|
||||
<div class="contentTop">
|
||||
<img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />
|
||||
</div>
|
||||
<div class="pkBox">
|
||||
<div class="leftBox">
|
||||
<text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
|
||||
<text class="label">2024年/万元</text>
|
||||
<div class="allPkBox">
|
||||
<div class="boxBg"></div>
|
||||
<div class="pkContent">
|
||||
<div class="contentTop">
|
||||
<img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
|
||||
<text class="label">2023年/万元</text>
|
||||
<div class="pkBox">
|
||||
<div class="leftBox">
|
||||
<text class="value">{{giveTrendObj.curYearRevenue?$util.getMoney(giveTrendObj.curYearRevenue / 10000):'0.00'}}</text>
|
||||
<text class="label">2024年/万元</text>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<text class="value">{{giveTrendObj.lYearRevenue?$util.getMoney(giveTrendObj.lYearRevenue / 10000):'0.00'}}</text>
|
||||
<text class="label">2023年/万元</text>
|
||||
</div>
|
||||
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png"/>
|
||||
</div>
|
||||
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vs.png"/>
|
||||
</div>
|
||||
<div class="pkBox">
|
||||
<div class="leftBox revenueLeft">
|
||||
<text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
|
||||
<text class="label">2024年/万元</text>
|
||||
<div class="pkBox">
|
||||
<div class="leftBox revenueLeft">
|
||||
<text class="value">{{giveTrendObj.curYearAccount?$util.getMoney(giveTrendObj.curYearAccount / 10000):'0.00'}}</text>
|
||||
<text class="label">2024年/万元</text>
|
||||
</div>
|
||||
<div class="rightBox revenueRight">
|
||||
<text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
|
||||
<text class="label">2023年/万元</text>
|
||||
</div>
|
||||
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png"/>
|
||||
</div>
|
||||
<div class="rightBox revenueRight">
|
||||
<text class="value">{{giveTrendObj.lYearAccount?$util.getMoney(giveTrendObj.lYearAccount / 10000):'0.00'}}</text>
|
||||
<text class="label">2023年/万元</text>
|
||||
<div class="pkBox" style="margin-bottom: 20px">
|
||||
<div class="leftBox carLeft">
|
||||
<text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
|
||||
<text class="label">2024年/万辆</text>
|
||||
</div>
|
||||
<div class="rightBox carRight">
|
||||
<text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
|
||||
<text class="label">2023年/万辆</text>
|
||||
</div>
|
||||
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png"/>
|
||||
</div>
|
||||
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueVS.png"/>
|
||||
</div>
|
||||
<div class="pkBox" style="margin-bottom: 20px">
|
||||
<div class="leftBox carLeft">
|
||||
<text class="value">{{giveTrendObj.curYearBayonet?$util.getMoney(giveTrendObj.curYearBayonet / 10000):'0.00'}}</text>
|
||||
<text class="label">2024年/万辆</text>
|
||||
</div>
|
||||
<div class="rightBox carRight">
|
||||
<text class="value">{{giveTrendObj.lYearBayonet?$util.getMoney(giveTrendObj.lYearBayonet / 10000):'0.00'}}</text>
|
||||
<text class="label">2023年/万辆</text>
|
||||
</div>
|
||||
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carVS.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="allScreen" :style="{left:allScreen?'0':'100%'}" >
|
||||
<div class="bigBox">
|
||||
@ -462,7 +464,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
.unit{
|
||||
margin-left: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
@ -491,166 +493,168 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.noticeBox{
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
padding: 4rpx;
|
||||
.scrollView{
|
||||
height: calc(100% - 312px);
|
||||
margin-top: 24rpx;
|
||||
position: relative;
|
||||
.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%);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.allPkBox{
|
||||
width: 100%;
|
||||
height: 625rpx;
|
||||
margin-top: 32rpx;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
padding: 4rpx;
|
||||
position: relative;
|
||||
.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%);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.pkContent{
|
||||
.noticeBox{
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 22rpx;
|
||||
.contentTop{
|
||||
width: 100%;
|
||||
.titleImg{
|
||||
width: 144rpx;
|
||||
height: 74rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 4rpx;
|
||||
position: relative;
|
||||
.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%);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pkBox{
|
||||
}
|
||||
.allPkBox{
|
||||
width: 100%;
|
||||
height: 625rpx;
|
||||
margin-top: 32rpx;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
padding: 4rpx;
|
||||
position: relative;
|
||||
.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%);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.pkContent{
|
||||
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;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
padding: 22rpx;
|
||||
.contentTop{
|
||||
width: 100%;
|
||||
.titleImg{
|
||||
width: 144rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
}
|
||||
.leftBox,.rightBox{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
.pkBox{
|
||||
width: 100%;
|
||||
height: 140rpx;
|
||||
position: relative;
|
||||
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;
|
||||
margin-bottom: 32rpx;
|
||||
.pkLogo{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
.label{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #FFFFFF;
|
||||
font-weight: 400;
|
||||
line-height: 40rpx;
|
||||
.leftBox,.rightBox{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FF5A3C;
|
||||
line-height: 40rpx;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.revenueLeft{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
|
||||
}
|
||||
.revenueRight{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
|
||||
.value{
|
||||
color: #D48F00;
|
||||
.revenueLeft{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueLeft.png");
|
||||
}
|
||||
.label{
|
||||
color: #D48F00;
|
||||
.revenueRight{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueRight.png");
|
||||
.value{
|
||||
color: #D48F00;
|
||||
}
|
||||
.label{
|
||||
color: #D48F00;
|
||||
}
|
||||
}
|
||||
}
|
||||
.carLeft{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
|
||||
}
|
||||
.carRight{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
|
||||
.value{
|
||||
color: #3873DD;
|
||||
.carLeft{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carLeft.png");
|
||||
}
|
||||
.label{
|
||||
color: #3873DD;
|
||||
.carRight{
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carRight.png");
|
||||
.value{
|
||||
color: #3873DD;
|
||||
}
|
||||
.label{
|
||||
color: #3873DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user