feat: remove some themes

package.json

@@ -7,15 +7,6 @@
     "serve": "cross-env VITE_APP_TITLE=大理洱海科普馆 VITE_APP_HOT_DOMAIN=./hotspot.html vite",
     "build:test": "cross-env VITE_APP_TITLE=大理洱海科普馆 run-p type-check \"build-only {@}\" --",
     "push:test": "cross-env node ./scripts/publish.js",
-    "serve:zgrs": "cross-env VITE_APP_SCENE=zgrs VITE_APP_TITLE=光大汇晨养老 VITE_APP_HOT_DOMAIN=./hotspot.html vite",
-    "build:zgrs:test": "cross-env VITE_APP_SCENE=zgrs VITE_APP_TITLE=光大汇晨养老 VITE_APP_HOT_DOMAIN=./hotspot.html run-p type-check \"build-only {@}\" --",
-    "push:zgrs": "cross-env VITE_APP_SCENE=zgrs node ./scripts/publish.js",
-    "serve:syjy": "cross-env VITE_APP_SCENE=syjy VITE_APP_TITLE=中国民族博物馆-三亚家园线上展厅 VITE_APP_HOT_DOMAIN=./hotspot.html vite",
-    "build:syjy:test": "cross-env VITE_APP_SCENE=syjy VITE_APP_TITLE=中国民族博物馆-三亚家园线上展厅 VITE_APP_HOT_DOMAIN=./hotspot.html run-p type-check \"build-only {@}\" --",
-    "push:syjy": "cross-env VITE_APP_SCENE=syjy node ./scripts/publish.js",
-    "serve:ylct": "cross-env VITE_APP_SCENE=ylct VITE_APP_TITLE=家国天下-勇立潮头 VITE_APP_HOT_DOMAIN=./hotspot.html vite",
-    "build:ylct:test": "cross-env VITE_APP_SCENE=ylct VITE_APP_TITLE=家国天下-勇立潮头 VITE_APP_HOT_DOMAIN=./hotspot.html run-p type-check \"build-only {@}\" --",
-    "push:ylct": "cross-env VITE_APP_SCENE=ylct node ./scripts/publish.js",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force"

src/hotspot/views/hotspot/index.syjy.scss

