style: --

components.d.ts

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

public/js/main_2020_show.js

@@ -8189,8 +8189,8 @@ window.Modernizr = function(n, e, t) {
             }, e)
             //csz 用户引导界面
             var helpData = {
-                "pc":["images/pc_step1.png","images/pc_step2.png","images/pc_step3.png"],
-                "mobile":["images/phone_step1.png","images/phone_step2.png","images/phone_step3.png"]
+                "pc":["./images/pc_step1.png","./images/pc_step2.png","./images/pc_step3.png"],
+                "mobile":["./images/phone_step1.png","./images/phone_step2.png","./images/phone_step3.png"]
             }
             var navIcon = $(".nav-icon .icon");
             if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) navIcon.attr("src",helpData.mobile[0]);

src/auto-imports.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-
-}

src/components.d.ts

@@ -1,13 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-  }
-}

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

@@ -33,6 +33,8 @@
             controls
             :src="item.url"
             autoplay
+            disablePictureInPicture
+            controlsList="nodownload noplaybackrate"
           />
         </template>
       </div>

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

@@ -0,0 +1,209 @@
+.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: 24px;
+    font-family: 'Source Han Sans CN-Bold';
+  }
+  &-info {
+    div {
+      font-size: 20px;
+      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;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 0;
+    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

@@ -0,0 +1,281 @@
+<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/app.scss

@@ -43,7 +43,7 @@ body {
   margin: 0px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.9);
-  font-family: OpenSans, sans-serif;
+  font-family: 'Source Han Sans CN-Medium';
   -webkit-tap-highlight-color: transparent;
 }
 a {
@@ -73,34 +73,16 @@ iframe {
 }
 
 @font-face {
-  font-family: OpenSans;
-  src: url("/fonts/open-sans/OpenSansRegular.woff2") format("woff2");
-  font-weight: 400;
+  font-family: 'Source Han Sans CN-Regular';
+  src: url('/fonts/SourceHanSansCN-Regular.otf');
 }
-
 @font-face {
-  font-family: OpenSans;
-  src: url("/fonts/open-sans-light/OpenSansLight.eot");
-  src: url("/fonts/open-sans-light/OpenSansLight.eot")
-      format("embedded-opentype"),
-    url("/fonts/open-sans-light/OpenSansLight.woff2") format("woff2"),
-    url("/fonts/open-sans-light/OpenSansLight.woff") format("woff"),
-    url("/fonts/open-sans-light/OpenSansLight.ttf") format("truetype"),
-    url("/fonts/open-sans-light/OpenSansLight.svg#OpenSansLight") format("svg");
-  font-weight: 100;
+  font-family: 'Source Han Sans CN-Bold';
+  src: url('/fonts/SourceHanSansCN-Bold.otf');
 }
-
 @font-face {
-  font-family: OpenSans;
-  src: url("/fonts/open-sans-semibold/OpenSansSemibold.eot");
-  src: url("/fonts/open-sans-semibold/OpenSansSemibold.eot")
-      format("embedded-opentype"),
-    url("/fonts/open-sans-semibold/OpenSansSemibold.woff2") format("woff2"),
-    url("/fonts/open-sans-semibold/OpenSansSemibold.woff") format("woff"),
-    url("/fonts/open-sans-semibold/OpenSansSemibold.ttf") format("truetype"),
-    url("/fonts/open-sans-semibold/OpenSansSemibold.svg#OpenSansSemibold")
-      format("svg");
-  font-weight: 700;
+  font-family: 'Source Han Sans CN-Medium';
+  src: url('/fonts/SourceHanSansCN-Medium.otf');
 }
 
 .limit-line {

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

@@ -0,0 +1,196 @@
+#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

@@ -0,0 +1,26 @@
+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/hot-spot-list/index.ylct.scss

@@ -0,0 +1,147 @@
+#hotListWrap {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: -600px;
+  width: 260px;
+  max-width: 600px;
+  height: 100%;
+  background: url('@/assets/images/ylct/hotlist_bg-min.png') no-repeat top / cover;
+  transition: right 0.4s, width 0.5s;
+  z-index: var(--z-index-popper);
+}
+
+.hotListActive {
+  right: 0 !important;
+}
+
+#hotListTitle {
+  padding: 50px 0 30px;
+  text-align: center;
+  font-size: 24px;
+  font-family: 'Source Han Sans CN-Bold';
+}
+
+#hotListContent {
+  width: 100%;
+  /* opacity: 0.65; */
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+#hotListBottom {
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#hotListClose {
+  right: 32px;
+  bottom: 32px;
+  cursor: pointer;
+}
+
+#hotListContent ul {
+  font-size: 20px;
+}
+
+#hotListContent ul li {
+  height: 60px;
+  line-height: 60px;
+  text-align: right;
+  color: white;
+  padding: 0 25px;
+  text-align: center;
+  transition: color 0.3s, background 0.6s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#hotListContent ul li:hover {
+  background: #d4975c;
+}
+
+#hotListContent ul li.active {
+  color: #990f0e;
+  background: #d4975c;
+}
+
+#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: -60vh;
+    right: 0;
+    width: 100%;
+    height: 60vh;
+    transition: top 0.4s, width 0.5s;
+    background: url('@/assets/images/ylct/hotlist_bg-min.png') no-repeat center bottom / cover;
+  }
+  .hotListActive {
+    top: 0 !important;
+  }
+
+  #hotListTitle {
+    padding: 20px 0;
+  }
+  #hotListContent {
+    /* background: rgba(34, 36, 37,0.9); */
+    background: none;
+  }
+  #hotListText {
+    font-size: 18px;
+    color: #d4975c;
+  }
+  #hotListIcon {
+    width: 24px;
+    margin-left: 26px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(165%, -50%);
+  }
+  #hotListContent ul li {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+    color: #d4975c;
+  }
+  #hotListContent ul {
+    padding: 0 30px;
+    font-size: 16px;
+  }
+  #hotListBottom {
+    display: none;
+  }
+  #hotListContent ul li.active {
+    color: white;
+    background: none;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { defineComponent } from 'vue';
+import CloseIcon from '@/assets/images/ylct/close-min.png';
+import './index.ylct.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={CloseIcon} alt="" />
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -1,9 +1,9 @@
 .pinBottom-container {
   position: absolute;
-  bottom: 25px;
+  bottom: 10px;
   width: 100%;
   transition: all 0.5s;
-  z-index: var(--z-index-top);
+  z-index: 200;
 
   .pinBottom.playing {
     bottom: 20px;
@@ -20,6 +20,15 @@
   line-height: 1;
   transition: all 0.5s;
 
+  a,
+  span {
+    color: #efdfd3;
+    font-size: 18px;
+  }
+  span {
+    display: block;
+    text-align: center;
+  }
   &.left {
     left: 0;
   }
@@ -27,10 +36,10 @@
     right: 30px;
   }
   &.open {
-    bottom: 135px;
+    bottom: 155px;
 
     &.playing {
-      bottom: 155px;
+      bottom: 175px;
     }
   }
 }
