Przeglądaj źródła

style(HTML template): 统一使用rem单位重构页面样式,同时优化隐患项和建议内容

1. 将所有固定px单位转换为rem适配单位,统一页面尺寸规范
2. 调整隐患项列表的类名和排版细节,修正部分隐患描述的语序与完整性
3. 优化风险提示的排序和建议内容的准确性,补充遗漏的检查项
4. 调整部分风险等级标签的匹配逻辑,修正建议话术细节
Stclair 3 tygodni temu
rodzic
commit
be95adbb05
1 zmienionych plików z 82 dodań i 74 usunięć
  1. 82 74
      template/report.html

+ 82 - 74
template/report.html

@@ -19,68 +19,71 @@
         max-width: 100%;
         margin: 0 auto;
         background: #fff;
-        border-radius: 12px;
+        border-radius: 0.75rem;
         box-shadow: 0 1px 4px rgba(0,0,0,0.05);
       }
       .section-title {
-        font-size: 18px;
+        font-size: 1.125rem;
         font-weight: 600;
         color: #333;
-        padding-bottom: 8px;
+        padding-bottom: 0.5rem;
         border-bottom: 1px solid #e8e8e8;
       }
       .report-overview {
         background: #f6ffed;
-        padding: 16px;
-        border-radius: 8px;
+        padding: 1rem;
+        border-radius: 0.5rem;
       }
       .report-overview h4 {
-        font-size: 14px;
+        font-size: 0.875rem;
         font-weight: 600;
         color: #52c41a;
-        margin-bottom: 8px;
+        margin-bottom: 0.5rem;
       }
       .report-overview p {
-        font-size: 13px;
+        font-size: 0.8125rem;
         color: #666;
         line-height: 1.8;
       }
       .hazard-item {
         background: #fffbf0;
-        padding: 16px;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        margin-left: 0px;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin: 0 0 1.25rem 0;
         border-left: 4px solid #faad14;
       }
       .hazard-title {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 0.5rem;
         font-weight: 600;
-        font-size: 15px;
+        font-size: 0.9375rem;
         color: #333;
-        margin-bottom: 12px;
+        margin-bottom: 0.75rem;
       }
       .hazard-title .hazard-icon {
-        font-size: 18px;
+        font-size: 1.125rem;
       }
