开单-课程开单（界面匹配UI图）

hdApp/src/admin/billing/index.vue

@@ -108,9 +108,9 @@
 				<!--内容部分 end -->
 			</scroll-view>
 
-			<view v-if="tabIndex == 2" class="PxClass-box">
+			<scroll-view scroll-y scroll-with-animation v-if="tabIndex == 2" class="PxClass-box">
 				<PxClassCommondity  :info="pxClassInfo"></PxClassCommondity>
-			</view>
+			</scroll-view>
 		</view>
 		<!-- :maskClosable="false" -->
 		<modal-module :show="isModel" @cancel="modalCancel" @click="affirm" :title="customData.itemName" color="#333" :size="32" padding="30rpx 30rpx" >

hdApp/src/components/module/app-pxClass-commodity.vue

@@ -1,35 +1,41 @@
 <style lang="scss" scoped>
 .PxClass-center {
-	padding: 0 20rpx;
+	border-bottom: 20px solid #f0f2f6;
 	.PxClass-list{
-		padding: 30rpx 0;
-		border-bottom: 1px solid #eeeeec;
+		border-top: 20px solid #f0f2f6;
 		.PxClass-title{
-			font-size: 30rpx;
+			padding: 30rpx;
+			font-size: 32rpx;
+			font-weight: 600;
 			text{
 				color: #aeaeae;
 				font-size: 20rpx;
 			}
 		}
 		.PxClass-msg-box{
-			margin-top: 20rpx;
+			padding: 0 30rpx 30rpx;
+			border-bottom: 1px solid #EEEEEE;
 			.PxClass-msg{
-				text{
-					color: #b2b2b2;
-					font-size: 24rpx;
-				}
-				view{
-					margin-top: 15rpx;
-					color: #ff1f1f;
+				line-height: 38rpx;
+				font-size: 30rpx;
+				font-weight: 600;
+				.PxClass-label{
 					font-size: 26rpx;
+					font-weight: 400;
+					text{
+						color: #999999;
+					}
 				}
 			}
-			.PxClass-btn{
-				width: 150rpx;
-				height: 60rpx;
-				color: #FFFFFF;
-				background: #0A98D5;
-			}
+
+		}
+		.PxClass-btn{
+			height: 70rpx;
+			margin: 10rpx 30rpx;
+			color: #FFFFFF;
+			font-size: 28rpx;
+			background: #3385FF;
+			border-radius: 8rpx;
 		}
 	}
 }
@@ -37,16 +43,22 @@
 <template>
 	<view class="PxClass-center">
 			<view class="PxClass-list" v-for="(res,i) in info">
-				<view class="flex-space PxClass-title">
-					{{res.name}} <text class="">学员数：{{res.num}}</text>
-				</view>
-				<view class="flex-space PxClass-msg-box">
+				<view class="flex-space PxClass-title">{{res.name}} </view>
+				<view class="PxClass-msg-box">
 					<view class="PxClass-msg">
-						<text>{{ res.lesson }}个节时</text>
-						<view>￥{{ res.tuition }}</view>
+
+						<view class="PxClass-label"><text>课时：</text>{{ res.lesson }}个节时</view>
+
+						<view class="flex-space">
+							<view class="PxClass-label"><text>人数：</text> {{res.num}}</view>
+							￥{{ res.tuition }}
+						</view>
+
 					</view>
-					<view class="flex-center PxClass-btn" @tap="toAffirmPxClass(res)">开单</view>
 				</view>
+
+				<view class="flex-center PxClass-btn" @tap="toAffirmPxClass(res)">开单</view>
+
 			</view>
 	</view>
 </template>