[FE]无法播放背景图

security-protection-platform/src/api/dashboard/index.js

  },
  // 进出识别
  queryHomeLastInAndOutRecord (data) {
    return $default.get('/sp/inAndOutRecord/queryHomeLastInAndOutRecord?monitorSceneId=3', data)
    return $default.get('/sp/homePage/queryHomeLastInAndOutRecord?monitorSceneId=3', data)
  }
  // 直播流
  // queryMonitorSceneTerminalRel () {

security-protection-platform/src/modules/dashboard/index.vue

<template>
  <div class="index" style="overflow:hidden">
    <div :style="`background-image: url(${imgBg})`" class="top">
      <img src="@/assets/images/brand.png" class="top-logo">
  <div class="index" style="overflow:hidden;">
    <div :style="`background-image: url(${imgBg})`" class="top" >
      <img src="@/assets/images/AsiainfoLogo.png" class="top-logo">
      <div style="position: absolute;top:50%;left:54%;transform: translate(-50%,-50%);vertical-align: middle; color: white; font-size: 14px">
        <b> | AISI安防一体化平台</b></div>
    </div>
    <div>
      <div class="time"><span style="color: #00d8f3;font-size: 21px;">{{ nowDate | dateFormat }}</span></div>
import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import border from '@/assets/images/border.png'
import cannot from '@/assets/images/cannot.jpg'
import echarts from 'echarts'
import dasapi from '@/api/dashboard'
import sysapi from '@/api/system'
      avatar: avatar,
      polygon: polygon,
      border: border,
      cannot: cannot,
      attendanceData: [],
      population: 0,
      alarmDataX: [],
    .top-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      left: 46%;
      transform: translate(-50%, -50%);
      height: 50%;
      width: 25%;
      width: 5%;
      vertical-align: middle;
    }
  }
.vjs-tech {
  pointer-events: none;
}
.checkedIndex{
  border: 1px solid #009bf3;
}
</style>

security-protection-platform/src/modules/videoSurveillance/index.vue

import sysapi from '@/api/videoSurveillance'
import ReplayDialog from './components/ReplayDialog'
import formatDateTime from '@/utils/formatDateTime.js'
import cannot from '@/assets/images/cannot.jpg'
import videojs from 'video.js'
window.videojs = videojs
      videoPlayList: [],
      showReplayDialog: false,
      replayList: '',
      cannot: cannot,
      beginDay: formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss'),
      endDay: formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // beginDay: '2020-12-19 20:14:00',
            flash: { hls: { withCredentials: false } },
            html5: { hls: { withCredentials: false } },
            notSupportedMessage: '此视频暂时无法播放，请检查监控设备是否连通', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            // poster:'https://avatar.csdnimg.cn/F/F/B/0_weixin_44618916.jpg',
            poster: this.cannot,
            controlBar: {
              timeDivider: false,
              durationDisplay: false,
  .vjs-tech {
    pointer-events: none;
  }
  .vjs-error-display {
    display: none;
  }
  .vjs-big-play-button {
    display: none;
  }
  .vjs-poster {
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }
}
</style>