.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: 580px; transition: width 0.3s ease-in-out; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); overflow: hidden; .mapToolLayerBox{ position: absolute; background: #1c3965f0; border: 1px solid #2755a1; width: 160px; height: 100%; border-radius: 4px; top: 0; left: 0; overflow: hidden; .mapToolLayerBoxTitle{ height: 40px; border-bottom: 1px solid #2755a1; display: flex; font-size: 14px; font-weight: bold; align-items: center; justify-content: space-between; padding: 0 10px; .mapToolLayerBoxTitleIcon{ font-size: 13px; cursor: pointer; } } .mapToolLayerBoxContent{ padding: 10px; display: flex; flex-flow: wrap; .hoverBg:hover{ background: #23477cf0; } .mapToolLayerBoxItem{ color: #ffffff; width: 100%; height: 27px; display: flex; align-items: center; cursor: pointer; .mapToolLayerBoxItemIcon{ width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin:0 10px 0 10px; } .mapToolLayerBoxItemIcon2{ width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin:0 5px 0 5px; } .mapToolLayerBoxItemIconDiv{ text-align: left; font-size: 12px; color: #ffffff; display: flex; flex:1; overflow: hidden; } .mapToolLayerBoxItemCheckBox{ margin-right: 25px; .ant-checkbox-inner{ background-color: transparent; } color: #ffffff; } .mapToolLayerBoxItemCheckBox2{ .ant-checkbox-inner{ background-color: transparent; } color: #ffffff; } } } } } }