.

public/index.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title>红军长征过丽江纪念馆</title>
-    <meta name="description" content="四维时代" />
-    <meta property="og:title" content="四维时代" />
-    <meta property="og:description" content="四维时代" />
+    <meta name="description" content="红军长征过丽江纪念馆" />
+    <meta property="og:title" content="红军长征过丽江纪念馆" />
+    <meta property="og:description" content="红军长征过丽江纪念馆" />
     <meta property="og:image:type" content="image/jpg" />
     <link rel="icon" type="image/png" sizes="32x32" href="./favicon.ico" class="keep" />
     <style></style>

public/json/list.json

@@ -1,20 +1,84 @@
 {
   "models": [
     {
-      "id": 1,
-      "thumb": "sxjs01.jpg",
-      "modelType": 1,
-      "fileName": "1.4dage",
-      "name": "可移动(示例)",
-      "desc": "文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述。"
+      "id": 2,
+      "thumb": "model-1.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "金沙江石鼓渡口（中国工农红军第二方面军长征渡江纪念碑）",
+      "desc": ""
     },
     {
-      "id": 2,
-      "thumb": "sxjs01.jpg",
+      "id": 3,
+      "thumb": "model-2.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "木瓜寨渡口标志牌",
+      "desc": ""
+    },
+    {
+      "id": 4,
+      "thumb": "model-3.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "木取独渡口标志牌",
+      "desc": ""
+    },
+    {
+      "id": 5,
+      "thumb": "model-4.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "格子渡口标志牌",
+      "desc": ""
+    },
+    {
+      "id": 6,
+      "thumb": "model-5.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "士可渡口标志牌",
+      "desc": ""
+    },
+    {
+      "id": 7,
+      "thumb": "model-6.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "巨甸渡口标志牌",
+      "desc": ""
+    },
+    {
+      "id": 8,
+      "thumb": "model-7.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "无名红军战士墓",
+      "desc": ""
+    },
+    {
+      "id": 9,
+      "thumb": "model-8.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "石鼓碣",
+      "desc": ""
+    },
+    {
+      "id": 10,
+      "thumb": "model-9.png",
+      "modelType": 2,
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "石鼓戏台",
+      "desc": ""
+    },
+    {
+      "id": 11,
+      "thumb": "model-10.png",
       "modelType": 2,
-      "fileName": "1.4dage",
-      "name": "不可移动(示例)",
-      "desc": "文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述。"
+      "fileName": "https://rjbwg.4dage.com/web/index.html#/gis?id=4",
+      "name": "铁红桥",
+      "desc": ""
     }
   ],
   "panos": [

src/App.vue

@@ -42,7 +42,7 @@ export default {
     async getList() {
       let res = await this.$http({
         method: "get",
-        url: `/json/list.json`,
+        url: `./json/list.json`,
       });
       this.$store.commit("setData", res);
     },

src/components/card/index.vue

@@ -32,9 +32,9 @@ export default {
       if (this.type == 1) {
         return this.item.thumb;
       } else if (this.type == 2) {
-        return "/thumb/model/" + this.item.thumb;
+        return "./thumb/model/" + this.item.thumb;
       } else if (this.type == 3) {
-        return "/thumb/scene/" + this.item.thumb;
+        return "./thumb/scene/" + this.item.thumb;
       }
     },
     handleClick(item) {

src/pages/antiques/index.vue

@@ -1,10 +1,10 @@
 <!--  -->
 <template>
-  <div class="layout">
+  <div class="layout" v-if="metadata">
     <div class="pc-content" v-if="!isMobile">
       <div class="top-con">
         <div class="left-side">
-          <div class="back-btn" @click="$router.push('/')"></div>
+          <div class="back-btn" @click="$router.replace('/')"></div>
           <img v-if="type == '1'" src="@/assets/images/tit_pano.png" alt="" class="logo" />
           <img v-if="type == '2'" src="@/assets/images/tit_3d.png" alt="" class="logo" />
           <img v-if="type == '3'" src="@/assets/images/tit_scene.png" alt="" class="logo" />
@@ -24,7 +24,7 @@
         </div>
       </div>
       <div class="bottom-con">
-        <template v-if="list.length">
+        <template v-if="typeList.length">
           <Swiper class="ani-swiper" ref="detailImg" :options="swiperOption">
             <SwiperSlide v-for="(item, i) in typeList" :key="i"> <Card @handleItem="handleItem(item)" :item="item" :type="type" /></SwiperSlide>
           </Swiper>
@@ -66,11 +66,19 @@
         </template>
       </div>
       <div class="mobile-body" :class="{ hasMargin: type != 2 }">
-        <div class="m-list">
-          <div class="m-list-item" v-for="(item, i) in typeList" :key="i">
-            <Card @handleItem="handleItem(item)" :item="item" :type="type" />
+        <template v-if="typeList.length">
+          <div class="m-list">
+            <div class="m-list-item" v-for="(item, i) in typeList" :key="i">
+              <Card @handleItem="handleItem(item)" :item="item" :type="type" />
+            </div>
           </div>
-        </div>
+        </template>
+        <template v-else>
+          <div class="no-result">
+            <!-- <img :src="`${$cdn}images/search-icon.png`" alt /> -->
+            <span>暂时没有内容呢~请搜索其他关键词吧</span>
+          </div></template
+        >
       </div>
     </div>
 
@@ -107,9 +115,19 @@ export default {
   },
   //监听属性 类似于data概念
   computed: {
-    ...mapGetters({
-      metadata: "metadata",
-    }),
+    // ...mapGetters({
+    //   metadata: "metadata",
+    // }),
+
+    metadata() {
+      let data = this.$store.getters["metadata"];
+      if (data) {
+        this.type = this.$route.params.type;
+        this.$forceUpdate();
+        this.getList();
+      }
+      return data;
+    },
     swiperOption() {
       return {
         slidesPerView: this.typeList.length > 3 ? 2.8 : 3,
@@ -147,19 +165,19 @@ export default {
     },
     handleItem(i) {
       if (this.type == "1") {
-        this.$router.push({
+        this.$router.replace({
           path: `/pano/${i.sceneCode}`,
         });
       }
       if (this.type == "2") {
-        this.$router.push({
+        this.$router.replace({
           path: `/model/${i.id}`,
         });
       }
       if (this.type == "3") {
         // this.sceneUrl = i.url;
 
-        this.$router.push({
+        this.$router.replace({
           path: `/scene/${i.num}`,
         });
       }
@@ -177,34 +195,37 @@ export default {
     },
 
     async getList() {
-      // let res = await this.$http({
-      //   method: "get",
-      //   url: `/json/list.json`,
-      // });
-      // this.$store.commit('setData',res)
-
-      switch (this.type) {
-        case "1":
-          this.list = this.metadata.panos;
-          this.typeList = this.metadata.panos;
-          break;
-        case "2":
-          this.list = this.metadata.models;
-          this.typeList = this.metadata.models;
-          break;
-        case "3":
-          this.list = this.metadata.scenes;
-          this.typeList = this.metadata.scenes;
-          break;
-      }
+      // if (!this.metadata) {
+      //   let res = await this.$http({
+      //     method: "get",
+      //     url: `./json/list.json`,
+      //   });
+      //   this.$store.commit("setData", res);
+      // }
+      this.$nextTick(() => {
+        switch (this.type) {
+          case "1":
+            this.list = this.metadata.panos;
+            this.typeList = this.metadata.panos;
+            break;
+          case "2":
+            this.list = this.metadata.models;
+            this.typeList = this.metadata.models;
+            break;
+          case "3":
+            this.list = this.metadata.scenes;
+            this.typeList = this.metadata.scenes;
+            break;
+        }
+      });
       this.$forceUpdate();
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.type = this.$route.params.type;
-    this.$forceUpdate();
-    this.getList();
+    // this.type = this.$route.params.type;
+    // this.$forceUpdate();
+    // this.getList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -508,7 +529,7 @@ export default {
 
           &::placeholder {
             color: rgba(255, 255, 255, 0.63);
-            font-size: 1vw;
+            font-size: 0.2667rem;
             height: 100%;
             line-height: 100%;
             font-family: "SourceHanSansCN-Regular";
@@ -587,6 +608,11 @@ export default {
         height: calc(100vh - 1rem - 1.3333rem);
         margin-top: 1rem;
       }
+      .no-result {
+        span {
+          font-size: 0.32rem;
+        }
+      }
       .m-list {
         display: flex;
         flex-wrap: wrap;

src/pages/detail/model.vue

@@ -1,18 +1,21 @@
 <!--  -->
 <template>
-  <div class="model-box" :class="{ isMobile }">
+  <div class="model-box" :class="{ isMobile }" v-if="metadata">
     <div class="close-btn" @click="onClose"></div>
-    <div class="control-bar" :class="{ bottom: isMobile && isFullscreen }" v-if="modelLoaded">
+    <!-- <div class="control-bar" :class="{ bottom: isMobile && isFullscreen }" v-if="modelLoaded || info.modelType == 2">
       <template v-for="(i, index) in controls">
-        <div class="item" @click="onClickBar(i)" :style="`background-image:url(${i.url});`"></div>
+        <div v-if="info.modelType == 1 || (info.modelType == 2 && i.name == 'fullScreen')" class="item" @click="onClickBar(i)" :style="`background-image:url(${i.url});`"></div>
       </template>
-    </div>
-    <div class="model-content">
+    </div> -->
+    <div class="model-content" v-if="info">
       <div class="model-view" :class="{ full: isFullscreen }">
         <!-- <div class="model-view"> -->
+        <!-- <div class="frame-box" :class="{ 'no-move': info.modelType == 2 }"> -->
         <div class="frame-box">
-          <iframe id="ifr" :src="`/html/model.html?m=${encodeURIComponent(info.fileName)}`" frameborder="0"></iframe>
+          <!-- <iframe id="ifr" :src="getIframeUrl()" frameborder="0"></iframe> -->
+          <img :src="`./thumb/model/${info.thumb}`" alt="" />
         </div>
+        <!-- <div class="frame-box no-move"></div> -->
       </div>
       <div class="model-text">
         <p class="title">{{ info.name }}</p>
@@ -32,6 +35,7 @@ export default {
   data() {
     //这里存放数据
     return {
+      info: null,
       isMobile: browser.mobile,
       isFullscreen: false,
       modelLoaded: false,
@@ -46,14 +50,31 @@ export default {
   },
   //监听属性 类似于data概念
   computed: {
-    ...mapGetters({
-      metadata: "metadata",
-    }),
+    // ...mapGetters({
+    //   metadata: "metadata",
+    // }),
+    metadata() {
+      let data = this.$store.getters["metadata"];
+      if (data) {
+        this.id = this.$route.params.id;
+        this.info = data.models.find((item) => item.id == this.id);
+      }
+      return data;
+    },
   },
   //监控data中的数据变化
   watch: {},
   //方法集合
   methods: {
+    getIframeUrl() {
+      let url = "";
+      if (this.info.modelType == 1) {
+        url = `/html/model.html?m=${encodeURIComponent(this.info.fileName)}`;
+      } else {
+        url = `https://rjbwg.4dage.com/museum/musum/index.html?id=4`;
+      }
+      return url;
+    },
     onClose() {
       // this.$emit("close");
       this.$router.replace("/antiques/2");
@@ -103,8 +124,7 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.id = this.$route.params.id;
-    this.info = this.metadata.models.find((item) => item.id == this.id);
+    // this.info = this.metadata.models.find((item) => item.id == this.id);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -172,7 +192,8 @@ export default {
     z-index: 99;
   }
   .model-content {
-    width: 50%;
+    // width: 50%;
+    width: 100%;
     height: 100%;
     margin: 0 auto;
     // background: #f2f2f2;
@@ -184,8 +205,20 @@ export default {
       width: 100%;
       height: 70%;
       .frame-box {
-        width: 100%;
+        width: 50%;
         height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        &.no-move {
+          width: 100%;
+          height: 100%;
+        }
         iframe {
           width: 100%;
           height: 100%;
@@ -209,11 +242,12 @@ export default {
       }
     }
     .model-text {
+      padding: 0 25%;
       .title {
         font-weight: bold;
         font-size: 24px;
         color: #e5c4a8;
-        margin-bottom: 12px;
+        margin: 12px 0;
       }
       .desc {
         font-weight: 400;
@@ -250,6 +284,9 @@ export default {
       width: 100%;
       .model-view {
         width: 100%;
+        .frame-box {
+          width: 100%;
+        }
       }
       .model-text {
         padding: 0 1.0667rem;

src/pages/index/index.vue

@@ -8,9 +8,9 @@
       </div>
       <div class="footer">
         <div class="navs">
-          <div class="nav" @click="$router.push('/antiques/1')">全景漫游</div>
-          <div class="nav" @click="$router.push('/antiques/2')">三维文物</div>
-          <div class="nav" @click="$router.push('/antiques/3')">场景探索</div>
+          <div class="nav" @click="$router.replace('/antiques/1')">全景漫游</div>
+          <div class="nav" @click="$router.replace('/antiques/2')">三维文物</div>
+          <div class="nav" @click="$router.replace('/antiques/3')">场景探索</div>
         </div>
       </div>
     </div>
@@ -23,7 +23,7 @@ let width = window.innerWidth;
 window.onresize = () => {
   width = window.innerWidth;
 };
-window.bg_audio = new Audio("bg.mp3");
+// window.bg_audio = new Audio("bg.mp3");
 
 export default {
   components: {},
@@ -126,7 +126,7 @@ export default {
     }
     .tit1 {
       width: 679px;
-      height: 88px;
+      height: 102px;
       top: 50px;
       left: 72px;
       position: absolute;

src/pages/scene/index.vue

@@ -3,7 +3,7 @@
   <div class="container" @click="closeList">
     <img src="@/assets/images/back.png" alt="" class="back" @click="$router.replace('/antiques/3')" />
 
-    <iframe ref="iframe" :src="`/html/index.html?m=${num}`" frameborder="0" @click="closeList"></iframe>
+    <iframe ref="iframe" :src="`./html/index.html?m=${num}`" frameborder="0" @click="closeList"></iframe>
   </div>
 </template>