150 lines
3.5 KiB
Vue
150 lines
3.5 KiB
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> |