-      .hazard-item ul {
+      .hazard-item-ul {
         margin: 0;
-        padding-left: 28px;
+        padding:0 0 0 2.5rem;
+        padding-left: 2.5rem;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-right: 0;
       }
-      .hazard-item ul li {
-        font-size: 13px;
+      .hazard-item-li {
+        font-size: 0.8125rem;
         color: #666;
         line-height: 1.8;
-        margin-bottom: 4px;
+        margin-bottom: 0.25rem;
       }
       .risk-tag {
         display: inline-block;
-        margin-top: 12px;
-        padding: 4px 10px;
-        border-radius: 4px;
-        font-size: 12px;
+        margin-top: 0.75rem;
+        padding: 0.25rem 0.625rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
         font-weight: 500;
       }
       .risk-tag.high {
@@ -96,15 +99,15 @@
         color: #52c41a;
       }
       .suggestion-list {
-        margin-top: 16px;
+        margin-top: 1rem;
       }
       .suggestion-item {
         display: flex;
         align-items: flex-start;
-        gap: 12px;
-        padding: 12px;
-        border-radius: 6px;
-        margin-bottom: 10px;
+        gap: 0.75rem;
+        padding: 0.75rem;
+        border-radius: 0.375rem;
+        margin-bottom: 0.625rem;
       }
       .suggestion-item.high {
         background: #fff1f0;
@@ -116,9 +119,9 @@
         background: #f6ffed;
       }
       .priority {
-        padding: 4px 10px;
-        border-radius: 4px;
-        font-size: 12px;
+        padding: 0.25rem 0.625rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
         font-weight: 600;
         color: #fff;
         flex-shrink: 0;
@@ -133,18 +136,18 @@
         background: #52c41a;
       }
       .suggestion-content {
-        font-size: 13px;
+        font-size: 0.8125rem;
         color: #666;
         line-height: 1.6;
       }
       .footer {
-        margin-top: 30px;
-        padding-top: 20px;
+        margin-top: 1.875rem;
+        padding-top: 1.25rem;
         border-top: 1px solid #e8e8e8;
         text-align: center;
       }
       .footer p {
-        font-size: 12px;
+        font-size: 0.75rem;
         color: #999;
         line-height: 1.6;
       }
@@ -167,23 +170,23 @@
         <span class="hazard-icon">⛽</span>
         <span>加油机</span>
       </div>
-      <ul>
+      <ul class="hazard-item-ul">
         <li>加油机外观不整洁,有明显油污</li>
-        <li>机座地脚螺栓/紧固件连接明显松动</li>
-        <li>底部填沙潮湿或明显油迹</li>
+        <li>机座地脚螺栓明显松动</li>
+        <li>加油机紧固件连接明显松动</li>
+        <li>加油机底部填沙潮湿</li>
+        <li>加油机底部填沙有明显油迹</li>
         <li>进油管与紧急截断阀连接处未露出沙外</li>
         <li>油品管线连接处有明显渗漏</li>
         <li>过滤器有明显油污和渗漏</li>
         <li>加油机底部未设置截断阀</li>
-        <li>加油枪密封不良,工作时渗漏</li>
-        <li>汽油加油枪无集气罩或集气罩破损</li>
-        <li>油气回收检测口丝堵松动,管路渗油</li>
         <li>加油机静电接地失效</li>
         <li>加油机铭牌不清晰</li>
-        <li>工艺仓与电气仓隔板孔洞未密封</li>
-        <li>防爆挠性管连接松动,接线盒静电接地不合规</li>
+        <li>加油机工艺仓与电气仓之间隔板上的孔洞未密封</li>
+        <li>加油机内防爆挠性管连接明显松动</li>
+        <li>防爆接线盒未在专用接地端子处进行静电接地连接</li>
       </ul>
-      <span class="risk-tag high">风险:设备稳定性不足、油品泄漏风险、火灾爆炸风险、静电危害、环境污染</span>
+      <span class="risk-tag high">风险:油品泄漏风险、火灾爆炸风险、静电危害、设备稳定性不足、环境污染</span>
     </div>
 
     <div class="hazard-item">
@@ -191,39 +194,43 @@
         <span class="hazard-icon">🔧</span>
         <span>加油机输油软管</span>
       </div>
-      <ul>
+      <ul class="hazard-item-ul">
         <li>加油软管上未设置安全拉断阀</li>
-        <li>存在油污、渗漏、连接松动等问题</li>
       </ul>
-      <span class="risk-tag medium">风险:车辆误拉扯导致软管断裂,引发泄漏;泄漏本身构成直接风险</span>
+      <span class="risk-tag medium">风险:车辆误拉扯导致软管断裂,引发泄漏事故</span>
     </div>
 
     <div class="hazard-item">
       <div class="hazard-title">
-        <span class="hazard-icon">🛡️</span>
-        <span>防撞栏及周边设施</span>
+        <span class="hazard-icon">🔫</span>
+        <span>加油枪</span>
       </div>
-      <ul>
-        <li>靠近岛端部的加油机未设置防撞柱或防撞柱松动破损,未涂刷警示色</li>
-        <li>加油站进口/进站口减速带缺失、破损失效</li>
-        <li>地面破损、凹陷,或环保沟盖板破损凸起,影响通行</li>
-        <li>地面未按规范划线</li>
-        <li>雨水排水设施破损或堵塞</li>
+      <ul class="hazard-item-ul">
+        <li>加油枪密封不良,工作时出现明显渗漏</li>
+        <li>汽油加油枪无集气罩</li>
+        <li>加油枪集气罩破损</li>
+        <li>油气回收检测口的丝堵松动</li>
+        <li>油气回收管路渗油</li>
       </ul>
-      <span class="risk-tag medium">风险:车辆撞击风险,可能导致设备损坏和二次事故;交通秩序混乱;地面积水或通行障碍</span>
+      <span class="risk-tag high">风险:操作点直接泄漏风险,增加火灾危险和油气挥发,污染空气</span>
     </div>
 
     <div class="hazard-item">
       <div class="hazard-title">
-        <span class="hazard-icon">🔫</span>
-        <span>加油枪</span>
+        <span class="hazard-icon">🛡️</span>
+        <span>防撞栏及周边设施</span>
       </div>
-      <ul>
-        <li>加油枪密封不良,工作时渗漏</li>
-        <li>汽油加油枪无集气罩或集气罩破损</li>
-        <li>油气回收系统相关部件问题</li>
+      <ul class="hazard-item-ul">
+        <li>靠近岛端部的加油机未设置防撞柱</li>
+        <li>防撞柱松动破损,未涂刷警示色</li>
+        <li>加油站进口未设置减速带,或减速带破损失效</li>
+        <li>进站口未设置减速带或减速带损坏、失效</li>
+        <li>地面破损、凹陷,影响车辆及行人正常通行</li>
+        <li>环保沟盖板破损、凸起等情况影响车辆及行人正常通行</li>
+        <li>地面未按规范划线</li>
+        <li>雨水排水设施破损或堵塞</li>
       </ul>
-      <span class="risk-tag high">风险:操作点直接泄漏风险,增加火灾危险和油气挥发;污染空气</span>
+      <span class="risk-tag medium">风险:车辆撞击风险,可能导致设备损坏和二次事故;交通秩序混乱;通行障碍</span>
     </div>
 
     <div class="hazard-item">
@@ -231,11 +238,12 @@
         <span class="hazard-icon">🔥</span>
         <span>其他关联要素</span>
       </div>
-      <ul>
-        <li>消防设备:每2台加油机设置少于2只5kg手提式干粉灭火器</li>
-        <li>安全监测与防护:加油现场可燃气体报警仪失效;现场作业人员未规范穿着防静电工作服、鞋</li>
-        <li>静电管控:有灌桶作业的加油岛未设置专用静电消除装置</li>
-        <li>区域布置:柴油尾气处理液加注设施布置位置不合规</li>
+      <ul class="hazard-item-ul">
+        <li>每2台加油机设置少于2只5kg手提式干粉灭火器</li>
+        <li>有灌桶加油作业的加油岛未设置专用静电消除装置</li>
+        <li>加油现场可燃气体报警仪失效</li>
+        <li>现场作业人员未规范穿着防静电工作服、鞋等个体防护装备</li>
+        <li>柴油尾气处理液加注设施在岛的两侧边缘100mm和岛端1.2m以内布置</li>
       </ul>
     </div>
 
@@ -247,19 +255,19 @@
       </div>
       <div class="suggestion-item high">
         <span class="priority">高</span>
-        <span class="suggestion-content">静电与火源管控:必须确保加油机静电接地有效、作业人员规范穿戴防静电装备、灭火器配置到位且完好</span>
+        <span class="suggestion-content">静电与火源管控:必须确保加油机静电接地有效、可燃气体报警仪完好、作业人员规范穿戴防静电装备、灭火器配置到位且完好</span>
       </div>
       <div class="suggestion-item medium">
         <span class="priority">中</span>
-        <span class="suggestion-content">结构/机械完整性:紧固松动的螺栓、修复或安装防撞柱,保障设备稳固,防止意外碰撞损坏</span>
+        <span class="suggestion-content">结构/机械完整性:紧固松动的螺栓、修复或安装防撞柱与减速带,保障设备稳固,防止意外碰撞损坏</span>
       </div>
       <div class="suggestion-item medium">
         <span class="priority">中</span>
-        <span class="suggestion-content">交通与现场秩序:修复损坏的减速带、地面和划线,确保车辆行驶与人员行走安全</span>
+        <span class="suggestion-content">交通与现场秩序:修复破损地面、凹陷、环保沟盖板及雨水排水设施,按规范重新划线,确保车辆行驶与人员行走安全</span>
       </div>
       <div class="suggestion-item base">
         <span class="priority">基</span>
-        <span class="suggestion-content">标识与可视化:清洁加油机、涂刷警示色、确保铭牌清晰,提升安全警示作用</span>
+        <span class="suggestion-content">标识与可视化:清洁加油机、涂刷防撞柱警示色、确保铭牌清晰,提升安全警示作用</span>
       </div>
     </div>