#map{ width:95vw; height:45vh; margin:auto;/*水平居中*/ } #ppv_container{ width:100%; height:100%; } #ppv{ position:relative;/*作为内部子元素的定位基准*/ width:100%; height:100%; background: url("../StreetMap/icon/error-imaj.jpg") no-repeat; background-size: 100% 100%; /* 子水平居中 flex layout*/ display: -webkit-flex; /* Safari */ display: flex; justify-content:center; } #history_container{ position:absolute;/*在ppv内部定位*/ width:60%; height:40px; /* 子垂直居中 flex layout*/ display: -webkit-flex; /* Safari */ display: flex; justify-content:center; align-items: center; left: 20%; bottom: 18px; } .ppv_toolbar{ position:relative;/*在ppv内部定位*/ height: 62px; background-color: rgba(0,0,0,0.7); border: 1px solid rgba(165, 175, 181, 0.5); border-radius: 6px; padding-top: 7px; } .ppv_button{ background-color: transparent; height: 50px; width: 50px; margin-left: 10px; float: left; } .ppv_button:hover{ cursor: pointer; } .ppv_splite{ display: block; float: left; background: url("../images/assets/panoram/splite.png") no-repeat; height: 40px; width: 2px; } .ppv_button_special{ display: block; margin-left: 10px; margin-right:10px; } #play{ display: block; background: url("../images/assets/panoram/play.png") no-repeat; background-position: center; } #play.active{ background: url("../images/assets/panoram/pause.png") no-repeat; background-position: center; } #measurePoint{ display: block; background: url("../images/assets/panoram/location.png") no-repeat; } #measurePoint:hover{ background: url("../images/assets/panoram/location_hover.png") no-repeat; } #measureLength{ display: block; background: url("../images/assets/panoram/hdis.png") no-repeat; } #measureLength:hover{ background: url("../images/assets/panoram/hdis_hover.png") no-repeat; } #measureArea{ display: block; background: url("../images/assets/panoram/area.png") no-repeat; } #measureArea:hover{ background: url("../images/assets/panoram/area_hover.png") no-repeat; } #measureZ{ display: block; background: url("../images/assets/panoram/vdis.png") no-repeat; } #measureZ:hover{ background: url("../images/assets/panoram/vdis_hover.png") no-repeat; } #measureAngle{ display: block; background: url("../images/assets/panoram/angle.png") no-repeat; } #measureAngle:hover{ background: url("../images/assets/panoram/angle_hover.png") no-repeat; } #measureSlope{ display: block; background: url("../images/assets/panoram/slope.png") no-repeat; } #measureSlope:hover{ background: url("../images/assets/panoram/slope_hover.png") no-repeat; } #createPoint{ display: block; background: url("../images/assets/panoram/creatPoint.png") no-repeat; } #createPoint:hover{ background: url("../images/assets/panoram/creatPoint_hover.png") no-repeat; } #createPolyline{ display: block; background: url("../images/assets/panoram/creatline.png") no-repeat; } #createPolyline:hover{ background: url("../images/assets/panoram/creatLine_hover.png") no-repeat; } #createPolygon{ display: block; background: url("../images/assets/panoram/creatPolygon.png") no-repeat; } #createPolygon:hover{ background: url("../images/assets/panoram/creatPolygon_hover.png") no-repeat; } #pick{ display: block; background: url("../StreetMap/icon/pick.png") no-repeat; } #remove{ display: block; background: url("../StreetMap/icon/remove.png") no-repeat; } #time{ display: block; background: url("../images/assets/panoram/time.png") no-repeat; } #time:hover{ background: url("../images/assets/panoram/time_hover.png") no-repeat; } #chooseRoad{ display: block; background: url("../images/assets/panoram/changeRoad.png") no-repeat; } #chooseRoad:hover{ background: url("../images/assets/panoram/changeRoad_hover.png") no-repeat; } .history_item{ height:128px; margin:10px; } .history_item:hover{ border:1px solid #00F; } #lrs{ } .lrs_item{ margin:5px; }