<template>
  <div>
    <div class="layout-menu">
      <div class="bg img"/>
      <div class="menu-item btn">
        <div @click="$refs.audioSettingDialog.show()">
          <!-- <img v-audio class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png" alt=""> -->
          <div class="img"/>
          <!-- <el-image
            v-audio
            :src="'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png'"
            :fit="'contain'"
            class="btn"
            @click="$refs.audioSettingDialog.show()"
          /> -->
        </div>
      </div>
    </div>
    <AudioSettingDialog ref="audioSettingDialog" />
  </div>
</template>

<script>
import AudioSettingDialog from '@/components/dialog/audio/index'
export default {
  components: {
    AudioSettingDialog,
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.layout-menu{
  position: absolute;
  right: 0;
  top: 100px;
  height: 300px;
  width: 57px;
  .bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .menu-item {
    margin: 20px 0 20px -14px;
    width: 50px;
    pointer-events: all;
    .img {
      width: 50px;
      height: 50px;
      position: relative;
      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
