zhgdyunapp/pages/projectEnd/emergencyDisposal/detail.vue

<template>
	<view class="emergencyDisposal">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				处置详情
			</view>
		</headers>
		<view class="disposal-detail">
			<view class="rescue">
				<view class="title">
					基本信息
				</view>
				<view class="rescue-detail">
					<view>
						<text>报警人员姓名：</text>
						<text>李三</text>
					</view>
					<view>
						<text>所属企业：</text>
						<text>辽宁五寰</text>
					</view>
					<view>
						<text>应急类型：</text>
						<text>人员倒地</text>
					</view>
					<view>
						<text>所属班组/部门：</text>
						<text>木工</text>
					</view>
					<view class="detail">
						<text>应急详情：</text>
						<text>好好好好好好i多i啊u四偶爱甲方收到就</text>
					</view>
					<view>
						<text>处置状态：</text>
						<text class="color-ea3">待救援</text>
					</view>
					<view>
						<text>现场情况视频：</text>
						<text class="color-518">4654.mp4</text>
					</view>
					<view>
						<text>报警时间：</text>
						<text>2024-10-15 19:54</text>
					</view>
					<view>
						<text>经纬度：</text>
						<text>112.23,231.24</text>
					</view>
					<view>
						<text>现场情况图片：</text>
						<text>
							<image class="image" src="/static/aqjy.png"></image>
						</text>
					</view>
					</div>
				</view>
			</view>
			<view class="rescue">
				<view class="title">
					救援资料
				</view>
				<view class="rescue-detail data">
					<view>
						<text>处置资料：</text>
						<text class="color-518">4654.mp4</text>
					</view>
					<view>
						<text>指导文件：</text>
						<text class="color-518">4654.mp4</text>
					</view>
				</view>
			</view>
			<view class="rescue">
				<view class="title">
					救援情况
				</view>
				<view class="rescue-detail">
					<view class="rescue-detail data condition">
						<view>
							<text>是否处理完毕：</text>
							<text>是</text>
						</view>
						<view>
							<text>救援人：</text>
							<text>张三</text>
						</view>
						<view>
							<text>处理完成时间：</text>
							<text>2024-10-15 19:54</text>
						</view>
					</view>
					<view>
						<text>现场情况视频：</text>
						<text class="color-518">4654.mp4</text>
					</view>
					<view>
						<text>现场情况图片：</text>
						<text>
							<image class="image" src="/static/aqjy.png"></image>
						</text>
					</view>
					<view class="addSaveBtn" @click="getnavigateTo('./ImmediateRescue')">
						立即救援
					</view>
				</view>
			</view>
			<view class="rescue">
				<view class="title">
					处置报告
				</view>
				<view class="rescue-detail">
					<view>
						<text>处置报告：</text>
						<text>4654.pdf</text>
					</view>
					<view>
						<text>上传人：</text>
						<text>张三</text>
					</view>
				</view>
			</view>
			<view class="lable-absolute">
				<image src="/static/aqjy.png"></image>
				<text>应急物资</text>
			</view>
		</view>

	</view>
</template>

<script>
	import headers from "../../../components/headers/headers.vue"
	var _self;
	export default {
		data() {
			return {

			}
		},
		mounted() {

		},
		onShow() {

		},
		methods: {
			getnavigateTo(url) {
				uni.navigateTo({
					url,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.emergencyDisposal {
		height: 100%;
	}

	.color-ea3 {
		color: #EA3941;
	}

	.color-518 {
		color: #5181F6;
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}
	}

	.image {
		width: 148rpx;
		height: 90rpx;
	}

	.disposal-detail {
		margin: 12% 0;
		padding: 0 30rpx;
		position: relative;

		.rescue {
			.title {
				font-weight: bold;
				font-size: 32rpx;
			}

			.rescue-detail {
				// margin-top: 15%;
				font-size: 14px;
				color: #000000;
				padding: 0 8rpx;

				view {
					display: flex;
					line-height: 50rpx;
					margin: 20rpx 0;

					text:last-child {
						flex: 1,
					}
				}

				.detail {
					flex-direction: column;

					text:last-child {
						padding: 0 26rpx;
					}
				}

				.rescue-data {
					border: 1px solid #BBBBBB;
					background-color: #F5F5F5;
					justify-content: center;
				}

				.addSaveBtn {
					margin: 60rpx auto;
					color: #fff;
					// width: 60%;
					// padding: 20rpx 0;
					align-items: center;
					justify-content: center;
					// background-color: #4181FE;

					// font-size: 34rpx;
					// border-radius: 30px;
					// letter-spacing: 2px;
					width: 252px;
					height: 40px;
					background: #5181F6;
					box-shadow: 0px 4px 9px 0px rgba(81, 129, 246, 0.37);
					border-radius: 74px 74px 74px 74px;
				}

				.addSaveBtn:active {
					background-color: rgba(65, 129, 254, 0.8);
				}
			}

			.data {
				margin-left: 46rpx;
				color: #272D45;
			}

			.condition {
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}

		.lable-absolute {
			// background-color: #fcebec;
			// color: #ea3941;
			padding: 4rpx 24rpx;
			border-radius: 20rpx;
			position: absolute;
			top: 32rpx;
			right: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 68rpx;
				height: 74rpx;
			}
		}
	}
</style>