<template>
  <div :class="['legend', sidebarState ? 'open' : '']">
    <div class="legend-menu" @click="toggleMenu" ></div>
    <div class="legend-detail">
      <div class="content">
        <slot>
          <img width="100%" src="../../../static/images/slider1.png" v-if="sidebarSJIndex" alt="">
          <img width="100%" src="../../../static/images/slider2.png" v-else alt="">
        </slot>
      </div>
    </div>
    <!-- <div class="legend-menu" @click="toggleMenu">
      {{open?"隐藏":"列表"}}
    </div> -->
  </div>
</template>

<script>
export default {
  components: {
  },
  props: ["sidebarSJIndex"],
  data: function () {
    return {
      sidebarState: true,
      
    };
  },
  methods: {
    toggleMenu() {
      this.sidebarState = !this.sidebarState;
      setTimeout(()=>{
        this.$emit('sidebarClear','')
      },1000)
    },
  },
  mounted(){
    
  }
};
</script>
<style lang='less' scoped>

.legend {
  position: absolute;
  top: 10px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: flex-start;
  z-index: 9;
  .legend-menu {
    width: 21px;
    height: 103px;
    cursor: pointer;
    margin-top: calc(50vh - 100px);
    background: url('../../../static/images/sliderBtn.png') no-repeat center;
    i {
      transition: 0.5s;
    }
  }
  .legend-menu:hover{
    opacity: 1;
  }
  .legend-detail {
    transition: 0.8s;
    width: 0px;
    background: #0d142c;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: #212121;
    .content {
      padding: 20px;
      box-sizing: border-box;
      height: 100%;
    }
  }
}
.legend.open {
  .legend-menu{
    opacity: 1;
    border-radius: 4px;
  }
  .legend-detail {
    width: 540px;
  }
}
/deep/.el-tabs__item{
  white-space: break-spaces;
  height: inherit;
  width: 42px;
  line-height: 24px;
  padding: 10px;
  background: #dfdfdf;
  color: #868686;
  border-radius: 5px;
  margin-bottom: 10px;
}
/deep/.el-tabs__nav-wrap::after,
/deep/.el-tabs__active-bar{
  background-color: #fff;
}
/deep/.el-tabs__item.is-active{
  background: #0295ff;
  color: #fff;
}
/deep/.el-tabs__content{
  height: 100%;
  overflow: auto;
}
/deep/.el-tabs--left .el-tabs__item.is-left{
  text-align: center;
}
/deep/.el-tabs--left .el-tabs__active-bar.is-left{
  right: -2px;
}
.el-tabs{
  height: 100%;
}
/deep/.el-tabs__content{
  padding-left: 15px;
}
// form调整
/deep/.el-form--label-top .el-form-item__label{
  padding: 0 0 0 13px;
  position: relative;
}
/deep/.el-form-item {
  margin-bottom: 5px;
}
/deep/.el-form-item__label::before{
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: #0295ff;
  left: 0;
  top: 17px;
}
// 滑块颜色
/deep/.el-slider__bar{
  background-color: #0295ff;
}
/deep/.el-slider__button{
  border: solid 2px #0295ff;
}
/deep/.el-input-number__increase:hover, /deep/.el-input-number__decrease:hover{
 color: #0295ff; 
}
/deep/.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
/deep/.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
    border-color: #0295ff;
}

.el-select{
  width: 88%;
}
</style>