1.车检报告

pages/user/reportUni.vue

@@ -1,98 +1,107 @@
 <template>
 	<view class="content">
 		<view class="car-report-main newjcbgD">
-			<view class="car-report newcar-report">
-				
-				<view class="top" :style="{background:'#'+themeColor}">
-					<view class="orderState">
-						<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
-				
-						<view class="SheetState" >检测报告</view>
-						
-					</view>
-				
-				</view>
-				
-				<!-- 店铺信息 -->
-				<view class="shopBox">
-					<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
-					<view class="shopCont">
-						<view class="shopName">{{detailData.shopName}}</view>
-						<view class="Address">
-							{{detailData.shopAddress}}
-						</view>
-				
-					</view>
-					<!-- <view class="shopRightBox" @click="map">
-				
-						<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
-				
-						<view class="shopRihgtTxt">地图</view>
-					</view> -->
-					<!-- <view class="shopsx"></view> -->
-					<view class="shopRightBox" @click="call">
-				
-						<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
-				
-						<view class="shopRihgtTxt">电话</view>
-					</view>
-				</view>
-				
-				<!-- 车辆信息 -->
-				<view class="carinfoBox" >
-				    <view class="carinfoBoxTop">
-				      <img :src="detailData.brandLogo" alt="" class="shopBoximg" v-if="detailData.brandLogo">
-				      <img src="../../static/timg/nocar.png" alt="" class="shopBoximg" v-else>
-				      <view class="carinfoBoxTopCont">
-				        <view class="carinfoBoxTopContTop">
-				          <view class="carInfoplateNumber">{{detailData.licensePlateNumber}}</view>
-				          <view class="carTnfomilage" v-if="detailData.currentMileage">{{detailData.currentMileage}}km</view>
-				        </view>
-				        <view class="carInfocarModel" v-if="detailData.carModel">{{detailData.carModel}}</view>
-				        <view class="carInfocarModel" v-else>暂无</view>
-						<view class="workBox">
-							<image src="../../static/img/icon_order_jiedai.png" mode="" style="width: 27rpx; height: 29rpx;"></image>
-							<view class="workName" v-if="detailData.workerName">{{detailData.workerName}}</view>
-							<view class="workName" v-if="detailData.time">{{detailData.time}}</view>
-						</view>
-						
-				      </view>
-				      
-				    </view>
-				   
-				   <view class="car-report-item questionBox">
-				   	<view class="car-report-statistics">
-				   		<view class="car-report-statistics-item">
-							<p style="font-size: 24rpx;">急需处理</p>
-				   			<h3 class="report-color-red" style="font-size: 28rpx;">
-				   				{{detailData.ultimateOutcome&&detailData.ultimateOutcome[3]&&detailData.ultimateOutcome[3].length||0}}
-				   			</h3>
-				   			
-				   		</view>
-				   		<view class="car-report-statistics-item">
-							<p style="font-size: 24rpx;">密切关注</p>
-				   			<h3 class="report-color-yellow" style="font-size: 28rpx;">
-				   				{{detailData.ultimateOutcome&&detailData.ultimateOutcome[2]&&detailData.ultimateOutcome[2].length||0}}
-				   			</h3>
-				   			
-				   		</view>
-				   		<view class="car-report-statistics-item">
-							<p style="font-size: 24rpx;">状态良好</p>
-				   			<h3 class="report-color-green" style="font-size: 28rpx;">
-				   				{{detailData.ultimateOutcome&&detailData.ultimateOutcome[1]&&detailData.ultimateOutcome[1].length||0}}
-				   			</h3>
-				   			
-				   		</view>
-				   	</view>
-				   </view>
-							  
-				</view>
-				
-				
-				
-				
+			<view class="car-report newcar-report">
+
+				<view class="top" :style="{background:'#'+themeColor}">
+					<view class="orderState">
+						<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;">
+						</image>
+
+						<view class="SheetState">检测报告</view>
+
+					</view>
+
+				</view>
+
+				<!-- 店铺信息 -->
+				<view class="shopBox">
+					<view style="width: 40rpx; height: 40rpx;">
+						<image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
+					</view>
+					<view class="shopCont">
+						<view class="shopName">{{detailData.shopName}}</view>
+						<view class="Address">
+							{{detailData.shopAddress}}
+						</view>
+
+					</view>
+					<!-- <view class="shopRightBox" @click="map">
 				
