<template>
  <div>
    <!-- 患者信息 -->
    <div>
      <el-button 
        class="toggle-btn" 
        @click="togglePanel"
        circle
        :icon="isVisible ? 'el-icon-close' : 'el-icon-menu'"
        size="mini"
      />
      <transition name="slide">
        <div v-show="isVisible" class="scale-panel">
          <RaiseTheScale></RaiseTheScale>
        </div>
      </transition>
    </div>
    <!-- 静态相机 -->
    <div>
      <StillCamera></StillCamera>
    </div>
    <!-- 动态相机和双目相机 -->
     <div>
      <DynamiCamera></DynamiCamera>
     </div>
  </div>
</template>

<script>
import RaiseTheScale from '@/components/raiseTheScale.vue'
import StillCamera from "@/components/stillCamera.vue"
import DynamiCamera from "@/components/dynamiCamera.vue"

export default {
  name: 'App',
  components: {
    RaiseTheScale,
    StillCamera,
    DynamiCamera
  },
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    togglePanel() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

<style>
.scale-panel {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 99;
}

.toggle-btn {
  position: fixed;
  right: 20px;
  top: 70px;
  z-index: 100;
  background: #409EFF;
  color: white;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
