diff --git a/src/pages.json b/src/pages.json
index 9e3fbab..0a838d9 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -12,7 +12,8 @@
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"disableScroll": true
 			}
 
 		},
diff --git a/src/pages/IMB/IMB.vue b/src/pages/IMB/IMB.vue
index 4de20ac..e92d1eb 100644
--- a/src/pages/IMB/IMB.vue
+++ b/src/pages/IMB/IMB.vue
@@ -1,82 +1,464 @@
 <template>
 	<view class="container">
-		<view class="imb-header" :style="{'paddingTop':menuButtonTop?menuButtonTop+'rpx':0}">
+		<view class="imb-header" :style="{paddingTop:menuButtonTop+'rpx'}">
 			<view class="imb-car-info">
-				<view class="imb-car-info-left">
-					<image src="../../static/mine/avater.png" mode="aspectFit" class="iamge-logo"></image>
-					<view class="imb-car-info-left-text">
-						<text>欢迎来到爱摩保</text>
-						<text style="color: rgba(43,43,53,0.6);font-size: 24rpx;">登录/注册享受更多优质服务</text>
+				<view class="car-info-item">
+					<view class="car-info-item-text">
+						<text>虚拟体验车辆</text>
+					</view>
+					<image src="../../static/common/home_che_icon_more.png" mode="aspectFit" class="more-img">
+					</image>
+				</view>
+			</view>
+		</view>
+		<view class="imb-map">
+			<map name="amap" :scale="18" :longitude="carPosition.longitude" :latitude="carPosition.latitude" class="map"
+				:markers="maker" :enable-indoorMap="true"></map>
+			<view class="menu">
+				<view class="carFind" @click="openPopup($refs.popup)">
+					<image src="../../static/imb/carFind.png" mode="aspectFit" class="image"></image>
+					<text>寻车</text>
+				</view>
+				<view class="share">
+					<image src="../../static/imb/share.png" mode="aspectFit" class="image"></image>
+					<text>分享</text>
+				</view>
+			</view>
+		</view>
+		<wwBottomDrawer :transitionTime="0.3" :proportionShow='0.5' :dragHandleHeight="20" :dragLength="50">
+			<slot>
+				<view class="Panel">
+					<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">
+								<text>摩旅推荐</text>
+							</view>
+							<view class="main-title-right" @click="goBack('/pages/circle/views/eventsGather/index',1)">
+								<text>更多</text>
+								<uni-icons type="right" size="12"></uni-icons>
+							</view>
+						</view>
+					</view>
+					<view class="recommend-list">
+						<view class="recommend-list-item" v-for="(item,index) in recommend" :key="index">
+							<image
+								src="https://tse1-mm.cn.bing.net/th/id/OIP-C.AomAEAxJDq3dzvj4XxazTgHaE8?w=289&h=194&c=7&r=0&o=5&pid=1.7"
+								mode="scaleToFill" class="image"></image>
+							<view class="item-box">
+								<view class="item-text">
+									<text>团线招募</text>
+									<text>10月17日发团昆明大理香格里拉ehr</text>
+								</view>
+								<view class="item-date">
+									<text>2023/09/22 10:00:00</text>
+								</view>
+							</view>
+							<view class="item-type">
+								摩旅
+							</view>
+						</view>
+					</view>
+					<view>
+						<view class="main-title">
+							<view class="main-title-left">
+								<text>安驾推荐</text>
+							</view>
+							<view class="main-title-right">
+								<text>更多</text>
+								<uni-icons type="right" size="12"></uni-icons>
+							</view>
+						</view>
+					</view>
+					<view class="recommend-list">
+						<view class="recommend-list-item" v-for="(item,index) in recommend" :key="index">
+							<image
+								src="https://tse1-mm.cn.bing.net/th/id/OIP-C.AomAEAxJDq3dzvj4XxazTgHaE8?w=289&h=194&c=7&r=0&o=5&pid=1.7"
+								mode="scaleToFill" class="image"></image>
+							<view class="item-box">
+								<view class="item-text">
+									<text>团线招募 </text>
+									<text>10月17日发团昆明大理香格里拉</text>
+								</view>
+								<view class="item-date">
+									<text>2023/09/22 10:00:00</text>
+								</view>
+							</view>
+							<view class="item-type" :style="{backgroundColor:'#658CFF'}">
+								安驾
+							</view>
+						</view>
 					</view>
 				</view>
-				<view class="imb-car-info-right">
-					<view class="imb-car-info-right-text">
-						<text>注册/登录</text>
+			</slot>
+		</wwBottomDrawer>
+		<!-- vip弹窗 -->
+		<uni-popup ref="popup">
+			<view class="vip-popup">
+				<view class="popup-title">
+					<h4 class="title">开通VIP提示</h4>
+					<text class="text">该功能为爱摩保VIP用户专享 您可以开通VIP或虚拟体验该功能</text>
+				</view>
+				<view class="vip-menu">
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip1.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip2.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip3.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip4.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip5.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip6.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip7.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+					<view class="vip-menu-item">
+						<image src="../../static/imb/vip8.png" mode="scaleToFill" class="menu-img"></image>
+						<text>盗抢保障</text>
+					</view>
+				</view>
+				<view class="vip-button">
+					<view class="vip-button-left">
+						<text>虚拟体验</text>
+					</view>
+					<view class="vip-button-right">
+						<text>开通VIP</text>
 					</view>
 				</view>
 			</view>
