Startsida Utforska Hjälp
Registrera dig Logga in
chenlei
/
vue3-scene-web
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

feat: hotspot page

chenlei 11 månader sedan
förälder
19a2368f73
incheckning
7c04465302
26 ändrade filer med 772 tillägg och 163 borttagningar
Delad Vy Visa Diff Statistik
  1. 1 0
      .gitignore
  2. BIN
      hotspot/assets/images/Volume-off.png
  3. BIN
      hotspot/assets/images/Volume-on.png
  4. BIN
      hotspot/assets/images/icon-image-1@2x.png
  5. BIN
      hotspot/assets/images/icon-image@2x.png
  6. BIN
      hotspot/assets/images/icon-left-min.png
  7. BIN
      hotspot/assets/images/icon-model-1@2x.png
  8. BIN
      hotspot/assets/images/icon-model@2x.png
  9. BIN
      hotspot/assets/images/icon-next@2x-min.png
  10. BIN
      hotspot/assets/images/icon-previous@2x-min.png
  11. BIN
      hotspot/assets/images/icon-right-min.png
  12. BIN
      hotspot/assets/images/icon-video-1@2x.png
  13. BIN
      hotspot/assets/images/icon-video@2x.png
  14. 29 0
      hotspot/hotspot.html
  15. 6 0
      hotspot/main.ts
  16. 6 0
      hotspot/shims-vue.d.ts
  17. 264 0
      hotspot/views/hotspot/index.scss
  18. 266 0
      hotspot/views/hotspot/index.vue
  19. 2 2
      package.json
  20. 139 138
      src/app.scss
  21. 4 1
      src/configure.ts
  22. 21 0
      src/utils/index.ts
  23. 2 1
      src/views/home/components/hot-spot-list/index.scss
  24. 14 14
      src/views/home/components/menu/index.scss
  25. 1 1
      src/views/home/components/popup/index.scss
  26. 17 6
      vue.config.js

+ 1 - 0
.gitignore
Visa fil 

@@ -2,6 +2,7 @@
 
 .temp
 
 node_modules
 
 /build
 
+/dist
 
 
 
 # local env files

BIN
hotspot/assets/images/Volume-off.png
Visa fil


BIN
hotspot/assets/images/Volume-on.png
Visa fil


BIN
hotspot/assets/images/icon-image-1@2x.png
Visa fil


BIN
hotspot/assets/images/icon-image@2x.png
Visa fil


BIN
hotspot/assets/images/icon-left-min.png
Visa fil


BIN
hotspot/assets/images/icon-model-1@2x.png
Visa fil


BIN
hotspot/assets/images/icon-model@2x.png
Visa fil


BIN
hotspot/assets/images/icon-next@2x-min.png
Visa fil


BIN
hotspot/assets/images/icon-previous@2x-min.png
Visa fil


BIN
hotspot/assets/images/icon-right-min.png
Visa fil


BIN
hotspot/assets/images/icon-video-1@2x.png
Visa fil


BIN
hotspot/assets/images/icon-video@2x.png
Visa fil


+ 29 - 0
hotspot/hotspot.html
Visa fil 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"
 
+    />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
+    <link
 
+      rel="icon"
 
+      href="<%= BASE_URL %>favicon/favicon<%= !!process.env.SCENE ? '-' + process.env.SCENE : '' %>.ico"
 
+    />
 
+    <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <meta name="description" content="四维时代" />
 
+    <meta property="og:title" content="四维时代" />
 
+    <meta property="og:description" content="四维时代" />
 
+    <meta property="og:image:type" content="image/jpg" />
 
+  </head>
 
+  <body>
 
+    <noscript>
 
+      <strong
 
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
 
+        JavaScript enabled. Please enable it to continue.</strong
 
+      >
 
+    </noscript>
 
+    <div id="app"></div>
 
+  </body>
 
+</html>

+ 6 - 0
hotspot/main.ts
Visa fil 

@@ -0,0 +1,6 @@
 
+import { createApp } from 'vue';
 
+import App from './views/hotspot/index.vue';
 
+
 
+export const app = createApp(App);
 
+
 
+app.mount('#app');

+ 6 - 0
hotspot/shims-vue.d.ts
Visa fil 

@@ -0,0 +1,6 @@
 
+/* eslint-disable */
 
