1257 lines
38 KiB
Vue
1257 lines
38 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="top">
|
|
<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"/>-->
|
|
<picker mode="date" :value="searchText" :end="lastDay" @change="bindDateChange">
|
|
<view class="time">
|
|
<view class="text">{{ searchText }}</view>
|
|
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/timeDown.png" />
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>on
|
|
<div class="topBox">
|
|
<div class="boxLeft">
|
|
<div class="headerTitle">实时车流预警</div>
|
|
<!-- 注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
|
|
<span class="notice" v-if="selectTab === 1">{{ `注: 1个小时入区流量比上月同一时间流量增幅150%以上且每小时入区车辆超过100辆`
|
|
}}</span>
|
|
<span class="notice" v-if="selectTab === 2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</span>
|
|
</div>
|
|
<div class="boxRight">
|
|
<span class="day">{{ showDay }}</span>
|
|
<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)">
|
|
<span>{{ `${startTime === 0 ? 23 : startTime - 1}时入区车流预警` }}</span>
|
|
</div>
|
|
<div :class="selectTab === 2 ? 'selectTab2 tabItem' : 'tabItem'" @click="handleTab(2)">
|
|
<span>
|
|
{{ endTime === 24 ? `${endTime - 1}-0时入区车流排行` : `0-${startTime === 0 ? 23 : startTime - 1}时入区车流排行` }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="noticeBox">-->
|
|
|
|
<!-- </div>-->
|
|
<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="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 === 1">
|
|
<span class="unit">单位：辆</span>
|
|
</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="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>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import moment from "moment/moment";
|
|
export default {
|
|
name: "specialCase",
|
|
data() {
|
|
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
|
return {
|
|
single: '',//显示时间
|
|
endData: '', // 结束时间
|
|
startTime: '',// 开始数据的时间
|
|
endTime: '',// 结束数据的时间
|
|
selectTab: 1,// 选中的tab
|
|
tableList: [],// 表格数据
|
|
time: '',// 给接口的time
|
|
statusBarHeight: '',
|
|
menu: '',
|
|
searchText: '',
|
|
showMonth: '',// 上个月
|
|
showDay: '',// 顶部右侧显示的日期
|
|
seat: {},// 当前用户的经纬度位置
|
|
serviceList: [],// 服务区列表
|
|
sortType: 1,// 1正序 2倒序
|
|
sortNumber: 1,// 1当月 2月均 3增幅
|
|
}
|
|
},
|
|
async onLoad() {
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
|
|
this.seat = uni.getStorageSync('seatInfo')
|
|
let _this = this
|
|
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
|
|
// }
|
|
const currentDate = new Date()
|
|
// 拿到当前小时的前一小时
|
|
let y = currentDate.getFullYear()
|
|
let nowM = currentDate.getMonth() + 1
|
|
if (nowM < 10) {
|
|
nowM = '0' + nowM
|
|
}
|
|
let nowD = currentDate.getDate()
|
|
if (nowD < 10) {
|
|
nowD = '0' + nowD
|
|
}
|
|
this.time = `${y}-${nowM}-${nowD}`
|
|
this.searchText = this.time
|
|
// this.searchText = '2023-06-21'
|
|
const date = new Date(this.time)
|
|
let m = date.getMonth()
|
|
this.showMonth = m === 0 ? 12 : m
|
|
let d = date.getDate()
|
|
if (d < 10) {
|
|
d = '0' + d
|
|
}
|
|
this.showDay = d
|
|
const nowDate = new Date()
|
|
let h = nowDate.getHours()
|
|
// let h = 0
|
|
this.startTime = h
|
|
if (this.startTime === 0) {
|
|
let showDay = new Date(moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD')).getDate()
|
|
if (showDay < 10) {
|
|
showDay = '0' + showDay
|
|
}
|
|
this.showDay = showDay
|
|
}
|
|
// this.startTime = 19
|
|
//传入的时间用在最上面的选择器上
|
|
await this.handleGetServiceList()
|
|
|
|
await this.handleTab(1)
|
|
},
|
|
methods: {
|
|
// 查看服务区详情
|
|
async handleGoMap(item) {
|
|
uni.showLoading({
|
|
title: '查询服务区数据'
|
|
})
|
|
let req = {
|
|
ServerpartId: item.SERVERPART_ID
|
|
}
|
|
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', req)
|
|
uni.navigateTo({
|
|
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}&time=${this.searchText}`
|
|
})
|
|
uni.hideLoading()
|
|
},
|
|
// 时间器改变的方法
|
|
bindDateChange(e) {
|
|
const date = new Date(e.detail.value)
|
|
let m = date.getMonth()
|
|
this.showMonth = m === 0 ? 12 : m
|
|
const d = date.getDate()
|
|
this.searchText = e.detail.value
|
|
this.showDay = d < 10 ? '0' + d : d
|
|
// 改变时间重新调数据的方法
|
|
this.onRefresh()
|
|
},
|
|
handleTab(val) {
|
|
this.selectTab = val
|
|
uni.showLoading({
|
|
title: '正在加载'
|
|
})
|
|
if (val === 2) {
|
|
const req = {
|
|
StatisticsDate: this.startTime === 0 ? moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD') : this.searchText,
|
|
StatisticsHour: this.startTime === 0 ? 23 : this.startTime - 1,
|
|
StatisticsType: 2,
|
|
ShowCount: 20
|
|
}
|
|
request.$webGet('CommercialApi/BigData/GetBayonetWarning', req).then(res => {
|
|
res.Result_Data.List.forEach(item => {
|
|
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
|
})
|
|
this.tableList = this.handleList(res.Result_Data.List, this.serviceList)
|
|
this.tableList = this.handleSortList(this.tableList)
|
|
uni.hideLoading()
|
|
})
|
|
} else if (val === 1) {
|
|
const req = {
|
|
StatisticsDate: this.startTime === 0 ? moment(this.searchText).subtract(1, 'day').format('YYYY-MM-DD') : this.searchText,
|
|
StatisticsHour: this.startTime === 0 ? 23 : this.startTime - 1,
|
|
StatisticsType: 1,
|
|
ShowCount: 20
|
|
}
|
|
request.$webGet('CommercialApi/BigData/GetBayonetWarning', req).then(res => {
|
|
res.Result_Data.List.forEach(item => {
|
|
item.name = item.SERVERPART_NAME.split('服务区')[0]
|
|
})
|
|
this.tableList = this.handleList(res.Result_Data.List, this.serviceList)
|
|
this.tableList = this.handleSortList(this.tableList)
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
|
|
},
|
|
onRefresh() {
|
|
this.handleTab(this.selectTab)
|
|
},
|
|
handleBack() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
// 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
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100%;
|
|
background: #fff;
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 212px;
|
|
position: relative;
|
|
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.header {
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.backArrow {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.timeSelect {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.selectIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.text {
|
|
margin: 0 5px;
|
|
font-size: 32rpx;
|
|
font-family: AlimamaShuHeiTi;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
position: absolute;
|
|
left: 16px;
|
|
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;
|
|
color: #FEFFFE;
|
|
font-weight: bold;
|
|
line-height: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.notice {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 16px;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.boxRight {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
position: relative;
|
|
|
|
.day {
|
|
font-size: 48rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #4983FD;
|
|
line-height: 56rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -7px);
|
|
z-index: 3;
|
|
}
|
|
|
|
.dayBox {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100vh - 212px);
|
|
box-sizing: border-box;
|
|
//padding: 16px;
|
|
transform: translateY(-32rpx);
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
|
|
.contentTab {
|
|
width: 100%;
|
|
height: 108rpx;
|
|
border-radius: 4px;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectTab.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
|
|
.tabItem {
|
|
width: 44%;
|
|
height: 100%;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 30rpx;
|
|
padding: 32rpx 26rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.selectTab {
|
|
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 {
|
|
width: 100%;
|
|
border-bottom: 1px solid #ccc;
|
|
margin-top: 4px;
|
|
|
|
.notice {
|
|
font-size: 12px;
|
|
color: gray;
|
|
}
|
|
}
|
|
|
|
.contentList {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
margin-top: 16px;
|
|
padding-bottom: 16px;
|
|
overflow: hidden;
|
|
|
|
.contentItem {
|
|
background: #fff;
|
|
padding: 19px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.index {
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
|
|
.boxBg {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #10BFCE;
|
|
filter: blur(4px);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.indexText {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
font-size: 16px;
|
|
font-family: DingTalk-JinBuTi, DingTalk;
|
|
font-weight: normal;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.serviceBox {
|
|
width: 35%;
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
|
|
.name {
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 26px;
|
|
}
|
|
|
|
.position {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.numberBox {
|
|
width: 30%;
|
|
|
|
.number {
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.addBox {
|
|
width: calc(30% - 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.addIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.add {
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.listBigBox {
|
|
width: 100%;
|
|
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 12px;
|
|
|
|
.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: 28rpx;
|
|
left: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.serviceName {
|
|
font-size: 30rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #7F020B;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.serviceLabel {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #7F020B;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.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;
|
|
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;
|
|
|
|
.valueItem {
|
|
width: 110rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #9A9A9A;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
.addIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.add {
|
|
font-size: 20px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightBottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.distance {
|
|
display: inline-block;
|
|
width: 120rpx;
|
|
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 8rpx;
|
|
background: #4e92f6;
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx;
|
|
|
|
.mapIcon {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.mapText {
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//.listItem{
|
|
// margin-bottom: 12px;
|
|
// border: 1px solid #D9DBE0;
|
|
// border-radius: 8px;
|
|
// position: relative;
|
|
// .bg{
|
|
// position: absolute;
|
|
// right: 0;top: 0;
|
|
// width: 97px;
|
|
// height: 97px;
|
|
// }
|
|
// .listBox{
|
|
// width: 100%;
|
|
// box-sizing: border-box;
|
|
// padding: 12px 16px;
|
|
// background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
|
|
// border-bottom: 1px solid #D9DBE0;
|
|
// border-radius: 8px;
|
|
// .itemTop{
|
|
// width: 100%;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
// .itemLeft{
|
|
// display: inline-block;
|
|
// padding: 4px 12px;
|
|
// background: rgba(26, 95, 255, 0.1);
|
|
// border-radius: 14px;
|
|
// .itemFixed{
|
|
// width: 12px;
|
|
// height: 14px;
|
|
// margin-right: 4px;
|
|
// }
|
|
// .serverName{
|
|
// font-size: 16px;
|
|
// font-family: DINAlternate-Bold, DINAlternate;
|
|
// font-weight: bold;
|
|
// white-space: nowrap;
|
|
// color: #1A5FFF;
|
|
// line-height: 22px
|
|
// }
|
|
// }
|
|
// .itemRight{
|
|
// display: flex;
|
|
// align-items: center;
|
|
// .entryRate{
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// .entryValue{
|
|
// font-size: 16px;
|
|
// font-family: DINAlternate-Bold, DINAlternate;
|
|
// font-weight: bold;
|
|
// color: red;
|
|
// line-height: 24px;
|
|
// white-space: nowrap;
|
|
// }
|
|
// .entryLabel{
|
|
// font-size: 14px;
|
|
// font-family: PingFangSC-Regular, PingFang SC;
|
|
// font-weight: 400;
|
|
// color: #786B6C;
|
|
// line-height: 20px;
|
|
// }
|
|
// }
|
|
// .img{
|
|
// width: 26px;
|
|
// height: 14px;
|
|
// }
|
|
//
|
|
// }
|
|
// }
|
|
// .itemDetail{
|
|
// margin-top: 16px;
|
|
// width: 100%;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
// .message{
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// .cirRate{
|
|
// width: 40px;
|
|
// height: 40px;
|
|
// }
|
|
// .label{
|
|
// font-size: 14px;
|
|
// font-family: PingFangSC-Regular, PingFang SC;
|
|
// font-weight: 400;
|
|
// color: #786B6C;
|
|
// line-height: 20px
|
|
// }
|
|
// .value{
|
|
// font-size: 20px;
|
|
// font-family: DINAlternate-Bold, DINAlternate;
|
|
// font-weight: bold;
|
|
// color: #160002;
|
|
// line-height: 24px;
|
|
// white-space: nowrap;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// .childList{
|
|
// border-radius: 8px 8px 0 0;
|
|
// box-sizing: border-box;
|
|
// margin-left: 16px;
|
|
// width: calc(100% - 32px);
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: space-between;
|
|
// padding: 8px;
|
|
// .childItem{
|
|
// width: calc(100% / 3);
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// .childLabel{
|
|
// font-size: 14px;
|
|
// font-family: PingFangSC-Regular, PingFang SC;
|
|
// font-weight: 400;
|
|
// color: #786B6C;
|
|
// line-height: 20px
|
|
// }
|
|
// .childValue{
|
|
// font-size: 18px;
|
|
// font-family: DINAlternate-Bold, DINAlternate;
|
|
// font-weight: bold;
|
|
// color: #160002;
|
|
// line-height: 24px;
|
|
// }
|
|
// }
|
|
// }
|
|
//}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//.main{
|
|
// width: 100%;
|
|
// box-sizing: border-box;
|
|
// padding: 0 16px;
|
|
// .select{
|
|
// margin-left: 8px;
|
|
// display: inline-block;
|
|
// .time {
|
|
// display: flex;
|
|
// align-items: center;
|
|
// margin-right: 4px;
|
|
// .day {
|
|
// font-size: 32rpx;
|
|
// font-family: PingFangSC-Regular, PingFang SC;
|
|
// font-weight: 400;
|
|
// color: #782717;
|
|
// line-height: 44rpx;
|
|
// margin-right: 4px;
|
|
// }
|
|
// .uni-input {
|
|
// font-size: 14px;
|
|
// font-family: PingFangSC-Regular, PingFang SC;
|
|
// font-weight: 400;
|
|
// color: #ae664e;
|
|
// line-height: 36rpx;
|
|
// }
|
|
// .icon {
|
|
// width: 24px;
|
|
// height: 16px;
|
|
// }
|
|
// }
|
|
// }
|
|
// .list{
|
|
// .tabs{
|
|
// width: 100%;
|
|
// display: flex;
|
|
// .tabItem{
|
|
// width: 50%;
|
|
// height: 40px;
|
|
// font-size: 12px;
|
|
// line-height: 40px;
|
|
// text-align: center;
|
|
// background: #f0f0f0;
|
|
// border-radius: 10px 10px 0 0;
|
|
// }
|
|
// .selectTab{
|
|
// width: 50%;
|
|
// height: 40px;
|
|
// font-size: 12px;
|
|
// line-height: 40px;
|
|
// text-align: center;
|
|
// background: #fff;
|
|
// border-radius: 10px 10px 0 0;
|
|
// }
|
|
// }
|
|
// .item{
|
|
// width: 100%;
|
|
// display: flex;
|
|
// margin-bottom: 5px;
|
|
// margin-top: 10px;
|
|
// .box{
|
|
// width: 100%;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// .name{
|
|
// width: 40%;
|
|
// font-size: 16px;
|
|
// font-weight: 600;
|
|
// text-align: left;
|
|
// white-space: nowrap;
|
|
// display: flex;
|
|
// align-items: baseline;
|
|
// .normal{
|
|
// font-size: 12px;
|
|
// font-weight: 400;
|
|
// .unit{
|
|
// color:#ccc;
|
|
// }
|
|
// }
|
|
// }
|
|
// .enter{
|
|
// font-size: 12px;
|
|
// width: 30%;
|
|
// text-align: left;
|
|
// white-space: nowrap;
|
|
// }
|
|
// .add{
|
|
// font-size: 12px;
|
|
// width: 30%;
|
|
// text-align: center;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// .orangeRed{
|
|
// color:orangered;
|
|
// }
|
|
// .addIcon{
|
|
// width: 20px;
|
|
// height: 20px;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// ::-webkit-scrollbar {
|
|
// width: 4px;
|
|
// height: 4px;
|
|
// color:transparent;
|
|
// }
|
|
//
|
|
// /*定义滚动条轨道 内阴影+圆角*/
|
|
// ::-webkit-scrollbar-track {
|
|
// border-radius: 10px;
|
|
// background-color:transparent;
|
|
// }
|
|
//
|
|
// /*定义滑块 内阴影+圆角*/
|
|
// ::-webkit-scrollbar-thumb {
|
|
// border-radius: 10px;
|
|
// background-color:transparent;
|
|
// }
|
|
// .notice{
|
|
// font-size: 12px;
|
|
// color: gray;
|
|
// }
|
|
// }
|
|
//}</style>
|