@@ -40,84 +49,119 @@
 #gui-modes-map {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 40px;
   height: 100%;
 }
 
 .viewContainer {
-  padding-left: 30px;
+  padding-left: 25px;
 }
 
 #play,
 #pause {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 
   img {
-    width: 50px;
-    height: 50px;
+    width: 70px;
+    height: 70px;
   }
 }
 
 #pullTab,
 .good-btn,
 #hotList,
-.home-btn,
 #gui-modes-dollhouse,
 #gui-modes-floorplan,
+#gui-modes-inside,
+#gui-fullscreen,
+#gui-fullscreen-exit,
 #volume,
+#viewer,
 #sharing {
-  display: block;
-  width: 50px;
-  height: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+
+  .icon-slot {
+    width: 70px;
+    height: 70px;
+  }
+  &.active,
+  &.opened {
+    span {
+      color: #d4975c;
+    }
+  }
 }
 
-.home-btn {
-  background: url('@/assets/images/syjy/icon-home-min.png') no-repeat center / contain;
+#viewer {
+  .icon-slot {
+    background: url('@/assets/images/ylct/9-min.png') no-repeat center / contain;
+  }
 }
 
-#pullTab {
-  background: url('@/assets/images/syjy/icon-daolan-min.png') no-repeat center / contain;
+#gui-fullscreen-exit {
+  .icon-slot {
+    background: url('@/assets/images/ylct/14-min.png') no-repeat center / contain;
+  }
+}
 
-  &.opened {
-    background-image: url('@/assets/images/syjy/icon-daolan-1-min.png');
+#gui-fullscreen {
+  .icon-slot {
+    background: url('@/assets/images/ylct/10-min.png') no-repeat center / contain;
   }
 }
 
