1

src/views/HomeView.vue

@@ -9,7 +9,7 @@
     <div class="button-group">
       <router-link
         class="router-link"
-        to="./swkk-fade-in"
+        to="./swkk-fade-in?floor=1"
       >
         <img
           src="@/assets/images/button-to-scenes.png"

src/views/SwkkView.vue

@@ -5,6 +5,48 @@
       class="swkk-wrap"
     />
 
+    <menu>
+      <button>
+        <img
+          src="@/assets\images\swkk\zidongmanyou.png"
+          alt=""
+          draggable="false"
+        >
+        <div>自动漫游</div>
+      </button>
+      <button>
+        <img
+          src="@/assets\images\swkk\changjingdaolan.png"
+          alt=""
+          draggable="false"
+        >
+        <div>场景导览</div>
+      </button><button>
+        <img
+          src="@/assets\images\swkk\quanjingmanyou.png"
+
+          alt=""
+          draggable="false"
+        >
+        <div>全景漫游</div>
+      </button><button>
+        <img
+          src="@/assets\images\swkk\minimoxing.png"
+
+          alt=""
+          draggable="false"
+        >
+        <div>迷你模型</div>
+      </button><button>
+        <img
+          src="@/assets\images\swkk\dingbufushi.png"
+          alt=""
+          draggable="false"
+        >
+        <div>顶部俯视</div>
+      </button>
+    </menu>
+
     <!-- 右上地图 -->
     <div
       v-show="!isLoading && numSta === 2"
@@ -261,11 +303,33 @@ export default {
     width: 100%;
     height: 100%;
   }
+
+  > menu {
+    position: absolute;
+    z-index: 1;
+    top: 2rem;
+    left: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.83rem;
+    > button {
+      > img {
+        width: 5rem;
+        height: 5rem;
+      }
+      > div {
+        color: #fff;
+        font-size: 1.17rem;
+      }
+    }
+  }
+
   /deep/[xui_min_map] {
-    top: 6rem;
+    top: 7rem;
     right: 1.67rem;
-    width: 11.67rem;
-    height: 11.25rem;
+    width: 18rem;
+    height: 18rem;
     border: 0.08rem solid #D8B275;
     background-color: rgba(81, 32, 32, 0.4);
     border-radius: 0 0 0.42rem 0.42rem;
@@ -273,28 +337,27 @@ export default {
   .mini-map {
     position: absolute;
     z-index: 1;
-    right: 20px;
-    top: 28px;
-    border: 2px solid #d8b275;
-    border-radius: 8px 8px 0 0;
+    right: 1.67rem;
+    top: 2.5rem;
+    border: 0.08rem solid #d8b275;
+    border-radius: 0.42rem 0.42rem 0 0;
     color: #fff;
-    width: 180px;
-    height: 40px;
+    width: 18rem;
+    height: 4.6rem;
     background-color: #930909;
     display: flex;
-    justify-content: space-between;
-    padding: 0 15px;
+    justify-content: space-evenly;
     .radio-wrap {
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 14px;
+      font-size: 1.67rem;
       .radio {
-        margin-right: 6px;
-        width: 20px;
-        height: 20px;
+        margin-right: 0.5rem;
+        width: 2.2rem;
+        height: 2.2rem;
         border-radius: 50%;
-        border: 1px solid #fff;
+        border: 0.08rem solid #fff;
         position: relative;
       }
       .rowrr {
@@ -311,8 +374,8 @@ export default {
           left: 50%;
           transform: translate(-50%, -50%);
           border-radius: 50%;
-          width: 10px;
-          height: 10px;
+          width: 1rem;
+          height: 1rem;
           background-color: #d8b275;
         }
       }