<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-12-27 13:58:28
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-12-30 09:44:37
 * @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-left flex-d-b"  :class="{ active: !show }">
    <div @click="clickShow" class="closeList flex" :class="{ active: !show }">
      <div>
        <!-- {{ show ? "收起功能菜单" : "打开功能菜单" }} -->

      </div>
      <img :src="show ? close : open" alt="" />
    </div>
    <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";
import open from "@/assets/indexImg/open.png";
import close from "@/assets/indexImg/close.png";

export default {
  components: {
    Title,
    Top,
    Middle,
    Bottom,
  },
  name: "",
  data() {
    return {
      show: true,
      open,
      close,
    };
  },
  methods: {
    clickShow() {
      this.show = !this.show;
      this.$emit("clickShow", this.show);
    },
  },
};
</script>
<style lang="scss" scoped>
.index-left {
  position: absolute;
  height: 85.46%;
  width: 440px;
  z-index: 1000;
  left: 0;
  top: 9%;
  transition: all 1s;

  &.active{
    left:-440px;
  }
  .btn {
    position: absolute;
    background: red;
    left: 440px;
    top: 110px;
    width: 20px;
    height: 20px;
  }
  > 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);
  }
}
.closeList {
  transition: all 1s;
  position: absolute;
  // width: 148px;
  width: 40px;
  height: 36px;
  font-size: 14px;
  font-weight: 400;
  color: #58faf4;
  background: #021325;
  right: 44px;
  top: -45px;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 10px 1px #58faf4;
  vertical-align: middle;
  cursor: pointer;
  &.active {
    right: -44px;
  }
  &:hover {
    opacity: 0.8;
  }
  img {
    margin-left: 6px;
  }
}
</style>