+						<image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
 				
+						<view class="shopRihgtTxt">地图</view>
+					</view> -->
+					<!-- <view class="shopsx"></view> -->
+					<view class="shopRightBox" @click="call">
+
+						<image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
+
+						<view class="shopRihgtTxt">电话</view>
+					</view>
+				</view>
+
+				<!-- 车辆信息 -->
+				<view class="carinfoBox">
+					<view class="carinfoBoxTop">
+						<view style="width: 40rpx; height: 40rpx;">
+							<image v-if="detailData.brandLogo" :src="detailData.brandLogo" mode="" class="shopRightImg">
+							</image>
+							<image v-else src="../../static/img/icon_che.png" mode="" class="shopRightImg"></image>
+						</view>
+						<view class="carinfoBoxTopCont">
+							<view class="carinfoBoxTopContTop">
+								<view class="carInfoplateNumber">{{detailData.licensePlateNumber}}</view>
+								<view class="carTnfomilage" v-if="detailData.currentMileage">
+									{{detailData.currentMileage}}km
+								</view>
+							</view>
+							<view class="carInfocarModel" v-if="detailData.carModel">{{detailData.carModel}}</view>
+							<view class="carInfocarModel" v-else>暂无</view>
+							<view class="workBox">
+								<image src="../../static/img/icon_order_jiedai.png" mode=""
+									style="width: 27rpx; height: 29rpx;"></image>
+								<view class="workName" v-if="detailData.workerName">{{detailData.workerName}}</view>
+								<view class="workName" v-if="detailData.time">{{detailData.time}}</view>
+							</view>
+
+						</view>
+
+					</view>
+
+					<view class="car-report-item questionBox">
+						<view class="car-report-statistics">
+							<view class="car-report-statistics-item">
+								<p style="font-size: 24rpx;">急需处理</p>
+								<h3 class="report-color-red" style="font-size: 28rpx;">
+									{{detailData.ultimateOutcome&&detailData.ultimateOutcome[3]&&detailData.ultimateOutcome[3].length||0}}
+								</h3>
+
+							</view>
+							<view class="car-report-statistics-item">
+								<p style="font-size: 24rpx;">密切关注</p>
+								<h3 class="report-color-yellow" style="font-size: 28rpx;">
+									{{detailData.ultimateOutcome&&detailData.ultimateOutcome[2]&&detailData.ultimateOutcome[2].length||0}}
+								</h3>
+
+							</view>
+							<view class="car-report-statistics-item">
+								<p style="font-size: 24rpx;">状态良好</p>
+								<h3 class="report-color-green" style="font-size: 28rpx;">
+									{{detailData.ultimateOutcome&&detailData.ultimateOutcome[1]&&detailData.ultimateOutcome[1].length||0}}
+								</h3>
+
+							</view>
+						</view>
+					</view>
+
+				</view>
+
+
+
+
+
+
 				<view v-for="status in listData">
 					<view :key="status.valueType">
 						<view class="car-report-item flex"
@@ -104,14 +113,12 @@
 								<p v-if="status.valueType===1&&!status.show">点击查看详情</p>
 								<p v-else>{{status.message}}</p>
 							</view>
-							<span class="icon-select-down" v-if="status.show">
-								<image src="../../static/img/icon_arrow_up.png" mode=""
-									style="width: 30rpx; height: 15rpx;"></image>
-							</span>
-							<span class="icon-select-down" v-else>
-								<image src="../../static/img/icon_arrow_down.png" mode=""
-									style="width: 30rpx; height: 15rpx;"></image>
-							</span>
+
+							<image class="icon-select-down" v-if="status.show" src="../../static/img/icon_arrow_up.png"
+								mode=""></image>
+							<image class="icon-select-down" v-else src="../../static/img/icon_arrow_down.png" mode="">
+							</image>
+
 
 						</view>
 						<!-- <collapse-transition> -->
@@ -124,14 +131,27 @@
 								</view>
 								<view class="car-report-item-info">
 									<view v-if="item.SectionType===0">
