Skip to content

G
GaoQuYingJiH5-ASD
Commit 6d04e774 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

feature: css代码记过优化

parent d0667754
Show whitespace changes
Inline Side-by-side
Showing with 583 additions and 660 deletions
src/_check_list.html
View file @ 6d04e774
<!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 charset="UTF-8">
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover"> content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>消防安全检查清单</title> <title>消防安全检查清单</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script> <script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<head>
<style> <style>
/* 基础样式 */
html, html,
body { body {
background-color: #fff; background-color: #fff;
} }
/* 通用工具类 */
.pd-01rem { .pd-01rem {
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
} }
...@@ -40,109 +36,102 @@ ...@@ -40,109 +36,102 @@
width: 4rem; width: 4rem;
} }
/** /* 框架样式覆盖修改 */
* 框架样式覆盖修改 .checklist-container .van-cell__value {
*/
.van-cell__value {
overflow: unset; overflow: unset;
background-color: #f5f6fa;
} }
.van-cell:after { .checklist-container .van-cell:after {
border-bottom: none; border-bottom: none;
} }
.van-radio-group--horizontal { .checklist-container .van-radio-group--horizontal {
float: right; float: left;
} }
.checklist-container { .checklist-container .van-checkbox {
padding: 12px; width: auto;
background: #fff;
overflow: hidden;
padding-bottom: 1rem;
} }
.check-item { .checklist-container .van-checkbox__label,
width: 88vw; .checklist-container .van-radio__label {
padding: 12px; font-size: 0.28rem;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
.item-header { .checklist-container .van-checkbox__icon,
display: flex; .checklist-container .van-radio__icon {
align-items: center; font-size: 0.34rem;
margin-bottom: 8px; background-color: #fff;
} }
.item-number { .checklist-container .van-radio {
/* width: 28px; margin-right: 0.8rem;
height: 28px; margin-top: 0.2rem;
line-height: 28px;
text-align: center;
background: #1989fa;
color: white;
border-radius: 50%;
margin-right: 12px; */
} }
.expand-section { .checklist-container .van-cell {
width: 77.5vw;
margin-top: 12px;
/* border: 2px solid #000; */
float: left;
background: #f5f6fa; background: #f5f6fa;
padding: 0.4rem; margin-top: 0.2rem;
padding: 0;
} }
.sub-checkbox-group { .checklist-container .van-cell-group {
display: grid; background-color: #f5f6fa;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 8px 0;
} }
.uploader-wrapper { .checklist-container textarea {
--van-uploader-size: 80px; background-color: #fff !important;
} }
.deadline-picker { .checklist-container .van-uploader__upload {
display: flex; background-color: #fff;
gap: 12px;
margin: 12px 0;
} }
.check-item { .limit_date_wrapper .van-field__label {
float: left; width: 1.3rem;
} }
.van-radio-group--horizontal { .checklist-container .van-icon-apps-o:before,
float: left; .checklist-container .van-icon-fire-o:before {
font-size: 0.32rem;
} }
/* 样式优化 */ /* 检查清单容器 */
.checklist-container.item_title {} .checklist-container {
padding: 12px;
background: #fff;
overflow: hidden;
padding-bottom: 1rem;
}
.checklist-header p { /* 检查项 */
background-color: rgb(25, 137, 250); .check-item {
color: rgb(255, 255, 255); width: 88vw;
font-size: 0.26rem; padding: 12px;
padding: 0.2rem .3rem .2rem; background: white;
line-height: .39999rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin: 0; float: left;
} }
.checklist-header h5 { .item-header {
font-size: .32rem; display: flex;
text-align: center; align-items: center;
margin-bottom: 8px;
}
.item-number {}
.item-title {
font-size: 0.28rem;
} }
.item_title { .item_title {
font-size: .3rem; font-size: 0.3rem;
color: #1081E3; color: #1081E3;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
padding-left: .2rem; padding-left: 0.2rem;
} }
.item_title::before { .item_title::before {
...@@ -151,60 +140,61 @@ ...@@ -151,60 +140,61 @@
width: 0.05rem; width: 0.05rem;
height: 0.32rem; height: 0.32rem;
background-color: #1081E3; background-color: #1081E3;
margin-right: 0.2rem;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
} }
.van-checkbox { /* 展开部分 */
width: auto; .expand-section {
} width: 77.5vw;
margin-top: 12px;
.van-cell { float: left;
background: #f5f6fa; background: #f5f6fa;
margin-top: 0.2rem; padding: 0.4rem;
} }
/* 子复选框组 */
.sub-checkbox-group { .sub-checkbox-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: .2rem; gap: 0.2rem;
} margin: 8px 0;
.van-cell-group {
background-color: #f5f6fa;
}
.van-radio {
margin-right: 0.8rem;
margin-top: .2rem;
} }
.van-radio__label { /* 上传器 */
font-size: 0.28rem; .uploader-wrapper {
--van-uploader-size: 80px;
} }
textarea { /* 截止日期选择器 */
/* background: #f5f6fa !important; */ .deadline-picker {
background-color: #fff !important; display: flex;
gap: 12px;
margin: 12px 0;
} }
.van-cell__value { /* 检查清单头部 */
background-color: #f5f6fa; .checklist-header p {
background-color: rgb(25, 137, 250);
color: rgb(255, 255, 255);
font-size: 0.26rem;
padding: 0.2rem 0.3rem 0.2rem;
line-height: 0.39999rem;
margin: 0;
} }
.van-uploader__upload { .checklist-header h5 {
background-color: #fff; font-size: 0.32rem;
text-align: center;
} }
/* 必填标题 */
.title_require { .title_require {
position: relative; position: relative;
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-top: 0.1rem; margin-top: 0.1rem;
/* padding-top: 0.1rem; */
padding-left: 0.2rem; padding-left: 0.2rem;
} }
...@@ -213,33 +203,12 @@ ...@@ -213,33 +203,12 @@
content: '*'; content: '*';
color: #ee0a24; color: #ee0a24;
font-size: 0.3rem; font-size: 0.3rem;
left: 0rem; left: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.van-cell { /* 底部栏 */
padding: 0;
}
.van-checkbox__label {
font-size: 0.28rem;
}
.van-checkbox__icon,
.van-radio__icon {
font-size: 0.34rem;
background-color: #fff;
}
.limit_date_wrapper .van-field__label {
width: 1.3rem;
}
.item-title {
font-size: 0.28rem;
}
.bottom_bar { .bottom_bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -252,15 +221,11 @@ ...@@ -252,15 +221,11 @@
.bottom_bar button { .bottom_bar button {
float: right; float: right;
} }
.van-icon-apps-o:before,
.van-icon-fire-o:before {
font-size: .32rem;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 原 HTML 主体内容保持不变 -->
<div id="app"> <div id="app">
<div class="checklist-header"> <div class="checklist-header">
<p> <p>
...@@ -268,7 +233,6 @@ ...@@ -268,7 +233,6 @@
2.检查人员对管辖范围内企业安全情况负责，需如实上报。 2.检查人员对管辖范围内企业安全情况负责，需如实上报。
</p> </p>
<h5>九小场所安全检查清单</h5> <h5>九小场所安全检查清单</h5>
</div> </div>
<div class="checklist-container"> <div class="checklist-container">
<div class="item_title"> <div class="item_title">
...@@ -281,8 +245,7 @@ ...@@ -281,8 +245,7 @@
</div> </div>
<!-- 单选按钮组 --> <!-- 单选按钮组 -->
<van-radio-group v-model="item.selected" @change="handleSelectionChange(item)" <van-radio-group v-model="item.selected" @change="handleSelectionChange(item)" direction="horizontal">
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>
...@@ -296,23 +259,13 @@ ...@@ -296,23 +259,13 @@
<van-checkbox v-for="(subItem, subIndex) in item.subChecks" :key="subIndex" <van-checkbox v-for="(subItem, subIndex) in item.subChecks" :key="subIndex"
v-model="subItem.checked" shape="square"> v-model="subItem.checked" shape="square">
隐患点{{ subIndex + 1 }} 隐患点{{ subIndex + 1 }}
</van-checkbox> </van-checkbox>
</div> </div>
<!-- 隐患描述 --> <!-- 隐患描述 -->
<!-- <van-field
v-model="item.description"
type="textarea"
rows="2"
placeholder="请填写具体隐患情况"
label="隐患描述"
/> -->
<van-cell-group> <van-cell-group>
<p style="font-size:0.2rem" class="title_require">请输入隐患描述</p> <p style="font-size:0.2rem" 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>
<!-- 照片上传 --> <!-- 照片上传 -->
...@@ -324,15 +277,8 @@ ...@@ -324,15 +277,8 @@
</div> </div>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
<!-- <van-uploader
style="width: 80px; height:80px;"
v-model="item.photos"
:max-count="3"
:after-read="handleFileUpload"
class="uploader-wrapper"
/> -->
<!-- 整改期限 -->
<van-cell-group> <van-cell-group>
<van-cell> <van-cell>
<div class="limit_date_wrapper"> <div class="limit_date_wrapper">
...@@ -342,20 +288,12 @@ ...@@ -342,20 +288,12 @@
</div> </div>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</div> </div>
</div> </div>
</div> </div>
<!-- <div> <!-- 底部栏 -->
<div><span class="title">检查人员</span><span class="content">xxxxxx</span></div>
<div><span class="title">检查人员</span><span class="content">xxxxxx</span></div>
</div> -->
<div class="bottom_bar"> <div class="bottom_bar">
<div style="display: inline-block;"> <div style="display: inline-block;">
<van-icon name="apps-o" color="blue" /> <van-icon name="apps-o" color="blue" />
<span <span
...@@ -367,6 +305,7 @@ ...@@ -367,6 +305,7 @@
<van-button v-show="checkPageIndex<3" type="info" size="small" <van-button v-show="checkPageIndex<3" type="info" size="small"
@click="checkPageIndex++">下一项</van-button> @click="checkPageIndex++">下一项</van-button>
</div> </div>
<!-- 整改天数选择器 --> <!-- 整改天数选择器 -->
<van-popup v-model="showDeadlinePicker" position="bottom"> <van-popup v-model="showDeadlinePicker" position="bottom">
<van-picker :columns="deadlineOptions" @confirm="handleDeadlineConfirm" show-toolbar <van-picker :columns="deadlineOptions" @confirm="handleDeadlineConfirm" show-toolbar
...@@ -378,6 +317,7 @@ ...@@ -378,6 +317,7 @@
<script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2/lib/vant.min.js"></script>
<script> <script>
// 原 JavaScript 代码保持不变
const checkData = [{ const checkData = [{
id: 1, id: 1,
title: '消防安全检查', title: '消防安全检查',
...@@ -523,54 +463,50 @@ ...@@ -523,54 +463,50 @@
deadlineDate: '' deadlineDate: ''
}], }],
}, },
];
] function countSelectedNo(result) {
// 获取 checkList 中 selected 为 'no' 的对象个数
function countSelectedNo(result) { // 获取 checkList 中 selected 为 'no' 的对象个数
return result.reduce((total, category) => { return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected === 'no').length; return total + category.checkList.filter(item => item.selected === 'no').length;
}, 0); }, 0);
} }
function getTotalCheckListItems(result) { // 获取所有 checkList 子元素的总数 function getTotalCheckListItems(result) {
// 获取所有 checkList 子元素的总数
return result.reduce((total, category) => { return result.reduce((total, category) => {
console.log(category, 'category') console.log(category, 'category');
return total + category.checkList.length; return total + category.checkList.length;
}, 0); }, 0);
} }
function countSelectedNotNull(result) { // 获取 checkList 中 selected 不为 null 的个数 function countSelectedNotNull(result) {
// 获取 checkList 中 selected 不为 null 的个数
return result.reduce((total, category) => { return result.reduce((total, category) => {
return total + category.checkList.filter(item => item.selected !== null).length; return total + category.checkList.filter(item => item.selected !== null).length;
}, 0); }, 0);
} }
// 统计各个状态数量 // 统计各个状态数量
// 调用方法
const noCount = countSelectedNo(checkData); // selected=no 的个数 const noCount = countSelectedNo(checkData); // selected=no 的个数
const totalItems = getTotalCheckListItems(checkData); // checkList 子元素总数 const totalItems = getTotalCheckListItems(checkData); // checkList 子元素总数
const notNullCount = countSelectedNotNull(checkData); // selected 不为 null 的个数 const notNullCount = countSelectedNotNull(checkData); // selected 不为 null 的个数
// 初始化检查项数据结构 // 初始化检查项数据结构
function createCheckItem(id) { function createCheckItem(id) {
return { return {
id: id, id: id,
title: `检查项目 ${id}`, title: `检查项目 ${id}`,
selected: null, selected: null,
subChecks: Array.from({ subChecks: Array.from({ length: 10 }, (_, i) => ({
length: 10
}, (_, i) => ({
id: i + 1, id: i + 1,
checked: false checked: false
})), })),
description: '', description: '',
photos: [], photos: [],
deadlineDays: '', deadlineDays: '',
deadlineDate: '', deadlineDate: ''
};
}
} }
new Vue({ new Vue({
...@@ -579,32 +515,25 @@ ...@@ -579,32 +515,25 @@
showDeadlinePicker: false, showDeadlinePicker: false,
deadlineOptions: ['1', '3', '5', '7'], deadlineOptions: ['1', '3', '5', '7'],
currentEditingItem: null, currentEditingItem: null,
checkList: Array.from({ checkList: Array.from({ length: 40 }, (_, i) => createCheckItem(i + 1)),
length: 40
}, (_, i) => createCheckItem(i + 1)),
checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！） checkData, // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
checkPageIndex: 0, checkPageIndex: 0,
currentItem: null, currentItem: null,
noCount, noCount,
totalItems, totalItems,
notNullCount, notNullCount
}, },
watch: { watch: {
checkData: { checkData: {
handler(newVal) { handler(newVal) {
const snapshot = JSON.parse(JSON.stringify(newVal)); const snapshot = JSON.parse(JSON.stringify(newVal));
// const snapshot = JSON.stringify(newVal);
console.log('全量变化:', snapshot); console.log('全量变化:', snapshot);
this.noCount = countSelectedNo(newVal); // selected=no 的个数 this.noCount = countSelectedNo(newVal); // selected=no 的个数
this.totalItems = getTotalCheckListItems(newVal); // checkList 子元素总数 this.totalItems = getTotalCheckListItems(newVal); // checkList 子元素总数
this.notNullCount = countSelectedNotNull(newVal); // selected 不为 null 的个数 this.notNullCount = countSelectedNotNull(newVal); // selected 不为 null 的个数
}, },
deep: true deep: true
}, }
}, },
methods: { methods: {
navTo1() { navTo1() {
...@@ -612,54 +541,48 @@ ...@@ -612,54 +541,48 @@
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) {
//错误返回 // 错误返回
} }
}); });
}, },
// 处理单选变化 // 处理单选变化
handleSelectionChange(item) { handleSelectionChange(item) {
if (item.selected !== 'no') { if (item.selected !== 'no') {
this.$set(item, 'description', '') this.$set(item, 'description', '');
this.$set(item, 'photos', []) this.$set(item, 'photos', []);
this.$set(item, 'deadlineDays', '') this.$set(item, 'deadlineDays', '');
this.$set(item, 'deadlineDate', '') this.$set(item, 'deadlineDate', '');
} }
}, },
// 文件上传处理 // 文件上传处理
handleFileUpload(file) { handleFileUpload(file) {
console.log('上传文件:', file) console.log('上传文件:', file);
// 此处可添加实际文件上传逻辑 // 此处可添加实际文件上传逻辑
}, },
// 整改天数确认 // 整改天数确认
handleDeadlineConfirm(value) { handleDeadlineConfirm(value) {
const days = parseInt(value) const days = parseInt(value);
// const currentItem = this.checkList.find( const currentItem = this.currentItem;
// item => item.selected === 'no' && !item.deadlineDays
// )
const currentItem = this.currentItem
if (currentItem) { if (currentItem) {
currentItem.deadlineDays = days 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) currentItem.deadlineDate = this.formatDate(deadlineDate);
} }
this.showDeadlinePicker = false this.showDeadlinePicker = false;
}, },
// 日期格式化 // 日期格式化
formatDate(date) { formatDate(date) {
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}` return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
} }
} }
}) });
</script> </script>
</body> </div>
</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