Bladeren bron

增强图例展开按钮的视觉醒目度

  收起图例后的展开按钮原为深底灰蓝图标,与地图同色系几乎隐身。
  改为亮蓝填充 + 亮蓝边框 + 蓝色辉光、图标默认转白,并增强 hover 反馈;
  同时为按钮增加 title="显示图例" 悬浮提示,明确其用途。
画安 2 dagen geleden
bovenliggende
commit
f7c1eb32cc
1 gewijzigde bestanden met toevoegingen van 8 en 6 verwijderingen
  1. 8 6
      src/components/TongzhouTrafficMap.vue

+ 8 - 6
src/components/TongzhouTrafficMap.vue

@@ -36,7 +36,7 @@
         </div>
       </div>
     </div>
-    <div class="legend-show-btn" v-if="(!mode || mode === '路口') && !legendVisible" @click="toggleLegend" :style="legendShowBtnStyle">
+    <div class="legend-show-btn" v-if="(!mode || mode === '路口') && !legendVisible" @click="toggleLegend" :style="legendShowBtnStyle" title="显示图例">
       <div class="legend-show-icon">☰</div>
     </div>
 
@@ -1960,8 +1960,8 @@ export default {
   position: absolute;
   bottom: 30px;
   right: 20px;
-  background: rgba(5, 22, 45, 0.9);
-  border: 1px solid #1e4d8e;
+  background: rgba(30, 86, 168, 0.92);
+  border: 1px solid #5892ff;
   width: 40px;
   height: 40px;
   border-radius: 6px 0 0 6px;
@@ -1970,16 +1970,18 @@ export default {
   align-items: center;
   cursor: pointer;
   z-index: 99;
+  box-shadow: 0 0 12px rgba(88, 146, 255, 0.7);
   transition: all 0.3s ease-in-out;
 }
 
 .legend-show-btn:hover {
-  background: rgba(10, 30, 60, 0.9);
-  border-color: #3a75c4;
+  background: rgba(58, 117, 196, 0.95);
+  border-color: #8db4ff;
+  box-shadow: 0 0 16px rgba(88, 146, 255, 0.9);
 }
 
 .legend-show-icon {
-  color: #8da6c7;
+  color: #ffffff;
   font-size: 18px;
   transition: color 0.3s;
 }