.mapToolBox{ position: absolute; z-index: 100; right: 445px; top: 100px; transition: all 0.3s; .mapToolBtn{ width:40px; padding-bottom: 5px; border-radius:4px; display: flex; flex-direction: column; align-items: center; .mapToolBtnIcon{ width: 28px; height: 28px; padding: 7px; background: url(../../../../public//assets/icons/bg.png) 50% 50% / 100% 100% no-repeat; margin-top: 5px; cursor: pointer; } } .mapToolLayer{ position: absolute; top: 5px; right: 45px; width: 0; height: 550px; transition: width 0.3s ease-in-out; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); overflow: hidden; .mapToolLayerBox{ position: absolute; background: #fff; width: 300px; height: 100%; border-radius: 4px; top: 0; left: 0; overflow: hidden; .mapToolLayerBoxTitle{ height: 40px; background-color: #eee; display: flex; font-size: 15px; font-weight: bold; align-items: center; justify-content: space-between; padding: 0 10px; .mapToolLayerBoxTitleIcon{ cursor: pointer; } } .mapToolLayerBoxContent{ padding: 10px; display: flex; flex-flow: wrap; .mapToolLayerBoxTitle2{ font-size: 14px; height: 25px; width: 100%; display: flex; align-items: center; justify-content: left; border-bottom: 1px solid #bfbfbf; } .mapToolLayerBoxItem{ width: 50%; height: 40px; display: flex; align-items: center; .mapToolLayerBoxItemIcon{ width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin:0 5px 0 10px; } .mapToolLayerBoxItemIconDiv{ text-align: left; font-size: 12px; color: #595959; display: flex; flex:1; overflow: hidden; } .mapToolLayerBoxItemCheckBox{ margin-right: 25px; } } } } } }