SmartBench/inspection-host-computer
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 调整slider容器的tooltip

Browse Source
This commit is contained in:
zhanghao 2026-07-21 16:30:26 +08:00
parent 498e165713
commit 21adafc3be
1 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/arm/MechanicalArm.vue
View File

@ -67,8 +67,12 @@
<div class="speed-container"> <div class="speed-container">
<div class="label">速度：</div> <div class="label">速度：</div>
<el-slider v-model="jointSpeed" :min="0.1" :step="0.1" :max="3" /> <div class="speed-slider" @mouseenter="hoveredSlider = 'joint'" @mouseleave="hoveredSlider = null">
<div class="proportion">{{ (jointSpeed / 3 * 100).toFixed(0) }} %</div> <el-slider v-model="jointSpeed" :min="0.01" :step="0.01" :max="1" :show-tooltip="false" />
<span v-show="hoveredSlider === 'joint'" class="speed-tooltip"
:style="getTooltipPosition(jointSpeed)">{{ formatSpeedTooltip(jointSpeed) }}</span>
</div>
<div class="proportion">{{ (jointSpeed / 1 * 100).toFixed(0) }} %</div>
</div> </div>
</div> </div>
@ -156,8 +160,12 @@
</div> </div>
<div class="speed-container"> <div class="speed-container">
<div class="label">速度：</div> <div class="label">速度：</div>
<el-slider v-model="endSpeed" :min="0.1" :step="0.1" :max="2" /> <div class="speed-slider" @mouseenter="hoveredSlider = 'end'" @mouseleave="hoveredSlider = null">
<div class="proportion">{{ (endSpeed / 2 * 100).toFixed(0) }} %</div> <el-slider v-model="endSpeed" :min="0.01" :step="0.01" :max="1" :show-tooltip="false" />
<span v-show="hoveredSlider === 'end'" class="speed-tooltip"
:style="getTooltipPosition(endSpeed)">{{ formatSpeedTooltip(endSpeed) }}</span>
</div>
<div class="proportion">{{ (endSpeed / 1 * 100).toFixed(0) }} %</div>
</div> </div>
</div> </div>
@ -232,8 +240,12 @@
</div> </div>
<div class="speed-container"> <div class="speed-container">
<div class="label">速度：</div> <div class="label">速度：</div>
<el-slider v-model="postureSpeed" :min="0.1" :step="0.1" :max="2" /> <div class="speed-slider" @mouseenter="hoveredSlider = 'posture'" @mouseleave="hoveredSlider = null">
<div class="proportion">{{ (postureSpeed / 2 * 100).toFixed(0) }} %</div> <el-slider v-model="postureSpeed" :min="0.01" :step="0.01" :max="1" :show-tooltip="false" />
<span v-show="hoveredSlider === 'posture'" class="speed-tooltip"
:style="getTooltipPosition(postureSpeed)">{{ formatSpeedTooltip(postureSpeed) }}</span>
</div>
<div class="proportion">{{ (postureSpeed / 1 * 100).toFixed(0) }} %</div>
</div> </div>
</div> </div>
</div> </div>
@ -336,6 +348,13 @@ const updateJoint = async (jointName, _dir) => {
const postureSpeed = ref(0.8) const postureSpeed = ref(0.8)
const endSpeed = 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({ const speedData = reactive({
vx: 0, vx: 0,
@ -673,6 +692,42 @@ onUnmounted(() => {
width: 100px; width: 100px;
text-align: center; 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);
}
}
}
} }
} }
} }