jiliangxiaochengxu/pages/assay/assayForm.vue

<!-- @format -->

<template>
	<view class="container">
		<view style="margin: 15rpx 0">
			<view class="contentItems">
				<u-form labelPosition="left" labelWidth="160rpx">
					<view class="content">
						<u-form-item label="选择器具：">
							<u-input border="none" placeholder="请输入申请单位" value="血氧仪器"></u-input>
						</u-form-item>
					</view>
					<view class="content">
						<u-form-item label="申请单位：">
							<u-input border="none" placeholder="请输入申请单位"></u-input>
						</u-form-item>
					</view>
					<view class="content">
						<u-form-item label="申请日期：">
							<u-input border="none" placeholder="请输入申请日期"></u-input>
						</u-form-item>
					</view>
					<view class="content">
						<u-form-item label="申请人：">
							<u-input border="none" placeholder="请输入申请人"></u-input>
						</u-form-item>
					</view>
					<view class="content">
						<u-form-item label="联系电话：">
							<u-input border="none" placeholder="请输入联系电话"> </u-input>
						</u-form-item>
					</view>
				</u-form>
				<u-checkbox-group style="margin-top: 20rpx;" v-model="checkboxValue1" placement="column"
					@change="checkboxChange">
					<u-checkbox style="color:red" v-for="item in checkBoxList" :key="item" :label="item.name"
						:name='item.label'>
					</u-checkbox>
				</u-checkbox-group>

			</view>
		</view>
		<view style="width: 95%; margin: 20rpx auto 0">
			<u-button type="primary"> 提交 </u-button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: null,
				checkBoxList: [{
					name: '我单位承诺，本次提交备案的计量器具的相关信息均真实准确，经过自我严格审核，均符合《市场监管总局关于调整实施强制管理的计量器具目录的公告》（国家市场监督管理总局公告2020年第42号)中《实施强制管理的计量器具目录》的规定。',
					label: false
				}],
				checkboxValue1: [],
			};
		},
		methods: {
			checkboxChange(value) {
				console.log('Checkbox changed:', value);
			},
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-checkbox {
		display: flex;
		flex-direction: row;
		/* overflow: hidden; */
		flex-direction: row;
		align-items: flex-start;

	}

	::v-deep uni-text[data-v-c4a74aee] span {
		font-size: 26rpx;
		color: red;
		line-height: 40rpx;
	}

	.createFixed {
		background: #2979ff;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
	}

	.createNew {
		font-size: 30rpx;
		margin: 20rpx 0 20rpx 20rpx;
		color: #3c9ff3;
	}

	.container {
		height: 100vh;
		background: rgb(243, 244, 249);

		.contentItems {
			width: 93%;
			border-radius: 6px;
			background: #fff;
			margin: 0rpx auto 20rpx;
			padding: 20rpx 30rpx 20rpx;

			.content {
				border-bottom: 1px solid rgb(242, 242, 242);
				display: flex;
				justify-content: space-between;
			}

			// .content:last-child {
			//   border-bottom: none;
			// }

			.title {
				font-size: 26rpx;
				color: black;
				letter-spacing: 3rpx;
			}

			.message {
				font-size: 26rpx;
				color: rgb(146, 146, 146);
			}
		}
	}
</style>