college/pages/index/reportUni.vue

<template>
	<view class="content">
		<!-- <homenav :iStatusBarHeight="iStatusBarHeight" :title="'检测报告'" ></homenav> -->
		<view class="car-report-main newjcbgD">
			<view class="car-report newcar-report">

				<view class="top" >
					<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"
							:class="{'report-warning':status.valueType===2,'report-error':status.valueType===3,'report-ok':status.valueType===1}"
							@click="ckd(status)">
							<view class="report-status-count">{{status.value&&status.value.length||0}}项</view>
							<view class="report-status">
								<h3>{{status.name}}</h3>
								<p v-if="status.valueType===1&&!status.show">点击查看详情</p>
								<p v-else>{{status.message}}</p>
							</view>

							<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> -->
						<view v-show="status.show">
							<view class="car-report-item" v-for="item in status.value" :key="item.name">
								<view class="car-report-item-title"
									:class="{'warning-title':status.valueType===2,'error-title':status.valueType===3,'ok-title':status.valueType===1}">
									<h3 class="carjcdItemname">{{item.name}}</h3>
									<h4 class="carjcZt"><i class="title-icon"></i>{{status.name}}</h4>
								</view>
								<view class="car-report-item-info">
									<view v-if="item.SectionType===0">

										<view class="" v-for="(item2,index) in item.value" :key="index">
                                           <view class="nameBox">
											   <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="imgLineBox" v-if="item2.photoPath">
											   <view class="imgView" v-for="(imgurl,imgIndex) in item2.photoPath.split(',')">
												    <img class="lineImg" :src="imgurl" alt="" @click="seeImg3(item2.photoPath,imgIndex)">
											   </view>
										   </view>
											
												
										<!-- 	<view class="seeImg" v-if="item2.photoPath" @click="seeImg(item2.photoPath)">查看图片</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 class="imgLineBox" v-if="item.value[0].photoAllPath">
											   <view class="imgView"  v-for="(imgurl,imgIndex) in item.value[0].photoAllPath.split(',')">
													<img class="lineImg" :src="imgurl" alt="" @click="seeImg3(item.value[0].photoAllPath,imgIndex)">
											   </view>
										</view>
										<!-- <view class="seeImg2" v-if="item.value[0].photoAllPath" @click="seeImg(item.value[0].photoAllPath)">查看图片</view> -->
									</view>
									<view class="warning-lamp" v-if="item.SectionType===2">

										<span v-for="(item2,index) in item.value" :key="index"
											class="lamp-item error-lamp"
											:class="[{'check':item2.IsSelect},{'img4':(index+1)%4==0}]"
											v-bind:style="{'background-image':'url('+item2.ItemIcon+')'}"></span>

                                      
									</view>
									
										
								
									<view v-if="item.SectionType===1">
										<view class="car-report-rv">
											<img v-if="item.SectionPic" :src="item.SectionPic" style="width: 100%; height: 100%;" alt="图片加载失败">
											<img v-else src="http://api.dms.66km.com.cn/static/img/huanshi.png" style="width: 100%; height: 100%;" alt="图片加载失败">
										</view>
										<view class="car-report-rv-buttom"></view>
									</view>
									<view v-if="item.SectionType===2||item.SectionType===1">
										<view class="imgLineBox" v-if="item.photoPath">
										   <view class="imgView"  v-for="(imgurl,imgIndex) in item.photoPath">
												<img class="lineImg" :src="imgurl" alt="" @click="seeImg2(item.photoPath,imgIndex)">
										   </view>
										</view>
										<!-- <view class="seeImg" v-if="item.photoPath.length" @click="seeImg2(item.photoPath)">查看图片</view> -->
									</view>
									<view class="video-button carjcvideo-button" v-if="item.VideoName&&!item.showVideo">
										<view class="video-play" @click="ckVideo(item)"></view>
										{{item.VideoName}}
									</view>
									<view class="image-list">
										<!-- <view class="image-list-item" v-for="(file,index) in item.photoPath"
											:key="file.id">
											<img mode='aspectFit' :src="file"  @click="sphotos(item.photoPath,index)" class="image-list-item-img"/>
										</view> -->
										<view v-if="item.VideoPath" class="image-list-item " >
											<view @click="showVideo(vi)" v-for="(vi,vindex) in item.VideoPath.split(',')" class="videoLine">
												 <video :src="vi" style="width: 160rpx;height: 160rpx;" preload="auto" playsinline webkit-playsinline></video>
												<view class="videoLineZz"></view>
												<!-- <img src="http://dmsphoto.66km.com.cn/thFiles/C8C06AA1-7775-4C23-9454-38C64E004DA8.png" alt="" style="width: 160rpx;height: 160rpx;"> -->
											</view>
										</view>
									</view>
									<!-- <view class="video-button carjcvideo-button" v-if="item.VideoPath&&!item.showVideo2">
										<view class="video-play" @click="ckVideo2(item)"></view>
										查看视频
									</view> -->

									<view class="video-wrapper" v-if="item.showVideo">
										<video :src="item.VideoURL"></video>
										<!-- <video-player class="vjs-custom-skin" :options="getPlayerOptions(item.VideoURL)"></video-player> -->
									</view>
									<view class="video-wrapper" v-if="item.showVideo2">
										<view v-for="(vi,vindex) in item.VideoPath.split(',')">
											<video :src="vi"></video>
										</view>
										
										
									</view>
									<view class="car-report-remarks" v-if="item.SectionType&&item.Comment">
										<p><span>备注：</span>{{item.Comment}} </p>
									</view>
								</view>
							</view>
						</view>
						<!-- </collapse-transition> -->
					</view>
				</view>
			</view>


		</view>
		<!-- 手机号授权 -->
		<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
			<view class="authorizCont" @click.stop="">
				<view class="authorizName">{{wxOpenData.miniAppName}}</view>
				<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
				<button class="authorizContbutton" type="default" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">授权</button>
			</view>
			<view style="text-align: center;padding-top: 56rpx;">
				<image src="../../static/img/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
			</view>
		</view>
		
		<view class="authorizBox videoZz" v-if="videoUrlShow"  @click="videoUrlShow=false">
			<view class="videoCont" @click.stop="">
				<video :src="videoUrl" autoplay></video>
			</view>
		</view>
	</view>
