AI智能视频分析平台EasyCVR在小屏下出现样式层叠的原因排查与优化

AI智能视频分析EasyCVR作为TSINGSEE青犀视频“云边端”协同一体化的高拓展性视频综合管理平台，拥有丰富的功能，如直播、录像、点播、回放、语音对讲、远程运维等。

EasyCVR既可作为能力平台使用也可以作为业务平台使用，还提供方便集成的URL地址，直接跳转直播页面，同时支持通过接口获取流地址来进行集成播放，方便集成二次开发。

基于用户的多样化需求，TSINGSEE青犀视频研发团队除了不断对EasyCVR拓展新功能，还会对原有功能进行持续性的优化，以便为用户提供更佳的体验。

近期，研发团队发现EasyCVR在小屏下样式下，出现了层叠错乱的现象。研发人员第一时间进行了排查。

在检测样式时，发现父级组件只有32px高度。当内容换行后，组件的高度没有随之调整，依然是32px高度，因此就导致搜索组件被挤出，和其他组件层叠在一起，不方便用户操作。

这个问题解决其实很简单：打开控制台找到该组件的父级，在浏览器进行调试，将默认高度去掉注销，样式就不会出现层叠错误了。

在这里，我们找到项目中的animation.scss 文件夹，去掉Header类的高度属性，可以发现上述的样式层叠错乱问题已经解决，样式恢复了正常。

更改后的样式如图所示：

EasyCVR视频智能融合共享平台是一款负责提供安防视频接入的云服务平台，负责国标GB/T28181、海康SDK、ONVIF、RTSP协议、Ehome协议等多种标准的安防视频流的接入和转发，可实现安防视频流的快速采集、转流上云能力。如果还想了解更多关于EasyCVR的相关内容，欢迎获取测试版本进行测试。