-#hotList {
-  background: url('@/assets/images/syjy/icon-redian-min.png') no-repeat center / contain;
+#gui-modes-inside {
+  .icon-slot {
+    background: url('@/assets/images/ylct/4-min.png') no-repeat center / contain;
+  }
+}
 
-  &.active {
-    background-image: url('@/assets/images/syjy/icon-redian-1-min.png');
+#pullTab {
+  .icon-slot {
+    background: url('@/assets/images/ylct/2-min.png') no-repeat center / contain;
   }
 }
 
-#gui-modes-dollhouse {
-  background: url('@/assets/images/syjy/icon-dingbu-min.png') no-repeat center / contain;
+#hotList {
+  .icon-slot {
+    background: url('@/assets/images/ylct/3-min.png') no-repeat center / contain;
+  }
+}
 
-  &.active {
-    background-image: url('@/assets/images/syjy/icon-dingbu-1-min.png');
+#gui-modes-dollhouse {
+  .icon-slot {
+    background: url('@/assets/images/ylct/5-min.png') no-repeat center / contain;
   }
 }
 
 #gui-modes-floorplan {
-  background: url('@/assets/images/syjy/icon-mini-min.png') no-repeat center / contain;
-
-  &.active {
-    background-image: url('@/assets/images/syjy/icon-mini-1-min.png');
+  .icon-slot {
+    background: url('@/assets/images/ylct/6-min.png') no-repeat center / contain;
   }
 }
 
 #volume {
-  background: url('@/assets/images/syjy/icon-shengyin-min.png') no-repeat center / contain;
+  .icon-slot {
+    background: url('@/assets/images/ylct/7-min.png') no-repeat center / contain;
+  }
 
   &.active {
-    background-image: url('@/assets/images/syjy/icon-shengyin-1-min.png');
+    background-image: url('@/assets/images/ylct/13-min.png');
   }
 }
 
 #sharing {
-  background: url('@/assets/images/syjy/icon-share-min.png') no-repeat center / contain;
+  .icon-slot {
+    background: url('@/assets/images/ylct/8-min.png') no-repeat center / contain;
+  }
 }
 
 .terms2 {
@@ -125,64 +169,63 @@
 }
 
 @media only screen and (max-width: 600px) {
+  $gap: 15px;
+
   .pinBottom {
     &-container {
-      bottom: 37px;
+      bottom: 15px;
     }
     &.open {
-      bottom: 80px;
+      bottom: 100px;
 
       &.noScroll.playing {
-        bottom: 100px;
-      }
-    }
-    &.open.right {
-      bottom: 152px;
-
-      &.noScroll.playing {
-        bottom: 172px;
+        bottom: 120px;
       }
     }
     &.left {
       .viewContainer {
         flex-direction: column;
         padding-left: 10px;
-        gap: 7px;
-        width: 47px;
+        gap: $gap;
       }
     }
     &.right {
-      position: fixed;
-      right: 8px;
-      top: 120px;
-      bottom: unset;
+      right: 10px;
 
-      &.playing {
-        bottom: 50px;
-      }
       .rightViewContainer {
         flex-direction: column;
-        gap: 7px;
+        gap: $gap;
 
         #sharing,
         #volume,
-        .home-btn,
+        #viewer,
         .good-btn {
-          width: 37px;
-          height: 37px;
+          .icon-slot {
+            width: 40px;
+            height: 40px;
+          }
+          span {
+            font-size: 12px;
+          }
         }
       }
     }
   }
-  #play img,
-  #pause img,
-  #gui-modes-map > div,
+  #play,
+  #pause,
+  #gui-modes-map,
   .hotList {
-    width: 37px;
-    height: 37px;
+    .icon-slot,
+    img {
+      width: 40px;
+      height: 40px;
+    }
+    span {
+      font-size: 12px;
+    }
   }
   #gui-modes-map {
     flex-direction: column;
-    gap: 7px;
+    gap: $gap;
   }
 }

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

@@ -8,14 +8,12 @@
           </a>
         </div>
         <div id="play" class="ui-icon" data-original-title="播放">
-          <a>
-            <img :src="PauseIcon" width="24" height="24" title="播放" />
-          </a>
+          <img :src="PauseIcon" width="24" height="24" title="播放" />
+          <span>开始漫游</span>
         </div>
         <div id="pause" class="ui-icon" style="display: none">
