<template>
|
<div class="warp" :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/diverbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
|
<scroll-view
|
scroll-y class="page" @scroll="onScroll">
|
<div class="warp-box">
|
<!-- 当前的订单 -->
|
<!-- 占位 -->
|
<div class="ingOrderDiv">
|
<div class="ingOrder" v-for="(item,i) in driverBillOfLoadingData.list2" :key="i" v-if="i == 0"
|
@click="list3CardIconClick(item)"
|
>
|
<!-- 第一行 -->
|
<div class="firstLine">
|
<div class="leftIcon">
|
<div class="leftOneDiv">
|
<span class="leftOne">装</span>
|
</div>
|
<div class="leftLine"></div>
|
<div class="rightDiv">
|
<span class="rightone">卸</span>
|
</div>
|
</div>
|
<div class="centerTitle">
|
<view class="filedname exceedHide">
|
<text
|
v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName }}</text>
|
<text
|
v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerName }}</text>
|
<text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
|
{{item.filedName}}
|
</text>
|
</view>
|
<p class="centerLine"></p>
|
<view class="filedname exceedHide">
|
<text
|
v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.customerName }}</text>
|
<text
|
v-else-if="item.orderType == '外购' || item.orderType == '内购'">{{ item.deptName }}</text>
|
<text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
|
{{item.toFiledName}}
|
</text>
|
</view>
|
</div>
|
<div class="rightIcon">
|
<u-icon name="map"
|
color="#4978F0"
|
@click.stop="skipMap(item)"
|
size="40"></u-icon
|
>
|
<u-icon
|
@click.stop="skipMap(item)"
|
name="map"
|
color="#4978F0"
|
size="40"></u-icon>
|
</div>
|
</div>
|
<div class="statusBox">
|
<view class="status">
|
<u-tag :text="coalStatus[item.statusWeigh] || ''"
|
plain>
|
</u-tag>
|
</view>
|
</div>
|
|
<div class="twoLine">
|
<div class="twoleft">
|
<view class="time-icon"><u-icon name="clock"
|
color="#515151"
|
size="25"></u-icon></view>
|
<view class="send-date">{{ item.yuYueTime }}</view>
|
</div>
|
<div class="twoRight">
|
<u-tag :text="item.coalName" plain> </u-tag>
|
<u-tag :text="item.orderType" plain> </u-tag>
|
</div>
|
</div>
|
<div class="threeLine">
|
<span class="more" @click="todoHistory">MORE>></span>
|
</div>
|
</div>
|
<u-empty mode="data"
|
:marginTop='330'
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"
|
iconSize="1000"
|
text="暂无数据"
|
v-if="driverBillOfLoadingData.list2.length ===0"></u-empty>
|
</div>
|
<!-- 蒙层 -->
|
|
<!-- 九宫格 -->
|
<view class="gridBoxBg no-right no-left">
|
<view class="gridBox" >
|
<u-grid
|
:border="false"
|
col="4"
|
v-if="!loading"
|
>
|
<u-grid-item
|
v-for="(listItem,listIndex) in list"
|
:key="listIndex"
|
|
>
|
<u--image :showLoading="true" :src="listItem.src" width="50px" height="50px" @click="gridClick(listItem)"></u--image>
|
<text class="grid-text" >{{listItem.title}}</text>
|
</u-grid-item>
|
</u-grid>
|
</view>
|
</view>
|
|
<!-- 立即抢单 -->
|
<div class="orderGrabbing" v-for="item,i in driverBillOfLoadingData.list1" :key="i">
|
<!-- 第一行 -->
|
<div class="firstLine">
|
<div class="leftIcon">
|
<div class="leftOneDiv">
|
<span class="leftOne">装</span>
|
</div>
|
<div class="leftLine"></div>
|
<div class="rightDiv">
|
<span class="rightone">卸</span>
|
</div>
|
</div>
|
<div class="centerTitle">
|
<view class="filedname exceedHide">
|
<text
|
v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName|| '' }}</text>
|
<text
|
v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerId?item.customerName:item.customerNameCopy|| '' }}</text>
|
<text v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.filedName}}
|
</text>
|
</view>
|
<p class="centerLine"></p>
|
<view class="filedname exceedHide">
|
<text v-if="item.orderType == '外销' || item.orderType == '内销' ">
|
{{ item.customerNameCopy ? item.customerNameCopy : item.customerName|| '' }}
|
</text>
|
<text
|
v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.deptName|| '' }}</text>
|
<text
|
v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.toFiledName}}
|
</text>
|
</view>
|
</div>
|
<div class="rightIcon">
|
<div>
|
<span style="color: #F81414;font-size: 40rpx;font-weight: 400">{{ item.carNum - item.taskNum }}</span>
|
<span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">/</span>
|
<span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">{{ item.carNum }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="twoLine">
|
<div class="twoleft">
|
<span>{{ item.coalName }}</span>
|
<span>|</span>
|
<span>{{ item.orderType }}</span>
|
</div>
|
</div>
|
<div class="threeLine">
|
<div class="date">
|
<view class="time-icon"><u-icon name="clock"
|
color="#515151"
|
size="30"></u-icon></view>
|
<view class="send-date">{{ item.createTime }}</view>
|
</div>
|
<span class="more">
|
<div @click.stop="toAppointmentClick(item)" class="qiangdanBtn">立即预约</div>
|
</span>
|
</div>
|
</div>
|
<!-- 待预约提煤单 -->
|
<combined-title title="待预约通知单"></combined-title>
|
<div class="pendingAppointment" v-for="item,i in driverBillOfLoadingData.list3 " :key="i"
|
@click.stop="list3CardIconClick(item)"
|
>
|
<div class="firstLine">
|
<div class="leftIcon">
|
<div class="leftOneDiv">
|
<span class="leftOne">装</span>
|
</div>
|
<div class="leftLine"></div>
|
<div class="rightDiv">
|
<span class="rightone">卸</span>
|
</div>
|
</div>
|
<div class="centerTitle">
|
<view class="filedname exceedHide">
|
<text
|
v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName|| '' }}</text>
|
<text
|
v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerId?item.customerName:item.customerNameCopy|| '' }}</text>
|
<text v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.filedName}}
|
</text>
|
</view>
|
<p class="centerLine"></p>
|
<view class="filedname exceedHide">
|
<text v-if="item.orderType == '外销' || item.orderType == '内销' ">
|
{{ item.customerNameCopy ? item.customerNameCopy : item.customerName|| '' }}
|
</text>
|
<text
|
v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.deptName|| '' }}</text>
|
<text
|
v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.toFiledName}}
|
</text>
|
</view>
|
</div>
|
<div class="rightIcon">
|
<!-- <div>
|
<span style="color: #F81414;font-size: 40rpx;font-weight: 400">3</span>
|
<span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">/</span>
|
<span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">18</span>
|
</div> -->
|
</div>
|
</div>
|
<div class="twoLine">
|
<div class="twoleft">
|
<span>{{ item.coalName }}</span>
|
<span>|</span>
|
<span>{{ item.orderType }}</span>
|
</div>
|
</div>
|
<div class="threeLine">
|
<div class="date">
|
<view class="time-icon"><u-icon name="clock"
|
color="#515151"
|
size="30"></u-icon></view>
|
<view class="send-date"> {{ item.createTime }}</view>
|
</div>
|
<span class="more">
|
<div class="qiangdanBtn" @click.stop="toAppointmentClick(item)">立即预约</div>
|
</span>
|
</div>
|
</div>
|
<!-- <div v-if="!driverBillOfLoadingData.list3.length"><u-empty
|
mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"></u-empty></div> -->
|
<!-- 通知通告 -->
|
<combined-title title="通知公告"></combined-title>
|
<div class="tongzhi">
|
<u-list
|
v-if="noticeList && noticeList.length"
|
height="280rpx"
|
@scrolltolower="scrolltolower"
|
pagingEnabled
|
>
|
<u-list-item
|
v-for="(item, index) in noticeList"
|
:key="index"
|
>
|
<div class="listItem" @click="todoNotice(item)">
|
|
<div class="listItemTop">
|
<u-avatar
|
slot="icon"
|
shape="square"
|
size="35"
|
:src="item.url"
|
customStyle="margin: -3px 5px -3px 0"
|
></u-avatar>
|
<div v-html="item.title"></div></div>
|
|
<span class="listDate">{{ item.createTime }}</span>
|
</div>
|
</u-list-item>
|
</u-list>
|
<u-empty
|
v-if="!noticeList.length"
|
mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"></u-empty>
|
</div>
|
<!-- 引导页 -->
|
<view class="noob-tour"
|
v-if="roleType===3&&isFirstLogin">
|
<combined-title title="操作指引"></combined-title>
|
<u-cell-group>
|
<u-cell title="新手指引"
|
name='1'
|
:clickable="true"
|
@click="noobTour">
|
<u-badge type="primary"
|
value="01"
|
slot='icon'></u-badge>
|
<u-icon slot="value"
|
name="arrow-right"
|
size="30"
|
color="#b8b8b8"></u-icon>
|
</u-cell>
|
</u-cell-group>
|
</view>
|
|
</div>
|
</scroll-view>
|
<!-- 抢单提示模态框 -->
|
<view class="qianDanModel">
|
<u-modal :show="qiangDanShow"
|
:title="qiangDanTitle"
|
showCancelButton
|
:content="qiangDanContent"
|
@confirm="qiangDanConfirm"
|
@cancel="qiangDanCancel"></u-modal>
|
</view>
|
<!-- 图片预览弹出框 -->
|
<view class="previewImage-container">
|
<previewImage ref="previewImage"
|
:imgs="driverTourImgList"
|
:saveBtn='false'></previewImage>
|
</view>
|
<!-- 通知公告 -->
|
<u-modal :show="noticeModelShow" :title="notice.title" @confirm="noticConfirm" >
|
<div v-html="notice.content"></div>
|
</u-modal>
|
</div>
|
</template>
|
<script>
|
import { onlineurl } from '@/api/request.js'
|
import { BaseUrl } from '@/api/publicInterface.js'
|
import combinedTitle from '@/components/combined-title/combined-title.vue';
|
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
|
import { mapState } from 'vuex';
|
import { Debounce } from '../../../utils/util';
|
export default {
|
components: {
|
combinedTitle,
|
previewImage
|
},
|
props: {
|
indexdriverBillOfLoadingData: {
|
type: Object,
|
default: {}
|
}
|
},
|
watch: {
|
indexdriverBillOfLoadingData: {
|
handler(v) {
|
this.driverBillOfLoadingData = v;
|
},
|
deep: true,
|
immediate: true
|
},
|
},
|
computed: {
|
...mapState(['driverTourImgList']),
|
roleType() {
|
return uni.getStorageSync('roleType');
|
},
|
},
|
data() {
|
return {
|
labaIcon:`${onlineurl}/appimg/image/司机端首页/组 27 拷贝 3.jpg`,
|
newIcon:`${onlineurl}/appimg/image/司机端首页/组 27.jpg`,
|
markFlag:'none',
|
noticeModelShow:false,
|
garidInitTop:'', //元素初始距离顶部的高度
|
screenHeight:'',
|
notice:{
|
title:'',
|
content:"",
|
},
|
noticeList: [],
|
urls: [
|
'https://cdn.uviewui.com/uview/album/1.jpg',
|
'https://cdn.uviewui.com/uview/album/2.jpg',
|
'https://cdn.uviewui.com/uview/album/3.jpg',
|
'https://cdn.uviewui.com/uview/album/4.jpg',
|
'https://cdn.uviewui.com/uview/album/5.jpg',
|
'https://cdn.uviewui.com/uview/album/6.jpg',
|
'https://cdn.uviewui.com/uview/album/7.jpg',
|
'https://cdn.uviewui.com/uview/album/8.jpg',
|
'https://cdn.uviewui.com/uview/album/9.jpg',
|
'https://cdn.uviewui.com/uview/album/10.jpg',
|
],
|
list: [{
|
src: '/static/image/无人值守/司机端首页/组 15.jpg',
|
title: '合作基地'
|
},
|
{
|
src: '/static/image/无人值守/司机端首页/组 15(1).jpg',
|
title: '历史订单'
|
},
|
// {
|
// src: '/static/image/无人值守/司机端首页/组 15(2).jpg',
|
// title: '质检'
|
// },
|
// {
|
// src: '/static/image/无人值守/司机端首页/组 15(3).jpg',
|
// title: '车队管理'
|
// },
|
{
|
src: '/static/image/无人值守/司机端首页/组 15(4).jpg',
|
title: '关于我们',
|
},
|
{
|
src: '/static/image/无人值守/司机端首页/组 14.jpg',
|
title: '消息'
|
},
|
{
|
src: '/static/image/无人值守/司机端首页/组 32.jpg',
|
title: '操作指南'
|
},
|
{
|
src: '/static/image/无人值守/司机端首页/组 15(5).jpg',
|
title: '数据统计'
|
},
|
],
|
driverBillOfLoadingData: {
|
list1: [],
|
list2: [],
|
list3: []
|
},
|
// 抢单模态框
|
qiangDanShow: false,
|
noticePage:{
|
current:1,
|
page:10,
|
},
|
|
qiangDanTitle: '抢单提示',
|
qiangDanContent: '',
|
qiangDanOrderPlanId: null,
|
fleetId: '',
|
xsUserId: '',
|
customerId: '',
|
coalStatus: ['未称重', '称重中', '验质中', '称重完成', '处理完成'],
|
onlineurl,
|
phone: "",
|
loading:true,
|
isFirstLogin: true //是否是第一次登录
|
};
|
},
|
mounted() {
|
// this.TourImgList = TourImgList
|
this.getLogOn()
|
this.getNoticeList();
|
this.watchScrollFun();
|
},
|
onShow() {
|
this.init();
|
|
},
|
methods: {
|
// 跳转地图
|
skipMap(val) {
|
uni.navigateTo({
|
url: `/pages/public-page/mapRoute/mapRoute?customerId=${val.customerId}&filedId=${val.filedId}&orderType=${val.orderType}${
|
val.toFiledId ? `&toFiledId=${val.toFiledId}&filedId=${val.filedId}` : ''
|
}`
|
});
|
},
|
gridClick(item){
|
console.log(item,'1231')
|
switch (item.title) {
|
case '关于我们':
|
uni.navigateTo({
|
url: `/pages/public-page/aboutus/index`
|
});
|
break;
|
|
case '数据统计':
|
uni.navigateTo({
|
url: `/pages/public-page/dataStatistics/index`
|
});
|
break;
|
|
case '历史订单':
|
uni.navigateTo({
|
url: `/pages/public-page/historicalOrders/index?historyData=${JSON.stringify(this.driverBillOfLoadingData.list2)}`
|
});
|
break;
|
|
case '操作指南':
|
this.noobTour();
|
break;
|
case '消息':
|
uni.navigateTo({
|
url: '/pages/public-page/message/message'
|
});
|
break;
|
|
case '合作基地':
|
uni.navigateTo({
|
url: '/pages/public-page/cooperationBase/index'
|
});
|
break;
|
|
default:
|
break;
|
}
|
|
},
|
onScroll(e){
|
// 监听页面向上滚动事件
|
// let query = uni.createSelectorQuery().in(this);
|
// query.select('.gridBox').boundingClientRect(data => {
|
// if(this.garidInitTop && (this.garidInitTop > data.top)){
|
// // console.log(data,data.top, query.select('.mark'));
|
// this.$nextTick(() => {
|
// this.markFlag = 'block'; //显示
|
// });
|
// }else{
|
// this.$nextTick(() => {
|
// this.markFlag = 'none'; //隐藏
|
// });
|
// }
|
// }).exec();
|
},
|
init() {
|
this.qiangDanList();
|
},
|
scrolltolower() {
|
this.loadmore()
|
},
|
loadmore(){
|
this.noticePage.current ++;
|
this.getNoticeList();
|
|
},
|
watchScrollFun(){
|
//初始化获取屏幕高度
|
const res = uni.getSystemInfoSync();
|
let query = uni.createSelectorQuery().in(this);
|
query.select('.gridBox').boundingClientRect(data => {
|
this.garidInitTop = data.top;
|
}).exec();
|
this.screenHeight = res.screenHeight;
|
|
},
|
getNoticeList(){
|
this.$reqGet('noticeList',{...this.noticePage,isNotice:'1'}).then(res => {
|
console.log(res,'resresres')
|
if(res.code == 0){
|
let result = res.data.records;
|
if(result.length){
|
this.noticeList = this.noticeList.concat(result)
|
}else{
|
//否则就是空
|
|
}
|
|
let arr = this.noticeList.sort((a,b)=>{
|
return new Date(a) - new Date(b);
|
})
|
console.log(arr)
|
this.noticeList = arr.map((item,i)=>{
|
if(i == 0){
|
item.url = this.newIcon
|
|
}else{
|
item.url = this.labaIcon
|
}
|
return item
|
});
|
|
}
|
})
|
|
},
|
// 司机首页列表
|
qiangDanList() {
|
uni.showLoading({
|
title: '加载中...'
|
});
|
this.$reqGet('qiangDanList').then(res => {
|
uni.hideLoading();
|
this.driverBillOfLoadingData = res.data;
|
this.loading = false;
|
}).finally(() => {
|
this.loading = false;
|
})
|
},
|
// 抢单按钮
|
qiangDanBtn:Debounce(function(value){
|
if (value.tmcCount == '0') {
|
this.qiangDan(value.orderPlanId, value.fleetId, value.customerId === null ? '0' : value.customerId,
|
value.xsUserId === null ? '0' : value.xsUserId);
|
} else {
|
this.qiangDanOrderPlanId = value.orderPlanId;
|
this.fleetId = value.fleetId;
|
this.customerId = value.customerId === null ? '0' : value.customerId;
|
this.xsUserId = value.xsUserId === null ? '0' : value.xsUserId;
|
this.qiangDanShow = true;
|
this.qiangDanContent = `已抢${value.tmcCount}单，确定抢单？`;
|
}
|
} ,500)
|
|
,
|
// 抢单模态框
|
qiangDanConfirm() {
|
this.qiangDanContent = '';
|
this.qiangDanShow = false;
|
this.qiangDan(this.qiangDanOrderPlanId, this.fleetId, this.customerId, this.xsUserId);
|
},
|
qiangDanCancel() {
|
this.qiangDanShow = false;
|
},
|
// 抢单请求
|
qiangDan(id, fleetId, customerId, xsUserId) {
|
this.$reqPost('qiangDan', {
|
orderPlanId: id,
|
fleetId: fleetId,
|
customerId: customerId,
|
xsUserId: xsUserId
|
}, 'params')
|
.then(res => {
|
if (res.code == 0) {
|
this.$u.toast('抢单成功');
|
} else {
|
this.$u.toast(res.msg ? res.msg : '抢单失败');
|
}
|
})
|
.then(() => {
|
setTimeout(() => {
|
this.qiangDanList();
|
}, 1000);
|
});
|
},
|
list3CardIconClick(value) {
|
uni.navigateTo({
|
url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}`
|
});
|
},
|
// 通知单详情
|
cardBodyClick(name) {
|
uni.navigateTo({
|
url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}`
|
});
|
},
|
// 去预约
|
toAppointmentClick(value) {
|
uni.navigateTo({
|
url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}`
|
});
|
},
|
noobTour() {
|
this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj1.jpg')
|
},
|
getLogOn() {
|
this.$reqGet('getUserEntity').then(res => {
|
this.phone = res.data.phone
|
}).then(() => {
|
uni.request({
|
url: `${BaseUrl}/admin/log/getLogOnType?phone=${this.phone}`,
|
success: res => {
|
// res.data.data 为1 代表第一次登录 为0取消学习指引 为2 代表存在
|
if (res.data.data === 1) {
|
this.noobTour()
|
} else if (res.data.data === 2) {
|
this.isFirstLogin = true
|
} else {
|
this.isFirstLogin = false
|
}
|
}
|
});
|
})
|
},
|
todoHistory(){
|
uni.navigateTo({
|
url: `/pages/public-page/historicalOrders/index?historyData=${JSON.stringify( this.driverBillOfLoadingData.list2)}`
|
});
|
},
|
todoNotice(item){
|
console.log(item,'item')
|
if(item){
|
this.noticeModelShow = true;
|
this.notice = item;
|
}
|
|
},
|
noticConfirm(){
|
this.noticeModelShow = false;
|
}
|
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.warp{
|
.page{
|
z-index: 999;
|
}
|
width: 100%;
|
height:100%;
|
display: flex;
|
margin: 0 auto;
|
flex: 1;
|
flex-direction: column;
|
padding-top: calc(var(--window-top) + 20px);
|
background-position: 0rpx 0rpx;
|
background-size: 100% 600rpx;
|
.warp-box{
|
width: 100%;
|
height:calc(100vh - 73px);
|
z-index: 9;
|
display: flex;
|
flex-direction: column;
|
// overflow-y: auto;
|
margin: 0 auto;
|
background-color: unset;
|
// padding-bottom: 100rpx;
|
|
.ingOrderDiv{
|
width: 100%;
|
min-height: 630rpx;
|
margin: 0 auto;
|
}
|
.ingOrder{
|
width: 94%;
|
height: 380rpx;
|
margin: 0 auto;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73,120,240,0.14), 0rpx 7rpx 45rpx 0rpx rgba(73,120,240,0.12);
|
border-radius: 20rpx;
|
margin-top: 270rpx;
|
display: flex;
|
flex-direction: column;
|
padding-top: 20rpx;
|
.statusBox{
|
width: 94%;
|
margin: 0 auto;
|
margin-top: 20rpx;
|
}
|
.status{
|
display: flex;
|
width: 150rpx;
|
}
|
|
.firstLine{
|
flex: 0 1 60%;
|
width: 92%;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
.rightIcon{
|
display: flex;
|
height: 150rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.leftIcon{
|
display: flex;
|
height: 150rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
.leftOneDiv{
|
width: 46rpx;
|
height: 46rpx;
|
background: #035CFB;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
|
border-radius: 5rpx;
|
text-align: center;
|
.leftOne{
|
width: 31rpx;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.rightDiv{
|
width: 46rpx;
|
height: 46rpx;
|
background: #F1333C;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
|
border-radius: 5rpx;
|
text-align: center;
|
.rightone{
|
width: 29rpx;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.leftLine{
|
width: 2rpx;
|
height: 43rpx;
|
border-right: 2px dotted #303030;
|
transform: translateX(15rpx);
|
}
|
|
}
|
|
}
|
.centerTitle{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
height: 150rpx;
|
.centerLine{
|
width: 510rpx;
|
height: 1rpx;
|
border-bottom: solid 1px #ccc;
|
}
|
}
|
|
.twoLine{
|
flex: 0 1 25%;
|
width: 92%;
|
margin: 20rpx auto;
|
display: flex;
|
justify-content: space-between;
|
.twoleft{
|
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.send-date{
|
font-size: 25rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #515151;
|
}
|
span{
|
color: #515151;
|
font-size: 30rpx;
|
font-weight: 300;
|
}
|
}
|
.twoRight{
|
display: flex;
|
justify-content: space-around;
|
}
|
}
|
.threeLine{
|
flex: 0 1 25%;
|
display: flex;
|
justify-content: flex-end;
|
height: 100rpx;
|
margin-bottom: 20rpx;
|
transform: translateY(-20rpx);
|
.more{
|
width: 106rpx;
|
height: 20rpx;
|
font-size: 24rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #494949;
|
margin-right: 20rpx;
|
}
|
}
|
|
}
|
.gridBox{
|
width: 94%;
|
height: 270rpx;
|
margin: 0 auto;
|
margin-top: 30rpx;
|
margin-bottom: 30rpx;
|
.grid-text{
|
font-size: 28rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #494949;
|
}
|
}
|
.orderGrabbing{
|
width: 690rpx;
|
height: 351rpx;
|
background: #FFFFFF;
|
box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73,120,240,0.15);
|
border-radius: 20rpx;
|
margin: 30rpx auto;
|
padding-top: 20rpx;
|
.firstLine{
|
flex: 0 1 60%;
|
width: 92%;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
.rightIcon{
|
display: flex;
|
height: 150rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.leftIcon{
|
display: flex;
|
height: 150rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
.leftOneDiv{
|
width: 46rpx;
|
height: 46rpx;
|
background: #035CFB;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
|
border-radius: 5rpx;
|
text-align: center;
|
.leftOne{
|
width: 31rpx;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.rightDiv{
|
width: 46rpx;
|
height: 46rpx;
|
background: #F1333C;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
|
border-radius: 5rpx;
|
text-align: center;
|
.rightone{
|
width: 29rpx;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.leftLine{
|
width: 2rpx;
|
height: 43rpx;
|
border-right: 2px dotted #303030;
|
transform: translateX(15rpx);
|
}
|
|
}
|
|
}
|
.centerTitle{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
height: 150rpx;
|
.centerLine{
|
width: 510rpx;
|
height: 1rpx;
|
border-bottom: solid 1px #ccc;
|
}
|
}
|
|
.twoLine{
|
flex: 0 1 25%;
|
width: 92%;
|
margin: 0 auto;
|
margin-top: 35rpx;
|
display: flex;
|
justify-content: space-between;
|
.twoleft{
|
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.send-date{
|
font-size: 28rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
.twoRight{
|
width: 210rpx;
|
display: flex;
|
justify-content: space-around;
|
}
|
}
|
.threeLine{
|
flex: 0 1 25%;
|
display: flex;
|
width: 92%;
|
margin: 0 auto;
|
height: 100rpx;
|
justify-content: space-between;
|
align-items: center;
|
.date{
|
width: 200rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
.send-date{
|
font-size: 28rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
.more{
|
font-size: 24rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
margin-right: 20rpx;
|
|
.qiangdanBtn{
|
width: 230rpx;
|
height:60rpx;
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
background: url('@/static/image/无人值守/司机端首页/矩形 4.jpg') no-repeat;
|
background-position: center center;
|
text-align: center;
|
line-height: 60rpx;
|
font-family: Microsoft YaHei;
|
border-radius: 40rpx;
|
margin-bottom:30rpx;
|
}
|
}
|
}
|
}
|
.pendingAppointment{
|
width: 690rpx;
|
height: 351rpx;
|
background: #FFFFFF;
|
box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73,120,240,0.15);
|
border-radius: 20rpx;
|
margin: 30rpx auto;
|
padding-top: 20rpx;
|
.firstLine{
|
flex: 0 1 60%;
|
width: 92%;
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
.rightIcon{
|
display: flex;
|
height: 150rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.leftIcon{
|
display: flex;
|
height: 150rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
.leftOneDiv{
|
width: 46rpx;
|
height: 46rpx;
|
background: #035CFB;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
|
border-radius: 5rpx;
|
text-align: center;
|
.leftOne{
|
width: 31rpx;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.rightDiv{
|
width: 46rpx;
|
height: 46rpx;
|
background: #F1333C;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255,255,255,0.85);
|
border-radius: 5rpx;
|
text-align: center;
|
.rightone{
|
width: 29rpx;
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
.leftLine{
|
width: 2rpx;
|
height: 43rpx;
|
border-right: 2px dotted #303030;
|
transform: translateX(15rpx);
|
}
|
|
}
|
|
}
|
.centerTitle{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
height: 150rpx;
|
.centerLine{
|
width: 510rpx;
|
height: 1rpx;
|
border-bottom: solid 1px #ccc;
|
}
|
}
|
|
.twoLine{
|
flex: 0 1 25%;
|
width: 92%;
|
margin: 0 auto;
|
margin-top: 35rpx;
|
display: flex;
|
justify-content: space-between;
|
.twoleft{
|
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.send-date{
|
font-size: 28rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #515151;
|
}
|
span{
|
font-size: 28rpx;
|
margin-left: 10rpx;
|
}
|
}
|
.twoRight{
|
width: 210rpx;
|
display: flex;
|
justify-content: space-around;
|
}
|
}
|
.threeLine{
|
flex: 0 1 25%;
|
display: flex;
|
width: 92%;
|
margin: 0 auto;
|
height: 100rpx;
|
justify-content: space-between;
|
align-items: center;
|
.date{
|
width: 300rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
.send-date{
|
width: 260rpx;
|
font-size: 25rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
.more{
|
font-size: 24rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
margin-right: 20rpx;
|
.qiangdanBtn{
|
width: 230rpx;
|
height:60rpx;
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
background: url('@/static/image/无人值守/司机端首页/矩形 4.jpg') no-repeat;
|
background-position: center center;
|
text-align: center;
|
line-height: 60rpx;
|
font-family: Microsoft YaHei;
|
border-radius: 40rpx;
|
margin-bottom:30rpx;
|
}
|
}
|
}
|
}
|
.tongzhi{
|
width: 94%;
|
margin: 0 auto;
|
height: 280rpx;
|
// background-color: #fff;
|
box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73,120,240,0.14), 0rpx 7rpx 45rpx 0rpx rgba(73,120,240,0.12);
|
border-radius: 20rpx;
|
transform: translateY(-10rpx);
|
}
|
.listItem{
|
display: flex;
|
align-items: center;
|
height: 80rpx;
|
width: 94%;
|
justify-content: space-between;
|
border-bottom: solid 1px #E3E3E3;
|
margin: 0 auto;
|
margin-top: 20rpx;
|
.listDate{
|
font-size: 24rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #6E6E6E;
|
}
|
.listItemTop{
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
font-size: 28rpx;
|
white-space: nowrap;
|
text-overflow:ellipsis;
|
overflow:hidden;
|
}
|
|
}
|
}
|
|
}
|
.gridBoxBg{
|
// box-shadow:0 0 10px 10px #9fb1c5;
|
width: 92%;
|
margin: 10rpx auto;
|
|
}
|
.mark{
|
height: calc(100vh - 60vh);
|
background-color: #ccc;
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
left :0;
|
z-index: 1;
|
opacity: 0.6;
|
transition: 2.5s all ;
|
}
|
// .no-right {
|
// /* .left-top, .left-bottom 组合 */
|
// box-shadow: -5px -5px 10px -4px #fff, -5px 5px 10px -4px #fff;
|
// }
|
// .no-left {
|
// /* .right-bottom, .right-top 组合 */
|
// box-shadow: 5px 5px 10px -4px #fff, 5px -5px 10px -4px #fff;
|
// }
|
</style>
|
