index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>antd</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Z6VLb33wYXOcBcWtpVMjPvbU0DpUdQup"></script>
  </head>
  <style>
    .ajax-loading{
      display: none
    }
    .ajax-loading .loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 0 40px;
      height: 80px;
      line-height: 80px;
      background: rgba(0, 0, 0, 0.75);
      border-radius: 6px;
      text-align: center;
      z-index: 9999;
      font-size: #6699cc;
      color: #fff;
    }
    .ajax-loading .loading img {
      width: 32px;
      vertical-align: middle;
    }
    .ajax-loading .loading span {
      width: 32px;
      vertical-align: middle;
    }
    .ajax-loading .overlay {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 9998;
      background: rgb(255, 255, 255);
      opacity: 0.1;
    }
  </style>
  <body>
    <div id="app"></div>
    <div id="CanvasNest" style="position:absolute;height:calc(100% - 100px);width:83%;z-index:0;top:100px;left:17%;display:block;overflow: hidden;"></div>
    <!-- built files will be auto injected -->
    <div class="ajax-loading" id="ajaxLoading" style="display: none;">
      <div class="overlay"></div>
      <div class="loading">
        <img src="https://media.number-7.cn/ebike-h5/static/images/common/loading.gif" alt="">
        <span>加载中，请稍后...</span>
      </div>
    </div>
  </body>
</html>