地图

src/views/pms/map/Map.vue

@@ -150,13 +150,30 @@ export default defineComponent({
         offset: new (window as any).BMap.Size(-10, -10)
       });
 
+      // 创建一个 style 标签并添加到 head 中，定义呼吸动画
+      const style = document.createElement('style');
+      style.textContent = `
+    @keyframes breathing {
+      0% {
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+      50% {
+        border-color: rgba(255, 255, 255, 0.8);
+      }
+      100% {
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+  `;
+      document.head.appendChild(style);
+
       // 初始样式
       label.setStyle({
         color: '#fff',
         backgroundColor: '#c38f65',
         borderRadius: '50%',
-        width: '40px',
-        height: '40px',
+        width: '50px',
+        height: '50px',
         textAlign: 'center',
         lineHeight: '40px',
         cursor: 'pointer',
@@ -164,12 +181,13 @@ export default defineComponent({
         fontWeight: 'bold',
         boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
         transition: 'all 0.3s ease',
-        border: '3px solid rgba(255, 255, 255, 0.5)' // 添加带有不透明度的边框
+        border: '4px solid rgba(255, 255, 255, 0.5)', // 添加带有不透明度的边框
+        animation: 'breathing 2s infinite' // 添加呼吸动画
       });
 
       // 鼠标悬停样式
       const hoverStyle = {
-        backgroundColor: '#a5734b',
+        backgroundColor: '#2196df',
         transform: 'scale(1.1)'
       };
 
@@ -309,9 +327,10 @@ export default defineComponent({
 .map-controls {
   position: absolute;
   top: 20px;
-  left: 20px;
+  right: 20px; /* 修改为right定位 */
   z-index: 1000;
   display: flex;
+  flex-direction: column; /* 垂直排列按钮 */
   gap: 10px;
 }