feat:增加操作指南

H5场景本地化/src/views/gui/Instructions.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="all">
+    <!-- 手指指引 -->
+    <div
+      class="hand-guide"
+      :style="{ margin: `0 auto ${parseInt(screenWidth / 30)}px` }"
+    >
+      <div class="hand-guide-item">
+        <img
+          src="../../assets/images/icon/guide/monodactylism.png"
+          :style="{
+            width:
+              screenWidth > 1000 ? parseInt(screenWidth / 18) + 'px' : '1.2rem',
+          }"
+        />
+        <div class="text">单指按住屏幕，拖动视角</div>
+      </div>
+      <div class="hand-guide-item">
+        <img
+          src="../../assets/images/icon/guide/digitalism.png"
+          :style="{
+            width:
+              screenWidth > 1000 ? parseInt(screenWidth / 18) + 'px' : '1.2rem',
+          }"
+        />
+        <div class="text">两指按住屏幕，缩放视角</div>
+      </div>
+    </div>
+    <!-- 漫游指引 -->
+    <div
+      class="roam-guide"
+      :style="{ margin: `0 auto ${parseInt(screenWidth / 30)}px` }"
+    >
+      <div class="roam-guide-item">
+        <img
+          class="line"
+          :style="{
+            left: parseInt(screenWidth / 46.82) + 'px',
+            top: parseInt(screenWidth / 192) + 'px',
+          }"
+          src="../../assets/images/icon/guide/line.png"
+          alt=""
+        />
+        <img
+          :style="{
+            width: parseInt(screenWidth / 16) + 'px',
+            marginTop: parseInt(screenWidth / 192) + 'px',
+            marginRight: parseInt(screenWidth / 51) + 'px',
+          }"
+          src="../../assets/images/icon/guide/stepImage.png"
+          alt=""
+        />
+        <div class="item-right">
+          <div
+            class="border-img"
+            :style="{
+              width:
+                screenWidth > 1000 ? parseInt(screenWidth / 31) + 'px' : '60px',
+              height:
+                screenWidth > 1000 ? parseInt(screenWidth / 31) + 'px' : '60px',
+            }"
+          >
+            <img src="../../assets/images/icon/guide/step.png" />
+          </div>
+          <div class="text">点击漫游</div>
+        </div>
+      </div>
+      <div class="roam-guide-item">
+        <img
+          class="line"
+          :style="{
+            left: parseInt(screenWidth / 46.82) + 'px',
+            top: parseInt(screenWidth / 192) + 'px',
+          }"
+          src="../../assets/images/icon/guide/line.png"
+          alt=""
+        />
+        <img
+          :style="{
+            width: parseInt(screenWidth / 16) + 'px',
+            marginTop: parseInt(screenWidth / 192) + 'px',
+            marginRight: parseInt(screenWidth / 51) + 'px',
+          }"
+          src="../../assets/images/icon/guide/hotImage.png"
+          alt=""
+        />
+        <div class="item-right">
+          <div
+            class="border-img"
+            :style="{
+              width:
+                screenWidth > 1000 ? parseInt(screenWidth / 31) + 'px' : '60px',
+              height:
+                screenWidth > 1000 ? parseInt(screenWidth / 31) + 'px' : '60px',
+            }"
+          >
+            <img src="../../assets/images/icon/guide/hotPoint.png" />
+          </div>
+          <div class="text">查看热点</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 按钮指引 -->
+    <div
+      class="botton-guide"
+      :style="{ margin: `0 auto ${parseInt(screenWidth / 30)}px` }"
+    >
+      <div class="botton-guide-item" v-for="(item, index) in btns" :key="index">
+        <img
+          :style="{
+            width:
+              screenWidth > 1000 ? parseInt(screenWidth / 30) + 'px' : '60px',
+            height:
+              screenWidth > 1000 ? parseInt(screenWidth / 30) + 'px' : '60px',
+          }"
+          :src="item.imgUrl"
+          alt=""
+        />
+        <div class="title">{{ item.title }}</div>
+        <div class="disc">{{ item.disc }}</div>
+      </div>
+    </div>
+
+    <!-- 我知道了 -->
+    <div
+      class="know-box"
+      :style="{ margin: `0 auto` }"
+    >
+      <img
+        :style="{
+          width:
+            screenWidth > 1000 ? parseInt(screenWidth / 10) + 'px' : '60px',
+        }"
+        src="../../assets/images/icon/guide/know.png"
+        alt=""
+        @click="changeHero"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["screenWidth"],
+  data() {
+    return {
+      // 按钮
+      btns: [
+        {
+          imgUrl: require("@/assets/images/icon/play.png"),
+          title: "自动导览",
+          disc: "按预设镜头游览路线",
+        },
+        {
+          imgUrl: require("@/assets/images/icon/auto_active.png"),
+          title: "导览列表",
+          disc: "查看所有可游览场景",
+        },
+        {
+          imgUrl: require("@/assets/images/icon/hotAc.png"),
+          title: "热点列表",
+          disc: "查看所有可点击热点",
+        },
+        {
+          imgUrl: require("@/assets/images/icon/dollhouse.png"),
+          title: "迷你模型",
+          disc: "查看三维立体模型",
+        },
+        {
+          imgUrl: require("@/assets/images/icon/floor_active.png"),
+          title: "俯瞰视图",
+          disc: "查看二位平面图",
+        },
+        {
+          imgUrl: require("@/assets/img/openM.png"),
+          title: "音乐开关",
+          disc: "开启/关闭音乐",
+        },
+      ],
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    changeHero() {
+      this.$emit("changeHero");
+    },
+  },
+  created() {},
+  mounted() {
+    
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.all {
+  width: 100vw;
+  height: 100vh;
+  background: #000000d4;
+  z-index: 10000;
+  position: relative;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  // position: relative;
+
+  .hand-guide {
+    width: 70%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto 50px;
+    // position: absolute;
+    // top: 10%;
+    // left: 50%;
+    // transform: translate(-50%);
+    &-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 2rem;
+        margin-bottom: 10px;
+      }
+      .text {
+        color: #fefefe;
+        font-size: 0.25rem;
+        font-family: Source Han Serif CN-Bold;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+    }
+  }
+
+  .roam-guide {
+    width: 70%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto 50px;
+    // position: absolute;
+    // top: 40%;
+    // left: 50%;
+    // transform: translate(-50%);
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      img {
+        width: 1.7rem;
+        margin-right: 10px;
+      }
+
+      .item-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .border-img {
+          width: 1.2rem;
+          img {
+            width: 100%;
+          }
+        }
+
+        .text {
+          color: #fefefe;
+          font-size: 0.23rem;
+          font-family: Source Han Serif CN-Bold;
+          font-weight: 800;
+          letter-spacing: 2px;
+          margin-top: 3px;
+        }
+      }
+
+      .line {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+
+  .botton-guide {
+    width: 70%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto 50px;
+
+    // position: absolute;
+    // top: 60%;
+    // left: 50%;
+    // transform: translate(-50%);
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      img {
+        width: 60px;
+        height: 60px;
+      }
+
+      .title {
+        color: #fefefe;
+        font-size: 0.22rem;
+        font-family: Source Han Serif CN-Bold;
+        font-weight: bold;
+        letter-spacing: 3px;
+        margin-top: 2px;
+      }
+      .disc {
+        font-size: 0.13rem;
+        font-family: Source Han Serif CN;
+        font-weight: 300;
+        color: #fefefe;
+        letter-spacing: 2px;
+        margin-top: 2px;
+      }
+      .line {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+  }
+
+  .know-box {
+    width: 70%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+
+    // position: absolute;
+    // bottom: 5%;
+    // left: 50%;
+    // transform: translate(-50%);
+    img {
+      width: 2.5rem;
+      margin: auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

H5场景本地化/src/views/gui/menu.vue

@@ -130,13 +130,14 @@
                   : '10vw',
             }"
           >
-          <div>
+            <div>
               <img
                 class="dianBox"
                 :style="{
                   width: '1.5vw !important',
                   height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
+                  marginRight:
+                    screenWidth > 1000 ? parseInt(screenWidth / 46) + 'px' : '',
                 }"
                 src="../../assets/img/dian.png"
                 alt=""
@@ -180,13 +181,14 @@
                   : '10vw',
             }"
           >
-          <div>
+            <div>
               <img
                 class="dianBox"
                 :style="{
                   width: '1.5vw !important',
                   height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
+                  marginRight:
+                    screenWidth > 1000 ? parseInt(screenWidth / 46) + 'px' : '',
                 }"
                 src="../../assets/img/dian.png"
                 alt=""
@@ -246,18 +248,21 @@
                     : '10vw',
               }"
             >
-            <div>
-              <img
-                class="dianBox"
-                :style="{
-                  width: '1.5vw !important',
-                  height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
-                }"
-                src="../../assets/img/dian.png"
-                alt=""
-              />
-            </div>
+              <div>
+                <img
+                  class="dianBox"
+                  :style="{
+                    width: '1.5vw !important',
+                    height: 'auto !important',
+                    marginRight:
+                      screenWidth > 1000
+                        ? parseInt(screenWidth / 46) + 'px'
+                        : '',
+                  }"
+                  src="../../assets/img/dian.png"
+                  alt=""
+                />
+              </div>
               <!-- icon文字 -->
               <div class="iconTxt" :class="{ iconTxtAc: !isGuide }" :style="{}">
                 {{ screenWidth < 1000 ? "导览列表" : "〚导览列表〛" }}
