修改首页
CHINAMI-3V5PQ9A\Administrator
parent
18069d0390
commit
2b6d8948e9
|
|
@ -13,7 +13,7 @@
|
|||
</view>
|
||||
<view class="imb-map">
|
||||
<map name="amap" :scale="18" :longitude="carPosition.longitude" :latitude="carPosition.latitude" class="map"
|
||||
:markers="maker" :enable-indoorMap="true"></map>
|
||||
:markers="maker" :enable-indoorMap="true" :enable-scroll="false" :enable-rotate="false"></map>
|
||||
<view class="menu">
|
||||
<view class="carFind" @click="openPopup($refs.popup)">
|
||||
<image src="../../static/imb/carFind.png" mode="aspectFit" class="image"></image>
|
||||
|
|
@ -25,16 +25,45 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<wwBottomDrawer :transitionTime="0.3" :proportionShow='0.5' :dragHandleHeight="20" :dragLength="50">
|
||||
<BottomDrawer :transitionTime="0.3" :proportionShow='0.5' :dragHandleHeight="20" :dragLength="50">
|
||||
<slot>
|
||||
<view class="Panel">
|
||||
<view class="Panel-menu">
|
||||
<view class="union">
|
||||
<text class="text">爱摩保盗抢保障中</text>
|
||||
|
||||
<!-- <image src="https://rzyx-tycm.bj.bcebos.com/moto/union.png" mode="scaleToFill"
|
||||
class="image">
|
||||
</image> -->
|
||||
</view>
|
||||
<text class="MaturityTime">2024.02.12到期</text>
|
||||
<view class="menu-item">
|
||||
<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip1.png" mode="scaleToFill" class="image">
|
||||
</image>
|
||||
<text>轨迹</text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip2.png" mode="scaleToFill" class="image">
|
||||
</image>
|
||||
<text>轨迹</text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip3.png" mode="scaleToFill" class="image">
|
||||
</image>
|
||||
<text>轨迹</text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<image src="https://rzyx-tycm.bj.bcebos.com/moto/vip4.png" mode="scaleToFill" class="image">
|
||||
</image>
|
||||
<text>轨迹</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Panel-feature">
|
||||
<image src="https://rzyx-tycm.bj.bcebos.com/moto/home_pic1.png" mode="scaleToFill"
|
||||
class="feature-1"></image>
|
||||
<image src="https://rzyx-tycm.bj.bcebos.com/moto/home_pic2.png" mode="scaleToFill"
|
||||
class="feature-2"></image>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="main-title">
|
||||
<view class="main-title-left">
|
||||
|
|
@ -97,7 +126,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</wwBottomDrawer>
|
||||
</BottomDrawer>
|
||||
<!-- vip弹窗 -->
|
||||
<uni-popup ref="popup">
|
||||
<view class="vip-popup">
|
||||
|
|
@ -155,7 +184,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { getMenuButton, rpxTopx } from "@/utils/common.js"
|
||||
import { ref } from "vue";
|
||||
import wwBottomDrawer from "@/uni_modules/ww-bottom-drawer/components/ww-bottom-drawerapp/ww-bottom-drawerapp.vue"
|
||||
import BottomDrawer from "./components/bottom-drawer.vue"
|
||||
import { userData } from "./hook/userData"
|
||||
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
const { openPopup, carPosition, maker } = userData()
|
||||
|
|
@ -169,7 +198,7 @@
|
|||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: antiquewhite;
|
||||
/* background-color: antiquewhite; */
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -209,7 +238,7 @@
|
|||
}
|
||||
|
||||
.imb-map {
|
||||
height: 46%;
|
||||
height: 100%;
|
||||
// flex: 1;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -256,6 +285,60 @@
|
|||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
.Panel-menu {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
box-shadow: 0rpx 26rpx 70rpx 0rpx rgba(237, 242, 255, 0.25);
|
||||
position: relative;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #252931;
|
||||
padding: 68rpx 18rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.image {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.union {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 258rpx;
|
||||
height: 74rpx;
|
||||
background-image: url(https://rzyx-tycm.bj.bcebos.com/moto/union.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 8rpx 44rpx 30rpx 22rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
color: #FFD9B6;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.MaturityTime {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 260rpx;
|
||||
font-size: 24rpx;
|
||||
color: #252931;
|
||||
}
|
||||
}
|
||||
|
||||
.Panel-feature {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<view class="drawer-content" :data-top="dragTop" :style="transition + 'top:' + (dragTop + 'px')">
|
||||
<view class="drag-handle" :style="'height:15px;'">
|
||||
<view class="drag-handle-line"></view>
|
||||
</view>
|
||||
<view class="drag-content">
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</view>
|
||||
<view class="touch-view" @touchstart.stop="drag_start" @touchmove.stop="drag_move" @touchend.stop="drag_end"
|
||||
@touchcancel="drag_end"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { log } from 'console';
|
||||
import { ref, getCurrentInstance, defineProps } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const props = defineProps({
|
||||
maxTop: {
|
||||
type: Number,
|
||||
default: 565 // 580
|
||||
},
|
||||
minTop: {
|
||||
type: Number,
|
||||
default: 100
|
||||
}
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const transition = ref('')
|
||||
const dragTop = ref(580)
|
||||
const dragTopTemp = ref(0) // 开始拖动时的top
|
||||
const startY = ref(0)
|
||||
const dragLength = ref(0)
|
||||
const contentHeight = ref(0)
|
||||
const isDrawerOpen = ref(false)
|
||||
const toTop = ref(true)
|
||||
let timer = null;
|
||||
|
||||
|
||||
const initTop = () => {
|
||||
transition.value = ""
|
||||
dragTop.value = props.maxTop;
|
||||
}
|
||||
onLoad((option : any) => {
|
||||
initTop()
|
||||
})
|
||||
|
||||
const drag_start = (event : any) => {
|
||||
console.log(event)
|
||||
|
||||
// console.log("drag_start == ", event.touches[0].clientY)
|
||||
|
||||
// if (timer) {
|
||||
// clearInterval(timer);
|
||||
// }
|
||||
transition.value = "";
|
||||
dragTopTemp.value = dragTop.value;
|
||||
startY.value = event.touches[0].clientY;
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const drag_move = (event : any) => {
|
||||
// console.log("drag_move == ", event.touches[0].clientY)
|
||||
const query = uni.createSelectorQuery().in(proxy);
|
||||
query
|
||||
.select("#drag-content")
|
||||
.boundingClientRect((data : any) => {
|
||||
var len = (event.touches[0].clientY - startY.value);
|
||||
//判断展开还是收缩
|
||||
if (isDrawerOpen.value) { //当展开状态下
|
||||
if (len > 0) { //向下滑动
|
||||
toTop.value = len < dragLength.value;
|
||||
} else {
|
||||
toTop.value = true;
|
||||
}
|
||||
} else {
|
||||
if (len < 0) { //向上滑动
|
||||
toTop.value = Math.abs(len) > dragLength.value;
|
||||
} else {
|
||||
toTop.value = false;
|
||||
}
|
||||
}
|
||||
let temp = dragTopTemp.value + len
|
||||
// console.log("temp === ", temp, len)
|
||||
|
||||
var temp_ = temp
|
||||
if (temp_ < props.minTop) {
|
||||
temp_ = props.minTop
|
||||
}
|
||||
if (temp_ > props.maxTop) {
|
||||
temp_ = props.maxTop
|
||||
}
|
||||
|
||||
dragTop.value = temp_
|
||||
|
||||
// console.log('dragTop.value === ', dragTop.value)
|
||||
})
|
||||
.exec();
|
||||
return false
|
||||
}
|
||||
|
||||
const drag_end = (event : any) => {
|
||||
expand_end()
|
||||
return false;
|
||||
}
|
||||
|
||||
const expand_end = () => {
|
||||
const query = uni.createSelectorQuery().in(proxy);
|
||||
query
|
||||
.select("#drag-content")
|
||||
.boundingClientRect((data) => {
|
||||
transition.value = `transition: top 0.3s;`
|
||||
|
||||
console.log('transition.valu === ', transition.value)
|
||||
|
||||
if (toTop.value) {
|
||||
dragTop.value = props.minTop
|
||||
} else {
|
||||
dragTop.value = props.maxTop
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.drawer-content {
|
||||
// top: 680px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
height: calc(100vh - 100px);
|
||||
z-index: 2;
|
||||
// background-color: white;
|
||||
// overflow: scroll;
|
||||
}
|
||||
|
||||
.touch-view {
|
||||
position: absolute;
|
||||
width: 750rpx;
|
||||
height: 45px;
|
||||
top: -0px;
|
||||
left: 0;
|
||||
// background-color: red;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
@extend .flex-column-stretch;
|
||||
width: 750rpx;
|
||||
background-color: #fff;
|
||||
padding: 22rpx 0;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue