master

分支 (1)

管理

管理

master

demo
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<title>Bootstrap 模板</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 引入 Bootstrap -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

		<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>
		<style>
			body {
				width: 100%;
				height: 100%;
				position: absolute;
				padding: 0;
				margin: 0;
			}

			.clearfix {
				zoom: 1;
			}

			.clearfix:after {
				content: '';
				display: block;
				visibility: hidden;
				clear: both;
			}

			header {
				height: 80px;
				background: black;
				position: relative;
			}

			header .log {
				float: left;
			}

			header .log img {
				display: block;
				width: 200px;
				margin-top: 10px;
				margin-left: 15px;
			}

			.menu_div {
				float: left;
				margin-left: 25px;
				margin-top: 23px;
			}
				.menu_div a {
					display: block;
				}
					.icon_menu_button {
						position: relative;
						z-index: 99;
						display: block;
						height: 40px;
						width: 40px;
						background: url(img/icon_menu.png) white no-repeat;
						background-size: 40px 40px;
						border-radius: 25px;
					}
					.icon_menu_button:hover {
						background-color: darkcyan;
					}
			/**
			header div button {
				float: left;
				width: 40px;
				height: 40px;
				margin-top: 23px;
				margin-left: 25px;
				font-size: 10px;
				background: url(img/icon_menu.png) no-repeat white;
				background-size: 40px 40px;
				border: none;
				border-radius: 20px;
			}

			header div button:hover {
				background-color: #1abc9c;
			}
			**/
			.header_title {
				text-align: center;
				font-size: 40px;
				color: white;
				height: 80px;
				width: 100%;
				line-height: 80px;
				letter-spacing: 10px;
				font-family: "\5FAE\8F6F\96C5\9ED1", 微软雅黑, "Microsoft Yahei", 雅黑\9, Arial;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
			}

			.user_manage {
				float: right;
				color: white;
				position: relative;
				padding-top: 23px;
				padding-right: 30px;
				height: 80px;
			}

			.user_manage img {
				display: block;
				float: left;
			}

			.user_manage span {
				display: block;
				padding-left: 10px;
				color: white;
				font-size: 14px;
				float: left;
				margin-top: 10px;
			}

			.user_manage a {
				padding-left: 20px;
				float: left;
				display: block;
			}

				.car {
					position: relative;
					z-index: 99;
					display: block;
					height: 40px;
					width: 40px;
					background: url(img/car.png) white no-repeat 5px 5px;
					background-size: 30px 30px;
					border-radius: 25px;
				}
				.car:hover {
					background-color: #1E90FF;
				}

			.contain {
				height: auto;
				width: 100%;
				position: absolute;
				top: 80px;
				bottom: 0;
				//overflow: hidden;
			}

			aside {
				position: absolute;
				width: 240px;
				height: 100%;
				border-radius: 2px;
				background-color: #34495e;
				font-family: "\5FAE\8F6F\96C5\9ED1", 微软雅黑, "Microsoft Yahei", 雅黑\9, Arial;
			}
				aside div {
					padding: 0;
					margin: 0;
				}

					ul {
						list-style-type: none;
						padding: 0;
						margin: 0;
					}
						ul li {
							list-style: none;
							height: 60px;
							width: 240px;
							line-height: 65px;
							font-size: 16px;
							color: white;
							border-bottom: rgba(255,255,255,.05) 1px solid;
							position: relative;
							padding-left: 15px;
						}
						ul li:hover {
							cursor: pointer;
						}
						ul li:hover {
							background-color: forestgreen;
						}
						ul li a {
							text-decoration: none;
						}
						ul li a:hover {
							text-decoration: none;
						}
						ul li a span {
							color: white;
						}

						.icon_title {
							display: inline-block;
							height: 20px;
							width: 20px;
							vertical-align: middle;
							margin-right: 10px;
						}
						.icon_monitor {
							background: url(img/icon_monitor.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_machine {
							background: url(img/icon_machine.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_data {
							background: url(img/icon_data.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_alarm {
							background: url(img/icon_alarm.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_status {
							background: url(img/icon_status.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_manager {
							background: url(img/icon_manager.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_role {
							background: url(img/icon_role.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_goods {
							background: url(img/icon_goods.png) no-repeat;
							background-size: 20px 20px;
						}
						.icon_machine_manage {
							background: url(img/icon_machine_manage.png) no-repeat;
							background-size: 20px 20px;
						}
						.gt {
							display: inline-block;
							color: white;
							height: 15px;
							width: 15px;
							background: url(img/icon_gt.png) no-repeat;
							background-size: 15px 15px;
							vertical-align: middle;
							position: absolute;
							top: 25px;
							right: 20px;
						}


			#contentDiv {
				overflow: hidden;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin-left: 240px;
			}
			#contentDiv iframe {
				width: 100%;
				height: 100%;
				border: none;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="log"><img src="img/logo.png"></div>
			<!-- log -->
			<div class="menu_div"><a title="栏目" href="javascript:clickMenuIcon();"><i class="icon_menu_button"></i></a></div>
			<div class="header_title">车辆演示平台</div>
			<div class="user_manage clearfix"><img alt src="img/userManage_icon.png"><span>用户管理</span><a href="javascript:showTree();"><i class="car"></i></a></div>
		</header>
		<div class="contain">
			<aside id="aside">
				<div>
					<ul>
						<li onclick="javascript:showPage('pages/monitor.html');">
							<a href="#');"><i class="icon_monitor icon_title"></i><span>实时监控</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_machine icon_title"></i><span>车辆历史轨迹</span><i class="gt"></i></a>
						</li>
						<li onclick="javascript:showPage('pages/machine.html');">
							<a href="#"><i class="icon_data icon_title"></i><span>车辆数据</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_alarm icon_title"></i><span>报警信息</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_status icon_title"></i><span>发动机状态历史</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_manager icon_title"></i><span>管理员列表</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_role icon_title"></i><span>角色管理</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_goods icon_title"></i><span>供应商管理</span><i class="gt"></i></a>
						</li>
						<li>
							<a href="#"><i class="icon_machine_manage icon_title"></i><span>车辆管理</span><i class="gt"></i></a>
						</li>
					</ul>
				</div>
			</aside>
			<div id="contentDiv" >
				<iframe id="contentIframe" src="pages/monitor.html"></iframe>
				<!--
				<div id="map" class="container">
					<div class="map_header clearfix">
						<span>车辆总数: <label>75</label></span>
						<span>在线车辆数: <label>1</label></span>
						<span>故障车辆数: <label>1</label></span>
						<span>最后刷新时间: <label>2018-08-08 20:32:22</label></span>
						<input type="text" id="machineVin" placeholder="车辆VIN"/>
						<input type="button" id="map_search" value="搜索" />
						<input type="button" id="refresh" value="手动刷新"/>
					</div>
				</div>
				-->
			</div>

		</div>

		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://code.jquery.com/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<!--
        	<script src="js/bootstrap.min.js"></script>
        -->

		<script>
			var map = new AMap.Map('map', {
				zoom: 11, //级别
				center: [116.397428, 39.90923], //中心点坐标
				viewMode: '3D' //使用3D视图
			});
		</script>
		<!-- js -->
		<script>
			function clickMenuIcon(){
				var asideLeft = $("aside").css('left');
				if(asideLeft == '-240px'){
					$("aside").animate({left:0},300);
					$("#contentDiv").animate({marginLeft:'240px'},300);
				}else {
					$("aside").animate({left:'-240px'},300);
					$("#contentDiv").animate({marginLeft:0},300);
				}
			}
			/** 切换中间内容页面 **/
			function showPage(url){
				$("#contentIframe").attr("src",url);
			}
		</script>
	</body>

</html>