pc端/移动端菜单折叠，按钮点击展示

PC端代码：

---

 

 

//分辨率 > 768px

 

         

                  首页

                 

       

       

         

            @mouseenter.native="activeNav = false">公司介绍

         

       

 

//分辨率   < 768px

 

     

       

     

     

     

       ......

     

 JS逻辑

 CSS样式

/* 菜单折叠按钮样式 */
.icon-menu-fold {
  font-size: 20px;
  cursor: pointer;
  line-height: 80px;
}

.el-icon {
  height: 5em;
  padding-right: 20px;
}

@media screen and (max-width: 768px) {
  .app-header .header-title {
    .header-img {
      width: 200px;
      height: 100%;

      img {
        width: 60px;
        height: auto;
      }

      p {
        font-size: 16px;
      }
    }

    .drow-menu {
      display: block;
      right: 0;
      top: 80px;
      width: 100px;
      height: 200px;
      text-align: center;
      line-height: 50px;
      background-color: rgba(45, 43, 43, 0.5);
      border: 0px;

      a {
        text-decoration: none;
      }

      .nav {
        color: #fff;

        &:hover {
          color: #cd1e19;
        }
      }

    }

    .header-right {
      display: none;
    }

    .header-right.active {
      display: block;
    }
  }


}