bigdata_WX/components/equip-item/equip-item.vue

<template>
	<view class="item">
		<template v-if="item.is_online==1">
			<view class="tag tag-on" ></view>
		</template>
		<template v-else>
			<view class="tag tag-off" ></view>
		</template>
		<view class="info">
			<text class="">设备名称：{{item.device_name==""?"无":item.device_name}}</text>
			<text v-if="item.is_online==1" class="state on">在线</text>
			<text v-else  class="state off">离线</text>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagOn:'/image/tab-on.png',
				tagOff:'/image/tab-off.png',
			}
		},
		props:[
			'item'
		],
		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('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/on.png');
		}

		.tag-off {
			  background-image:url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/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>