+declare module '*.vue' {
 
+  import type { DefineComponent } from 'vue';
 
+  const component: DefineComponent<{}, {}, any>;
 
+  export default component;
 
+}

+ 264 - 0
hotspot/views/hotspot/index.scss
Visa fil 

@@ -0,0 +1,264 @@
 
+.hotspot-page {

+  position: fixed;

+  top: 0;

+  left: 0;

+  right: 0;

+  bottom: 0;

+  background: rgba(255, 252, 247, 0.8);

+  z-index: var(--z-index-popper);

+

+  .audioIcon {

+    position: absolute;

+    top: 40px;

+    right: 128px;

+

+    img {

+      width: 52px;

+      height: 52px;

+      cursor: pointer;

+    }

+  }

+  &-info {

+    position: absolute;

+    top: 42px;

+    left: 40px;

+    max-width: 50%;

+

+    h3 {

+      margin-bottom: 14px;

+      color: #c41800;

+      font-size: 24px;

+      line-height: 28px;

+    }

+    p {

+      width: 214px;

+      height: 213px;

+      color: #333333;

+      font-size: 14px;

+      overflow-y: auto;

+

+      &::-webkit-scrollbar {

+        width: 6px;

+      }

+      &::-webkit-scrollbar-thumb {

+        border-radius: 10px;

+        background-color: #c41800;

+      }

+      &::-webkit-scrollbar-track {

+        border-radius: 10px;

+      }

+    }

+  }

+

+  &-main {

+    position: absolute;

+    top: 50%;

+    left: 50%;

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    max-width: 1100px;

+    width: calc(100vw - 548px);

+    transform: translate(-50%, -50%);

+  }

+  &-swiper {

+    &__left,

+    &__right {

+      position: absolute;

+      top: 50%;

+      width: 50px;

+      height: 50px;

+      cursor: pointer;

+      transform: translateY(-50%);

+      z-index: 1;

+    }

+    &__left {

+      left: -70px;

+      background: url('@hotspot/assets/images/icon-previous@2x-min.png') no-repeat center / contain;

+    }

+    &__right {

+      right: -70px;

+      background: url('@hotspot/assets/images/icon-next@2x-min.png') no-repeat center / contain;

+    }

+  }

+  &-model {

+    width: 100%;

+    height: 600px;

+

+    iframe {

+      width: 100%;

+      height: 100%;

+    }

+  }

+  &-video {

+    width: 100%;

+    height: 561px;

+    object-fit: cover;

+  }

+  &-img {

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    height: inherit;

+

+    &-swiper {

+      height: 567px;

+    }

+    img {

+      width: 100%;

+      height: 100%;

+      object-fit: contain;

+    }

+  }

+

+  &-nav {

+    position: absolute;

+    left: 50%;

+    bottom: 104px;

+    display: flex;

+    align-items: center;

+    gap: 30px;

+    transform: translateX(-50%);

+

+    &__item {

+      display: flex;

+      align-items: center;

+      justify-content: center;

+      gap: 9px;

+      width: 120px;

+      height: 36px;

+      border-radius: 18px;

+      color: #666666;

+      background: #d0cec6;

+      border: 1px solid #666666;

+      box-sizing: border-box;

+      cursor: pointer;

+

+      &.active {

+        color: #ddaf35;

+        border-width: 0;

+        background: linear-gradient(#d67729, #c41800);

+      }

+      .model-icon {

+        width: 19px;

+        height: 22px;

+      }

+      .video-icon {

+        width: 21px;

+        height: 18px;

+      }

+      .img-icon {

+        width: 21px;

+        height: 18px;

+      }

+    }

+  }

+}

+

+@media only screen and (max-width: 600px) {

+  .hotspot-page {

+    .audioIcon {

+      top: 20px;

+      right: 60px;

+

+      img {

+        width: 35px;

+        height: 35px;

+      }

+    }

+  }

+  .hotspot-page-info {

+    top: unset;

+    left: 0;

+    right: 0;

+    bottom: 0;

+    display: flex;

+    flex-direction: column;

+    padding: 20px 25px;

+    max-width: 100%;

+    height: calc(100vh - 50vh - 95px);

+    box-sizing: border-box;

+    border-top-left-radius: 17px;

+    border-top-right-radius: 17px;

+    background: linear-gradient(181deg, #d67729 0%, #c41800 100%);

+

+    h3 {

+      margin-bottom: 7px;

+      max-width: 100%;

+      width: 100%;

+      color: white;

+      font-size: 18px;

+      font-weight: bold;

+      display: -webkit-box;

+      overflow: hidden;

+      text-overflow: ellipsis;

+      -webkit-line-clamp: 1;

+      -webkit-box-orient: vertical;

+      word-break: break-all;

+      word-wrap: break-word;

+    }

+    p {

+      flex: 1;

+      padding-right: 2px;

+      width: 100%;

+      height: 0;

+      color: white;

+      font-size: 15px;

+

+      &::-webkit-scrollbar {

+        width: 2px;

+      }

+      &::-webkit-scrollbar-thumb {

+        background-color: #ddaf35;

+      }

+    }

+  }

+  .hotspot-page-nav {

+    bottom: 194px;

+    gap: 13px;

+

+    &__item {

+      width: 70px;

+      height: 20px;

+      font-size: 10px;

+      gap: 4px;

+

+      .video-icon,

+      .img-icon {

+        width: 12px;

+        height: 10px;

+      }

+      .model-icon {

+        width: 10px;

+        height: 11px;

+      }

+    }

+  }

+  .hotspot-page-swiper__left,

+  .hotspot-page-swiper__right {

+    width: 19px;

+    height: 38px;

+  }

+  .hotspot-page-swiper__left {

+    left: 0;

+    background-image: url('@hotspot/assets/images/icon-left-min.png');

+  }

+  .hotspot-page-swiper__right {

+    right: 0;

+    background-image: url('@hotspot/assets/images/icon-right-min.png');

+  }

+  .hotspot-page-main {

+    top: 75px;

+    width: 100%;

+    transform: translateX(-50%);

+  }

+

+  .hotspot-page-video {

+    width: 300px;

+    height: 168px;

+  }

+  .hotspot-page-img-swiper,

+  .hotspot-page-model {

+    height: 50vh;

+  }

+}

+ 266 - 0
hotspot/views/hotspot/index.vue
Visa fil 

@@ -0,0 +1,266 @@
 
+<template>

+  <div class="hotspot-page">

+    <div class="hotspot-page-info">

+      <h3>{{ myTitle }}</h3>

+      <p>{{ myTxt }}</p>

+    </div>

+

+    <!-- 音频图标 -->

+    <div

+      v-if="audio && !isOneAduio"

+      class="audioIcon"

+      :title="audioSta ? '关闭音频' : '打开音频'"

+      @click="audioSta = !audioSta"

+    >

+      <img :src="audioSta ? VolumeOff : VolumeOn" alt="" />

+    </div>

+

+    <div class="hotspot-page-main">

+      <!-- 音频播放器 -->

+      <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>

+

+      <!-- 视频页面 -->

+      <Swiper

+        v-if="myType === 'video'"

+        class="hotspot-page-swiper hotspot-page-video"

+        @swiper="initSwiper"

+        @slideChange="handleChange"

+      >

+        <SwiperSlide 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

+          />

+        </SwiperSlide>

+      </Swiper>

+

+      <!-- 图片页面 -->

+      <Swiper

+        v-if="myType === 'img'"

+        class="hotspot-page-swiper hotspot-page-img-swiper"

+        @swiper="initSwiper"

+        @slideChange="handleChange"

+      >

+        <SwiperSlide v-for="item in curList" :key="item">

+          <div class="hotspot-page-img">

+            <img :src="item" alt="" />

+          </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>

+    </div>

+

+    <!-- 底部的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>

+</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';

+

+          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() {

+        this.swiper?.slidePrev();

+      },

+      handleNext() {

+        this.swiper?.slideNext();

+      },

+    },

+  };

