侧边栏的打开与收起

<template>
  <div class="box">
    <div class="sideBar" :class="showBox ? '' : 'controller-box-hide'">
      <div class="showBnt" @click="showBox=!showBox">
        <i class="el-icon-arrow-right" v-show="showBox"></i>
        <i class="el-icon-arrow-left" v-show="!showBox"></i>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      showBox: true,
    }
  }

}
</script>

<style lang="scss" scoped>
.sideBar {
  width: 368px;
  height: 82%;
  background-color: rgba(7, 20, 35, 0.7);
  position: fixed;
  top: 8%;
  right: 0px;
  transition: right 0.5s;
}
.showBnt {
  position: absolute;
  top: calc(50% - 82px);
  right: 368px;
  width: 20px;
  height: 82px;
  z-index: 99;
  background: url("../assets/img/right.png");
  font-size: 20px;
  color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.controller-box-hide {
  right: -368px !important;
  transition: right 0.5s;
}
</style>