fix:首页样式更新

yangan

2024-07-05 6b9f8d4200a541e1b9a1a47c9faccbdff1efbee8

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

@@ -1,12 +1,12 @@
<template>
    <div class="warp">
        <scroll-view 
    <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 v-if="loading" class="ingOrderBox"></div>
                <div class="ingOrder" v-for="item,i in driverBillOfLoadingData.list2" :key="i" v-if="i == 0"
                <div class="ingOrderDiv">
                <div class="ingOrder" v-for="(item,i) in driverBillOfLoadingData.list2" :key="i" v-if="i == 0"
                @click="list3CardIconClick(item)"
                >
                <!-- 第一行 -->
@@ -47,7 +47,7 @@
                         @click.stop="skipMap(item)"
                  size="40"></u-icon
                        >
                        <u-icon 
                        <u-icon
                        @click.stop="skipMap(item)"
                        name="map"
                   color="#4978F0"
@@ -61,7 +61,7 @@
            </u-tag>
          </view>
                </div>
                

                <div class="twoLine">
                    <div class="twoleft">
                     <view class="time-icon"><u-icon name="clock"
@@ -78,8 +78,16 @@
                    <span class="more" @click="todoHistory">MORE>></span>
                </div>
            </div>
            <u-empty mode="data"
                        :marginTop='340'
                  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" >
@@ -91,7 +99,7 @@
              <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>
@@ -99,7 +107,7 @@
        </u-grid>
            </view>
            </view>
            

            <!-- 立即抢单 -->
            <div class="orderGrabbing" v-for="item,i in driverBillOfLoadingData.list1" :key="i">
                <!-- 第一行 -->
@@ -242,8 +250,8 @@
            :key="index"
             >
                    <div class="listItem"  @click="todoNotice(item)">
                     
                    <div class="listItemTop">  

                    <div class="listItemTop">
                         <u-avatar
                  slot="icon"
                  shape="square"
@@ -252,7 +260,7 @@
                  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>
@@ -282,11 +290,9 @@
                  </u-cell>
               </u-cell-group>
            </view>
       

    </div>
        </scroll-view>
        <view class="mark"  ref="mark" :style="{  display:markFlag ,top: markFlag ? 0 : '100vh'}">
            </view>
           <!-- 抢单提示模态框 -->
            <view class="qianDanModel">
               <u-modal :show="qiangDanShow"
@@ -315,8 +321,6 @@
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   import { mapState } from 'vuex';
   import { Debounce } from '../../../utils/util';
    import labaIcon from '@/static/image/无人值守/司机端首页/组 27 拷贝 3.jpg'
    import newIcon from '@/static/image/无人值守/司机端首页/组 27.jpg'
   export default {
      components: {
         combinedTitle,
@@ -345,8 +349,8 @@
      },
      data() {
         return {
                labaIcon,
                newIcon,
                labaIcon:`${onlineurl}/appimg/image/司机端首页/组 27 拷贝 3.jpg`,
                newIcon:`${onlineurl}/appimg/image/司机端首页/组 27.jpg`,
                markFlag:'none',
                noticeModelShow:false,
                garidInitTop:'', //元素初始距离顶部的高度
@@ -412,7 +416,7 @@
                current:1,
                page:10,
                },
                

            qiangDanTitle: '抢单提示',
            qiangDanContent: '',
            qiangDanOrderPlanId: null,
@@ -434,7 +438,7 @@
      },
      onShow() {
         this.init();
        

      },
      methods: {
         // 跳转地图
@@ -462,13 +466,13 @@

                     case '历史订单':
                    uni.navigateTo({
                url: `/pages/driver-page/driver-index/bill-of-lading-details/historicalOrders/index?historyData=${JSON.stringify(this.driverBillOfLoadingData.list2)}`
                url: `/pages/public-page/historicalOrders/index?historyData=${JSON.stringify(this.driverBillOfLoadingData.list2)}`
                });
                        break;  
                        break;

                        case '操作指南':
                     this.noobTour();
                        break; 
                        break;
                        case '消息':
                        uni.navigateTo({
               url: '/pages/public-page/message/message'
@@ -477,10 +481,10 @@

                        case '合作基地':
                        uni.navigateTo({
               url: '/pages/driver-page/driver-index/bill-of-lading-details/cooperationBase/index'
               url: '/pages/public-page/cooperationBase/index'
            });
                        break;
                

                    default:
                        break;
                }
@@ -488,19 +492,19 @@
            },
            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();
                // 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();
@@ -532,7 +536,7 @@
                            this.noticeList =   this.noticeList.concat(result)
                        }else{
                            //否则就是空
                            

                        }

                      let arr =  this.noticeList.sort((a,b)=>{
@@ -548,7 +552,7 @@
                        }
                        return item
                       });
                    

                    }
            })

