diff --git a/src/views/arm/MechanicalArm.vue b/src/views/arm/MechanicalArm.vue index bbba985..8588257 100644 --- a/src/views/arm/MechanicalArm.vue +++ b/src/views/arm/MechanicalArm.vue @@ -67,8 +67,12 @@
速度:
- -
{{ (jointSpeed / 3 * 100).toFixed(0) }} %
+
+ + {{ formatSpeedTooltip(jointSpeed) }} +
+
{{ (jointSpeed / 1 * 100).toFixed(0) }} %
@@ -156,8 +160,12 @@
速度:
- -
{{ (endSpeed / 2 * 100).toFixed(0) }} %
+
+ + {{ formatSpeedTooltip(endSpeed) }} +
+
{{ (endSpeed / 1 * 100).toFixed(0) }} %
@@ -232,8 +240,12 @@
速度:
- -
{{ (postureSpeed / 2 * 100).toFixed(0) }} %
+
+ + {{ formatSpeedTooltip(postureSpeed) }} +
+
{{ (postureSpeed / 1 * 100).toFixed(0) }} %
@@ -336,6 +348,13 @@ const updateJoint = async (jointName, _dir) => { const postureSpeed = ref(0.8) const endSpeed = ref(0.8) +const hoveredSlider = ref(null) + +const getTooltipPosition = (value) => ({ + left: `${((value - 0.01) / 0.99) * 100}%` +}) + +const formatSpeedTooltip = (value) => Number(value).toFixed(2) const speedData = reactive({ vx: 0, @@ -673,6 +692,42 @@ onUnmounted(() => { width: 100px; text-align: center; } + + .speed-slider { + position: relative; + flex: 1; + min-width: 0; + + .speed-tooltip { + position: absolute; + bottom: calc(100% + 7px); + z-index: 10; + padding: 5px 8px; + border: 1px solid $color-accent-border-strong; + border-radius: 4px; + color: $color-text-bright; + background: $color-background-tooltip-translucent; + box-shadow: 0 4px 12px $color-shadow-tooltip; + font-size: 12px; + line-height: 1; + white-space: nowrap; + pointer-events: none; + transform: translateX(-50%); + + &::after { + position: absolute; + top: 100%; + left: 50%; + width: 7px; + height: 7px; + border-right: 1px solid $color-accent-border-strong; + border-bottom: 1px solid $color-accent-border-strong; + background: $color-background-tooltip-translucent; + content: ''; + transform: translate(-50%, -50%) rotate(45deg); + } + } + } } } }