-										<p v-for="(item2,index) in item.value" :key="index"><span
-												class="carjcitemSpan">{{item2.ItemName}}：</span>{{item2.Value}}
-											<i class="info-status"
-												:class="{'report-color-red':item2.ValueType===3,'report-color-yellow':item2.ValueType===2}">{{item2.ValueType===3?'急需处理':item2.ValueType===2?'密切关注':'状态良好'}}</i>
-										</p>
-										<p v-if="item.Comment"><span class="leftTitle">备注：</span>{{item.Comment}}
-										</p>
-										<p v-if="item.Describe"><span class="leftTitle">说明：</span>{{item.Describe}} </p>
+
+										<view class="nameBox" v-for="(item2,index) in item.value" :key="index">
+
+											<view class="contentB2">
+												<view class="leftName">{{item2.ItemName}}：</view>
+												<view v-if="item2.Value" class="itemValue">{{item2.Value}}</view>
+
+											</view>
+											<view class="kuang"
+												:class="{'report-color-red':item2.ValueType===3,'report-color-yellow':item2.ValueType===2}">
+												{{item2.ValueType===3?'急需处理':item2.ValueType===2?'密切关注':'状态良好'}}</view>
+
+										</view>
+										<view class="contentB">
+											<view class="leftT">备注：</view>
+											<view v-if="item.Comment" class="contentStr">{{item.Comment}}</view>
+										</view>
+										<view class="contentB">
+											<view class="leftT">说明：</view>
+											<view v-if="item.Describe" class="contentStr">{{item.Describe}}</view>
+										</view>
 									</view>
 									<view class="warning-lamp" v-if="item.SectionType===2">
 
@@ -174,8 +194,8 @@
 					</view>
 				</view>
 			</view>
-		
- 
+
+
 		</view>
 		<!-- 手机号授权 -->
 		<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
@@ -226,11 +246,11 @@
 			}
 
 		},
-		methods: {
-			call() {
-				uni.makePhoneCall({
-					phoneNumber: this.detailData.mobilePhone
-				});
+		methods: {
+			call() {
+				uni.makePhoneCall({
+					phoneNumber: this.detailData.mobilePhone
+				});
 			},
 			decryptPhoneNumber: function(e) {
 				console.log(e);
@@ -256,7 +276,7 @@
 					}
 				})
 			},
-			
+
 			ckd(status) {
 				status.show = !status.show
 			},
@@ -370,8 +390,9 @@
 	.newjcbgD .newcar-report {
 		// background: url('http://dmsphoto.66km.com.cn/thFiles/58BF776D-0B1D-420A-A7C1-BAE6FA7E8695.png') no-repeat;
 		background-size: 100%;
-		position: relative;
+		position: relative;
 		background: #F7F7F7;
+
 	}
 
 	.newcar-reportTs {
@@ -456,7 +477,7 @@
 	.car-report-item {
 		background-color: #fff;
 		padding: 30rpx 20rpx;
-		box-shadow: 0px 0px 10rpx 0px rgba(153, 153, 153, 0.16);
+		// box-shadow: 0px 0px 10rpx 0px rgba(153, 153, 153, 0.16);
 		border-radius: 10rpx;
 		margin-bottom: 20rpx;
 		position: relative;
@@ -464,6 +485,7 @@
 		.car-report-item-info {
 			padding: 15rpx 0;
 
+
 			.car-report-rv {
 				width: 331rpx;
 				height: 465rpx;
@@ -561,7 +583,7 @@
 						// &svg path {
 						// 	fill: rgb(18, 136, 222)
 						// }
-						
+
 					}
 				}
 
@@ -574,6 +596,7 @@
 				line-height: 150%;
 				padding: 8rpx 0;
 				display: flex;
+				align-items: baseline;
 
 				>span {
 					height: 28rpx;
@@ -593,6 +616,7 @@
 					padding: 2rpx 14rpx;
 					text-decoration: none;
 					font-style: normal;
+					width: 115rpx;
 				}
 			}
 		}