@@ -296,18 +301,21 @@
                     : '10vw',
               }"
             >
-            <div>
-              <img
-                class="dianBox"
-                :style="{
-                  width: '1.5vw !important',
-                  height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
-                }"
-                src="../../assets/img/dian.png"
-                alt=""
-              />
-            </div>
+              <div>
+                <img
+                  class="dianBox"
+                  :style="{
+                    width: '1.5vw !important',
+                    height: 'auto !important',
+                    marginRight:
+                      screenWidth > 1000
+                        ? parseInt(screenWidth / 46) + 'px'
+                        : '',
+                  }"
+                  src="../../assets/img/dian.png"
+                  alt=""
+                />
+              </div>
               <div
                 class="iconTxt"
                 :style="{
@@ -399,18 +407,21 @@
                     : '10vw',
               }"
             >
-            <div>
-              <img
-                class="dianBox"
-                :style="{
-                  width: '1.5vw !important',
-                  height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
-                }"
-                src="../../assets/img/dian.png"
-                alt=""
-              />
-            </div>
+              <div>
+                <img
+                  class="dianBox"
+                  :style="{
+                    width: '1.5vw !important',
+                    height: 'auto !important',
+                    marginRight:
+                      screenWidth > 1000
+                        ? parseInt(screenWidth / 46) + 'px'
+                        : '',
+                  }"
+                  src="../../assets/img/dian.png"
+                  alt=""
+                />
+              </div>
               <!-- icon文字 -->
               <div class="iconTxt" :style="{}">
                 {{ screenWidth < 1000 ? "迷你模型" : "〚迷你模型〛" }}
