预约挂号页面

components/sliderBox.vue

@@ -0,0 +1,53 @@
+<template>
+	<view class="slider-box-com">
+		<view class="mask" v-show="show"></view>
+		<view :class="'slider-box mybox-leave-to'+(show?' mybox-enter':'')">
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"sliderBox",
+		data() {
+			return {
+				show:false
+			};
+		},
+		methods:{
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.slider-box-com{
+	.mask{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100vh;
+		z-index: 89;
+		background: rgba(0,0,0,0.27);
+	}
+	.slider-box{
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 40rpx 40rpx 0rpx 0rpx;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 899;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	.mybox-leave-to{
+		transition: all .8s ease;
+		transform:translate3d(0,100%,0);
+	}
+	.mybox-enter{
+		transition: all .8s ease;
+	    transform:translate3d(0,0,0) !important;
+	}
+}
+</style>

pages/prebook/prebook.vue

@@ -4,17 +4,19 @@
 			<img :src="cssUrl+'ten.svg'">
 			广安门中医医院西单门诊部 针灸科
 		</view>
-		<book/>
+		<book/>
+		<slider-box></slider-box>
 	</view>
 </template>
 
 <script>
 	import Book from '@/components/bookBox.vue';
+	import SliderBox from '@/components/sliderBox.vue';
 	export default {
 		onLoad(op) {
 			uni.setNavigationBarTitle({
 				title:'李静医生预约就诊'
-			});
+			})
 		},
 		data() {
 			return {
@@ -22,7 +24,8 @@
 			}
 		},
 		components:{
-			Book
+			Book,
+			SliderBox
 		},
 		methods: {