<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-12-27 13:58:28
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-12-30 09:43:56
 * @FilePath: /huaxin-web/src/views/indexcomponents/index/Left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index-right flex-d-b" :class="{ active: !show }">
    <div class="t flex-d-b">
      <Title text="设备生命周期" />
      <div class="container bb">
        <Top />
      </div>
    </div>
    <div class="m flex-d-b">
      <Title text="餐饮用户安检概况" />
      <div class="container bb">
        <Middle />
      </div>
    </div>
    <div class="b flex-d-b">
      <Title text="隐患统计" />
      <div class="container bb">
        <Bottom />
      </div>
    </div>
  </div>
</template>

<script>
import Title from "../Title.vue";
import Top from "./components/Top.vue";
import Middle from "./components/Middle.vue";
import Bottom from "./components/Bottom.vue";

export default {
  components: {
    Title,
    Top,
    Middle,
    Bottom,
  },
  name: "",
  props: {
    show: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.index-right {
  position: absolute;
  height: 85.46%;
  width: 440px;
  z-index: 1000;
  right: 0;
  top: 9%;
  transition: all 1s;

  &.active {
    right: -440px;
  }
  > div {
    border-radius: 8px;
    .container {
      flex: 1;
      // background: red;
      // padding:16px 20px 20px 20px;
      padding: 10px 20px;
    }
  }
  .t {
    height: 21.12%;
    background: rgba(1, 14, 27, 0.6);
  }
  .m {
    height: 35.75%;
    background: rgba(1, 14, 27, 0.6);
  }
  .b {
    height: 37.91%;
    background: rgba(1, 14, 27, 0.6);
  }
}
</style>