@@ -1,262 +0,0 @@
-.hotspot-page {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 40px;
-  padding: 22px 0 71px;
-  z-index: var(--z-index-popper);
-
-  .audioIcon {
-    position: absolute;
-    right: 20px;
-    bottom: 5px;
-
-    img {
-      width: 57px;
-      height: 57px;
-      cursor: pointer;
-    }
-  }
-  &-info {
-    color: #333333;
-
-    h3 {
-      margin-bottom: 18px;
-      font-size: 18px;
-      font-weight: 700;
-      color: #9d222d;
-    }
-    div {
-      font-size: 18px;
-      line-height: 32px;
-      text-indent: 2em;
-    }
-  }
-
-  &-scrollbar {
-    flex: 1;
-    flex-shrink: 0;
-    padding-right: 20px;
-    min-width: 230px;
-    max-width: 700px;
-    height: 600px;
-  }
-
-  &-container {
-    position: relative;
-    flex: 1;
-    width: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 40px;
-    width: auto;
-    max-width: 1020px;
-    max-height: 800px;
-    box-sizing: border-box;
-  }
-
-  &-swiper {
-    &__left,
-    &__right {
-      position: absolute;
-      top: 50%;
-      width: 45px;
-      height: 50px;
-      cursor: pointer;
-      transform: translateY(-50%);
-      z-index: 1;
-    }
-    &__left {
-      left: -10px;
-      background: url('@hotspot/assets/images/syjy/icon-previous-min.png') no-repeat center /
-        contain;
-    }
-    &__right {
-      right: -10px;
-      background: url('@hotspot/assets/images/syjy/icon-next-min.png') no-repeat center / contain;
-    }
-  }
-  &-model {
-    width: 100%;
-    height: 100%;
-
-    iframe {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .swiper-slide {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-  .swiper-wrapper {
-    align-items: center;
-  }
-  &-video {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    max-height: 623px;
-
-    .d-player-wrap {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  &-img {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-    height: inherit;
-
-    p {
-      color: #666666;
-      font-size: 18px;
-    }
-    .el-image img {
-      max-height: 623px;
-    }
-    &-swiper {
-      flex: 1;
-      width: 100%;
-      height: 0;
-    }
-  }
-
-  &-nav {
-    position: absolute;
-    left: 50%;
-    bottom: 5px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    transform: translateX(-50%);
-
-    &__item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 9px;
-      width: 57px;
-      height: 57px;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      &.active {
-      }
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-
-span.el-image-viewer__close {
-  top: 44px;
-  right: 100px;
-}
-
-@media only screen and (max-width: 600px) {
-  .hotspot-page {
-    padding-bottom: 0;
-    flex-direction: column;
-
-    .el-scrollbar {
-      flex: 1;
-      width: 100% !important;
-      height: 0 !important;
-      background: #9d222d;
-      border-radius: 17px 17px 0px 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 100% !important;
-    }
-    &-info {
-      padding: 0 28px;
-      text-align: left;
-      width: 100%;
-      color: white;
-
-      h3 {
-        margin: 13px 0 8px;
-        color: inherit;
-        text-align: left;
-      }
-      div {
-        width: 100%;
-        font-size: 14px;
-      }
-    }
-    &-container {
-      max-width: 100%;
-      min-width: 100%;
-      width: 100%;
-      height: 0;
-      background: none;
-    }
-    &-swiper {
-      &__left,
-      &__right {
-        top: unset;
-        bottom: 12px;
-        transform: none;
-      }
-      &__left {
-        left: 14px;
-      }
-      &__right {
-        right: 14px;
-      }
-    }
-    &-nav {
-      bottom: 0;
-
-      &__item {
-        width: 48px;
-        height: 48px;
-      }
-    }
-    .audioIcon {
-      right: 35px;
-      bottom: 1px;
-
-      img {
-        width: 48px;
-        height: 48px;
-      }
-    }
-    &-swiper {
-      &__left,
-      &__right {
-        top: 45%;
-        width: 19px;
-        height: 38px;
-      }
-      &__left {
-        left: 0;
-        background: url('@hotspot/assets/images/syjy/icon-left-min.png') no-repeat center / contain;
-      }
-      &__right {
-        right: 0;
-        background: url('@hotspot/assets/images/syjy/icon-right-min.png') no-repeat center / contain;
-      }
-    }
-  }
-  span.el-image-viewer__close {
-    top: 20px;
-    right: 73px;
-    width: 33px;
-    height: 33px;
-  }
-}

src/hotspot/views/hotspot/index.syjy.vue

@@ -1,284 +0,0 @@
-<template>
-  <div class="hotspot-page">
-    <div v-if="myType !== 'text'" class="hotspot-page-container">
-      <!-- 音频播放器 -->
-      <audio
-        id="myAudio"
-        v-if="audio"
-        ref="volumeRef"
-        v-show="isOneAduio"
-        :src="audio"
-        controls
-      ></audio>
-
-      <!-- 模型页面 -->
-      <Swiper
-        v-if="myType === 'model'"
-        class="hotspot-page-swiper hotspot-page-model"
-        @swiper="initSwiper"
-        @slideChange="handleChange"
-      >
-        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
-          <iframe v-if="index === myInd" :src="item" frameborder="0" />
-        </SwiperSlide>
-      </Swiper>
-
-      <!-- 视频页面 -->
-      <div v-if="myType === 'video'" class="hotspot-page-swiper hotspot-page-video">
-        <template v-for="(item, index) in curList" :key="item.url">
-          <VideoPlay
-            v-if="index === myInd"
-            class="hotspot-page-video"
-            :src="item.url"
-            control
-            :volume="0.6"
-            :controlBtns="['audioTrack', 'volume', 'speedRate']"
-          />
-        </template>
-      </div>
-
-      <!-- 图片页面 -->
-      <Swiper
-        v-if="myType === 'img'"
-        class="hotspot-page-swiper hotspot-page-img-swiper"
-        @swiper="initSwiper"
-        @slideChange="handleChange"
-      >
-        <SwiperSlide v-for="(item, idx) in curList" :key="item">
-          <div class="hotspot-page-img">
-            <el-image
-              :src="item"
-              fit="scale-down"
-              preview-teleported
-              :preview-src-list="curList"
-              :initial-index="idx"
-            />
-            <p v-if="imgTxt[idx]">{{ imgTxt[idx] }}</p>
-          </div>
-        </SwiperSlide>
-      </Swiper>
-
-      <template v-if="curList.length > 1">
-        <div class="hotspot-page-swiper__left" @click="handlePre" />
-        <div class="hotspot-page-swiper__right" @click="handleNext" />
-      </template>
-
-      <!-- 底部的tab -->
-      <div v-if="flooTab.length > 1" class="hotspot-page-nav">
-        <div
-          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="myType === item.type ? item.acIcon : item.icon" />
-          <!-- {{ item.name }}
-          {{ item.type === 'img' ? `${myInd + 1}/${data.img.length}` : '' }} -->
-        </div>
-      </div>
-
-      <!-- 音频图标 -->
-      <div
-        v-if="audio && !isOneAduio"
-        class="audioIcon"
-        :title="audioSta ? '关闭音频' : '打开音频'"
-        @click="audioSta = !audioSta"
-      >
-        <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
-      </div>
-    </div>
-
-    <el-scrollbar
-      class="hotspot-page-scrollbar"
-      :style="{ width: myType !== 'text' ? '230px' : '80%' }"
-    >
-      <div class="hotspot-page-info">
-        <h3>{{ myTitle }}</h3>
-        <div v-html="myTxt" />
-      </div>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script>
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import 'swiper/css';
-  import { videoPlay as VideoPlay } from 'vue3-video-play/lib';
-  import { parseUrlParams } from '@/utils';
-
-  import ModelIcon from '@hotspot/assets/images/icon-model@2x.png';
-  import AcModelIcon from '@hotspot/assets/images/icon-model-1@2x.png';
-  import ImageIcon from '@hotspot/assets/images/icon-image@2x.png';
-  import AcImageIcon from '@hotspot/assets/images/icon-image-1@2x.png';
-  import VideoIcon from '@hotspot/assets/images/icon-video@2x.png';
-  import AcVideoIcon from '@hotspot/assets/images/icon-video-1@2x.png';
-  import VolumeOn from '@hotspot/assets/images/Volume-on.png';
-  import VolumeOff from '@hotspot/assets/images/Volume-off.png';
-
-  const urlParams = parseUrlParams(window.location.href);
-
-  export default {
-    name: 'hotspot',
-    components: {
-      Swiper,
-      SwiperSlide,
-      VideoPlay,
-    },
-    data() {
-      return {
-        VolumeOn,
-        VolumeOff,
-        m: urlParams.m,
-        id: urlParams.id,
-        // 音频地址
-        audio: '',
-        // 如果只有单独的音频
-        isOneAduio: false,
-        // 音频状态
-        audioSta: false,
-
-        data: {
-          // 模型数组
-          model: [],
-          // 视频数组
-          video: [],
-          // 图片数组
-          img: [],
-        },
-        // 当前 type
-        myType: '',
-
-        // 当前索引
-        myInd: 0,
-
-        // 底部的tab
-        flooTab: [],
-
-        // 标题
-        myTitle: '',
-        // 内容
-        myTxt: '',
-        // 视频内容
-        videoTxt: [],
-        imgTxt: [],
-
-        // 只有标题和文字（没有视频，没有模型，没有图片）
-        oneTxt: false,
-      };
-    },
-    computed: {
-      curList() {
-        return this.data[this.myType] || [];
-      },
-    },
-    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 = `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.model) {
-            obj.model = resData.model;
-            arr.push({ id: 1, type: 'model', name: '模型', icon: ModelIcon, acIcon: AcModelIcon });
-          }
-          if (resData.video) {
-            obj.video = resData.video;
-            arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon, acIcon: AcVideoIcon });
-          } 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.images) {
-            obj.img = resData.images;
-            arr.push({ id: 3, type: 'img', name: '图片', icon: ImageIcon, acIcon: AcImageIcon });
-          }
-          this.flooTab = arr;
-          this.data = obj;
-
-          // 当前type的值 应该为
-          if (resData.model) this.myType = 'model';
-          else if (resData.video) this.myType = 'video';
-          else if (resData.images) this.myType = 'img';
-          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;
-      },
-
-      initSwiper(swiper) {
-        this.swiper = swiper;
-      },
-      handleChange({ activeIndex }) {
-        this.myInd = activeIndex;
-      },
-      handlePre() {
-        if (this.myType === 'video') {
-          this.myInd = this.myInd > 0 ? this.myInd - 1 : this.curList.length - 1;
-        } else {
-          this.swiper?.slidePrev();
-        }
-      },
-      handleNext() {
-        if (this.myType === 'video') {
-          this.myInd = this.myInd < this.curList.length - 1 ? this.myInd + 1 : 0;
-        } else {
-          this.swiper?.slideNext();
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss">
-  @use './index.syjy.scss';
-</style>

src/hotspot/views/hotspot/index.ylct.scss

@@ -1,208 +0,0 @@
-.hotspot-page {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  padding: 20px;
-  color: #d4975c;
-  z-index: var(--z-index-popper);
-
-  .audioIcon {
-    position: absolute;
-    right: 20px;
-    bottom: 5px;
-
-    img {
-      width: 57px;
-      height: 57px;
-      cursor: pointer;
-    }
-  }
-  h3 {
-    padding: 10px 0;
-    font-size: 28px;
-    font-family: 'Source Han Sans CN-Bold';
-  }
-  &-info {
-    div {
-      font-size: 24px;
-      line-height: 30px;
-      text-indent: 2em;
-    }
-  }
-
-  &-scrollbar {
-    flex: 1;
-    flex-shrink: 0;
-    padding-right: 20px;
-    width: 100%;
-    max-height: 200px;
-    box-sizing: border-box;
-  }
-
-  &-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    height: 400px;
-    box-sizing: border-box;
-  }
-
-  &-swiper {
-    &__left,
-    &__right {
-      position: absolute;
-      top: 50%;
-      width: 45px;
-      height: 50px;
-      cursor: pointer;
-      transform: translateY(-50%);
-      z-index: 1;
-    }
-    &__left {
-      left: 0;
-      background: url('@hotspot/assets/images/icon-previous@2x-min.png') no-repeat center / contain;
-    }
-    &__right {
-      right: 0;
-      background: url('@hotspot/assets/images/icon-next@2x-min.png') no-repeat center / contain;
-    }
-  }
-  &-model {
-    width: 100%;
-    height: 100%;
-
-    iframe {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .swiper-slide {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-  &-video {
-    width: 100%;
-    height: 100%;
-    max-height: 623px;
-  }
-  &-img {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: inherit;
-
-    .el-image img {
-      max-height: 623px;
-    }
-    &-swiper {
-      flex: 1;
-      width: 100%;
-      height: 0;
-    }
-  }
-
-  &-nav {
-    position: absolute;
-    left: 50%;
-    bottom: 5px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    transform: translateX(-50%);
-
-    &__item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 9px;
-      width: 57px;
-      height: 57px;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      &.active {
-      }
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .hotspot-page {
-    h3 {
-      font-size: 18px;
-    }
-    &-container {
-      max-width: 100%;
-      min-width: 100%;
-      width: 100%;
-      height: 0;
-      background: none;
-    }
-    &-info div {
-      font-size: 15px;
-      line-height: 24px;
-    }
-    &-swiper {
-      &__left,
-      &__right {
-        top: unset;
-        bottom: 12px;
-        transform: none;
-      }
-      &__left {
-        left: 14px;
-      }
-      &__right {
-        right: 14px;
-      }
-    }
-    &-nav {
-      bottom: 0;
-
-      &__item {
-        width: 48px;
-        height: 48px;
-      }
-    }
-    .audioIcon {
-      right: 35px;
-      bottom: 1px;
-
-      img {
-        width: 48px;
-        height: 48px;
-      }
-    }
-    &-swiper {
-      &__left,
-      &__right {
-        top: 45%;
-        width: 19px;
-        height: 38px;
-      }
-      &__left {
-        left: 0;
-        background: url('@hotspot/assets/images/syjy/icon-left-min.png') no-repeat center / contain;
-      }
-      &__right {
-        right: 0;
-        background: url('@hotspot/assets/images/syjy/icon-right-min.png') no-repeat center / contain;
-      }
-    }
-  }
-}

src/hotspot/views/hotspot/index.ylct.vue

@@ -1,281 +0,0 @@
-<template>
-  <div class="hotspot-page">
-    <h3>{{ myTitle }}</h3>
-
-    <div v-if="myType !== 'text'" class="hotspot-page-container">
-      <!-- 音频播放器 -->
-      <audio
-        id="myAudio"
-        v-if="audio"
-        ref="volumeRef"
-        v-show="isOneAduio"
-        :src="audio"
-        controls
-      ></audio>
-
-      <!-- 模型页面 -->
-      <Swiper
-        v-if="myType === 'model'"
-        class="hotspot-page-swiper hotspot-page-model"
-        @swiper="initSwiper"
-        @slideChange="handleChange"
-      >
-        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
-          <iframe v-if="index === myInd" :src="item" frameborder="0" />
-        </SwiperSlide>
-      </Swiper>
-
-      <!-- 视频页面 -->
-      <div v-if="myType === 'video'" class="hotspot-page-swiper hotspot-page-video">
-        <template v-for="(item, index) in curList" :key="item.url">
-          <video
-            v-if="index === myInd"
-            id="videoID"
-            class="hotspot-page-video"
-            controls
-            :src="item.url"
-            autoplay
-            disablePictureInPicture
-            controlsList="nodownload noplaybackrate"
-          />
-        </template>
-      </div>
-
-      <!-- 图片页面 -->
-      <Swiper
-        v-if="myType === 'img'"
-        class="hotspot-page-swiper hotspot-page-img-swiper"
-        @swiper="initSwiper"
-        @slideChange="handleChange"
-      >
-        <SwiperSlide v-for="(item, idx) in curList" :key="item">
-          <div class="hotspot-page-img">
-            <el-image
-              :src="item"
-              fit="scale-down"
-              preview-teleported
-              :preview-src-list="curList"
-              :initial-index="idx"
-            />
-          </div>
-        </SwiperSlide>
-      </Swiper>
-
-      <template v-if="curList.length > 1">
-        <div class="hotspot-page-swiper__left" @click="handlePre" />
-        <div class="hotspot-page-swiper__right" @click="handleNext" />
-      </template>
-
-      <!-- 底部的tab -->
-      <div v-if="flooTab.length > 1" class="hotspot-page-nav">
-        <div
-          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="myType === item.type ? item.acIcon : item.icon" />
-          <!-- {{ item.name }}
-          {{ item.type === 'img' ? `${myInd + 1}/${data.img.length}` : '' }} -->
-        </div>
-      </div>
-
-      <!-- 音频图标 -->
-      <div
-        v-if="audio && !isOneAduio"
-        class="audioIcon"
-        :title="audioSta ? '关闭音频' : '打开音频'"
-        @click="audioSta = !audioSta"
-      >
-        <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />
-      </div>
-    </div>
-
-    <el-scrollbar class="hotspot-page-scrollbar">
-      <div class="hotspot-page-info">
-        <div v-html="myTxt" />
-      </div>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script>
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import 'swiper/css';
-  import { parseUrlParams } from '@/utils';
-
-  import ModelIcon from '@hotspot/assets/images/icon-model@2x.png';
-  import AcModelIcon from '@hotspot/assets/images/icon-model-1@2x.png';
-  import ImageIcon from '@hotspot/assets/images/icon-image@2x.png';
-  import AcImageIcon from '@hotspot/assets/images/icon-image-1@2x.png';
-  import VideoIcon from '@hotspot/assets/images/icon-video@2x.png';
-  import AcVideoIcon from '@hotspot/assets/images/icon-video-1@2x.png';
-  import VolumeOn from '@hotspot/assets/images/Volume-on.png';
-  import VolumeOff from '@hotspot/assets/images/Volume-off.png';
-
-  const urlParams = parseUrlParams(window.location.href);
-
-  export default {
-    name: 'hotspot',
-    components: {
-      Swiper,
-      SwiperSlide,
-    },
-    data() {
-      return {
-        VolumeOn,
-        VolumeOff,
-        m: urlParams.m,
-        id: urlParams.id,
-        // 音频地址
-        audio: '',
-        // 如果只有单独的音频
-        isOneAduio: false,
-        // 音频状态
-        audioSta: false,
-
-        data: {
-          // 模型数组
-          model: [],
-          // 视频数组
-          video: [],
-          // 图片数组
-          img: [],
-        },
-        // 当前 type
-        myType: '',
-
-        // 当前索引
-        myInd: 0,
-
-        // 底部的tab
-        flooTab: [],
-
-        // 标题
-        myTitle: '',
-        // 内容
-        myTxt: '',
-        // 视频内容
-        videoTxt: [],
-        imgTxt: [],
-
-        // 只有标题和文字（没有视频，没有模型，没有图片）
-        oneTxt: false,
-      };
-    },
-    computed: {
-      curList() {
-        return this.data[this.myType] || [];
-      },
-    },
-    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 = `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.model) {
-            obj.model = resData.model;
-            arr.push({ id: 1, type: 'model', name: '模型', icon: ModelIcon, acIcon: AcModelIcon });
-          }
-          if (resData.video) {
-            obj.video = resData.video;
-            arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon, acIcon: AcVideoIcon });
-          } 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.images) {
-            obj.img = resData.images;
-            arr.push({ id: 3, type: 'img', name: '图片', icon: ImageIcon, acIcon: AcImageIcon });
-          }
-          this.flooTab = arr;
-          this.data = obj;
-
-          // 当前type的值 应该为
-          if (resData.model) this.myType = 'model';
-          else if (resData.video) this.myType = 'video';
-          else if (resData.images) this.myType = 'img';
-          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;
-      },
-
-      initSwiper(swiper) {
-        this.swiper = swiper;
-      },
-      handleChange({ activeIndex }) {
-        this.myInd = activeIndex;
-      },
-      handlePre() {
-        if (this.myType === 'video') {
-          this.myInd = this.myInd > 0 ? this.myInd - 1 : this.curList.length - 1;
-        } else {
-          this.swiper?.slidePrev();
-        }
-      },
-      handleNext() {
-        if (this.myType === 'video') {
-          this.myInd = this.myInd < this.curList.length - 1 ? this.myInd + 1 : 0;
-        } else {
-          this.swiper?.slideNext();
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss">
-  @use './index.ylct.scss';
-</style>

src/index/views/home/components/guide/index.syjy.scss

@@ -1,196 +0,0 @@
-#drawer-container {
-  position: absolute;
-  left: 0;
-  bottom: 0px;
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-  pointer-events: none;
-  transition-property: bottom, opacity;
-  transition-duration: 0.5s;
-  z-index: var(--z-index-normal);
-
-  #drawer.playing {
-    bottom: 20px;
-  }
-}
-
-#drawer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  color: #fff;
-  pointer-events: all;
-  transition-duration: 0.5s;
-  transition-property: height, bottom;
-
-  &.open {
-    height: 150px;
-  }
-}
-
-#drawer.open.fadeOut {
-  pointer-events: none;
-}
-
-.fullWidth .frame-container {
-  width: 100%;
-}
-.frame-container {
-  display: flex;
-  align-items: center;
-  width: calc(100% - 58px);
-  height: 100%;
-  background: rgba(157, 34, 45, 0.9);
-}
-
-.frame {
-  margin: 0 20px;
-  width: calc(100% - 40px);
-}
-
-.frame.noScroll {
-  margin: 17px 10px;
-}
-
-.frame .slidee {
-  display: flex;
-  height: 100%;
-  list-style: none;
-}
-
-.frame .slidee li {
-  position: relative;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-  margin: 0 10px;
-  width: 180px;
-  height: 110px;
-  cursor: pointer;
-  box-sizing: border-box;
-
-  img {
-    border-radius: 10px;
-    overflow: hidden;
-  }
-  &.active {
-    img {
-      border: 2px solid #f5dd8c;
-    }
-  }
-}
-
-.frame .slidee li .overlay {
-  margin-top: 5px;
-  color: #fff;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-}
-
-.frame .slidee li .mark360View,
-.frame .slidee li .markInsideView {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 50px;
-  max-height: 25px;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 1);
-  z-index: 100;
-  transform: translate3d(0, 0, 0);
-}
-
-.frame .slidee li img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-#playHead {
-  display: table;
-  position: absolute;
-  bottom: -20px;
-  left: 0;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  transition-property: bottom;
-  transition-duration: 0.5s;
-  background-color: #000;
-
-  &.playing {
-    bottom: 0;
-  }
-}
-
-#status {
-  width: 65px;
-  color: #fff;
-  font-family: OpenSans, 'Helvetica Neue', Arial, sans-serif;
-  font-weight: 700;
-  font-size: 11px;
-  padding-left: 10px;
-}
-
-#progressBar {
-  padding: 0 10px;
-  flex: 1;
-  pointer-events: all;
-
-  .step {
-    height: 6px;
-    float: left;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: #575757;
-    }
-    &.active::before {
-      background-color: #00b4ed;
-    }
-  }
-}
-
-@media only screen and (max-width: 487px), (max-height: 487px) {
-  #drawer.open {
-    height: 100px;
-  }
-  .frame {
-    margin: 0 7px;
-    width: calc(100% - 14px);
-  }
-  .frame .slidee {
-    gap: 0;
-
-    li {
-      margin: 0 4px;
-      width: auto;
-      height: auto;
-      gap: 3px;
-
-      img {
-        width: 100px !important;
-        height: 60px !important;
-        border: none;
-        border-radius: 7px;
-      }
-      .overlay {
-        margin-top: unset;
-        font-size: 12px;
-      }
-    }
-  }
-}

