feat:

index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <title>央视网云上展览</title>
-    <!-- <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script> -->
-    <!-- <script>
+    <!-- <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
+    <script>
       new VConsole()
     </script> -->
   </head>

src/views/home/iframeView/more.vue

@@ -0,0 +1,60 @@
+<!--  -->
+<template>
+  <div class="more-view">
+    <div class="close-btn" @click="close"></div>
+    <iframe
+      src="https://content-static.cctvnews.cctv.com/snow-book/special.html?channelId=1160&page_type=share&specialId=17446950343365427321&toc_style_id=feeds_with_title&track_id=FA013000-00D6-4290-9087-29BF32E38470_759124785810&share_to=wechat"
+      frameborder="0"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits } from "vue";
+
+const emits = defineEmits(["close"]);
+const close = () => {
+  emits("close");
+};
+</script>
+<style lang="scss" scoped>
+.more-view {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  color: #fff;
+  overflow-x: hidden;
+  z-index: 101;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+  .close-btn {
+    position: absolute;
+    top: 1.5333rem;
+    right: 0.5333rem;
+    width: 1.0667rem;
+    height: 1.0667rem;
+    color: #fff;
+    z-index: 102;
+    background: url("@/assets/img/icon-close.svg") no-repeat;
+    background-size: 100%;
+  }
+}
+@media screen and (min-width: 900px) {
+  .more-view {
+    max-width: 596px;
+    margin: 0 auto;
+  }
+}
+@media screen and (min-height: 1024px) {
+}
+</style>

src/views/home/index.vue

@@ -52,18 +52,21 @@
           </div>
         </div>
       </div>
-      <div class="more-btn" @click="goMore()"></div>
+      <!-- <div class="more-btn" @click="goMore()"></div> -->
+      <div class="more-btn" @click="showMore = true"></div>
     </div>
   </div>
   <iframeView v-if="showIframe" :iframeData="iframeData" @close="closeIframe" />
+  <moreView v-if="showMore" @close="showMore = false" />
 </template>
 
 <script setup>
 import iframeView from "./iframeView/index.vue";
+import moreView from "./iframeView/more.vue";
 import "swiper/css/swiper.css";
 import Swiper from "swiper";
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, watch } from "vue";
-import * as XLSX from "xlsx";
+// import * as XLSX from "xlsx";
 const readFile = (e) => {
   const files = e.target.files;
   // 如果没有文件名
@@ -183,6 +186,7 @@ const currentData = ref(null); //当前展示的数据
 const iframeData = ref(null); //查看模型数据
 const showSwitch = ref(false);
 const showIframe = ref(false);
+const showMore = ref(false);
 const swiperOptions = {
   loop: true, // 是否循环播放
   loopedSlides: 6,
@@ -363,6 +367,19 @@ const goMore = () => {
 };
 onMounted(() => {
   loadJosnData();
+
+  window.addEventListener(
+    "popstate",
+    function (e) {
+      self.location.reload();
+    },
+    false
+  );
+  var state = {
+    title: "",
+    url: "#",
+  };
+  window.history.replaceState(state, "", "#");
 });
 </script>
 <style lang="scss" scoped>
@@ -412,6 +429,7 @@ onMounted(() => {
       font-size: 0.32rem;
       height: 100%;
       text-align: center;
+      line-height: .3733rem;
     }
   }
   .bottom-controls {
@@ -533,6 +551,7 @@ onMounted(() => {
   }
 }
 .swiper-dom {
+  height: 20vh;
   width: 100%;
   /* margin-top: 10px; */
   margin-bottom: 2%;
@@ -550,7 +569,7 @@ onMounted(() => {
   }
   .swiper-dom {
     margin-bottom: 2%;
-    .item-box{
+    .item-box {
       height: 20vh;
     }
   }
@@ -564,7 +583,7 @@ onMounted(() => {
   .swiper-dom {
     margin-bottom: 20px;
 
-    .item-box{
+    .item-box {
       height: 20vh;
     }
   }