.boxDesignContent { display: flex; justify-content: space-between; width: 100%; height: 500px; align-items: center; .tabs { width: 30%; height: 100%; } .content { width: 70%; display: flex; align-items: center; height: 100%; .boxTree { width: 20%; border: 1px solid rgb(0, 255, 85); overflow-y: auto; height: 500px; } .design { width: 800px; height: 500px; border: 1px solid red; overflow-y: auto; position: relative; .svgContent { width: 50%; height: 65%; margin: 0 auto; margin-top: 150px; .svgBox { width: 100%; height: 60%; background-color: rgb(0, 238, 255); } } .boxTop { display: flex; align-items: center; justify-content: space-between; width: 90%; .boxFlex { display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; } } .boxLeft { width: 180px; display: flex; flex-wrap: wrap; flex-direction: column; position: absolute; left: 0; top: 50%; } .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 保持比例 */ }