222

pages/index/onlineBooking.vue

@@ -69,9 +69,49 @@
 				 <image src="../../static/timg/ickno.png" mode="" class="yrTopImg"></image>
 				 <image src="../../static/timg/icon_checked@2x.png" mode="" v-if="false" class="yrTopImg"></image>
 			</view>
+			<view class="itemSm">
+				这是项目说明，这是项目说明，这是项目说明这是项目说明，这是项目说明，这是项目说明这是项目说明，这是项目说明，这是项目说明
+			</view>
+			<view class="Price">
+				 <view class="yuyue-price"> <span class="qianhaospan">￥</span> {{item.Price||'--'}} </view>
+			</view>
 			
 		</view>
 	  </view>
+	  
+	  <view class="bottom-container newbottom-container">
+	    <view class="newyyBox" @click="yuyueDetail">
+	      <view class="yyBleft">
+	        <img src="../../static/timg/icon_qingdan@2x.png" alt="" class="yyBleftimg">
+	      </view>
+	      <view>
+	        <view class="totalPriceBox"><span>预估总额:</span > <span class="totalPrice"><span class="qianhaospan">￥</span>22</span>  </view>
+	        <span class="hejishul">合计数量: 11</span>
+	      </view>
+	  
+	    </view>
+	  
+	    <view href="javascript:;" class=" newbottom-container-button" @click="yuyue">立即预约</view>
+	  </view>
+	  
+	  <view class="yydetailBox" v-show="yydetailShow" @click="yydetailShow=false">
+	    <view class="yyDetailTop" @click.stop="">
+	      <view class="yyDetailTopleft">清单</view>
+	      <view class="yyDetailTopRight">
+	        <view class="yydetalqk" @click="yyqingk">清空</view>
+	        <view class="yydetailx" @click="yydetailShow=false">X</view>
+	      </view>
+	    </view>
+	    <view class="yydetailCont" @click.stop="">
+	       <view class="yydetailContLine" v-for="(item,index) in  5">
+	           <view class="yydlineName">item.ItemName</view>
+	           <view class="yydlineCommnt" v-if="true">item.Comment</view>
+	           <view class="yydPrice">￥item.Price</view>
+	       </view>
+	    </view>
+	  
+	  </view>
+	  
 	</view>
 </template>
 
@@ -82,6 +122,7 @@
 				interval:2000,
 				distance:0.05,
 				leftIndex:0,
+				yydetailShow:false,
 			}
 		},
 		methods: {
@@ -93,6 +134,12 @@
 			},
 			listItemWxInfo(item,index){
 				this.leftIndex=index
+			},
+			yuyueDetail(){
+				this.yydetailShow=true;
+			},
+			yyqingk(){
+				
 			}
 		}
 	}
@@ -214,6 +261,7 @@
 .yuyue-container{
 	display: flex;
 	margin-top: 20rpx;
+	padding-bottom: 120rpx;
 }
 .yuyueLeft{
 	background: #F5F5F5;
@@ -221,8 +269,10 @@
 	
 }
 .yuyueRight{
-	width: 596rpx;
+	width: 548rpx;
 	background: #FFFFFF;
+	padding-left: 24rpx;
+	padding-right: 24rpx;
 }
 .yuyueleftLine{
 	font-size: 26rpx;
@@ -234,4 +284,179 @@
 	background: #FFFFFF;
 	font-weight: 500;
 }
