详情页面超时和剩余样式修改

src/pages/order/detail.vue

@@ -2,17 +2,17 @@
 	<view class="order-wrap">
 		<u-navbar :title="title" title-color="#FFFFFF" title-size="32" back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
 		<view class="header" v-if="order.currentOverTime && showTimeOut">
+			<image class="bottom-tag-view" :src="tagImage"></image>
 			<!-- 倒计时 -->
 			<view class="title">
-				<view class="bottom-tag-view"><text>{{timeout ? '超时' : '剩余'}}</text></view>
 				<u-count-down :timestamp="timestamp" font-size="28" show-days separator="zh" separator-size="32" height="40" hide-zero-day 
-					color="#2272FF" separator-color="#FFFFFF" @change="timeOutChange" ref="order-count-down" bg-color="#FFFFFF"></u-count-down>
-			</view>
-			<view class="header-content">
-				<!-- 抓紧时间提示 -->
-				<view class="tip-text">{{tipText}}</view>
-				<!-- 拒单 -->
-				<view v-show="allowRejection" class="reject-button" @click="$u.throttle(rejectOrder, 500)">拒单</view>
+					:color="countColor" separator-color="#FFFFFF" @change="timeOutChange" ref="order-count-down" bg-color="#FFFFFF"></u-count-down>
+				<view class="header-content">
+					<!-- 抓紧时间提示 -->
+					<view class="tip-text">{{tipText}}</view>
+					<!-- 拒单 -->
+					<view v-show="allowRejection" class="reject-button" @click="$u.throttle(rejectOrder, 500)">拒单</view>
+				</view>
 			</view>
 		</view>
 		<view class="content">
@@ -260,9 +260,21 @@
 					}
 				}]
 			},
+			countColor() {
+				return this.timeout ? '#FA5A49' : '#2272FF'
+			},
 			wenjianImage() {
 				return process.uniEnv.qn_base_url + 'wenjian.png'
 			},
+			tagImage() {
+				return this.timeout ? this.chaoshiImage : this.shengyuImage
+			},
+			chaoshiImage() {
+				return process.uniEnv.qn_base_url + 'chaoshi.png'
+			},
+			shengyuImage() {
+				return process.uniEnv.qn_base_url + 'shengyu.png'
+			},
 		},
 		methods: {
 			updateLocation(){
@@ -814,6 +826,14 @@
 		}
 	};
 </script>
+<style lang="scss">
+	.order-wrap {
+		.u-countdown-colon {
+			margin-left: 6rpx;
+			margin-right: 6rpx;
+		}
+	}
+</style>
 
 <style lang="scss" scoped>
 	.order-wrap {
@@ -828,36 +848,37 @@
 		flex-direction: column;
 
 		.header {
-			padding: 4rpx 32rpx 14rpx 32rpx;
-			
-			.header-content {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				margin-top: 12rpx;
-				.tip-text {
-					font-size: 26rpx;
-					color: #EFEFEF;
-				}
-				.reject-button {
-					text-align: center;
-					width: 106rpx;
-					height: 52rpx;
-					border-radius: 40rpx;
-					font-size: 24rpx;
-					font-weight: 400;
-					line-height: 52rpx;
-					color: #DEDEDE;
-					text-align: right;
-				}
+			padding: 4rpx 32rpx 20rpx 32rpx;
+			display: flex;
+			align-items: center;
+			.bottom-tag-view {
+				width: 116rpx;
+				height: 116rpx;
+				flex-shrink: 0;
 			}
 			.title {
-				display: flex;
-				align-items: center;
-				.bottom-tag-view {
-					color: #FFFFFF;
-					font-size: 40rpx;
-					margin-right: 10rpx;
+				margin-left: 24rpx;
+				margin-top: 6rpx;
+				.header-content {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-top: 24rpx;
+					.tip-text {
+						font-size: 26rpx;
+						color: #EFEFEF;
+					}
+					.reject-button {
+						text-align: center;
+						width: 106rpx;
+						height: 52rpx;
+						border-radius: 40rpx;
+						font-size: 24rpx;
+						font-weight: 400;
+						line-height: 52rpx;
+						color: #DEDEDE;
+						text-align: right;
+					}
 				}
 			}
 		}