右上角大体相关菜单 未登录时 两个端

src/App.vue

@@ -86,8 +86,8 @@ export default {
 }
 
 @font-face {
-  font-family: 'DFLiShuW7';
-  src: url('@/assets/style/DFLiShuW7.ttf');
+  font-family: 'LiSu-Regular';
+  src: url('@/assets/style/LiSu.ttf');
 }
 
 .cad {

src/pages/Home.vue

@@ -15,10 +15,10 @@
     <MiniMapDecorator
       class="mini-map-decorator"
     />
+    <QuizMenu class="quiz-menu" />
 
     <!-- 底部菜单 -->
     <div
-      v-show="!isShowPano"
       id="gui-parent"
     >
       <!-- 进度条加载 -->
@@ -86,32 +86,6 @@
 
       <v-other />
     </div>
-
-    <transition name="fade-out">
-      <div
-        v-if="isShowPano"
-        class="pano-layer"
-      >
-        <!-- 全景图 -->
-        <iframe
-          class="pano"
-          src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1628651656780496896&vr=fd720_7cJ6ECymB"
-          frameborder="0"
-        />
-
-        <button
-          class="begin"
-          @click="onClickBegin"
-        >
-          <img
-            class=""
-            src="@/assets/images/begin-explore.png"
-            alt=""
-            draggable="false"
-          >
-        </button>
-      </div>
-    </transition>
   </div>
 </template>
 
@@ -128,6 +102,7 @@ import vError from "@/views/gui/error"
 import vrCon from "@/views/gui/vrcon"
 import vOther from "@/views/gui/other"
 import MiniMapDecorator from "@/views/gui/MiniMapDecorator.vue"
+import QuizMenu from "@/views/gui/QuizMenu.vue"
 
 export default {
   name: "Home",
@@ -144,6 +119,7 @@ export default {
     vrCon,
     vOther,
     MiniMapDecorator,
+    QuizMenu,
   },
 
   data() {
@@ -151,7 +127,6 @@ export default {
       hotspots: "",
       // 控制背景音乐
       isMusicInitiallyPlayed: false,
-      isShowPano: false,
     }
   },
 
@@ -172,11 +147,6 @@ export default {
         }, 1000)
       }
     }
-
-    const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-    if (locationQuerySection.get('show-cover')) {
-      this.isShowPano = true
-    }
   },
 
   methods: {
@@ -185,13 +155,6 @@ export default {
       if (!this.isMusicInitiallyPlayed) window.manage.switchBgmState(true)
       this.isMusicInitiallyPlayed = true
     },
-    onClickBegin() {
-      this.isShowPano = false
-      const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-      locationQuerySection.delete('show-cover')
-      const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
-      location.assign(newLocation)
-    }
   },
 }
 </script>
@@ -200,6 +163,9 @@ export default {
 .mini-map-decorator {
 }
 
+.quiz-menu {
+}
+
 .parent-body {
   position: relative;
   width: 100%;
@@ -220,28 +186,6 @@ export default {
 //   }
 // }
 
-.pano-layer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  iframe.pano {
-    width: 100%;
-    height: 100%;
-  }
-  button.begin {
-    position: absolute;
-    bottom: 85px;
-    left:50%;
-    transform: translateX(-50%);
-    > img {
-      width: 141px;
-    }
-  }
-}
-
 .hotspot-detail-open {
   .v-menu {
     display: none;

src/views/gui/ModeSelectorMobile.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="mode-selector-mobile">
-    <button
-      @click="onClickQuanjingmanyou"
-    >
-      <img
-        class="manyou"
-        src="@/assets/images/quanjingmanyou-sub.png"
-        alt=""
-        draggable="false"
-      >
-      <span>漫游</span>
-    </button>
-    <button
-      @click="onClickDingbufushi"
-    >
-      <img
-        class="pingmian"
-        src="@/assets/images/dingbufushi-mobile.png"
-        alt=""
-        draggable="false"
-      >
-      <span>平面</span>
-    </button>
-    <button
-      @click="onClickMinimoxing"
-    >
-      <img
-        class="sanwei"
-        src="@/assets/images/minimoxing-mobile.png"
-        alt=""
-        draggable="false"
-      >
-      <span>三维</span>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    onClickQuanjingmanyou(e) {
-      document.onMousedownInside(e)
-    },
-    onClickMinimoxing(e) {
-      document.onClickDollHouse(e)
-    },
-    onClickDingbufushi(e) {
-      document.onClickFloorPlain(e)
-    },
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.mode-selector-mobile {
-  padding: 3px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px 5px 5px 5px;
-  display: flex;
-  align-items: center;
-  > button {
-    width: 75px;
-    height: 37px;
-    // background: rgba(161,14,12,0.7);
-    border-radius: 2px 2px 2px 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    > img.manyou {
-      width: 8px;
-      height: 20px;
-      margin-right: 6px;
-    }
-    > img.pingmian {
-      width: 19px;
-      height: 19px;
-      margin-right: 4px;
-    }
-    > img.sanwei {
-      width: 23px;
-      height: 22px;
-      margin-right: 4px;
-    }
-    > span {
-      font-size: 14px;
-      color: #FFF1BD;
-    }
-  }
-}
-
-.mobile[view-mode='panorama'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(1) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-.mobile[view-mode='floor-plain'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(2) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-.mobile[view-mode='doll-house'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(3) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-</style>

src/views/gui/QuizMenu.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="quiz-menu">
+    <div
+      v-if="!isMobile"
+      class="pc-wrapper"
+    >
+      <button>
+        <div class="text-wrapper">
+          请先登录再答题
+        </div>
+      </button>
+      <button>
+        <div class="text-wrapper">
+          规则说明
+        </div>
+      </button>
+    </div>
+    <div
+      v-if="isMobile"
+      class="mobile-wrapper"
+    >
+      <button>
+        <img
+          class=""
+          src="@/assets/images/login.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button>
+        <img
+          class=""
+          src="@/assets/images/rule-desc.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.quiz-menu {
+  > .pc-wrapper {
+    position: fixed;
+    top: 200px;
+    right: 45px;
+    width: 166px;
+    height: 162px;
+    background-image: url(@/assets/images/quiz-menu-bg-visitor-pc.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    padding-top: 25px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    > button {
+      background-image: url(@/assets/images/button-border-small.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: 119px;
+      height: 33px;
+      padding: 3px;
+      &:first-of-type {
+        margin-bottom: 10px;
+        > .text-wrapper {
+          height: 100%;
+          width: 100%;
+          background: rgba(154, 45, 10, 0.8);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 16px;
+          font-family: LiSu-Regular, LiSu;
+          color: #FFFFFF;
+        }
+      }
+      &:last-of-type {
+        > .text-wrapper {
+          height: 100%;
+          width: 100%;
+          background: rgba(143, 72, 49, 0.8);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 16px;
+          font-family: LiSu-Regular, LiSu;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+  > .mobile-wrapper {
+    position: fixed;
+    top: 126px;
+    right: 15px;
+    display: flex;
+    flex-direction: column;
+    > button {
+      margin-bottom: 11px;
+      width: 40px;
+      height: 40px;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>