/*定义滚动条高宽及背景
|
高宽分别对应横竖滚动条的尺寸*/
|
::-webkit-scrollbar {
|
width: 6px;
|
background-color: #F5F5F5;
|
}
|
|
/*定义滚动条轨道
|
内阴影+圆角*/
|
::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
background-color: #F5F5F5;
|
}
|
|
/*定义滑块
|
内阴影+圆角*/
|
::-webkit-scrollbar-thumb {
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
background-color: #85afff;
|
}
|
|
html,
|
body {
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
}
|
|
body {
|
opacity: 0;
|
animation: page-fade-in 500ms forwards;
|
}
|
|
@keyframes page-fade-in {
|
0% {
|
opacity: 0;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
|
.query_bar {
|
height: calc(10% - 40px);
|
padding: 20px 30px;
|
width: 70%;
|
float: right;
|
}
|
|
.query_bar div {
|
float: right;
|
position: relative;
|
top: 50%;
|
transform: translateY(-50%);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.query_bar>div:nth-child(1) {
|
width: 28%;
|
color: #00d8ff;
|
font-size: 1.375rem;
|
position: relative;
|
margin-right: 2%;
|
text-align: right;
|
}
|
|
.map_content {
|
width: calc(100%);
|
height: calc(100%);
|
overflow: auto;
|
}
|
|
.map_content>div {
|
position: relative;
|
width: calc(100% - 2px);
|
height: calc(100% - 2px);
|
border: 1px solid rgba(231, 234, 243, 1);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
|
#map {
|
width: 100%;
|
height: 100%;
|
z-index: 9;
|
}
|
|
.map_tool {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 10;
|
}
|
|
.map_tool_search {
|
position: absolute;
|
top: 20px;
|
left: 20px;
|
width: 22%;
|
height: 50px;
|
background-image: url(../images/search.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
z-index: 100;
|
}
|
|
#mapSearch {
|
width: 25px;
|
position: absolute;
|
top: 50%;
|
right: 14px;
|
transform: translateY(-50%);
|
cursor: pointer;
|
z-index: 100;
|
}
|
|
#mapSearchText {
|
width: 100%;
|
height: 100%;
|
background-color: rgba(3, 212, 209, 0);
|
border: 0;
|
color: white;
|
}
|
|
#mapSearchText::-webkit-input-placeholder {
|
color: white;
|
}
|
|
#mapSearchText::-moz-placeholder {
|
/* Mozilla Firefox 19+ */
|
color: white;
|
}
|
|
#mapSearchText:-moz-placeholder {
|
/* Mozilla Firefox 4 to 18 */
|
color: white;
|
}
|
|
#mapSearchText:-ms-input-placeholder {
|
/* Internet Explorer 10-11 */
|
color: white;
|
}
|
|
.map_tool_tool {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
width: 25%;
|
height: 50px;
|
background-image: url(../images/search.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
z-index: 100;
|
}
|
|
.map_tool_facility {
|
position: absolute;
|
top: 50%;
|
left: 20px;
|
transform: translateY(-50%);
|
z-index: 100;
|
}
|
|
.map_tool_facility>div {
|
width: 180px;
|
height: 100px;
|
background-image: url(../images/map-facility.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
position: relative;
|
}
|
|
.map_tool_facility>div>div {
|
position: relative;
|
height: 100%;
|
width: 100px;
|
color: white;
|
}
|
|
.map_tool_facility>div>div>img {
|
position: absolute;
|
left: 50%;
|
top: 25%;
|
transform: translateX(-50%);
|
}
|
|
.map_tool_facility>div:nth-child(1)>div>img {
|
top: 22%;
|
}
|
|
.map_tool_facility>div:nth-child(2)>div>img {
|
top: 30%;
|
}
|
|
.map_tool_facility>div:nth-child(4)>div>img {
|
top: 24%;
|
}
|
|
.map_tool_facility>div>div>span {
|
position: absolute;
|
display: inline-block;
|
left: 50%;
|
top: 55%;
|
transform: translateX(-50%);
|
}
|
|
.map_tool_facility>div>p {
|
position: absolute;
|
right: 20px;
|
top: 50%;
|
transform: translateY(-50%);
|
color: #1ff1ff;
|
font-size: 2.5rem;
|
/* font-family: "液晶数字字体"; */
|
}
|
|
.map_tool_monitor {
|
position: absolute;
|
min-height: 100px;
|
right: 20px;
|
width: 20%;
|
top: 80px;
|
min-width: 300px;
|
background-image: url(../images/monitor-top.png);
|
background-repeat: no-repeat;
|
background-size: 100% 40px;
|
z-index: 100;
|
display: none;
|
}
|
|
.monitorClose {
|
position: absolute;
|
width: 60px;
|
height: 22px;
|
right: 0px;
|
top: 0px;
|
}
|
|
.map_tool_monitor>div:nth-child(1) span {
|
position: absolute;
|
color: white;
|
font-size: 0.8rem;
|
width: 100%;
|
top: 40%;
|
transform: translateY(-50%);
|
text-align: center;
|
display: inline-block;
|
}
|
|
.map_tool_monitor>div.monitorClose img {
|
position: absolute;
|
width: 100%;
|
top: 15px;
|
right: 0px;
|
transform: translateY(-50%);
|
cursor: pointer;
|
z-index: 12;
|
}
|
|
.map_tool_monitor>div.monitorClose p {
|
position: absolute;
|
color: rgb(3, 212, 209);
|
font-size: 0.8rem;
|
width: 100%;
|
top: 15px;
|
right: -8px;
|
transform: translateY(-50%);
|
text-align: center;
|
display: inline-block;
|
z-index: 11;
|
}
|
|
.mon-title {
|
width: 120px;
|
height: 40px;
|
background: url(../images/monitor-title.png) no-repeat;
|
background-size: 100% 100%;
|
text-align: center;
|
color: #fff;
|
line-height: 30px;
|
}
|
|
.map_tool_monitor>div.map_tool_monitor_content {
|
width: 100%;
|
background-image: url(../images/monitor-bottom.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
min-height: 100px;
|
height: auto;
|
overflow: hidden;
|
z-index: 100;
|
}
|
|
.map_tool_monitor_content .map_tool_box>div {
|
width: calc(100% - 30px);
|
height: 60px;
|
margin: 10px;
|
background-image: url(../images/61.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
position: relative;
|
}
|
|
.map_tool_monitor_content .map_tool_box>div>div {
|
width: 100px;
|
text-align: center;
|
position: relative;
|
top: 50%;
|
transform: translateY(-50%);
|
float: left;
|
}
|
|
.map_tool_monitor_content .map_tool_box>div>div>span:nth-child(1) {
|
color: white;
|
}
|
|
.map_tool_monitor_content .map_tool_box>div>div>span:nth-child(3) {
|
color: #2ca3fd;
|
font-size: 1.5rem;
|
}
|
|
.map_tool_monitor_content .map_tool_box>div>p {
|
width: calc(100% - 110px);
|
float: left;
|
position: relative;
|
color: white;
|
top: 50%;
|
transform: translateY(-50%);
|
text-align: right;
|
padding-right: 10px;
|
font-size: 1.25rem;
|
}
|
|
.map_tool_monitor_content .map_tool_box>div>p>span {
|
color: #1ff1ff;
|
font-size: 1.6rem;
|
padding-right: 5px;
|
}
|
