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>
								<view class="check-box">
									<uni-forms-item>
										<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
									</uni-forms-item>
								</view>
							</view>
							<view class="greybar-box">
								<view class="title">
									<view>出水口：<span>1-2</span></view>
									<view>阀门：多通阀</view>
								</view>
								<view class="check-box">
									<uni-forms-item>
										<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobby" />
									</uni-forms-item>
								</view>
							</view><view class="greybar-box">
								<view class="title">
									<view>出水口：<span>1-3</span></view>
									<view>阀门：多通阀</view>
								</view>
								<view class="check-box">
									<uni-forms-item>
										<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobby" />
									</uni-forms-item>
								</view>
							</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],
				},
				// 三通阀
				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;
	}
	// 表单
	.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;
	}

	::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>