@@ -745,10 +769,10 @@
 			.car-report-statistics-item {
 				>h3 {
 					text-align: center;
-					height: 62rpx;
+					height: 40rpx;
 					font-size: 44rpx;
 					font-weight: 500;
-					line-height: 62rpx;
+					// line-height: 62rpx;
 				}
 
 				>p {
@@ -915,160 +939,260 @@
 	.icon-select-down {
 		width: 34rpx;
 		height: 22rpx;
-	}
-	.leftTitle{
-		width: 100rpx;
-	}
-	.top {
-		height: 190rpx;
-		background: #FF0000;
-		margin-left: -24rpx;
-		margin-right: -24rpx;
-	}
-	
-	.orderState {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding-top: 40rpx;
-	}
-	.SheetState {
-		display: flex;
-		justify-content: center;
-		font-size: 36rpx;
-		font-weight: 500;
-		color: #FFFFFF;
-		margin-left: 15rpx;
-	
-	}
-	.shopBoximg {
-		width: 40rpx;
-		height: 40rpx;
-	}
-	
-	.shopRightImg {
-		width: 44rpx;
-		height: 45rpx;
-	}
-	
-	.shopsx {
-		width: 1px;
-		height: 50rpx;
-		background: #EEEEEE;
-		margin-top: 30rpx;
-		margin-left: 28rpx;
-	}
-	
-	.shopBox {
-	
-		display: flex;
-		justify-content: space-between;
-		padding: 30rpx 20rpx;
-		
-		margin-top: -60rpx;
-		background-color: #FFFFFF;
-		border-radius: 10rpx;
-		
-	}
-	
-	.shopCont {
-		flex-grow: 1;
-		padding-left: 20rpx;
-	
-	}
-	
-	.shopName {
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #3C3C3C;
-		line-height: 42rpx;
-	}
-	
-	.Address {
-		color: #999999;
-		font-size: 24rpx;
-		margin-top: 10rpx;
-	}
-	
-	.shopRihgtTxt {
-		color: #999999;
-		font-size: 24rpx;
-	
-	}
-	
-	.shopRightBox {
-	
-		padding-left: 28rpx;
-	}
-	.carinfoBox{
-		
-		background: #FFFFFF;
-		border-radius: 10rpx;
-		
-		margin-top: 20rpx;
-		padding:  20rpx;
-		margin-bottom: 20rpx;
-	}
-	
-	.carinfoBox .carLogo{
-		width: 60rpx;height: 60rpx;
-		margin-top: 6rpx;
-	}
-	.carinfoBoxTop{
-		display: flex;
-		
-	}
-	.carinfoBoxTopCont{
-		flex-grow: 1;
-		padding-left: 20rpx;
-	}
-	.carinfoBoxTopContTop{
-		display: flex;
-	}
-	.carInfoplateNumber{
-		font-weight: 500;
-		color: #3C3C3C;
-		font-size: 30rpx;
-		line-height: 42rpx;
-		padding-right: 16rpx;
-	}
-	.carTnfomilage{
-		color: #F19D01;
-		font-size: 22rpx;
-		padding: 0rpx 10rpx;
-		border-radius: 4rpx;
-		border: 1px solid #F19D01;
-		height: 32rpx;
-		line-height: 34rpx;
-		margin-top: 2rpx;
-		margin-left: 2rpx;
-	}
-	.carInfocarModel{
-		padding-top: 10rpx;
-		color: #999999;
-		font-size: 24rpx;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.workBox{
-		display: flex;
-		align-items: center;
-	}
-	.workName{
-		padding-left: 10rpx;
-		font-size: 24rpx;
-		font-weight: 400;
-		color: #999999;
-		padding-top: 10rpx;
-		padding-bottom: 18rpx;
-	}
-	.questionBox{
-		padding: 20rpx;
-		border-top: #EEEEEE solid 1rpx;
-		box-shadow: 0 0 0 0;
-		margin-bottom: 0;
-		padding-bottom: 0;
-		
+	}
+
+	.top {
+		height: 190rpx;
+		background: #FF0000;
+		margin-left: -20rpx;
+		margin-right: -20rpx;
+	}
+
+	.orderState {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding-top: 40rpx;
+	}
+
+	.SheetState {
+		display: flex;
+		justify-content: center;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		margin-left: 15rpx;
+
+	}
+
+	.shopBoximg {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.shopRightImg {
+		width: 44rpx;
+		height: 45rpx;
+	}
+
+	.shopsx {
+		width: 1px;
+		height: 50rpx;
+		background: #EEEEEE;
+		margin-top: 30rpx;
+		margin-left: 28rpx;
+	}
+
+	.shopBox {
+
+		display: flex;
+		justify-content: space-between;
+		padding: 30rpx 20rpx;
+
+		margin-top: -60rpx;
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+
+	}
+
+	.shopCont {
+		flex-grow: 1;
+		padding-left: 20rpx;
+
+	}
+
+	.shopName {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #3C3C3C;
+		line-height: 42rpx;
+	}
+
+	.Address {
+		color: #999999;
+		font-size: 24rpx;
+		margin-top: 10rpx;
+	}
+
+	.shopRihgtTxt {
+		color: #999999;
+		font-size: 24rpx;
+
+	}
+
+	.shopRightBox {
+
+		padding-left: 28rpx;
+		width: 70rpx;
+	}
+
+	.carinfoBox {
+
+		background: #FFFFFF;
+		border-radius: 10rpx;
+
+		margin-top: 20rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.carinfoBox .carLogo {
+		width: 60rpx;
+		height: 60rpx;
+		margin-top: 6rpx;
+	}
+
+	.carinfoBoxTop {
+		display: flex;
+
+	}
+
+	.carinfoBoxTopCont {
+		flex-grow: 1;
+		padding-left: 20rpx;
+	}
+
+	.carinfoBoxTopContTop {
+		display: flex;
+	}
+
+	.carInfoplateNumber {
+		font-weight: 500;
+		color: #3C3C3C;
+		font-size: 30rpx;
+		line-height: 42rpx;
+		padding-right: 16rpx;
+	}
+
+	.carTnfomilage {
+		color: #F19D01;
+		font-size: 22rpx;
+		padding: 0rpx 10rpx;
+		border-radius: 4rpx;
+		border: 1px solid #F19D01;
+		height: 32rpx;
+		line-height: 34rpx;
+		margin-top: 2rpx;
+		margin-left: 2rpx;
+	}
+
+	.carInfocarModel {
+		padding-top: 10rpx;
+		color: #999999;
+		font-size: 24rpx;
+		width: 100%;
+	}
+
+	.workBox {
+		display: flex;
+		align-items: center;
+	}
+
+	.workName {
+		padding-left: 10rpx;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+		padding-top: 10rpx;
+		padding-bottom: 18rpx;
+	}
+
+	.questionBox {
+		padding: 20rpx;
+		border-top: #EEEEEE solid 1rpx;
+		// box-shadow: 0 0 0 0;
+		margin-bottom: 0;
+		padding-bottom: 0;
+
+	}
+
+	// p {
+	// 	font-size: 28rpx;
+	// 	font-weight: 400;
+	// 	color: rgba(153, 153, 153, 1);
+	// 	line-height: 150%;
+	// 	padding: 8rpx 0;
+	// 	display: flex;
+	// 	align-items: baseline;
+	// 	>span {
+	// 		height: 28rpx;
+	// 		font-size: 28rpx;
+	// 		font-weight: 400;
+	// 		color: rgba(102, 102, 102, 1);
+	// 		line-height: 28rpx;
+	// 		padding-top: 5rpx;
+
+	// 	}
+	.contentB {
+		display: flex;
+		align-items: baseline;
+		font-size: 28rpx;
+		font-weight: 400;
+		color: rgba(153, 153, 153, 1);
+		line-height: 150%;
+		padding: 8rpx 0;
+	}
+
+	.leftT {
+		font-size: 26rpx;
+		font-weight: 400;
+		line-height: 26rpx;
+		padding-top: 5rpx;
+		width: 100rpx;
+		color: #999999;
+	}
+
+	.contentStr {
+		flex-grow: 1;
+		width: calc(100vw - 100rpx);
+		color: #333333;
+		font-size: 26rpx;
+	}
+
+	.nameBox {
+		display: flex;
+		align-items: baseline;
+		
+	}
+
+	.contentB2 {
+		display: flex;
+		align-items: baseline;
+
+		font-size: 28rpx;
+		font-weight: 400;
+		color: rgba(153, 153, 153, 1);
+		line-height: 150%;
+		padding: 8rpx 0;
+		max-width: 500rpx;
+	}
+
+	.leftName {
+		font-size: 26rpx;
+		font-weight: 400;
+		line-height: 26rpx;
+		padding-top: 5rpx;
+		color: #999999;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+	}
+
+	.itemValue {
+		color: #333333;
+		font-size: 26rpx;
+
+	}
+
+	.kuang {
+		margin-left: 10rpx;
+		height: 33rpx;
+		border-radius: 8rpx;
+		border: 2rpx solid rgba(221, 221, 221, 1);
+		text-align: center;
+		width: 122rpx;
+		line-height: 33rpx;
+		font-size: 24rpx;
+		color: #999999;
 	}
 </style>