小地图和地图放大按钮外观

src/App.vue

@@ -90,28 +90,22 @@ export default {
   src: url('@/assets/style/DFLiShuW7.ttf');
 }
 
-.cad {
-  top: 52px !important;
-  right: 29px !important;
-  width: 219px !important;
-  height: 149px !important;
-  border-radius: 4px;
-  z-index: 999;
-  background: rgba(255, 168, 149, 0.2) !important;
-  svg {
-    path {
-      stroke-width: 0.5;
-    }
-  }
-}
-
 .mobile {
   .cad {
-    top: 12px !important;
-    right: 13px !important;
-    width: 111px !important;
-    height: 111px !important;
-    border-radius: 5px;
+    top: 8vw !important;
+    right: 3.6vw !important;
+    width: 35vw !important;
+    height: 35vw !important;
+    border-radius: 0.9vw;
+    z-index: 999;
+    background: rgba(21, 52, 115, 0.80) !important;
+    backdrop-filter: blur(1.8vw);
+    border: 1px solid #94E1FF;
+    svg {
+      path {
+        stroke-width: 0.5;
+      }
+    }
   }
 }
 
@@ -129,16 +123,14 @@ export default {
 // 小地图 当前位置标志
 // 位置圆圈。默认半径2.69，圆圈粗细1.076
 #ele1 circle {
-  fill: #A10E0C;d
-  r: 1.2;
-  stroke-width: 0.3;
-  stroke: rgba;
+  fill: #00a0e6;
+  stroke: #fff;
 }
 // 视野
 #ele1 path {
-  fill: rgba(161, 14, 12, 0.7);
-  stroke-width: 0.3;
+  fill: #00a0e6;
   stroke: #fff;
+  opacity: 0.7;
 }
 
 #popup {

src/pages/Home.vue

@@ -12,9 +12,20 @@
     <!-- 场景canvs主容器 -->
     <div id="player" />
 
-    <MiniMapDecorator
+    <!-- <MiniMapDecorator
       class="mini-map-decorator"
-    />
+    /> -->
+
+    <button
+      class="enlarge-btn"
+    >
+      <img
+        class=""
+        src="@/assets/images/enlarge.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
 
     <!-- 底部菜单 -->
     <div
@@ -127,7 +138,7 @@ import guimsg from "@/views/gui/guimsg"
 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 MiniMapDecorator from "@/views/gui/MiniMapDecorator.vue"
 
 export default {
   name: "Home",
@@ -143,7 +154,7 @@ export default {
     vError,
     vrCon,
     vOther,
-    MiniMapDecorator,
+    // MiniMapDecorator,
   },
 
   data() {
@@ -200,6 +211,19 @@ export default {
 .mini-map-decorator {
 }
 
+.enlarge-btn {
+  position: fixed;
+  width: 12vw;
+  height: 12vw;
+  top: 45vw;
+  right: 3.6vw;
+  z-index: 999;
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .parent-body {
   position: relative;
   width: 100%;

src/views/gui/menu.vue

@@ -335,6 +335,7 @@ export default {
   }
   > div {
     > .viewContainer {
+      display: flex;
       flex-direction: row;
       margin-left: 30px;
       padding: 0;