+</script>

+

+<style lang="scss">

+  @import './index.scss';

+</style>

+ 2 - 2
package.json
Visa fil 

@@ -3,8 +3,8 @@
 
   "version": "0.1.0",
 
   "private": true,
 
   "scripts": {
 
-    "serve": "cross-env TITLE=大理洱海科普馆 vue-cli-service serve",
 
-    "build:test": "cross-env TITLE=大理洱海科普馆 vue-cli-service build",
 
+    "serve": "cross-env TITLE=大理洱海科普馆 HOT_DOMAIN=/hotspot.html vue-cli-service serve",
 
+    "build:test": "cross-env TITLE=大理洱海科普馆 HOT_DOMAIN=/hotspot.html vue-cli-service build",
 
     "push:test": "cross-env node ./scripts/publish.js",
 
     "lint": "vue-cli-service lint",
 
     "prepare": "husky install"

+ 139 - 138
src/app.scss
Visa fil 

@@ -1,138 +1,139 @@
 
-:root {
 
-  --z-index-normal: 1;
 
-  --z-index-top: 1000;
 
-  --z-index-popper: 2000;
 
-}
 
-
 
-body,
 
-ol,
 
-ul,
 
-h1,
 
-h2,
 
-h3,
 
-h4,
 
-h5,
 
-h6,
 
-p,
 
-th,
 
-td,
 
-dl,
 
-dd,
 
-form,
 
-fieldset,
 
-legend,
 
-input,
 
-textarea,
 
-select {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-* {
 
-  box-sizing: border-box;
 
-  user-select: none;
 
-}
 
-html,
 
-body,
 
-#app {
 
-  width: 100%;
 
-  height: 100%;
 
-  overflow: hidden;
 
-}
 
-body {
 
-  margin: 0px;
 
-  font-size: 14px;
 
-  color: rgba(255, 255, 255, 0.9);
 
-  font-family: OpenSans, sans-serif;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-a {
 
-  color: #fff;
 
-  cursor: pointer;
 
-  text-decoration: none;
 
-}
 
-em {
 
-  font-style: normal;
 
-}
 
-li {
 
-  list-style: none;
 
-}
 
-img {
 
-  border: 0;
 
-  vertical-align: middle;
 
-}
 
-table {
 
-  border-collapse: collapse;
 
-  border-spacing: 0;
 
-}
 
-p {
 
-  word-wrap: break-word;
 
-}
 
-iframe {
 
-  border: none;
 
-}
 
-
 
-@font-face {
 
-  font-family: OpenSans;
 
-  src: url('/public/fonts/open-sans/OpenSansRegular.woff2') format('woff2');
 
-  font-weight: 400;
 
-}
 
-
 
-@font-face {
 
-  font-family: OpenSans;
 
-  src: url('/public/fonts/open-sans-light/OpenSansLight.eot');
 
-  src: url('/public/fonts/open-sans-light/OpenSansLight.eot') format('embedded-opentype'),
 
-    url('/public/fonts/open-sans-light/OpenSansLight.woff2') format('woff2'),
 
-    url('/public/fonts/open-sans-light/OpenSansLight.woff') format('woff'),
 
-    url('/public/fonts/open-sans-light/OpenSansLight.ttf') format('truetype'),
 
-    url('/public/fonts/open-sans-light/OpenSansLight.svg#OpenSansLight') format('svg');
 
-  font-weight: 100;
 
-}
 
-
 
-@font-face {
 
-  font-family: OpenSans;
 
-  src: url('/public/fonts/open-sans-semibold/OpenSansSemibold.eot');
 
-  src: url('/public/fonts/open-sans-semibold/OpenSansSemibold.eot') format('embedded-opentype'),
 
-    url('/public/fonts/open-sans-semibold/OpenSansSemibold.woff2') format('woff2'),
 
-    url('/public/fonts/open-sans-semibold/OpenSansSemibold.woff') format('woff'),
 
-    url('/public/fonts/open-sans-semibold/OpenSansSemibold.ttf') format('truetype'),
 
-    url('/public/fonts/open-sans-semibold/OpenSansSemibold.svg#OpenSansSemibold') format('svg');
 
-  font-weight: 700;
 
-}
 
-
 
-.limit-line {
 
-  display: -webkit-box;
 
-  overflow: hidden;
 
-  text-overflow: ellipsis;
 
-  -webkit-line-clamp: 1;
 
-  -webkit-box-orient: vertical;
 
-  word-break: break-all;
 
-  word-wrap: break-word;
 
-}
 
-
 
-.line-2 {
 
-  -webkit-line-clamp: 2;
 
-}
 
-
 
-.line-3 {
 
-  -webkit-line-clamp: 3;
 
-}
 
-
 
-.hidden {
 
-  display: none !important;
 
-  visibility: hidden !important;
 
-}
 
-
 
-.darkGlass {
 
-  background-color: rgba(0, 0, 0, 0.5);
 
-}
 
-
 
-.message-outer {
 
-  position: absolute;
 
-  display: table;
 
-  height: 100%;
 
-  width: 100%;
 
-
 
-  * {
 
-    transition: all 0.3s;
 
-  }
 
-}
 
+:root {

+  --z-index-normal: 1;

+  --z-index-top: 1000;

+  --z-index-popper: 2000;

+  --z-hot-popper: 2001;

+}

+

+body,

+ol,

+ul,

+h1,

+h2,

+h3,

+h4,

+h5,

+h6,

+p,

+th,

+td,

+dl,

+dd,

+form,

+fieldset,

+legend,

+input,

+textarea,

+select {

+  margin: 0;

+  padding: 0;

+}

+* {

+  box-sizing: border-box;

+  user-select: none;

+}

+html,

+body,

+#app {

+  width: 100%;

+  height: 100%;

+  overflow: hidden;

+}

+body {

+  margin: 0px;

+  font-size: 14px;

+  color: rgba(255, 255, 255, 0.9);

+  font-family: OpenSans, sans-serif;

+  -webkit-tap-highlight-color: transparent;

+}

+a {

+  color: #fff;

+  cursor: pointer;

+  text-decoration: none;

+}

+em {

+  font-style: normal;

+}

+li {

+  list-style: none;

+}

+img {

+  border: 0;

+  vertical-align: middle;

+}

+table {

+  border-collapse: collapse;

+  border-spacing: 0;

+}

+p {

+  word-wrap: break-word;

+}

+iframe {

+  border: none;

+}

+

+@font-face {

+  font-family: OpenSans;

+  src: url('/public/fonts/open-sans/OpenSansRegular.woff2') format('woff2');

+  font-weight: 400;

+}

+

+@font-face {

+  font-family: OpenSans;

+  src: url('/public/fonts/open-sans-light/OpenSansLight.eot');

+  src: url('/public/fonts/open-sans-light/OpenSansLight.eot') format('embedded-opentype'),

+    url('/public/fonts/open-sans-light/OpenSansLight.woff2') format('woff2'),

+    url('/public/fonts/open-sans-light/OpenSansLight.woff') format('woff'),

+    url('/public/fonts/open-sans-light/OpenSansLight.ttf') format('truetype'),

+    url('/public/fonts/open-sans-light/OpenSansLight.svg#OpenSansLight') format('svg');

+  font-weight: 100;

+}

+

+@font-face {

+  font-family: OpenSans;

+  src: url('/public/fonts/open-sans-semibold/OpenSansSemibold.eot');

+  src: url('/public/fonts/open-sans-semibold/OpenSansSemibold.eot') format('embedded-opentype'),

+    url('/public/fonts/open-sans-semibold/OpenSansSemibold.woff2') format('woff2'),

+    url('/public/fonts/open-sans-semibold/OpenSansSemibold.woff') format('woff'),

+    url('/public/fonts/open-sans-semibold/OpenSansSemibold.ttf') format('truetype'),

+    url('/public/fonts/open-sans-semibold/OpenSansSemibold.svg#OpenSansSemibold') format('svg');

+  font-weight: 700;

+}

+

+.limit-line {

+  display: -webkit-box;

+  overflow: hidden;

+  text-overflow: ellipsis;

+  -webkit-line-clamp: 1;

+  -webkit-box-orient: vertical;

+  word-break: break-all;

+  word-wrap: break-word;

+}

+

+.line-2 {

+  -webkit-line-clamp: 2;

+}

+

+.line-3 {

+  -webkit-line-clamp: 3;

+}

+

+.hidden {

+  display: none !important;

+  visibility: hidden !important;

+}

+

+.darkGlass {

+  background-color: rgba(0, 0, 0, 0.5);

+}

+

+.message-outer {

+  position: absolute;

+  display: table;

+  height: 100%;

+  width: 100%;

+

+  * {

+    transition: all 0.3s;

+  }

+}

+ 4 - 1
src/configure.ts
Visa fil 

@@ -12,6 +12,9 @@ if (performance) {
 
 
 window.getHotIframePath = (src: string) => {
 
   return process.env.NODE_ENV === 'development' && process.env.HOT_DOMAIN
 
-    ? src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', process.env.HOT_DOMAIN)
 
+    ? src.replace(
 
+        'https://www.4dmodel.com/SuperTwo/hot_online1/index.html#/',
 
+        process.env.HOT_DOMAIN
 
+      )
 
     : src;
 
 };

+ 21 - 0
src/utils/index.ts
Visa fil 

@@ -0,0 +1,21 @@
 
+export function parseUrlParams(url: string): Record<string, string> {

+  const params: Record<string, string> = {};

+

+  const queryString = url.split('?')[1];

+

+  if (!queryString) {

+    return params; // 没有查询参数，返回空对象

+  }

+

+  const pairs = queryString.split('&');

+

+  for (const pair of pairs) {

+    const [key, value] = pair.split('=');

+

+    if (key) {

+      params[decodeURIComponent(key)] = value ? decodeURIComponent(value) : '';

+    }

+  }

+

+  return params;

+}

+ 2 - 1
src/views/home/components/hot-spot-list/index.scss
Visa fil 

@@ -7,7 +7,7 @@
 
   width: 356px;
 
   height: 100%;
 
   transition: right 0.4s, width 0.5s;
 
-  z-index: var(--el-index-popper);
 
+  z-index: var(--z-index-popper);
 
 }
 
 
 .hotListActive {
 
@@ -47,6 +47,7 @@
 
   width: 26px;
 
   right: 64px;
 
   bottom: 64px;
 
+  cursor: pointer;
 
 }
 
 
 #hotListContent ul {

+ 14 - 14
src/views/home/components/menu/index.scss
Visa fil 

@@ -20,20 +20,6 @@
 
   line-height: 1;
 
   transition: all 0.5s;
 
 
-  &.open {
 
-    bottom: 140px;
 
-
 
-    &.noScroll {
 
-      bottom: 117px;
 
-
 
-      &.playing {
 
-        bottom: 135px;
 
-      }
 
-    }
 
-    &.playing {
 
-      bottom: 150px;
 
-    }
 
-  }
 
   &.left {
 
     background: rgba(0, 0, 0, 0.2);
 
     border-radius: 10px;
 
@@ -56,6 +42,20 @@
 
       border-radius: 10px;
 
     }
 
   }
 