src/index/views/home/components/guide/index.syjy.tsx

@@ -1,26 +0,0 @@
-import { defineComponent } from 'vue';
-import './index.syjy.scss';
-
-export default defineComponent({
-  name: 'HomeGuide',
-  render() {
-    return (
-      <div id="drawer-container">
-        <div id="drawer" class="fullWidth">
-          <div class="frame-container">
-            <div id="scrollFrame" class="frame">
-              <ul id="thumb-container" class="slidee"></ul>
-            </div>
-          </div>
-        </div>
-        <div id="playHead">
-          <div id="status">
-            <span class="curIdx">1</span>
-            of <span class="totalSteps"></span>
-          </div>
-          <div id="progressBar"></div>
-        </div>
-      </div>
-    );
-  },
-});

src/index/views/home/components/guide/index.ylct.scss

@@ -1,196 +0,0 @@
-#drawer-container {
-  position: absolute;
-  left: 0;
-  bottom: 0px;
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-  pointer-events: none;
-  transition-property: bottom, opacity;
-  transition-duration: 0.5s;
-  z-index: var(--z-index-normal);
-
-  #drawer.playing {
-    bottom: 20px;
-  }
-}
-
-#drawer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  color: #fff;
-  pointer-events: all;
-  transition-duration: 0.5s;
-  transition-property: height, bottom;
-
-  &.open {
-    height: 150px;
-  }
-}
-
-#drawer.open.fadeOut {
-  pointer-events: none;
-}
-
-.fullWidth .frame-container {
-  width: 100%;
-}
-.frame-container {
-  display: flex;
-  align-items: center;
-  width: calc(100% - 58px);
-  height: 100%;
-  background: rgba(157, 34, 45, 0.9);
-}
-
-.frame {
-  margin: 0 20px;
-  width: calc(100% - 40px);
-}
-
-.frame.noScroll {
-  margin: 17px 10px;
-}
-
-.frame .slidee {
-  display: flex;
-  height: 100%;
-  list-style: none;
-}
-
-.frame .slidee li {
-  position: relative;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-  margin: 0 10px;
-  width: 180px;
-  height: 110px;
-  cursor: pointer;
-  box-sizing: border-box;
-
-  img {
-    border-radius: 10px;
-    overflow: hidden;
-  }
-  &.active {
-    img {
-      border: 2px solid #f5dd8c;
-    }
-  }
-}
-
-.frame .slidee li .overlay {
-  margin-top: 5px;
-  color: #fff;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-}
-
-.frame .slidee li .mark360View,
-.frame .slidee li .markInsideView {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 50px;
-  max-height: 25px;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 1);
-  z-index: 100;
-  transform: translate3d(0, 0, 0);
-}
-
-.frame .slidee li img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-#playHead {
-  display: table;
-  position: absolute;
-  bottom: -20px;
-  left: 0;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  transition-property: bottom;
-  transition-duration: 0.5s;
-  background-color: #000;
-
-  &.playing {
-    bottom: 0;
-  }
-}
-
-#status {
-  width: 65px;
-  color: #fff;
-  font-family: OpenSans, 'Helvetica Neue', Arial, sans-serif;
-  font-weight: 700;
-  font-size: 11px;
-  padding-left: 10px;
-}
-
-#progressBar {
-  padding: 0 10px;
-  flex: 1;
-  pointer-events: all;
-
-  .step {
-    height: 6px;
-    float: left;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: #575757;
-    }
-    &.active::before {
-      background-color: #00b4ed;
-    }
-  }
-}
-
-@media only screen and (max-width: 487px), (max-height: 487px) {
-  #drawer.open {
-    height: 100px;
-  }
-  .frame {
-    margin: 0 7px;
-    width: calc(100% - 14px);
-  }
-  .frame .slidee {
-    gap: 0;
-
-    li {
-      margin: 0 4px;
-      width: auto;
-      height: auto;
-      gap: 3px;
-
-      img {
-        width: 100px !important;
-        height: 60px !important;
-        border: none;
-        border-radius: 7px;
-      }
-      .overlay {
-        margin-top: unset;
-        font-size: 12px;
-      }
-    }
-  }
-}

