4.12

src/App.vue

@@ -2,6 +2,9 @@
   <div id="app">
     <!-- unity3D -->
     <iframe id="iframe" ref="dome" width="100%" height="100%" src="EPS_Yzpq/index.html" frameborder="0"></iframe>
+    <div class="load">
+      <div class="loadding"></div>
+    </div>
     <!-- 头部 -->
     <header class="nav">
       <div class="wether">
@@ -22,12 +25,13 @@
             <span class="downPull"><img :src="i == index ? s.selectImg : s.img" alt="" /></span>
             <el-dropdown-menu slot="dropdown">
               <ul class="menuContent">
-                <li v-for="(num, index) in 15" :key="index" @click="shelfHanlder($event)">
-                  LD1_B01-{{ num < 10 ? "0" + num : num }} </li>
+                <li v-for="(num, index) in 15" :key="index" @click="shelfHanlder($event)">LD1_B01-{{ num < 10 ? "0" + num
+                  : num }}</li>
               </ul>
               <ul class="menuContent">
-                <li v-for="(num, index) in 9" :key="index + 1" @click="shelfHanlder($event)">
-                  LD1_C01-{{ num < 10 ? "0" + num : num }} </li>
+                <li v-for="(num, index) in 9" :key="index + 1" @click="shelfHanlder($event)">LD1_C01-{{ num < 10 ? "0" +
+                  num : num }}</li>
+                    <!-- <li @click="shelfHanlder($event)">LD1_B01-01</li> -->
                 <li @click="shelfHanlder($event)">LD1_C02-01</li>
                 <li @click="shelfHanlder($event)">LD1_C03-01</li>
               </ul>
@@ -69,6 +73,7 @@ export default {
   data() {
     return {
       heatList: [20, 40, 200, 100],
+      fullscreenLoading: true,
       liImgs: [
         { img: require("@/assets/images/1.png"), selectImg: require('@/assets/images/select_1.png') },
         { img: require("@/assets/images/2.png"), selectImg: require('@/assets/images/select_2.png') },
@@ -129,26 +134,26 @@ export default {
     },
     handleBtn(i) {
       this.navLiState = !this.navLiState
-      if (this.index == i&&this.navLiState) {
+      if (this.index == i && this.navLiState) {
         this.index = null
         if (i == 1) {
-        this.state = !this.state;
-        // console.log(this.state);
-        this.$refs.dome.contentWindow.updateScene(this.state);
-      } else if (i == 3) {
-        this.$refs.dome.contentWindow.outHome();
-      } else if (i == 4) {
-        this.transport = !this.transport;
-        this.$refs.dome.contentWindow.transport(this.transport);
-      } else if (i == 5) {
-        this.hide = !this.hide;
-        this.$refs.dome.contentWindow.hide(this.hide);
-      }
-        return 
+          this.state = !this.state;
+          // console.log(this.state);
+          this.$refs.dome.contentWindow.updateScene(this.state);
+        } else if (i == 3) {
+          this.$refs.dome.contentWindow.outHome();
+        } else if (i == 4) {
+          this.transport = !this.transport;
+          this.$refs.dome.contentWindow.transport(this.transport);
+        } else if (i == 5) {
+          this.hide = !this.hide;
+          this.$refs.dome.contentWindow.hide(this.hide);
+        }
+        return
       }
       this.index = i
       // 还原初始值
-      this.state =false
+      this.state = false
       this.transport = false
       this.hide = false
       this.$refs.dome.contentWindow.updateScene(false);
@@ -239,6 +244,44 @@ html {
     width: 100%;
     height: 100%;
   }
+
+  .load {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // z-index: 0;
+    display: none;
+    background-color: rgba(0, 0, 0, 1);
+
+    .loadding {
+      background-image: url('@/assets/images/loadding.png');
+      background-size: 100% 100%;
+      width: 100px;
+      height: 100px;
+      left: calc((100% - 100px) / 2);
+      position: absolute;
+      top: calc((100% - 100px) / 2);
+      animation: move 2s linear infinite forwards;
+
+    }
+
+    @keyframes move {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      50% {
+        transform: rotate(180deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+
+    }
+  }
 }
 
 #app {