+  &.open {
 
+    bottom: 140px;
 
+
 
+    &.noScroll {
 
+      bottom: 117px;
 
+
 
+      &.playing {
 
+        bottom: 135px;
 
+      }
 
+    }
 
+    &.playing {
 
+      bottom: 150px;
 
+    }
 
+  }
 
 }
 
 
 .viewContainer {

+ 1 - 1
src/views/home/components/popup/index.scss
Visa fil 

@@ -6,7 +6,7 @@
 
   height: 100%;
 
   text-align: center;
 
   background: rgba(0, 0, 0, 0.6);
 
-  z-index: var(--z-index-popper);
 
+  z-index: var(--z-hot-popper);
 
 
   &.wait {
 
     opacity: 0.1;

+ 17 - 6
vue.config.js
Visa fil 

@@ -21,7 +21,22 @@ const ENV = getEnv();
 
 module.exports = defineConfig({
 
   transpileDependencies: true,
 
   lintOnSave: false,
 
-  indexPath: `${SCENE || 'index'}.html`,
 
+
 
+  pages: {
 
+    scene: {
 
+      template: 'public/index.html',
 
+      entry: 'src/main.ts',
 
+      filename: `${SCENE || 'index'}.html`,
 
+      title: process.env.TITLE,
 
+    },
 
+    hotspot: {
 
+      template: 'hotspot/hotspot.html',
 
+      entry: 'hotspot/main.ts',
 
+      filename: `${SCENE ? SCENE + '-hotspot' : 'hotspot'}.html`,
 
+      title: process.env.TITLE,
 
+    },
 
+  },
 
+
 
   outputDir: IS_PRODUCTION && !!SCENE ? `build/${SCENE}` : 'build',
 
   // 根据场景隔离
 
   assetsDir: path.posix.join(config.assetsDir, SCENE || ''),
 
@@ -53,6 +68,7 @@ module.exports = defineConfig({
 
       symlinks: false,
 
       alias: {
 
         '@': path.join(__dirname, 'src'),
 
+        '@hotspot': path.join(__dirname, 'hotspot'),
 
       },
 
     },
 
     plugins: [
 
@@ -132,11 +148,6 @@ module.exports = defineConfig({
 
         },
 
       });
 
     }
 
-
 
-    webpackConfig.plugin('html').tap((args) => {
 
-      args[0].title = process.env.TITLE;
 
-      return args;
 
-    });
 
   },
 
 });