<template>
  <div id="elevator">
    <div class="side-area">
      <Title text="设备列表"></Title>
      <ShadowContainer></ShadowContainer>
      <Title text="报警信息"></Title>
      <ShadowContainer>
        <div id="warning-info">
          <div>
            <div class="warning-info-text">今日报警</div>
            <div class="warning-info-num">0</div>
            <div class="warning-info-img">
              <img src="@/assets/fallprotection/today.png" alt="" />
            </div>
          </div>
          <div>
            <div class="warning-info-text">累计未处理报警</div>
            <div class="warning-info-num" style="color: #ffc74c">0</div>
            <div class="warning-info-img">
              <img src="@/assets/fallprotection/total-no.png" alt="" />
            </div>
          </div>
          <div>
            <div class="warning-info-text">累计履责率</div>
            <div class="warning-info-num" style="color: #22c3ed">
              0<span style="font-size: 14px; margin-left: 12px">%</span>
            </div>
            <div class="warning-info-img">
              <img src="@/assets/fallprotection/percent.png" alt="" />
            </div>
          </div>
        </div>
        <div class="platform-list">
          <div class="platform">
            <div class="platform-title">
              <img src="@/assets/management/sample.png" alt="" />
              PT20220824340320
              <span class="status">未处理</span>
            </div>
            <div class="platform-info">
              <div>报警内容：</div>
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="elevator-container">
      <ShadowContainer>
        <div style="height: 980px"></div>
      </ShadowContainer>
    </div>
  </div>
</template>
<script>
export default {
  name: "Elevator",
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
#elevator {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
}
.side-area {
  width: 25%;
}
.elevator-container {
  width: calc(75% - 20px);
}
.platform {
  img {
    width: 20px;
    vertical-align: middle;
    margin-right: 6px;
  }
  font-size: 14px;
  color: #c6def9;
  .platform-title {
    background: rgba(44, 96, 162, 0.2);
    border-bottom: 1px solid rgba(122, 143, 173, 0.4);
    line-height: 40px;
    padding: 0 12px;
    .status {
      float: right;
    }
  }
  .platform-info {
    background: rgba(44, 96, 162, 0.1);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    & > div {
      width: calc(50% - 48px);
      padding: 6px 12px;
    }
  }
  &:hover {
    color: #27acfb;
    .platform-title,
    .platform-info {
      background: rgba(44, 96, 162, 0.4);
    }
  }
}
#warning-info {
  display: flex;
  justify-content: space-between;
  text-align: center;
  .warning-info-text {
    padding-top: 20px;
    font-size: 16px;
    color: #ffffff;
    line-height: 18px;
  }
  .warning-info-num {
    font-size: 24px;
    color: #ff6151;
  }
  .warning-info-img {
    position: relative;
    transform: translateY(-60px);
    margin-bottom: -60px;
    img {
      width: 80%;
      margin: 0 auto;
    }
  }
}
</style>