master

分支 (1)

管理

管理

master

web-integrated-network
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通信网络保障业务实验与练习系统</title>
    <link global rel="stylesheet" href="./libs/arco.min.css">

    <style>
        body {
            position: relative;
        }

        #loader-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            overflow: hidden;
        }

        #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: #16a085;
            animation: spin 1.7s linear infinite;
            z-index: 11;
        }

        #loader:before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #e74c3c;
            animation: spin-reverse 0.6s 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: #f9c922;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes spin-reverse {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-360deg);
            }
        }

        #loader-wrapper .loader-section {
            position: absolute;
            top: 0;
            width: 51%;
            height: 100%;
            background: #fff;
            z-index: 10;
        }

        #loader-wrapper .loader-section.section-left {
            left: 0;
        }

        #loader-wrapper .loader-section.section-right {
            right: 0;
        }

        #loader-wrapper.hide {
            display: none;
        }
    </style>

</head>

<body>
    <div id="micro-app"></div>

    <div id="loader-wrapper">
        <div id="loader"></div>

        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <script src="./libs/deepstream/ds.min.js"></script>
    <script src="./libs/fabric.min.js"></script>

    <script type="module" src="/src/main.ts"></script>
</body>

</html>