<!DOCTYPE html>
|
<html class="no-js css-menubar" lang="zh-cn">
|
|
<head>
|
<title>上海市道路交通环境监测平台</title>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<!-- 移动设备 viewport -->
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
|
<meta name="author" content="上海市道路交通环境监测平台 http://mars3d.cn" />
|
<!-- 360浏览器默认使用Webkit内核 -->
|
<meta name="renderer" content="webkit" />
|
<!-- Chrome浏览器添加桌面快捷方式（安卓） -->
|
<link rel="icon" type="image/png" href="img/favicon/favicon.png" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
<!-- Safari浏览器添加到主屏幕（IOS） -->
|
<link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<meta name="apple-mobile-web-app-title" content="火星科技 MarsGIS" />
|
|
<!--第三方lib-->
|
<script type="text/javascript" src="../lib/include-lib.js?time=20210803" libpath="../lib/" include="jquery"></script>
|
<link href="../css/style.css?time=20210803" rel="stylesheet" />
|
|
<style>
|
* {
|
padding: 0;
|
margin: 0;
|
box-sizing: border-box;
|
}
|
|
ul,
|
li {
|
list-style: none;
|
}
|
.header{
|
position: fixed;
|
display: flex;
|
height: 50px;
|
width: 100%;
|
padding: 10px;
|
background: #0d47a1;
|
color: #fff;
|
font-size: 16px;
|
box-shadow: 0 2px 4px rgba(83, 116, 167, 0.2);
|
vertical-align: middle;
|
}
|
.header > img{
|
width: 30px;
|
height: 30px;
|
padding: 2px;
|
margin-right: 6px;
|
background: #fff;
|
border-radius: 2px;
|
}
|
.header > .title{
|
flex: 1;
|
line-height: 30px;
|
}
|
.header > .user{
|
font-size: 12px;
|
line-height: 30px;
|
text-align: right;
|
}
|
|
.footbar {
|
height: 50px;
|
background: #fff;
|
box-shadow: 0 -1px 6px rgba(13, 71, 161, 0.25);
|
z-index: 9999999999999;
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
.footbar ul {
|
display: flex;
|
overflow: hidden;
|
margin: 7px 12px;
|
border-radius: 3px;
|
}
|
|
.footbar ul li {
|
flex: 1;
|
font-size: 14px;
|
line-height: 34px;
|
color: #333;
|
text-align: center;
|
border: 1px solid rgba(83, 116, 167, 0.2);
|
}
|
|
.footbar ul li.active {
|
font-weight: 500;
|
color: #e0f7fa;
|
background: #0d47a1;
|
border: 1px solid 0d47a1;
|
}
|
|
.hidden {
|
display: none;
|
}
|
|
.map-panel {
|
margin-top: 50px;
|
height: calc(100vh - 100px);
|
background: #fff;
|
overflow: hidden;
|
}
|
|
.map-panel-item {
|
width: 100%;
|
height: 100%;
|
}
|
iframe{
|
width: 100%;
|
height: 100%;
|
border: 0;
|
}
|
</style>
|
|
</head>
|
|
<body>
|
<div class="header">
|
<img src="../img/logo.png">
|
<div class="title">上海市道路交通环境监测平台</div>
|
<div class="user"><span id="name_"></span></div>
|
</div>
|
<div class="map-panel" id="a1">
|
<!--道路查询 开始-->
|
<div class="map-panel-item">
|
<iframe src="road_search.html"></iframe>
|
</div>
|
<!--道路查询 结束-->
|
|
<!--道路展示 开始-->
|
<div class="map-panel-item">
|
<iframe src="road_show.html"></iframe>
|
</div>
|
<!--道路展示 结束-->
|
</div>
|
|
<!--footbar 开始-->
|
<div class="footbar">
|
<ul btn='btn' data-target="#a1">
|
<li class="active"><i class="fa fa-search"></i> 道路查询</li>
|
<li><i class="fa fa-road"></i> 道路展示</li>
|
</ul>
|
</div>
|
<!--footbar 结束-->
|
|
<script>
|
$.fn.$btnId = function () {
|
$(this).children().click(function () {
|
$(this).addClass('active').siblings().removeClass('active')
|
// console.log($(this).index())
|
var $index = $(this).index()
|
var $Id = $(this).parent().data('target')
|
// console.log($Id)
|
$($Id).children().eq($index).show().siblings().hide()
|
})
|
}
|
$("[btn='btn']").$btnId()
|
$("#name_").html(localStorage.getItem("name"));
|
</script>
|
</body>
|
|
</html>
|
