hrx
/
mky-vent-base


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
							<!doctype html>
<html lang="zh_CN" id="htmlRoot">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title><%= title %></title>
    <link rel="icon" id="faviconIcon" href="/logo.png" />
    <!-- 全局配置 -->
    <script src="/js/config.js"></script>
    <!-- [perf-base-v1] defer 避免阻塞首屏渲染，播放器库在用到前已就绪 -->
    <script defer src="/js/liveplayer-lib.min.js"></script>
    <script src="/js/libs/adapter.min.js"></script>
    <script src="/js/webrtcstreamer.js"></script>
    <!-- [perf-base-v1] 卡1: OnlyOffice api.js 改为打开文档编辑器时按需加载（见 src/utils/onlyOffice.ts），此处不再静态/动态注入 -->
  </head>
  <body>
    <script>
      (() => {
        var htmlRoot = document.getElementById('htmlRoot');
        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
        if (htmlRoot && theme) {
          htmlRoot.setAttribute('data-theme', theme);
          theme = htmlRoot = null;
        }
      })();
    </script>
    <div id="app">
      <style lang="less">
        html[data-theme='dark'] .app-loading {
          background-color: #2c344a;
        }

        html[data-theme='dark'] .app-loading .app-loading-title {
          color: rgba(255, 255, 255, 0.85);
        }
        html[data-theme='deepblue'] .app-loading {
          background-color: none;
          /* [perf-base-v1] L14b: 原引用 ./src/assets/images/themify/deepblue/loading-bg.png 不存在（构建后 404），
             删除该行，回落使用下方 .app-loading 的主背景 ./vent/loading-bg.png */
        }
        body {
          background-color: var(--vent-base-color);
        }
        .app-loading {
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          /* background-color: #f4f7f9; */
          /* [perf-base-v1] 改引用 public 下静态路径，原 ./src/assets/... 生产构建后 404 */
          background-image: url('./vent/loading-bg.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-color: var(--vent-base-color);
        }

        .app-loading .app-loading-wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          display: flex;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .app-loading .dots {
          display: flex;
          padding: 98px;
          justify-content: center;
          align-items: center;
        }

        .app-loading .app-loading-title {
          display: flex;
          margin-top: 30px;
          font-size: 30px;
          color: rgba(255, 255, 255, 0.85);
          justify-content: center;
          align-items: center;
        }

        .app-loading .app-loading-logo {
          display: block;
          width: 90px;
          margin: 0 auto;
          margin-bottom: 20px;
        }

        .dot {
          position: relative;
          display: inline-block;
          width: 48px;
          height: 48px;
          margin-top: 30px;
          font-size: 32px;
          transform: rotate(45deg);
          box-sizing: border-box;
          animation: antRotate 1.2s infinite linear;
        }

        .dot i {
          position: absolute;
          display: block;
          width: 20px;
          height: 20px;
          background-color: #0065cc;
          border-radius: 100%;
          opacity: 0.3;
          transform: scale(0.75);
          animation: antSpinMove 1s infinite linear alternate;
          transform-origin: 50% 50%;
        }

        .dot i:nth-child(1) {
          top: 0;
          left: 0;
        }

        .dot i:nth-child(2) {
          top: 0;
          right: 0;
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }

        .dot i:nth-child(3) {
          right: 0;
          bottom: 0;
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }

        .dot i:nth-child(4) {
          bottom: 0;
          left: 0;
          -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
        }
        @keyframes antRotate {
          to {
            -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
          }
        }
        @-webkit-keyframes antRotate {
          to {
            -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
          }
        }
        @keyframes antSpinMove {
          to {
            opacity: 1;
          }
        }
        @-webkit-keyframes antSpinMove {
          to {
            opacity: 1;
          }
        }

        #cssLoader1.main-wrap .child-common {
          width: 8px;
          height: 50px;
          margin-right: 5px;
          /* margin-right: 3px; */
          background-color: #3df7ff;
          -webkit-animation: animate1 1s infinite;
          animation: animate1 1s infinite;
          float: left;
        }

        #cssLoader1.main-wrap .child1 {
          margin-right: 5px;
        }

        #cssLoader1.main-wrap .child10 {
          -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
        }

        #cssLoader1.main-wrap .child9 {
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }

        #cssLoader1.main-wrap .child8 {
          -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
        }

        #cssLoader1.main-wrap .child7 {
          -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
        }

        #cssLoader1.main-wrap .child6 {
          -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
        }

        #cssLoader1.main-wrap .child5 {
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }

        #cssLoader1.main-wrap .child4 {
          -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
        }

        #cssLoader1.main-wrap .child3 {
          -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
        }

        #cssLoader1.main-wrap .child2 {
          -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
        }

        @-webkit-keyframes animate1 {
          50% {
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
          }
        }

        @keyframes animate1 {
          50% {
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
          }
        }
        /*loader1 css ends*/

        cssLoader17 {
          position: relative;
          width: 2.5em;
          height: 2.5em;
          transform: rotate(165deg);
        }
        .cssLoader17:before,
        .cssLoader17:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          width: 0.5em;
          height: 0.5em;
          border-radius: 0.25em;
          transform: translate(-50%, -50%);
        }
        .cssLoader17:before {
          animation: before 2s infinite;
        }
        .cssLoader17:after {
          animation: after 2s infinite;
        }

        @keyframes before {
          0% {
            width: 0.5em;
            box-shadow:
              1em -0.5em rgba(225, 20, 98, 0.75),
              -1em 0.5em rgba(111, 202, 220, 0.75);
          }
          35% {
            width: 2.5em;
            box-shadow:
              0 -0.5em rgba(225, 20, 98, 0.75),
              0 0.5em rgba(111, 202, 220, 0.75);
          }
          70% {
            width: 0.5em;
            box-shadow:
              -1em -0.5em rgba(225, 20, 98, 0.75),
              1em 0.5em rgba(111, 202, 220, 0.75);
          }
          100% {
            box-shadow:
              1em -0.5em rgba(225, 20, 98, 0.75),
              -1em 0.5em rgba(111, 202, 220, 0.75);
          }
        }
        @keyframes after {
          0% {
            height: 0.5em;
            box-shadow:
              0.5em 1em rgba(61, 184, 143, 0.75),
              -0.5em -1em rgba(233, 169, 32, 0.75);
          }
          35% {
            height: 2.5em;
            box-shadow:
              0.5em 0 rgba(61, 184, 143, 0.75),
              -0.5em 0 rgba(233, 169, 32, 0.75);
          }
          70% {
            height: 0.5em;
            box-shadow:
              0.5em -1em rgba(61, 184, 143, 0.75),
              -0.5em 1em rgba(233, 169, 32, 0.75);
          }
          100% {
            box-shadow:
              0.5em 1em rgba(61, 184, 143, 0.75),
              -0.5em -1em rgba(233, 169, 32, 0.75);
          }
        }
      </style>
      <div class="app-loading">
        <div class="app-loading-wrap">
          <!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> -->
          <!-- <div class="app-loading-dots">
            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
          </div> -->
          <div id="cssLoader1" class="main-wrap">
            <div class="child-common child1"></div>
            <div class="child-common child2"></div>
            <div class="child-common child3"></div>
            <div class="child-common child4"></div>
            <div class="child-common child5"></div>
            <div class="child-common child6"></div>
            <div class="child-common child7"></div>
            <div class="child-common child8"></div>
            <div class="child-common child9"></div>
            <div class="child-common child10"></div>
          </div>
          <div class="app-loading-title">正在加载</div>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
    <script>
      // var _hmt = _hmt || [];
      // (function() {
      //   var hm = document.createElement("script");
      //   hm.src = "https://hm.baidu.com/hm.js?0febd9e3cacb3f627ddac64d52caac39";
      //   var s = document.getElementsByTagName("script")[0];
      //   s.parentNode.insertBefore(hm, s);
      // })();
    </script>
  </body>
</html>