saber-center-command/src/components/3DScene/tools-bar/tools-bar.vue

<template>
  <div class="bars-container toLeft" :style="{    top: `calc(10% + ${offsetY}px)`,
    right:` calc(24% + ${offsetX}px)`}">
    <div @click="isOpen=!isOpen" class=" button-close center" draggable="false">
      <div :key="item" v-for="item of 3" class="point" ></div>
    </div>
    <div class="contain-main" style="width: 100%;" :style="{height: isOpen? '460px':'0px'}">
      <div :key="item" v-for="item of option" @click="item.event" class="click" style="width: 100%;height: 70px;" :style="{background: `url(${item.icon}) no-repeat center/50%`}"></div>
    </div>
    <div @click="isOpen=!isOpen" style="width: 100%;height: 20px;background: rgba(0,0,0,0.5)" class="center"> <div class="arrow full"
      :style="{transform: `rotate(${isOpen? 0:180}deg)`}"
    ></div> </div>
  </div>
</template>

<script>
import {fullscreenToggel} from "../../../util/util";

export default {
  name: "tools-bar",
  inject: [ 'index'],
  props: {
    option: {
      type: 'Array',
      default: []
    }
  },
  mounted() {

  },
  data(){
    return{
      isOpen: true,
      offsetX: 0,
      offsetY: 0,
    }
  },
  methods: {

    ondrop(e){
      // this.offsetX = e.offsetX;
      // this.offsetY = e.offsetY;
      // console.log(this.offsetX,this.offsetY)
    },
  }
}
</script>

<style scoped>
  .bars-container{
    user-select: none;
    width: 70px;
    height: auto;
    position: absolute;
    background: rgba(0,0,0,0.5);
    box-shadow: 2px 2px 2px #131313;
    z-index: 999;
  }
  .button-close{
    cursor: pointer;
    width: 100%;
    height: 20px;
    background: rgba(0,0,0,0.5);
  }
  .point{
    width: 10px;
    height: 10px;
    margin-left: 5px;
    background: white;
    box-shadow: 2px 2px 2px #393939;
    border-radius: 50%;
  }
  .arrow{
    cursor: pointer;
    background: url("/img/arrow-up.png") no-repeat center/contain;
    /*transform: rotate(180deg);*/
    transition: transform 1s;
  }
  .click{
    cursor: pointer;
  }
  .click:hover{
    transform: translate(1px,1px);
  }
  .contain-main{
    transition: height 1s;
    overflow: hidden;
  }
</style>