用户下单时间样式修改

components/its-calendar/its-calendar.vue

@@ -1,26 +1,33 @@
 <template>
 	<view>
 		<view class="calendar">
-			<view class="calendar_day">
-				<view class="day_x" :style="{'color': (day_index == index ? '#FE3B3C' : '')}"
-					v-for="(item, index) in dayArr" :key="index" @click.stop="dayList(item,index)">
-					<view class="day_x_a">{{item.weeks}}</view>
-					<view class="day_x_b">{{item.days}}</view>
+			<scroll-view class="calendar_day_scroll" scroll-x="true" show-scrollbar="false">
+				<view class="calendar_day">
+					<view class="day_x" :style="{'color': (day_index == index ? '#FE3B3C' : '')}"
+						v-for="(item, index) in dayArr" :key="index" @click.stop="dayList(item,index)">
+						<view class="day_x_a">{{item.weeks}}</view>
+						<view class="day_x_b">{{item.days}}</view>
+					</view>
 				</view>
-			</view>
-			<view class="calendar_time">
-				<view class="time_x" 
-				  :class="{
-				    'time_x_sty': item?.checked, 
-				    'disabled-time': item?.disabled
-				  }" 
-				  v-for="(item, index) in timeHostArr[day_index]" 
-				  :key="index"
-				  @click="handleTimeClick(item)">
-				  <text>{{item?.hours}}</text>
-				  <text v-if="item.hasReservation === 1" class="hasRe-text">已预约</text>
+			</scroll-view>
+			<scroll-view class="calendar_time_scroll" scroll-y="true" show-scrollbar="false">
+				<view class="calendar_time">
+					<view class="time_x" 
+						:class="{
+							'time_x_sty': item?.checked, 
+							'disabled-time': item?.disabled
+						}" 
+						v-for="(item, index) in timeHostArr[day_index]" 
+						:key="index"
+						@click="handleTimeClick(item)">
+						<text>{{item?.hours}}</text>
+						<text v-if="item.hasReservation === 1" class="hasRe-text">已预约</text>
+					</view>
 				</view>
-			</view>
+			</scroll-view>
+		</view>
+		<view class="calendar_footer">
+			<view class="remark_content">{{remark}}</view>
 		</view>
 		<!-- <view class="sub" @click="sub()">
 			立即预约
@@ -265,57 +272,91 @@
 		border-radius: 8rpx;
 	}
 
+	.calendar_day_scroll {
+		width: 100%;
+		overflow-x: auto;
+		overflow-y: hidden;
+		white-space: nowrap;
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
 	.calendar_day {
 		display: flex;
-		width: 100%;
+		flex-direction: row;
+		width: max-content;
 		height: 120rpx;
+	}
 
-		.day_x {
-			display: flex;
-			flex-flow: column nowrap;
-			justify-content: center;
-			align-items: center;
-			width: 20%;
-			height: 100%;
-			font-size: 30rpx;
-			color: #333333;
-		}
+	.day_x {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100rpx;
+		height: 100%;
+		font-size: 30rpx;
+		color: #333333;
+		flex-shrink: 0;
+		margin-right: 10rpx;
+		background: #f8f8f8;
+		border-radius: 12rpx;
+		cursor: pointer;
+	}
+
+	.day_x_a {
+		font-weight: bold;
+		margin-bottom: 8rpx;
+	}
+
+	.day_x_b {
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.calendar_time_scroll {
+		width: 100%;
+		height: 380rpx;
+		overflow-y: auto;
+		background: #fff;
+		border-radius: 8rpx;
+		margin-bottom: 20rpx;
 	}
 
 	.calendar_time {
 		display: flex;
 		width: 100%;
-		height: 448rpx;
 		flex-flow: row wrap;
 		align-content: flex-start;
 		margin: 20rpx 0;
 		overflow-y: auto;
+	}
 
-		.time_x {
-			display: flex;
-			flex-flow: row;
-			justify-content: center;
-			align-items: center;
-			width: 20%;
-			height: 54rpx;
-			border-radius: 26rpx;
-			margin: 10rpx 0;
-			font-size: 30rpx;
-			color: #333333;
+	.time_x {
+		display: flex;
+		flex-flow: row;
+		justify-content: center;
+		align-items: center;
+		width: 20%;
+		height: 54rpx;
+		border-radius: 26rpx;
+		margin: 10rpx 0;
+		font-size: 30rpx;
+		color: #333333;
 
-			display: flex;
-			flex-direction: column;
+		display: flex;
+		flex-direction: column;
 
-			.hasRe-text {
-				font-size: 20rpx;
-				color: #999999;
-			}
+		.hasRe-text {
+			font-size: 20rpx;
+			color: #999999;
 		}
+	}
 
-		.time_x_sty {
-			background-color: #FFE97B;
-			color: #000000 !important;
-		}
+	.time_x_sty {
+		background-color: #FFE97B;
+		color: #000000 !important;
 	}
 
 	.sub {
@@ -331,8 +372,6 @@
 		background-color: #FE3B3C;
 	}
 
-
-
 	.time_x {
 	  /* 正常状态样式 */
 	  &.disabled-time {
@@ -346,4 +385,22 @@
 	    color: #000000;
 	  }
 	}
+
+	.calendar_footer {
+		width: 100%;
+		background: #fff;
+		border-radius: 12rpx;
+		margin: 0 auto 20rpx auto;
+		padding: 24rpx 32rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
+		display: flex;
+		align-items: flex-start;
+		min-height: 60rpx;
+	}
+
+	.remark_content {
+		color: #333;
+		word-break: break-all;
+		flex: 1;
+	}
 </style>