<template>
	<view class="page_padding font14">
		<view class="padd_bot12 font14 flex_layout">
			<text>硬件设备状态</text>
			<view class="status font12"><text class="drop"></text>在线</view>
		</view>
		<view class="body-view contentboxsty">
			<view class="content-top flex_layout padd_bot12">
				<view class="flex1 theme_color">
					<text class="drop"></text>相机工作中
				</view>
				<view class="top_right" @click="toList()">
					更多安全事件
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
			<view class="content_monitor" style="width: 100%;">
				<image style="width: 100%;" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/background.png" mode=""></image>
			</view>
			<view class="content_data">
				<view class="device_row">
					<text class="name font_bold">设备名称</text>
					<text class="text">安全监控相机</text>
				</view>
				<view class="device_row">
					<text class="name font_bold">开机时间</text>
					<text class="text">2024-02-11 08:00:45</text>
				</view>
				<view class="device_row">
					<text class="name font_bold">安全事件</text>
					<text class="text">检测到指定区域内有目标越过警戒线</text>
				</view>
				<view class="device_row">
					<text class="name font_bold">检测时间</text>
					<text class="text">2024-01-11 19:09:56</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toList(){
				uni.navigateTo({
					url:'/pages/deviceStatus/detectionEventList'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.body-view{padding: 12px 13px;}
.theme_color{
	display: flex;align-items: center;
	.drop{width: 4px;height: 4px;background: $uni-text-color-primary;display: inline-block;margin-right: 6px;border-radius: 50%;}
	.top_right{color: $uni-text-color-primary;}
}
.device_row{padding: 6px 0;display: flex;align-items: center;
	.name {flex-basis: 70px;}
}
.flex_layout{
	align-items: center;
}
.status{
	background: $uni-bg-color-success;
	margin-left: 8px;
	border-radius: 20px;
	padding: 3px 10px;
	display: flex;
	align-items: center;
	.drop{
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: $uni-bg-color-whith;
		display: inline-block;
		margin-right: 6px;
	}
}

</style>
