搞搞搞

.env.localdeploy

@@ -1,4 +1,4 @@
 CLI_MODE=localdeploy
 NODE_ENV=production
-VUE_APP_PUBLIC_PATH=./
+PUBLIC_PATH=./
 VUE_APP_G_PREFIX=http://localhost/

README.md

@@ -1,2 +1,5 @@
 # 测试环境部署地址
-阿里云-4dkk-culture/华南1（深圳）/XuzhouHanStoneReliefArtMuseum/display/
+阿里云-4dkk-culture/华南1（深圳）/WuChuan/display/
+
+# 测试环境访问地址：
+https://culture.4dage.com/WuChuan/display/index.html#/?m=1307&show-cover=true

src/pages/Home.vue

@@ -13,13 +13,13 @@
     <div id="player" />
 
     <!-- <MiniMapDecorator
-      v-show="!isShowPano"
+      v-show="!isShowCover"
       class="mini-map-decorator"
     /> -->
 
     <!-- 底部菜单 -->
     <div
-      v-show="!isShowPano"
+      v-show="!isShowCover"
       id="gui-parent"
     >
       <!-- 进度条加载 -->
@@ -90,26 +90,32 @@
 
     <transition name="fade-out">
       <div
-        v-if="isShowPano"
-        class="pano-layer"
+        v-if="isShowCover"
+        class="cover-layer"
       >
-        <!-- 全景图 -->
-        <iframe
-          class="pano"
-          src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1628651656780496896&vr=fd720_7cJ6ECymB"
-          frameborder="0"
-        />
-
+        <img
+          class="cover"
+          src="@/assets/images/cover.jpg"
+          alt=""
+          draggable="false"
+        >
+        <img
+          class="title"
+          src="@/assets/images/cover-title.png"
+          alt=""
+          draggable="false"
+        >
         <button
           class="begin"
           @click="onClickBegin"
         >
           <img
             class=""
-            src="@/assets/images/begin-explore.png"
+            src="@/assets/images/begin-explore-btn-bg.png"
             alt=""
             draggable="false"
           >
+          <span>开始探索</span>
         </button>
       </div>
     </transition>
@@ -149,10 +155,9 @@ export default {
 
   data() {
     return {
-      hotspots: "",
       // 控制背景音乐
       isMusicInitiallyPlayed: false,
-      isShowPano: false,
+      isShowCover: false,
     }
   },
 
@@ -176,7 +181,7 @@ export default {
 
     const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
     if (locationQuerySection.get('show-cover')) {
-      this.isShowPano = true
+      this.isShowCover = true
     }
   },
 
@@ -187,7 +192,7 @@ export default {
       this.isMusicInitiallyPlayed = true
     },
     onClickBegin() {
-      this.isShowPano = false
+      this.isShowCover = false
       const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
       locationQuerySection.delete('show-cover')
       const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
@@ -221,24 +226,48 @@ export default {
 //   }
 // }
 
-.pano-layer {
+.cover-layer {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
-  iframe.pano {
+  > .cover {
     width: 100%;
     height: 100%;
+    object-fit: cover;
   }
-  button.begin {
+  > .title {
     position: absolute;
-    bottom: 85px;
+    width: 82.7vw;
+    top: 6.2vh;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  > button.begin {
+    position: absolute;
+    bottom: 10.3vh;
     left:50%;
     transform: translateX(-50%);
+    width: 44.5vw;
+    height: 13.3vw;
     > img {
-      width: 141px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    > span {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 4.3vw;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #A33328;
     }
   }
 }

vue.config.js

@@ -7,7 +7,7 @@ const time = dayjs().format('YYYY-M-D HH:mm:ss')
 process.env.VUE_APP_UPDATE_TIME = time
 
 module.exports = {
-  publicPath: process.env.VUE_APP_PUBLIC_PATH,
+  publicPath: process.env.PUBLIC_PATH,
   lintOnSave: false,
   productionSourceMap: false,
   css: {