html, body, .mapView { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; -webkit-touch-callout: none; /* iOS Safari */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard syntax */ } .top { height: 60px; width: calc(100% - 20px); background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78)); padding: 10px; display: flex; justify-content: space-between; } .top_left { width: 320px; height: 100%; } .top_right { height: 100%; display: flex; } .textp1 { font-size: 30px; font-family: Microsoft YaHei; font-weight: bold; color: #ffffff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; } .textp2 { font-size: 14px; font-family: Microsoft YaHei; font-weight: 300; color: #ffffff; display: flex; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 2px; } .menu { width: 70px; height: 100%; margin-right: 15px; border-radius: 10px; vertical-align: central; text-align: center; cursor:pointer; box-sizing: border-box; } .menu img { width: 45px; height: 40px; } .menu span { color: #fff; display: inline-block; vertical-align: middle; } .content { height: calc(100% - 60px); width: 100%; } .left_content { width: 320px; height: 100%; background-color: white; border-right: 1px solid #F7F7F7; box-sizing: border-box; float: left; } .right_content { width: calc(100% - 325px); height: 100%; box-sizing: border-box; float: left; } .rb { border-right: 1px solid #A0A0A0; border-bottom: 1px solid #A0A0A0; } #TEInfoEx { width: calc(100% - 8px); height: calc(100% - 35px); box-sizing: border-box; } #TEWinEx { width: 100%; height: 100%; box-sizing: border-box; } .fieldset { padding: 10px 0 10px 8px; height: 100%; width: 100%; box-sizing: border-box; } #layers { padding: 5px; box-sizing: border-box; max-height: 870px; overflow: auto; } .Logo{ width: 323px; height: 100%; } .logoImg{ width:100%; height: 100% }