LandSurveyApplet/pages/EntryPage/manualAdd.vue

<template>
	<!-- 弹窗主体 -->
	<view class="popup-box">
		<!-- 表单区域 -->
		<view class="form-item">
			<text class="label">姓名：</text>
			<input v-model="form.name" class="input" placeholder="请填写承包方姓名" type="text" />
		</view>
		<view class="form-item">
			<text class="label">身份证号码：</text>
			<input v-model="form.idCard" class="input" placeholder="请填写承包方身份证号码" type="number" maxlength="18" />
		</view>
		<!-- 按钮区域 -->
		<view class="btn-group">
			<button class="cancel-btn" @click="handleCancel">取消</button>
			<button class="confirm-btn" @click="handleConfirm">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 表单数据
	const form = ref({
		name: '',
		idCard: ''
	});


	// 点击确定按钮（校验+传参）
	const handleConfirm = () => {
	};
</script>

<style scoped>
	/* 弹窗主体 */
	.popup-box {
		background: #fff;
		border-radius: 12rpx;
		z-index: 9999;
		overflow: hidden;
	}

	/* 表单项 */
	.form-item {
		padding: 20rpx 24rpx;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333;
	}

	.input {
		width: 100%;
		height: 60rpx;
		padding: 0 16rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	/* 按钮组 */
	.btn-group {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		border: none;
		background: none;
	}

	.cancel-btn {
		color: #666;
		border-right: 1rpx solid #eee;
	}

	.confirm-btn {
		color: #fff;
		background-color: #1677ff;
		/* 截图中的蓝色按钮 */
	}
</style>