浏览代码

Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

黄琪勇 11 月之前
父节点
当前提交
45d7a65f12
共有 3 个文件被更改,包括 41 次插入42 次删除
  1. 32 19
      src/views/creation/index.module.less
  2. 9 17
      src/views/creation/loading.tsx
  3. 0 6
      src/views/creation/playCreation/index.module.less

+ 32 - 19
src/views/creation/index.module.less

@@ -690,6 +690,14 @@
   }
 }
 
+@keyframes rotate {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}
 .loadingPop {
   position: fixed;
   left: 0;
@@ -703,26 +711,31 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  z-index: 999;
+  z-index: 9999999;
   background: rgba(0, 0, 0, .5);
-  .loadingBox{
-    width: 98px;
-    height: 98px;
-    border-radius: 10px;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    .lottie{
-      margin-top: -6px;
-      width: 52px;
-    }
-    .loadingTip {
-        margin-top: 4px;
-        font-size: 12px;
-        color: #333333;
-    }
+  .loadingCssBox{
+      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;
+      .loadingCssItem{
+          width: 11px;
+          height: 11px;
+          border-radius: 50%;
+          background: #20BDFF;
+          opacity: 0.5;
+          &:nth-child(2){
+              opacity:1;
+          }
+      }
+  }
+  .loadingTip {
+      font-size: 14px;
+      color: #fff;
   }
 }
 

+ 9 - 17
src/views/creation/loading.tsx

@@ -1,26 +1,18 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent } from 'vue';
 import styles from './index.module.less';
-import { Vue3Lottie } from 'vue3-lottie';
-import loadingBg from './images/loading.json';
 
 export default defineComponent({
   name: 'loading',
-  props: {
-    /** 提示文案 */
-    tipText: {
-      type: String,
-      default: '资源加载中...'
-    }
-  },
-  setup(props) {
+  setup() {
     return () => (
-      <div class={[styles.loadingPop,"osmdLoadingPop"]}>
-        <div class={styles.loadingBox}>
-          <Vue3Lottie
-            class={styles.lottie}
-            animationData={loadingBg}></Vue3Lottie>
-          <div class={styles.loadingTip}>{props.tipText}</div>
+      <div class={[styles.loadingPop]}>
+        <div class={styles.loadingCssBox}>
+          <div class={styles.loadingCssItem}></div>
+          <div class={styles.loadingCssItem}></div>
+          <div class={styles.loadingCssItem}></div>
+          <div class={styles.loadingCssItem}></div>
         </div>
+        <div class={styles.loadingTip}>资源加载中...</div>
       </div>
     );
   }

+ 0 - 6
src/views/creation/playCreation/index.module.less

@@ -15,12 +15,6 @@
       .plyr .plyr__controls__item.plyr__progress__container input{
         pointer-events: none;
       }
-      .osmdLoadingPop{
-        width: var(--creationHeight, 100vh) !important;
-        height: 100vw !important;
-        min-height: 100vw !important;
-        transform: translate(0); // 解决旋转之后 某些浏览器z-index 图层变化了
-      }
     }
   }
   &.notLoaded{