@@ -458,18 +469,21 @@
                     : '10vw',
               }"
             >
-            <div>
-              <img
-                class="dianBox"
-                :style="{
-                  width: '1.5vw !important',
-                  height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
-                }"
-                src="../../assets/img/dian.png"
-                alt=""
-              />
-            </div>
+              <div>
+                <img
+                  class="dianBox"
+                  :style="{
+                    width: '1.5vw !important',
+                    height: 'auto !important',
+                    marginRight:
+                      screenWidth > 1000
+                        ? parseInt(screenWidth / 46) + 'px'
+                        : '',
+                  }"
+                  src="../../assets/img/dian.png"
+                  alt=""
+                />
+              </div>
               <!-- icon文字 -->
               <div class="iconTxt" :style="{}">
                 {{ screenWidth < 1000 ? "俯瞰视图" : "〚俯瞰视图〛" }}
@@ -518,18 +532,21 @@
               }"
               @click="switchBGM2(!isMusic)"
             >
-            <div>
-              <img
-                class="dianBox"
-                :style="{
-                  width: '1.5vw !important',
-                  height: 'auto !important',
-                  marginRight: screenWidth > 1000 ? parseInt(screenWidth / 46) +'px' :''
-                }"
-                src="../../assets/img/dian.png"
-                alt=""
-              />
-            </div>
+              <div>
+                <img
+                  class="dianBox"
+                  :style="{
+                    width: '1.5vw !important',
+                    height: 'auto !important',
+                    marginRight:
+                      screenWidth > 1000
+                        ? parseInt(screenWidth / 46) + 'px'
+                        : '',
+                  }"
+                  src="../../assets/img/dian.png"
+                  alt=""
+                />
+              </div>
               <!-- icon文字 -->
               <div
                 class="iconTxt"
