<template>
	<view>
		<view style=" width:100%;  display:flex; flex-wrap: wrap;  ">
			<view :style="'width:'+widthpx+'rpx'" class="card" :class="addcardclass(item.priority)" v-for="(item,i) in list" :key="i">
			
				<uni-row style="height: 100rpx; line-height: 100rpx;border-radius: 5px;" :class="addfontclass(item.priority)">
						<uni-col :span="20">
							<view @click="clicktailnumber(item,false)">
								<label style="margin-left: 10px; font-size: 40rpx; font-weight: 600;" @click.stop="clicktailnumber(item,true)">{{item.tailnumber}}</label >
							</view>
						</uni-col>
						<uni-col :span="4">
							<uni-row style="height:100rpx ;">
								<image class="morepng" src="@/static/img/ahm/cardsmore.png" @click="toggle(item)">
								</image>
							</uni-row>
						</uni-col>
				</uni-row>
				<uni-row style="height: 100rpx;font-size: 28rpx;" class="row_height2">
					<uni-row class="text_align">
						<uni-col :span="6">
							<view style="color:#0299E3 ;" @click="todep(item.dep)">
								{{item.dep?item.dep:'--'}}
							</view>
							<view>
								{{item.flightLegs.length == 0 ?'--':item.flightLegs[0].outTime? moment.utc(item.flightLegs[0].outTime).format("HH:mm"):'--'}}
							</view>
						</uni-col>

						<uni-col :span="12">
							<uni-row>
								<oooi v-if="item.svgStep" :step="item.svgStep" :time="item.svgTime"
									:timeName="item.svgTimeName"></oooi>
								<view v-if="!item.currentLeg.rtg && !item.svgStep"> -无- </view>
							</uni-row>
						</uni-col>
						<uni-col :span="6">
							<view style="color:#0299E3 " @click="todep(item.arr)">
								{{item.arr?item.arr:'--'}}
							</view>
							<uni-row >
								{{item.flightLegs.length == 0 ?'--': item.flightLegs[0].inTime? moment.utc(item.flightLegs[0].inTime).format("HH:mm") :'--'
                                }}

							</uni-row>
						</uni-col>
					</uni-row>
				</uni-row>
				
				<view style="margin-left:2px ;margin-right: 2px;position:relative;">
					<view style="height: 3px ; background-color: #cccccc; "></view>
					<view v-if="faultAry" v-for="(faultItem, ind) in item.afault" :key="ind" :style="{
                            position: 'absolute',
                            width: '4px',
                            left: faultItem.left,
                            height: '3px',
                            top: 0,
                            background: faultItem.color,
                            }" > </view>
				</view>
				<uni-row style="height: 100rpx; line-height: 100rpx; " class="row_height3  ">
					<uni-col :span="16" style="height: 100rpx;">
						
						<uni-icons v-if="item.etopsFlight && item.tailnumber" style="float: left;padding-left: 4rpx;"  custom-prefix="iconfont" type="icon-fleetEtops" size="26"
							></uni-icons>
						<uni-icons v-if="item.alertNotPriority >= 0" style="float: left;"  custom-prefix="iconfont" type="icon-yujing" size="26"
							></uni-icons>
						<view v-if="item.mmsgPriority >= 0" class="background_mmsg text_align"
							:class="addclass(item.mmsgPriority)">M</view>
						<view v-if="item.mmoPriority >= 0" class="background_mmo text_align"
							:class="addclass(item.mmoPriority)">M</view>
						<view v-if="item.alertSerPriority >= 0" class="background_ser text_align"
							:class="addclass(item.alertSerPriority)">
							<view class="background_ser_font">N</view>
						</view>
						<view v-if="item.alertSysPriority >= 0" class="background_sys " :class="addclass(item.priority)">
							<view class="background_sys1 " :class="addclass(item.priority)">
								<view class="background_ser_font1">N</view>
							</view>
						</view>
						<view></view>
					</uni-col>
					<uni-col :span="8">
						<uni-row style="font-size: 30rpx;" class="text_align">
							<view style="color:#0299E3 ;" @click="toflightLegs(item)"> {{item.currentFlight}} </view>
						</uni-row>
					</uni-col>
				</uni-row>
				<uni-row>
					<view style="height: 3px ;"></view>
				</uni-row>

			</view>
		</view>
		<view>
			<uni-popup ref="popup" type="bottom">
				<view style="background-color: #ffffff;">
					
					<view  style="padding-top: 5px; padding-bottom: 5px;   text-align: center;" >
						<view v-if="carditem.efReport" @click="tofault('EF')">
							EF-当前故障
						</view>
						<view v-else style="color: #cccccc;">
							EF-当前故障
						</view>
					</view>
					<view style="padding-top: 5px; padding-bottom: 5px;text-align: center;" >
						<view v-if="carditem.isFault" @click="tofault('FS')">
							FS-故障汇总
						</view>
						<view v-else style="color: #cccccc;">
							FS-故障汇总
						</view>
					</view>
					<view style="padding-top: 5px; padding-bottom: 5px;text-align: center;" @click="tohistoryLeg()">
						历史航段
					</view>
					<view style="padding-top: 5px; padding-bottom: 5px;text-align: center;" @click="toflightLeg()">
						航段详情
					</view>
					<view style="padding-top: 5px; padding-bottom: 5px;text-align: center;" @click="toddfc()">
						DD/FC清单
					</view>
					
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getMonitorInfo,
	
	} from '@/utils/requestahm.js'
	//import oooiSvg from "@/components/oooi/index.js";
	import oooi from '@/pages/components/ahm/oooi.vue';
	import moment from "moment"
	export default {
		name: "card-view",
		data() {
			return {

				moment,
				//widthpx:'175',
				flatInfoObj: '',
				faultAry: [],
				popuplist: [],
				type: '',
				utc_flg: true,
				priorityList: [{
						value: 1,
						name: '低',
						color: '#fdd000',
						//icon: low
					},
					{
						value: 2,
						name: '中',
						color: '#FF9900',
						//icon: mid
					},
					{
						value: 3,
						name: '高',
						color: '#E60000',
						//icon: high
					}
				],
				carditem: {},
				eventListByReportTypeLegIdData: [],


			}
		},
		props: {
			// item: {
			// 	type: Object,
			// 	default: {}
			// },
			list: {
				type: Array,
				default: () => [],
			},
			widthpx: {
				type: Number,
				default: 170,
			}
		},
		components: {
			oooi
		},
		methods: {
			
			//点击机号 空白显示故障汇总和当前故障
			clicktailnumber(itemcard,falgs){
				
				//true 点击机号 false 跳转故障汇总
				if(!falgs){					
					const cleg = itemcard.flightLegs?.find((item) => itemcard.totalLeg - item.leg === 0) ??
						itemcard.flightLegs?. [0] ?? {};
					
					let param = {
						legId: cleg.id,
						fleet: itemcard.fleet,
						tailNumber: itemcard.tailnumber,
						currentRow: {
							tailnumber: itemcard.tailnumber,
							fleet: itemcard.fleet,
							flightNo: itemcard.currentFlight,
							totalLeg: itemcard.totalLeg,
							leg: cleg.leg,
							dep: itemcard.dep,
							arr: itemcard.arr,
							latestAcarsTime: itemcard.latestAcarsTime,
						},
					}
					param.reportType = 'Fault'
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/fault_count?param=' +
							encodeURIComponent(JSON.stringify(param))
					})
					
				}else{
					//显示历史航段 ddfc信息 和未来72小时航班动态
					
					const cleg = itemcard.flightLegs?.find((item) => itemcard.totalLeg - item.leg === 0) ??
						itemcard.flightLegs?. [0] ?? {};
					
					let param = {
						legId: cleg.id,
						fleet: itemcard.fleet,
						tailNumber: itemcard.tailnumber,
						flightLegs: itemcard.flightLegs,
						currentFlight:itemcard.currentFlight,
						currentRow: {
							tailnumber: itemcard.tailnumber,
							fleet: itemcard.fleet,
							flightNo: itemcard.currentFlight,
							totalLeg: itemcard.totalLeg,
							leg: cleg.leg,
							dep: itemcard.dep,
							arr: itemcard.arr,
							latestAcarsTime: itemcard.latestAcarsTime,
						},
					}
					param.reportType = 'Fault'
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/fleet_count?param=' +
							encodeURIComponent(JSON.stringify(param))
					})
					
				}
			},

			judgeCurrentFlatInfo(record) {
				
				const {
					flightLegs
				} = record;
				if ((flightLegs || []).length) {
					// 判断关系
					let prevInfo = {
						isPrev: true,
						record
					};
					let nextInfo = {
						isNext: true,
						record
					};
					let currentInfo = {
						iscurrent: true,
						record
					};
				
					const currentTime = this.moment();
					flightLegs.forEach(flightItem => {
						const {
							outTime,
							inTime,
							takeoffTime,
							eta
						} = flightItem;
						if (outTime) {
							// 起飞时间
							if (currentTime.isAfter(this.moment(outTime))) {
								// 如果当前时间 isAfter 起飞时间 说明已起飞 进一步判断 当前时间 与 着陆时间关系
								if (inTime && currentTime.isAfter(this.moment(inTime))) {
									// 如果 当前时间 isAfter  着陆时间，说明当前航班航线 航程已结束 则记录 当前时间与着陆时间的时间差（时间戳）
									if (prevInfo.time != null) {
										prevInfo.time = Math.min(prevInfo.time, currentTime.diff(this.moment(
											inTime)));
									} else {
										prevInfo.time = currentTime.diff(this.moment(inTime));
									}
									prevInfo.item = flightItem;
									// currentTime.isSameOrBefore(this.$moment(eta))
								} else if (!inTime) {
									// 如果 没有着陆时间或者当前时间 isBefore 着陆时间 则需要当前时间与 预计着陆时间关系，如果当前时间 isBefore 或者 isSame 预计着陆时间 则代表行程中 直接显示 当前航班航线
									currentInfo.item = flightItem;
								}
							}
						} else if (takeoffTime && currentTime.isBefore(takeoffTime)) {
							// 预计起飞 如果没有起飞时间，并且 当前时间 isBefore 预计起飞时间 则说明 当前航班航线 未起飞，则记录 当前时间与预计起飞时间的时间差（时间戳）
							if (nextInfo.time != null) {
								nextInfo.time = Math.min(nextInfo.time, this.moment(takeoffTime).diff(
									currentTime)); // 记录
							} else {
								nextInfo.time = this.moment(takeoffTime).diff(currentTime);
							}
							nextInfo.item = flightItem;
						}
					});
					let flatInfo = {};
					if (currentInfo.item) {
					
						// 说明正在飞行中
						flatInfo = {
							...currentInfo,
							svgStep: record.svgStep,
						}
					} else if (prevInfo.time && (!nextInfo.time || prevInfo.time <= nextInfo.time)) {
					
						// 历史航班 近
						flatInfo = prevInfo
					} else if (nextInfo.time) {
						
						// 未来航班近
						flatInfo = nextInfo;
					}
					this.signFault(flatInfo);
				
					return flatInfo;
				}
				return false;
			},
			//故障条
			signFault(flatInfo) {
				
				this.faultAry =[]
				const faultAry = [];
				const {
					outTime,
					events,
					inTime,
					eta,
					offTime
				} = flatInfo.item || {};
				
				if (outTime && (events || []).length) {
					
					const groundTime = inTime || eta || offTime || flatInfo.record.eta || this.moment.utc(new Date()).add(
						30, "minute").format("YYYY-MM-DD HH:mm:ss");
					const outTimeNumber = +this.moment(outTime);
					const groundTimeNumber = +this.moment(groundTime);
					//console.log('时间戳', {outTimeNumber, groundTimeNumber});
					events.forEach(eventItem => {
						if (eventItem.msgTime) {
							const priorityItem = this.priorityList.find(item => item.value === eventItem.priority);
							if (priorityItem) {
								const msgTimeNumber = +this.moment(eventItem.msgTime);
								if( ((msgTimeNumber - outTimeNumber) / (groundTimeNumber - outTimeNumber) * 100 ) > (-1)&&((msgTimeNumber - outTimeNumber) / (groundTimeNumber - outTimeNumber) * 100 ) < (200)){
									faultAry.push({
										color: priorityItem.color,
										//left: `${(msgTimeNumber - outTimeNumber) / (groundTimeNumber - outTimeNumber)}`,
										left: `${(msgTimeNumber - outTimeNumber) / (groundTimeNumber - outTimeNumber) * 100}%`,
									});
								}
								
							}
						}
					});
				}
				
				this.faultAry = faultAry;
			},
			//
			todep(v) {				
				if(v){
					uni.navigateTo({
					    url: '/pages/modules/ahm/fraMonitoring/airportDetails?threeCode=' + v
					       
					})
				}
			},
			//航段详情
			toflightLegs(itemfls) {
				const cleg = itemfls.flightLegs?.find((item) => itemfls.totalLeg - item.leg === 0) ??
					itemfls.flightLegs?. [0] ?? {};
				
				//关闭弹出框
				this.$refs.popup.close()
				let param ={
					tailNumber : itemfls.tailnumber,
					leg: cleg.leg,
					fleet: itemfls.fleet,
					totalLeg: itemfls.totalLeg,
					latestAcarsTime: itemfls.latestAcarsTime
					
				}
				
				uni.navigateTo({
					url: '/pages/modules/ahm/fraMonitoring/flightLegDetails?param=' +
							encodeURIComponent(JSON.stringify(param))
			
				})
			},
			//航段详情
			toflightLeg() {
				
				const cleg = this.carditem.flightLegs?.find((item) => this.carditem.totalLeg - item.leg === 0) ??
					this.carditem.flightLegs?. [0] ?? {};
				
				//关闭弹出框
				this.$refs.popup.close()
				let param ={
					tailNumber : this.carditem.tailnumber,
					leg: cleg.leg,
					fleet: this.carditem.fleet,
					totalLeg: this.carditem.totalLeg,
					latestAcarsTime: this.carditem.latestAcarsTime
					
				}
				
				uni.navigateTo({
					url: '/pages/modules/ahm/fraMonitoring/flightLegDetails?param=' +
							encodeURIComponent(JSON.stringify(param))

				})
			},
			
			//DD/FC清单
			toddfc() {
				//关闭弹出框
				this.$refs.popup.close()
				let param ={
					tailnumber : this.carditem.tailnumber,
				}
				uni.navigateTo({
					url: '/pages/modules/ahm/fraMonitoring/ddfcInfoForm?param=' +
							encodeURIComponent(JSON.stringify(param))			
				})
			},
			//72小时航班信息
			toFlight72(itemcard) {
				
				let param = {
					tailnumber : itemcard.tailnumber,
					fleet  : itemcard.fleet,
					currentFlight : itemcard.currentFlight,
					flightLegs: itemcard.flightLegs,
				}
			
				uni.navigateTo({
					url: '/pages/modules/ahm/fraMonitoring/flightInform?param=' + encodeURIComponent(JSON.stringify(param))
							
				})
			},
			//航段历史
			tohistoryLeg() {
				this.$refs.popup.close()  
				let param = {
					tailnumber : this.carditem.tailnumber,
					fleet  : this.carditem.fleet,
					latestAcarsTime :   this.carditem.latestAcarsTime
				} 
				uni.navigateTo({
					url: '/pages/modules/ahm/fraMonitoring/historyLeg?param=' +
							encodeURIComponent(JSON.stringify(param))
				})
			},
			//EF FS 跳转
			tofault(str) {
				
				this.$refs.popup.close()
				const cleg = this.carditem.flightLegs?.find((item) => this.carditem.totalLeg - item.leg === 0) ??
					this.carditem.flightLegs?. [0] ?? {};
				
				let param = {
					legId: cleg.id,
					fleet: this.carditem.fleet,
					tailNumber: this.carditem.tailnumber,
					currentRow: {
						tailnumber: this.carditem.tailnumber,
						fleet: this.carditem.fleet,
						flightNo: this.carditem.currentFlight,
						totalLeg: this.carditem.totalLeg,
						leg: cleg.leg,
						dep: this.carditem.dep,
						arr: this.carditem.arr,
						latestAcarsTime: this.carditem.latestAcarsTime,
					},
				}
				let falg = str
				if (falg == 'EF') {
					param.reportType = 'EFFDE'
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/fault_current?param=' +
							encodeURIComponent(JSON.stringify(param))
					})
				} else if (falg == 'FS') {
					param.reportType = 'Fault'
					uni.navigateTo({
						url: '/pages/modules/ahm/fraMonitoring/fault_Summary?param=' +
							encodeURIComponent(JSON.stringify(param))
					})
					
				}
			},

			//弹窗
			toggle(item) {
				
				this.carditem = item
				this.$refs.popup.open()
			},
			close() {
				if (this.popuplist.currentLeg.efReport) {
				
					this.$refs.popup.close()
				} else {
					
				}
			},
			//根据级别不同切换不同的背景
			addclass(i) {
				switch (i) {
					case 0:
						return 'background_color';
					case 1:
						return 'background_color1';
					case 2:
						return 'background_color2';
					case 3:
						return 'background_color3';
				}
			},
			addcardclass(i) {
				switch (i) {
					case 0:
						return 'background_color0';
					case 1:
						return 'background_color1';
					case 2:
						return 'background_color2';
					case 3:
						return 'background_color3';
				}
			},
			addfontclass(i) {
				if (i != null && i > 0) {
					return 'background_white';
				} else {
					return 'background_black';
				}

			},
			clickLeft() {
				uni.navigateBack()
			},
			async getDates() {
				// //显示加载框
				// uni.showLoading({
				//     title: '加载中'
				// });


				let listitem = this.list
				for (var i = 0; i < listitem.length; i++) {
					listitem[i].svgStep = 0;
					listitem[i].svgTimeName = "";
					listitem[i].currentLeg =
						listitem[i].flightLegs?.find(
							(item) => listitem[i].totalLeg - item.leg === 0
						) ??
						listitem[i].flightLegs?. [0] ?? {};
					const {
						outTime,
						offTime,
						onTime,
						inTime,
						latestAcarsTime
					} =
					listitem[i].currentLeg;
					listitem[i].svgTime = "";
					if (inTime) {
						listitem[i].svgStep = 5;
						if (this.utc_flg) {
							listitem[i].svgTime = this.moment.utc(inTime).format("HH:mm");
						} else {
							listitem[i].svgTime = this.moment.utc(inTime).utcOffset(8).format("HH:mm");
						}
						listitem[i].svgTimeName = "inTime";
					} else if (onTime) {
						listitem[i].svgStep = 5;
						if (this.utc_flg) {
							listitem[i].svgTime = this.moment.utc(onTime).format("HH:mm");
						} else {
							listitem[i].svgTime = this.moment.utc(onTime).utcOffset(8).format("HH:mm");
						}
						listitem[i].svgTimeName = "onTime";
					} else if (listitem[i].phase === "DC") {
						listitem[i].svgStep = 4;
						if (this.utc_flg) {
							listitem[i].svgTime = this.moment.utc(onTime).format("HH:mm");
						} else {
							listitem[i].svgTime = this.moment.utc(onTime).utcOffset(8).format("HH:mm");
						}
						listitem[i].svgTimeName = "DC";
					} else if (listitem[i].phase === "ER") {
						listitem[i].svgStep = 3;
						if (this.utc_flg) {
							listitem[i].svgTime = latestAcarsTime ?
								this.moment.utc(latestAcarsTime).format("HH:mm") :
								this.moment.utc(offTime).format("HH:mm")
						} else {
							listitem[i].svgTime = latestAcarsTime ?
								this.moment.utc(latestAcarsTime).utcOffset(8).format("HH:mm") :
								this.moment.utc(offTime).utcOffset(8).format("HH:mm")

						}
						listitem[i].svgTimeName = "ER";
					} else if (offTime) {
						listitem[i].svgStep = 2;
						if (this.utc_flg) {
							listitem[i].svgTime = this.moment.utc(offTime).format("HH:mm")
						} else {
							listitem[i].svgTime = this.moment.utc(offTime).utcOffset(8).format("HH:mm")
						}
						listitem[i].svgTimeName = "offTime";
					} else if (outTime) {
						listitem[i].svgStep = 1;
						if (this.utc_flg) {
							listitem[i].svgTime = this.moment.utc(outTime).format("HH:mm")
						} else {
							listitem[i].svgTime = this.moment.utc(outTime).utcOffset(8).format("HH:mm")
						}
						listitem[i].svgTimeName = "outTime";
					}
					
					if (listitem[i].currentLeg.rtg != null) {
						if (listitem[i].currentLeg.rtg) {
							listitem[i].svgTime = this.utc_flg ? this.moment.utc(listitem[i].currentLeg.rtgDate)
								.format("HH:mm") : this.moment.utc(listitem[i].currentLeg.rtgDate).utcOffset(8).format(
									"HH:mm")

						}
					}


				}
				//隐藏加载
				uni.hideLoading();
				
			},

			//处理时间返回 小时和分钟 utc_flg 为8 加8个小时
			converTimeV2(timeString, utc_flg) {
				let hour = ''
				if (utc_flg == 8) {
					hour = 8
				} else {
					hour = 0
				}

				let i = 0;
				i = i + 1;

				if (timeString == null) {
					
					return '--'
				} else {

					const time = new Date(timeString);
					var date = new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours() + hour,
						time.getMinutes(), time.getSeconds())
					var symbol_gang = "-";
					var symbol_maohao = ":";
					var strMonth = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
					var strDay = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var strHours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var strMinutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var strSeconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					// var currentdate = date.getFullYear() + symbol_gang + strMonth + symbol_gang + strDay
					//     + " " + strHours + symbol_maohao + strMinutes
					//     + symbol_maohao + strSeconds;
					var currentdate = strHours + symbol_maohao + strMinutes
					return currentdate;
				}

			},
			getNowFormatDate(date) { //获取当前时间
			
				var symbol_gang = "-";
				var symbol_maohao = ":";
				var strMonth = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var strDay = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var strHours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var strMinutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var strSeconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				var currentdate = date.getFullYear() + symbol_gang + strMonth + symbol_gang + strDay +
					" " + strHours + symbol_maohao + strMinutes +
					symbol_maohao + strSeconds;
				//var currentdate = strHours + symbol_maohao + strMinutes
				return currentdate;
			}

		},


		created() {
			
			//this.judgeCurrentFlatInfo(this.item);
			this.getDates()

		}

	}
