qrcode-app/pages/apply/jobRiskShow.vue

<template>
	<view class="todo-page" style="padding-bottom: 10px;">
		<view class="background"></view>

		<view class="card">
			<u--form labelWidth="auto" :model="detailData" ref="wForm" class="demo-ruleForm">
				<view style="position: relative;">
					<view style="position: absolute;left: -10px;color: #3d4b70;top: -3px;">*</view>
				</view>

				<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">{{detailData.postName}}岗位安全风险告知卡</view>
				<u-form-item label="风险名称" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.RISK_NAME" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="风险等级" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.EVALUATE_LEVELName" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="事故后果" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.RISK_TYPE" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="风险描述" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.RISK_DESCRIPTION" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="安全标志" prop="HIDDEN_PLACE" >
				</u-form-item>
				<!-- 安全标志图片列表 -->
				<view class="safety-sign-list">
				  <!-- 循环展示所有图片 -->
				  <view class="safety-sign-item" v-for="(photo, index) in detailData.Nav_Photo" :key="index">
				    <!-- 图片展示 -->
				    <image 
				      :src="hosturl +photo.Nav_ImgFile.FILE_PATH" 
				      mode="widthFix" 
				      class="sign-image"
				      alt="安全标志图片"
				    ></image>
				    <!-- 图片对应的名称 -->
				    <view class="sign-name">{{ photo.NAME }}</view>
				  </view>
				  <!-- 没有图片时的提示 -->
				  <view v-if="!detailData.Nav_Photo || detailData.Nav_Photo.length === 0" class="no-data">
				    暂无安全标志图片
				  </view>
				</view>
				<!-- <u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.RISK_DESCRIPTION" border="none" inputAlign="right" autoHeight></u--textarea> -->
				<u-form-item label="管控措施" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.MEASURES_NAME" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="应急处置" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.EMERGENCY" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="责任单位" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.departName" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="责任人" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.userName" border="none" inputAlign="right" autoHeight></u--textarea>
				<u-form-item label="联系方式" prop="HIDDEN_PLACE" borderBottom>
				</u-form-item>
				<u--textarea fontSize="14px" disabled disabledColor="#fff" v-model="detailData.phone" border="none" inputAlign="right" autoHeight></u--textarea>
			</u--form>


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

<script>
	import {
		GetPostRiskList,
		PagedRisk
	} from '../../services/apply'
	import {
		DepartOrderPaged,
		PostOrderPaged,
		getEnum
	} from '../../services/common.js'
	import config from '../../config/common'
	import {
		initFilter,
		extendRule
	} from '../../utils/common'
	export default {
		data() {
			return {
				detailData: {},
				model: {},
				hosturl:config.uni_app_web_source_url
			}
		},
		onLoad(option) {
			this.detailData = uni.getStorageSync('detailData');
		},
		onUnload() {
			// 可选：用完删除，避免占用存储
			uni.removeStorageSync('detailData');
		},
		// onReady() {
		// 	//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		// 	this.$refs.uForm.setRules(this.rules)
		// },
		methods: {},
	}
</script>

<style>
	@import url("../../style/css/newTemplate.css");
.safety-sign-list {
  padding: 0 16px;
  /* margin-bottom: 5px; */
  /* 启用 Flex 布局 */
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 子元素之间的间距（可选，调整水平间距） */
  gap: 10px;
}

.safety-sign-item {
  /* 每个元素占 1/3 宽度（减去间距的容错） */
  width: calc(33.33% - 10px);
  margin-bottom: 15px;
  text-align: center;
  /* 避免内容溢出时压缩元素宽度 */
  box-sizing: border-box;
}

/* 其他样式保持不变 */
.sign-image {
  width: 100%; /* 图片自适应父元素宽度 */
  max-width: 300px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.sign-name {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  /* 文字超长时自动换行 */
  word-wrap: break-word;
}

.no-data {
  font-size: 14px;
  color: #999;
  padding: 10px 0;
  text-align: center;
  /* 占满整行 */
  width: 100%;
}
</style>