<!DOCTYPE html>
<html lang="en" class="mg-vxe-table">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mangosteen中台</title>
    <style>
        #loader-wrapper {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 999999;
        }

        #loader {
          display: block;
          position: relative;
          left: 50%;
          top: 50%;
          width: 150px;
          height: 150px;
          margin: -75px 0 0 -75px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: #FFF;
          -webkit-animation: spin 2s linear infinite;
          -ms-animation: spin 2s linear infinite;
          -moz-animation: spin 2s linear infinite;
          -o-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
          z-index: 1001;
        }

        #loader:before {
          content: "";
          position: absolute;
          top: 5px;
          left: 5px;
          right: 5px;
          bottom: 5px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: #FFF;
          -webkit-animation: spin 3s linear infinite;
          -moz-animation: spin 3s linear infinite;
          -o-animation: spin 3s linear infinite;
          -ms-animation: spin 3s linear infinite;
          animation: spin 3s linear infinite;
        }

        #loader:after {
          content: "";
          position: absolute;
          top: 15px;
          left: 15px;
          right: 15px;
          bottom: 15px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: #FFF;
          -moz-animation: spin 1.5s linear infinite;
          -o-animation: spin 1.5s linear infinite;
          -ms-animation: spin 1.5s linear infinite;
          -webkit-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
        }


        @-webkit-keyframes spin {
          0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }

        @keyframes spin {
          0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        #loader-wrapper .loader-section {
          position: fixed;
          top: 0;
          width: 51%;
          height: 100%;
          background: #7171C6;
          z-index: 1000;
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
        }
        #loader-wrapper .loader-section.section-left {
          left: 0;
        }
        #loader-wrapper .loader-section.section-right {
          right: 0;
        }
        .loaded #loader-wrapper .loader-section.section-left {
          -webkit-transform: translateX(-100%);
          -ms-transform: translateX(-100%);
          transform: translateX(-100%);
          -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader-wrapper .loader-section.section-right {
          -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%);
          -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }
        .loaded #loader {
          opacity: 0;
          -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
        }
        .loaded #loader-wrapper {
          visibility: hidden;
          -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
          transform: translateY(-100%);
          -webkit-transition: all 0.3s 1s ease-out;
          transition: all 0.3s 1s ease-out;
        }

        .no-js #loader-wrapper {
          display: none;
        }

        .no-js h1 {
          color: #222222;
        }

        #loader-wrapper .load_title {
          font-family: 'Open Sans';
          color: #FFF;
          font-size: 19px;
          width: 100%;
          text-align: center;
          z-index: 9999999999999;
          position: absolute;
          top: 60%;
          opacity: 1;
          line-height: 30px;
        }
        #loader-wrapper .load_title span {
          font-weight: normal;
          font-style: italic;
          font-size: 13px;
          color: #FFF;
          opacity: 0.5;
        }

      .waviy {
        position: relative;
        -webkit-box-reflect: below -1.25rem linear-gradient(transparent, rgba(0, 0, 0, 0.2))
      }
      .waviy span {
        position: relative;
        display: inline-block;
        font-size: 2.5rem;
        color: #000;
        text-transform: uppercase;
        animation: waviy 1s infinite;
        animation-delay: calc(.1s * var(--i))
      }
      @keyframes waviy {
        0%,
        40%,
        100% {
          transform: translateY(0)
        }

        20% {
          transform: translateY(-1.25rem)
        }
      }
      #preloader {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99999;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        background-color: #fff
      }
    </style>
    <script type="module" crossorigin src="/assets/index.77fd43b4.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/@vue.63d9a3bf.js">
    <link rel="modulepreload" crossorigin href="/assets/vue.10127b67.js">
    <link rel="modulepreload" crossorigin href="/assets/@popperjs.7eb99972.js">
    <link rel="modulepreload" crossorigin href="/assets/mitt.550594b0.js">
    <link rel="modulepreload" crossorigin href="/assets/sortablejs.d0e1fd11.js">
    <link rel="modulepreload" crossorigin href="/assets/tdesign-vue-next.d0cb26f9.js">
    <link rel="modulepreload" crossorigin href="/assets/core-js-pure.7b638a01.js">
    <link rel="modulepreload" crossorigin href="/assets/@babel.96ca9732.js">
    <link rel="modulepreload" crossorigin href="/assets/nprogress.5c74f68b.js">
    <link rel="modulepreload" crossorigin href="/assets/pinia.9bbb783d.js">
    <link rel="modulepreload" crossorigin href="/assets/vue-router.8df1f6eb.js">
    <link rel="modulepreload" crossorigin href="/assets/pinia-plugin-persistedstate.fb09fb74.js">
    <link rel="modulepreload" crossorigin href="/assets/lodash.80ab7fbe.js">
    <link rel="modulepreload" crossorigin href="/assets/axios.a5b46551.js">
    <link rel="modulepreload" crossorigin href="/assets/es-errors.a5efe369.js">
    <link rel="modulepreload" crossorigin href="/assets/has-symbols.caae0f97.js">
    <link rel="modulepreload" crossorigin href="/assets/has-proto.92e4233e.js">
    <link rel="modulepreload" crossorigin href="/assets/function-bind.54a57e45.js">
    <link rel="modulepreload" crossorigin href="/assets/hasown.3466f39a.js">
    <link rel="modulepreload" crossorigin href="/assets/get-intrinsic.1ed8755d.js">
    <link rel="modulepreload" crossorigin href="/assets/es-define-property.c7492903.js">
    <link rel="modulepreload" crossorigin href="/assets/gopd.022f7d4c.js">
    <link rel="modulepreload" crossorigin href="/assets/define-data-property.ebd10e98.js">
    <link rel="modulepreload" crossorigin href="/assets/has-property-descriptors.f7de8569.js">
    <link rel="modulepreload" crossorigin href="/assets/set-function-length.8bf3e193.js">
    <link rel="modulepreload" crossorigin href="/assets/call-bind.0b6592d1.js">
    <link rel="modulepreload" crossorigin href="/assets/object-inspect.69d7c495.js">
    <link rel="modulepreload" crossorigin href="/assets/side-channel.3badc2fa.js">
    <link rel="modulepreload" crossorigin href="/assets/qs.9e61509e.js">
    <link rel="modulepreload" crossorigin href="/assets/chroma-js.9ae434da.js">
    <link rel="modulepreload" crossorigin href="/assets/@material.1daf085f.js">
    <link rel="modulepreload" crossorigin href="/assets/bezier-easing.a990b400.js">
    <link rel="modulepreload" crossorigin href="/assets/tvision-color.e5cdb48b.js">
    <link rel="modulepreload" crossorigin href="/assets/clipboard.41a110e9.js">
    <link rel="modulepreload" crossorigin href="/assets/vue-clipboard3.303326b6.js">
    <link rel="modulepreload" crossorigin href="/assets/tdesign-icons-vue-next.414e4614.js">
    <link rel="modulepreload" crossorigin href="/assets/xe-utils.b964203a.js">
    <link rel="modulepreload" crossorigin href="/assets/dom-zindex.6d93629a.js">
    <link rel="modulepreload" crossorigin href="/assets/vxe-table.4ae2cab0.js">
    <link rel="stylesheet" href="/assets/tdesign-vue-next.ebfe8504.css">
    <link rel="stylesheet" href="/assets/nprogress.8b89e2e0.css">
    <link rel="stylesheet" href="/assets/tdesign-icons-vue-next.8494edcb.css">
    <link rel="stylesheet" href="/assets/vxe-table.e25f1e68.css">
    <link rel="stylesheet" href="/assets/index.84b860d9.css">
  </head>
  <!-- 飞书SDK CDN -->
  <script type= "text/javascript" src= "http://lf1-cdn-tos.bytegoofy.com/goofy/lark/op/h5-js-sdk-1.5.23.js"></script>
  <!-- 飞书云文档组件 CDN -->
  <script src="http://lf1-cdn-tos.bytegoofy.com/goofy/locl/lark/external_js_sdk/h5-js-sdk-1.1.3.js"></script>
  <!--Echarts加载动画 -->
  <script src="http://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <body>
    <div id="app">
      <div id="loader-wrapper"></div>
      <!-- <div id="loader-wrapper">
        <div id="loader"></div>
        <div id="preloader">
          <div class="waviy">
             <span style="--i:1">M</span>
             <span style="--i:2">A</span>
             <span style="--i:3">N</span>
             <span style="--i:4">G</span>
             <span style="--i:5">O</span>
             <span style="--i:6">S</span>
             <span style="--i:7">T</span>
             <span style="--i:8">E</span>
             <span style="--i:9">E</span>
             <span style="--i:10">N</span>
             <span style="--i:11">中</span>
             <span style="--i:12">台</span>
          </div>
        </div>
      </div> -->
    </div>
    <script>
        var chartDom = document.getElementById('loader-wrapper');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          graphic: {
            elements: [
              {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                  text: 'MANGOSTEEN中台',
                  fontSize: 80,
                  fontWeight: 'bold',
                  lineDash: [0, 200],
                  lineDashOffset: 0,
                  fill: 'transparent',
                  stroke: '#000',
                  lineWidth: 1
                },
                keyframeAnimation: {
                  duration: 1500,
                  loop: true,
                  keyframes: [
                    {
                      percent: 0.7,
                      style: {
                        fill: 'transparent',
                        lineDashOffset: 200,
                        lineDash: [200, 0]
                      }
                    },
                    {
                      percent: 0.8,
                      style: {
                        fill: 'transparent'
                      }
                    },
                    {
                      percent: 1,
                      style: {
                        fill: 'black'
                      }
                    }
                  ]
                }
              }
            ]
          }
        };
        option && myChart.setOption(option);  
    </script>
    
  </body>
  <script>
    window.global = window;
  </script>
</html>
