You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1032 lines
24 KiB
1032 lines
24 KiB
<template>
|
|
<view id="warpMap">
|
|
<top-nav-bar :config="topNavBar" :isTaskInfo="isTaskInfo" @goBack="goBack"></top-nav-bar>
|
|
<map
|
|
id="map"
|
|
ref="map"
|
|
style="width: 100vw;height: 100vh;"
|
|
subkey="WANBZ-6C56D-6P34Y-HWNMG-YHAH7-BJFP5"
|
|
layer-style="1"
|
|
:latitude="defauleMap.latitude"
|
|
:longitude="defauleMap.longitude"
|
|
:scale="scale"
|
|
:max-scale="maxScale"
|
|
:markers="markers"
|
|
:circles="circles"
|
|
:enable-satellite="enableSatellite"
|
|
:enable-traffic="enableTraffic"
|
|
:enable-poi="enable_poi"
|
|
:enable-building="enable_building"
|
|
show-location
|
|
@callouttap="onSelectCar"
|
|
@tap="onMap"
|
|
>
|
|
<view slot="callout">
|
|
<block v-for="(item,index) in markers" :key="index">
|
|
<block v-if="!isTaskInfo">
|
|
<cover-view class="customCallout" :marker-id="item.id">
|
|
<cover-image
|
|
class="qipao_img"
|
|
:src="`../../static/images/index/${item.id == selectCarId?'customCallout_select.png':'customCallout.png'}`"
|
|
></cover-image>
|
|
<cover-view class="qipao_title">{{item.vehicleCode}}</cover-view>
|
|
</cover-view>
|
|
</block>
|
|
<block v-if="isTaskInfo">
|
|
<cover-view class="customCallout2" :marker-id="item.id">
|
|
<cover-image
|
|
class="qipao_img2"
|
|
:src="`../../static/images/index/${item.id == selectCarId?'customCallout_select.png':'customCallout.png'}`"
|
|
></cover-image>
|
|
<cover-view class="qipao_title2">
|
|
<cover-view class="carCode2">{{item.vehicleCode}}</cover-view>
|
|
<cover-view class="carLength2">距目的地:{{distance?distance:0}}</cover-view>
|
|
<cover-view class="carLength2">需{{expectArriveDate?expectArriveDate:0}}</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
</map>
|
|
<!-- 右侧tab -->
|
|
<view class="rig_broadside">
|
|
<view class="nav_right mar_bot">
|
|
<image
|
|
class="toggle_view"
|
|
@tap="onChangeScale(1)"
|
|
src="../../static/images/index/big.png"
|
|
></image>
|
|
<image
|
|
class="toggle_view"
|
|
@tap="onChangeScale(-1)"
|
|
src="../../static/images/index/small.png"
|
|
></image>
|
|
</view>
|
|
<view v-if="!isTaskInfo" class="nav_right mar_bot">
|
|
<image
|
|
class="toggle_view"
|
|
@tap="prevCar"
|
|
src="../../static/images/index/prev.png"
|
|
></image>
|
|
<image
|
|
class="toggle_view"
|
|
@tap="nextCar"
|
|
src="../../static/images/index/next.png"
|
|
></image>
|
|
</view>
|
|
<view v-if="!isTaskInfo" class="nav_right">
|
|
<image
|
|
class="toggle_view"
|
|
@tap="changeList"
|
|
:src="`../../static/images/index/${showTopCarList?'carList_y.png':'carList.png'}`"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<!-- 左侧tab -->
|
|
<view class="lef_broadside">
|
|
<image
|
|
class="nav_lef"
|
|
@tap="openTraffic"
|
|
:src="`../../static/images/index/${enableTraffic?'condition_t.png':'condition_f.png'}`"
|
|
></image>
|
|
<image
|
|
v-if="!isTaskInfo"
|
|
class="nav_lef"
|
|
@tap="openSatellite"
|
|
:src="`../../static/images/index/${enableSatellite?'wx_1.png':'wx.png'}`"
|
|
></image>
|
|
<image
|
|
v-if="!isTaskInfo"
|
|
class="nav_lef"
|
|
@tap="goCurrent"
|
|
src="../../static/images/index/current.png"
|
|
></image>
|
|
<image
|
|
v-if="!isTaskInfo"
|
|
class="nav_lef"
|
|
@tap="changeCurrent"
|
|
src="../../static/images/index/changeCarYard.png"
|
|
></image>
|
|
</view>
|
|
<!-- 底部tab -->
|
|
<view v-if="!isTaskInfo" class="bot_tabbar">
|
|
<image
|
|
class="my"
|
|
src="../../static/images/index/car_List.png"
|
|
@tap="goUrlList('/pages/carList/carList')"
|
|
></image>
|
|
<image
|
|
class="carList"
|
|
src="../../static/images/index/car_bg2.png"
|
|
@tap="goUrlList('/pages/dispatch/dispatch')"
|
|
></image>
|
|
<image
|
|
class="warn"
|
|
src="../../static/images/index/renwuList.png"
|
|
@tap="goUrlList('/pages/taskList/taskList')"
|
|
></image>
|
|
</view>
|
|
<!-- 车辆详情card-->
|
|
<view v-show="showCarInfo">
|
|
<view class="bot_module">
|
|
<view class="b_m_header">
|
|
<view class="b_m_h_lef">
|
|
<view class="b_m_h_l_top">
|
|
<image src="../../static/images/index/car_info_icon.png"></image>
|
|
<view class="mar_lef font_w">
|
|
{{selectCarInfo.vehicleCode}} {{selectCarInfo.contactPerson}}
|
|
</view>
|
|
<uni-tag
|
|
class="gps_type"
|
|
type="primary"
|
|
:text="selectCarInfo.gpsSignalSource"
|
|
size="mini"
|
|
inverted="true"
|
|
></uni-tag>
|
|
</view>
|
|
<view class="b_m_h_l_top mar_top">
|
|
<view
|
|
class="status"
|
|
:style="{background:selectCarInfo.bgColor}"
|
|
>{{ selectCarInfo.gpsStateTxt }}</view>
|
|
<view class="mar_lef">{{selectCarInfo.gpsStateText}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="b_m_h_rig">
|
|
<image
|
|
@tap="callPhone(selectCarInfo.contactPhone,selectCarInfo.id)"
|
|
src="../../static/images/index/call_phone.png"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view class="b_m_cen">
|
|
<view class="row">
|
|
<view class="title">定位时间</view>
|
|
<view>:</view>
|
|
<view class="mar_lef">{{ selectCarInfo.gpsTime }}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="title">发动机</view>
|
|
<view>:</view>
|
|
<view class="mar_lef">{{selectCarInfo.acc ? '点火' : '熄火'}}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="title">位置</view>
|
|
<view>:</view>
|
|
<view class="mar_lef address"> {{selectCarInfo.address || ''}}</view>
|
|
<view class="seleAddress" @tap="openLoation">导航</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="b_m_footer">
|
|
<navigator
|
|
class="b_m_f_nav"
|
|
:url="'/pages/palyBack/palyBack?id='+selectCarId"
|
|
hover-class="none"
|
|
><text>轨迹</text></navigator>
|
|
<navigator
|
|
v-if="!isTaskInfo"
|
|
class="b_m_f_nav bor_lef_rig"
|
|
:url="'/pages/carInfo/carInfo?id='+selectCarId"
|
|
hover-class="none"
|
|
><text>信息</text></navigator>
|
|
<navigator
|
|
v-if="!isTaskInfo"
|
|
class="b_m_f_nav"
|
|
:url="'/pages/carSetting/carSetting?id='+selectCarId"
|
|
hover-class="none"
|
|
><text>设置</text></navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 顶部快捷列表 -->
|
|
<view
|
|
class="topCarList"
|
|
:style="'position:fixed;top:'+topBarHeight+'px'"
|
|
:class="showTopCarList?'yesLarge':'notLarge'"
|
|
>
|
|
<scroll-view :class="isIos?'uni-swiper-tab_ios':'uni-swiper-tab'" scroll-y>
|
|
<view v-if="carList.length > 0" class="scrollx_items">
|
|
<block v-for="(item,index) in carList" :key="index">
|
|
<view class="scrollx_items_list">
|
|
<view
|
|
class="items"
|
|
:class="item.id == selectCarId?'onItems_bor':'items_bor'"
|
|
@tap="onSelectCarInfo(item.id)"
|
|
>
|
|
<text>{{(item.vehicleCode).substring(0,3)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</block>
|
|
</view>
|
|
<view v-else class="noCarList">暂无车辆</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const {urlList,https} = require('@/static/api');
|
|
import {TopNavBar} from '@/components/top-nav-bar/top-nav-bar.vue'
|
|
const menuIconMy = require('../../static/images/index/meIcon.png');
|
|
export default {
|
|
components:{
|
|
TopNavBar
|
|
},
|
|
data() {
|
|
return {
|
|
topNavBar:{
|
|
title:"云车派工", //title
|
|
bgcolor:"#3476FE", //背景颜色
|
|
},
|
|
timer:null,
|
|
defauleMap:{
|
|
latitude:'23.125178',
|
|
longitude:'113.280637',
|
|
},
|
|
scale:17, //地图当前缩放级别
|
|
maxScale:20, //最大缩放
|
|
markers:[],
|
|
circles:[], //车场
|
|
enable_poi:false, //是否展示POI点
|
|
enable_building:false, //是否展示建筑物
|
|
enableSatellite:false, //是否开启卫星地图
|
|
enableTraffic:false, //是否开启实时路况
|
|
selectCarId:'', //当前选择的车辆ID
|
|
selectCarInfo:{}, //当前选择的车辆详情
|
|
showCarInfo:false, //底部车辆详情显示状态
|
|
carList:[], //所有的车辆数据
|
|
overspeedCount:0, //报警数量
|
|
circlesIdx:0, //当前显示的车场下标
|
|
nowSelectCarIndex:0, //当前显示的车辆下标
|
|
fd:false, //节流状态
|
|
showTopCarList:false, //顶部快捷列表显示状态
|
|
isTaskInfo:false, //是否是任务详情过来的
|
|
distance:'', //距目的地距离
|
|
expectArriveDate:'', //预计到目的地所需时间
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
let that = this;
|
|
console.log('首页options',options)
|
|
if(options.defauleMap){
|
|
that.defauleMap = JSON.parse(options.defauleMap);
|
|
}else{
|
|
uni.getStorage({
|
|
key:"userCompany",
|
|
success(res) {
|
|
that.defauleMap = {
|
|
latitude:res.data.yardList[0].latitude,
|
|
longitude:res.data.yardList[0].longitude
|
|
};
|
|
}
|
|
});
|
|
};
|
|
if(options.type == 1010){
|
|
console.log('任务详情过来的')
|
|
that.isTaskInfo = true;
|
|
that.topNavBar.title = '查看定位';
|
|
that.selectCarId = options.id;
|
|
let {distance,expectArriveDate} = JSON.parse(options.qiPao);
|
|
that.distance = distance;
|
|
that.expectArriveDate = expectArriveDate;
|
|
}else{
|
|
that.isTaskInfo = false;
|
|
};
|
|
that.getUserInfo();
|
|
setTimeout(()=>{
|
|
that.enable_building = true; //是否展示建筑物
|
|
},2000)
|
|
setTimeout(()=>{
|
|
that.enable_poi = true; //是否展示POI点
|
|
},3000)
|
|
},
|
|
onShow() {
|
|
this.getCarYard();
|
|
this.getCarList();
|
|
this.timer = setInterval(() => {
|
|
this.getCarList()
|
|
}, 10*1000);
|
|
},
|
|
computed:{
|
|
isIos(){
|
|
let isIosType = false;
|
|
uni.getSystemInfo({
|
|
success: function (res) {
|
|
isIosType = res.platform === 'ios';
|
|
}
|
|
});
|
|
return isIosType;
|
|
},
|
|
topBarHeight(){
|
|
let marTop = 0;
|
|
uni.getSystemInfo({
|
|
success: function (res) {
|
|
const {platform,statusBarHeight} = res;
|
|
let height = statusBarHeight +4; //ios 24px
|
|
if (platform.toLowerCase() == "android" ){
|
|
height +=4 //android 28px
|
|
};
|
|
// 胶囊高度 32px 下边框6px height 状态栏高度
|
|
marTop = height+38;
|
|
}
|
|
});
|
|
return marTop;
|
|
},
|
|
},
|
|
methods:{
|
|
// 回到默认车场
|
|
goCurrent(){
|
|
const allLen = this.circles.length;
|
|
this.moveToLocation(this.circles[0]);
|
|
this.circlesIdx = 0;
|
|
this.onMap();
|
|
},
|
|
// 切换车场
|
|
changeCurrent(){
|
|
const allLen = this.circles.length;
|
|
let len = allLen-1;
|
|
let idx = this.circlesIdx;
|
|
if(idx == len){
|
|
this.circlesIdx = 0;
|
|
}else{
|
|
this.circlesIdx +=1;
|
|
};
|
|
this.onMap();
|
|
this.moveToLocation(this.circles[this.circlesIdx]);
|
|
},
|
|
// 点击车辆气泡
|
|
onSelectCar(e){
|
|
let id = e.detail.markerId;
|
|
this.setSelectCar(id);
|
|
this.selectCarId = id;
|
|
if(this.scale == 18){
|
|
this.scale = 17.99;
|
|
}else{
|
|
this.scale = 18;
|
|
};
|
|
},
|
|
// 放大缩小地图
|
|
onChangeScale(type){
|
|
const wxMap = this.enableSatellite;
|
|
const oldScale = this.scale;
|
|
if(type == 1){
|
|
if(wxMap){// 开启了卫星地图
|
|
this.scale = oldScale < 17 ? oldScale + 2 : 17;
|
|
}else{
|
|
this.scale = oldScale < 20 ? oldScale + 2 : 20;
|
|
}
|
|
}else{
|
|
this.scale = oldScale > 3 ? oldScale - 2 : 3;
|
|
}
|
|
},
|
|
// 点击地图(清除选择的车辆ID和隐藏车辆详情)
|
|
onMap(){
|
|
console.log('点击地图')
|
|
this.showCarInfo = false;
|
|
this.selectCarId = '';
|
|
if(this.scale == 17){
|
|
this.scale = 16.99;
|
|
}else{
|
|
this.scale = 17;
|
|
};
|
|
},
|
|
// 获取所有车辆列表数据
|
|
getCarList(){
|
|
https(urlList.getCarList,'GET','','').then(data => {
|
|
let carList = data.data;
|
|
let mapCarList = carList.map(item => {
|
|
switch (item.gpsState) {
|
|
case 0:
|
|
item.gpsStateTxt = '离线';
|
|
item.bgColor = '#999999';
|
|
item.gpsStateText = `${item.offlineTime}`;
|
|
break;
|
|
case 1:
|
|
item.gpsStateTxt = '行驶';
|
|
item.bgColor = '#1AAD19FF';
|
|
item.gpsStateText = `${item.speed}km/h`;
|
|
break;
|
|
case 2:
|
|
item.gpsStateTxt = '静止';
|
|
item.bgColor = '#1B64F8FF';
|
|
item.gpsStateText = `${item.durationTime}`;
|
|
break;
|
|
};
|
|
if (item.contactPerson) {
|
|
item.contactPerson = ` (${item.contactPerson}) `
|
|
};
|
|
return item;
|
|
});
|
|
let newMarkers = [];
|
|
mapCarList.forEach(item => {
|
|
let {id,latitude,longitude,direct,vehicleCode} = item;
|
|
newMarkers.push({
|
|
id,
|
|
vehicleCode,
|
|
latitude,
|
|
longitude,
|
|
iconPath: `../../static/images/index/${ item.gpsState == 0 ? 'stop' : item.gpsState == 1 ? 'road' : 'static'}.png`,
|
|
width: '17px',
|
|
height: '30px',
|
|
rotate: direct,
|
|
anchor: {
|
|
x: .5,
|
|
y: .5
|
|
},
|
|
customCallout: {
|
|
anchorY: .5,
|
|
anchorX: 0,
|
|
display: 'ALWAYS'
|
|
},
|
|
})
|
|
})
|
|
this.markers = newMarkers;
|
|
this.carList = mapCarList;
|
|
if(this.selectCarId){
|
|
console.log('selectCarId ')
|
|
this.setSelectCar(this.selectCarId)
|
|
};
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1000
|
|
})
|
|
})
|
|
},
|
|
// 设置气泡置顶显示
|
|
setSelectCar(id){
|
|
let oldMarkers = this.markers;
|
|
oldMarkers.forEach(item=>{
|
|
item.zIndex = 1;
|
|
});
|
|
let selectCar = this.carList.find(item => item.id == id);
|
|
this.selectCarInfo = selectCar;
|
|
let markersIdx = oldMarkers.findIndex(item => item.id == id);
|
|
let newCarInfo = oldMarkers.splice(markersIdx, 1)[0];
|
|
newCarInfo.zIndex = 999;
|
|
this.markers.push(newCarInfo);
|
|
this.showCarInfo = true;
|
|
this.moveToLocation(selectCar);
|
|
},
|
|
/*更新当前地图中心位置*/
|
|
moveToLocation(mapInfo) {
|
|
let { latitude, longitude } = mapInfo;
|
|
this.defauleMap = {latitude, longitude};
|
|
setTimeout(()=>{
|
|
this.fd = false;
|
|
},500)
|
|
},
|
|
// 下一辆
|
|
nextCar() {
|
|
this.toggleCar(1)
|
|
},
|
|
// 上一辆
|
|
prevCar() {
|
|
this.toggleCar(-1)
|
|
},
|
|
// 切换车辆
|
|
toggleCar(num) {
|
|
if(this.fd){
|
|
return;
|
|
};
|
|
this.fd = true;
|
|
let carList = this.carList;
|
|
let carListLen = carList.length - 1;
|
|
if (carListLen < 0) {
|
|
uni.showToast({
|
|
title: '暂无车辆信息',
|
|
icon: 'none'
|
|
});
|
|
return
|
|
};
|
|
if(num > 0){
|
|
if(this.nowSelectCarIndex == carListLen){
|
|
this.nowSelectCarIndex = 0;
|
|
}else{
|
|
this.nowSelectCarIndex ++;
|
|
};
|
|
}else{
|
|
if(this.nowSelectCarIndex == 0){
|
|
this.nowSelectCarIndex = carListLen;
|
|
}else{
|
|
this.nowSelectCarIndex --;
|
|
};
|
|
};
|
|
this.selectCarId = carList[this.nowSelectCarIndex].id;
|
|
this.setSelectCar(carList[this.nowSelectCarIndex].id);
|
|
if(this.scale == 18){
|
|
this.scale = 17.99;
|
|
}else{
|
|
this.scale = 18;
|
|
};
|
|
},
|
|
//快捷列表
|
|
changeList(){
|
|
this.showTopCarList = !this.showTopCarList;
|
|
},
|
|
// 快捷列表选择车辆
|
|
onSelectCarInfo(id){
|
|
if(this.fd){
|
|
return;
|
|
};
|
|
this.fd = true;
|
|
this.setSelectCar(id);
|
|
this.selectCarId = id;
|
|
if(this.scale == 18){
|
|
this.scale = 17.99;
|
|
}else{
|
|
this.scale = 18;
|
|
};
|
|
},
|
|
// 开启卫星地图
|
|
openSatellite(){
|
|
this.enableSatellite = !this.enableSatellite;
|
|
if(this.enableSatellite){
|
|
this.scale = 15;
|
|
this.maxScale = 17;
|
|
}else{
|
|
this.scale = 17;
|
|
this.maxScale = 20;
|
|
}
|
|
},
|
|
// 路况
|
|
openTraffic(){
|
|
this.enableTraffic = !this.enableTraffic;
|
|
},
|
|
// 导航
|
|
openLoation(){
|
|
const { latitude, longitude, vehiclePlate, vehicleCode} = this.selectCarInfo;
|
|
if(!latitude || !longitude || longitude == 0 || latitude == 0){
|
|
uni.showToast({
|
|
title: '尚未定位',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
};
|
|
uni.openLocation({
|
|
latitude,
|
|
longitude,
|
|
name:`${vehiclePlate}(${vehicleCode})`
|
|
});
|
|
},
|
|
// 联系司机
|
|
callPhone(phone,id){
|
|
if(!phone){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '暂未填写车辆联系人',
|
|
confirmText:'去填写',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url:`/pages/carInfo/carInfo?id=${id}`
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}else{
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
}
|
|
},
|
|
// 查车 / 我的 /报警
|
|
goUrlList(url){
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
},
|
|
// 获取车场
|
|
getCarYard(){
|
|
const that = this;
|
|
https(urlList.getUserCompany,'GET','','').then(data => {
|
|
let carYardList = data.data.yardList;
|
|
if(that.selectCarId == ''){
|
|
that.defauleMap = {
|
|
latitude:carYardList[0].latitude,
|
|
longitude:carYardList[0].longitude,
|
|
}
|
|
};
|
|
let circlesList = [];
|
|
carYardList.map(item => {
|
|
let yuan = {
|
|
latitude:item.latitude,
|
|
longitude:item.longitude,
|
|
fillColor:'#549FEF4D',
|
|
radius: 100,
|
|
color:'#549FEF',
|
|
};
|
|
circlesList.push(yuan);
|
|
});
|
|
|
|
that.circles = circlesList;
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1000
|
|
})
|
|
})
|
|
},
|
|
// 返回上一页
|
|
goBack(){
|
|
uni.navigateBack()
|
|
},
|
|
getUserInfo(){
|
|
https(urlList.getuserInfo,'GET','','').then(data => {
|
|
console.log('信息',data.data)
|
|
uni.setStorage({
|
|
key:"userinfo",
|
|
data:data.data,
|
|
});
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1000
|
|
})
|
|
})
|
|
},
|
|
},
|
|
onHide() {
|
|
clearInterval(this.timer);
|
|
},
|
|
onUnload(){
|
|
clearInterval(this.timer);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mar_lef{
|
|
margin-left: 10rpx;
|
|
}
|
|
.mar_top{
|
|
margin-top: 10rpx;
|
|
}
|
|
.mar_bot{
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.bor_lef_rig{
|
|
border-left: 1rpx solid #e7e6ea;
|
|
border-right: 1rpx solid #e7e6ea;
|
|
}
|
|
/deep/::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
#warpMap{
|
|
height: 100vh;
|
|
width: 750rpx;
|
|
.customCallout {
|
|
box-sizing: border-box;
|
|
width: 128rpx;
|
|
height: 70rpx;
|
|
position: relative;
|
|
color: #1B64F8;
|
|
.qipao_title{
|
|
width: 100%;
|
|
text-align: center;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
margin-top: 12rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.qipao_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.customCallout2 {
|
|
box-sizing: border-box;
|
|
width: 330rpx;
|
|
height: 180rpx;
|
|
position: relative;
|
|
.qipao_title2{
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.carCode2{
|
|
height: 50rpx;
|
|
width: 300rpx;
|
|
font-weight: bold;
|
|
line-height: 50rpx;
|
|
}
|
|
.carLength2{
|
|
width: 300rpx;
|
|
margin-top:5rpx;
|
|
color: #5f5f5f;
|
|
}
|
|
}
|
|
.qipao_img2{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.topBar{
|
|
.top_left_text{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.top_left_my{
|
|
width: 55rpx;
|
|
height: 55rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.top_left_my_icon{
|
|
width: 63rpx;
|
|
height: 55rpx;
|
|
}
|
|
}
|
|
}
|
|
.bot_tabbar{
|
|
width: 700rpx;
|
|
background: rgba(255 , 255, 255,.42);
|
|
position: fixed;
|
|
bottom: 24rpx;
|
|
left: 25rpx;
|
|
border-radius: 16rpx;
|
|
padding: 25rpx 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.my{
|
|
width: 95rpx;
|
|
height: 95rpx;
|
|
}
|
|
.carList{
|
|
width: 354rpx;
|
|
height: 100rpx;
|
|
}
|
|
.warn{
|
|
width: 95rpx;
|
|
height: 95rpx;
|
|
}
|
|
}
|
|
.bot_module{
|
|
width: 710rpx;
|
|
background: white;
|
|
position: fixed;
|
|
box-sizing: border-box;
|
|
bottom: 27rpx;
|
|
left: 20rpx;
|
|
z-index: 9999;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
color: #353535;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.b_m_header{
|
|
width: 100%;
|
|
height: 135rpx;
|
|
border-bottom: 1rpx solid #e7e6ea;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.b_m_h_lef{
|
|
height: 100%;
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.b_m_h_l_top{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items:center;
|
|
image{
|
|
width: 40rpx;
|
|
height: 32rpx;
|
|
}
|
|
.font_w{
|
|
font-size: 31rpx;
|
|
font-weight: bold;
|
|
margin-top: 2rpx;
|
|
}
|
|
.gps_type{
|
|
margin-left: 20rpx;
|
|
margin-bottom:5rpx;
|
|
}
|
|
.status{
|
|
padding: 2rpx 20rpx;
|
|
background: #1B64F8FF;
|
|
color: white;
|
|
border-radius: 8rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.b_m_h_rig{
|
|
height: 100%;
|
|
margin-right: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
}
|
|
}
|
|
}
|
|
.b_m_cen{
|
|
width: 100%;
|
|
padding:0rpx 26rpx;
|
|
border-bottom: 1rpx solid #e7e6ea;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.row{
|
|
width: 100%;
|
|
margin-top:8rpx;
|
|
margin-bottom: 7rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items:flex-start;
|
|
.title{
|
|
width: 120rpx;
|
|
text-align: justify;
|
|
text-align-last:justify;
|
|
flex-shrink: 0;
|
|
height: 34rpx;
|
|
}
|
|
.title::after{
|
|
width: 100%;
|
|
display: inline-block;
|
|
content: '';
|
|
height: 1rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.address{
|
|
width: 420rpx;
|
|
height: 80rpx;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.seleAddress{
|
|
color: #1B64F8FF;
|
|
padding-left: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.b_m_footer{
|
|
width: 100%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #1B64F8FF;
|
|
.b_m_f_nav{
|
|
width: 33%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
.yesLarge{
|
|
transform: scaleY(1);
|
|
-ms-transform:scaleY(1);
|
|
-moz-transform:scaleY(1);
|
|
-webkit-transform:scaleY(1);
|
|
-o-transform:scaleY(1);
|
|
transition: transform 0.5s;
|
|
}
|
|
.notLarge{
|
|
transform: scaleY(0);
|
|
-ms-transform:scaleY(0);
|
|
-moz-transform:scaleY(0);
|
|
-webkit-transform:scaleY(0);
|
|
-o-transform:scaleY(0);
|
|
transition: transform 0.5s;
|
|
}
|
|
.topCarList{
|
|
width: 100%;
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
border-top: 1rpx solid #eeeeee;
|
|
background: white;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
.uni-swiper-tab_ios{
|
|
width: 100%;
|
|
max-height:212rpx;
|
|
}
|
|
.uni-swiper-tab{
|
|
width: 100%;
|
|
max-height:216rpx;
|
|
}
|
|
.noCarList{
|
|
width: 100%;
|
|
height:216rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #5b5b5b;
|
|
}
|
|
.scrollx_items{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20rpx;
|
|
.scrollx_items_list{
|
|
width: 125rpx;
|
|
height: 98rpx;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
.items{
|
|
height:70rpx;
|
|
width: 70rpx; //750 420+42 330 7 140+16+60 125
|
|
overflow: hidden;
|
|
// margin: 20rpx 0rpx 0rpx 41.14rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.onItems_bor{
|
|
color:#1B64F8FF;
|
|
border:4rpx solid #1B64F8FF;
|
|
}
|
|
.items_bor{
|
|
color:#999999;
|
|
border:4rpx solid #999999;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
/* 侧边栏 */
|
|
.rig_broadside{
|
|
width: 75rpx;
|
|
position: fixed;
|
|
bottom:520rpx;
|
|
right: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.lef_broadside{
|
|
width: 70rpx;
|
|
position: fixed;
|
|
bottom:500rpx;
|
|
left: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.nav_lef{
|
|
height: 116rpx;
|
|
width: 116rpx;
|
|
}
|
|
}
|
|
.nav_right{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.toggle_view{
|
|
width: 100%;
|
|
height: 75rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|