loading

src/views/cygx/loadog.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { onMounted, ref } from "vue";
+const props = defineProps({
+  loadingShow: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <div class="container-loading" v-if="loadingShow">
+    <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/all-loading.gif" alt="" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 270px;
+    height: 282px;
+  }
+}
+</style>

src/views/cygx/strategyReport.vue

@@ -1,19 +1,36 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import LoadingPage from "./loadog.vue";
 const route = useRoute();
 const srcUrl = ref("");
 const pc = ref("");
+const loadingShow = ref(true);
 onMounted(() => {
   document.domain = "hzinsights.com";
+  const iframe = document.querySelector("#iframe");
   srcUrl.value = decodeURIComponent(route.query.url);
   pc.value = route.query.pc || "";
+  if (iframe.attachEvent) {
+    iframe.attachEvent("onload", () => {
+      setTimeout(() => {
+        loadingShow.value = false;
+      }, 300);
+    });
+  } else {
+    iframe.onload = () => {
+      setTimeout(() => {
+        loadingShow.value = false;
+      }, 300);
+    };
+  }
 });
 </script>
 
 <template>
   <div :class="[pc ? 'container-strategy-pc' : 'container-strategy']">
-    <iframe :src="srcUrl" class="strategy-iframe" frameborder="0" />
+    <iframe :src="srcUrl" class="strategy-iframe" frameborder="0" id="iframe" />
+    <LoadingPage :loadingShow="loadingShow" />
   </div>
 </template>