From 6b9f8d4200a541e1b9a1a47c9faccbdff1efbee8 Mon Sep 17 00:00:00 2001
From: yangan <yangan0921@163.com>
Date: 星期五, 05 七月 2024 13:57:51 +0800
Subject: [PATCH] fix:首页样式更新
---
pages/driver-page/driver-index/test-index.vue | 208 ++++++++++++++++++++++++++++++++++++---------------
1 files changed, 145 insertions(+), 63 deletions(-)
diff --git a/pages/driver-page/driver-index/test-index.vue b/pages/driver-page/driver-index/test-index.vue
index 4157599..67b668d 100644
--- a/pages/driver-page/driver-index/test-index.vue
+++ b/pages/driver-page/driver-index/test-index.vue
@@ -1,10 +1,12 @@
<template>
- <div class="warp">
- <div class="warp-box">
+ <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)"
>
<!-- 绗竴琛� -->
@@ -45,7 +47,7 @@
@click.stop="skipMap(item)"
size="40"></u-icon
>
- <u-icon
+ <u-icon
@click.stop="skipMap(item)"
name="map"
color="#4978F0"
@@ -59,13 +61,13 @@
</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.yuYueSection }}</view>
+ <view class="send-date">{{ item.yuYueTime }}</view>
</div>
<div class="twoRight">
<u-tag :text="item.coalName" plain> </u-tag>
@@ -76,9 +78,19 @@
<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="gridBox" >
+ <view class="gridBoxBg no-right no-left">
+ <view class="gridBox" >
<u-grid
:border="false"
col="4"
@@ -87,13 +99,15 @@
<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>
+ <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">
<!-- 绗竴琛� -->
@@ -218,10 +232,10 @@
</span>
</div>
</div>
- <div v-if="!driverBillOfLoadingData.list3.length"><u-empty
+ <!-- <div v-if="!driverBillOfLoadingData.list3.length"><u-empty
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
- textSize="30"></u-empty></div>
+ textSize="30"></u-empty></div> -->
<!-- 閫氱煡閫氬憡 -->
<combined-title title="閫氱煡鍏憡"></combined-title>
<div class="tongzhi">
@@ -236,8 +250,8 @@
:key="index"
>
<div class="listItem" @click="todoNotice(item)">
-
- <div class="listItemTop">
+
+ <div class="listItemTop">
<u-avatar
slot="icon"
shape="square"
@@ -246,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>
@@ -276,7 +290,9 @@
</u-cell>
</u-cell-group>
</view>
- </div>
+
+ </div>
+ </scroll-view>
<!-- 鎶㈠崟鎻愮ず妯℃�佹 -->
<view class="qianDanModel">
<u-modal :show="qiangDanShow"
@@ -305,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,
@@ -335,9 +349,12 @@
},
data() {
return {
- labaIcon,
- newIcon,
+ labaIcon:`${onlineurl}/appimg/image/鍙告満绔椤�/缁� 27 鎷疯礉 3.jpg`,
+ newIcon:`${onlineurl}/appimg/image/鍙告満绔椤�/缁� 27.jpg`,
+ markFlag:'none',
noticeModelShow:false,
+ garidInitTop:'', //鍏冪礌鍒濆璺濈椤堕儴鐨勯珮搴�
+ screenHeight:'',
notice:{
title:'',
content:"",
@@ -367,10 +384,10 @@
// src: '/static/image/鏃犱汉鍊煎畧/鍙告満绔椤�/缁� 15(2).jpg',
// title: '璐ㄦ'
// },
- {
- src: '/static/image/鏃犱汉鍊煎畧/鍙告満绔椤�/缁� 15(3).jpg',
- title: '杞﹂槦绠＄悊'
- },
+ // {
+ // src: '/static/image/鏃犱汉鍊煎畧/鍙告満绔椤�/缁� 15(3).jpg',
+ // title: '杞﹂槦绠＄悊'
+ // },
{
src: '/static/image/鏃犱汉鍊煎畧/鍙告満绔椤�/缁� 15(4).jpg',
title: '鍏充簬鎴戜滑',
@@ -399,7 +416,7 @@
current:1,
page:10,
},
-
+
qiangDanTitle: '鎶㈠崟鎻愮ず',
qiangDanContent: '',
qiangDanOrderPlanId: null,
@@ -417,10 +434,11 @@
// this.TourImgList = TourImgList
this.getLogOn()
this.getNoticeList();
+ this.watchScrollFun();
},
onShow() {
this.init();
-
+
},
methods: {
// 璺宠浆鍦板浘
@@ -448,23 +466,45 @@
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'
});
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();
@@ -477,6 +517,16 @@
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')
@@ -486,7 +536,7 @@
this.noticeList = this.noticeList.concat(result)
}else{
//鍚﹀垯灏辨槸绌�
-
+
}
let arr = this.noticeList.sort((a,b)=>{
@@ -502,7 +552,7 @@
}
return item
});
-
+
}
})
@@ -534,7 +584,7 @@
this.qiangDanContent = `宸叉姠${value.tmcCount}鍗曪紝纭畾鎶㈠崟锛焋;
}
} ,500)
-
+
,
// 鎶㈠崟妯℃�佹
qiangDanConfirm() {
@@ -607,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){
@@ -621,12 +671,15 @@
noticConfirm(){
this.noticeModelShow = false;
}
-
+
}
};
</script>
<style lang="scss" scoped>
.warp{
+ .page{
+ z-index: 999;
+ }
width: 100%;
height:100%;
display: flex;
@@ -634,22 +687,24 @@
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{
width: 100%;
- height:calc(100vh - 45px);
+ height:calc(100vh - 73px);
+ z-index: 9;
display: flex;
flex-direction: column;
- overflow-y: auto;
+ // overflow-y: auto;
margin: 0 auto;
- padding-bottom: 100rpx;
- .ingOrderBox{
- width: 94%;
- height: 30%;
- transform: translateY(20%);
- }
+ background-color: unset;
+ // padding-bottom: 100rpx;
+
+ .ingOrderDiv{
+ width: 100%;
+ min-height: 630rpx;
+ margin: 0 auto;
+ }
.ingOrder{
width: 94%;
height: 380rpx;
@@ -670,7 +725,7 @@
display: flex;
width: 150rpx;
}
-
+
.firstLine{
flex: 0 1 60%;
width: 92%;
@@ -726,9 +781,9 @@
border-right: 2px dotted #303030;
transform: translateX(15rpx);
}
-
+
}
-
+
}
.centerTitle{
display: flex;
@@ -749,7 +804,7 @@
display: flex;
justify-content: space-between;
.twoleft{
- width: 325rpx;
+
display: flex;
justify-content: space-around;
align-items: center;
@@ -766,7 +821,6 @@
}
}
.twoRight{
- width: 210rpx;
display: flex;
justify-content: space-around;
}
@@ -795,6 +849,7 @@
height: 270rpx;
margin: 0 auto;
margin-top: 30rpx;
+ margin-bottom: 30rpx;
.grid-text{
font-size: 28rpx;
font-family: Microsoft YaHei;
@@ -865,9 +920,9 @@
border-right: 2px dotted #303030;
transform: translateX(15rpx);
}
-
+
}
-
+
}
.centerTitle{
display: flex;
@@ -889,7 +944,7 @@
display: flex;
justify-content: space-between;
.twoleft{
- width: 200rpx;
+
display: flex;
justify-content: space-around;
align-items: center;
@@ -931,7 +986,7 @@
font-family: Microsoft YaHei;
font-weight: 300;
margin-right: 20rpx;
-
+
.qiangdanBtn{
width: 230rpx;
height:60rpx;
@@ -1012,9 +1067,9 @@
border-right: 2px dotted #303030;
transform: translateX(15rpx);
}
-
+
}
-
+
}
.centerTitle{
display: flex;
@@ -1036,7 +1091,7 @@
display: flex;
justify-content: space-between;
.twoleft{
- width: 200rpx;
+
display: flex;
justify-content: space-around;
align-items: center;
@@ -1045,6 +1100,10 @@
font-family: Microsoft YaHei;
font-weight: 300;
color: #515151;
+ }
+ span{
+ font-size: 28rpx;
+ margin-left: 10rpx;
}
}
.twoRight{
@@ -1125,15 +1184,38 @@
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;
+ width: 92%;
+ margin: 10rpx auto;
-
-</style>
\ No newline at end of file
+}
+.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>
--
Gitblit v1.9.1