11 місяців тому · 04f7b78103
--- a/tilt-model-web/index.html
+++ b/tilt-model-web/index.html
@@ -6,9 +6,9 @@
 
				   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				   <script src="./vue.min.js"></script>
			
 
				   <!-- 引入样式 -->
			
 
				-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			
 
				+  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
			
 
				   <!-- 引入组件库 -->
			
 
				-  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
			
 
				+  <script src="https://unpkg.com/element-plus"></script>
			
 
				   <title>珠海市自然资源局倾斜建筑展示</title>
			
 
				 
			
 
				   <style>
			
@@ -492,13 +492,34 @@
 
				       }
			
 
				 
			
 
				     }
			
 
				+
			
 
				+    .preview-page{
			
 
				+      position: fixed;
			
 
				+      text-align: center;
			
 
				+      color:#fff;
			
 
				+      left: 50%;
			
 
				+      bottom:80px;
			
 
				+      height:30px;
			
 
				+      padding: 0 23px;
			
 
				+      border-radius:15px;
			
 
				+      line-height:30px;
			
 
				+      transform: translateX(-50%);
			
 
				+      z-index: 9999;
			
 
				+    }
			
 
				   </style>
			
 
				 </head>
			
 
				 
			
 
				 <body>
			
 
				   <div id="app">
			
 
				     <!-- 视频背景 -->
			
 
				-    <video @timeupdate="timeUpdate" id="bg-video" :src="`${baseUrl}/video/${curModel.name}.mp4`" muted loop></video>
			
 
				+    <video @timeupdate="timeUpdate" id="bg-video" :src="`${baseUrl}/video/${curModel.name}.mp4`" muted loop
			
 
				+      x5-playsinline="true"
			
 
				+      playsinline="true"
			
 
				+      webkit-playsinline="true"
			
 
				+      x-webkit-airplay="true"
			
 
				+      x5-video-player-type="h5-page"
			
 
				+      preload="metadata"
			
 
				+    ></video>
			
 
				     <audio id="bg-audio" :src="`${baseUrl}/audio/${curModel.name}.mp3`" loop></audio>
			
 
				     <!-- 开始探索 -->
			
 
				     <div @click="goCurIndex2" class="welcome-btn" v-if="curPage == 1">开始探索</div>
			
@@ -540,8 +561,14 @@
 
				               <img class="guide-line" style="height: 4vh" src="./img/guide-line.png" alt="" />
			
 
				               <img class="guide-cicle" src="./img/guide-cicle.png" alt="" />
			
 
				             </div>
			
 
				+
			
 
				             <el-image @wheel="handleWheel" src="./img/icon-images.png" @click="openViewer"
			
 
				-              :preview-src-list="imagesList" :initial-zoom-num="0.5" alt=""></el-image>
			
 
				+              :preview-src-list="imagesList" :initial-zoom-num="0.5" alt="" @switch="onSwitch"
			
 
				+              @close="closePreview">
			
 
				+              <template #viewer>
			
 
				+                <div class="preview-page">{{imgCur}}/{{imagesList.length}}</div>
			
 
				+              </template>
			
 
				+            </el-image>
			
 
				           </div>
			
 
				         </div>
			
 
				         <div class="right-box">
			
@@ -574,13 +601,11 @@
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				-
			
 
				   </div>
			
 
				 
			
 
				   <script src="./staticData/data.js"></script>
			
 
				   <script>
			
 
				-    var app = new Vue({
			
 
				-      el: "#app",
			
 
				+    var app = Vue.createApp({
			
 
				       data() {
			
 
				         return {
			
 
				           dataAll: dataAll,
			
@@ -597,6 +622,7 @@
 
				           curProgressValue: 0, // 当前进度值
			
 
				           dragPosition: '', // 拖动位置（百分比）
			
 
				           isDragging: false, // 是否正在拖动
			
 
				+          imgCur: 1,
			
 
				         };
			
 
				       },
			
 
				       mounted() {
			
@@ -617,6 +643,12 @@
 
				           this.guideStep = 1;
			
 
				           localStorage.setItem("isGuided", "true");
			
 
				         }
			
 
				+
			
 
				+        document.addEventListener('WeixinJSBridgeReady', function () {
			
 
				+          const video = document.getElementById('bg-video');
			
 
				+          video.play();
			
 
				+          video.pause();
			
 
				+        }, false);
			
 
				       },
			
 
				       created() { },
			
 
				       beforeDestroy() {
			
@@ -625,6 +657,12 @@
 
				       watch: {
			
 
				       },
			
 
				       methods: {
			
 
				+        onSwitch(idx) {
			
 
				+          this.imgCur = idx + 1
			
 
				+        },
			
 
				+        closePreview() {
			
 
				+          this.imgCur = 1
			
 
				+        },
			
 
				         handleQueryParams() {
			
 
				           var queryParams = {};
			
 
				           console.log(window.location.href)
			
@@ -725,7 +763,7 @@
 
				           }
			
 
				         }
			
 
				       },
			
 
				-    });
			
 
				+    }).use(ElementPlus).mount('#app');
			
 
				   </script>
			
 
				 </body>
			
 
				 
			
--- a/tilt-model-web/staticData/data.js
+++ b/tilt-model-web/staticData/data.js
--- a/tilt-model-web/staticData/data/audio/南屏村张氏祠堂.mp3
+++ b/tilt-model-web/staticData/data/audio/南屏村张氏祠堂.mp3
--- a/tilt-model-web/staticData/data/images/南屏村张氏祠堂/1.JPG
+++ b/tilt-model-web/staticData/data/images/南屏村张氏祠堂/1.JPG
--- a/tilt-model-web/staticData/data/images/南屏村张氏祠堂/2.JPG
+++ b/tilt-model-web/staticData/data/images/南屏村张氏祠堂/2.JPG
--- a/tilt-model-web/staticData/data/images/南屏村张氏祠堂/3.JPG
+++ b/tilt-model-web/staticData/data/images/南屏村张氏祠堂/3.JPG
--- a/tilt-model-web/staticData/data/images/南屏村张氏祠堂/4.JPG
+++ b/tilt-model-web/staticData/data/images/南屏村张氏祠堂/4.JPG
--- a/tilt-model-web/staticData/data/images/南屏村张氏祠堂/5.JPG
+++ b/tilt-model-web/staticData/data/images/南屏村张氏祠堂/5.JPG
--- a/tilt-model-web/staticData/data/images/南屏村张氏祠堂/6.JPG
+++ b/tilt-model-web/staticData/data/images/南屏村张氏祠堂/6.JPG
--- a/tilt-model-web/staticData/data/video/南屏村张氏祠堂.mp4
+++ b/tilt-model-web/staticData/data/video/南屏村张氏祠堂.mp4
--- a/tilt-model-web/vue.min.js
+++ b/tilt-model-web/vue.min.js