qa_portal_vue/app/pages/new/details.vue

<template>
  <div class="container">
    <AppHead/>
    <div class="banner">
      <div class="banner_main">
        <h2>新闻中心</h2>
        <p>安全第一 预防为主 综合治理</p>
      </div>
    </div>
    <div class="new_container">
      <div class="top">
        <div class="wrap">
          <div class="list active">全部</div>
          <div class="list">安全要闻</div>
          <div class="list">政府发文</div>
        </div>
      </div>
      <div class="new_main">
        <div class="title">
          <h2>安全生产事故 | 900余人被疏散！广西一糖厂产生大量刺激性烟雾</h2>
          <div class="time">2024-05-23</div>
        </div>
        <div class="main">
          <p>
            5月20日19时50分许，广西百色市田东县南华糖业有限公司二糖厂存放的约12吨消毒剂(三氯异氰尿酸)因近期暴雨天气受潮发生反应，产生大量烟雾，散发出刺激性气味。
          </p>
          <p>田东县迅速反应，及时处置，保护群众生命财产安全。第一时间组成工作组及时对二糖厂生活区和周边居民共900多人进行疏散，在该县体育馆设置临时安置点，为群众提供矿泉水、口罩、席子、被子等物资。</p>
          <p>在百色市生态环境、应急、消防等部门的现场指导下，组织田东县应急、消防、生态环境、卫生健康等部门及专家开展现场处置工作。至21日凌晨2时20分许，现场已无烟雾产生，所有三氯异氰尿酸已安全转移，周边区域烟雾均已消散。疏散的群众已全部安全返回。</p>
          <p>生态环境部门21日2时50分完成现场监测，7个监测点位中背景点厂界东北420米(上风向)氨气浓度为0.47mg/m³，其余点位扣除背景点后氨气均未检出，符合《恶臭污染物排放标准》(GB 14554-93)表1标准限值要求;所有点位氯气均未检出，符合《大气污染物综合排放标准》(GB 16297-1996)表1无组织排放监控限值要求，事故未对周边环境产生不良影响。</p>
          <p>近期，广西多地遭遇特大暴雨导致多处地段发生内涝暴雨过后仍不能放松警惕防潮、防事故、防次生灾害……这些安全注意事项一起来看↓↓↓危化品储存　　夏季高温、雷雨、台风等极端天气容易对危险化学品安全生产造成不利影响。企业要加强危险化学品储罐、仓库的安全管理，严禁超量储存、违规混存、超高堆放、野蛮装卸等行为。　　有效落实危险化学品仓库防雨、防潮、防雷电措施，特别是受潮易自燃或分解有毒气体的危险化学品，要严格按标准规范入库储存，严禁露天存放，严禁与禁忌物混合储存。　　加强防雷、防静电设施的巡检和维护，按规定定期检测，确保防雷、防静电设施完好有效。</p>
        </div>
        <div class="bottom">
          <div class="item">
            <div class="previous">上一篇</div>
            <div class="info">
              <div class="tit">国务院安委会办公室 应急管理部关于  开展2024年全国“安全生产月”活动的通知</div>
              <div class="time">2024-05-21</div>
            </div>
          </div>

          <div class="item">
            <div class="previous">下一篇</div>
            <div class="info">
              <div class="tit">国务院安委会办公室 应急管理部关于  开展2024年全国“安全生产月”活动的通知</div>
              <div class="time">2024-05-21</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AppFoot/>
    <right/>
  </div>
</template>
<script setup lang="ts">

</script>

<style scoped lang="scss">
.container {
  background: #f6f8fa;
.banner {
  width: 100%;
  height: 494px;
  background: url("@/assets/images/newbanner.png") no-repeat top center;
  .banner_main {
    width: 1400px;
    margin: 0 auto;
    padding-top: 230px;
    h2 {
      font-size: 60px;
      color: #ffffff;
      margin: 0;
      padding: 0;
    }
    p {
      margin: 0;
      color: #ffffff;
    }
  }
}
  .new_container {
    width: 100%;

    .top {
      width: 100%;
      height: 60px;
      background: #ffffff;

      .wrap {
        width: 1400px;
        margin: 0 auto;
        display: flex;

        .list {
          font-size: 16px;
          line-height: 60px;
          cursor: pointer;
          position: relative;
          margin-right: 40px;

          &.active {
            color: #006aff;
            &:before {
              opacity: 1;
            }
          }

          &:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: 3px solid #006aff;
            width: 100%;
            opacity: 0;
          }
          &:hover {
            color: #006aff;
            &:before {
              opacity: 1;
            }
          }
        }
      }
    }
    .new_main{
      width: 1400px;
      margin: 20px auto 20px;
      background: #ffffff;
      min-height: 600px;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
      padding: 20px 50px;
      border-top: 3px solid #1d78ff;

      .title{
        width: 100%;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 20px;

        .time{
          color: #999999;
        }
      }
      .main{
        padding: 20px 0;
        color: #666666;

        p{
          text-indent: 2rem;
          line-height: 2;
          font-size: 16px;
        }
        img{
          margin: 0 auto;
          max-width: 100%;
        }
      }
      .bottom{
        width: 100%;
        .item{
          padding: 20px;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
          margin-bottom: 20px;
          cursor: pointer;
          .previous{
            font-size: 16px;
            margin-bottom: 20px;
          }
          .title{
            font-size: 16px;
          }
          .info{
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #666666;
          }
          &:hover{
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

  }
}

</style>