功能如上图所示

实现方式两种

一、纯css实现（推荐方式）

思路：

1.隐藏上方有个类名hideSidebar，显示有个类名openSidebar 如下图

2.控制对应的显示隐藏，取两个自定义名字 如 userInfo-1 userInfo-2 显示相应的div

      <div class="userInfo userInfo-1" >
        <div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              APP推广<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <div class="promote-menu"></div> -->
              <el-dropdown-item command="a">短信管理</el-dropdown-item>
              <el-dropdown-item command="b">推广二维码</el-dropdown-item>
              <!--  <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
            <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div>
          <el-button type="text" class="logininfo"> {{ username }} </el-button>
          <el-button type="text" class="logininfo" @click.native="logout">
            <i class="el-icon-circle-close"></i>
            退出系统
          </el-button>
        </div>
      </div>
      <!-- v-show="this.msg == false" -->
      <div class="userInfo userInfo-2" >
        <el-button type="text" class="logininfo" @click.native="logout">
          <i class="el-icon-circle-close"></i>
          退出
        </el-button>
      </div>

3.css代码

// 默认隐藏 
 .userInfo{
    display:none;
  }
.openSidebar{
    .userInfo-1{
      display: block;
    }
    .userInfo-2{
      display: none;
    }
    
  }
  .hideSidebar {
    .userInfo-2{
      display: block;
    }
    .userInfo-1{
      display: none;
    }
  }

二、vuex 实现

需要具体的代码联系IQIYI5201314，备注vue开发