<template>
  <div class="menu">
    <img class="ico" src="../../../assets/kban/收起.png" alt="">
    <div class="title" @click="menuClick">主菜单</div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data(){
    return{
      showMenu:false
    }
  },
  methods:{
    menuClick(){
      this.menuControl()
    },
    menuControl(){
      this.showMenu=!this.showMenu;
    }
  }
}
</script>

<style scoped>
.menu{
  width: 43px;
  height: 100vh;
  background: url('../../../assets/kban/menu.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 2px;
  left: 1px;
  text-align: center;

  .ico {
    width: 19px;
    height: 17px;
    position: absolute;
    top:39%;
    left: 25%;
  }

  .title{
    font-weight: bold;
    font-size: 24px;
    position: absolute;
    top:44%;
    text-align: center;
    vertical-align: center;
  }
}
</style>
