master

分支 (1)

管理

管理

master

jilin__hzs
/
bus_new.html

<!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 rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			* {
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				/*禁止选中APP中的文字*/
			}

			body {
				background-color: #ECEBF3;
			}

			.bus_main {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
			}

			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}

			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}

			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}

			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}

			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}

			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}

			.bus_head {
				background-color: #5595D5;
				height: 70px;
				padding: 25px 20px;
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				position: fixed;
				top: 0px;
				/*层级低于所有页面遮罩层*/
				z-index: 98;
			}
			/*导航栏*/

			#bus_daohang {
				margin-top: 70px;
			}

			.weui_bar_item_on {
				border-bottom: 2px solid #5595D5;
				background-color: #FFFFFF !important;
				color: #5595D5 !important;
			}

			.weui_navbar_item {
				color: #666666;
				background-color: #FFFFFF;
				padding: 10px;
				height: 45px;
			}

			.weui_tab_bd_item {
				/*border: 3px solid;*/
				margin-top: 5px;
			}
			/*附近车站css*/

			#nearby_bus ul li h2 {
				border-top: 1px solid #DEDEDE;
				background-color: aliceblue;
				height: 40px;
				line-height: 38px;
			}

			#nearby_bus ul li {
				background-color: #FFFFFF;
			}

			#nearby_bus ul li h2>a {
				font-size: 1.1em;
				color: #666666;
				margin-left: 15px;
			}
			/*每个站牌标志*/

			.busStationIcon {
				display: block;
				float: left;
				width: 25px;
				height: 25px;
				background-color: #5595D5;
				border-radius: 27px;
				text-align: center;
				padding-top: 1px;
				margin-left: 1em;
				margin-top: 7px;
			}

			.busStationIcon img {
				width: 80%;
			}
			/*线路名内部详情 左 右*/

			#nearby_bus ul li p {
				border-bottom: 1px solid #EFEFEF;
				height: 80px;
				width: 95%;
				margin-left: 5%;
			}

			#nearby_bus ul li p:last-child {
				border: none;
			}

			#nearby_bus ul li:first-child {
				margin-bottom: 10px;
			}

			.lineMain_left {
				display: block;
				float: left;
				border-right: 2px solid #EBEBEB;
				width: 88%;
				height: 50px;
				margin-top: 15px;
			}

			.lineMain_right {
				display: block;
				float: left;
				width: 12%;
				height: 50px;
				margin-top: 15px;
				text-align: center;
			}

			.lineMain_right img {
				/*width: 60%;*/
				height: 44%;
				margin-top: 29%;
			}
			/*左侧显示信息的详情 1线路名 2下一站名称 3到达剩余时间*/

			.lineMain_left span {
				display: block;
			}

			.lineNameLeft {
				font-size: 1.35em;
			}

			.nextStopName {
				font-size: 14px;
				color: #777777;
			}

			.msg1 {
				float: left;
			}

			.msg2 {
				float: right;
				text-align: right;
				margin-right: 10px;
			}

			.timeRight {
				font-size: 0.8em;
			}

			.nextBusTime {
				font-size: 22px;
			}

			.nextBusLabel {
				font-size: 11px;
				color: #999999;
				position: relative;
				top: -5px;
			}
			/*剩余时间右上角的wifi符号*/

			.wifi_fh {
				position: absolute;
				width: 10px;
				margin-top: 3px;
			}
			/*附近站点底部的刷新按钮*/

			.bottom {
				position: fixed;
				bottom: 20px;
				width: 1%;
				margin-left: 45.5%;
			}

			.loadingStopBtn {
				background-color: #5595D5;
				width: 40px;
				height: 40px;
				text-align: center;
				border-radius: 40px;
			}

			.loadingStopBtn img {
				width: 20px;
				height: 20px;
				margin-top: 10px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="bus_main">
			<div class="bus_head">
				<div class="app_head_left">
					<a href="javascript:history.go(-1)" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">公交查询</p>
				</div>
			</div>
			<div class="bus_mid">
				<!--二级标题头-->
				<div class="weui_tab" id="bus_daohang">
					<!--选择步行公交自驾按钮区域-->
					<div class="weui_navbar" id="secTitle">
						<a href="#nearby_bus" class="weui_navbar_item weui_bar_item_on" id="boatListBtn">
							<b>附近站点</b>
						</a>
						<a href="#search_bus" class="weui_navbar_item" id="boatMainMsgBtn">
							<b>查询其他</b>
						</a>
					</div>
					<div class="weui_tab_bd">
						<div id="nearby_bus" class="weui_tab_bd_item weui_tab_bd_item_active">
							<!--<div class="sec_line">
								<div id="InputLine">
									<input type="text" id="boat_suggestId" size="20" />
									<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
								</div>
							</div>-->
							<ul>
								<li>
									<h2>
										<span class="busStationIcon">
											<img src="img/bus_new/bus_zhanpai.png"/>
										</span>
										<a>建设街</a>
									</h2>
									<p>
										<a class="lineMain_left">
											<span class="msg1">
												<label class="lineNameLeft">135路</label><br /><c class="nextStopName">下一站 · 德惠路</c>
											</span>
											<span class="msg2">
												<d class="timeRight"><b class="nextBusTime">3</b>
													<img class="wifi_fh" src="img/bus_new/shishi_Icon.png"/>
													分</d><br /><e class="nextBusLabel">下一班时间</e>
											</span>
										</a>
										<a class="lineMain_right">
											<img src="img/bus_new/changeFx.png" />
										</a>
									</p>
									<p>
										<a class="lineMain_left">
											<span class="msg1">
												<label class="lineNameLeft">135路</label><br /><c class="nextStopName">下一站 · 德惠路</c>
											</span>
											<span class="msg2">
												<d class="timeRight"><b class="nextBusTime">3</b>
													<img class="wifi_fh" src="img/bus_new/shishi_Icon.png"/>
													分</d><br /><e class="nextBusLabel">下一班时间</e>
											</span>
										</a>
										<a class="lineMain_right">
											<img src="img/bus_new/changeFx.png" />
										</a>
									</p>
									<p>
										<a class="lineMain_left">
											<span class="msg1">
												<label class="lineNameLeft">135路</label><br /><c class="nextStopName">下一站 · 德惠路</c>
											</span>
											<span class="msg2">
												<d class="timeRight"><b class="nextBusTime">3</b>
													<img class="wifi_fh" src="img/bus_new/shishi_Icon.png"/>
													分</d><br /><e class="nextBusLabel">下一班时间</e>
											</span>
										</a>
										<a class="lineMain_right">
											<img src="img/bus_new/changeFx.png" />
										</a>
									</p>
								</li>
								<li>
									<h2>
										<span class="busStationIcon">
											<img src="img/bus_new/bus_zhanpai.png"/>
										</span>
										<a>康平街</a>
									</h2>
								</li>
								<li>
									<h2>
										<span class="busStationIcon">
											<img src="img/bus_new/bus_zhanpai.png"/>
										</span>
										<a>西安大路</a>
									</h2>
								</li>
								<li>
									<h2>
										<span class="busStationIcon">
											<img src="img/bus_new/bus_zhanpai.png"/>
										</span>
										<a>御花园</a>
									</h2>
								</li>
								<li>
									<h2>
										<span class="busStationIcon">
											<img src="img/bus_new/bus_zhanpai.png"/>
										</span>
										<a>普庆路</a>
									</h2>
								</li>
							</ul>

						</div>
						<div id="search_bus" class="weui_tab_bd_item">
							222
						</div>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="loadingStopBtn">
					<img src="img/bus_new/loadingoBtn.png" />
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var h = document.documentElement.clientHeight - 70; //获取屏幕高度
			$("#fwjd_mid").height(h);

			//获取附近公交站点
			$(function() {
				//获取当前用户位置


				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "bus_near_station_info",
						"LON": "124.823111",
						"LAT": "45.115733",//松原火车站坐标
						"AREA": "sy"//二选一长春或者松原
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data);
						if(data.CODE == 1) {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								console.log(d);
							} else {
								errMD();
							}
						} else {
							$.alert("暂无数据", "提示");
						}

					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			});
		</script>
	</body>

</html>