详情页展示优化；

src/pages/identify/details.vue

@@ -37,8 +37,8 @@
 		</view>
 		<view class="server-content">
 			<view class="tab">
-				<text class="Tips" :class=" checkedIndex === 0 ? 'active' : '' " @click="switchTab(0)">服务内容</text>
-				<text class="Tips" :class=" checkedIndex === 1 ? 'active' : '' " @click="switchTab(1)">顾客评价</text>
+				<text class="tips" :class=" checkedIndex === 0 ? 'active' : '' " @click="switchTab(0)">服务内容</text>
+				<text class="tips" :class=" checkedIndex === 1 ? 'active' : '' " @click="switchTab(1)">顾客评价</text>
 			</view>
 			<view class="tab_content">
 				<view class="tab-pane" :class="checkedIndex === 0 ? 'active' : ''">
@@ -47,27 +47,44 @@
 							<image :src="$globalData.publicUrl + item.cCover" mode="" />
 						</view>
 						<view class="right">
-							<view class="list_title">
+							<view class="info-box">
 								<view class="name"> {{item.cTitle}} </view>
 								<!-- <view class="time">{{item.nMinute}}分钟</view> -->
 								<view class="price">
-									<span>￥</span>{{item.dPrice}}
+									<text class="unit">￥</text>
+									<text>{{item.dPrice}}</text>
 								</view>
 							</view>
-							<view class="num">
-								{{item.cLdList}}
-								<span>超{{item.nSaleNumber}}人选择</span>
+							<view class="desc-box">
+								<view>{{item.cLdList}}</view>
+								<view style="flex-shrink: 0">超{{item.nSaleNumber}}人选择</view>
 							</view>
 							<view class="time">
 								<view class="money">{{item.nMinute}}分钟</view>
 								<view class="counter">
-									<view class="minus" @click="decrease(index)">
+									<u-number-box 
+										integer
+										min="0"
+										button-size="28"
+										v-model="item.number" 
+										@change="onQuantityChange($event, item)"
+									>
+										<view slot="minus" class="abtn">
+											<u-icon bold name="minus" size="12" color="#202726"></u-icon>
+										</view>
+										<text slot="input" class="input">{{ item.number }}</text>
+										<view slot="plus" class="abtn">
+											<u-icon bold name="plus" size="12" color="#202726"></u-icon>
+										</view>
+									</u-number-box>
+
+									<!-- <view class="minus" @click="decrease(index)">
 										<image src="/static/identify/minus.png" mode="" />
 									</view>
 									<text>{{item.number}}</text>
 									<view class="minus" @click="increase(index)">
 										<image src="/static/identify/add.png" mode="" />
-									</view>
+									</view> -->
 								</view>
 							</view>
 						</view>
@@ -419,13 +436,12 @@ export default {
 		color: #333;
 		padding: 24rpx;
 
-		.Tips {
-			margin-right: 30rpx;
+		.tips {
 			height: 42rpx;
+			margin-right: 30rpx;
 		}
 
 		.active {
-			box-sizing: border-box;
 			width: 100%;
 			font-weight: bold;
 			border-bottom: 6rpx solid #2BDAD1;
@@ -513,37 +529,32 @@ export default {
 			flex-direction: column;
 			justify-content: space-between;
 
-			.list_title {
-				width: 100%;
+			.info-box {
 				display: flex;
+				align-items: center;
 				justify-content: space-between;
-				align-items: start;
-
-				.name {}
 
 				.price {
 					font-size: 48rpx;
 					color: #F53E54;
 					display: flex;
-					align-items: center;
-					padding: 0;
+					align-items: baseline;
 
-					span {
+					.unit {
 						font-size: 24rpx
 					}
 				}
 			}
 
-			.num {
+			.desc-box {
+				font-size: 24rpx;
+				color: #888888;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				font-size: 24rpx;
-				color: #888888;
 			}
 
 			.time {
-				// padding-top: 50rpx;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
@@ -558,17 +569,22 @@ export default {
 					display: flex;
 					align-items: center;
 
-					.minus {
-						image {
-							width: 36rpx;
-							height: 36rpx;
-						}
+					.abtn {
+						width: 38rpx;
+						height: 38rpx;
+						border: 1rpx dashed #202726;
+						display: flex;
+						align-items: center;
+						justify-content: center;
 					}
-
-					text {
-						line-height: 24rpx;
-						font-size: 28rpx;
-						margin: 0px 24rpx;
+					.input {
+						width: 58rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						text-align: center;
+						margin: 0 10rpx;
+						background: #F8F9FD;
+						border-radius: 4rpx;
 					}
 				}
 			}