<template>
	<view>
		<u-navbar title="异常报警详情"  title-color="#101010" ></u-navbar>
		<view class="main">
			<view class="item">
				<view class="title">
					报警单号：A100001
				</view>
				<view class="value">
					<text class="reason">温度异常</text>
				</view>
			</view>
			<view class="item">
				<view class="title">
					报警设备
				</view>
				<view class="value equipment">
					荆鹏集团-荆鹏软件园01
				</view>
			</view>
			<view class="item">
				<view class="title">
					报警内容
				</view>
				<view class="value warning">
					温度过高 120°C
				</view>
			</view>
			<view class="item">
				<view class="title">
					地址
				</view>
				<view class="value ">
					沙市区江津东路附155号
				</view>
			</view>
			<view class="item">
				<view class="title">
					报警内容
				</view>
				<view class="value">
					2024-02-04 20:00:00
				</view>
			</view>
			<!-- 异常记录 -->
			<view class="record-chat">
				<view class="title">
					异常记录
				</view>
				<view class="chat-box">
					<view class="date">
						2月4日温度监控
					</view>
					<view class="chat">
						<image class="img" src="@/assets/img/recordChat.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<button class="close">关闭警报</button>
			<button class="create">创建工单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 32rpx;
			border-bottom: 1px solid rgba(242,242,242,1);
			.title{
				color: rgba(51,51,51,1);
			}
			.value{
				color: rgb(16,16,16);
				font-size: 32rpx;
				.reason{
					display: inline-block;
					width: 128rpx;
					line-height: 48rpx;
					border-radius: 4px;
					color: rgba(255,61,0,1);
					border: 1px solid rgba(255,61,0,1);
					font-size: 24rpx;
					text-align: center;
				}
			}
			.equipment{
				font-weight: bold;
			}
			.warning{
				color: rgba(255,61,0,1);
				
			}
		}
		// 异常记录
		.record-chat{
			padding: 40rpx 32rpx;
			.title{
				color: rgba(51,51,51,1);
				font-size: 32rpx;
			}
			.chat-box{
				padding: 24rpx 0;
				margin-top: 24rpx;
				border-radius: 8px;
				background: linear-gradient(180deg, rgba(255,243,208,1) 0%,rgba(208,236,236,0) 100%);
			
			.date{
				padding: 0 40rpx;
				margin-bottom: 24rpx;
				color: rgba(16,16,16,1);
				font-weight: bold;
			}
			 .img{
				 width: 100%;
				 height: 400rpx;
			 }
			
			}
		}
	}

 // 底部
 .bottom{
	 background-color: #fff;
	 position: fixed;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 display: flex;
	 padding: 20rpx 32rpx;
	 justify-content: space-between;
	 .close{
		 width: 328rpx;
		 line-height: 80rpx;
		 border-radius: 4px;
		 background-color: rgba(222,225,228,1);
		 color: rgba(51,51,51,1);
		 font-size: 32rpx;
	 }
	 .create{
		 width: 328rpx;
		 line-height: 80rpx;
		 border-radius: 4px;
		 background-color: rgba(22,119,255,1);
		 color: rgba(255,255,255,1);
		 font-size: 32rpx;
	 }
 }
</style>
