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> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" <meta name="viewport"
...@@ -66,8 +66,7 @@ ...@@ -66,8 +66,7 @@
} }
.checklist-container .van-radio { .checklist-container .van-radio {
margin-right: 0.8rem; margin: .2rem 0 0.2rem 0.8rem;
margin-top: 0.2rem;
} }
.checklist-container .van-cell { .checklist-container .van-cell {
...@@ -99,7 +98,7 @@ ...@@ -99,7 +98,7 @@
/* 检查清单容器 */ /* 检查清单容器 */
.checklist-container { .checklist-container {
padding: 12px; /* padding: 12px; */
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
padding-bottom: 1rem; padding-bottom: 1rem;
...@@ -107,17 +106,14 @@ ...@@ -107,17 +106,14 @@
/* 检查项 */ /* 检查项 */
.check-item { .check-item {
width: 88vw;
padding: 12px;
background: white; background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
float: left; float: left;
} }
.item-header { .item-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin: .3rem 0px .1rem .3rem;
} }
.item-number {} .item-number {}
...@@ -147,11 +143,10 @@ ...@@ -147,11 +143,10 @@
/* 展开部分 */ /* 展开部分 */
.expand-section { .expand-section {
width: 77.5vw; width: calc(7.5rem - 0.6rem);
margin-top: 12px;
float: left; float: left;
background: #f5f6fa; background: #f5f6fa;
padding: 0.4rem; padding: 0.1rem 0.3rem;
} }
/* 子复选框组 */ /* 子复选框组 */
...@@ -159,7 +154,7 @@ ...@@ -159,7 +154,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.2rem; gap: 0.2rem;
margin: 8px 0; margin: .2rem 0 .3rem 0;
} }
/* 上传器 */ /* 上传器 */
...@@ -196,13 +191,14 @@ ...@@ -196,13 +191,14 @@
margin: 0; margin: 0;
margin-top: 0.1rem; margin-top: 0.1rem;
padding-left: 0.2rem; padding-left: 0.2rem;
font-size: .28rem;
} }
.title_require::before { .title_require::before {
position: absolute; position: absolute;
content: '*'; content: '*';
color: #ee0a24; color: #ee0a24;
font-size: 0.3rem; font-size: inherit;
left: 0; left: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -220,7 +216,7 @@ ...@@ -220,7 +216,7 @@
width: 83vw; width: 83vw;
/* border: 1px solid; */ /* border: 1px solid; */
background: #FFFFFF; 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-top: 0.2rem;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
padding-left: 0.2rem; padding-left: 0.2rem;
...@@ -230,10 +226,18 @@ ...@@ -230,10 +226,18 @@
.bottom_bar button { .bottom_bar button {
float: right; float: right;
} }
.day_select{
border-color: rgb(191, 191, 191);
margin-right: 0.1rem;
width: 1rem;
padding-left: .2rem;
background-color: #fff;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 原 HTML 主体内容保持不变 --> <!-- 原 HTML 主体内容保持不变 -->
<div id="app"> <div id="app">
<div class="checklist-header"> <div class="checklist-header">
...@@ -254,7 +258,8 @@ ...@@ -254,7 +258,8 @@
</div> </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="yes">是</van-radio>
<van-radio name="no">否</van-radio> <van-radio name="no">否</van-radio>
<van-radio name="na">不涉及</van-radio> <van-radio name="na">不涉及</van-radio>
...@@ -273,13 +278,13 @@ ...@@ -273,13 +278,13 @@
<!-- 隐患描述 --> <!-- 隐患描述 -->
<van-cell-group> <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-field v-model="item.description" type="textarea" rows="1"></van-field>
</van-cell-group> </van-cell-group>
<!-- 照片上传 --> <!-- 照片上传 -->
<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> <div>
<van-uploader style="width: 80px; height:80px;" v-model="item.photos" <van-uploader style="width: 80px; height:80px;" v-model="item.photos"
:max-count="3" :after-read="handleFileUpload" class="uploader-wrapper" /> :max-count="3" :after-read="handleFileUpload" class="uploader-wrapper" />
...@@ -290,10 +295,16 @@ ...@@ -290,10 +295,16 @@
<!-- 整改期限 --> <!-- 整改期限 -->
<van-cell-group> <van-cell-group>
<van-cell> <van-cell>
<div class="limit_date_wrapper"> <div class="limit_date_wrapper">
<van-field label-align="left" readonly clickable label="整改期限" <span class="title_require">整改期限:</span>
:value="`${item.deadlineDays}天 截至整改日期：${item.deadlineDate}`" <select class="day_select" name="" v-model="item.deadlineDays" @change="handleDeadlineConfirm($event, item)">
@click="showDeadlinePicker = true; currentItem=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> </div>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
...@@ -321,11 +332,10 @@ ...@@ -321,11 +332,10 @@
title="选择整改天数" /> title="选择整改天数" />
</van-popup> </van-popup>
</div> </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 代码保持不变 // 原 JavaScript 代码保持不变
const checkData = [{ const checkData = [{
id: 1, id: 1,
...@@ -507,7 +517,9 @@ ...@@ -507,7 +517,9 @@
id: id, id: id,
title: `检查项目 ${id}`, title: `检查项目 ${id}`,
selected: null, selected: null,
subChecks: Array.from({ length: 10 }, (_, i) => ({ subChecks: Array.from({
length: 10
}, (_, i) => ({
id: i + 1, id: i + 1,
checked: false checked: false
})), })),
...@@ -524,7 +536,9 @@ ...@@ -524,7 +536,9 @@
showDeadlinePicker: false, showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'], deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null, currentEditingItem: null,
checkList: Array.from({ length: 40 }, (_, i) => createCheckItem(i + 1)), checkList: Array.from({
length: 40
}, (_, i) => createCheckItem(i + 1)),
checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！） checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
checkPageIndex: 0, checkPageIndex: 0,
currentItem: null, currentItem: null,
...@@ -550,10 +564,10 @@ ...@@ -550,10 +564,10 @@
url: '_shanghu_detail.html', url: '_shanghu_detail.html',
title: '高区应急扫描', title: '高区应急扫描',
isgoback: '0', isgoback: '0',
success: function (data) { success: function(data) {
// 成功回调 // 成功回调
}, },
fail: function (data) { fail: function(data) {
// 错误返回 // 错误返回
} }
}); });
...@@ -573,16 +587,17 @@ ...@@ -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 days = parseInt(value);
const currentItem = this.currentItem; item.deadlineDays = days;
if (currentItem) {
currentItem.deadlineDays = days;
const deadlineDate = new Date(); const deadlineDate = new Date();
deadlineDate.setDate(deadlineDate.getDate() + days); deadlineDate.setDate(deadlineDate.getDate() + days);
currentItem.deadlineDate = this.formatDate(deadlineDate); item.deadlineDate = this.formatDate(deadlineDate);
} }
this.showDeadlinePicker = false; // this.showDeadlinePicker = false;
}, },
// 日期格式化 // 日期格式化
formatDate(date) { formatDate(date) {
...@@ -590,8 +605,9 @@ ...@@ -590,8 +605,9 @@
} }
} }
}); });
}
</script> </script>
</div> </div>
</body> </body>
</html> </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