yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
			/*搜索框*/
			
			.searchBox {
				background-color: #eee;
				padding: 0px 8px;
				position: relative;
				margin-top: 10px;
			}
			
			.mui-search .mui-placeholder {
				text-align: left;
				left: 5px;
			}
			
			input[type=search] {
				background: #fff;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				color: #777;
			}
			
			.searchBtnBox {
				position: absolute;
				right: 8px;
				top: 0px;
				z-index: 3;
			}
			
			#searchBtn {
				letter-spacing: 3px;
				line-height: 1.6;
				border: none;
			}
			
			.cutline {
				display: inline-block;
				border-left: .08em dashed #777;
				margin-top: 6px;
			}
			/**/
			.machine{
				background: #fff;
			}
			.machine .mui-col-xs-3{
				text-align: center;
			    margin: 5px 0;
			}
			.machine .mui-col-xs-3 i{
				font-size: 30px;
			    line-height: 40px;
			    color: #00acec;
			}
			.borderRight:after{
			    content: '';
			    position: absolute;
			    height: 30px;
			    width: 1px;
			    background: #c5c5c5;
			    right: 0;
			    top: 21px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">历史预警列表</h1>
		</header>
		<div class="mui-content">
			<div class="mui-row machine">
				<div class="mui-col-xs-3 borderRight">
					<i class="fa fa-chain" aria-hidden="true"></i>
					<p>接入224台</p>
				</div>
				<div class="mui-col-xs-3 borderRight">
					<i class="fa fa-bolt" aria-hidden="true"></i>
					<p>预警224台</p>
				</div>
				<div class="mui-col-xs-3 borderRight">
					<i class="fa fa-refresh" aria-hidden="true"></i>
					<p>运行24台</p>
				</div>
				<div class="mui-col-xs-3">
					<i class="fa fa-power-off" aria-hidden="true"></i>
					<p>待机4台</p>
				</div>
			</div>
		    <div class="searchBox">
				<div class="mui-input-row mui-search">
					<input type="search" id="searchInp" placeholder="请输入设备ID">
				</div>
				<div class="searchBtnBox">
					<span class="cutline">&nbsp;</span>
					<button id="searchBtn">搜索</button>
				</div>
			</div>
			<ul class="mui-table-view" id="equiplist">
				<li class="mui-table-view-cell" data-id="8955555">
					<a class="mui-navigate-right">
						<div>设备ID：89556522222</div>
						<div>用户名：89556522222</div>
					</a>
				</li>
				<li class="mui-table-view-cell" data-id="8955555">
					<a class="mui-navigate-right">
						<div>设备ID：89556522222</div>
						<div>用户名：89556522222</div>
					</a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			//预警详情
			mui('#equiplist').on('tap','li',function(){
				var imei = this.getAttribute('data-id');
				mui.openWindow({
					url:'warningDetial.html',
					id:'warningDetial',
					extras:{
						imei:imei
					}
				})
			})
		</script>
	</body>

</html>