<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 10:42:53
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-10-06 16:41:33
 * @FilePath: /danger-manage-web/src/views/indexComponents/Left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="left-wrapper flex" :class="{ active: !show }">
    <Xjtj />
    <Rypb />
    <Bjjl />
  </div>
</template>

<script>
import Xjtj from "@/views/indexComponents/rightComponents/Xjtj";
import Rypb from "@/views/indexComponents/rightComponents/Rypb";
import Bjjl from "@/views/indexComponents/rightComponents/Bjjl";
export default {
  name: "indexLeft",
  components: {
    Xjtj,
    Rypb,
    Bjjl,
  },
  data() {
    return {
      show: true,
    };
  },
  methods: {
    domShow(boolean) {
      this.show = boolean;
    },
  },
};
</script>
<style lang="scss" scoped>
.left-wrapper {
  transition: all 1s;
  right: 0;
  position: absolute;
    z-index:1;
  // 空出一点缝隙，可缩回
  box-sizing: border-box;
  padding: 20px 20px 31px 22px;
  top: 10.74%;
  bottom: 19px;
  right: 0;
  background: rgba(2, 19, 37, 0.8);
  width: 426px;
  flex-direction: column;
  &.active {
    right: -426px;
  }
  > div:last-child {
    flex: 1;
  }
}
</style>