Video intelligent analysis platform easycvr derivative video management platform menu bar small screen adaptive optimization

In the present TSINGSEE Among the numerous video platforms developed by Qingxi video ,EasyCVR It can be said to be a perfect platform , Even compared with other platforms on the market ,EasyCVR It can also be regarded as a leading platform .

according to EasyCVR Compilation and development logic , We've developed EasyCVS Management platform . initial stage EasyCVS When developing , The top menu bar is smaller in page width , Due to insufficient width , Need to hide , But there is no way to switch routes , This needs further optimization .

In case of insufficient page width , There are two solutions for displaying the menu bar ：

The first is to narrow down the menu bar item To fit the overall width , But every one of them item All have the smallest width , Otherwise, the font content will cause layout confusion , Therefore, the lower limit of this practice is a little low ; The second is to open the right navigation bar , This method is still applicable to the mobile terminal . So here we try to use this method to solve the problem of hiding the menu bar .

The reference codes are as follows ：

 <el-drawer title=" I'm the title " :visible.sync="NavRight" :with-header="false">
      <div>
        <el-menu
          :default-active="activeIndexRight"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @select="select"
          background-color="#292C33"
          text-color="#fff"
          @close="handleClose"
          :router="true"
        >
          <el-menu-item index="0" :route="'/scrren'">
            <span slot="title"> Real-time Preview </span>
          </el-menu-item>
          <el-menu-item index="1" :route="'/live/lis'">
            <span slot="title"> Live video </span>
          </el-menu-item>
          <el-menu-item index="2" :route="'/user/list'">
            <span slot="title"> User management </span>
          </el-menu-item>
          <el-menu-item index="3" :route="'/space/list'">
            <span slot="title"> Space management </span>
          </el-menu-item>
          <el-menu-item index="4" :route="'/bucket/list'">
            <span slot="title"> Object storage </span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-drawer>