diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.less b/react-ui/src/pages/Workspace/components/QuickStart/index.less index 93ce8d54..4fba7728 100644 --- a/react-ui/src/pages/Workspace/components/QuickStart/index.less +++ b/react-ui/src/pages/Workspace/components/QuickStart/index.less @@ -25,8 +25,6 @@ &__canvas { position: relative; - // width: 1223px; - width: 100%; height: 610px; transform-origin: center left; @@ -35,6 +33,7 @@ display: flex; flex-direction: column; align-items: center; + width: 60px; color: @primary-color; font-size: @font-size; } diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx index 7e1bccf5..d7078a6c 100644 --- a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx +++ b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx @@ -9,18 +9,22 @@ import styles from './index.less'; function QuickStart() { const navgite = useNavigate(); const [scale, setScale] = useState(1); - const [space, setSpace] = useState(36); + const [space, setSpace] = useState(29); + const [canvasWidth, setCanvasWidth] = useState('100%'); useEffect(() => { const changeScale = () => { - // body 的宽度 - 菜单的宽度 - 两个 padding - 右边用户管理的宽度 - 右边用户管理的 marginLeft, - const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15; + // body 的宽度 - 菜单的宽度 - 两个 padding - 右边用户管理的宽度 - 右边用户管理的 marginLeft - 滚动条的宽度, + const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15 - 8; if (width >= 1223) { const spaceX = (width - 192 * 5 - 60) / 7; setSpace(spaceX); + setCanvasWidth('100%'); setScale(1.0); } else { const ratio = width / 1223; + setCanvasWidth('1223px'); + setSpace(29); setScale(ratio); } }; @@ -45,7 +49,7 @@ function QuickStart() {