diff --git a/components/bookBox.vue b/components/bookBox.vue
index 56dbae1..1587146 100644
--- a/components/bookBox.vue
+++ b/components/bookBox.vue
@@ -1,16 +1,57 @@
 <template>
   <view class="book-com">
 	<view class="date-wraper">
-		<view class="date">
+		<view :class="'date'+((key==0)?' active':'')" v-for="(item,key) in data">
 			<view class="top">
-				<view>01</view>
-				<view>周一</view>
+				<view>0{{key+1}}</view>
+				<view class="PfScMedium">周一</view>
 			</view>
-			<view class="bot">
+			<view :class="'bot'+((key%2==0)?' active':'')+(key==0?' PfScMedium':'')">
 				全天出诊
 			</view>
 		</view>
 	</view>
+
+	<view class="datelist">
+		<view :class="'item'+(!timeList?' itemempty':' ')" v-if="bookList">
+			<view class="title PfScMedium">上午预约</view>
+			<view class="inner-wrapper" v-if="timeList">
+				<view class="son PfScMedium">07:30-08:30</view>
+				<view class="son PfScMedium">08:30-09:30 <text>（2）</text></view>
+				<view class="son PfScMedium">07:30-08:30</view>
+				<view :class="'son PfScMedium'+(disable?' disable':'')">08:30-09:30<text>（满）</text></view>
+			</view>
+
+			<view class="empty" v-else>
+				<img :src="cssUrl+'empty.png'" alt="">
+				<view class="info">该时段已约满</view>
+			</view>
+		</view>
+		
+		<view :class="'item'+(!false?' itemempty':' ')" v-if="bookList">
+			<view class="title PfScMedium">上午预约</view>
+			<view class="inner-wrapper" v-if="false">
+				<view class="son PfScMedium">07:30-08:30</view>
+				<view class="son PfScMedium">08:30-09:30 <text>（2）</text></view>
+				<view class="son PfScMedium">07:30-08:30</view>
+				<view :class="'son PfScMedium'+(disable?' disable':'')">08:30-09:30<text>（满）</text></view>
+			</view>
+		
+			<view class="empty" v-else>
+				<img :src="cssUrl+'empty.png'" alt="">
+				<view class="info">该时段已约满</view>
+			</view>
+		</view>
+		
+		<view class="empty-all" v-else>
+			<img :src="cssUrl+'empty.png'" alt="">
+			<view class="info2">
+				<view class="PfScMedium">尚未开放预约</view>
+				<view>请提前48小时前来预约</view>
+			</view>
+		</view>
+	</view>
+
   </view>
 </template>
 
@@ -22,14 +63,196 @@ export default {
   },
   data() {
     return {
+		data:[8,8,8,8,8,8,8,8],
+		cssUrl:this.cssUrl,
+		bookList:true,
+		timeList:true,
+		disable:true
     }
   },
   methods: {
-    
+
   }
 };
 </script>
 
 <style lang="scss" scoped>
