ParkApp/pages/index/fire/detail.vue

<template>
	<view class="page">
		<view class="data" >
			<view class="top">
				<view class="left">
					
					<view class="title flex " style="padding:0  24rpx;">
						<u-icon size="32" name="pushpin-fill" color="#5064eb"></u-icon>
						<text class="padding-left-10 text-lg text-bold">IEMI：{{dataDetail.imei}}</text>
						<text @click.stop="copy(dataDetail.imei)" style="text-decoration: underline;" class="base-color padding-left-20">复制</text>
					</view>
				</view>
				<view class="right">
					<view v-if="dataDetail.defenseStatus==1" style="font-size: 22rpx;" class="radius sm cu-btn line-green">
						已上线
					</view>
					<view v-if="dataDetail.defenseStatus==2" style="font-size: 22rpx;" class="radius sm cu-btn line-red">
						已下线
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view style="padding: 0 30rpx;">
						<view class="content flex">
							<u-icon size="32" name="bookmark-fill" color="#5064eb"></u-icon>
							<text class="text-bold padding-left-10">设备名称：</text>
							<text>{{dataDetail.deviceName}}</text>
						</view>
						<view class="content flex align-center justify-start">
							<u-icon  size="36" name="map" color="#5064eb"></u-icon>
							<text class="text-bold padding-left-10" >安装位置：</text>
							<text  v-text="dataDetail.deviceInstallAddress?dataDetail.deviceInstallAddress:'未知'"  style="padding-top: 8rpx;" ></text>
						</view>
						
						<view class="content flex align-center justify-start">
							<u-icon  size="36" name="home" color="#fd9510"></u-icon>
							<text class="text-bold padding-left-10">所属企业：</text>
							<text  v-text="dataDetail.enterpriseNames?dataDetail.enterpriseNames:'未知'"  style="padding-top: 8rpx;" ></text>
						</view>
						
						
						<view  class="content flex">
							<u-icon size="32" name="clock-fill" color="#5064eb"></u-icon>
							<text class="text-bold padding-left-10">更新时间：</text>
							<text class="text-unknow" style="padding-top: 8rpx;"  v-text="dataDetail.updateTime?dataDetail.updateTime:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="changshangguanliyuan" custom-prefix="custom-icon" size="32" color="#00aa00"></u-icon>
							<text class="text-bold padding-left-10">厂商名称：</text>
							<text :class="dataDetail.manufacturers?'':'text-unknow'"  v-text="dataDetail.manufacturers?dataDetail.manufacturers:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="ICCID" custom-prefix="custom-icon" size="32" color="#5064eb"></u-icon>
							<text class="text-bold padding-left-10">ICCID：</text>
							<text :class="dataDetail.iccid?'':'text-unknow'"  v-text="dataDetail.iccid?dataDetail.iccid:'未知'"></text>
						</view>
						
						<view  class="content flex">
							<u-icon name="MCUruanjianyouneirong" custom-prefix="custom-icon" size="32" color="#ff00ff"></u-icon>
							<text class="text-bold padding-left-10">Mcu软件版本：</text>
							<text :class="dataDetail.mcuEdition?'':'text-unknow'"  v-text="dataDetail.mcuEdition?dataDetail.mcuEdition:'未知'"></text>
						</view>
						
						<view  class="content flex">
							<u-icon name="xinghao" custom-prefix="custom-icon" size="32" color="#64c692"></u-icon>
							<text class="text-bold padding-left-10">NB模组型号：</text>
							<text :class="dataDetail.nbModuleModel?'':'text-unknow'"  v-text="dataDetail.nbModuleModel?dataDetail.nbModuleModel:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="banbenhao" custom-prefix="custom-icon" size="32" color="#5064eb"></u-icon>
							<text class="text-bold padding-left-10">NB模组版本信息：</text>
							<text :class="dataDetail.nbModuleEdition?'':'text-unknow'"  v-text="dataDetail.nbModuleEdition?dataDetail.nbModuleEdition:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="cichang" custom-prefix="custom-icon" size="32" color="#53b9b6"></u-icon>
							<text class="text-bold padding-left-10">当场磁场值：</text>
							<text :class="dataDetail.magneticField?'':'text-unknow'"  v-text="dataDetail.magneticField?dataDetail.magneticField:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="-" custom-prefix="custom-icon" size="32" color="#d0267b"></u-icon>
							<text class="text-bold padding-left-10">心跳保护时间：</text>
							<text :class="dataDetail.heartbeatTime?'':'text-unknow'"  v-text="dataDetail.heartbeatTime?dataDetail.heartbeatTime:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="wuxian" custom-prefix="custom-icon" size="32" color="#6c9a3a"></u-icon>
							<text class="text-bold padding-left-10">无线信号覆盖等级：</text>
							<text :class="dataDetail.wirelessLevel?'':'text-unknow'"  v-text="dataDetail.wirelessLevel?dataDetail.wirelessLevel:'未知'"></text>
						</view>
						<view  class="content flex">
							<u-icon name="fashegongshuai" custom-prefix="custom-icon" size="32" color="#afc629"></u-icon>
							<text class="text-bold padding-left-10">终端发射功率：</text>
							<text :class="dataDetail.transmittingPower?'':'text-unknow'"  v-text="dataDetail.transmittingPower?dataDetail.transmittingPower:'未知'"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'card',
	data() {
		return {
			loading:false,
			dataDetail:{}
		};
	},
	onShow() {
		this.dataDetail= getApp().globalData.fireHydrantDetail
	},
	onLoad(options) {
		let that = this;
		setTimeout(function() {
			that.loading = true
		}, 500)
	},
	methods:{
		copy(data){
			uni.setClipboardData({
				data:data
			})
		},
	}
};
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}

.line-green{
	border-color: #16aa5d;
	color: #16aa5d;
}

.line-red{
	border-color: #cf0000;
	color: #cf0000;
}

.text-unknow{
	color: $base-color;
}
	
.data {
	background-color: #ffffff;
	border-radius: 6rpx;
	box-sizing: border-box;
	margin-top: 40rpx;
	padding: 20rpx 10rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		// border-bottom: 1rpx solid $dt-border-color-sm;
		.left {
			display: flex;
			align-items: center;
			.title {
				margin: 0 10rpx;
				font-size: 30rpx;
			}
		}
		.right{
			margin-right: 10rpx;
		}
	}
	.item {
		margin: 5rpx 0 20rpx 0;
		.content {
			// border-bottom: 1rpx dashed #DDDDDD;
			padding: 30rpx 0;
		}
	}
	.bottom {
		display: flex;
		margin-top: 30rpx;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>