zhgkpt-datav/app/src/views/Home/components/HiddenDangerDetection.vue

<script>
import HiddenDangerTotal from "@/components/HiddenDangerTotal.vue";
import RiskWarning from "@/components/RiskWarning.vue";
import Rectification from "./Rectification.vue";
export default {
  name: "HiddenDangerDetection",
  components: {
    HiddenDangerTotal,
    RiskWarning,
    Rectification,
  },
};
</script>

<template>
  <div class="hidden-danger-detection">
    <div class="hidden-danger-detection_top">
      <div>按排查进度分：</div>
      <div class="hidden-danger-detection_top_inner">
        <hidden-danger-total number="1302/23768" label="总条数" unit="栋/次" />
        <hidden-danger-total number="987/8768" label="隐患数" unit="栋/条" />
      </div>
    </div>
    <div class="hidden-danger-detection_bottom">
      <div class="item">
        <RiskWarning />
      </div>
      <div class="item">
        <Rectification />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.hidden-danger-detection_top {
  margin: 5px 4px;
  background-color: rgba(0, 213, 255, 0.12);
  padding: 8px;
  display: flex;
  align-items: center;
  .hidden-danger-detection_top_inner {
    display: flex;
  }
}

.hidden-danger-detection_bottom {
  display: flex;
  margin: 0px 4px;
  gap: 4px;
  .item {
    background-color: rgba(0, 213, 255, 0.12);
    height: 231px;
    &:nth-child(1) {
      width: 175px;
    }
    &:nth-child(2) {
      width: 259px;
    }
  }
}
</style>