src/index/views/home/components/guide/index.ylct.tsx

@@ -1,26 +0,0 @@
-import { defineComponent } from 'vue';
-import './index.syjy.scss';
-
-export default defineComponent({
-  name: 'HomeGuide',
-  render() {
-    return (
-      <div id="drawer-container">
-        <div id="drawer" class="fullWidth">
-          <div class="frame-container">
-            <div id="scrollFrame" class="frame">
-              <ul id="thumb-container" class="slidee"></ul>
-            </div>
-          </div>
-        </div>
-        <div id="playHead">
-          <div id="status">
-            <span class="curIdx">1</span>
-            of <span class="totalSteps"></span>
-          </div>
-          <div id="progressBar"></div>
-        </div>
-      </div>
-    );
-  },
-});

src/index/views/home/components/guide/index.zgrs.scss

@@ -1,215 +0,0 @@
-#drawer-container {
-  position: absolute;
-  left: 0;
-  bottom: 0px;
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-  pointer-events: none;
-  transition-property: bottom, opacity;
-  transition-duration: 0.5s;
-  z-index: var(--z-index-normal);
-
-  #drawer.playing {
-    bottom: 20px;
-  }
-}
-
-#drawer {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  color: #fff;
-  pointer-events: all;
-  transition-duration: 0.5s;
-  transition-property: height, bottom;
-
-  &.open {
-    height: 150px;
-  }
-}
-
-#drawer.open.fadeOut {
-  pointer-events: none;
-}
-
-.fullWidth .frame-container {
-  width: 100%;
-}
-.frame-container {
-  display: flex;
-  align-items: center;
-  width: calc(100% - 58px);
-  height: 100%;
-  background: rgba(27, 27, 28, 0.6);
-}
-
-.frame {
-  margin: 0 10px;
-  width: calc(100% - 20px);
-}
-
-.frame.noScroll {
-  margin: 17px 10px;
-}
-
-.frame .slidee {
-  display: flex;
-  height: 100%;
-  list-style: none;
-}
-
-.frame .slidee li {
-  position: relative;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-  width: 186px;
-  height: 130px;
-  cursor: pointer;
-}
-
-.frame .slidee li .overlay {
-  margin-top: 5px;
-  color: #fff;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-}
-
-.frame .slidee li .mark360View,
-.frame .slidee li .markInsideView {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 50px;
-  max-height: 25px;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 1);
-  z-index: 100;
-  transform: translate3d(0, 0, 0);
-}
-
-.frame .slidee li img {
-  width: 144px;
-  height: 83px;
-  object-fit: cover;
-  border-radius: 5px;
-  overflow: hidden;
-  border: 3px solid #c39f6b;
-}
-
-.frame .slidee li.thumbImg.active {
-  position: relative;
-  top: -5px;
-
-  > img {
-    width: 100%;
-    height: 100%;
-    border: 0;
-    mask: url('@/assets/images/zgrs/active-menu.png') no-repeat center / contain;
-  }
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('@/assets/images/zgrs/active-menu-2.png') no-repeat center / contain;
-    z-index: 1;
-  }
-  .overlay {
-    display: none;
-  }
-}
-
-#playHead {
-  display: table;
-  position: absolute;
-  bottom: -20px;
-  left: 0;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  transition-property: bottom;
-  transition-duration: 0.5s;
-  background-color: #000;
-
-  &.playing {
-    bottom: 0;
-  }
-}
-
-#status {
-  width: 65px;
-  color: #fff;
-  font-family: OpenSans, 'Helvetica Neue', Arial, sans-serif;
-  font-weight: 700;
-  font-size: 11px;
-  padding-left: 10px;
-}
-
-#progressBar {
-  padding: 0 10px;
-  flex: 1;
-  pointer-events: all;
-
-  .step {
-    height: 6px;
-    float: left;
-
-    &::before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: #575757;
-    }
-    &.active::before {
-      background-color: #00b4ed;
-    }
-  }
-}
-
-@media only screen and (max-width: 487px), (max-height: 487px) {
-  #drawer.open {
-    height: 115px;
-  }
-  .frame .slidee {
-    gap: 0;
-
-    li {
-      width: 135px;
-      height: 94px;
-
-      &.active {
-        top: -1px;
-      }
-      img {
-        width: 112px;
-        height: 64px;
-        border: none;
-      }
-      .overlay {
-        position: absolute;
-        left: 50%;
-        bottom: 15px;
-        padding: 0 2px;
-        width: 112px;
-        height: 20px;
-        line-height: 20px;
-        transform: translateX(-50%);
-        background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
-      }
-    }
-  }
-}

src/index/views/home/components/guide/index.zgrs.tsx

@@ -1,26 +0,0 @@
-import { defineComponent } from 'vue';
-import './index.zgrs.scss';
-
-export default defineComponent({
-  name: 'HomeGuide',
-  render() {
-    return (
-      <div id="drawer-container">
-        <div id="drawer" class="fullWidth">
-          <div class="frame-container">
-            <div id="scrollFrame" class="frame">
-              <ul id="thumb-container" class="slidee"></ul>
-            </div>
-          </div>
-        </div>
-        <div id="playHead">
-          <div id="status">
-            <span class="curIdx">1</span>
-            of <span class="totalSteps"></span>
-          </div>
-          <div id="progressBar"></div>
-        </div>
-      </div>
-    );
-  },
-});