style: --

src/views/PanoView.vue

@@ -24,28 +24,30 @@
         :src="iframeSrc"
         frameborder="0"
       />
-      <button
-        class="return-home"
-        @click="router[$isMobile ? 'replace' : 'push']({
-          name: 'HomeView',
-        })"
-      />
-      <button
-        class="game-entry-page-btn"
-        @click="showGameEntryPage({
-          gameName: sceneIdx === 0 ? '广寒宫' : sceneIdx === 1 ? '聊城古船' : '多宝阁',
-        })"
-      />
-      <img
-        v-if="cameraIdx === 0"
-        class="guide-btn"
-        :src="require(`@/assets/images/guide/tbn_help-${sceneIdx + 1}-min.png`)"
-        @click="showGuide = true"
-      >
-      <button
-        class="answer-btn"
-        @click="showAnswerPage"
-      />
+      <div class="pano-wrap-toolbar">
+        <button
+          class="return-home"
+          @click="router[$isMobile ? 'replace' : 'push']({
+            name: 'HomeView',
+          })"
+        />
+        <button
+          class="game-entry-page-btn"
+          @click="showGameEntryPage({
+            gameName: sceneIdx === 0 ? '广寒宫' : sceneIdx === 1 ? '聊城古船' : '多宝阁',
+          })"
+        />
+        <img
+          v-if="cameraIdx === 0"
+          class="guide-btn"
+          :src="require(`@/assets/images/guide/tbn_help-${sceneIdx + 1}-min.png`)"
+          @click="showGuide = true"
+        >
+        <button
+          class="answer-btn"
+          @click="showAnswerPage"
+        />
+      </div>
       <iframe
         v-if="answerPageVisible"
         src="./answer.html"
@@ -1298,12 +1300,17 @@ const {
       width: 100%;
       height: 100%;
     }
-    >button.return-home{
+    &-toolbar {
       position: absolute;
-      width: 77px;
-      height: 77px;
       top: 43px;
       right: 51px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .return-home{
+      width: 77px;
+      height: 77px;
       background-image: v-bind(btnReturnHomeImgUrl);
       background-size: cover;
       background-repeat: no-repeat;
@@ -1313,12 +1320,9 @@ const {
         background-image: v-bind(btnReturnHomeActiveImgUrl);
       }
     }
-    >button.game-entry-page-btn{
-      position: absolute;
+    .game-entry-page-btn{
       width: 77px;
       height: 77px;
-      top: 128px;
-      right: 51px;
       background-image: v-bind(btnGameEntryPageImgUrl);
       background-size: cover;
       background-repeat: no-repeat;
@@ -1328,12 +1332,9 @@ const {
         background-image: v-bind(btnGameEntryPageActiveImgUrl);
       }
     }
-    >button.answer-btn{
-      position: absolute;
+    .answer-btn{
       width: 77px;
       height: 77px;
-      top: 298px;
-      right: 51px;
       background-image: v-bind(answerEntryPageImgUrl);
       background-size: cover;
       background-repeat: no-repeat;
@@ -1344,10 +1345,7 @@ const {
       }
     }
     .guide-btn{
-      position: absolute;
       width: 77px;
-      top: 213px;
-      right: 51px;
       cursor: pointer;
       z-index: 5;
     }