国标GB28181流媒体平台EasyGBS适配手机界面显示错位问题排查

一般我们在研发流媒体平台的时候,会做个手机界面的适配,保证在手机上也可以对平台进行浏览。在适配手机的过程中,由于操作系统不同,我们总会进行些修改,通常都需要进行多次的适配才能适配成功。

本文我们就来讲一下EasyGBS适配手机,或者缩小屏幕的时候,界面表格出现高度不对的情况:

国标GB28181流媒体平台EasyGBS适配手机界面显示错位问题排查_第1张图片

问题分析

最后一列为fixed属性时,高度会出现未占满父元素的整个高度,因此会出现一条灰线,导致视觉上适配出问题。

解决方法

在标签上加一个class="table-fixed"类名并在css中增加如下样式:

国标GB28181流媒体平台EasyGBS适配手机界面显示错位问题排查_第2张图片

注意:vue组件中,在style设置为scoped的时候,里面再写样式对子组件是不生效的,如果想让某些样式对所有子组件都生效,可以使用 /deep/ 深度选择器。

调整之后,适配正常的画面如下图所示:

国标GB28181流媒体平台EasyGBS适配手机界面显示错位问题排查_第3张图片

你可能感兴趣的:(EasyGBS)