@@ -580,7 +584,7 @@
               this.qiangDanContent = `已抢${value.tmcCount}单，确定抢单？`;
            }
         } ,500)
				

         ,
         // 抢单模态框
         qiangDanConfirm() {
@@ -653,7 +657,7 @@
         },
            todoHistory(){
                uni.navigateTo({
                url: `/pages/driver-page/driver-index/bill-of-lading-details/historicalOrders/index?historyData=${JSON.stringify( this.driverBillOfLoadingData.list2)}`
                url: `/pages/public-page/historicalOrders/index?historyData=${JSON.stringify( this.driverBillOfLoadingData.list2)}`
                });
            },
            todoNotice(item){
@@ -667,7 +671,7 @@
            noticConfirm(){
                this.noticeModelShow = false;
            }
            

      }
   };
</script>
@@ -683,7 +687,6 @@
    flex: 1;
    flex-direction: column;
    padding-top: calc(var(--window-top) + 20px);
    background:url('https://mx.jzeg.cn:9095/appimg/image/banner/diverbanner.png')   no-repeat fixed center; 
    background-position: 0rpx 0rpx;
    background-size: 100% 600rpx;
    .warp-box{
@@ -696,12 +699,12 @@
    margin:  0 auto;
    background-color: unset;
    // padding-bottom: 100rpx;
    .ingOrderBox{
        width: 94%;
        height: 30%;
        transform: translateY(20%);
    }
   
  
     .ingOrderDiv{
         width: 100%;
        min-height: 630rpx;
        margin:  0 auto;
     }
    .ingOrder{
        width: 94%;
        height: 380rpx;
@@ -722,7 +725,7 @@
            display: flex;
            width: 150rpx;
        }
       

        .firstLine{
            flex:  0 1 60%;
            width: 92%;
@@ -778,9 +781,9 @@
                    border-right: 2px dotted #303030;
                    transform: translateX(15rpx);
                }
               

            }
         

        }
        .centerTitle{
            display: flex;
@@ -801,7 +804,7 @@
            display: flex;
            justify-content: space-between;
            .twoleft{
              

                display: flex;
                justify-content: space-around;
                align-items: center;
@@ -917,9 +920,9 @@
                    border-right: 2px dotted #303030;
                    transform: translateX(15rpx);
                }
               

            }
         

        }
        .centerTitle{
            display: flex;
@@ -941,7 +944,7 @@
            display: flex;
            justify-content: space-between;
            .twoleft{
                

                display: flex;
                justify-content: space-around;
                align-items: center;
@@ -983,7 +986,7 @@
                font-family: Microsoft YaHei;
                font-weight: 300;
                margin-right: 20rpx;
               

                .qiangdanBtn{
                    width: 230rpx;
                    height:60rpx;
@@ -1064,9 +1067,9 @@
                    border-right: 2px dotted #303030;
                    transform: translateX(15rpx);
                }
               

            }
         

        }
        .centerTitle{
            display: flex;
@@ -1088,7 +1091,7 @@
            display: flex;
            justify-content: space-between;
            .twoleft{
               

                display: flex;
                justify-content: space-around;
                align-items: center;
@@ -1181,14 +1184,14 @@
            justify-content: space-around;
            align-items: center;
            font-size: 28rpx;
            white-space: nowrap; 
            text-overflow:ellipsis; 
            overflow:hidden; 
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
        }

    }
    }
 

}
.gridBoxBg{
    // box-shadow:0 0 10px 10px #9fb1c5;
@@ -1215,4 +1218,4 @@
//     /* .right-bottom, .right-top 组合 */
//     box-shadow: 5px 5px 10px -4px #fff, 5px -5px 10px -4px #fff;
//   }
</style>
</style>