974 lines
32 KiB
Vue
974 lines
32 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="top">
|
|
<image 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>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>
|
|
<div class="topBox">
|
|
<div class="boxLeft" style="width: 100%">
|
|
<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>
|
|
<image class="dayBox" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/dayBox.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>
|
|
<!-- <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>
|
|
<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>
|
|
</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>
|
|
<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>
|
|
</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>-->
|
|
|
|
</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>
|
|
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:''// 顶部右侧显示的日期
|
|
}
|
|
},
|
|
onLoad(){
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
// 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
|
|
//传入的时间用在最上面的选择器上
|
|
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)
|
|
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}`
|
|
})
|
|
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
|
|
// 改变时间重新调数据的方法
|
|
this.onRefresh()
|
|
},
|
|
handleTab(val){
|
|
this.selectTab = val
|
|
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 = res.Result_Data.List
|
|
console.log('this.tableList',this.tableList)
|
|
})
|
|
}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 = res.Result_Data.List
|
|
console.log('this.tableList',this.tableList)
|
|
})
|
|
}
|
|
},
|
|
onRefresh(){
|
|
this.handleTab(this.selectTab)
|
|
},
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
color: #fff;
|
|
}
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.topBox{
|
|
position: absolute;
|
|
left: 16px;
|
|
top: 100px;
|
|
width: calc(100% - 32px);
|
|
display: flex;
|
|
align-items: center;
|
|
.boxLeft{
|
|
.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;
|
|
width: 70%;
|
|
}
|
|
}
|
|
.boxRight{
|
|
width: 70px;
|
|
height: 50px;
|
|
position: relative;
|
|
.day{
|
|
font-size: 24px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #21ADBA;
|
|
line-height: 28px;
|
|
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;
|
|
.contentTab{
|
|
width: 100%;
|
|
height: 38px;
|
|
border-radius: 4px;
|
|
background: #F3F1F5;
|
|
box-sizing: border-box;
|
|
padding: 4px;
|
|
display: flex;
|
|
.tabItem{
|
|
width: 50%;
|
|
height: 100%;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 30px;
|
|
border-radius: 4px;
|
|
}
|
|
.selectTab{
|
|
background: #fff;
|
|
color: #21ADBA!important;
|
|
}
|
|
}
|
|
.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%;
|
|
height: calc(100ch - 300px);
|
|
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;
|
|
.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;
|
|
.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;
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
//.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>
|