-
-		</view>
-		<view class="imb-map">
-			<map name="amap"></map>
-		</view>
+		</uni-popup>
 	</view>
 </template>
 
 <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 { userData } from "./hook/userData"
 	// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+	const { openPopup, carPosition, maker } = userData()
 	let menuButtonTop = ref(0)
+	const recommend = ref([{}, {}, {}, {}])
 	// #ifdef MP-WEIXIN
 	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-	menuButtonTop.value = rpxTopx(menuButtonInfo.top) + rpxTopx(menuButtonInfo.height)
+	menuButtonTop.value = rpxTopx(menuButtonInfo.top)
 	// #endif
 </script>
-
+<style>
+	page {
+		height: 100%;
+		background-color: antiquewhite;
+	}
+</style>
 <style lang="scss" scoped>
 	.container {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+
 		.imb-header {
-			background-image: url(../../../src/static/common/top-bg.png);
-			// height: 240rpx;
-			background-size: 100% 106%;
+			background: url(https://rzyx-tycm.bj.bcebos.com/moto/bg08.png);
+			// height: 216rpx;
+			background-size: 100% 100%;
 			background-repeat: no-repeat;
 
 			.imb-car-info {
 				display: flex;
-				padding: 24rpx;
+				padding: 0 36rpx 36rpx;
 				justify-content: space-between;
 
-				.imb-car-info-left {
+				.car-info-item {
 					display: flex;
+					align-items: flex-end;
 
-					.imb-car-info-left-text {
-						display: flex;
-						flex-direction: column;
-						color: #08080D;
+					.car-info-item-text {
+						color: #fff;
+						font-size: 44rpx;
+						margin-right: 12rpx;
 					}
 
-					.iamge-logo {
-						width: 96rpx;
-						height: 112rpx;
-						padding-right: 6rpx;
+					.more-img {
+						height: 20rpx;
+						width: 20rpx;
 					}
 				}
 
-				.imb-car-info-right {
-					.imb-car-info-right-text {
-						width: 176rpx;
-						height: 64rpx;
-						border-radius: 8rpx;
-						border: 1rpx solid;
-						line-height: 64rpx;
+			}
+		}
+
+		.imb-map {
+			height: 46%;
+			// flex: 1;
+			width: 100%;
+			position: relative;
+
+			map {
+				width: 100%;
+				height: 100%;
+			}
+
+			.menu {
+				position: absolute;
+				bottom: 50rpx;
+				left: 24rpx;
+				background-color: #fff;
+				box-shadow: 0rpx 6rpx 40rpx 0rpx rgba(0, 0, 0, 0.13);
+				font-size: 20rpx;
+				padding: 10rpx 16rpx;
+
+				.carFind,
+				.share {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.share {
+					margin-top: 22rpx;
+				}
+
+				.image {
+					width: 44rpx;
+					height: 44rpx;
+				}
+			}
+		}
+
+		.Panel {
+			width: 100%;
+			// height: 80vh;
+			max-height: 80vh;
+			padding: 10rpx 24rpx;
+			box-sizing: border-box;
+			overflow: auto;
+			overscroll-behavior: contain;
+
+			.Panel-feature {
+				display: flex;
+				width: 100%;
+
+				.feature-1,
+				.feature-2 {
+					height: 252rpx;
+					width: 100%;
+					z-index: 1;
+				}
+
+				.feature-2 {
+					margin-left: -44rpx;
+					z-index: 0;
+				}
+			}
+
+			.main-title {
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+				align-items: center;
+				padding: 25rpx 0;
+
+				.main-title-left {
+					position: relative;
+					font-weight: 600;
+
+					&::before {
+						content: '';
+						background-image: url(../../../static/circle/icon-title.png);
+						display: inline-block;
+						width: 34rpx;
+						height: 32rpx;
+						position: absolute;
+						top: -6rpx;
+						left: -12rpx;
+					}
+				}
+
+				.main-title-right {
+					font-size: 24rpx;
+					color: #86898C;
+					display: flex;
+					align-items: center;
+				}
+			}
+
+
+
+			.recommend-list {
+
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+
+
+				.recommend-list-item {
+					width: 48.5%;
+					display: flex;
+					flex-direction: column;
+					border-radius: 16rpx 16rpx 16rpx 16rpx;
+					background-color: #fff;
+					overflow: hidden;
+					position: relative;
+					margin-bottom: 20rpx;
+
+					.image {
+						width: 100%;
+						height: 218rpx;
+					}
+
+					.item-box {
+						padding: 20rpx 24rpx;
+
+						.item-text {
+							color: #252931;
+							font-weight: 600;
+							font-size: 28rpx;
+							user-select: text;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							overflow: hidden;
+							-webkit-line-clamp: 2;
+							text-overflow: ellipsis;
+						}
+
+						.item-date {
+							color: #86898C;
+							font-size: 24rpx;
+							padding-top: 16rpx;
+						}
+					}
+
+					.item-type {
+						background-color: #4ED17F;
+						color: #fff;
+						width: 68rpx;
+						height: 36rpx;
+						font-size: 22rpx;
+						padding: 2rpx;
+						border-radius: 0 0 0 16rpx;
 						text-align: center;
-						color: #20519C;
-						font-size: 28rpx;
-						border-image: linear-gradient(90deg, rgba(30, 80, 153, 1), rgba(60, 109, 198, 1)) 1 1;
+						line-height: 36rpx;
+						position: absolute;
+						top: 0;
+						right: 0;
 					}
 				}
 			}
 		}
+
+
+	}
+
+	.vip-popup {
+		width: 100%;
+		background: #FFFBF6;
+		border-radius: 48rpx 48rpx 48rpx 48rpx;
+		overflow: hidden;
+
+		.popup-title {
+			width: 100%;
+			height: 192rpx;
+			background: linear-gradient(180deg, #FFF4E2 0%, #FFF5E4 100%);
+			background-size: 100% 100%;
+			text-align: center;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding: 0 108rpx;
+			box-sizing: border-box;
+
+			color: #333333;
+
+			.title {
+				margin-bottom: 12rpx;
+				font-size: 40rpx;
+				font-weight: 550;
+			}
+
+			.text {
+				font-size: 24rpx;
+			}
+		}
+
+		.vip-menu {
+			display: flex;
+			justify-content: flex-start;
+			flex-wrap: wrap;
+			padding: 28rpx;
+
+			.vip-menu-item {
+				display: flex;
+				flex-direction: column;
+				width: calc(100%/ 4);
+				// margin-right: 20rpx;
+				align-items: center;
+				font-size: 26rpx;
+				margin: 18rpx 0;
+
+				.menu-img {
+					width: 80rpx;
+					height: 80rpx;
+					margin-bottom: 10rpx;
+				}
+			}
+
+			.vip-menu-item:nth-of-type(4n+0) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.vip-button {
+		display: flex;
+		padding: 32rpx;
+		width: 100%;
+		box-sizing: border-box;
+		justify-content: space-between;
+
+		.vip-button-left,
+		.vip-button-right {
+			padding: 26rpx 54rpx;
+			width: 48%;
+			border-radius: 48rpx 48rpx 48rpx 48rpx;
+			text-align: center;
+			box-sizing: border-box;
+		}
+
+		.vip-button-left {
+			border: 2rpx solid #4ED17F;
+			color: #4ED17F;
+			// margin-right: 24rpx;
+		}
+
+		.vip-button-right {
+			background-color: #3E3E3E;
+			color: #FFD9B6;
+		}
+	}
+
+	::v-deep .uni-popup__wrapper {
+		width: 80%;
 	}
 </style>
\ No newline at end of file
diff --git a/src/pages/IMB/hook/userData.ts b/src/pages/IMB/hook/userData.ts
new file mode 100644
index 0000000..9d1cd1c
--- /dev/null
+++ b/src/pages/IMB/hook/userData.ts
@@ -0,0 +1,26 @@
+import { ref, onMounted, shallowRef, watchEffect, watch } from 'vue';
+
+
+export function userData() {
+	const popup = ref(null)
+	const carPosition = ref({
+		longitude: 116.307503,
+		latitude: 39.984104
+	})
+	const maker = ref([{
+		id: 0,
+		longitude: 116.307503,
+		latitude: 39.984104,
+		iconPath: 'https://rzyx-tycm.bj.bcebos.com/moto/map_pic.png',
+		width: 122,
+		height: 122
+	}])
+	function openPopup(el : any) {
+		el.open('center')
+	}
+	return {
+		openPopup,
+		carPosition,
+		maker
+	}
+}
\ No newline at end of file
diff --git a/src/pages/circle/components/discover.vue b/src/pages/circle/components/discover.vue
index 2e0e3b1..21ee42c 100644
--- a/src/pages/circle/components/discover.vue
+++ b/src/pages/circle/components/discover.vue
@@ -10,7 +10,7 @@
 			<image src="../../../static/circle/icon_bar05.png" mode="aspectFit" class="bar06"></image>
 		</view>
 		<scroll-view scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
-			refresher-background="#F8F8FA" @refresherrestore="refresherrestore">
+			refresher-background="#F8F8FA">
 			<view class="hotTopic">
 				<view class="topicList">
 					<view class="topicList-item">
@@ -119,7 +119,8 @@
 	const {
 		handPreviewImage,
 		eventsItem,
-		goBack
+		goBack,
+		selectNav
 	} = userData()
 	interface Props {
 		resource : string[]
diff --git a/src/static/common/giveGifts.png b/src/static/common/giveGifts.png
deleted file mode 100644
index 0534256..0000000
Binary files a/src/static/common/giveGifts.png and /dev/null differ
diff --git a/src/static/common/home_che_icon_more.png b/src/static/common/home_che_icon_more.png
new file mode 100644
index 0000000..5c20fd0
Binary files /dev/null and b/src/static/common/home_che_icon_more.png differ
diff --git a/src/static/common/home_top_pic.png b/src/static/common/home_top_pic.png
new file mode 100644
index 0000000..c7b1b2b
Binary files /dev/null and b/src/static/common/home_top_pic.png differ
diff --git a/src/static/common/icon_tool_09.png b/src/static/common/icon_tool_09.png
new file mode 100644
index 0000000..0a1c1c0
Binary files /dev/null and b/src/static/common/icon_tool_09.png differ
diff --git a/src/static/common/review.png b/src/static/common/review.png
deleted file mode 100644
index 42ac5c2..0000000
Binary files a/src/static/common/review.png and /dev/null differ
diff --git a/src/static/imb/carFind.png b/src/static/imb/carFind.png
new file mode 100644
index 0000000..45ca23b
Binary files /dev/null and b/src/static/imb/carFind.png differ
diff --git a/src/static/imb/share.png b/src/static/imb/share.png
new file mode 100644
index 0000000..f04c58d
Binary files /dev/null and b/src/static/imb/share.png differ
diff --git a/src/static/imb/vip-popup-bg.png b/src/static/imb/vip-popup-bg.png
new file mode 100644
index 0000000..961c44e
Binary files /dev/null and b/src/static/imb/vip-popup-bg.png differ
diff --git a/src/static/imb/vip1.png b/src/static/imb/vip1.png
new file mode 100644
index 0000000..3e49972
Binary files /dev/null and b/src/static/imb/vip1.png differ
diff --git a/src/static/imb/vip2.png b/src/static/imb/vip2.png
new file mode 100644
index 0000000..dab4b91
Binary files /dev/null and b/src/static/imb/vip2.png differ
diff --git a/src/static/imb/vip3.png b/src/static/imb/vip3.png
new file mode 100644
index 0000000..d338051
Binary files /dev/null and b/src/static/imb/vip3.png differ
diff --git a/src/static/imb/vip4.png b/src/static/imb/vip4.png
new file mode 100644
index 0000000..8a6b49d
Binary files /dev/null and b/src/static/imb/vip4.png differ
diff --git a/src/static/imb/vip5.png b/src/static/imb/vip5.png
new file mode 100644
index 0000000..3438888
Binary files /dev/null and b/src/static/imb/vip5.png differ
diff --git a/src/static/imb/vip6.png b/src/static/imb/vip6.png
new file mode 100644
index 0000000..22bd590
Binary files /dev/null and b/src/static/imb/vip6.png differ
diff --git a/src/static/imb/vip7.png b/src/static/imb/vip7.png
new file mode 100644
index 0000000..a56310a
Binary files /dev/null and b/src/static/imb/vip7.png differ
diff --git a/src/static/imb/vip8.png b/src/static/imb/vip8.png
new file mode 100644
index 0000000..217a8b7
Binary files /dev/null and b/src/static/imb/vip8.png differ
diff --git a/src/uni_modules/ww-bottom-drawer/changelog.md b/src/uni_modules/ww-bottom-drawer/changelog.md
new file mode 100644
index 0000000..b61a960
--- /dev/null
+++ b/src/uni_modules/ww-bottom-drawer/changelog.md
@@ -0,0 +1,26 @@
+## 1.7.1（2022-07-01）
+新加个属性 ：proportionMiniShow 不能再下滑的内容比例，默认是0，使用见demo，满足用户反馈需求
+## 1.7（2022-05-27）
+用户反馈nvue的动画时间无效问题修复
+## 1.6.3（2022-05-25）
+修订版本：预设高度的时候提前，上个反馈中不同环境渲染速度不同，速度逻辑优化。提供menuHeight 单位px  见：demo ，主要是针对用户的闪的优化提供新的字段
+## 1.6.2（2022-05-24）
+提供外层解决初始收缩时的看到展-收的过程。修订版本：1.开放initTop方法，组件300ms调用，外层可以根据自己的渲染速度提前调用；2.或者给菜单根节点固定高度，外层不用处理，见demo。 用户反馈的需求，建议用第2种，自己根据内容计算好菜单高度预设下。见demo的app-expand.vue
+## 1.6.1（2022-05-18）
+专门针对支付宝小程序：添加canDrag，其他的小程序使用同样有效果。底部抽屉是否能够滑动，默认true 。见demo的使用
+## 1.6（2022-05-18）
+支付宝支持。之前提供的app-expand.vue页面的长抽屉的滑动思路，我用新版的hbuilder测试了下发现scroll-y="false" scroll-y="true"都是无效的，在等hbuilder官方回应。针对菜单里面有scroll-view的我得到通知后回复
+## 1.5（2022-05-18）
+兼容支付宝小程序的map滑动不顺畅的问题
+## 1.4（2022-05-16）
+1.transitionShow换成transitionTime，完成剩下的展开收缩时间，单位s
+2.dragLength 手指滑动，收缩或者展开需要滑动的最短距离px
+3.isExpand 外部可以修改值对菜单收缩或者展开
+## 1.3（2022-05-13）
+根据使用反馈情况，添加收缩展开菜单的时间属性 ： transitionShow。见demo 
+## 1.2（2022-05-09）
+1.ww-bottom-drawerapp添加isExpand的属性，可以控制初始的时候不收缩。
+2.针对反馈的内容过长怎么使用菜单，demo提供个app-expand.vue可以参考思路。
+## 1.1（2022-04-19）
+1.新增一个app插件，专门给原生app使用，解决uni的原生map遮挡。见demo
+2.vue开发的话可以使用原始组件，通用。
diff --git a/src/uni_modules/ww-bottom-drawer/components/ww-bottom-drawer/ww-bottom-drawer.vue b/src/uni_modules/ww-bottom-drawer/components/ww-bottom-drawer/ww-bottom-drawer.vue
new file mode 100644
index 0000000..e63f4f2
--- /dev/null
+++ b/src/uni_modules/ww-bottom-drawer/components/ww-bottom-drawer/ww-bottom-drawer.vue
@@ -0,0 +1,162 @@
+<template>
+	<view class="drawer-content">
+		<view class="drawer-content-drag" :style="transition + 'top:' + (dragTop + 'px')" @touchstart="drag_start"
+			@touchmove.stop="drag_move" @touchend="drag_end" @touchcancel="drag_end" :data-top="dragTop">
+			<view class="drag-handle" :style="
+	            'height:' +
+	            dragHandleHeight +
+	            'px;'
+	          ">
+				<view class="drag-handle-line"></view>
+			</view>
+			<view id="drag-content" class="drag-content">
+				<slot>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'ww-bottom-drawer',
+		props: {
+			dragHandleHeight: {
+				type: Number,
+				default: 20,
+			},
+			proportionShow: { //显示比例，宽度的比例
+				type: Number,
+				default: 0.3,
+			},
+
+		},
+		watch: {
+			proportionShow() {
+				const {
+					windowWidth,
+					windowHeight
+				} = uni.getSystemInfoSync();
+				this.windowWidth = windowWidth
+				this.windowHeight = windowHeight
+				this.foldHeight = this.windowWidth * this.proportionShow
+			}
+		},
+		data() {
+			return {
+				startY: 0,
+				foldHeight: 0, //折叠的高度 通过proportionShow比例计算
+				dragTop: -this.dragHandleHeight,
+				top: 0,
+				transition: 'transition: top 0.1s;',
+				windowHeight: '',
+				windowWidth: '',
+				toTop: true,
+
+			}
+		},
+		mounted() {
+			const {
+				windowWidth,
+				windowHeight
+			} = uni.getSystemInfoSync();
+			this.windowWidth = windowWidth
+			this.windowHeight = windowHeight
+			this.foldHeight = this.windowWidth * this.proportionShow
+			this.dragTop = -this.dragHandleHeight - this.foldHeight
+		},
+		methods: {
+			drag_start(event) {
+				this.transition = "";
+				this.top = event.currentTarget.dataset.top;
+				this.startY = event.touches[0].clientY;
+			},
+			drag_move(event) {
+				// console.log(event.currentTarget)
+				var len = event.touches[0].clientY - this.startY;
+				var temp = this.top + len;
+				if (temp >= this.dragHandleHeight) {
+					temp = this.dragHandleHeight;
+				}
+				this.toTop = len < 0;
+
+				const query = uni.createSelectorQuery().in(this);
+				query
+					.select("#drag-content")
+					.boundingClientRect((data) => {
+						if (temp <= 0 - data.height - this.dragHandleHeight) {
+							temp = 0 - data.height - this.dragHandleHeight;
+						}
+						if (temp <= 0 - this.windowHeight * 0.8 - this.dragHandleHeight) {
+							temp = 0 - this.windowHeight * 0.8 - this.dragHandleHeight;
+						}
+						this.dragTop = temp;
+					})
+					.exec();
+				return false;
+			},
+			drag_end(event) {
+				this.transition = "transition: top 0.2s;";
+				const query = uni.createSelectorQuery().in(this);
+				query
+					.select("#drag-content")
+					.boundingClientRect((data) => {
+						if (this.toTop) {
+							this.dragTop = 0 - data.height - 20;
+						} else {
+							this.dragTop = -this.dragHandleHeight - this.foldHeight;
+						}
+					})
+					.exec();
+				return false;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.drawer-content {
+		bottom: 0;
+		left: 0;
+		position: fixed;
+		width: 100vw;
+	}
+
+	.drag-handle {
+		height: 20px;
+		width: 100vw;
+		background-color: transparent;
+		border-radius: 15px 15px 0 0;
+		color: #eee;
+		font-weight: bold;
+		font-size: 20px;
+		line-height: 1px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.drag-handle-line {
+			width: 60rpx;
+			height: 8rpx;
+			margin-top: 10rpx;
+			background: #dfe5f1;
+			border-radius: 4rpx;
+		}
+	}
+
+	.drawer-content-drag {
+		position: absolute;
+		height: 60vh;
+		max-height: 80vh;
+		width: 100vw;
+		left: 0;
+		background-image: url(https://rzyx-tycm.bj.bcebos.com/moto/bg05.png);
+		background-size: 100% 100%;
+	}
+
+	.drag-content {
+		background-color: transparent;
+		height: auto;
+		max-height: 80vh;
+	}
+</style>
\ No newline at end of file
diff --git a/src/uni_modules/ww-bottom-drawer/components/ww-bottom-drawerapp/ww-bottom-drawerapp.vue b/src/uni_modules/ww-bottom-drawer/components/ww-bottom-drawerapp/ww-bottom-drawerapp.vue
new file mode 100644
index 0000000..1f52ac1
--- /dev/null
+++ b/src/uni_modules/ww-bottom-drawer/components/ww-bottom-drawerapp/ww-bottom-drawerapp.vue
@@ -0,0 +1,453 @@
+<template>
+	<view>
+		<!-- #ifdef MP-ALIPAY -->
+		<view class="drawer-content" @touchstart.stop="drag_start" @touchmove.stop="drag_move" @touchend.stop="drag_end"
+			@touchcancel="drag_end" :data-top="dragTop" :style="transition + 'bottom:' + (dragTop + 'px')">
+			<view id="drag-content" class="drag-content" ref="drag-content">
+				<view class="drag-handle drag-handle-ali" :style="
+        		    'height:' +
+        		    dragHandleHeight +
+        		    'px;'
+        		  ">
+					<view class="drag-handle-line"></view>
+				</view>
+				<slot>
+
+				</slot>
+			</view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-ALIPAY -->
+		<view class="drawer-content" @touchstart="drag_start" @touchmove.stop="drag_move" @touchend="drag_end"
+			@touchcancel="drag_end" :data-top="dragTop"
+			:style="transition + 'bottom:' + (dragTop + 'px;') + styleCss()">
+			<view id="drag-content" class="drag-content" ref="drag-content">
+				<view class="drag-handle" :style="
+				    'height:' +
+				    dragHandleHeight +
+				    'px;'
+				  ">
+					<view class="drag-handle-line"></view>
+				</view>
+				<slot>
+
+				</slot>
+			</view>
+		</view>
+		<!-- #endif -->
+
+
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+	export default {
+		name: 'ww-bottom-drawerapp',
+		props: {
+			dragHandleHeight: {
+				type: Number,
+				default: 20,
+			},
+			proportionShow: { //显示比例，内容的比例
+				type: Number,
+				default: 0.5,
+			},
+			proportionMiniShow: { //拖拽收缩的时候，不能收缩的内容的比例
+				type: Number,
+				default: 0.0,
+			},
+			proChangeWidth: {
+				type: Boolean,
+				default: false,
+			},
+			dragLength: { //收缩和展开的默认距离  50px
+				type: Number,
+				default: 50,
+			},
+			canDrag: { //收缩和展开的默认距离  50px
+				type: Boolean,
+				default: true,
+			},
+			isExpand: { //是否展开
+				type: Boolean,
+				default: false,
+			},
+			transitionTime: { //菜单完成收缩和展开的时间 单位秒
+				type: Number,
+				default: 0.3,
+			},
+			menuHeight: {
+				type: Number,
+				default: 0,
+			}
+		},
+		watch: {
+
+			isExpand(newVal, oldVal) {
+				console.log(this.dragTop)
+				if (newVal != this.isDrawerOpen) {
+					console.log("isExpand" + newVal)
+					this.$nextTick(() => {
+						this.toTop = newVal;
+						this.expand_end()
+					})
+
+				}
+
+			}
+		},
+		data() {
+			return {
+				contentHeight: 0,
+
+				startY: 0,
+				dragTop: 0,
+				dragTopTemp: 0,
+				transition: '',
+				windowHeight: 0,
+				windowWidth: 0,
+				toTop: true,
+				isDrawerOpen: false,
+				timer: null,
+			}
+		},
+		created() {
+			if (this.menuHeight != 0) {
+				//this.dragTop = -Number((1 - this.proportionShow) * (this.menuHeight + this.dragHandleHeight));
+				console.log(this.dragTop)
+			}
+
+		},
+		beforeMount() {
+
+		},
+		unmounted() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+		},
+
+		mounted() {
+			const {
+				windowWidth,
+				windowHeight
+			} = uni.getSystemInfoSync();
+			this.windowWidth = windowWidth
+			this.windowHeight = windowHeight
+
+			if (!this.isExpand) {
+				this.$nextTick(() => {
+					this.initTop() //当菜单高度固定的时候，立即生效，当设置收缩的时候不会看到进入页面张开-收缩
+					setTimeout(() => {
+						this.initTop() //等待菜单高度渲染完成，如果是收缩，会出现张开-收缩
+					}, 300)
+				})
+			}
+
+			this.callExpand(this.isExpand)
+		},
+		methods: {
+			initTop() {
+
+				// #ifndef APP-NVUE
+				const query = uni.createSelectorQuery().in(this);
+				query
+					.select("#drag-content")
+					.boundingClientRect((data) => {
+						this.contentHeight = data.height
+						this.transition = ""
+						this.dragTop = -Number((1 - this.proportionShow) * this.contentHeight);
+						this.callExpand(this.dragTop == 0)
+
+					})
+					.exec();
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['drag-content'], (ret) => {
+					this.contentHeight = ret.size.height
+					this.transition = ""
+					this.dragTop = -Number((1 - this.proportionShow) * this.contentHeight);
+					this.callExpand(this.dragTop == 0)
+					console.log(this.contentHeight)
+
+				})
+				// #endif
+			},
+			handleTap2() {},
+			styleCss() {
+				//发现同样无动画，vue里面有
+				// #ifdef APP-NVUE
+				// if (this.isDrawerOpen) {//展开
+				//                 return "transform: translateY(0px);transition-property: transform;transition-duration: 3s;"
+				// }else{//收缩
+				// 	return "transform: translateY(50%);transition-property: transform;transition-duration: 3s;"
+				// }
+				// #endif
+				return ''
+			},
+			drag_start(event) {
+				console.log(this.canDrag)
+				if (!this.canDrag) {
+					return
+				}
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				this.transition = "";
+				this.dragTopTemp = this.dragTop;
+				// #ifdef APP-NVUE
+				this.startY = event.touches[0].screenY;
+				// #endif
+				// #ifndef APP-NVUE
+				this.startY = event.touches[0].clientY;
+				// #endif
+			},
+			drag_move(event) {
+				if (!this.canDrag) {
+					return
+				}
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['drag-content'], (ret) => {
+
+					var len = (event.touches[0].screenY - this.startY);
+					if (this.isDrawerOpen) { //当展开状态下
+						if (len > 0) { //向下滑动
+							this.toTop = len < this.dragLength;
+						} else {
+							this.toTop = true;
+						}
+					} else {
+						if (len < 0) { //向上滑动
+							this.toTop = Math.abs(len) > this.dragLength;
+						} else {
+							this.toTop = false;
+						}
+					}
+					this.contentHeight = ret.size.height
+					let temp = this.dragTopTemp - len
+					if (temp > 0) {
+						temp = 0
+					} else if (temp < -this.contentHeight + 30) {
+						temp = -this.contentHeight + 30
+					}
+					var temp_ = Number(temp)
+					var ss_ = -Number((1 - this.proportionMiniShow) * this.contentHeight);
+					if (Number(temp_) < ss_) {
+						this.dragTop = ss_
+					} else {
+						this.dragTop = temp_
+					}
+				})
+
+				// #endif
+				// #ifndef APP-NVUE
+				const query = uni.createSelectorQuery().in(this);
+				query
+					.select("#drag-content")
+					.boundingClientRect((data) => {
+						var len = (event.touches[0].clientY - this.startY);
+						//判断展开还是收缩
+						if (this.isDrawerOpen) { //当展开状态下
+							if (len > 0) { //向下滑动
+								this.toTop = len < this.dragLength;
+							} else {
+								this.toTop = true;
+							}
+						} else {
+							if (len < 0) { //向上滑动
+								this.toTop = Math.abs(len) > this.dragLength;
+							} else {
+								this.toTop = false;
+							}
+						}
+						this.contentHeight = data.height
+						let temp = this.dragTopTemp - len
+						if (temp > 0) {
+							temp = 0
+						} else if (temp < -this.contentHeight + 30) {
+							temp = -this.contentHeight + 30
+						}
+						var temp_ = Number(temp)
+						var ss_ = -Number((1 - this.proportionMiniShow) * this.contentHeight);
+						if (Number(temp_) < ss_) {
+							this.dragTop = ss_
+						} else {
+							this.dragTop = temp_
+						}
+
+					})
+					.exec();
+				// #endif
+
+
+				return false;
+			},
+
+			drag_end(event) {
+				if (!this.canDrag) {
+					return
+				}
+				this.expand_end()
+				return false;
+			},
+
+			animationTop(from, to, callback) {
+				if (this.timer) {
+					clearInterval(this.timer);
+				}
+				if (from == to) {
+					this.dragTop = to
+					callback && callback();
+					return
+				}
+				console.log(from + " - " + to)
+				let time = this.transitionTime * 100;
+				// 定义定时器的间隔
+				var interval = 20;
+				// 定义总次数
+				var allCount = time / interval;
+
+				// 定义步长
+				var step = (to - from) / allCount;
+				console.log(from + " - " + to + " step:" + step)
+				// 定义计数器
+				var count = 0;
+
+				let self = this
+				this.timer = setInterval(function() {
+					count++;
+					self.dragTop = from + step * count;
+					console.log(from + " - " + to + " count:" + count + "  dragTop:" + self.dragTop)
+					// 判断是否执行完毕
+					if (count >= allCount) {
+						// 停表
+						clearInterval(self.timer);
+						self.dragTop = to
+						// 回调函数执行
+						callback && callback();
+					}
+				}, interval);
+			},
+			expand_end() {
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['drag-content'], (ret) => {
+					this.transition = `transition: bottom ${this.transitionTime}s;`
+					console.log(ret)
+					if (this.transitionTime <= 0.3) { //nvue的动不生效，自行处理
+						this.contentHeight = ret.size.height
+						if (this.toTop) {
+							this.dragTop = 0
+						} else {
+							this.dragTop = -Number((1 - this.proportionShow) * this.contentHeight);
+						}
+						this.callExpand(this.dragTop == 0)
+					} else {
+						this.transition = ''
+						this.contentHeight = ret.size.height
+						if (this.toTop) {
+							//this.dragTop = 0
+							this.animationTop(this.dragTop, 0, () => {
+								this.callExpand(this.dragTop == 0)
+							})
+						} else {
+							let dragTop_ = -Number((1 - this.proportionShow) * this.contentHeight);
+							this.animationTop(this.dragTop, dragTop_, () => {
+								this.callExpand(this.dragTop == 0)
+							})
+						}
+
+					}
+
+				})
+				// #endif
+				// #ifndef APP-NVUE
+				const query = uni.createSelectorQuery().in(this);
+				query
+					.select("#drag-content")
+					.boundingClientRect((data) => {
+						this.transition = `transition: bottom ${this.transitionTime}s;`
+						this.contentHeight = data.height
+						if (this.toTop) {
+							this.dragTop = 0
+						} else {
+							this.dragTop = -Number((1 - this.proportionShow) * this.contentHeight);
+						}
+						this.callExpand(this.dragTop == 0)
+					})
+					.exec();
+				// #endif
+			},
+			//通知是展开
+			callExpand(expand) {
+
+				this.$emit("callExpand", {
+					value: expand
+				});
+				this.isDrawerOpen = expand
+
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.drawer-content {
+		bottom: 0;
+		left: 0;
+		display: flex;
+		position: fixed;
+		width: 750rpx;
+		background-color: #0A98D5;
+	}
+
+	.drag-handle-ali {
+		background-color: #666;
+	}
+
+	.drag-handle {
+		height: 20px;
+		width: 750rpx;
+		background-color: transparent;
+		border-radius: 15px 15px 0 0;
+		color: #eee;
+		font-weight: bold;
+		font-size: 20px;
+		line-height: 1px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.drag-handle-line {
+			width: 60rpx;
+			height: 8rpx;
+			margin-top: 10rpx;
+			background: #dfe5f1;
+			border-radius: 4rpx;
+		}
+	}
+
+	.drawer-content-drag {
+		display: flex;
+		width: 750rpx;
+		left: 0;
+		position: absolute;
+	}
+
+	.drawer-content-drag1 {
+		display: flex;
+		width: 750rpx;
+		background-color: #000000;
+	}
+
+
+	.drag-content {
+		background-color: #f2f2f2;
+		// padding: 32rpx 24rpx;
+		// box-sizing: border-box;
+		// overflow: auto;
+	}
+</style>
\ No newline at end of file
diff --git a/src/uni_modules/ww-bottom-drawer/package.json b/src/uni_modules/ww-bottom-drawer/package.json
new file mode 100644
index 0000000..16737d2
--- /dev/null
+++ b/src/uni_modules/ww-bottom-drawer/package.json
@@ -0,0 +1,79 @@
+{
+    "id": "ww-bottom-drawer",
+    "name": "底部抽屉",
+    "version": "1.7.1",
+    "description": "地图底部，底部抽屉，自适应",
+    "keywords": [
+        "地图底部，底部抽屉，仿地图底部拉起，一句代码，使用简单"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ],
+        "contact": {
+            "qq": ""
+        },
+        "declaration": {
+            "ads": "无",
+            "data": "插件不采集任何数据",
+            "permissions": "无"
+        },
+        "npmurl": "",
+        "sale": {
+            "regular": {
+                "price": "0.00"
+            },
+            "sourcecode": {
+                "price": "0.00"
+            }
+        }
+    },
+    "displayName": "简洁-可拖动底部抽屉",
+    "repository": "",
+    "engines": {
+        "HBuilderX": "^3.3.0"
+    },
+    "uni_modules": {
+        "platforms": {
+            "cloud": {
+                "tcb": "y",
+                "aliyun": "y"
+            },
+            "client": {
+                "Vue": {
+                    "vue2": "y",
+                    "vue3": "y"
+                },
+                "App": {
+                    "app-vue": "y",
+                    "app-nvue": "y"
+                },
+                "H5-mobile": {
+                    "Safari": "y",
+                    "Android Browser": "y",
+                    "微信浏览器(Android)": "y",
+                    "QQ浏览器(Android)": "y"
+                },
+                "H5-pc": {
+                    "Chrome": "y",
+                    "IE": "y",
+                    "Edge": "y",
+                    "Firefox": "y",
+                    "Safari": "y"
+                },
+                "小程序": {
+                    "微信": "y",
+                    "阿里": "y",
+                    "百度": "y",
+                    "字节跳动": "y",
+                    "QQ": "y"
+                },
+                "快应用": {
+                    "华为": "y",
+                    "联盟": "y"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file