1155 lines
37 KiB
Vue
1155 lines
37 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>
|
||
<div class="topBox">
|
||
<div class="boxLeft">
|
||
<div class="headerTitle">实时分析</div>
|
||
<!-- 注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆-->
|
||
<span class="notice" v-if="selectTab===1">{{ `注: 1个小时入区流量比${showMonth}月同一时间流量增幅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}时入区车流预警`}}</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>-->
|
||
<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===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'
|
||
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
|
||
let d = date.getDate()
|
||
if (d<10){
|
||
d = '0'+d
|
||
}
|
||
this.showDay = d
|
||
const nowDate = new Date()
|
||
let h = nowDate.getHours()
|
||
this.startTime = h-1
|
||
if (this.startTime===0){
|
||
this.searchText = `${y}-${nowM}-${nowD-1}`
|
||
}
|
||
// 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}`
|
||
})
|
||
uni.hideLoading()
|
||
},
|
||
// 时间器改变的方法
|
||
bindDateChange(e){
|
||
const date = new Date(e.detail.value)
|
||
let m = date.getMonth()
|
||
this.showMonth = 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.searchText,
|
||
StatisticsHour:this.startTime,
|
||
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.searchText,
|
||
StatisticsHour:this.startTime,
|
||
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.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: 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;
|
||
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>
|