Skip to content

G
GaoQuYingJiH5-ASD
Commit 2b656580 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：上报整改详情样式修改，字段调整

parent b8aba228
Hide whitespace changes
Inline Side-by-side
Showing with 281 additions and 8 deletions
src/_check_info.css
View file @ 2b656580
......@@ -331,3 +331,186 @@ body {
width: 2rem;
}
/* 隐患整改模块 */
.rectification-module {
padding: 0.3rem;
/* 上下左右内边距30px */
background: #fff;
margin-bottom: 0.2rem;
/* 底部边距20px */
overflow: hidden;
}
.module-header {
display: flex;
align-items: center;
gap: 0.15rem;
/* 图标与标题间距15px */
margin-bottom: 0.3rem;
/* 模块标题与内容间距30px */
}
.module-icon {
width: 0.4rem;
/* 图标宽度40px */
height: 0.4rem;
/* 图标高度40px */
}
.module-title {
font-size: 0.28rem;
/* 标题字体32px */
font-weight: bold;
color: #00B55E;
}
.timeline-list {
/* padding-left: 0.3rem; */
/* 时间线左侧内边距30px */
}
.timeline-item {
display: flex;
margin-bottom: 0.4rem;
/* 时间线项间距40px */
}
.timeline-marker {
position: relative;
width: 0.35rem;
}
.marker-dot {
width: 0.2rem;
/* 时间点直径20px */
height: 0.2rem;
background: #1989fa;
border-radius: 50%;
position: absolute;
left: 0;
top: 0.05rem;
/* 时间点垂直偏移5px */
}
.marker-line {
width: 0.02rem;
/* 时间线宽度2px */
height: 100%;
background: #e5e7eb;
margin-left: 0.09rem;
/* 时间线水平居中 */
margin-top: 0.25rem;
/* 时间线顶部偏移25px */
}
.timeline-content {
flex: 1;
}
.rectification-date {
color: #000;
font-size: 0.28rem;
/* 日期字体28px */
margin-bottom: 0.15rem;
/* 日期与图片间距15px */
font-weight: 500;
}
.rectification-images {
display: flex;
gap: 0.2rem;
/* 图片间距20px */
margin-bottom: 0.2rem;
/* 图片与状态容器间距20px */
}
.rect-image {
width: 1.2rem;
/* 图片宽度120px */
height: 1.2rem;
/* 图片高度120px */
object-fit: cover;
border-radius: 0.08rem;
/* 图片圆角8px */
}
.status-container {
border-radius: 0.08rem;
/* 状态容器圆角8px */
}
/* 审批拒绝状态 */
.reject-status {
background: #FFFAFA;
border: 0.02rem solid #FF7C7C;
/* 边框宽度2px */
padding: .1rem .24rem;
position: relative;
}
.reject-status .status-tag {
position: absolute;
right: .2rem;
top: 0.2rem;
background: #ef4444;
color: #fff;
font-size: 0.24rem;
/* 标签字体24px */
padding: 0.09rem 0.12rem;
/* 标签内边距4px 12px */
border-radius: 0.04rem;
/* 标签圆角4px */
}
.reject-status>.status-content>p {
font-weight: 500;
font-size: 0.28rem;
color: #545454;
}
/* 待审批状态 */
.pending-status {
border: 0.02rem solid #fcd34d;
/* 边框宽度2px */
background: #fffbeb;
display: flex;
justify-content: flex-end;
padding: 0.12rem;
}
.pending-status .status-tag {
color: #fff;
background: #FF9415;
font-weight: 500;
font-size: 0.24rem;
padding: .1rem .3rem;
}
/* 审批通过状态 */
.approve-status {
display: flex;
justify-content: space-between;
padding: 0.12rem;
align-items: center;
background: #f8fcfa;
border: 0.02rem solid #44C688;
/* 边框宽度2px */
}
.approve-status .status-tag {
color: #fff;
background: #00B55E;
font-weight: 500;
font-size: 0.24rem;
padding: .1rem .1rem;
display: inline-block;
width: 1.2rem;
text-align: center;
line-height: 1;
}
.approve-status>.status-content>p {
font-weight: 500;
font-size: 0.28rem;
color: #545454;
}
src/_check_info.html
View file @ 2b656580
......@@ -140,7 +140,68 @@
</div>
</div>
</div>
<!-- 新增隐患整改模块 -->
<div class="rectification-module">
<!-- 模块标题 -->
<div class="module-header">
<img src="../image/code/zhenggai-title.png" alt="整改图标" class="module-icon">
<h4 class="module-title">隐患整改</h4>
</div>
<!-- 时间线进度列表 -->
<div class="timeline-list">
<!-- 遍历整改记录 -->
<div v-for="(record, index) in rectificationRecords" :key="index" class="timeline-item">
<!-- 时间线左侧标记（点+线） -->
<div class="timeline-marker">
<div class="marker-dot"></div>
<div class="marker-line"></div>
</div>
<!-- 时间线内容 -->
<div class="timeline-content">
<!-- 整改日期 -->
<p class="rectification-date">整改日期：{{ record.rectificationDate }}</p>
<!-- 整改图片 -->
<div class="rectification-images">
<img v-for="(img, i) in record.images" :key="i"
src="../image/code/zhenggai-title.png" alt="整改图"
@click="showImage(record.images, i)" class="rect-image">
</div>
<!-- 状态容器（三种类型） -->
<div :class="['status-container', record.status]">
<!-- 审批拒绝 -->
<div v-if="record.status === 'reject'" class="reject-status">
<span class="status-tag">审批拒绝</span>
<div class="status-content">
<p>审批日期：{{ record.approveDate }}</p>
<p>拒绝原因：{{ record.rejectReason }}</p>
</div>
</div>
<!-- 待审批 -->
<div v-if="record.status === 'pending'" class="pending-status">
<span class="status-tag">待审批</span>
</div>
<!-- 审批通过 -->
<div v-if="record.status === 'approve'" class="approve-status">
<div class="status-content">
<p>审批日期：{{ record.approveDate }}</p>
</div>
<span class="status-tag">审批通过</span>
</div>
</div>
<p class="rectification-date">整改截止日期：{{ record.rectificationDate }}</p>
</div>
</div>
</div>
</div>
<van-form v-if="checkPageIndex == (checkData?.length-1)">
<van-cell>
<van-field label="检查人员" v-model="checkPeopleName" readonly />
......@@ -148,18 +209,21 @@
<van-cell>
<van-field label="检查日期" v-model="checkDate" readonly />
</van-cell>
<van-cell v-if="flag!='ADD'&&flag!='JC_XQ'">
<van-field label="整改截止日期" v-model="rectificationDeadline" readonly />
<van-cell>
<van-field label="检查单位" v-model="checkDate" readonly />
</van-cell>
<div v-if="flag=='0' || flag=='1' || flag=='3'">
<!-- <van-cell v-if="flag!='ADD'&&flag!='JC_XQ'">
<van-field label="整改截止日期" v-model="rectificationDeadline" readonly />
</van-cell> -->
<!-- <div v-if="flag=='0' || flag=='1' || flag=='3'">
<van-cell>
<van-field label="审核日期" v-model="reviewDate" readonly />
</van-cell>
<van-cell>
<van-field label="审核记录" v-model="reviewRecord" readonly />
</van-cell>
</div>
</div> -->
</van-form>
<!-- 拒绝弹窗 -->
......@@ -254,4 +318,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
src/_check_info.js
View file @ 2b656580
......@@ -77,6 +77,32 @@ window.onload = function () {
show4jujue :false,
refuseContent: '', // 拒绝原因
dept4resuse:[], // 拒绝部门
rectificationRecords: [
/* 示例数据结构，实际从接口获取 */
{
rectificationDate: '2024-03-15', // 整改日期
images: ['/images/rectify-20240315-01.jpg', '/images/rectify-20240315-02.jpg'], // 整改图片路径
status: 'reject', // 状态：拒绝
approveDate: '2024-03-16', // 审批日期
rejectReason: '消防通道堵塞未清理，灭火器过期未更换' // 拒绝原因
},
// 待审批记录（仅基础信息）
{
rectificationDate: '2024-03-20', // 整改日期
images: ['/images/rectify-20240320-01.jpg'], // 整改图片路径（单张）
status: 'pending', // 状态：待审批
// 待审批状态无需审批日期和拒绝原因
},
// 审批通过记录（含审批信息）
{
rectificationDate: '2024-03-25', // 整改日期
images: ['/images/rectify-20240325-01.jpg', '/images/rectify-20240325-02.jpg', '/images/rectify-20240325-03.jpg'], // 三张图片
status: 'approve', // 状态：通过
approveDate: '2024-03-26' // 审批日期
}
]
},
mounted() {
/**
......@@ -477,4 +503,4 @@ window.onload = function () {
}
}
});
}
\ 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