|
|
@@ -42,7 +42,67 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div id="app"></div>
|
|
|
+ <div id="app">
|
|
|
+ <style>
|
|
|
+ .firstLoading {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 10000;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingBox {
|
|
|
+ width: 27px;
|
|
|
+ height: 27px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: space-between;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ animation: rotate 1.5s linear infinite;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingBox .loadingItem {
|
|
|
+ width: 11px;
|
|
|
+ height: 11px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #06E7BE;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingBox .loadingItem:nth-child(2) {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .firstLoading .loadingTip {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ @keyframes rotate {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <div class="firstLoading">
|
|
|
+ <div class="loadingBox">
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ <div class="loadingItem"></div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="loadingTip">音频资源加载中，请稍后…</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- <img id="loading" class="show" src="/loading.svg" alt="loading" /> -->
|
|
|
<!-- <script>
|
|
|
// 处理课堂乐器老师端打开听音练习时去掉加载动画
|
