feat: 宁夏固原博物馆

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package.json

@@ -7,6 +7,8 @@
     "serve": "cross-env VITE_APP_TITLE=大理洱海科普馆 VITE_APP_HOT_DOMAIN=./hotspot.html vite",
     "build:test": "cross-env VITE_APP_TITLE=大理洱海科普馆 VITE_APP_HOT_DOMAIN=./hotspot.html run-p type-check \"build-only {@}\" --",
     "build:offline": "cross-env VITE_APP_OFFLINE=1 npm run build:test && cross-env node ./scripts/generate-offline-config.js && replace-in-file --configFile ./scripts/offline-replace-config.json",
+    "serve:gy": "cross-env VITE_APP_TITLE=宁夏固原博物馆-红色基因库项目 VITE_APP_SCENE=gy VITE_APP_HOT_DOMAIN=./hotspot.html vite",
+    "build:gy:test": "cross-env VITE_APP_TITLE=宁夏固原博物馆-红色基因库项目 VITE_APP_SCENE=gy VITE_APP_HOT_DOMAIN=./hotspot.html run-p type-check \"build-only {@}\" --",
     "push:test": "cross-env node ./scripts/publish.js",
     "preview": "vite preview",
     "build-only": "vite build",

public/js/main_2020_show.js

@@ -6976,7 +6976,7 @@ window.Modernizr = function(n, e, t) {
                         padding: 10
                     }
                 }),
