feat: scenes

README.md

@@ -1,3 +1,5 @@
+## 扬州大运河
+
 ### 初始化
 
 ```bash

package.json

@@ -6,6 +6,17 @@
     "serve": "cross-env TITLE=大理洱海科普馆 vue-cli-service serve",
     "build:test": "cross-env TITLE=大理洱海科普馆 vue-cli-service build",
     "push:test": "cross-env node ./scripts/publish.js",
+
+    "serve:gjqf": "cross-env SCENE=gjqf TITLE=过尽千帆——近代影像里的大运河 vue-cli-service serve",
+    "build:gjqf:test": "cross-env SCENE=gjqf TITLE=过尽千帆——近代影像里的大运河 vue-cli-service build",
+    "push:yzdyh": "cross-env SCENE=gjqf node ./scripts/publish.js",
+
+    "serve:nlcz": "cross-env SCENE=nlcz TITLE=中国大运河博物馆-凝露成露 vue-cli-service serve",
+    "build:nlcz": "cross-env SCENE=nlcz TITLE=中国大运河博物馆-凝露成露 vue-cli-service build",
+
+    "serve:pxdy": "cross-env SCENE=pxdy TITLE=翩跹蝶影-馆藏蝴蝶标本 vue-cli-service serve",
+    "build:pxdy": "cross-env SCENE=pxdy TITLE=翩跹蝶影-馆藏蝴蝶标本 vue-cli-service build",
+
     "lint": "vue-cli-service lint",
     "prepare": "husky install"
   },

src/img.d.ts

@@ -0,0 +1,7 @@
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";

src/views/home/components/menu/index.nlcz.scss

@@ -0,0 +1,218 @@
+.pinBottom-container {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  transition: all 0.5s;
+  z-index: var(--z-index-top);
+
+  .pinBottom.playing {
+    bottom: 20px;
+  }
+}
+
+#gui .pinBottom.open.noScroll.playing {
+  bottom: 135px;
+}
+
+.pinBottom {
+  position: absolute;
+  bottom: 0;
+  line-height: 1;
+  transition: all 0.5s;
+
+  &.open {
+    bottom: 140px;
+
+    &.noScroll {
+      bottom: 117px;
+
+      &.playing {
+        bottom: 135px;
+      }
+    }
+    &.playing {
+      bottom: 154px;
+    }
+  }
+  &.left {
+    left: 12px;
+    bottom: 10px;
+  }
+  &.right {
+    right: 0;
+    bottom: 10px;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
+
+    .rightViewContainer > div:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+    .ui-icon {
+      float: left;
+      padding: 0;
+      margin-right: 10px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+    }
+  }
+}
+
+.viewContainer {
+  float: left;
+  position: relative;
+
+  > div {
+    float: left;
+  }
+}
+
+#play,
+#pause {
+  position: relative;
+  width: 94px;
+  height: 54px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+
+#gui-modes-map > div {
+  float: left;
+  width: 94px;
+  height: 54px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &#hotList {
+    display: none;
+  }
+  &#pullTab,
+  &#gui-modes-inside,
+  &#gui-modes-dollhouse,
+  &#gui-modes-floorplan,
+  &#volume {
+    &::after {
+      content: '';
+      display: block;
+      width: 54px;
+      height: 54px;
+    }
+  }
+  &#pullTab {
+    &::after {
+      background: url('@/assets/images/nlcz/auto.png') no-repeat center / contain;
+    }
+    &.opened::after {
+      background-image: url('@/assets/images/nlcz/auto-suspend.png');
+    }
+  }
+  &#gui-modes-inside {
+    &::after {
+      background: url('@/assets/images/nlcz/inside.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/nlcz/active-inside.png');
+    }
+  }
+  &#gui-modes-dollhouse {
+    &::after {
+      background: url('@/assets/images/nlcz/dollhouse.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/nlcz/active-dollhouse.png');
+    }
+  }
+  &#gui-modes-floorplan {
+    &::after {
+      background: url('@/assets/images/nlcz/floor.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/nlcz/active-floor.png');
+    }
+  }
+  &#volume {
+    &::after {
+      background: url('@/assets/images/nlcz/Volume-btn_on.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/nlcz/Volume-btn_off.png');
+    }
+  }
+  img {
+    width: 54px;
+    height: 54px;
+  }
+}
+
+#pullTab {
+  display: block;
+  position: relative;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  text-align: center;
+}
+
+#volume > a,
+#gui-fullscreen > a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 62px;
+  height: 62px;
+}
+
+.terms2 {
+  display: none;
+}
+
+.icon-fullscreen:before {
+  content: '';
+  background: url('/public/images/enlarge_on.png') center top no-repeat;
+  background-size: 100%;
+  display: inline-block;
+  width: 54px;
+  height: 54px;
+}
+
+@media only screen and (max-width: 600px) {
+  .pinBottom.right,
+  .pinBottom.left {
+    bottom: 5px;
+  }
+  .pinBottom.left {
+    left: 5px;
+  }
+  .pinBottom.right .ui-icon {
+    margin-right: 5px;
+  }
+  #play,
+  #pause {
+    width: 64px;
+  }
+  #gui-modes-map > div {
+    width: 64px;
+  }
+  .viewContainer,
+  #gui-modes-map {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width: 487px), (max-height: 487px) {
+  .pinBottom-container.drawerOpen.duringTour {
+    bottom: 6px;
+  }
+  #gui .pinBottom.open.noScroll {
+    bottom: 93px;
+  }
+  .pinBottom.open.noScroll.playing {
+    bottom: 108px;
+  }
+}

src/views/home/components/menu/index.nlcz.tsx

@@ -0,0 +1,109 @@
+import { defineComponent } from 'vue';
+import playIcon from '@/assets/images/nlcz/play.png';
+import pauseIcon from '@/assets/images/nlcz/pause.png';
+import './index.nlcz.scss';
+
+export default defineComponent({
+  name: 'HomeMenu',
+  render() {
+    return (
+      <div class="pinBottom-container">
+        <div class="pinBottom left">
+          <div class="viewContainer">
+            <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
+              <a>
+                <img src="images/play.png" width="24" height="24" data-original-title="播放" />
+              </a>
+            </div>
+            <div id="play" class="ui-icon" data-original-title="播放">
+              <a>
+                <img src={playIcon} width="54" height="54" />
+              </a>
+            </div>
+            <div id="pause" class="ui-icon" style="display: none;">
+              <a>
+                <img title="暂停" src={pauseIcon} width="54" height="54" />
+              </a>
+            </div>
+            <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
+              <a>
+                <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+              </a>
+            </div>
+            <div id="gui-modes-map" class="ui-icon double active">
+              <div data-original-title="导览" id="pullTab" title="">
+                {/* <img class="icon icon-inside" src="images/nlcz/auto.png" title="导览" /> */}
+              </div>
+              <div data-original-title="热点列表" id="hotList" title="" style="display: none">
+                <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
+              </div>
+              <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
+                {/* <img class="icon icon-inside" src="images/inside.png" title="全景漫游" /> */}
+              </div>
+              <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
+                {/* <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" /> */}
+              </div>
+              <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
+                {/* <img class="icon icon-inside" src="images/floor.png" title="俯视图" /> */}
+              </div>
+              <div data-original-title="VR" id="vr" title="" style="display: none;">
+                <img class="icon icon-inside" src="images/VR.png" title="VR" />
+              </div>
+              <div
+                data-original-title="消除外壳"
+                id="gui-remove-face"
+                title=""
+                style="display: none; float: left;"
+              >
+                <img class="icon icon-inside" src="images/face.jpg" />
+              </div>
+              <div id="volume" class="ui-icon wide">
+                {/* <a>
+                  <img src="images/Volume btn_on.png" width="24" height="24" />
+                </a> */}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pinBottom right hideTarget">
+          <div class="rightViewContainer clearfix">
+            <div id="vr" class="ui-icon wide hidden" style="display: none;">
+              <a>
+                <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+              </a>
+            </div>
+            <div id="sharing" class="ui-icon wide hidden" style="display: none;">
+              <a>
+                <i title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+              </a>
+            </div>
+            <div
+              id="gui-fullscreen"
+              class="ui-icon wide"
+              data-placement="top"
+              title="{[{ VIEW_FULLSCREEN }]}"
+            >
+              <a>
+                <i class="icon icon-fullscreen"></i>
+              </a>
+            </div>
+            <div
+              id="gui-fullscreen-exit"
+              class="ui-icon wide"
+              data-placement="top"
+              title="{[{ EXIT_FULLSCREEN }]}"
+              style="display: none;"
+            >
+              <a>
+                <i class="icon icon-fullscreen-exit"></i>
+              </a>
+            </div>
+            <div class="pull-right terms terms2">
+              <a>{'{[{ TERMS }]}'}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});

src/views/home/components/menu/index.pxdy.scss

@@ -0,0 +1,218 @@
+.pinBottom-container {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  transition: all 0.5s;
+  z-index: var(--z-index-top);
+
+  .pinBottom.playing {
+    bottom: 20px;
+  }
+}
+
+#gui .pinBottom.open.noScroll.playing {
+  bottom: 135px;
+}
+
+.pinBottom {
+  position: absolute;
+  bottom: 0;
+  line-height: 1;
+  transition: all 0.5s;
+
+  &.open {
+    bottom: 140px;
+
+    &.noScroll {
+      bottom: 117px;
+
+      &.playing {
+        bottom: 135px;
+      }
+    }
+    &.playing {
+      bottom: 150px;
+    }
+  }
+  &.left {
+    left: 12px;
+    bottom: 10px;
+  }
+  &.right {
+    right: 0;
+    bottom: 10px;
+    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
+
+    .rightViewContainer > div:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+    .ui-icon {
+      float: left;
+      padding: 0;
+      margin-right: 10px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+    }
+  }
+}
+
+.viewContainer {
+  float: left;
+  position: relative;
+
+  > div {
+    float: left;
+  }
+}
+
+#play,
+#pause {
+  position: relative;
+  width: 94px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+
+#gui-modes-map > div {
+  float: left;
+  width: 94px;
+  height: 62px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &#hotList {
+    display: none;
+  }
+  &#pullTab,
+  &#gui-modes-inside,
+  &#gui-modes-dollhouse,
+  &#gui-modes-floorplan,
+  &#volume {
+    &::after {
+      content: '';
+      display: block;
+      width: 50px;
+      height: 50px;
+    }
+  }
+  &#pullTab {
+    &::after {
+      background: url('@/assets/images/pxdy/auto.png') no-repeat center / contain;
+    }
+    &.opened::after {
+      background-image: url('@/assets/images/pxdy/auto-suspend.png');
+    }
+  }
+  &#gui-modes-inside {
+    &::after {
+      background: url('@/assets/images/pxdy/inside.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/pxdy/active-inside.png');
+    }
+  }
+  &#gui-modes-dollhouse {
+    &::after {
+      background: url('@/assets/images/pxdy/dollhouse.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/pxdy/active-dollhouse.png');
+    }
+  }
+  &#gui-modes-floorplan {
+    &::after {
+      background: url('@/assets/images/pxdy/floor.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/pxdy/active-floor.png');
+    }
+  }
+  &#volume {
+    &::after {
+      background: url('@/assets/images/pxdy/Volume-btn_on.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/pxdy/Volume-btn_off.png');
+    }
+  }
+  img {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+#pullTab {
+  display: block;
+  position: relative;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  text-align: center;
+}
+
+#volume > a,
+#gui-fullscreen > a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 62px;
+  height: 62px;
+}
+
+.terms2 {
+  display: none;
+}
+
+.icon-fullscreen:before {
+  content: '';
+  background: url('/public/images/enlarge_on.png') center top no-repeat;
+  background-size: 100%;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+}
+
+@media only screen and (max-width: 600px) {
+  .pinBottom.right,
+  .pinBottom.left {
+    bottom: 5px;
+  }
+  .pinBottom.left {
+    left: 5px;
+  }
+  .pinBottom.right .ui-icon {
+    margin-right: 5px;
+  }
+  #play,
+  #pause {
+    width: 64px;
+  }
+  #gui-modes-map > div {
+    width: 64px;
+  }
+  .viewContainer,
+  #gui-modes-map {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width: 487px), (max-height: 487px) {
+  .pinBottom-container.drawerOpen.duringTour {
+    bottom: 6px;
+  }
+  #gui .pinBottom.open.noScroll {
+    bottom: 93px;
+  }
+  .pinBottom.open.noScroll.playing {
+    bottom: 108px;
+  }
+}

src/views/home/components/menu/index.pxdy.tsx

@@ -0,0 +1,109 @@
+import { defineComponent } from 'vue';
+import playIcon from '@/assets/images/pxdy/play.png';
+import pauseIcon from '@/assets/images/pxdy/pause.png';
+import './index.pxdy.scss';
+
+export default defineComponent({
+  name: 'HomeMenu',
+  render() {
+    return (
+      <div class="pinBottom-container">
+        <div class="pinBottom left">
+          <div class="viewContainer">
+            <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
+              <a>
+                <img src="images/play.png" width="24" height="24" data-original-title="播放" />
+              </a>
+            </div>
+            <div id="play" class="ui-icon" data-original-title="播放">
+              <a>
+                <img src={playIcon} width="54" height="54" />
+              </a>
+            </div>
+            <div id="pause" class="ui-icon" style="display: none;">
+              <a>
+                <img title="暂停" src={pauseIcon} width="54" height="54" />
+              </a>
+            </div>
+            <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
+              <a>
+                <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+              </a>
+            </div>
+            <div id="gui-modes-map" class="ui-icon double active">
+              <div data-original-title="导览" id="pullTab" title="">
+                {/* <img class="icon icon-inside" src="images/pxdy/auto.png" title="导览" /> */}
+              </div>
+              <div data-original-title="热点列表" id="hotList" title="" style="display: none">
+                <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
+              </div>
+              <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
+                {/* <img class="icon icon-inside" src="images/inside.png" title="全景漫游" /> */}
+              </div>
+              <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
+                {/* <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" /> */}
+              </div>
+              <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
+                {/* <img class="icon icon-inside" src="images/floor.png" title="俯视图" /> */}
+              </div>
+              <div data-original-title="VR" id="vr" title="" style="display: none;">
+                <img class="icon icon-inside" src="images/VR.png" title="VR" />
+              </div>
+              <div
+                data-original-title="消除外壳"
+                id="gui-remove-face"
+                title=""
+                style="display: none; float: left;"
+              >
+                <img class="icon icon-inside" src="images/face.jpg" />
+              </div>
+              <div id="volume" class="ui-icon wide">
+                {/* <a>
+                  <img src="images/Volume btn_on.png" width="24" height="24" />
+                </a> */}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pinBottom right hideTarget">
+          <div class="rightViewContainer clearfix">
+            <div id="vr" class="ui-icon wide hidden" style="display: none;">
+              <a>
+                <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+              </a>
+            </div>
+            <div id="sharing" class="ui-icon wide hidden" style="display: none;">
+              <a>
+                <i title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+              </a>
+            </div>
+            <div
+              id="gui-fullscreen"
+              class="ui-icon wide"
+              data-placement="top"
+              title="{[{ VIEW_FULLSCREEN }]}"
+            >
+              <a>
+                <i class="icon icon-fullscreen"></i>
+              </a>
+            </div>
+            <div
+              id="gui-fullscreen-exit"
+              class="ui-icon wide"
+              data-placement="top"
+              title="{[{ EXIT_FULLSCREEN }]}"
+              style="display: none;"
+            >
+              <a>
+                <i class="icon icon-fullscreen-exit"></i>
+              </a>
+            </div>
+            <div class="pull-right terms terms2">
+              <a>{'{[{ TERMS }]}'}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});

src/views/home/components/menu/index.scss

@@ -35,9 +35,7 @@
     }
   }
   &.left {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    left: 10px;
+    left: 12px;
     bottom: 10px;
   }
   &.right {
@@ -71,7 +69,7 @@
 #pause {
   position: relative;
   width: 94px;
-  height: 48px;
+  height: 62px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -85,20 +83,70 @@
 #gui-modes-map > div {
   float: left;
   width: 94px;
-  height: 48px;
+  height: 62px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
 
-  &:hover,
-  &.active,
-  &.opened {
-    background: rgba(0, 0, 0, 0.25);
+  &#hotList {
+    display: none;
+  }
+  &#pullTab,
+  &#gui-modes-inside,
+  &#gui-modes-dollhouse,
+  &#gui-modes-floorplan,
+  &#volume {
+    &::after {
+      content: '';
+      display: block;
+      width: 50px;
+      height: 50px;
+    }
+  }
+  &#pullTab {
+    &::after {
+      background: url('@/assets/images/auto.png') no-repeat center / contain;
+    }
+    &.opened::after {
+      background-image: url('@/assets/images/auto-suspend.png');
+    }
+  }
+  &#gui-modes-inside {
+    &::after {
+      background: url('@/assets/images/inside.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/active-inside.png');
+    }
+  }
+  &#gui-modes-dollhouse {
+    &::after {
+      background: url('@/assets/images/dollhouse.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/active-dollhouse.png');
+    }
+  }
+  &#gui-modes-floorplan {
+    &::after {
+      background: url('@/assets/images/floor.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/active-floor.png');
+    }
+  }
+  &#volume {
+    &::after {
+      background: url('@/assets/images/Volume-btn_on.png') no-repeat center / contain;
+    }
+    &.active::after {
+      background-image: url('@/assets/images/Volume-btn_off.png');
+    }
   }
   img {
-    width: 24px;
-    height: 24px;
+    width: 50px;
+    height: 50px;
   }
 }
 
@@ -115,8 +163,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 48px;
-  height: 48px;
+  width: 62px;
+  height: 62px;
 }
 
 .terms2 {
@@ -128,8 +176,8 @@
   background: url('/public/images/enlarge_on.png') center top no-repeat;
   background-size: 100%;
   display: inline-block;
-  width: 24px;
-  height: 24px;
+  width: 50px;
+  height: 50px;
 }
 
 @media only screen and (max-width: 600px) {

src/views/home/components/menu/index.tsx

@@ -1,4 +1,6 @@
 import { defineComponent } from 'vue';
+import playIcon from '@/assets/images/play.png';
+import pauseIcon from '@/assets/images/pause.png';
 import './index.scss';
 
 export default defineComponent({
@@ -10,17 +12,17 @@ export default defineComponent({
           <div class="viewContainer">
             <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
               <a>
-                <img src="images/play.png" width="24" height="24" data-original-title="播放" />
+                <img src={playIcon} width="50" height="50" data-original-title="播放" />
               </a>
             </div>
             <div id="play" class="ui-icon" data-original-title="播放">
               <a>
-                <img src="images/play.png" width="24" height="24" />
+                <img src={playIcon} width="50" height="50" />
               </a>
             </div>
             <div id="pause" class="ui-icon" style="display: none;">
               <a>
-                <img title="暂停" src="images/pause.png" width="24" height="24" />
+                <img title="暂停" src={pauseIcon} width="50" height="50" />
               </a>
             </div>
             <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
@@ -30,19 +32,19 @@ export default defineComponent({
             </div>
             <div id="gui-modes-map" class="ui-icon double active">
               <div data-original-title="导览" id="pullTab" title="">
-                <img class="icon icon-inside" src="images/auto.png" title="导览" />
+                {/* <img class="icon icon-inside" src="images/auto.png" title="导览" /> */}
               </div>
               <div data-original-title="热点列表" id="hotList" title="" style="display: none">
                 <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
               </div>
               <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
-                <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
+                {/* <img class="icon icon-inside" src="images/inside.png" title="全景漫游" /> */}
               </div>
               <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
-                <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
+                {/* <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" /> */}
               </div>
               <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
-                <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
+                {/* <img class="icon icon-inside" src="images/floor.png" title="俯视图" /> */}
               </div>
               <div data-original-title="VR" id="vr" title="" style="display: none;">
                 <img class="icon icon-inside" src="images/VR.png" title="VR" />
@@ -55,16 +57,16 @@ export default defineComponent({
               >
                 <img class="icon icon-inside" src="images/face.jpg" />
               </div>
+              <div id="volume" class="ui-icon wide">
+                {/* <a>
+                  <img src="images/Volume btn_on.png" width="24" height="24" />
+                </a> */}
+              </div>
             </div>
           </div>
         </div>
         <div class="pinBottom right hideTarget">
           <div class="rightViewContainer clearfix">
-            <div id="volume" class="ui-icon wide">
-              <a>
-                <img src="images/Volume btn_on.png" width="24" height="24" />
-              </a>
-            </div>
             <div id="vr" class="ui-icon wide hidden" style="display: none;">
               <a>
                 <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>

src/views/home/index.nlcz.scss

@@ -0,0 +1,83 @@
+.home {
+  width: 100%;
+  height: 100%;
+}
+
+div.cad {
+  top: 7px;
+  right: 4px;
+  width: 159px;
+  height: 132px;
+
+  path {
+    stroke-width: 0.5;
+    stroke: #a9dbea;
+  }
+  .sign circle {
+    r: 1.2;
+  }
+}
+
+#player {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+#hot {
+  position: absolute;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  > div[pos='right'] {
+    transform: translate(20px, -50%);
+  }
+  > div[pos='top'] {
+    transform: translate(-50%, calc(-100% - 20px));
+  }
+  > div[pos='middle'] {
+    transform: translate(-50%, -50%);
+  }
+  > div[pos='bottom'] {
+    transform: translate(-50%, 20px);
+  }
+  > div[pos='left'] {
+    transform: translate(calc(-100% - 20px), -50%);
+  }
+  > div {
+    position: absolute;
+    color: #fff;
+    user-select: none;
+    border-radius: 5px;
+    background-color: rgba(34, 34, 34, 0.3);
+    padding: 10px;
+    max-width: 400px;
+    letter-spacing: 1px;
+    line-height: 20px;
+    z-index: var(--z-index-top);
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .home {
+    &_logo {
+      width: 200px;
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+}

src/views/home/index.nlcz.tsx

@@ -0,0 +1,93 @@
+import { defineComponent, ref } from 'vue';
+import JsScript from '@/components/js-script';
+import Title from './components/title';
+import WebVr from './components/web-vr';
+import Other from './components/other';
+import Guide from './components/guide';
+import Vrcon from './components/vrcon';
+import Menu from './components/menu';
+import GuiLoading from './components/gui-loading';
+import Popup from './components/popup';
+import HotSpotList from './components/hot-spot-list';
+import './index.nlcz.scss';
+
+export default defineComponent({
+  name: 'home',
+  components: {
+    Title,
+    WebVr,
+    Other,
+    Vrcon,
+    GuiLoading,
+    JsScript,
+    Popup,
+  },
+  setup() {
+    const manageJsLoaded = ref(false);
+    const hotJsLoaded = ref(false);
+
+    return {
+      manageJsLoaded,
+      hotJsLoaded,
+    };
+  },
+  render() {
+    return (
+      <div class="home">
+        {/* 进度条加载 */}
+        <GuiLoading />
+
+        {/* 加载初始页面 */}
+        <div id="gui-thumb" />
+
+        {/* 热点弹出框 */}
+        <Popup />
+
+        {/* 场景canvs主容器 */}
+        <div id="player" />
+
+        {/* 底部菜单 */}
+        <div id="gui-parent">
+          {/* 热点气泡 */}
+          <div id="hot" />
+
+          <div id="gui" style="display: none;">
+            {/* 标题 */}
+            <Title style={{ display: 'none' }} />
+
+            {/* 热点列表 */}
+            <HotSpotList />
+
+            {/* 底部菜单 */}
+            <Menu />
+
+            {/* 导览 */}
+            <Guide />
+          </div>
+
+          <WebVr />
+          <Vrcon />
+          <Other />
+        </div>
+
+        {/* TODO: 没有控制权，耦合严重；放在此处为了防止元素未渲染导致报错 */}
+        <JsScript src="/js/manage.js" onLoad={() => (this.manageJsLoaded = true)} />
+        {this.manageJsLoaded && (
+          <>
+            <JsScript src="/js/Hot.js" onLoad={() => (this.hotJsLoaded = true)} />
+            {this.hotJsLoaded && (
+              <>
+                <JsScript src="/js/main_2020_show.js" />
+                {/* 延迟加载 */}
+                <JsScript src="/js/lib/player-0.0.12.min.js" />
+                <JsScript src="/js/lib/Tween.js" />
+                <JsScript src="/js/SpecialScene.js" />
+                <JsScript src="/js/loadCAD.js" />
+              </>
+            )}
+          </>
+        )}
+      </div>
+    );
+  },
+});

src/views/home/index.pxdy.scss

@@ -0,0 +1,89 @@
+.home {
+  width: 100%;
+  height: 100%;
+}
+
+div.cad {
+  top: 7px;
+  right: 4px;
+  width: 159px;
+  height: 132px;
+
+  path {
+    stroke-width: 0.5;
+    stroke: #dcd1ab;
+  }
+  .sign circle {
+    r: 1.2;
+  }
+  .sign path {
+    stroke-width: 0;
+  }
+  #orange_red1 stop {
+    stop-color: #ac9f7f !important;
+  }
+}
+
+#player {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+#hot {
+  position: absolute;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  > div[pos='right'] {
+    transform: translate(20px, -50%);
+  }
+  > div[pos='top'] {
+    transform: translate(-50%, calc(-100% - 20px));
+  }
+  > div[pos='middle'] {
+    transform: translate(-50%, -50%);
+  }
+  > div[pos='bottom'] {
+    transform: translate(-50%, 20px);
+  }
+  > div[pos='left'] {
+    transform: translate(calc(-100% - 20px), -50%);
+  }
+  > div {
+    position: absolute;
+    color: #fff;
+    user-select: none;
+    border-radius: 5px;
+    background-color: rgba(34, 34, 34, 0.3);
+    padding: 10px;
+    max-width: 400px;
+    letter-spacing: 1px;
+    line-height: 20px;
+    z-index: var(--z-index-top);
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .home {
+    &_logo {
+      width: 200px;
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+}

src/views/home/index.pxdy.tsx

@@ -0,0 +1,93 @@
+import { defineComponent, ref } from 'vue';
+import JsScript from '@/components/js-script';
+import Title from './components/title';
+import WebVr from './components/web-vr';
+import Other from './components/other';
+import Guide from './components/guide';
+import Vrcon from './components/vrcon';
+import Menu from './components/menu';
+import GuiLoading from './components/gui-loading';
+import Popup from './components/popup';
+import HotSpotList from './components/hot-spot-list';
+import './index.pxdy.scss';
+
+export default defineComponent({
+  name: 'home',
+  components: {
+    Title,
+    WebVr,
+    Other,
+    Vrcon,
+    GuiLoading,
+    JsScript,
+    Popup,
+  },
+  setup() {
+    const manageJsLoaded = ref(false);
+    const hotJsLoaded = ref(false);
+
+    return {
+      manageJsLoaded,
+      hotJsLoaded,
+    };
+  },
+  render() {
+    return (
+      <div class="home">
+        {/* 进度条加载 */}
+        <GuiLoading />
+
+        {/* 加载初始页面 */}
+        <div id="gui-thumb" />
+
+        {/* 热点弹出框 */}
+        <Popup />
+
+        {/* 场景canvs主容器 */}
+        <div id="player" />
+
+        {/* 底部菜单 */}
+        <div id="gui-parent">
+          {/* 热点气泡 */}
+          <div id="hot" />
+
+          <div id="gui" style="display: none;">
+            {/* 标题 */}
+            <Title style={{ display: 'none' }} />
+
+            {/* 热点列表 */}
+            <HotSpotList />
+
+            {/* 底部菜单 */}
+            <Menu />
+
+            {/* 导览 */}
+            <Guide />
+          </div>
+
+          <WebVr />
+          <Vrcon />
+          <Other />
+        </div>
+
+        {/* TODO: 没有控制权，耦合严重；放在此处为了防止元素未渲染导致报错 */}
+        <JsScript src="/js/manage.js" onLoad={() => (this.manageJsLoaded = true)} />
+        {this.manageJsLoaded && (
+          <>
+            <JsScript src="/js/Hot.js" onLoad={() => (this.hotJsLoaded = true)} />
+            {this.hotJsLoaded && (
+              <>
+                <JsScript src="/js/main_2020_show.js" />
+                {/* 延迟加载 */}
+                <JsScript src="/js/lib/player-0.0.12.min.js" />
+                <JsScript src="/js/lib/Tween.js" />
+                <JsScript src="/js/SpecialScene.js" />
+                <JsScript src="/js/loadCAD.js" />
+              </>
+            )}
+          </>
+        )}
+      </div>
+    );
+  },
+});

src/views/home/index.scss

@@ -1,29 +1,20 @@
 .home {
   width: 100%;
   height: 100%;
+}
 
-  &_logo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: 50%;
-    bottom: 20px;
-    width: 300px;
-    text-align: center;
-    font-size: 14px;
-    transform: translateX(-50%);
-    color: rgba(255, 255, 255, 0.8);
+div.cad {
+  top: 7px;
+  right: 4px;
+  width: 159px;
+  height: 132px;
 
-    img {
-      width: 50%;
-    }
-    span {
-      font-size: 16px;
-      padding: 5px 0;
-      color: rgba(255, 255, 255, 0.8);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.8);
-    }
+  path {
+    stroke-width: 0.5;
+    stroke: #5d8a98;
+  }
+  .sign circle {
+    r: 1.2;
   }
 }
 

src/views/home/index.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
 
           <div id="gui" style="display: none;">
             {/* 标题 */}
-            <Title />
+            <Title style={{ display: 'none' }} />
 
             {/* 热点列表 */}
             <HotSpotList />
@@ -63,11 +63,6 @@ export default defineComponent({
 
             {/* 导览 */}
             <Guide />
-
-            <div class="home_logo">
-              <img src="images/btm_logo.png" />
-              <span>提供技术支持</span>
-            </div>
           </div>
 
           <WebVr />