给一体机版本添加操作指引

README.md

@@ -14,6 +14,9 @@ yarn build-prod
 # 移动端测试环境url
 https://culture.4dage.com/demo/jiangsu518/web_prod/showMobile.html?id=WK1666378820984242176&vr=fd720_VlB2fUXPH&lang=zh
 
+# 一体机测试环境 网站首页url
+http://192.168.20.245:8051/web/index.html#/
+
 # 一体机测试环境url
 http://192.168.20.245:8011/showMobile.html?id=WK1656313698840494080&vr=fd720_jdESwjCzk&lang=zh
 

src/components/UIGather/mobile/TipsForAllInOnePc.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="tips-for-all-in-one-pc">
+    <div class="inner-wrap">
+      <div class="line-1">
+        <div class="item">
+          <img class="" src="@/assets/images/js_all-in-one-pc_tips/single-finger.png" alt="" draggable="false">
+          <span>单指按住屏幕，拖动视角</span>
+        </div>
+        <div class="item">
+          <img class="" src="@/assets/images/js_all-in-one-pc_tips/two-finger.png" alt="" draggable="false">
+          <span>两指按住屏幕，缩放视角</span>
+        </div>
+      </div>
+      <div class="line-2">
+        <div class="item">
+          <img class="scene-sample" src="@/assets/images/js_all-in-one-pc_tips/scene1.png" alt="" draggable="false">
+          <img class="line" src="@/assets/images/js_all-in-one-pc_tips/line.png" alt="" draggable="false">
+          <div class="right">
+            <img class="icon" src="@/assets/images/js_all-in-one-pc_tips/icon-for-scene-1.png" alt="" draggable="false">
+            <span>切换场景</span>
+          </div>
+        </div>
+        <div class="item">
+          <img class="scene-sample" src="@/assets/images/js_all-in-one-pc_tips/scene2.png" alt="" draggable="false">
+          <img class="line" src="@/assets/images/js_all-in-one-pc_tips/line.png" alt="" draggable="false">
+          <div class="right">
+            <img class="icon" src="@/assets/images/js_all-in-one-pc_tips/icon-for-scene-2.png" alt="" draggable="false">
+            <span>切换场景</span>
+          </div>
+        </div>
+        <div class="item">
+          <img class="scene-sample" src="@/assets/images/js_all-in-one-pc_tips/scene3.png" alt="" draggable="false">
+          <img class="line" src="@/assets/images/js_all-in-one-pc_tips/line.png" alt="" draggable="false">
+          <div class="right">
+            <img class="icon" src="@/assets/images/js_all-in-one-pc_tips/icon-for-scene-3.png" alt="" draggable="false">
+            <span>查看热点</span>
+          </div>
+        </div>
+      </div>
+      <div class="line-3">
+        <div class="item">
+          <img class="" src="@/assets/images/js_all-in-one-pc_tips/auto.png" alt="" draggable="false">
+          <span class="big">自动导览</span>
+          <span class="small">按预设镜头游览路线</span>
+        </div>
+        <div class="item">
+          <img class="" src="@/assets/images/js_all-in-one-pc_tips/scene-list.png" alt="" draggable="false">
+          <span class="big">导览列表</span>
+          <span class="small">查看所有可游览场景</span>
+        </div>
+        <div class="item">
+          <img class="" src="@/assets/images/js_all-in-one-pc_tips/hotspot-list.png" alt="" draggable="false">
+          <span class="big">热点列表</span>
+          <span class="small">查看所有可点击热点</span>
+        </div>
+        <div class="item">
+          <img class="" src="@/assets/images/js_all-in-one-pc_tips/music.png" alt="" draggable="false">
+          <span class="big">音乐开关</span>
+          <span class="small">开启/关闭声音</span>
+        </div>
+      </div>
+    </div>
+    <button class="I-see" @click="$emit('close')">
+      <img class="" src="@/assets/images/js_all-in-one-pc_tips/I-see.png" alt="" draggable="false">
+    </button>
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+.tips-for-all-in-one-pc{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.78);
+  z-index: 10000;
+  letter-spacing: 0.2em;
+  >.inner-wrap{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 25vw;
+    right: 25vw;
+    >.line-1{
+      margin-top: 17vh;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      >.item{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        >img{
+          width: 5.4vw;
+          height: 5.4vw;
+        }
+        >span{
+          margin-top: 0.7vw;
+          font-size: 0.9vw;
+          font-family: Source Han Serif CN;
+          font-weight: 800;
+          color: #FEFEFE;
+        }
+      }
+    }
+    >.line-2{
+      margin-top: 11.25vh;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      >.item{
+        position: relative;
+        display: flex;
+        align-items: center;
+        >img.scene-sample{
+          width: 6.1vw;
+          height: 4vw;
+          margin-top: 0.5vw;
+        }
+        >.circle{
+          position: absolute;
+          display: none;
+        }
+        >img.line{
+          position: absolute;
+          top: 1.4vw;
+          left: 2.35vw;
+          width: 5vw;
+        }
+        >.right{
+          margin-left: 1.1vw;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          >img.icon{
+            width: 3.4vw;
+            height: 3.4vw;
+            border-radius: 50%;
+          }
+          >span{
+            margin-top: 0.3vw;
+            font-size: 0.9vw;
+            font-family: Source Han Serif CN;
+            font-weight: 800;
+            color: #FEFEFE;
+          }
+        }
+      }
+    }
+    >.line-3{
+      margin-top: 5.6vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      >.item{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        >img{
+          width: 3.1vw;
+          height: 3.1vw;
+        }
+        >span.big{
+          margin-top: 0.5vw;
+          font-size: 0.9vw;
+          font-family: Source Han Serif CN;
+          font-weight: bold;
+          color: #FEFEFE;
+        }
+        >span.small{
+          font-size: 0.6vw;
+          margin-top: 0.3vw;
+          font-family: Source Han Serif CN;
+          font-weight: 400;
+          color: #FEFEFE;
+        }
+      }
+    }
+  }
+  >button.I-see{
+    position: absolute;
+    left: 50%;
+    bottom: 4vw;
+    transform: translate(-50%, 0);
+    width: 9.4vw;
+    height: 4.6vw;
+    >img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/pages/showMobile.vue

@@ -5,6 +5,7 @@
       :coverData="coverInfo"
       v-if="coverInfo.isShowCover && !hasPasswordLock"
     />
+    <TipsForAllInOnePc v-if="isShowTipsForAllInOnePc" @close="isShowTipsForAllInOnePc = false"></TipsForAllInOnePc>
     <Password @pass="handlePass" />
     <Share />
     <div class="ui-view-layout" :class="{ show: show }">
@@ -28,6 +29,7 @@ import UiGather from "@/components/UIGather/mobile";
 import TitieSlide from "@/components/assembly/titieSlide";
 import Opening from "@/components/assembly/OpeningMobile";
 import LoadingLogo from "@/components/assembly/Loading";
+import TipsForAllInOnePc from "@/components/UIGather/mobile/TipsForAllInOnePc.vue";
 import { createApp } from "@/app";
 
 import { ref, onMounted, computed, unref, watch, nextTick } from "vue";
@@ -300,6 +302,8 @@ onMounted(async () => {
 const handlePass = () => {
   hasPasswordLock.value = false;
 };
+
+const isShowTipsForAllInOnePc = ref(true)
 </script>
 
 <style lang="scss" scoped>