新版視頻流媒體平臺EasyNVR編譯過程中登錄頁面顯示不全問題排查

繼我們的國標GB28181流媒體服務器改版之後，RTSP協議視頻流媒體平臺EasyNVR的新版界面也在加緊研發，不久也將和大家見面了。上一篇我們分享了一個編譯過程中的問題解決：EasyNVR更新版本後切換頁面顯示異常問題。本文我們繼續來看下其他在版本更新的時候出現的問題。

我們在新版界面做好之後，會走一整套使用流程，確保每個環節都沒有問題。在登陸的時候，發現我們的新版流媒體平臺EasyNVR登錄頁面也出現了不適配的問題。

經過檢查，發現頁面適配錯亂的時候，屏幕寬度是768以下的。當屏幕處於768以下時，頁面佈局發生改變，導致輪播圖高度不夠，顯示不完全。

我們可以利用@media 媒體查詢檢測屏幕大小，當大小不對的時候，進行修正，給輪播圖足夠的高度，讓輪播圖顯示正常。

以下是代碼檢查：

// 小屏適配
@media screen and(max-width:992px) {
  .login-box {
    overflow: visible;
  }
  .logoBox,
  .login-container {
    max-width: 480px;
    margin: 0 auto;
  }
}
@media screen and(max-width:480px) {
  .login-box {
    width: 100% !important;
  }
  .logoBox,
  .login-container {
    .formBox {
      padding: 30px 0 !important;
    }
  }
}