Left.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 10:42:53
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-14 11:15:59
 * @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 }">
    <div @click="clickShow" class="closeList flex" :class="{ active: !show }">
      <div>
        {{ show ? "收起功能菜单" : "打开功能菜单" }}
      </div>
      <img :src="show ? close : open" alt="" />
    </div>
    <DeviceYx @dangerDeviceChange="dangerDeviceChange"/>
    <WarmChars />
    <DeviceNum />
  </div>
</template>

<script>
import DeviceYx from "@/views/indexComponents/leftComponents/DeviceYx";
import WarmChars from "@/views/indexComponents/leftComponents/WarmChars";
import DeviceNum from "@/views/indexComponents/leftComponents/DeviceNum";
import open from "@/assets/indexImages/open.png";
import close from "@/assets/indexImages/close.png";
export default {
  name: "indexLeft",
  components: {
    DeviceYx,
    WarmChars,
    DeviceNum,
  },
  data() {
    return {
      show: true,
      open,
      close,
    };
  },
  methods: {
    clickShow() {
      this.$emit("clickShow", !this.show);
    },
    domShow(boolean) {
      this.show = boolean;
    },
    dangerDeviceChange(e){
      this.$emit('dangerDeviceChange',e)
    }
  },
};
</script>
<style lang="scss" scoped>
.left-wrapper {
  transition: all 1s;
  left: 0;
  position: absolute;
  z-index:1;
  // 空出一点缝隙，可缩回
  box-sizing: border-box;
  padding: 20px 20px 31px 22px;
  top: 10.74%;
  bottom: 19px;
  background: rgba(2, 19, 37, 0.8);
  width: 426px;
  max-height: 1080px;
  flex-direction: column;
  &.active {
    left: -426px;
  }
  .closeList {
    transition: all 1s;
    position: absolute;
    width: 148px;
    height: 36px;
    font-size: 14px;
    font-weight: 400;
    color: #58faf4;
    background: #021325;
    right: 0px;
    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;
    }
  }
  > div:last-child {
    flex: 1;
  }
}
</style>