style【有限空间】：修改地图的Tab样式

src/packages/components/Charts/ConfinedSpace/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="go-iframe-container" :style="{ width: w + 'px', height: h + 'px' }">
-    <!-- 按钮容器，绝对定位在左上角 -->
+    <!-- 按钮容器，绝对定位在右上角 -->
     <div class="button-container-wrapper">
       <div class="button-container">
         <div v-for="btn in buttons" :key="btn.id" :class="['button', { active: btn.id === activeButtonId }]"
@@ -154,128 +154,56 @@ function callIframeMethod(methodName: string, ...args: any[]) {
 .go-iframe-container {
   overflow: hidden;
   position: relative; // 为内部的绝对定位元素提供定位上下文
-  --inactive-border-color: #337ab7;
-  --inactive-text-color: #a0c0e0;
-  --inactive-bg-color: rgba(10, 25, 40, 0.7);
-  --active-border-color: #f7b731;
-  --active-text-color: #f7b731;
-  --active-text-shadow: 0 0 8px rgba(247, 183, 49, 0.7);
-  /* 边框（L型括号）的尺寸参数 */
-  --bracket-thickness: 3px;
-  /* 括号线条粗细 */
-  --bracket-arm-length: 8px;
-  /* 括号横向臂长 */
-  --vertical-segment-height: 8px;
-  /* 括号垂直部分顶部和底部的长度，中间留空 */
 }
 
 .button-container-wrapper {
   position: absolute;
   top: 20px;
-  left: 20px;
+  right: 20px;
   z-index: 10;
 }
 
 .button-container {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  gap: 10px;
+  // gap: 10px;
-  width: fit-content;
+  // width: 400px;
+  height: 50px;
   padding: 0;
-  border-radius: 5px;
+
+
 }
 
 .button {
   position: relative;
-  padding: 12px 30px;
+  margin: 1px;
-  font-size: 1.1em;
+  display: flex;
-  font-weight: bold;
+  align-items: center;
-  text-align: center;
+  justify-content: center;
+  padding: 12px 0px;
+  width: 200px;
+  font-size: 14px;
   cursor: pointer;
   transition: all 0.3s ease;
   /* 平滑过渡效果 */
   overflow: hidden;
+  background-image: url('./assets/unselect.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  color: rgb(193, 193, 193);
+  // background-color: bisque;
 
-  --_current-border-color: var(--inactive-border-color);
-  --_current-text-color: var(--inactive-text-color);
-  --_current-text-shadow: none;
-  background-color: var(--inactive-bg-color);
-  /* 按钮背景色 */
-  color: var(--_current-text-color);
-  text-shadow: var(--_current-text-shadow);
-  /* 按钮本体的细线边框：顶部、底部、右侧 */
-  border-top: 1px solid var(--_current-border-color);
-  border-bottom: 1px solid var(--_current-border-color);
-  border-right: 1px solid var(--_current-border-color);
-  border-left: none;
-  /* 左侧边框由伪元素绘制 */
 }
 
 /* 激活状态的样式 */
 .button.active {
-  --_current-border-color: var(--active-border-color);
+  background-image: url('./assets/selected.png');
-  --_current-text-color: var(--active-text-color);
+  color: #eee;
-  --_current-text-shadow: var(--active-text-shadow);
-  color: var(--_current-text-color);
-  text-shadow: var(--_current-text-shadow);
-  border-top-color: var(--_current-border-color);
-  border-bottom-color: var(--_current-border-color);
-  border-right-color: var(--_current-border-color);
-}
-
-.button::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  width: var(--bracket-arm-length);
-  height: calc(100% + 2px);
-  border-color: var(--_current-border-color);
-  border-style: solid;
-  /* border-width: top right bottom left */
-  border-width: var(--bracket-thickness) 0 var(--bracket-thickness) var(--bracket-thickness);
-
-  /* 使用线性渐变背景来创建左侧垂直部分的断开效果 */
-  background: linear-gradient(to bottom,
-      var(--_current-border-color) 0%,
-      var(--_current-border-color) var(--vertical-segment-height),
-      transparent var(--vertical-segment-height),
-      transparent calc(100% - var(--vertical-segment-height)),
-      var(--_current-border-color) calc(100% - var(--vertical-segment-height)),
-      var(--_current-border-color) 100%) no-repeat left center / var(--bracket-thickness) 100%;
-
-  transition: border-color 0.3s ease, background 0.3s ease;
-  /* 过渡颜色变化 */
-}
-
-.button::after {
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  /* 向右偏移1px，与父元素的右边缘对齐 */
-  width: var(--bracket-arm-length);
-  height: calc(100% + 2px);
-  border-color: var(--_current-border-color);
-  border-style: solid;
-  /* 伪元素的边框用于绘制 L 型括号的水平部分和右侧垂直部分的厚度 */
-  /* border-width: top right bottom left */
-  border-width: var(--bracket-thickness) var(--bracket-thickness) var(--bracket-thickness) 0;
-  /* 使用线性渐变背景来创建右侧垂直部分的断开效果 */
-  background: linear-gradient(to bottom,
-      var(--_current-border-color) 0%,
-      var(--_current-border-color) var(--vertical-segment-height),
-      transparent var(--vertical-segment-height),
-      transparent calc(100% - var(--vertical-segment-height)),
-      var(--_current-border-color) calc(100% - var(--vertical-segment-height)),
-      var(--_current-border-color) 100%) no-repeat right center / var(--bracket-thickness) 100%;
-  transition: border-color 0.3s ease, background 0.3s ease;
 }
 
 /* 非激活状态按钮的悬停效果 */
 .button:not(.active):hover {
   filter: brightness(1.1);
-  /* 略微提高亮度 */
 }
 
 .iframe-content {
@@ -283,4 +211,8 @@ function callIframeMethod(methodName: string, ...args: any[]) {
   height: 100%;
   border: none;
 }
+
+.button:nth-child(1) {
+  transform: translateX(30px); // 将第二个按钮向左移动
+}
 </style>