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);
+ }
+ }
+ }
}
}
}