Skip to content

G
GaoQuYingJiH5-ASD
Commit 8bffbec9 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

检查单样式修改

parent 2cd1af3c
Show whitespace changes
Inline Side-by-side
Showing with 608 additions and 592 deletions
src/_check_list.html
View file @ 8bffbec9
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
......@@ -66,8 +66,7 @@
}
.checklist-container .van-radio {
margin-right: 0.8rem;
margin-top: 0.2rem;
margin: .2rem 0 0.2rem 0.8rem;
}
.checklist-container .van-cell {
......@@ -99,7 +98,7 @@
/* 检查清单容器 */
.checklist-container {
padding: 12px;
/* padding: 12px; */
background: #fff;
overflow: hidden;
padding-bottom: 1rem;
......@@ -107,17 +106,14 @@
/* 检查项 */
.check-item {
width: 88vw;
padding: 12px;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
float: left;
}
.item-header {
display: flex;
align-items: center;
margin-bottom: 8px;
margin: .3rem 0px .1rem .3rem;
}
.item-number {}
......@@ -147,11 +143,10 @@
/* 展开部分 */
.expand-section {
width: 77.5vw;
margin-top: 12px;
width: calc(7.5rem - 0.6rem);
float: left;
background: #f5f6fa;
padding: 0.4rem;
padding: 0.1rem 0.3rem;
}
/* 子复选框组 */
......@@ -159,7 +154,7 @@
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
margin: 8px 0;
margin: .2rem 0 .3rem 0;
}
/* 上传器 */
......@@ -196,13 +191,14 @@
margin: 0;
margin-top: 0.1rem;
padding-left: 0.2rem;
font-size: .28rem;
}
.title_require::before {
position: absolute;
content: '*';
color: #ee0a24;
font-size: 0.3rem;
font-size: inherit;
left: 0;
top: 50%;
transform: translateY(-50%);
......@@ -220,7 +216,7 @@
width: 83vw;
/* border: 1px solid; */
background: #FFFFFF;
box-shadow: 2px -5px 21px 0px rgba(103,103,103,0.14);
box-shadow: 2px -5px 21px 0px rgba(103, 103, 103, 0.14);
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.2rem;
......@@ -230,10 +226,18 @@
.bottom_bar button {
float: right;
}
.day_select{
border-color: rgb(191, 191, 191);
margin-right: 0.1rem;
width: 1rem;
padding-left: .2rem;
background-color: #fff;
}
</style>
</head>
</head>
<body>
<body>
<!-- 原 HTML 主体内容保持不变 -->
<div id="app">
<div class="checklist-header">
......@@ -254,7 +258,8 @@
</div>
<!-- 单选按钮组 -->
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)" direction="horizontal">
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)"
direction="horizontal">
<van-radio name="yes">是</van-radio>
<van-radio name="no">否</van-radio>
<van-radio name="na">不涉及</van-radio>
......@@ -273,13 +278,13 @@
<!-- 隐患描述 -->
<van-cell-group>
<p style="font-size:0.2rem" class="title_require">请输入隐患描述</p>
<p class="title_require">请输入隐患描述</p>
<van-field v-model="item.description" type="textarea" rows="1"></van-field>
</van-cell-group>
<!-- 照片上传 -->
<van-cell-group>
<van-cell>*请上传隐患图片:<span style="color: red;">(格式png/jpg/jpeg)</span>
<van-cell><span class="title_require">请上传隐患图片:</span><span style="color: red;">(格式png/jpg/jpeg,最多4张)</span>
<div>
<van-uploader style="width: 80px; height:80px;" v-model="item.photos"
:max-count="3" :after-read="handleFileUpload" class="uploader-wrapper" />
......@@ -290,10 +295,16 @@
<!-- 整改期限 -->
<van-cell-group>
<van-cell>
<div class="limit_date_wrapper">
<van-field label-align="left" readonly clickable label="整改期限"
:value="`${item.deadlineDays}天 截至整改日期：${item.deadlineDate}`"
@click="showDeadlinePicker = true; currentItem=item" />
<span class="title_require">整改期限:</span>
<select class="day_select" name="" v-model="item.deadlineDays" @change="handleDeadlineConfirm($event, item)">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
<span> 截止整改日期: {{item.deadlineDate}}</span>
</div>
</van-cell>
</van-cell-group>
......@@ -321,11 +332,10 @@
title="选择整改天数" />
</van-popup>
</div>
<script>
window.onload = function() {
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script>
<script>
// 原 JavaScript 代码保持不变
const checkData = [{
id: 1,
......@@ -507,7 +517,9 @@
id: id,
title: `检查项目 ${id}`,
selected: null,
subChecks: Array.from({ length: 10 }, (_, i) => ({
subChecks: Array.from({
length: 10
}, (_, i) => ({
id: i + 1,
checked: false
})),
......@@ -524,7 +536,9 @@
showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null,
checkList: Array.from({ length: 40 }, (_, i) => createCheckItem(i + 1)),
checkList: Array.from({
length: 40
}, (_, i) => createCheckItem(i + 1)),
checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
checkPageIndex: 0,
currentItem: null,
......@@ -550,10 +564,10 @@
url: '_shanghu_detail.html',
title: '高区应急扫描',
isgoback: '0',
success: function (data) {
success: function(data) {
// 成功回调
},
fail: function (data) {
fail: function(data) {
// 错误返回
}
});
......@@ -573,16 +587,17 @@
// 此处可添加实际文件上传逻辑
},
// 整改天数确认
handleDeadlineConfirm(value) {
handleDeadlineConfirm(event, item) {
console.log('select选择' , event.target.value)
const value = event.target.value;
if (value) {
const days = parseInt(value);
const currentItem = this.currentItem;
if (currentItem) {
currentItem.deadlineDays = days;
item.deadlineDays = days;
const deadlineDate = new Date();
deadlineDate.setDate(deadlineDate.getDate() + days);
currentItem.deadlineDate = this.formatDate(deadlineDate);
item.deadlineDate = this.formatDate(deadlineDate);
}
this.showDeadlinePicker = false;
// this.showDeadlinePicker = false;
},
// 日期格式化
formatDate(date) {
......@@ -590,8 +605,9 @@
}
}
});
}
</script>
</div>
</body>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment