细节优化

pages/order/order.vue

@@ -6,7 +6,7 @@
 			</view>
 			<view class="part-right">
 				<text
-					class="text-title text-xl text-bold">{{roomInfo.name||'一帆风顺'}}{{roomInfo.roomType?'【'+roomTypeEnum[roomInfo.roomType]+'】':''}}</text>
+					class="text-title text-xl text-bold">{{roomInfo.name||'凑角'}}{{roomInfo.roomType?'【'+roomTypeEnum[roomInfo.roomType]+'】':''}}</text>
 				<view class="status-icon-box">
 					<view class="status-box" :class="'status-box-'+roomInfo.status">
 						<text>{{roomStatusEnum[roomInfo.status]}}</text>
@@ -15,21 +15,22 @@
 				</view>
 			</view>
 			<view class="part-left">
-				<image :src="roomInfo.images.length?roomInfo.images[0]:'../../static/blank2.jpg'" mode="widthFix">
+				<image :src="roomInfo.images.length?roomInfo.images[0]:  assetsPath+'/blank2.jpg'" mode="widthFix">
 				</image>
 			</view>
-
 		</view>
-		<view class="order-type-box">
-			<view class="tab-box">
-				<view v-for="(item,i) in orderTypeList" :key="i" class="tab-item" :class="{active:i ===index}"
-					@tap="onTypeChange(i)">
-					<text class="text-gray text-xl text-bold">{{item.label}}</text>
-					<view class="line">
-
-					</view>
+		<view class="tab-box">
+			<view v-for="(item,i) in orderTypeList" :key="i" class="tab-item" :class="{active:i ===index}"
+				@tap="onTypeChange(i)">
+				<text class="text-gray text-xl text-bold">{{item.label}}</text>
+				<view v-if="item.type == 2" class="hot-icon">
+		             <view class="img-icon">
+		             	<image src="../../static/hot_icon.png" mode="widthFix"></image>
+		             </view>
 				</view>
 			</view>
+		</view>
+		<view class="order-type-box">
 			<view class="flex-col date-content-box">
 				<view class="flex-row date-tips">
 					<text class="text-xl margin-right">选择日期</text>
@@ -1524,57 +1525,62 @@
 
 			}
 		}
-
-		.order-type-box {
-			display: flex;
-			flex-direction: column;
-			width: 100%;
-			margin-top: 30upx;
-			min-height: 600upx;
-			overflow: hidden;
-
 			.tab-box {
 				display: flex;
 				flex-direction: row;
 				justify-content: center;
-				width: 100%;
+				width: 92%;
+				margin: 20upx 0 30upx;
 				background: #ffffff;
+				border-radius: 10upx;
+				overflow: hidden;
 
 				.tab-item {
 					position: relative;
 					display: flex;
+					flex: 1;
 					justify-content: center;
 					align-items: center;
 					height: 80upx;
-					width: 36%;
-
 					text {
 						color: #000000;
 						font-size: 34upx;
-						font-weight: 600;
+						font-weight: 700;
 					}
-
-					.line {
-						position: absolute;
-						width: 30%;
-						height: 2px;
-						bottom: 0;
-						background: transparent;
-						transition: all 0.3s ease-in-out;
+					.hot-icon{
+						position: relative;
+						height: 40upx;
+						.img-icon{
+							position: absolute;
+							top: -4upx;
+							left: 4upx;
+							width: 46upx;
+							image{
+								width: 100%;
+							
+							}
+						}
 					}
 				}
+				
 
 				.active {
+					background-color: #dc4397;
 					text {
-						color: #DBA556;
-					}
-
-					.line {
-						background: #DBA556;
+						color: #ffffff;
+						font-weight: 800;
 					}
 				}
 			}
-
+		.order-type-box {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			min-height: 600upx;
+			overflow: hidden;
+			border: 4upx solid #DC4397;
+            box-shadow:  0 0 8upx #DC4397;
+			border-radius: 12upx 12upx 0 0;
 			.date-content-box {
 				width: 100%;
 				background-color: #FFF7F5;