feat: 杭州的博物馆事业高质量发展成果展

components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElImage: typeof import('element-plus/es')['ElImage']
     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:hz": "cross-env VITE_APP_TITLE=博物馆之城——杭州的博物馆事业高质量发展成果展 VITE_APP_SCENE=hz VITE_APP_HOT_DOMAIN=./hotspot.html vite",
+    "build:hz:test": "cross-env VITE_APP_TITLE=博物馆之城——杭州的博物馆事业高质量发展成果展 VITE_APP_SCENE=hz 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/loadCAD.js

@@ -38,7 +38,7 @@ window.grendCAD = (function grendCAD() {
     style.innerHTML = `
       .cad {
         position: absolute;
-        right: 80px;
+        right: 16px;
         top: 16px;
         width: 200px;
         height: 200px;

src/hotspot/views/hotspot/index.hz.scss

@@ -0,0 +1,181 @@
+.hotspot-page {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 52px;
+  width: 1234px;
+  height: 601px;
+  color: white;
+  transform: translate(-50%, -50%);
+  background: url('@hotspot/assets/images/hz/bg-min.jpg') no-repeat center / cover;
+  z-index: var(--z-index-popper);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 25px;
+    left: 60px;
+    width: 441px;
+    height: 47px;
+    background: url('@hotspot/assets/images/hz/logo-min.png') no-repeat center / contain;
+  }
+  h3 {
+    margin: 58px 0 20px;
+    font-size: 30px;
+    letter-spacing: 4px;
+    text-align: center;
+    font-family: 'SourceHanSerifCN-BOLD';
+  }
+  &-container {
+    width: 100%;
+    height: 300px;
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
+    iframe {
+      max-width: 1000px;
+      width: calc(100% - 120px);
+      height: 570px;
+      border-radius: 14px;
+    }
+    video,
+    .el-image {
+      max-height: 570px;
+      border-radius: 14px;
+      object-fit: contain;
+    }
+  }
+
+  &-scrollbar {
+    margin: 10px auto 0;
+    max-height: 188px;
+    overflow: auto;
+    width: 942px;
+    font-family: 'SourceHanSerifCN-Medium';
+
+    &.isTop {
+      max-height: 65%;
+      height: 65%;
+      padding: 50px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    div,
+    p {
+      font-size: 20px;
+      line-height: 35px;
+      text-indent: 2em;
+    }
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.3s;
+    transform: scale(0.8);
+    position: relative;
+    opacity: 0.5;
+  }
+  .swiper-slide-active,
+  .swiper-slide-duplicate-active {
+    transform: scale(1);
+    opacity: 1;
+    z-index: 999;
+  }
+
+  &-nav {
+    position: absolute;
+    right: 30px;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    z-index: 1;
+
+    &__item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      color: #fff;
+      white-space: nowrap;
+      font-size: 14px;
+      width: 90px;
+      height: 32px;
+      line-height: 32px;
+      cursor: pointer;
+      border-radius: 10px;
+      border: 1px solid #fff;
+
+      &.active {
+        background: #19bbed;
+        border: none;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .hotspot-page {
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    bottom: 20px;
+    width: unset;
+    height: unset;
+    transform: none;
+    background-image: url('@hotspot/assets/images/hz/m-bg-min.jpg');
+
+    &::before {
+      display: none;
+    }
+    h3 {
+      margin: 40px 0;
+    }
+    &-container {
+      height: 200px;
+
+      video,
+      .el-image {
+        max-height: 80vh;
+        width: 90%;
+      }
+      iframe {
+        width: 100%;
+        height: calc(100vh - 90px);
+      }
+    }
+    &-nav {
+      position: relative;
+      right: unset;
+      bottom: unset;
+      flex-wrap: wrap;
+      margin-top: 5px;
+      justify-content: center;
+
+      &__item {
+        width: 70px;
+      }
+    }
+    &-scrollbar {
+      padding: 0 20px;
+      width: 100%;
+      max-height: calc(100vh - 90px);
+
+      div,
+      p {
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+  }
+}

src/hotspot/views/hotspot/index.hz.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="hotspot-page">
+    <h3>{{ myTitle }}</h3>
+
+    <div v-if="!isTextType" class="hotspot-page-container">
+      <!-- 音频播放器 -->
+      <audio
+        id="myAudio"
+        v-if="audio"
+        ref="volumeRef"
+        v-show="isOneAduio"
+        :src="audio"
+        controls
+      ></audio>
+
+      <!-- 模型页面 -->
+      <Swiper
+        :modules="modules"
+        class="hotspot-page-swiper"
+        :slides-per-view="myType === 'model' || isMobile ? 1 : 3"
+        :centered-slides="true"
+        :navigation="Boolean(curList.length) && !isMobile"
+        :pagination="
+          isMobile
+            ? false
+            : {
+                clickable: true,
+              }
+        "
+        @swiper="initSwiper"
+        @slideChange="handleChange"
+      >
+        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
+          <template v-if="swiperInited">
+            <template v-if="myType === 'model'">
+              <iframe v-if="index === myInd" :src="item" frameborder="0" />
+            </template>
+            <template v-else-if="myType === 'video'">
+              <video ref="videos" controls :src="item.url" />
+            </template>
+            <template v-else-if="myType === 'img'">
+              <el-image :src="item" fit="contain" @click="handlePreview(index)" />
+            </template>
+          </template>
+        </SwiperSlide>
+      </Swiper>
+    </div>
+
+    <!-- 底部的tab -->
+    <ul v-if="flooTab.length > 1" class="hotspot-page-nav">
+      <!-- 音频图标 -->
+      <li
+        v-if="audio && !isOneAduio"
+        :class="[
+          'hotspot-page-nav__item',
+          {
+            active: audioSta,
+          },
+        ]"
+        @click="audioSta = !audioSta"
+      >
+        <img :src="VolumeOn" :alt="audioSta ? '关闭音频' : '打开音频'" />
+        <span>音频</span>
+      </li>
+      <li
+        v-for="item in flooTab"
+        :key="item.id"
+        :class="[
+          'hotspot-page-nav__item',
+          {
+            active: myType === item.type,
+          },
+        ]"
+        @click="handleTab(item)"
+      >
+        <img :class="`${item.type}-icon`" :src="item.icon" />
+        <span>{{ item.name }}</span>
+      </li>
+    </ul>
+
+    <div class="hotspot-page-scrollbar" :class="{ isTop: !flooTab.length && !isMobile }">
+      <div v-html="myTxt" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { Navigation, Pagination } from 'swiper/modules';
+  import 'swiper/css';
+  import 'swiper/css/navigation';
+  import 'swiper/css/pagination';
+
+  import { parseUrlParams, judgeIsMobile } from '@/utils';
+
+  import ModelIcon from '@hotspot/assets/images/model-icon.png';
+  import ImageIcon from '@hotspot/assets/images/img-icon.png';
+  import VideoIcon from '@hotspot/assets/images/video-icon.png';
+  import VolumeOn from '@hotspot/assets/images/audio-icon.png';
+
+  const urlParams = parseUrlParams(window.location.href);
+  const isMobile = judgeIsMobile();
+
+  export default {
+    name: 'hotspot',
+    components: {
+      Swiper,
+      SwiperSlide,
+    },
+    data() {
+      return {
+        isMobile,
+        VolumeOn,
+        m: urlParams.m,
+        id: urlParams.id,
+        // 音频地址
+        audio: '',
+        // 如果只有单独的音频
+        isOneAduio: false,
+        // 音频状态
+        audioSta: false,
+        swiperInited: false,
+
+        data: {
+          // 模型数组
+          model: [],
+          // 视频数组
+          video: [],
+          // 图片数组
+          img: [],
+        },
+        // 当前 type
+        myType: '',
+
+        // 当前索引
+        myInd: 0,
+
+        // 底部的tab
+        flooTab: [],
+
+        // 标题
+        myTitle: '',
+        // 内容
+        myTxt: '',
+        // 视频内容
+        videoTxt: [],
+        imgTxt: [],
+
+        // 只有标题和文字（没有视频，没有模型，没有图片）
+        oneTxt: false,
+
+        modules: [Navigation, Pagination],
+      };
+    },
+    computed: {
+      curList() {
+        return this.data[this.myType] || [];
+      },
+      isTextType() {
+        return this.myType === 'text';
+      },
+    },
+    watch: {
+      audioSta(val) {
+        if (val) {
+          this.$refs.volumeRef.play();
+          this.$refs.volumeRef.onended = () => {
+            // console.log("----音频播放完毕");
+            this.audioSta = false;
+          };
+        } else this.$refs.volumeRef.pause();
+      },
+    },
+    mounted() {
+      this.getData();
+    },
+    methods: {
+      async getData() {
+        // https://www.4dmodel.com/
+        let url = `${
+          Boolean(Number(import.meta.env.VITE_APP_OFFLINE)) ? '.' : 'https://super.4dage.com'
+        }/data/${this.id}/hot/js/data.js?time=${Math.random()}`;
+        let result = await fetch(url).then((response) => response.json());
+        const resData = result[this.m];
+        console.log('----', resData);
+        if (resData) {
+          this.audio = resData.backgroundMusic;
+          // 只有单独的音频上传
+          if (resData.backgroundMusic && !resData.model && !resData.video && !resData.images) {
+            this.isOneAduio = true;
+          }
+          // 底部的tab
+          const arr = [];
+          const obj = {};
+          if (resData.images) {
+            obj.img = resData.images;
+            arr.push({ id: 3, type: 'img', name: '图片', icon: ImageIcon });
+          }
+          if (resData.video) {
+            obj.video = resData.video;
+            arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon });
+          } else {
+            this.$nextTick(() => {
+              if (
+                !window.navigator.userAgent.match(
+                  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+                )
+              ) {
+                this.audioSta = true;
+                this.$refs.volumeRef.play();
+              }
+            });
+          }
+          if (resData.model) {
+            obj.model = resData.model;
+            arr.push({ id: 1, type: 'model', name: '模型', icon: ModelIcon });
+          }
+
+          this.flooTab = arr;
+          this.data = obj;
+
+          // 当前type的值 应该为
+          if (resData.images) this.myType = 'img';
+          else if (resData.model) this.myType = 'model';
+          else if (resData.video) {
+            this.myType = 'video';
+            this.$nextTick(() => {
+              this.handleVideoPlay(this.data.video[0].url);
+            });
+          } else this.myType = 'text';
+
+          this.myTitle = resData.title || '';
+          this.myTxt = resData.content || '';
+          this.videoTxt = resData.videosDesc || [];
+          this.imgTxt = resData.imagesDesc || [];
+
+          // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
+          if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
+            this.oneTxt = true;
+          }
+        }
+      },
+
+      handleTab(item) {
+        this.myInd = 0;
+        this.myType = item.type;
+        this.swiper?.slideTo(0);
+
+        switch (this.myType) {
+          case 'video':
+            this.$nextTick(() => {
+              this.handleVideoPlay(this.data.video[0].url);
+            });
+            break;
+        }
+      },
+
+      initSwiper(swiper) {
+        this.swiper = swiper;
+        this.swiperInited = true;
+      },
+      handleChange({ activeIndex }) {
+        this.myInd = activeIndex;
+
+        switch (this.myType) {
+          case 'video':
+            this.handleVideoPlay(this.data.video[activeIndex].url);
+            break;
+        }
+      },
+      handleVideoPlay(url) {
+        const video = this.$refs.videos?.find((i) => i.src === url);
+
+        this.lastVideo?.pause();
+        if (!video) return;
+
+        video.play();
+        this.lastVideo = video;
+      },
+      handlePreview(idx) {
+        window.parent.postMessage(
+          {
+            type: 'SHOW_VIEWER',
+            images: [this.curList[idx]],
+          },
+          '*'
+        );
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  @use './index.hz.scss';
+
+  .viewer-button.viewer-close {
+    display: none;
+  }
+</style>

src/index/app.scss

@@ -88,6 +88,14 @@ iframe {
   font-family: 'Source Han Sans CN-Medium';
   src: url('/fonts/SourceHanSansCN-Medium.otf');
 }
+@font-face {
+  font-family: 'SourceHanSerifCN-Medium';
+  src: url('/fonts/SOURCEHANSERIFCN-REGULAR.OTF');
+}
+@font-face {
+  font-family: 'SourceHanSerifCN-BOLD';
+  src: url('/fonts/SOURCEHANSERIFCN-BOLD.OTF');
+}
 
 .limit-line {
   display: -webkit-box;

src/index/assets/el.hz.scss

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

src/index/router/index.hz.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'cover',
+    component: () => import('@/views/cover/index.vue'),
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: () => import('@/views/home'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes,
+});
+
+export default router;

src/index/views/cover/index.scss

@@ -0,0 +1,87 @@
+@use '@/assets/utils.scss';
+
+.cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('./images/bg-min.jpg') no-repeat center / cover;
+
+  &__logo {
+    position: absolute;
+    top: utils.vh-calc(30);
+    right: utils.vw-calc(79);
+    width: utils.vh-calc(1335);
+    height: utils.vh-calc(391);
+  }
+  &__date {
+    position: absolute;
+    right: utils.vw-calc(104);
+    bottom: utils.vh-calc(162);
+    width: utils.vh-calc(427);
+    height: utils.vh-calc(240);
+  }
+  &__btn {
+    position: absolute;
+    left: utils.vw-calc(506);
+    bottom: utils.vh-calc(127);
+    width: utils.vh-calc(322);
+    height: utils.vh-calc(65);
+    cursor: pointer;
+  }
+}
+
+.m-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('./images/m-bg-min.jpg') no-repeat center bottom / cover;
+
+  &__img {
+    position: absolute;
+    top: utils.vh-calc(11);
+    right: 0;
+    width: utils.vh-calc(441);
+    height: utils.vh-calc(47);
+  }
+  &__logo {
+    position: absolute;
+    top: utils.vh-calc(122);
+    right: 0;
+    width: utils.vw-calc(739);
+    height: utils.vw-calc(197);
+  }
+  &__logo2 {
+    position: absolute;
+    top: utils.vh-calc(319);
+    right: utils.vw-calc(11);
+    width: utils.vw-calc(729);
+    height: utils.vw-calc(46);
+  }
+  &__date {
+    position: absolute;
+    top: utils.vh-calc(718);
+    left: utils.vw-calc(21);
+    width: utils.vh-calc(516);
+    height: utils.vh-calc(69);
+  }
+  &__address {
+    position: absolute;
+    top: utils.vh-calc(894);
+    right: utils.vw-calc(24);
+    width: utils.vh-calc(243);
+    height: utils.vh-calc(80);
+  }
+  &__btn {
+    position: absolute;
+    left: 50%;
+    bottom: utils.vh-calc(106);
+    width: utils.vh-calc(322);
+    height: utils.vh-calc(65);
+    transform: translateX(-50%);
+    cursor: pointer;
+  }
+}

src/index/views/cover/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="isMobile ? 'm-cover' : 'cover'">
+    <template v-if="!isMobile">
+      <img class="cover__logo" src="./images/logo-min.png" draggable="false" />
+      <img class="cover__date" src="./images/date-min.png" draggable="false" />
+      <img
+        class="cover__btn"
+        src="./images/btn-min.png"
+        draggable="false"
+        @click="$router.push({ name: 'home' })"
+      />
+    </template>
+
+    <template v-else>
+      <img class="m-cover__img" src="./images/m-img-min.png" draggable="false" />
+      <img class="m-cover__logo" src="./images/m-logo-min.png" draggable="false" />
+      <img class="m-cover__logo2" src="./images/m-logo2-min.png" draggable="false" />
+      <img class="m-cover__date" src="./images/m-date-min.png" draggable="false" />
+      <img class="m-cover__address" src="./images/m-address-min.png" draggable="false" />
+      <img
+        class="m-cover__btn"
+        src="./images/btn-min.png"
+        draggable="false"
+        @click="$router.push({ name: 'home' })"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+  import { judgeIsMobile } from '@/utils';
+
+  const isMobile = judgeIsMobile();
+</script>
+
+<style lang="scss" scoped>
+  @use './index.scss';
+</style>

src/index/views/home/components/hot-spot-list/index.hz.scss

@@ -0,0 +1,158 @@
+#hotListWrap {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: -400px;
+  width: 364px;
+  max-width: 364px;
+  height: 100%;
+  font-family: 'SourceHanSerifCN-Medium';
+  transition: right 0.4s, width 0.5s;
+  background: url('./images/hz/bg-min.jpg') no-repeat center bottom / cover;
+  z-index: var(--z-index-popper);
+}
+
+.hotListActive {
+  right: 0 !important;
+}
+
+#hotListTitle {
+  position: relative;
+  width: 100%;
+  height: 15%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  font-size: 30px;
+  font-family: 'SourceHanSerifCN-BOLD';
+  text-shadow: 0px 2px 5px rgba(50, 119, 157, 0.78);
+}
+
+#hotListContent {
+  width: 100%;
+  /* opacity: 0.65; */
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+#hotListBottom {
+  margin: 40px 0;
+  position: relative;
+  text-align: center;
+}
+
+#hotListClose {
+  width: 40px;
+  cursor: pointer;
+}
+
+#hotListContent ul {
+  padding: 0 30px;
+  font-size: 18px;
+  letter-spacing: 3px;
+}
+
+#hotListContent ul li {
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 20px;
+  padding: 0 25px;
+  transition: color 0.3s, background 0.6s;
+  border-radius: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+#hotListContent ul li:hover {
+  color: var(--el-color-primary);
+}
+
+#hotListContent ul li.active {
+  color: var(--el-color-primary);
+}
+
+#hotListText {
+  font-size: 22px;
+  letter-spacing: 4px;
+  color: white;
+}
+
+#hotListIcon {
+  width: 34px;
+  margin-left: 48px;
+}
+
+#hotListContent::-webkit-scrollbar {
+  width: 6px;
+}
+
+#hotListContent::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #979cab;
+}
+
+#hotListContent::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+@media only screen and (max-width: 910px) {
+  #hotListWrap {
+    top: 20px;
+    right: -100%;
+    bottom: 20px;
+    width: calc(100% - 40px);
+    max-width: unset;
+    height: unset;
+    background: url('./images/hz/m-bg-min.png') no-repeat center / cover;
+  }
+  .hotListActive {
+    right: 20px !important;
+  }
+
+  #hotListTitle {
+    margin: 46px 0 10px;
+    height: auto;
+    position: relative;
+    background: none;
+    opacity: 1;
+  }
+  #hotListText {
+    font-size: 30px;
+    letter-spacing: 3px;
+  }
+  #hotListIcon {
+    width: 24px;
+    margin-left: 26px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(165%, -50%);
+  }
+  #hotListContent ul li {
+    text-align: center;
+    height: 60px;
+    line-height: 60px;
+  }
+  #hotListContent ul {
+    padding: 0 30px;
+    font-size: 18px;
+  }
+  #hotListBottom {
+    margin: 20px 0 58px;
+  }
+  #hotListClose {
+    width: 20px;
+  }
+  #hotListContent ul li.active {
+    color: white;
+    background: none;
+  }
+}

src/index/views/home/components/hot-spot-list/index.hz.tsx

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import './index.hz.scss';
+
+export default defineComponent({
+  name: 'HomeHotSpotList',
+  render() {
+    return (
+      <div id="hotListWrap">
+        <div id="hotListTitle">
+          <div>
+            <span id="hotListText">热点列表</span>
+          </div>
+        </div>
+        <div id="hotListContent">
+          <ul></ul>
+        </div>
+        <div id="hotListBottom">
+          <img id="hotListClose" src="./images/hotListClose.png" alt="" />
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,133 @@
+.pinBottom-container {
+  position: absolute;
+  left: 50%;
+  bottom: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+  height: 80px;
+  transition: all 0.5s;
+  transform: translateX(-50%);
+  border-radius: 40px;
+  font-family: 'SourceHanSerifCN-Medium';
+  background: rgba($color: #000000, $alpha: 0.58);
+  z-index: var(--z-index-top);
+
+  &__logo {
+    margin-right: 10px;
+    width: 96px;
+    height: 23px;
+  }
+  &.open {
+    bottom: 170px;
+
+    &.playing {
+      bottom: 190px;
+    }
+    &.noScroll {
+      bottom: 150px;
+
+      &.playing {
+        bottom: 170px;
+      }
+    }
+  }
+  &.playing:not(.open) {
+    bottom: 60px;
+  }
+}
+
+.pinBottom {
+  display: flex;
+  flex-wrap: nowrap;
+  line-height: 1;
+  transition: all 0.5s;
+  white-space: nowrap;
+
+  > div {
+    float: left;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 20px;
+    cursor: pointer;
+
+    &.active,
+    &:hover,
+    &.opened {
+      color: #f9c396;
+    }
+    img,
+    .icon {
+      margin-bottom: 5px;
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+
+#thumb {
+  .icon-slot {
+    transition: background ease-in 0.2s;
+    background: url('/images/hz/unlike.png') no-repeat center / contain;
+  }
+
+  &.active .icon-slot {
+    background-image: url('/images/hz/like.png');
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .pinBottom-container {
+    bottom: 10px;
+    padding: 0 10px;
+    align-items: flex-end;
+    justify-content: space-between;
+    width: 100%;
+    height: 0;
+    background: none;
+
+    &__logo {
+      display: none;
+    }
+    &.open {
+      bottom: 105px;
+
+      &.noScroll {
+        bottom: 95px;
+
+        &.playing {
+          bottom: 115px;
+        }
+      }
+    }
+    &.playing:not(.open) {
+      bottom: 25px;
+    }
+  }
+  .pinBottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 15px 0;
+    width: 56px;
+    border-radius: 40px;
+    background: rgba($color: #000000, $alpha: 0.58);
+
+    > div {
+      margin: 7px 0;
+      font-size: 12px;
+
+      img,
+      .icon {
+        width: 15px;
+        height: 15px;
+      }
+    }
+  }
+  #play,
+  #pause {
+    width: 64px;
+  }
+}

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

@@ -0,0 +1,154 @@
+import { defineComponent, ref } from 'vue';
+import SharePopup from '../share-popup/index.vue';
+import './index.hz.scss';
+
+const visitCount = localStorage.getItem('visitCount');
+
+export default defineComponent({
+  name: 'HomeMenu',
+  setup() {
+    const shareVisible = ref(false);
+    const animationThumb = ref(false);
+
+    const handleThumb = () => {
+      if (animationThumb.value) return;
+
+      animationThumb.value = true;
+
+      setTimeout(() => {
+        animationThumb.value = false;
+      }, 200);
+    };
+
+    return {
+      shareVisible,
+      animationThumb,
+      handleThumb,
+    };
+  },
+  render() {
+    return (
+      <div class="pinBottom-container">
+        <img class="pinBottom-container__logo" src="images/hz/logo.png" />
+
+        <div class="pinBottom left">
+          <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
+            <a>
+              <img src="images/hz/play.png" width="24" height="24" data-original-title="播放" />
+            </a>
+          </div>
+          <div id="play" class="ui-icon" data-original-title="播放">
+            <a>
+              <img src="images/hz/play.png" width="24" height="24" />
+            </a>
+            <span>自动漫游</span>
+          </div>
+          <div id="pause" class="ui-icon" style="display: none;">
+            <a>
+              <img title="暂停" src="images/hz/pause.png" width="24" height="24" />
+            </a>
+            <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 data-original-title="场景导览" id="pullTab" title="">
+            <img
+              class="icon icon-inside"
+              src="images/hz/auto.png"
+              title="场景导览"
+              data-default-url="images/hz/auto.png"
+              data-active-url="images/hz/auto-suspend.png"
+            />
+            <span>场景导览</span>
+          </div>
+          <div data-original-title="热点列表" id="hotList" title="" style="display: none">
+            <img class="icon icon-inside" src="images/hz/hotlist.png" title="热点列表" />
+            <span>热点列表</span>
+          </div>
+          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
+            <img class="icon icon-inside" src="images/hz/inside.png" title="全景漫游" />
+            <span>全景漫游</span>
+          </div>
+          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
+            <img class="icon icon-inside" src="images/hz/dollhouse.png" title="迷你模型" />
+            <span>迷你模型</span>
+          </div>
+          <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
+            <img class="icon icon-inside" src="images/hz/floor.png" title="俯视图" />
+            <span>俯视图</span>
+          </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/hz/face.jpg" />
+          </div>
+        </div>
+        <div class="pinBottom right">
+          <div id="thumb" class={{ active: this.animationThumb }} onClick={this.handleThumb}>
+            <div class="icon icon-slot" />
+            <span>点赞</span>
+          </div>
+          <div id="sharing" onClick={() => (this.shareVisible = true)}>
+            <img class="icon icon-inside" src="images/hz/share.png" title="分享" />
+            <span>分享</span>
+          </div>
+          <div id="volume" class="ui-icon wide" style="display: none">
+            <a>
+              <img
+                src="images/hz/Volume btn_on.png"
+                width="24"
+                height="24"
+                data-default-url="images/hz/Volume btn_on.png"
+                data-active-url="images/hz/Volume btn_off.png"
+              />
+            </a>
+            <span>音乐</span>
+          </div>
+          <div id="vr" class="ui-icon wide hidden">
+            <a>
+              <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+            </a>
+          </div>
+          <div id="viewer" class="ui-icon wide">
+            <img class="icon icon-inside" src="images/hz/viewer.png" title="浏览量" />
+            <p>{visitCount}</p>
+          </div>
+          <div
+            id="gui-fullscreen"
+            class="ui-icon wide"
+            data-placement="top"
+            title="{[{ VIEW_FULLSCREEN }]}"
+          >
+            <a>
+              <img class="icon icon-fullscreen" src="images/hz/enlarge_on.png" />
+            </a>
+            <span>全屏</span>
+          </div>
+          <div
+            id="gui-fullscreen-exit"
+            class="ui-icon wide"
+            data-placement="top"
+            title="{[{ EXIT_FULLSCREEN }]}"
+            style="display: none;"
+          >
+            <a>
+              <img class="icon icon-fullscreen-exit" src="images/hz/narrow_off.png" />
+            </a>
+            <span>全屏</span>
+          </div>
+        </div>
+
+        <SharePopup visible={this.shareVisible} onUpdate:visible={(v) => (this.shareVisible = v)} />
+      </div>
+    );
+  },
+});

src/index/views/home/components/popup/index.hz.scss

@@ -0,0 +1,46 @@
+#popup {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: var(--z-hot-popper);
+
+  &.wait {
+    opacity: 0.1;
+  }
+}
+#id1 {
+  width: 100%;
+  height: 100%;
+}
+.popup-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#closepop {
+  position: absolute;
+  top: 70px;
+  right: 70px;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  text-indent: -999em;
+  background: url('./images/hz/close.png') no-repeat center / contain;
+}
+
+@media only screen and (max-width: 600px) {
+  #closepop {
+    width: 20px;
+    height: 20px;
+    top: unset;
+    left: 50%;
+    right: unset;
+    bottom: 80px;
+    transform: translateX(-50%);
+  }
+}

src/index/views/home/components/popup/index.hz.tsx

@@ -0,0 +1,30 @@
+import { defineComponent } from 'vue';
+import { api as viewerApi } from 'v-viewer';
+import 'viewerjs/dist/viewer.css';
+import './index.hz.scss';
+
+export default defineComponent({
+  name: 'HomePopup',
+  setup() {
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'SHOW_VIEWER') {
+        viewerApi({
+          images: event.data.images,
+          options: {
+            zIndex: 9999,
+          },
+        });
+      }
+    });
+  },
+  render() {
+    return (
+      <div id="popup">
+        <div class="popup-wrap">
+          <div class="popup-content"></div>
+          <div id="closepop">close</div>
+        </div>
+      </div>
+    );
+  },
+});

src/index/views/home/components/share-popup/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog class="share-popup" v-model="show" title="分享">
+  <el-dialog class="share-popup" v-model="show" title="分享" append-to-body>
     <p>请使用手机扫描二维码或 复制分享链接</p>
 
     <vue-qrcode

vite.config.ts

@@ -97,7 +97,7 @@ export default defineConfig(() => {
       preprocessorOptions: {
         scss: {
           api: 'modern-compiler',
-          additionalData: `@use "@/assets/el.scss" as *;`,
+          additionalData: `@use "@/assets/el${SCENE ? '.' + SCENE : ''}.scss" as *;`,
         },
       },
     },