.home, #map-container { width: 100%; height: 100%; margin: 0; padding: 0; } .draw { position: absolute; top: 0; right: 0; width: 0; height: 100%; .draw-warp { position: relative; right: 0; height: 100%; transition: right 0.6s; &.show { right: 990px; } .draw-button { position: absolute; top: 20px; left: -36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #fff; background-color: #1890ff; border-radius: 2px 0 0 2px; .draw-button-icon { transform: rotate(0); transition: all 0.3s; } & .active { transform: rotate(180deg); } } .draw-content { box-sizing: border-box; width: 990px; height: 100%; padding: 20px; background-color: #fff; box-shadow: 0 0 12px rgb(0 0 0 / 30%); } } }