-                K.inIframe() && document.getElementsByClassName("pinBottom-container-container")[0].classList.add("embed")),
+                K.inIframe() && document.getElementsByClassName("pinBottom-container")[0].classList.add("embed")),
                 // t("presented_by") && 1 !== Q.specialEdition && Q.brand && !K.valueFromHash("mls", 0) ? document.getElementById("loaderCoBrandName").innerText = t("presented_by") : document.getElementById("loaderCoBrand").classList.add("hidden"),
                 de.populate({
                     name: t("model_name", "name"),
@@ -8067,12 +8067,12 @@ window.Modernizr = function(n, e, t) {
           , y = e("../enum/DirectorEvents")
           , A = e("../enum/PlayerEvents")
           , C = e("../enum/Viewmode")
-          , I = $(".pinTop.left, .pinBottom-container-container, #drawer-container, #drawer, .footer").toArray()
-          , E = $(".pinBottom-container-container, #drawer-container, .footer").toArray()
+          , I = $(".pinTop.left, .pinBottom-container, #drawer-container, #drawer, .footer").toArray()
+          , E = $(".pinBottom-container, #drawer-container, .footer").toArray()
           , b = $("#hover-bottom, #hover-top").toArray()
           , w = ($("#pullTab").eq(0),
         $("#playHead").eq(0),
-        $(".pinBottom-container-container").eq(0))
+        $(".pinBottom-container").eq(0))
           , _ = $("#drawer").eq(0)
           , T = $("#drawer-container").eq(0)
           , x = $("#meta-info").eq(0)
@@ -8227,7 +8227,7 @@ window.Modernizr = function(n, e, t) {
           , y = $("#loaderCoBrand").eq(0)
           , C = $("#interaction-modal").eq(0)
           , I = C.find(".interaction").toArray()
-          , E = ($("#model-title, .pinBottom-container-container, #drawer-container, #drawer, .footer").toArray(),
+          , E = ($("#model-title, .pinBottom-container, #drawer-container, #drawer, .footer").toArray(),
         "");
         t.exports.delayLanding = r,
         t.exports.showMessage = o,

src/index/assets/el.gy.scss

@@ -0,0 +1,7 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #610415,
+    ),
+  )
+);

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

@@ -0,0 +1,257 @@
+.pinBottom-container {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  transition: all 0.5s;
+  z-index: 200;
+
+  &.open {
+    bottom: 140px;
+
+    &.playing {
+      bottom: 160px;
+    }
+  }
+  &.playing {
+    bottom: 50px;
+  }
+}
+
+.pinBottom {
+  position: absolute;
+  bottom: 0;
+  line-height: 1;
+  transition: all 0.5s;
+
+  a,
+  span {
+    color: #ffffff;
+    font-size: 12px;
+  }
+  span {
+    display: block;
+    text-align: center;
+  }
+  &.left {
+    left: 0;
+  }
+  &.right {
+    right: 30px;
+  }
+}
+
+.viewContainer,
+.rightViewContainer,
+#gui-modes-map {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  height: 100%;
+}
+
+.viewContainer {
+  padding-left: 25px;
+}
+
+#play,
+#pause {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  cursor: pointer;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+#pullTab,
+.good-btn,
+#hotList,
+#gui-modes-dollhouse,
+#gui-modes-floorplan,
+#gui-modes-inside,
+#gui-fullscreen,
+#gui-fullscreen-exit,
+#volume,
+#floorGuide,
+#sharing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  cursor: pointer;
+
+  .icon-slot {
+    width: 40px;
+    height: 40px;
+  }
+  &.active,
+  &.opened {
+    span {
+      // color: #d4975c;
+    }
+  }
+}
+
+#gui-modes-inside {
+  .icon-slot {
+    background: url('@/assets/images/gy/inside.png') no-repeat center / contain;
+  }
+
+  &.active {
+    .icon-slot {
+      background-image: url('@/assets/images/gy/inside-act.png');
+    }
+  }
+}
+
+#pullTab {
+  .icon-slot {
+    background: url('@/assets/images/gy/auto.png') no-repeat center / contain;
+  }
+
+  &.opened {
+    .icon-slot {
+      background-image: url('@/assets/images/gy/auto-act.png');
+    }
+  }
+}
+
+#floorGuide {
+  .icon-slot {
+    background: url('@/assets/images/gy/floor2.png') no-repeat center / contain;
+  }
+
+  &.opened {
+    .icon-slot {
+      background-image: url('@/assets/images/gy/floor2-act.png');
+    }
+  }
+}
+
+#hotList {
+  .icon-slot {
+    background: url('@/assets/images/gy/hotlist.png') no-repeat center / contain;
+  }
+
+  &.active {
+    .icon-slot {
+      background-image: url('@/assets/images/gy/hotlist-act.png');
+    }
+  }
+}
+
+#gui-modes-dollhouse {
+  .icon-slot {
+    background: url('@/assets/images/gy/dollhouse.png') no-repeat center / contain;
+  }
+
+  &.active {
+    .icon-slot {
+      background-image: url('@/assets/images/gy/dollhouse-act.png');
+    }
+  }
+}
+
+#gui-modes-floorplan {
+  .icon-slot {
+    background: url('@/assets/images/gy/floor.png') no-repeat center / contain;
+  }
+
+  &.active {
+    .icon-slot {
+      background-image: url('@/assets/images/gy/floor-act.png');
+    }
+  }
+}
+
+// #volume {
+//   .icon-slot {
+//     background: url('/images/Volume btn_on.png') no-repeat center / contain;
+//   }
+
+//   &.active {
+//     .icon-slot {
+//       background-image: url('/images/Volume btn_off.png');
+//     }
+//   }
+// }
+
+.terms2 {
+  display: none;
+}
+
+.floor-list {
+  line-height: 40px;
+  text-align: center;
+
+  li {
+    cursor: pointer;
+
+    &.active,
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  $gap: 15px;
+
+  .pinBottom {
+    &.left {
+      .viewContainer {
+        flex-direction: column;
+        padding-left: 10px;
+        gap: $gap;
+      }
+    }
+    &.right {
+      right: 10px;
+
+      .rightViewContainer {
+        flex-direction: column;
+        gap: $gap;
+
+        #sharing,
+        #volume,
+        #viewer,
+        .good-btn {
+          .icon-slot {
+            width: 30px;
+            height: 30px;
+          }
+          span {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  #play,
+  #pause,
+  #gui-modes-map,
+  .hotList {
+    .icon-slot,
+    img {
+      width: 30px;
+      height: 30px;
+    }
+    span {
+      font-size: 12px;
+    }
+  }
+  #gui-modes-map {
+    flex-direction: column;
+    gap: $gap;
+
+    > div {
+      gap: 5px !important;
+    }
+  }
+}

src/index/views/home/components/menu/index.gy.vue

@@ -0,0 +1,125 @@
+<template>
+  <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="PauseIcon" width="24" height="24" data-original-title="播放" />
+          </a>
+        </div>
+        <div id="play" class="ui-icon" data-original-title="播放">
+          <img :src="PauseIcon" width="24" height="24" title="播放" />
+          <span>开始漫游</span>
+        </div>
+        <div id="pause" class="ui-icon" style="display: none">
+          <img title="暂停" :src="PlayIcon" width="24" height="24" />
+          <span>暂停漫游</span>
+        </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="导览">
+            <div class="icon-slot" />
+            <span>导览列表</span>
+          </div>
+
+          <div id="hotList" title="热点列表" data-original-title="热点列表" style="display: none">
+            <div class="icon-slot" />
+            <span>热点列表</span>
+          </div>
+          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
+            <div class="icon-slot" />
+            <span>全景漫游</span>
+          </div>
+          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="迷你模型" class="">
+            <div class="icon-slot" />
+            <span>迷你模型</span>
+          </div>
+          <div data-original-title="俯视图" id="gui-modes-floorplan" title="俯视图">
+            <div class="icon-slot" />
+            <span>顶部视图</span>
+          </div>
+          <el-popover trigger="click" placement="top">
+            <template #reference>
+              <div data-original-title="楼层导览" id="floorGuide" title="楼层导览">
+                <div class="icon-slot" />
+                <span>楼层导览</span>
+              </div>
+            </template>
+            <template #default>
+              <ul class="floor-list">
+                <li
+                  v-for="item in FLOOR_LIST"
+                  :key="item.label"
+                  :class="{ active: num === item.scene }"
+                  @click="handleScene(item.scene)"
+                >
+                  {{ item.label }}
+                </li>
+              </ul>
+            </template>
+          </el-popover>
+          <div data-original-title="VR" id="vr" title="" style="display: none"></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>
+      </div>
+    </div>
+    <div class="pinBottom right hideTarget">
+      <div class="rightViewContainer clearfix">
+        <div id="volume" class="ui-icon wide" style="display: none">
+          <div class="icon-slot" />
+          <span>音乐</span>
+        </div>
+        <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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import PauseIcon from '@/assets/images/gy/play.png';
+  import PlayIcon from '@/assets/images/gy/pause.png';
+
+  const FLOOR_LIST = [
+    {
+      label: '固原博物馆一层',
+      scene: 'SG-IDyBc0bleFF',
+    },
+    {
+      label: '固原博物馆-外立面',
+      scene: 'SG-H7glLFFd4dn',
+    },
+    {
+      label: '固原博物馆二层',
+      scene: 'SG-51ghBKMIkFY',
+    },
+    {
+      label: '固原博物馆-石刻馆',
+      scene: 'SG-HYTjPCLeVRS',
+    },
+  ];
+  const num = window.number;
+
+  const handleScene = (scene: string) => {
+    window.location.href =
+      'https://houseoss.4dkankan.com/project/guyuan/scene/index.html?m=' + scene;
+  };
+</script>
+
+<style lang="scss" scoped>
+  @use './index.gy.scss';
+</style>

src/index/views/home/index.gy.tsx

@@ -0,0 +1,122 @@
+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 BackIcon from '../../assets/images/gy/back.png';
+import './index.scss';
+
+// 自定义热点图标
+// @ts-ignore
+// window.hoticon = {
+//   default: '/images/point.png',
+//   higt: '/images/point2.png',
+// };
+
+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">
+        <img
+          src={BackIcon}
+          style={{
+            position: 'fixed',
+            top: '28px',
+            left: '30px',
+            width: '38px',
+            height: '38px',
+            zIndex: 9,
+            cursor: 'pointer',
+          }}
+          onClick={() =>
+            (window.location.href = 'https://houseoss.4dkankan.com/project/guyuan/pc/index.html')
+          }
+        />
+
+        {/* 进度条加载 */}
+        <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 class="home_logo">
+              <img src="images/btm_logo.png" />
+              <span>提供技术支持</span>
+            </div> */}
+          </div>
+
+          <WebVr />
+          <Vrcon />
+          <Other />
+        </div>
+
+        {/* TODO: 没有控制权，耦合严重；放在此处为了防止元素未渲染导致报错 */}
+        <JsScript src="./js/manage.js" onLoad={() => (this.manageJsLoaded = true)} />
+        {this.manageJsLoaded && (
+          <div>
+            <JsScript src="./js/Hot.js" onLoad={() => (this.hotJsLoaded = true)} />
+            {this.hotJsLoaded && (
+              <div>
+                <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>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+});