.menu-bar li:nth-of-type(2) span{ background: url("../img/line.png") 0 40px no-repeat; background-size: 100% 15px; } /*a标签默认样式去除*/ a{ color: #fff; text-decoration:none; } a:link,a:visited,a:hover,a:active{ color: #fff; text-decoration:none; } /*******************************************************侧边导航*/ .model-left{ width:390px; height: calc(100% - 150px); position: absolute; top:80px; left: 28px; border-top-left-radius:8px ; border-top-right-radius:8px ; overflow: hidden; box-sizing: border-box; } .ser_tab{ height: 40px; line-height: 40px; font-size: 16px; color:#fff; background: rgba(30,43,103,.5); border:1px solid #00286a; border-radius:8px; cursor: pointer; } .ser_tab div{ float: left; height: 39px; /*border-right:1px solid #1c83f6;*/ padding: 0 18px; } .park-heattit{ border-right: 1px solid #093b8d; border-left: 1px solid #093b8d; } .query-icon{ margin-top: 10px; float: left; width: 20px; height: 20px; background-image: url("../img/modelleft_icon.png"); background-size: 79px 39px; background-position-x: 0px; background-position-y: 0px; } .heattit-icon{ margin-top: 10px; float: left; width: 20px; height: 20px; background-image: url("../img/modelleft_icon.png"); background-size: 79px 39px; background-position: -30px; background-position-y: 0px; } .areatit-icon{ margin-top: 11px; margin-right: 4px; float: left; width: 20px; height: 20px; background-image: url("../img/modelleft_icon.png"); background-size: 79px 39px; background-position-x: 20px; background-position-y: 0px; } .park-active{ color: #fff; background: rgb(30,43,103); } .tab-active{ background-position-y: 19px; } /*******************************************************右下角图例*/ .freespace{ position: absolute; height: 144px; width: 136px; bottom: 75px; right: 50px; color: #fff; border: 1px solid #00286a; border-radius: 8px 8px 0 0; } .freespace .freespace-tit{ width: 136px; height: 32px; line-height: 32px; text-align: center; font-size: 14px; background-color: #1e2b67; border-radius: 8px 8px 0 0; } .freespace .freespace-content{ height: 112px; width: 136px; background-color:rgba(30,43,103,0.5); font-size: 12px; padding: 12px; } .freespace .freespace-content .freespace-msg{ height: 30px; line-height: 30px; } .freespace-msg .msg-common{ width: 6px; height: 6px; display: inline-block; margin-top: 12px; margin-right: 6px; border-radius: 50%; } .freespace-msg .msg-bgfull{ background:#ff0000; opacity: 0.9; } .freespace-msg .msg-bgfew{ background:#f1f000; opacity: 0.9; } .freespace-msg .msg-bgeough{ background:#15ff00; opacity: 0.9; } /*body,html{*/ /*position: relative;*/ /*}*/ #allmap { height: 100%; width: 100%; } /*时间轴*/ .time_con{ height: 450px; width: 148px; position: absolute; left: 28px; bottom: 75px; /*//margin-top: -280px;*/ } .time_area{ position: relative; width: 72px; height: 100%; float: left; } .time_l{ margin-right: 4px; } .time_line{ width: 8px; height: 100%; position: absolute; background: rgba(30,43,103,.6); border-radius: 5px; } .time_line_active{ background: rgb(30,43,103); } .time_line_l{ right: 0; } .time_ul_l,.time_ul_r{ height: 100%; margin-bottom: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -o-box-orient: vertical; box-orient: vertical; } .time_ul_l li,.time_ul_r li{ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -o-box-flex: 1; box-flex: 1; /* box-pack */ -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -o-box-pack: justify; box-pack: justify; /* box-align */ -webkit-box-align: justify; -moz-box-align: justify; -ms-flex-align: justify; -o-box-align: justify; box-align: justify; /*height: 100%;*/ line-height: 64px; position: relative; } .time_ul_r li{ padding-left: 16px; line-height: 34px; } .time_date{ display: inline-block; width: 56px; height: 28px; border-radius: 4px; line-height: 28px; background: rgba(30,43,103,.6); text-align: center; color: rgba(255,255,255,.2); cursor:pointer; } .time_date_r{ display: inline-block; width: 56px; height: 28px; border-radius: 4px; line-height: 28px; background: rgba(30,43,103,.6); text-align: center; color: rgba(255,255,255,.2); cursor:pointer; } .time_date_all_active{ background: rgb(30,43,103); color: rgb(255,255,255); } .time_date_active{ background: #1c83f6; color: rgb(255,255,255); } .time_circle{ right: 0; top:27px; position: absolute; box-sizing: content-box; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: rgba(158,216,242,.3); /*border: 3px solid rgba(235,248,254,0);*/ } .time_circle_r{ left: 0; top:15px; position: absolute; box-sizing: content-box; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: rgba(158,216,242,.3); } .time_circle_r_active{ left:-3px; top:12px; background: rgba(158,216,242,.1); border: 3px solid rgba(235,248,254,.3); } .time_circle_l_active{ right:-3px; top:24px; background: rgba(158,216,242,.1); border: 3px solid rgba(235,248,254,.3); }