admin/Head_CT_Morph
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-05-08-02-54-30 调整模型切分范围条

Browse Source
This commit is contained in:
admin
2026-05-08 02:57:45 +08:00
parent 8e0e54fc3c
commit aee4466a94
6 changed files with 235 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
WebSite/src/App.tsx
View File

@@ -2177,13 +2177,13 @@ export default function App() {
<span className="text-blue-600">起点 {clampedModelStart + 1}</span>
<span className="text-orange-600">终点 {clampedModelEnd + 1}</span>
</div>
<div className="relative h-8">
<div className="absolute left-0 right-0 top-3 h-1.5 rounded-full bg-slate-200"></div>
<div className="relative h-10 px-1">
<div className="absolute left-1 right-1 top-4 h-2 rounded-full bg-slate-200"></div>
<div
className="absolute top-3 h-1.5 rounded-full bg-blue-500/60"
className="absolute top-4 h-2 rounded-full bg-blue-600"
style={{
left: `${Math.min(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}%`,
right: `${100 - Math.max(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}%`,
left: `calc(${Math.min(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}% + 4px)`,
right: `calc(${100 - Math.max(clampedModelStart, clampedModelEnd) / Math.max(1, viewerFrameCount - 1) * 100}% + 4px)`,
}}
></div>
<input
@@ -2192,7 +2192,8 @@ export default function App() {
max={viewerFrameCount - 1}
value={clampedModelStart}
onChange={event => setModelClipStart(parseInt(event.target.value, 10))}
className="absolute inset-x-0 top-0 w-full h-8 appearance-none bg-transparent accent-blue-600 cursor-pointer"
className="dual-range-input dual-range-input-start absolute inset-x-0 top-0 z-20 w-full h-10 bg-transparent cursor-pointer"
aria-label="模型切分起点帧"
/>
<input
type="range"
@@ -2200,7 +2201,8 @@ export default function App() {
max={viewerFrameCount - 1}
value={clampedModelEnd}
onChange={event => setModelClipEnd(parseInt(event.target.value, 10))}
className="absolute inset-x-0 top-0 w-full h-8 appearance-none bg-transparent accent-orange-500 cursor-pointer"
className="dual-range-input dual-range-input-end absolute inset-x-0 top-0 z-30 w-full h-10 bg-transparent cursor-pointer"
aria-label="模型切分终点帧"
/>
</div>
<p className="text-[10px] font-bold text-slate-400">

55
WebSite/src/index.css
View File

@@ -1 +1,56 @@
@import "tailwindcss";
.dual-range-input {
-webkit-appearance: none;
appearance: none;
pointer-events: none;
}
.dual-range-input::-webkit-slider-runnable-track {
height: 0;
background: transparent;
border: 0;
}
.dual-range-input::-moz-range-track {
height: 0;
background: transparent;
border: 0;
}
.dual-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
pointer-events: auto;
width: 20px;
height: 20px;
margin-top: -9px;
border-radius: 9999px;
border: 3px solid #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}
.dual-range-input::-moz-range-thumb {
pointer-events: auto;
width: 20px;
height: 20px;
border-radius: 9999px;
border: 3px solid #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}
.dual-range-input-start::-webkit-slider-thumb {
background: #2563eb;
}
.dual-range-input-start::-moz-range-thumb {
background: #2563eb;
}
.dual-range-input-end::-webkit-slider-thumb {
background: #f97316;
}
.dual-range-input-end::-moz-range-thumb {
background: #f97316;
}