<template>
  <el-drawer class="drawer" :visible.sync="drawer" :direction="direction" :withHeader="withHeader" @select="handleSelect">
    <el-menu class="menu" mode="horizontal">
      <el-menu-item class="menu-item">抛丸</el-menu-item>
      <el-menu-item class="menu-item">理料</el-menu-item>
      <el-menu-item class="menu-item">划线</el-menu-item>
      <el-menu-item class="menu-item">切割</el-menu-item>
    </el-menu>
  </el-drawer>
</template>

<script>
export default {
  name: "Drawer",
  data(){
    return{
      drawer:true,
      direction:'ltr',
      withHeader:false
    }
  },
  methods:{
    handleSelect(key,path){
      console.log(key,path)
    }
  }
}
</script>

<style scoped>
.drawer{
  width: 25%;
  height: 100vh;

  .menu{
    width: 100%;
    height: 100vh;
    background-color: #002166;

    .menu-item{
      width: 90%;
      text-align: center;
      color: white;
      margin: 5vh 5px;
      background: #0d84ff url('../../../assets/kban/cqbg.png') no-repeat;
      background-size: 100% 100%;
    }

  }
}
</style>
