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 { ToolBarMenu } from "./ToolBarMenu";
|
||||||
import { Model3DViewer } from "./ModelViewer";
|
import { Model3DViewer } from "./ModelViewer";
|
||||||
import useMultiResizeObserver from "./useMultiResizeObserver";
|
import useMultiResizeObserver from "./useMultiResizeObserver";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
ToolGroupManager,
|
ToolGroupManager,
|
||||||
|
@ -269,22 +270,23 @@ export const Viewer = () => {
|
||||||
<div className="w-full h-full flex flex-col relative">
|
<div className="w-full h-full flex flex-col relative">
|
||||||
<div ref={stackViewportRef} className="w-full flex-grow" />
|
<div ref={stackViewportRef} className="w-full flex-grow" />
|
||||||
{imageIds && (
|
{imageIds && (
|
||||||
<div className="absolute w-1/2 left-1/2 transform -translate-x-1/2 bottom-4">
|
<div className="absolute left-0 right-0 top-0 text-end">
|
||||||
<div>
|
|
||||||
{index + 1}/{imageIds.length}
|
|
||||||
</div>
|
|
||||||
<Slider
|
<Slider
|
||||||
value={[index]}
|
value={[index]}
|
||||||
min={0}
|
min={0}
|
||||||
max={imageIds.length - 1}
|
max={imageIds.length - 1}
|
||||||
step={1}
|
step={1}
|
||||||
|
className="stack-slider"
|
||||||
onValueChange={onChangeIndex}
|
onValueChange={onChangeIndex}
|
||||||
/>
|
/>
|
||||||
|
<div className="text-xs">
|
||||||
|
{index + 1}/{imageIds.length}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle={false} />
|
||||||
<ResizablePanel defaultSize={50}>
|
<ResizablePanel defaultSize={50}>
|
||||||
<div className="w-full h-full">
|
<div className="w-full h-full">
|
||||||
<Model3DViewer />
|
<Model3DViewer />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user