@@ -654,6 +671,13 @@
 
     <!-- 热点列表组件 -->
     <Hotspot v-if="meanInd" @close="meanInd = false" />
+
+    <!-- 使用指引 -->
+    <Instructions
+      v-show="isFingerpost"
+      :screenWidth="screenWidth"
+      @changeHero="instructionsClose"
+    />
   </div>
 </template>
 
@@ -661,8 +685,9 @@
 //引入组件
 import Hotspot from "./compomemt/hotspot";
 import FloorSelect from "./compomemt/floorSelect";
+import Instructions from "./Instructions.vue";
 export default {
-  components: { Hotspot, FloorSelect },
+  components: { Hotspot, FloorSelect, Instructions },
   data() {
     return {
       // 自动导览切换
@@ -678,6 +703,8 @@ export default {
       dialogWidth: 0,
       timer: false,
       showHotList: true,
+      // 使用指南
+      isFingerpost: false,
     };
   },
   watch: {
@@ -740,6 +767,9 @@ export default {
           window.myHotList,
           window.myHotList.length
         );
+        setTimeout(() => {
+          this.isFingerpost = true;
+        }, 400);
         if (window.hotData && window.myHotList && window.myHotList.length) {
           // 显示列表
           this.showHotList = true;
@@ -752,6 +782,10 @@ export default {
     }
   },
   methods: {
+    // 关闭使用指引
+    instructionsClose() {
+      this.isFingerpost = false;
+    },
     goBack() {
       // 如果有上一页，则传递信息
       if (window.history.length === 1) {
@@ -1031,10 +1065,9 @@ export default {
       display: flex;
       justify-content: left;
       align-items: center;
-       margin-top: -4px;
+      margin-top: -4px;
     }
 
-
     .hotListSon {
       text-align: center;
 
@@ -1086,7 +1119,7 @@ export default {
         padding: 0px 10px 46px 10px;
         margin-top: 0;
       }
-       @media screen and (min-width: 1600px) and (max-width: 2000px) {
+      @media screen and (min-width: 1600px) and (max-width: 2000px) {
         display: flex;
         justify-content: center;
         max-width: none;
@@ -1125,7 +1158,7 @@ export default {
           top: none;
           margin-top: 10px;
         }
-        @media screen and (min-width: 1700px)  {
+        @media screen and (min-width: 1700px) {
           position: static;
           right: none;
           top: none;
@@ -1184,7 +1217,7 @@ export default {
     font-weight: 700;
     color: #fffae9;
     text-shadow: 0 0 0.1875rem #9f7b46;
-    z-index: 1000;
+    z-index: 999;
 
     img {
       margin-right: 0.075rem;