bigDataApp/components/equip-item/equip-item.vue

<template>
	<view class="item">
		<template v-if="$attrs.item.device_status==1">
			<view class="tag tag-on" ></view>
		</template>
		<template v-else>
			<view class="tag tag-off" ></view>
		</template>
		<view class="info">
			<text class="">设备ID：{{$attrs.item.device_id}}</text>
			<text v-if="$attrs.item.device_status==1" class="state on">在线</text>
			<text v-else  class="state off">离线</text>
		</view>
		<view class="date">
			最新上报时间：{{$attrs.item.status_time|timeFormat}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagOn:'../../static/image/tab-on.png',
				tagOff:'../../static/image/tab-off.png',
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.item {
		background: #fff;
		margin-top: 20rpx;
		padding: 10rpx 30rpx;
		padding-left:80rpx;
		border-radius: 4rpx;
		box-shadow: 0 0 4px 2px rgba(0, 0, 10, 0.05);
		line-height: 60rpx;
		position: relative;
		.tag {
			position: absolute;
			width: 30rpx;
			height: 60rpx;
			top: 0;
			left: 20rpx;
			background-repeat: no-repeat;
			background-size:100% auto;
			background-position: top left;
		}

		.tag-on {
			 background-image:url('~@/static/image/on.png');
		}

		.tag-off {
			  background-image:url('~@/static/image/off.png');
		}

		.info {
			border-bottom: 1px solid #F5F5F5;
			color: #333;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			.on {
				color: $uni-color-success;
			}
			.off{
				color:$uni-color-error;
			}

		}

		.date {
			color: #999;
			font-size: 24rpx;
		}
	}
</style>