-          <a>
-            <img title="暂停" :src="PlayIcon" width="24" height="24" />
-          </a>
+          <img title="暂停" :src="PlayIcon" width="24" height="24" />
+          <span>暂停漫游</span>
         </div>
         <div id="next" class="next desktop-only ui-icon wide" style="display: none">
           <a>
@@ -23,16 +21,27 @@
           </a>
         </div>
         <div id="gui-modes-map" class="ui-icon double active">
-          <div data-original-title="导览" id="pullTab" title="导览" />
+          <div data-original-title="导览" id="pullTab" title="导览">
+            <div class="icon-slot" />
+            <span>导览列表</span>
+          </div>
 
-          <div id="hotList" title="热点列表" data-original-title="热点列表" style="display: none" />
-          <div
-            data-original-title="迷你模型"
-            id="gui-modes-dollhouse"
-            title="迷你模型"
-            class=""
-          ></div>
-          <div data-original-title="俯视图" id="gui-modes-floorplan" title="俯视图"></div>
+          <div id="hotList" title="热点列表" data-original-title="热点列表" style="display: none">
+            <div class="icon-slot" />
+            <span>热点列表</span>
+          </div>
+          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
+            <div class="icon-slot" />
+            <span>全景漫游</span>
+          </div>
+          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="迷你模型" class="">
+            <div class="icon-slot" />
+            <span>迷你模型</span>
+          </div>
+          <div data-original-title="俯视图" id="gui-modes-floorplan" title="俯视图">
+            <div class="icon-slot" />
+            <span>顶部视图</span>
+          </div>
           <div data-original-title="VR" id="vr" title="" style="display: none"></div>
           <div
             data-original-title="消除外壳"
@@ -47,23 +56,36 @@
     </div>
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <div class="ui-icon wide home-btn" title="首页" @click="goToHome"></div>
-        <div id="sharing" class="ui-icon wide" title="分享" @click="shareVisible = true"></div>
-        <div id="volume" class="ui-icon wide" style="display: none"></div>
+        <div id="sharing" class="ui-icon wide" title="分享" @click="shareVisible = true">
+          <div class="icon-slot" />
+          <span>分享</span>
+        </div>
+        <div id="volume" class="ui-icon wide" style="display: none">
+          <div class="icon-slot" />
+          <span>音乐</span>
+        </div>
         <div id="vr" class="ui-icon wide hidden" style="display: none">
           <a>
             <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
           </a>
         </div>
+        <el-popover placement="top" :content="`${visitCount}`" effect="dark" trigger="click">
+          <template #reference>
+            <div id="viewer" class="ui-icon wide" title="浏览量">
+              <div class="icon-slot" />
+              <span>浏览量</span>
+            </div>
+          </template>
+        </el-popover>
         <div
           id="gui-fullscreen"
           class="ui-icon wide"
           data-placement="top"
           title="{[{ VIEW_FULLSCREEN }]}"
-          style="display: none"
         >
           <a>
-            <i class="icon icon-fullscreen"></i>
+            <div class="icon-slot" />
+            <span>全屏</span>
           </a>
         </div>
         <div
@@ -74,7 +96,8 @@
           style="display: none"
         >
           <a>
-            <i class="icon icon-fullscreen-exit"></i>
+            <div class="icon-slot" />
+            <span>退出全屏</span>
           </a>
         </div>
         <div class="pull-right terms terms2"></div>
@@ -87,14 +110,15 @@
 
 <script setup lang="ts">
   import { onMounted, onUnmounted, ref } from 'vue';
-  import PauseIcon from '@/assets/images/syjy/icon-manyou-1-min.png';
-  import PlayIcon from '@/assets/images/syjy/icon-manyou-min.png';
+  import PauseIcon from '@/assets/images/ylct/1-min.png';
+  import PlayIcon from '@/assets/images/ylct/11-min.png';
   import { homeApi } from '@/api';
   import SharePopup from '../share-popup/index.vue';
 
   let helperVisible = false;
   const starSum = ref(0);
   const shareVisible = ref(false);
+  const visitCount = localStorage.getItem('visitCount') ?? 0;
 
   const closeHelper = () => {
     window.$('#interaction-modal').removeClass('fadeIn');
@@ -122,10 +146,6 @@
     starSum.value = data.starSum;
   };
 