+.yuyueRightTitle{
+	color: #999999;font-size: 26rpx;
+	padding: 30rpx 0;
+}
+.yrTop{
+	display: flex;
+	justify-content: space-between;
+}
+.ItemName{
+	color: #3C3C3C;
+	font-size: 28rpx;
+	width: 480rpx;
+}
+.itemSm{
+	color: #999999;
+	line-height: 33rpx;
+	font-size: 24rpx;
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;				
+	text-overflow: ellipsis;		
+	display: -webkit-box;			
+	-webkit-line-clamp: 2;		
+	line-clamp: 2;					
+	-webkit-box-orient: vertical;	
+	
+}
+.qianhaospan{
+	font-size: 22rpx;
+}
+.yuyue-price{
+	color: #FF3B30;
+	font-size: 32rpx;
+	padding-top: 8rpx;
+	border-bottom: 1px  solid #EEEEEE;
+	padding-bottom: 19rpx;
+}
+.newbottom-container-button{
+	width: 203rpx;
+	height: 74rpx;
+	background: #D53533;
+	border-radius: 37rpx;
+	color: #FEFFFE;
+	font-size: 30rpx;
+	line-height: 74rpx;
+	text-align: center;
+}
+.newbottom-container{
+	display: flex;
+	justify-content: space-between;
+	padding-left: 32rpx !important;
+	width: 696rpx !important;
+    z-index: 66;
+	padding: 23rpx 32rpx !important;
+	height: 76rpx !important;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	background: #FFFFFF;
+	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
+}
+.yuyue-main .newright-item{
+	padding-bottom: 19rpx;
+}
+.yyBleftimg{
+	width: 45rpx;
+	height: 35rpx;
+	margin-top: 2rpx;
+}
+.yyBleft{
+	display: flex;
+	align-items: center;
+	padding-right: 33rpx;
+}
+.newyyBox{
+	display: flex;
+}
+.newyyBox .totalPriceBox{
+	line-height: 45rpx;
+	color: #666666;
+	font-size: 24rpx;
+	font-weight: 500;
+}
+.newyyBox .totalPrice{
+	color: #F03B3B;
+	font-size: 32rpx;
+}
+.hejishul{
+	color: #999999;
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.yydetailBox{
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	height: 100vh;
+	width: 100vw;
+	background: rgba(0, 0, 0, 0.4);
+	z-index: 6;
+}
+.yydetailCont{
+	width: 100vw;
+	height: 50vh;
+	overflow-y: scroll;
+	background: #F0F0F0;
+	position: absolute;
+	left: 0;
+	bottom: 120rpx;
+}
+.yyDetailTop{
+	width: 750rpx;
+	height: 90rpx;
+	background: #FFFFFF;
+	border-radius: 24rpx 24rpx 0px 0px;
+	position: absolute;
+	left: 0;
+	bottom: calc( 50vh + 120rpx);
+	display: flex;
+	justify-content: space-between;
+}
+.yyDetailTopleft{
+	color: #3C3C3C;
+	font-size: 30rpx;
+	line-height: 90rpx;
+	padding-left: 24rpx;
+}
+.yyDetailTopRight{
+	display: flex;
+	padding-right: 24rpx;
+}
+.yydetailx{
+	line-height: 90rpx;
+	color: #999999;
+	font-size: 30rpx;
+}
+.yydetalqk{
+	width: 86rpx;
+	height: 41rpx;
+	background: #EEEEEE;
+	border-radius: 21rpx;
+	text-align: center;
+	line-height: 41rpx;
+	color: #666666;
+	font-size: 24rpx;
+	margin-top: 25rpx;
+	margin-right: 38rpx;
+}
+.yydetailContLine{
+	width: 702rpx;
+	background: #FFFFFF;
+	border-radius: 10rpx;
+	border: 1px solid #DDDDDD;
+	margin-top: 20rpx;
+	margin-left: 24rpx;
+	padding: 24rpx 0px;
+}
+.yydlineName{
+	color: #3C3C3C;
+	font-size: 26rpx;
+	padding-left: 24rpx;
+	
+}
+.yydlineCommnt{
+	color: #999999;
+	font-size: 26rpx;
+	padding-left: 22rpx;
+	line-height: 30rpx;
+	padding-top: 10rpx;
+}
+.yydPrice{
+	padding-left: 22rpx;
+	padding-top: 10rpx;
+	color: #FF3B30;
+	font-size: 32rpx;
+}
 </style>