</template>

<script>
	//import homenav from "../../components/homenav/nav.vue"
	export default {
		components: {
			//homenav
		},
		data() {
			return {
				detailData: {},
				listData: {},
				id: '',
				userInfo: '',
				ext: '',
				wxOpenData: '',
				authorizShow: false,
				code: '',
				iStatusBarHeight:'',
				videoUrl:'',
				videoUrlShow:false,
			}
		},
		onLoad(opt) {
			//this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			uni.setNavigationBarTitle({
			    title: '检测报告' // 设定新标题
			  });
			this.id = opt.id;
			this.getDetail()
			/* this.userInfo = this.$store.state.userInfo;
			this.ext = this.$common.getExtStoreId();
			if (this.userInfo) {
				if (this.id) {
					this.getDetail()
				}
			} else {
				this.$common.automaticlogin().then(val => {
					this.userInfo = this.$store.state.userInfo;
					this.wxOpenData = this.$store.state.wxOpenData;
					this.themeColor = uni.getStorageSync("themeColor");
					if (this.id) {
						this.getDetail()
					}
					if(!this.userInfo){
						this.authorizShow=true
					}
				})
			 }*/

		},
		methods: {
			showVideo(url){
				this.videoUrl=url
				this.videoUrlShow=true
			},
			seeImg2(arr,index){
				uni.previewImage({
					urls: arr,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', ],
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			seeImg(img){
				console.log(img)
				var arr=img.split(',')
				uni.previewImage({
					urls: arr,
					//current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			seeImg3(img,index){
					var arr=img.split(',')
					uni.previewImage({
						urls: arr,
						current: index,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', ],
							success: function(data) {
							},
							fail: function(err) {
							}
						}
					});
			},
			sphotos(arr,index){
				uni.previewImage({
					urls: arr,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.detailData.mobilePhone
				});
			},
			decryptPhoneNumber: function(e) {
				console.log(e);
				this.code = e.detail.code
				this.wxPhoneLogin()
				this.authorizShow = false;
			},
			wxPhoneLogin() {
				var that = this;
				this.$http('miniApp2/sys/wxPhoneLogin', {
					appId: this.ext.appId,
					unionId: this.ext.unionId,
					code: this.code,
					openId: this.wxOpenData.openid
				}, 'POST').then(res => {
					var data = res.data;
					if (data.loginInfo) {
						this.userInfo = data.loginInfo.openUser;
						this.wxOpenData = data.loginInfo;
						this.$store.commit('mutationswxOpenData', data)
						this.$store.commit('mutationsuserInfo', this.userInfo)
						this.getDetail()
					}
				})
			},

			ckd(status) {
				status.show = !status.show
			},
			ckVideo(item) {
				console.log("点击视频")
				item.showVideo = !item.showVideo
			},
			ckVideo2(item) {
				console.log("点击视频")
				item.showVideo2 = !item.showVideo2
			},
			getPlayerOptions(url) {
				return {
					// videojs options
					muted: true,
					language: 'zh',
					width: document.documentElement.clientWidth - 40,
					height: (document.documentElement.clientWidth - 40) / 16 * 9,
					playbackRates: [0.7, 1.0, 1.5, 2.0],
					sources: [{
						type: 'video/mp4',
						src: url
					}]
				}
			},
			getDetail() {
				this.$http('opencheckReport/getTestReportDetails', {
					sheetId: this.id
				}, 'GET').then(res => {
					let data = [{
						name: '急需处理',
						value: res.data.ultimateOutcome[3],
						valueType: 3,
						message: '以下项存在异常，请尽快去处理哟~',
						show: true
					}, {
						name: '密切关注',
						value: res.data.ultimateOutcome[2],
						valueType: 2,
						message: '以下项需保持关注~',
						show: true
					}, {
						name: '状态良好',
						value: res.data.ultimateOutcome[1],
						valueType: 1,
						message: '以下项没有异常，请保持定期检测哟~',
						show: false
					}]
					data.forEach((item, index) => {
						item.value && item.value.forEach((item2, index2) => {
							this.$set(item2, 'name', Object.keys(item2)[0])
							this.$set(item2, 'value', item2[Object.keys(item2)[0]])
							this.$set(item2, 'showVideo', false)
							this.$set(item2, 'showVideo2', false)
							this.$set(item2, 'VideoPath', item2.value[0].VideoPath)
							this.$set(item2, 'VideoName', item2.value[0].VideoName)
							this.$set(item2, 'VideoURL', item2.value[0].VideoURL)
							this.$set(item2, 'photoPath', item2.value[0].photoPath && item2.value[
								0].photoPath.split(',') || [])
							this.$set(item2, 'Comment', item2.value[0].Comment)
							this.$set(item2, 'Describe', item2.value[0].Describe)
							this.$set(item2, 'SectionType', item2.value[0].SectionType)
							this.$set(item2, 'SectionPic', item2.value[0].SectionPic)
							this.$set(item2, 'photoAllPath', item2.value[0].photoAllPath)
							
							/* var imglist=[]
							item2.value && item2.value.forEach((item3, index3) => {
								if(item3.SectionType==0){
									if(item3.photoPath){
										var imgArr=item3.photoPath.split(',')
										imglist=imglist.concat(imgArr)
									}
								}
								
							}) */
							//this.$set(item2, 'imglist', imglist)
							
						})
					})
					console.log(data)
					this.detailData = res.data
					this.listData = data

				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.image-list {
		display: block;
	}

	.image-list-item {
		vertical-align: top;
		position: relative;
		display: inline-block;
		width: 25%;
		margin: 4rpx auto;
	}
    .image-list-item  .image-list-item-img{
		width: 160rpx;
		height: 160rpx;
	}
	.remove {
		position: absolute;
		text-align: center;
		line-height: 20rpx;
		border-radius: 50%;
		font-size: 20rpx;
		font-weight: 700;
		color: rgb(255, 255, 255);
		right: 10%;
		top: 0px;
		height: 20rpx;
		width: 20rpx;
		background-color: gray;
		display: block;
	}

	img {
		display: block;
		width: 85rpx;
		height: 85rpx;
		vertical-align: center;
		border: 1px solid rgba(247, 247, 247, 1);
		border-radius: 10rpx;
		object-fit: contain;
		cursor: pointer;
	}

	.newjcbgD .newcar-report {
		// background: url('http://dmsphoto.66km.com.cn/thFiles/58BF776D-0B1D-420A-A7C1-BAE6FA7E8695.png') no-repeat;
		background-size: 100%;
		position: relative;
		background: #F7F7F7;

	}

	.newcar-reportTs {
		font-size: 44rpx;
		color: #ffffff;
		font-weight: 600;
		position: absolute;
		top: 50rpx;
		left: 24rpx;
	}

	.car-report {
		// background: url("http://dmsphoto.66km.com.cn/thFiles/B5701B43-38A7-48A9-928D-7C8CCCE750D6.png") 100% -70px no-repeat;
		background-size: contain;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.car-report-title {
		margin-top: 140rpx;
	}

	.report-title-box {
		h4 {
			margin-left: 10rpx;
			margin-bottom: 30rpx;

			.car-list-container-title {

				h5,
				h3,
				.km-con {
					color: white;
				}
			}
		}
	}

	.car-list-container-icon {
		width: 72rpx;
		height: 72rpx;
		display: inline-block;
	}

	.car-list-container-title {
		display: inline-block;
		padding-left: 10rpx;

		>h5 {
			height: 36rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
			line-height: 36rpx;
			display: inline-block;
			margin-right: 10rpx;
		}

		.km-con {
			height: 33rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			line-height: 33rpx;
			border-radius: 5rpx;
			border: 2rpx solid rgba(221, 221, 221, 1);
			display: inline-block;
			padding: 2rpx 11rpx;
			transform: translateY(-4rpx);
		}

		>h3 {
			width: 550rpx;
			height: 33rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 33rpx;

		}
	}

	.car-report-item {
		background-color: #fff;
		padding: 30rpx 20rpx;
		// box-shadow: 0px 0px 10rpx 0px rgba(153, 153, 153, 0.16);
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;

		.car-report-item-info {
			padding: 15rpx 0;


			.car-report-rv {
				width: 331rpx;
				height: 465rpx;
				margin: 10rpx auto;
				position: relative;
			}

			.car-report-rv-buttom {
				width: 480rpx;
				height: 70rpx;
				background: url("http://dmsphoto.66km.com.cn/thFiles/1A42D7CB-072B-4565-95BA-878FA340B852.png") 100% 100% no-repeat;
				background-size: contain;
				margin: 10rpx auto;
			}

			.car-report-remarks {
				border-top: 2px solid #EEEEEE;
				padding-top: 10rpx;
				margin-top: 10rpx;
				margin-bottom: -10rpx;
			}

			.video-wrapper {
				margin-top: 20rpx;
				//border-radius:20px;
				object-fit: fill;
				overflow: hidden;

				.vjs-paused {
					overflow: hidden;
				}
			}

			.video-button {
				margin-top: 20rpx;
				height: 90rpx;
				background-color: #FEEFD8;
				display: flex;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(185, 144, 86, 1);
				line-height: 90rpx;

				.video-play {
					width: 50rpx;
					height: 50rpx;
					margin: 20rpx;
					display: inline-block;
					background: url("http://dmsphoto.66km.com.cn/thFiles/A7F13529-E889-4B2B-83B7-4CD5E322853D.png") 100% 100% no-repeat;
					background-size: contain;
				}
			}

			.warning-lamp {
				display: flex;
				justify-content: flex-start;
				align-content: center;
				flex-wrap: wrap;

				.img4 {
					margin-right: 0rpx;
				}

				.lamp-item {
					margin: 30rpx;
					margin-right: 55rpx;
					width: 80rpx;
					height: 70rpx;
					display: block;
					background: url("http://dmsphoto.66km.com.cn/thFiles/DE80CE12-534E-4AD0-921A-17051A4F5984.png") 100% 100% no-repeat;
					background-size: contain;
					position: relative;

					// &.check:after {
					// 	background: url("http://dmsphoto.66km.com.cn/thFiles/7E809DDE-FD2D-4158-A6EF-01FC855A5A2D.png") 100% 100% no-repeat;
					// 	background-size: contain;
					// }

					// &:after {
					// 	content: '';
					// 	width: 38rpx;
					// 	height: 38rpx;
					// 	border-radius: 50%;
					// 	border: 2px solid rgba(221, 221, 221, 1);
					// 	display: block;
					// 	position: absolute;
					// 	left: -50rpx;
					// 	top: 18rpx;
					// }

					&.error-lamp {
						// color: #F03B3B;

						// filter: drop-shadow(#F03B3B 10rpx 0);
						// &svg path {
						// 	fill: rgb(18, 136, 222)
						// }

					}
				}

			}

			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;

				}

				.info-status {
					margin-left: 10rpx;
					height: 38rpx;
					border-radius: 8rpx;
					border: 2rpx solid rgba(221, 221, 221, 1);
					padding: 2rpx 14rpx;
					text-decoration: none;
					font-style: normal;
					width: 115rpx;
				}
			}
		}

		.car-report-item-title {
			position: relative;

			&.error-title {
				.title-icon {
					background: url("http://dmsphoto.66km.com.cn/thFiles/69B1087C-79B4-40E3-99DD-7B6F7C334373.png") 100% 100% no-repeat;
				}

				>h4 {
					display: flex;
					font-weight: 400;
					color: rgba(240, 59, 59, 1);

					.title-icon {
						width: 36rpx;
						height: 36rpx;
						background-size: contain;
						margin-right: 10rpx;
						transform: translateY(2rpx);
					}
				}
			}

			&.ok-title {
				.title-icon {
					background: url("http://dmsphoto.66km.com.cn/thFiles/A331D98F-D90C-4170-BA36-EBD94C2B8EE1.png") 100% 100% no-repeat;
				}

				>h4 {
					display: flex;
					font-weight: 400;
					color: rgba(38, 150, 92, 1);

					.title-icon {
						width: 36rpx;
						height: 36rpx;
						background-size: contain;
						margin-right: 10rpx;
						transform: translateY(2px);
					}
				}
			}

			&.warning-title {
				.title-icon {
					background: url("http://dmsphoto.66km.com.cn/thFiles/C3B101F2-32E7-4247-A679-52C82C976E0D.png") 100% 100% no-repeat;
				}

				>h4 {
					display: flex;
					font-weight: 400;
					color: rgba(241, 157, 1, 1);

					.title-icon {
						width: 36rpx;
						height: 36rpx;
						background-size: contain;
						margin-right: 10rpx;
						transform: translateY(2px);
					}
				}
			}

			>h3 {
				height: 32rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
				line-height: 32rpx;
				padding-top: 10rpx;
				padding-bottom: 30rpx;
				border-bottom: 2px solid #EEEEEE;
				padding-right: 200rpx;

			}

			>h4 {
				position: absolute;
				top: 6rpx;
				right: 0;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 42rpx;
			}
		}

		&.report-error {
			.report-status-count {
				background-color: rgb(255, 77, 15);
			}
		}

		&.report-warning {
			.report-status-count {
				background-color: rgb(244, 165, 11);
			}
		}

		&.report-ok {
			.report-status-count {
				background-color: rgb(41, 162, 87);
			}
		}

		.report-status-count {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin: 10rpx 20rpx;
			margin-left: 0;
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.report-status {
			flex-grow: 1;

			>h3 {
				height: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 45rpx;
				margin-bottom: 10rpx;
				padding-top: 15rpx;

			}

			>p {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 33rpx;
			}
		}

		.car-report-statistics {
			display: flex;
			justify-content: space-around;

			.car-report-statistics-item {
				>h3 {
					text-align: center;
					height: 40rpx;
					font-size: 44rpx;
					font-weight: 500;
					// line-height: 62rpx;
				}

				>p {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					line-height: 40rpx;
				}
			}
		}

		h5 {

			margin: 0 0 16rpx 8rpx;
			width: 600rpx;
			height: 37rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 37rpx;

			.phone {
				position: absolute;
				right: 40rpx;
				top: 24rpx;
				width: 30rpx;
				height: 40rpx;
				display: inline-block;
				background: url("http://dmsphoto.66km.com.cn/thFiles/36EFD213-1D81-4153-AFFD-33BE701E5DBF.png") 100% no-repeat;
				background-size: contain;
			}

			.shop-icon {
				vertical-align: sub;
				transform: translateY(-2rpx);
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.fule {
		display: flex;
	}

	.newjcbgD .hhhhh5 {
		height: 44rpx !important;
		font-weight: 500 !important;
		color: #3C3C3C !important;
		font-size: 28rpx !important;
	}

	.newjcbgD .hxxhhh5 {
		padding-left: 50rpx;
		color: #999999 !important;
	}

	.newjcbgD .shop-icon2 {
		/* background: url(../newimg/icon_store@2x.png);
		background-size: 100% !important; */
		width: 40rpx;
		height: 44rpx;
		margin-right: 10rpx;

	}

	.newjcbgD .car-report .car-report-item h5 .phone {
		background: url('http://dmsphoto.66km.com.cn/thFiles/AA0ED98C-DC25-41D0-B09A-9ACC497D017A.png');
		background-size: 100% 100% !important;
		width: 60rpx;
		height: 60rpx;
	}

	.report-color-red {
		color: rgba(240, 59, 59, 1) !important;
		border-color: rgba(240, 59, 59, 1) !important;
	}

	.report-color-yellow {
		color: rgb(242, 157, 0) !important;
		border-color: rgb(242, 157, 0) !important;
	}

	.report-color-green {
		color: rgba(38, 150, 92, 1) !important;
		border-color: rgba(38, 150, 92, 1) !important;
	}

	.authorizBox {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
	}

	.authorizCont {
		margin-top: 30vh;
		width: 564rpx;
		height: 408rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-left: 93rpx;
		position: relative;
	}

	.authorizCloseImg {
		width: 62rpx;
		height: 62rpx;
	}

	.sqLogoBox {
		width: 180rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 90rpx;
		text-align: center;
		position: absolute;
		top: -50rpx;
		left: 192rpx;
	}

	.authorizName {
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
		text-align: center;
		padding-top: 58rpx;
	}

	.authorizMs {
		color: #999999;
		line-height: 36rpx;
		font-size: 26rpx;
		width: 452rpx;
		padding-top: 24rpx;
		text-align: center;
		margin-left: 56rpx;
	}

	.authorizContbutton {
		width: 422rpx;
		height: 88rpx;
		background: #D53533;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 62rpx;
		margin-left: 71rpx;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.icon-select-down {
		width: 34rpx;
		height: 22rpx;
	}

	.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;
	}
	.videoLine{
		position: relative;
		margin-top: 20rpx;
	}
	.videoLineZz{
		width: 160rpx;height: 160rpx;
		position: absolute;top: 0;left: 0;
		z-index: 11;
	}
	.videoCont{
		width: 100vw;
	}
	.videoCont video{
		width: 100vw;
	}
	.videoZz{
		display: flex;
		align-items: center;
	}
	.seeImg{
		padding-left: 20rpx;font-size: 26rpx;
		color: #1677FF;line-height: 40rpx;
	}
	.seeImg2{
		font-size: 26rpx;
		color: #1677FF;line-height: 40rpx;
	}
	.imgLineBox{
		display: flex;
	}
	.lineImg{
		width: 160rpx;height: 160rpx;
	}
	.imgView{
		margin-right: 20rpx;
		padding-top: 16rpx;
		padding-bottom: 20rpx;
	}
</style>