-  const goToHome = () => {
-    location.href = 'https://houseoss.4dkankan.com/project/syjy/mobile/index.html';
-  };
-
   onMounted(() => {
     getDetail();
 
@@ -142,5 +162,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @use './index.syjy.scss';
+  @use './index.ylct.scss';
 </style>

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

@@ -63,7 +63,7 @@ export default defineComponent({
           <div id="interaction-modal">
             <div id="interaction-modal-inner">
               <div class="nav-icon">
-                <img src="images/pc_step1.png" class="icon" title="导览" data-page="1" />
+                <img src="./images/pc_step1.png" class="icon" title="导览" data-page="1" />
 
                 <div class="nav-help-button">
                   <div class="next-button nav-help-page" data-id="plus"></div>

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

@@ -0,0 +1,46 @@
+#popup {
+  display: none;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: var(--z-hot-popper);
+
+  &.wait {
+    opacity: 0.1;
+  }
+}
+#id1 {
+  width: 100%;
+  height: 100%;
+}
+.popup-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 880px;
+  height: 670px;
+  background: url('@/assets/images/ylct/hot_bg-min.png') no-repeat center / contain;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+#closepop {
+  position: absolute;
+  left: 50%;
+  bottom: -52px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  text-indent: -999em;
+  background-size: 100% 100%;
+  transform: translateX(-50%);
+  background: url('@/assets/images/ylct/close-min.png') no-repeat;
+}
+
+@media only screen and (max-width: 600px) {
+  .popup-content {
+    width: 345px;
+    height: 420px;
+    background-image: url('@/assets/images/ylct/mobile/hot_bg-min.png');
+  }
+}

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

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue';
+import './index.ylct.scss';
+
+export default defineComponent({
+  name: 'HomePopup',
+  render() {
+    return (
+      <div id="popup">
+        <div class="popup-content">
+          <div id="closepop">close</div>
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -8,10 +8,24 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: url('@/assets/images/ylct/bg-min.png') no-repeat center / cover;
+    background: url('@/assets/images/ylct/home/bg-min.png') no-repeat center / cover;
     z-index: 9999;
 
-    img {
+    &__title {
+      position: absolute;
+      top: 166px;
+      left: 50%;
+      width: 1260px;
+      height: 333px;
+      background: url('@/assets/images/ylct/home/title-min.png') no-repeat center / contain;
+      transform: translateX(-50%);
+    }
+    &__logo {
+      position: absolute;
+      right: 364px;
+      bottom: 122px;
+    }
+    &__btn {
       position: absolute;
       left: 50%;
       bottom: 70px;
@@ -97,12 +111,28 @@ div.cad {
 
 @media only screen and (max-width: 600px) {
   .home {
-    &__back {
-      top: 12px;
-      left: 12px;
-      width: 35px;
-      height: 35px;
-      z-index: 1001;
+    &-cover {
+      background: url('@/assets/images/ylct/mobile/bg-min.png') no-repeat top center / cover;
+
+      &__title {
+        top: 50%;
+        width: 202px;
+        height: 445px;
+        background-image: url('@/assets/images/ylct/mobile/title-min.png');
+        transform: translate(-50%, -58%);
+      }
+      &__logo {
+        left: 20px;
+        right: unset;
+        bottom: 20px;
+        width: 41px;
+        height: 20px;
+      }
+      &__btn {
+        bottom: 20px;
+        width: 90px;
+        height: 90px;
+      }
     }
   }
   div.cad {

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

@@ -9,6 +9,7 @@ import Menu from './components/menu';
 import GuiLoading from './components/gui-loading';
 import Popup from './components/popup';
 import HotSpotList from './components/hot-spot-list';
+import LogoImg from '@/assets/images/ylct/home/logo-min.png';
 import BtnIcon from '@/assets/images/ylct/button-min.png';
 import useBaseStore from '@/store/module/base';
 import './index.ylct.scss';
@@ -48,7 +49,9 @@ export default defineComponent({
       <div class="home">
         {this.showCover && (
           <div class="home-cover">
-            <img src={BtnIcon} onClick={() => (this.showCover = false)} />
+            <div class="home-cover__title" />
+            <img class="home-cover__logo" draggable="false" src={LogoImg} />
+            <img class="home-cover__btn" src={BtnIcon} onClick={() => (this.showCover = false)} />
           </div>
         )}