check-list

src/_check_list.html

@@ -13,6 +13,7 @@
 			html,
 			body {
 				background-color: #fff;
+				letter-spacing: .01rem;
 			}
 
 			/* 通用工具类 */
@@ -74,6 +75,17 @@
 				margin-top: 0.2rem;
 				padding: 0;
 			}
+			/* 表单内的表项 背景色覆盖 */
+			.van-form{
+				margin-bottom: 1rem;
+				padding-left: .3rem;
+			}
+			.van-form .van-cell,
+			.van-form .van-cell__value{
+				background: #fff;
+				
+			}
+			
 
 			.checklist-container .van-cell-group {
 				background-color: #f5f6fa;
@@ -213,7 +225,7 @@
 				bottom: 0.5rem;
 				left: 50%;
 				transform: translateX(-50%);
-				width: 83vw;
+				width: 88vw;
 				/* border: 1px solid; */
 				background: #FFFFFF;
 				box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14);
@@ -222,9 +234,41 @@
 				padding-left: 0.2rem;
 				padding-right: 0.2rem;
 			}
+			.bottom_bar > div{
+				display: grid;
+				grid-template-columns: auto auto .6fr;
+				padding-left: .2rem;
+				align-items: center;
+				gap: 0.2rem;
+				width: 100vw;
+			}
+			.bottom_bar > div > span{
+				font-weight: 500;
+				font-size: 0.28rem;
+				color: #545454;
+				display: inline-block;
+				/* width: 1.8rem; */
+			}
+			.bottom_bar > div > span:before{
+				display: inline-block;
+				width: 0.3rem;
+				height: 0.3rem;
+				content: '*';
+				color: #fff;
+				background-size: cover;
+				font-weight: 500;
+				margin-right: 0.1rem;
+			}
+			.bottom_bar > div > span:first-child:before{
+				background-image: url('../image/code/check_num.png');
+			}
+			.bottom_bar > div > span:nth-child(2):before{
+				background-image: url('../image/code/yh_num.png');
+			}
+			
 			
 			.bottom_bar button {
-				float: right;
+				color: #fff;
 			}
 			
 			.day_select{
@@ -304,16 +348,40 @@
 											<option value="5">5</option>
 											<option value="7">7</option>
 										</select>
-										<span>   截止整改日期:  {{item.deadlineDate}}</span>
+										<span>   截止整改日期:  <b style="color:#148ef7">{{item.deadlineDate}}</b></span>
 									</div>
 								</van-cell>
 							</van-cell-group>
 						</div>
 					</div>
 				</div>
-
+<van-form >
+								<van-cell>
+							  <van-field
+							    label="检查人员"
+								v-model="checkPerson"
+								readonly
+							  />
+							  </van-cell>
+							  <van-cell>
+							  <van-field
+							    label="检查日期"
+								v-model="checkDate"
+							  /> 
+							    </van-cell>
+							</van-form>
 				<!-- 底部栏 -->
 				<div class="bottom_bar">
+					<div>
+						<span class="check_num">{{ notNullCount }}/{{totalItems}}</span>
+						<span class="yh_num">{{noCount}} 隐患</span>
+						<van-button type="info" size="small" @click="navTo1" v-show="checkPageIndex===3">完成检查</van-button>
+						<van-button v-show="checkPageIndex<3" type="info" size="small"
+							@click="checkPageIndex++">下一项</van-button>
+					</div>
+					
+				</div>
+				<!-- <div class="bottom_bar">
 					<div style="display: inline-block; margin-bottom: 0.2rem;">
 						<van-icon name="apps-o" color="blue" />
 						<span
@@ -324,13 +392,7 @@
 					<van-button type="info" size="small" @click="navTo1" v-show="checkPageIndex===3">完成检查</van-button>
 					<van-button v-show="checkPageIndex<3" type="info" size="small"
 						@click="checkPageIndex++">下一项</van-button>
-				</div>
-
-				<!-- 整改天数选择器 -->
-				<van-popup v-model="showDeadlinePicker" position="bottom">
-					<van-picker :columns="deadlineOptions" @confirm="handleDeadlineConfirm" show-toolbar
-						title="选择整改天数" />
-				</van-popup>
+				</div> -->
 			</div>
 			<script>
 				window.onload = function() {
@@ -533,6 +595,8 @@
 					new Vue({
 						el: '#app',
 						data: {
+							checkPerson: 'xxxx李先生',
+							checkDate: '2025-3-29',
 							showDeadlinePicker: false,
 							deadlineOptions: ['1', '3', '5', '7'],
 							currentEditingItem: null,