-	
+	.book-com{
+		width: 100%;
+		height: auto;
+		overflow: hidden;
+		.date-wraper{
+			width: 714rpx;
+			margin: 24rpx auto 0;
+			height: 218rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
+			overflow-x: auto;
+			display: flex;
+			box-sizing: border-box;
+			padding: 40rpx 24rpx;
+			.date{
+				width: 106rpx;
+				flex-shrink: 0;
+				margin-right: 34rpx;
+				.top{
+					width: 106rpx;
+					height: 98rpx;
+					padding-top: 8rpx !important;
+					box-sizing: border-box;
+					view{
+						color: #333333;
+						font-size: 28rpx;
+						line-height: 36rpx;
+						height: 36rpx;
+						text-align: center;
+					}
+					view:last-of-type{
+						margin-top: 10rpx;
+					}
+				}
+				.bot{
+					height: 32rpx;
+					font-size: 24rpx;
+					color: #999999;
+					line-height: 32rpx;
+					margin-top: 14rpx;
+					&.active{
+						color: #50C382;
+					}
+				}
+				&.active{
+					.top{
+						background: #39D067;
+						border-radius: 8rpx;
+						view{
+							color: white !important;
+						}
+					}
+				}
+			}
+		}
+
+		.datelist{
+			width: 714rpx;
+			margin: 20rpx auto 0;
+			height: auto;
+			background: #F8F8F8;
+			border-radius: 8rpx;
+			box-sizing: border-box;
+			overflow: hidden;
+			.title{
+				height: 50rpx;
+				font-size: 32rpx;
+				color: #000000;
+				line-height: 50rpx;
+				letter-spacing: 2rpx;
+				padding-top: 24rpx;
+				margin-bottom: 24rpx;
+				background: #FFFFFF;
+			}
+			.item{
+				min-height: 318rpx;
+				padding: 0 24rpx 0rpx 24rpx;
+				box-shadow: 0rpx 24rpx 24rpx 0rpx rgba(0,0,0,0.03);
+				background: #FFFFFF;
+				position: relative;
+				margin-bottom: 20rpx;
+				&.itemallempty{
+					background: #FFFFFF !important;
+				}
+				&.itemempty{
+					height: 420rpx !important;
+					padding-bottom: 0rpx !important;
+				}
+				.empty{
+					position: absolute;
+					top: 0;
+					left: 147rpx;
+					width: 420rpx;
+					height: 420rpx;
+					img{
+						width: 420rpx;
+						height: 420rpx;
+						display: block;
+						height: 420rpx;
+						margin: 0 auto;
+					}
+					.info{
+						width: 100%;
+						position: absolute;
+						z-index: 2;
+						bottom: 42rpx;
+						text-align: center;
+						height: 40rpx;
+						font-size: 28rpx;
+						color: #AEB0B8;
+						line-height: 40rpx;
+					}
+				}
+				.inner-wrapper{
+					width: 100%;
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					.son{
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						width: 320rpx;
+						height: 86rpx;
+						background: #DEF3DB;
+						border-radius: 8rpx;
+						border: 2rpx solid #39D067;
+						margin-bottom: 20rpx;
+						color: #50C382;
+						font-size: 30rpx;
+						&.disable{
+							background: #F1F1F1;
+							border: 2rpx solid #CACACA;
+							color: #999999;
+						}
+					}
+				}
+			}
+			img{
+				width: 420rpx;
+				height: 420rpx;
+				display: block;
+				height: 420rpx;
+				margin: 0 auto;
+			}
+			.info2{
+				position: absolute;
+				bottom: 50rpx;
+				width: 100%;
+				view{
+					width: 100%;
+					text-align: center;
+				}
+				view:first-of-type{
+					font-size: 28rpx;
+					height: 40rpx;
+					width: 100%;
+					color: #AEB0B8;
+					line-height: 40rpx;
+				}
+				view:last-of-type{
+					height: 33rpx;
+					font-size: 24rpx;
+					color: #BEC1CA;
+					line-height: 33rpx;
+					margin-top: 14rpx;
+				}
+			}
+
+			.empty-all{
+				height: 454rpx;
+				padding-bottom: 20rpx;
+				background: #FFFFFF;
+				position: relative;
+			}
+		}
+	}
+
 </style>
diff --git a/pages/prebook/prebook.vue b/pages/prebook/prebook.vue
index d60fd5e..604e691 100644
--- a/pages/prebook/prebook.vue
+++ b/pages/prebook/prebook.vue
@@ -1,8 +1,8 @@
 <template>
 	<view class="page-prebook">
-		<view class="title">
+		<view class="title flex">
 			<img :src="cssUrl+'ten.svg'">
-			广安门中医医院西单门诊部
+			广安门中医医院西单门诊部 针灸科
 		</view>
 		<book/>
 	</view>
@@ -30,6 +30,26 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	.page-prebook{
+		width: 100%;
+		height: 100vh;
+		overflow-y: auto;
+		background: #F8F8F8;
+		.title{
+			margin-top: 24rpx;
+			align-items: center;
+			width: 100%;
+			box-sizing: border-box;
+			padding: 0 41rpx;
+			line-height: 36rpx;
+			font-size: 30rpx;
+			color: #949699;
+			img{
+				width: 26rpx;
+				height: 26rpx;
+				margin-right: 15rpx;
+			}
+		}
+	}
 </style>
diff --git a/static/images/frontend/empty.png b/static/images/frontend/empty.png
new file mode 100644
index 0000000..29238dc
Binary files /dev/null and b/static/images/frontend/empty.png differ