手机菜单栏三条杠

<template>
  <div class="body">
    <div class="nar-bar">
      <div class="menu" @click="menuClick()">
        <div :class="{ middleline: true, menulineactive: sidebarIsShow }">
          <!--<div class="middleline"></div>-->
        </div>
        <p v-if="menuIsShow">MENU</p>
        <p v-if="closeIsShow">CLOSE</p>
      </div>
      <transition name="sidebartransition"> //transition标签

        <div class="sidebarbgc" v-if="sidebarIsShow">
          <div :class="{ graybgc: true, graybgcactive: sidebarIsShow }"></div>
          //外层的半透明灰色背景
          <div class="sidebarwhite">
            <div class="mbloginbefore" v-if="!isLoginFn">
              <!--//与本例无关的一些占位内容↓↓↓-->
              <div class="mblogin">
                <button @click="gotoLogin()">LOGIN</button>
              </div>
              <div class="freeexp">
                <button>無料体験会 / 体験予約</button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <router-view></router-view>
    <bottom></bottom>
  </div>
</template>
<script>
  import bottom from '@/components/bottom'

  export default {
    data() {
      return {
        sidebarIsShow: false
      }
    },
    methods: {
      gotoLogin() {
      },
      menuClick() {
        this.sidebarIsShow = !this.sidebarIsShow
      }
    },
    components: {
      bottom
    }
  }
</script>
<style lang="scss" scoped>
  .body {
    width: 100%;
    .nar-bar {
      margin: 0 auto;
      width: 100%;
      background: #ffed00;
      height: 2rem;
      line-height: 2rem;
    }

    .logo {
      width: 64px;
    }
    .sidebarbgc {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .sidebartransition {
      &-enter {
        transform: translateX(-100%); //整体划入之前隐藏在最左侧
      }
      &-enter-active {
        transition: all 0.5s ease; //划入过渡，用时0.5s
      }
      &-leave-to {
        transform: translateX(-120%); //整体划出之后隐藏在最左侧，之所以设置为-120%，见后文
      }
      &-leave-active {
        transition: all 0.5s ease; //划出过渡，用时0.5s
      }
    }
    .graybgc {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: rgba($color: #000000, $alpha: 0.5);
    }
    .graybgcactive {
      width: 120%; //当侧边栏显示时，即sidebarIsShow为true时，灰色滑块变动宽度为120%
    }
    .middleline {
      z-index: 3;
      display: inline-block;
      line-height: 65px;
      width: 55px;
      height: 5px;
      border-radius: 3px;
      background-color: #ffffff;
      position: relative;
      transition: all 0.5s ease;
      &::before { //前一条线
        content: "";
        position: absolute;
        width: 55px;
        height: 5px;
        bottom: 17px;
        border-radius: 3px;
        background-color: #ffffff;
        transition: all 0.5s ease;
      }
      &::after { //后一条线
        content: "";
        position: absolute;
        width: 55px;
        height: 6px;
        top: 17px;
        border-radius: 3px;
        background-color: #ffffff;
        transition: all 0.5s ease;
      }
    }
    .menulineactive {
      display: inline-block;
      z-index: 3;
      line-height: 65px;
      width: 55px;
      height: 5px;
      border-radius: 3px;
      background-color: #ffffff;
      position: relative;
      transform: rotate(45deg); //中间的线顺时针旋转45°

      &::before {
        content: "";
        position: absolute;
        width: 55px;
        height: 5px;
        bottom: 0px;
        border-radius: 3px;
        background-color: #ffffff;
        transform: rotate(-90deg); //上方的线逆时针旋转90°
        transition: all 0.5s ease;
      }
      &::after {
        opacity: 0; //底部的线隐藏
      }
    }
  }

</style>