|
|
@@ -135,11 +135,9 @@ export default {
|
|
|
computed: {
|
|
|
// 动态计算 CSS 变量和合并自定义样式
|
|
|
dockStyles() {
|
|
|
- // 隐藏状态下，让容器往下沉 (自身高度 160 减去留出给用户触发的边缘高度)
|
|
|
- // 如果你想让它隐藏得更深，可以把 140 改成 150 甚至 160
|
|
|
+ // 统一只传一个基础 bottom 偏移量，动画交由 CSS transform 处理
|
|
|
return {
|
|
|
- '--dock-show-bottom': `${this.bottomOffset}px`,
|
|
|
- '--dock-hide-bottom': `${this.bottomOffset - 140}px`,
|
|
|
+ '--dock-bottom': `${this.bottomOffset}px`,
|
|
|
...this.customStyle
|
|
|
};
|
|
|
}
|
|
|
@@ -222,28 +220,45 @@ export default {
|
|
|
height: 160px;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
+ bottom: var(--dock-bottom, 0px);
|
|
|
z-index: 9999;
|
|
|
- transition: bottom 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+ transition: transform 0.8s 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;
|
|
|
}
|
|
|
|
|
|
-/* === 状态 A：自动隐藏 (使用 CSS 变量控制) === */
|
|
|
+/* === 状态 A：自动隐藏 === */
|
|
|
.dock-wrapper.is-auto-hide {
|
|
|
- bottom: var(--dock-hide-bottom);
|
|
|
+ /* 核心改动3：下沉 100%（即自身整个高度），但往回拉出一段可见距离。
|
|
|
+ clamp(最小值, 动态值, 最大值)：保证小屏幕最少露出 25px，大屏最多露 40px */
|
|
|
+ transform: translateY(calc(100% - clamp(25px, 4vh, 40px)));
|
|
|
}
|
|
|
.dock-wrapper.is-auto-hide:hover {
|
|
|
- bottom: var(--dock-show-bottom);
|
|
|
+ /* 悬浮时，位移归零，完全升起 */
|
|
|
+ transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
+/* 增加隐形触发热区！防止线太细导致小屏幕极难 hover */
|
|
|
+.dock-wrapper.is-auto-hide::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -30px; /* 向上延伸 30px 的隐形热区 */
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 60px; /* 覆盖线上下区域 */
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+/* 发光的指示线自适应 */
|
|
|
.dock-wrapper.is-auto-hide::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- width: 200px;
|
|
|
- height: 3px;
|
|
|
+ /* 宽度和厚度也做一点自适应，小屏自动变短点 */
|
|
|
+ width: clamp(150px, 20vw, 250px);
|
|
|
+ height: clamp(3px, 0.5vh, 5px);
|
|
|
background: rgba(0, 229, 255, 0.6);
|
|
|
box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
|
|
|
border-radius: 4px;
|
|
|
@@ -255,11 +270,12 @@ export default {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
-/* === 状态 B：常驻显示 (使用 CSS 变量控制) === */
|
|
|
+/* === 状态 B：常驻显示 === */
|
|
|
.dock-wrapper.is-always-show {
|
|
|
- bottom: var(--dock-show-bottom);
|
|
|
+ transform: translateY(0);
|
|
|
}
|
|
|
-.dock-wrapper.is-always-show::before {
|
|
|
+.dock-wrapper.is-always-show::before,
|
|
|
+.dock-wrapper.is-always-show::after {
|
|
|
display: none;
|
|
|
}
|
|
|
|