</script>

<style scoped lang="scss">
	.card {
		border-radius: 5px;
		background-color: #ddf1ff;
		// width: 170px;
		//margin: 5px;
	}

	.morepng {
		width: 100rpx;
		height: 100rpx;
	}

	.text_align {
		text-align: center;
	}

	.row_height {
		border-radius: 5px;
	}

	.row_height3 {
		background-color: #ffffff;
		margin-left: 2px !important;
		margin-right: 2px !important;
		//border-radius: 2px;
	}


	.row_height2 {
		padding-top: 16rpx;

		margin-left: 2px !important;
		margin-right: 2px !important;
		background-color: #ffffff;
	}

	.row_line_height {
		line-height: 100rpx;
	}

	.a_display {
		display: flex;
	}



	//滚动样式
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	//设置
	.background_white {
		color: #ffffff;
	}

	.background_black {
		color: #000000;
	}

	//卡片背景
	.background_color0 {
		background-color: #ddf1ff; // 
	}

	//等级高低背景颜色不一致
	.background_color {
		background-color: #D7D7D7; //  '#D7D7D7'  #ddf1ff
	}

	.background_color1 {
		background-color: #fdd000;
	}

	.background_color2 {
		background: #FF9900; // !important
	}

	.background_color3 {
		background: #E60000;
	}

	.background_mmsg {
		float: left;
		height: 56rpx;
		width: 56rpx;
		margin-left: 5px;
		margin-top: 20rpx;
		line-height: 56rpx;
	}

	.background_mmo {
		float: left;
		height: 60rpx;
		width: 60rpx;
		margin-left: 5px;
		margin-top: 20rpx;
		line-height: 60rpx;
		border-radius: 50%
	}

	.background_ser {
		transform: rotate(45deg);
		float: left;
		height: 44rpx;
		width: 44rpx;
		margin-left: 10px;
		margin-top: 28rpx;
		line-height: 44rpx;
	}

	.background_ser_font {
		transform: rotate(-45deg);
	}

	.background_ser_font1 {
		position: relative;
		top: -20rpx;
		left: 6rpx;
		transform: rotate(-45deg);
	}

	.background_sys {
		float: left;
		height: 60rpx;
		width: 60rpx;
		margin-left: 10px;
		margin-top: 20rpx;
		line-height: 60rpx;
		border-radius: 50%;
		display: block;

	}

	.background_sys1 {
		top: 20rpx;
		left:10rpx;
		position: relative;
		float: left;
		height: 40rpx;
		width: 40rpx;
		transform: rotate(45deg);
	}

	.row_line {
		height: 2px;
		background-color: #D0D0DA;
		margin-left: 2px;
		margin-right: 2px;
	}
</style>
