.boxDesignContent { display: flex; justify-content: space-between; width: 100%; height: 500px; align-items: center; } .boxDesignContent .tabs { width: 30%; height: 100%; } .boxDesignContent .content { width: 70%; display: flex; align-items: center; height: 100%; } .boxDesignContent .content .boxTree { width: 20%; border: 1px solid #00ff55; overflow-y: auto; height: 500px; } .boxDesignContent .content .design { width: 800px; height: 500px; border: 1px solid red; overflow-y: auto; position: relative; } .boxDesignContent .content .design .svgContent { width: 50%; height: 65%; margin: 0 auto; margin-top: 150px; } .boxDesignContent .content .design .svgContent .svgBox { width: 100%; height: 60%; background-color: #00eeff; } .boxDesignContent .content .design .boxTop { display: flex; align-items: center; justify-content: space-between; width: 90%; } .boxDesignContent .content .design .boxTop .boxFlex { display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; } .boxDesignContent .content .design .boxLeft { width: 180px; display: flex; flex-wrap: wrap; flex-direction: column; position: absolute; left: 0; top: 50%; } .boxDesignContent .content .design .boxRight { width: 180px; display: flex; flex-wrap: wrap; flex-direction: column; position: absolute; right: 0; top: 50%; } .svgContainer { width: 100%; height: 100%; object-fit: contain; /* 确保 SVG 保持比例 */ }