jp-youdian-Inspection/pages/myTab/abnormalInfo.vue

<template>
	<view>
		<u-navbar title="异常告警记录"></u-navbar>
		<view class="main">
			<view class="line line1">
				<view class="name">
					告警单号：A100001

				</view>
				<view class="value value1">
					电量过低
				</view>
			</view>
			
			<view class="line">
				<view class="name">
					告警地锁

			
				</view>
				<view class="value">
					荆鹏软件园-A01

				</view>
			</view>
			<view class="line">
				<view class="name">
					告警内容

			
				</view>
				<view class="value value2">
					电量过低 ＜20%

				</view>
			</view>
			<view class="line">
				<view class="name">
					地址

			
				</view>
				<view class="value">
					沙市区江津东路附155号

				</view>
			</view>
			<view class="line">
				<view class="name">
					告警时间
			
				</view>
				<view class="value">
					2024-02-04 20:00:00

				</view>
			</view>
		</view>
	</view>
</template>

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

<style scoped lang="scss">
	.main{
		background-color: rgba(255,255,255,1);
		.line1{
			box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
		}
		.line{
			    display: flex;
			    justify-content: space-between;
			padding:22rpx 16px;
			color: rgba(51,51,51,1);
			font-size: 16px;
			border-bottom: 1px solid rgba(242,242,242,1);
			.value{
				color: rgba(16,16,16,1);

			}
			.value1{
				border-radius: 4px;
				background-color: rgba(255,255,255,1);
				color: rgba(255,61,0,1);
				border: 1px solid rgba(255,61,0,1);
				padding: 2px;
				font-size: 12px;
			
			}
			.value2{
				color: rgba(255,61,0,1);

			}
		}
	}
</style>