.padd0 { padding: 0; } .my-container { height: 100vh; box-sizing: border-box; padding-bottom: 30px; background: #fff; } .my-container>.row, .my-container>.row>div { height: 100%; } #myTab{ margin-bottom: 0; } .right-map { height: 100%; display: flex; } .riskPointLevel{ float: right; } .map-container { height: 100%; flex: 1; overflow: hidden; position: relative; border: 1px solid #ddd; } .my-marker-box>ul { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; list-style-type: none; padding: 10px 0 0 0; margin: 0; } .my-marker-box>ul>li { width: 100%; /*height: 100%;*/ border: 1px solid #ddd; margin: 0 10px 16px 2px; position: relative; } .my-marker-box>ul>li>img { width: 25px; height: 25px; cursor:pointer; } .my-marker-box>ul>li>p { display: inline-block; } .my-marker-box>ul>li>span { display: block; width: 20px; height: 20px; position: absolute; right: -10px; top: -12px; background: #fff; color: red; border-radius: 50% !important; border: 1px solid #ddd; text-align: center; line-height: 14px; font-size: 20px; cursor: pointer; } .my-marker-box>ul>li>span:hover{ background: red; color: #fff; } .form-box { display: none; width: 200px; height: 100%; background: yellow; } #jobIconList ,#facilityIconList{ list-style-type: none; padding: 0; display: flex; flex-wrap: wrap; } #facilityIconList:before, #jobIconList:before { display: table; content: ''; clear: both; } #facilityIconList:after, #jobIconList:after { display: table; content: ''; clear: both; } #facilityIconList>li, #jobIconList>li { width: 100%; padding: 0 6px; position: relative; margin-bottom: 10px; } #facilityIconList>li>a, #jobIconList>li>a { display: inline-block; /*display: block;*/ width: 25px; height: 25px; border-radius: 50%; } #facilityIconList>li>span, #jobIconList>li>span { font-size: 12px !important; } #facilityIconList>li>a>img, #jobIconList>li>a>img { width: 100%; height: 100%; } .iconCategory { float: none !important; padding: 10px 0; margin-bottom: 10px; width:100%; } .iconCategory_ { float: none !important; width: 100%; font-size: 16px; color: #00a198; } .tab-content { border: 1px solid #ddd; border-top: none; padding: 10px; } .icon-active { width: 40px; border: 2px solid #25afe5; height: 40px; } .icon-form-box { padding: 10px; margin: 0 6px; width: 100%; } .my-form-item { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 6px; } .my-form-item>label { margin: 0; } .marker-name{ width:70px; } #riskPointName{ border:none; overflow: hidden; } #my-marker { width: 40px; height: 40px; border: 1px solid #ddd; } #my-marker>img { width: 100%; height: 100%; } .riskp-detail{ margin: 0 0 10px 0; font-size: 18px; } .popup-icon-box>ul{ list-style-type: none; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px; } .popup-icon-box>ul>li{ width: 100%; /*width:36px;*/ height: 36px; margin-left: 5px; /*border-radius: 50%;*/ position: relative; } .popup-icon-box>ul>li>img{ width:100%; height: 100%; border-radius: 50%; cursor:pointer; } .danger-title{ font-size: 16px; } .add-subIcon{ width:36px; height: 36px; border:1px dashed #ddd !important; text-align: center; line-height: 32px; font-size: 50px; color: #ddd; } .my-btn-group{ width:100%; } .my-btn-group>a{ width:50%; }