<template>
  <div class="level">
    <!-- 风险等级 -->
    <div style="font-size: 18px">主要风险点</div>
    <div class="level-btn">
      <span>疏通管道拥堵</span>
      <span>火灾隐患</span>
    </div>
    <div class="level_bottom">
      <div class="code">
        <img src="../../../assets/images/image 13.png" alt="" />
      </div>
      <div class="info">
        <div class="title">提示管理单位</div>
        <ul>
          <li>
            <span>1</span>
            <span>中海管理有限公司</span>
            <span class="error">未提示 <span class="action">提示</span></span>
          </li>
          <li>
            <span>2</span>
            <span>渝中区七星岗街道</span>
            <span>已提示</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.level {
  padding: 12px 10px;
  .level-btn {
    margin-top: 12px;
    span {
      display: inline-block;
      width: 90px;
      height: 25px;
      background: #f18787;
      font-size: 14px;
      color: #fff;
      line-height: 25px;
      text-align: center;
      margin-right: 10px;
      border-radius: 2px;
    }
  }
  img {
    display: inline-block;
    width: 131px;
    height: 131px;
    margin-top: 10px;
  }
  .level_bottom {
    display: flex;
    align-items: start;

    .code {
      flex: 0.35;
    }
    .info {
      flex: 0.65;
      padding-top: 10px;
      .title {
        height: 30px;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        background-color: rgba(0, 163, 255, 0.3) !important;
      }

      ul {
        border: 1px dotted #1d525f;
        box-sizing: border-box;
        li {
          border-bottom: 1px dotted #1d525f;
          box-sizing: border-box;
          padding: 2px 4px;
          height: 24px;
          line-height: 24px;
          display: flex;
          &:nth-last-child(1) {
            border-bottom: 0px;
          }
          span {
            font-size: 12px;
            &:nth-child(1) {
              flex: 0.1;
            }
            &:nth-child(2) {
              text-align: left;
              flex: 0.5;
            }
            &:nth-child(3) {
              flex: 0.4;
            }
          }

          .error {
            display: inline-block;
            color: #e84c4c;
            .action {
              display: inline-block;
              padding-left: 20px;
              text-decoration: underline;
              color: #44f1ff;
              cursor: pointer;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
