国标GB28181协议客户端EasyGBS视频平台更新后界面出现滚动条是什么原因导致的？

大家知道当某一个产品在进行版本更新升级的时候，往往要耗费很大的人力和物力来进行更改和测试。TSINGSEE青犀视频团队升级新版EasyGBS时就出现了不少问题，比如视频调阅模块在小屏情况下出现滚动条的情况。下面我分两种情况来讲下这个问题。

情况一：

因为播放器是按照宽度16:9的长度来撑起高度的，而宽度在不确定的情况下，高度无法做到自适应，因此在小屏幕下，页面高度因为不确定可能超过屏幕高度或者低于屏幕高度，导致视觉上有不美观。

将播放器根据16:9来确定高度的属性，并且继承父盒子100%高度和宽度，先利用栅栏布局，做好播放器盒子布局，让宽度和高度都自适应。

 <el-row class="screen-main-player" v-if="isShow" style="height:100%">
        <el-col
          :xs="24"
          :sm="24"
          :md="colNum[2]"
          :lg="colNum[1]"
          :xl="colNum[0]"
          v-for="(item, index) in PlayerData"
          :key="index"
          :class="[{'active-shadow': indexType===index},{'oneScreen':ScreentTpe===1},{'sixteenScreen':ScreentTpe===16},{'fourScreen':ScreentTpe===4},{'nineScreen':ScreentTpe===9},]"
        >
          <div
            class="screen-main-item"
            @click.stop="indexType=index"
            @mousemove="remoteConsoleshow(true)"
            @mouseout="remoteConsoleshow(false)"
          >
            <SereenPlayer
              :DeviceID="item.DeviceID"
              :ID="item.ID"
              :Index="index"
              @index="onIndex"
              :Radio="radio"
            />
          </div>
.screen-main {
  .oneScreen {
    height: 100%;
  }
  .sixteenScreen {
    height: 25%;
  }
  .fourScreen {
    height: 50%;
  }
  .nineScreen {
    height: 33.33333333333333333333333333333%;
  }

　　

这种情况，调整好自适应属性就能够更改滚动条的问题。

情况二：

当电脑视图为125%时，首页也会出现滚动条。因为v-chart的视图会有一个固定高度来维持视图的稳定性，我们通过栅栏布局先布局好视图盒子，然后同js获取高盒子高度，然后赋值给chart视图。

 

   let that = this;
    setTimeout(() => {
      let Height = document.getElementById("chartHeight");
      that.chartHeight = `${Height.clientHeight - 10}px`;
    }, 200);

　　

修改之后也将解决EasyGBS出现滚动条的问题：

视频相关解决方案均可访问TSINGSEE青犀视频，可以联系我们获取演示方案，直观感受，也可自行进行下载及测试。