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

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

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

问题分析

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

解决方法

在标签上加一个class&＃61;"table-fixed"类名并在css中增加如下样式&＃xff1a;

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

调整之后&＃xff0c;适配正常的画面如下图所示&＃xff1a;