jsy-app/pages/irrigation/config.vue

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="轮灌组配置"></custom-nav-bar>
	<view class="text-intel">
		<view>
			<span class="text">轮灌组：1</span>
		</view>
		<view>
			<span>时长：12:12:12</span>
		</view>
		<view>
			<span>已选：2</span>
		</view>
	</view>

	<view class="card">
		<uni-collapse>
			<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
				<template v-slot:title>
					<view class="cards-title">
						<view>
							<view class="iconfont icon-nongtian icon"></view>
							<view class="text" style="color: #333;">
								分组1
							</view>
						</view>
					</view>
				</template>
				<view class="content">
					<uni-forms ref="baseForm" :modelValue="baseFormData">
						<view class="cards-content">
							<view class="greybar-box">
								<view class="title">
									<view>出水口：<span>1-1</span></view>
									<view>阀门：三通阀</view>
								</view>
								<uni-forms-item>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open1" />
										<text>轮灌组1</text>
									</view>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open2" />
										<text>轮灌组1</text>
									</view>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open3" />
										<text>轮灌组1</text>
									</view>
								</uni-forms-item>
							</view>
							<view class="greybar-box">
								<view class="title">
									<view>出水口：<span>1-1</span></view>
									<view>阀门：三通阀</view>
								</view>
								<uni-forms-item>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open1" />
										<text>轮灌组1</text>
									</view>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open2" />
										<text>轮灌组1</text>
									</view>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open3" />
										<text>轮灌组1</text>
									</view>
									<view class="check-box">
										<uni-data-checkbox mode="tag" v-model="baseFormData.hobby" multiple
											:localdata="open4" />
										<text>轮灌组1</text>
									</view>
								</uni-forms-item>
							</view>
							<view class="greybar-box">
								<view class="title">
									<view>出水口：<span>1-3</span></view>
									<view>阀门：多通阀</view>
								</view>
								<view class="no-data">
									<view class="iconfont icon-wbd"></view>未绑定阀门
								</view>
							</view>
						</view>
					</uni-forms>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
	<view class="bottom-btn">
		<u-button type="success" size="large" text="下一组" @click="" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					hobby: [4],
				},
				open1: [{
					text: '1开',
					value: 0
				}],
				open2: [{
					text: '2开',
					value: 0
				}],
				open3: [{
					text: '3开',
					value: 0
				}],
				open4: [{
					text: '4开',
					value: 0
				}],

				// 三通阀
				hobbys: [{
					text: '①开',
					value: 0
				}, {
					text: '②开',
					value: 1
				}, {
					text: '全开',
					value: 2
				}],
				// 多通阀
				hobby: [{
					text: '①开',
					value: 0
				}, {
					text: '②开',
					value: 1
				}, {
					text: '③开',
					value: 2
				}, {
					text: '④开',
					value: 3
				}],

			}
		},


	}
</script>

<style lang="scss" scoped>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		padding-bottom: 38px !important;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		flex: none;
		width: 100%;

		.check-box {
			padding: 10px 0;
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: column;

			text {
				font-size: 12px;
			}

			.uni-data-checklist {
				.checklist-group {
					width: fit-content !important;
					padding: 0;

					.checklist-box.is--tag.is-checked {
						background-color: #39ac4f;
						border-color: #39ac4f;
					}

					.checklist-box {
						padding: 5px 15px;
						margin: 0;
					}
				}
			}


		}
	}

	// 表单
	::v-deep .uni-forms {
		padding: 0 !important;
	}

	::v-deep .uni-forms-item__label {
		min-width: 0px !important;
	}

	.uni-forms-item {
		margin-bottom: 0;
	}

	::v-deep .uni-data-checklist .checklist-group {
		padding: 10px;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		flex: 1;
		margin-right: 0px;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: #39ac4f;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
		border-color: #39ac4f;
		background-color: #39ac4f;
	}
</style>