细节优化

pages/order/order.vue

@@ -52,7 +52,7 @@
 					<view class="part-1">
 						<text class="text-title text-lg text-bold">套餐选择：</text>
 					</view>
-					<view class="flex-1 package-box">
+					<!-- <view class="flex-1 package-box">
 						<view v-for="(item,index) in packageMode" v-if="index<=3" :key="index" class="flex-col item"
 							:class="{active: modeIndex===index,'item-3':packageMode.length<3,'item-n':packageMode.length>=3}"
 							@tap="onChangeMode(index)">
@@ -62,6 +62,25 @@
 								<text class="text-title text-bold text-xl">{{item.price}}</text>
 							</view>
 						</view>
+					</view> -->
+					
+					<scroll-view scroll-x="true" class="scroll-view" >
+						<view class="flex-row package-box">
+							<view v-for="(item,index) in packageMode" :key="index" class="flex-col item"
+								:class="{active: modeIndex===index}"
+								@tap="onChangeMode(index)">
+								<text class="text-title">{{item.name}}</text>
+								<view class="flex-row" style="margin-top: 8upx;">
+									<text>{{item.duration}}小时/</text>
+									<text >￥</text>
+									<text class="text-title text-bold text-xl">{{item.price}}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+					<view class="flex-col tip-box">
+						<text class="" style="margin-bottom: 12upx;">套餐说明：</text>
+						<text class="text-sm">{{packageMode[modeIndex].remark}}</text>
 					</view>
 				</view>
 
@@ -1308,7 +1327,7 @@
 
 				.package-box {
 					.item {
-						margin: 0 1.5%;
+						margin: 0 10upx;
 						justify-content: center;
 						align-items: center;
 						border: 1px solid transparent;
@@ -1669,4 +1688,24 @@
 			}
 		}
 	}
+	.tip-box{
+		padding: 12upx;
+		border: 4upx solid #DBA556;
+		border-radius: 12upx;
+		margin-top: 20upx;
+		background: #FBF6EE;
+		color: #B67D32;
+		// font-size: 24upx;
+	}
+	.scroll-view{
+		height: 136upx;
+		.package-box{
+			position: absolute;
+			top: 0;
+			height: 136upx;
+			.item{
+				min-width: 27vw;
+			}
+		}
+	}
 </style>
\ No newline at end of file