fix:首页样式更新

yangan

2024-07-09 3f798d6f31282420a4785e850278aee3c15de171

 pages/driver-page/driver-index/test-index.vue

@@ -1,1214 +1,1356 @@
<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="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">
              <div class="twoleft">
                <view class="time-icon"
                  ><u-icon name="clock" color="#515151" size="25"></u-icon
                ></view>
                <view
                  class="send-date"
                  style="font-size: 28rpx; color: #1f4978f0"
                  >{{ item.yuYueSection || item.yuYueTime }}</view
                >
                <!-- 第一行 -->
                <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>
              <view class="status">
                <u-tag :text="coalStatus[item.statusWeigh] || ''" plain>
                </u-tag>
              </view>
            </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"
                 >
            <div class="twoLine">
              <div class="twoRight">
                <view>
                  <u-tag :text="item.coalName" plain> </u-tag>
                </view>
                <view style="margin-left: 10rpx">
                  <u-tag :text="item.orderType" plain> </u-tag>
                </view>
              </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"
                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>

                 >
                 <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
          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>
            <!-- 待预约提煤单 -->
            <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>
            <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="qiangDanBtn(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
          </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
        <!-- 通知通告 -->
        <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)">
          >
            <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>

                    <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
                <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>
            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,
                },
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();
      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;

      },
      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/dataStatistics/index`
                });
                    break;
        case "历史订单":
          uni.navigateTo({
            url: `/pages/public-page/historicalOrders/index?historyData=${JSON.stringify(
              this.driverBillOfLoadingData.list2
            )}`,
          });
          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 '操作指南':
                     this.noobTour();
                        break;
                        case '消息':
                        uni.navigateTo({
               url: '/pages/public-page/message/message'
            });
                        break;
        case "合作基地":
          uni.navigateTo({
            url: "/pages/public-page/cooperationBase/index",
          });
          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;
        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;
    }
.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: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);
    height: calc(100vh - 73px);
    z-index: 9;
    display: flex;
    flex-direction: column;
    // overflow-y: auto;
    margin:  0 auto;
    margin: 0 auto;
    background-color: unset;
    // padding-bottom: 100rpx;
  
     .ingOrderDiv{
         width: 100%;
        min-height: 630rpx;
        margin:  0 auto;
     }
    .ingOrder{

    .ingOrderDiv {
      width: 100%;
      min-height: 630rpx;
      margin: 0 auto;
    }
    .ingOrder {
      width: 94%;
      height: 370rpx;
      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%;
        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;
        margin: 0 auto;
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        .twoleft {
          display: flex;
          justify-items: center;
          .time-icon {
            margin-right: 10rpx;
            display: flex;
            align-items: center;
          }
        }
      }
      .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;
        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;
        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: #6E6E6E;
            color: #515151;
          }
          span {
            color: #515151;
            font-size: 30rpx;
            font-weight: 300;
          }
        }
        .listItemTop{
            display: flex;
            justify-content: space-around;
            align-items: center;
        .twoRight {
          display: flex;
          justify-content: space-around;
        }
      }
      .threeLine {
        flex: 0 1 25%;
        display: flex;
        justify-content: flex-end;
        height: 100rpx;
        .more {
          width: 106rpx;
          height: 20rpx;
          font-size: 24rpx;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: #494949;
          margin-right: 20rpx;
        }
      }
    }
    .gridBox {
      width: 100%;
      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;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            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 {
          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: 95%;
        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;

.gridBoxBg {
  // box-shadow:0 0 10px 10px #9fb1c5;
  width: 100%;
  margin: 20rpx auto 10rpx;
}
.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 ;
.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 组合 */