<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover" />
		<title>高区安全“码”上查监管平台-首页</title>
		<link rel="stylesheet" href="home.css" />
		<style>
			[v-cloak] {
				/* display: none; */
			}
		</style>
		<style>
			/* 基础重置样式 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
				/* 去除移动端点击高亮 */
			}
		
			body {
				font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
				font-size: 16px;
				background-color: #f8f9fa;
			}
		
			/* 表单容器 */
			.form-container {
				max-width: 750px;
				/* 移动端最大宽度 */
				margin: 20px auto;
				padding: 0 15px;
				background-color: #fff;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			}
		
			/* 表单单项 */
			.form-item {
				display: flex;
				align-items: center;
				/* 垂直居中 */
				height: 50px;
				padding: 0 12px;
				border-bottom: 1px solid #f0f2f5;
			}
		
			/* 最后一项去除下边框 */
			.form-item:last-child {
				border-bottom: none;
			}
		
			/* 表单标题 */
			.form-label {
				flex-shrink: 0;
				/* 防止标题被压缩 */
				width: 80px;
				/* 标题固定宽度，可根据需求调整 */
				color: #333;
				font-size: 15px;
				text-align: left;
				/* 标题左对齐 */
			}
		
			/* 输入框容器 */
			.form-input-wrap {
				flex: 1;
				/* 占据剩余空间 */
				height: 100%;
				display: flex;
				align-items: center;
			}
		
			/* 输入框样式 */
			.form-input {
				width: 100%;
				height: 32px;
				/* 输入框高度小于容器，留出垂直空间 */
				border: none;
				outline: none;
				font-size: 15px;
				color: #666;
			}
		
			/* 输入框placeholder样式 */
			.form-input::placeholder {
				color: #999;
				font-size: 14px;
			}
		
			/* 输入框聚焦效果 */
			.form-input:focus {
				color: #262626;
			}
		
			.imager-item-title {
				height: 50px;
				line-height: 50px;
				padding: 0 12px;
				font-size: 14px;
				border-bottom: 1px solid #f0f2f5;
				margin-bottom: 10px;
				font-weight: 400;
			}
			.save-btn {
				width: 98%;
				background: #1890ff;
				color: #fff;
				border: none;
				padding: 7px 20px;
				border-radius: 3px;
				font-size: 16px;
				cursor: pointer;
				margin-bottom: .4rem;
			}
		</style>
		<!-- 在 includeHead.js 之后添加环境判断 -->
		<script src="../sdk/includeHead.js"></script>
	</head>
	<body>
		<div id="app" class="page_wrapper" v-cloak>
			<!-- 第一层：标题图 -->
			<div class="second-layer second-layer-zf">
				<img class="merchant-icon" src="image/code/zhengfu_logo.png" alt="" />
			</div>

			<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
			<div class="header">
				<!-- <div class="level">安全等级</div> -->
				<div class="title">
					<img src="../image/code/sj.png" alt=""><span>{{merInformation.unitName}}</span><span
						class="tag">安全等级-绿</span>
				</div>
				<div class="detail">
					<van-row>
						<van-col span="24">场所类型: {{merInformation.smallPlaceTypeName}}</van-col>
					</van-row>
					<van-row>
						<van-col span="24">{{merInformation.businessAddress}}</van-col>
					</van-row>
				</div>
			</div>
			<!-- 第三层：表单区 -->
			<div class="third-layer">
				<!-- form开始 -->
				<div class="form-container">
					
					<div>
						<h5 class="imager-item-title">
							<span>*安全建议</span>
							<span></span>
						</h5>
						<div>
							<textarea name="" id="" cols="10" rows="2"></textarea>
						</div>
					</div>
					<div>
						<h5 class="imager-item-title">
							<span>请上传图片（最多四张）</span>
							<span></span>
						</h5>
						<div>
							<van-uploader v-model="formData.storefrontPhotosH5" :max-count="4"
								:after-read="handleFileUpload" class="uploader-wrapper" />
						</div>
					</div>

					<div class="form-item">
						<span class="form-label">联系人</span>
						<div class="form-input-wrap">
							<input type="text" v-model="formData.owner" class="form-input" placeholder="请输入11位手机号"
								pattern="[0-9]{11}">
						</div>
					</div>

					<div class="form-item">
						<span class="form-label">联系电话</span>
						<div class="form-input-wrap">
							<input type="text" v-model="formData.merchantPhone" class="form-input"
								placeholder="请输入联系地址">
						</div>
					</div>

					<div class="form-item">
						<span class="form-label">日期</span>
						<div class="form-input-wrap">
							<input type="text" v-model="formData.businessAddress" v-model="formData.merchantPhone"
								class="form-input" placeholder="请输入联系地址">
						</div>
					</div>
				<!-- form结束 -->
				<button class="save-btn" style="margin-left: 50%; transform: translateX(-50%);" onclick="save"
					>提交</button>
			</div>


		</div>
	</body>
</html>