ui: 修改stackviewport滚动条样式
This commit is contained in:
parent
dff24401bf
commit
e5bf5685cf
11
apps/desktop/src/pages/Viewer/index.css
Normal file
11
apps/desktop/src/pages/Viewer/index.css
Normal file
|
@ -0,0 +1,11 @@
|
|||
.stack-slider {
|
||||
>span:first-child{
|
||||
height: 8px;
|
||||
border-radius: 0;
|
||||
}
|
||||
[role="slider"] {
|
||||
width: 16px;
|
||||
height: 8px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
|
@ -34,6 +34,7 @@ import { stackViewportId } from "./StackViewer/index.config";
|
|||
import { ToolBarMenu } from "./ToolBarMenu";
|
||||
import { Model3DViewer } from "./ModelViewer";
|
||||
import useMultiResizeObserver from "./useMultiResizeObserver";
|
||||
import "./index.css";
|
||||
|
||||
const {
|
||||
ToolGroupManager,
|
||||
|
@ -269,22 +270,23 @@ export const Viewer = () => {
|
|||
<div className="w-full h-full flex flex-col relative">
|
||||
<div ref={stackViewportRef} className="w-full flex-grow" />
|
||||
{imageIds && (
|
||||
<div className="absolute w-1/2 left-1/2 transform -translate-x-1/2 bottom-4">
|
||||
<div>
|
||||
{index + 1}/{imageIds.length}
|
||||
</div>
|
||||
<div className="absolute left-0 right-0 top-0 text-end">
|
||||
<Slider
|
||||
value={[index]}
|
||||
min={0}
|
||||
max={imageIds.length - 1}
|
||||
step={1}
|
||||
className="stack-slider"
|
||||
onValueChange={onChangeIndex}
|
||||
/>
|
||||
<div className="text-xs">
|
||||
{index + 1}/{imageIds.length}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizableHandle withHandle={false} />
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="w-full h-full">
|
||||
<Model3DViewer />
|
||||
|
|
Loading…
Reference in New Issue
Block a user