diff --git a/pages/index/index.vue b/pages/index/index.vue index 7fa9aee..b8ed931 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -17,18 +17,28 @@ - + - - - - - {{ cleanedText() }} - {{ cleanedText() }} - + + + + + {{ cleanedText() }} + {{ cleanedText() }} + + + + + + + + + 您有正在骑行中的订单..... - + @@ -404,7 +414,7 @@ - + @@ -998,7 +1008,11 @@ specificDeviceMarkerId: null, nearbyMarkers: [], - duration:0 + duration: 0, + showordertxt: true, + orderwidth: 688, + + isCollapsed: false } }, watch: { @@ -1007,11 +1021,11 @@ // console.log('userId 发生变化', newValue, oldValue); this.getisInOrder() }, - cleanedText() { - this.$nextTick(() => { - this.initScroll(); - }); - } + cleanedText() { + this.$nextTick(() => { + this.initScroll(); + }); + } }, @@ -1251,7 +1265,41 @@ }, }, methods: { - + toggleOrderTips() { + this.isCollapsed = !this.isCollapsed; + }, + toggleTips() { + if (this.showordertxt) { + // 当内容显示时,缩小动画 + this.animateWidth(192); // 缩小到 192 + } else { + // 当内容隐藏时,扩展动画 + this.animateWidth(686); // 扩展到 686 + } + this.showordertxt = !this.showordertxt; // 切换显示状态 + }, + animateWidth(targetWidth) { + const startWidth = this.orderwidth; + const startTime = Date.now(); + const duration = 1500; // 动画时长 1.5s + + const animate = () => { + const currentTime = Date.now(); + const elapsedTime = currentTime - startTime; + + if (elapsedTime >= duration) { + this.orderwidth = targetWidth; // 动画结束时设置最终宽度 + return; + } + + const progress = elapsedTime / duration; + this.orderwidth = startWidth + (targetWidth - startWidth) * progress; + + setTimeout(animate, 16); // 使用 setTimeout 实现平滑更新,约每16ms更新一次 + }; + + animate(); + }, cleanedText() { return this.areaInfo.agreement.replace(/<\/?[^>]+(>|$)/g, ""); }, @@ -1985,7 +2033,7 @@ .parkingReturn /** 强制停车点还车 true:开启,false:关闭*/ let isInParkingArea = res.data.isInParkingArea /** 是否在停车区内*/ that.isInParkingArea = res.data - .parkingReturn + .isInParkingArea if (parkingReturn) { // 不可以在停车点外还车 if (isInParkingArea) { @@ -4209,14 +4257,14 @@ // .map(area => this.convertBoundaryToPolyline(area.boundaryStr)); // 更新折线数据 this.areaInfo = res.data - setTimeout(()=>{ - let abb=this.cleanedText() - console.log(abb.length,'cleanedTextcleanedTextcleanedText'); - - // 计算滚动时间,基于文本宽度 - this.duration =abb.length*0.3; // 50 px/s 的速度 - },200) - + setTimeout(() => { + let abb = this.cleanedText() + console.log(abb.length, 'cleanedTextcleanedTextcleanedText'); + + // 计算滚动时间,基于文本宽度 + this.duration = abb.length * 0.3; // 50 px/s 的速度 + }, 200) + this.polyline.push(polylines) console.log(); // console.log(this.areaInfo, 'areaInfoareaInfo'); @@ -5076,7 +5124,7 @@ display: flex; flex-direction: row; - justify-content: center; + // justify-content: center; align-items: center; // align-items: center; // justify-content: center; @@ -5104,6 +5152,88 @@ } + // .order_tips { + // display: flex; + // flex-wrap: nowrap; + // align-items: center; + // margin-right: auto; + // // margin: 0 auto; + // margin-top: 38rpx; + // padding: 28rpx 41rpx; + // width: 688rpx; + // height: 110rpx; + // background: #3D3D3D; + // box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3); + // border-radius: 53rpx 53rpx 53rpx 53rpx; + + // image { + // margin-right: 34rpx; + // width: 44rpx; + // height: 51rpx; + // } + + // .order_tips_txt { + // font-weight: 400; + // font-size: 36rpx; + // color: #FFFFFF; + // } + + // .icon-xiangyou1 { + // margin-left: auto; + // font-size: 36rpx; + // color: #FFFFFF; + // } + // } + .order_tips { + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-top: 38rpx; + margin-left: 34rpx; + padding: 28rpx 41rpx; + width: 688rpx; + height: 110rpx; + background: #3D3D3D; + box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3); + border-radius: 53rpx; + transition: width 0.5s, padding 0.5s; + + &.collapsed { + width: 192rpx; + padding: 28rpx 20rpx; + } + + image { + margin-right: 34rpx; + width: 44rpx; + height: 51rpx; + transition: margin-right 0.5s; + + .order_tips.collapsed & { + margin-right: 10rpx; + } + } + + .order_tips_txt { + font-weight: 400; + font-size: 36rpx; + color: #FFFFFF; + transition: opacity 0.5s, max-width 0.5s; + overflow: hidden; + white-space: nowrap; + + &.collapsed { + opacity: 0; + max-width: 0; + } + } + + .icon-xiangyou1 { + margin-left: auto; + font-size: 36rpx; + color: #FFFFFF; + } + } .swiper_tips { display: flex; flex-wrap: nowrap; @@ -6035,6 +6165,7 @@ width: 686rpx; height: 90rpx; background: #4C97E7; + // background: #64B6A8; border-radius: 54rpx 54rpx 54rpx 54rpx; font-weight: 500; diff --git a/pages_admin/admin_index.vue b/pages_admin/admin_index.vue index 9deff7a..13286fb 100644 --- a/pages_admin/admin_index.vue +++ b/pages_admin/admin_index.vue @@ -34,14 +34,7 @@ - - - 全部设备 - - - {{deviceNum.allNum}} - - + - + + + 投放中 + + + {{deviceNum.inOperation}} + + + 待租 @@ -58,7 +59,7 @@ {{deviceNum.normalNum}} - + 预约中 @@ -66,7 +67,7 @@ {{deviceNum.inAppointmentNum}} - + 骑行中 @@ -74,7 +75,7 @@ {{deviceNum.ridingNum}} - + 临时锁车 @@ -82,15 +83,15 @@ {{deviceNum.temporarilyLockNum}} - + - 下线 + 禁用中 {{deviceNum.disabledNum}} - + 离线 @@ -98,12 +99,20 @@ {{deviceNum.offlineNum}} - - + + 仓库中 - - {{deviceNum.offlineNum}} + + {{deviceNum.inStashNum}} + + + + + 全部设备 + + + {{deviceNum.allNum}}