Parcourir la source

修改BottomDock组件的自动隐藏效果

画安 il y a 2 jours
Parent
commit
dfb5dcaf5c
2 fichiers modifiés avec 40 ajouts et 5 suppressions
  1. 39 1
      src/components/ui/BottomDock.vue
  2. 1 4
      src/styles/global.css

+ 39 - 1
src/components/ui/BottomDock.vue

@@ -204,7 +204,45 @@ export default {
     justify-content: center;
     width: 100%;
     height: 160px;
-    position: relative;
+    /* position: relative; */
+
+    position: fixed; 
+    left: 0;
+    z-index: 9999; 
+    
+    /* 🌟 核心修改 1:不用 transform,直接把 bottom 设为负数藏到底部外 */
+    bottom: -140px; 
+    /* 🌟 核心修改 2:过渡动画改为监听 bottom 属性 */
+    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    background: linear-gradient(to top, rgba(0, 20, 30, 0.8) 0%, rgba(0, 20, 30, 0.01) 100%);
+
+    pointer-events: auto !important;
+}
+
+/* 🌟 核心修改 3:鼠标悬浮时,bottom 归零,完美升起 */
+.dock-wrapper:hover {
+    bottom: 0;
+}
+
+/* === 顶部的发光提示线(保持不变,加了一个穿透属性防误触) === */
+.dock-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 3px;
+    background: rgba(0, 229, 255, 0.6);
+    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
+    border-radius: 4px;
+    transition: opacity 0.3s;
+    pointer-events: none; /* 防止这根线挡住鼠标划入的判定 */
+}
+
+/* 展开的时候让提示线消失 */
+.dock-wrapper:hover::before {
+    opacity: 0;
 }
 
 /* 视窗容器:定宽,超出部分隐藏并允许横向滚动 

+ 1 - 4
src/styles/global.css

@@ -117,10 +117,7 @@
 
 /* 核心定位:将 Dock 导航栏绝对定位在屏幕最底部居中 */
 .float-bottom-dock {
-  position: absolute;
-  bottom: 20px; /* 距离底部的间距 */
-  left: 50%;
-  transform: translateX(-50%); /* 保证完美水平居中 */
+  pointer-events: auto; /* 保留鼠标权限即可 */
   z-index: 999; /* 保证层级最高,不会被图表或地图挡住点不到 */
 }