wcs
/
agv-summoner


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>SIMC 终端控制系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style>
			.mui-content-padded{
			  	padding: 10px 0 10px 0;
			  }
			.mui-col{  
				padding-right: 4px; 
				display: inline-block;  
				padding: 2px 5px;
			}  
			.mui-btn-royal{
					background-color: rgba(141, 157, 199, 0.5);
					border:1px solid rgba(141, 157, 199, 0.5)
			}
			.active {
				background-color: #d4d4d4;
				color:white;
			}
			.up{
				background: #0087c5 url(img/top.svg) no-repeat 50% 10%;
			}
			.down{
				background: #0087c5 url(img/bottom.svg) no-repeat 50% 10%;
			}
			.shan{
				width: 0; 
				height: 0; 
				border:100px solid cornflowerblue;
				border-right: 100px solid greenyellow; 
				border-left:  100px solid greenyellow; 
				border-radius: 50%;
				transform: rotate(-90deg)
			}
			.contents{
				width: 260px;height: 260px;position: relative;margin:80px 0 auto 30px;
			   /* box-shadow: 0px 0px 110px #2e3342 inset,0px 0px 5px #2e3342; */
			}
			.quartercircle{
				position:absolute;width: 130px;height: 130px;-webkit-border-radius: 130px 0 0 0;
			}
			.divLeft{
				top: 25%;left: -10%; transform:rotate(-45deg);background-color: #546f7a ;
			}
			.divTop{
				top: -10%;left: 25%; transform:rotate(45deg);background-color: #546f7a ;
			}
			.divRight{
				top: 25%;left: 60%;transform:rotate(135deg);background-color: #546f7a ;
			}
			.divBottom{
				top: 60%;left: 25%;transform:rotate(-135deg);background-color: #546f7a ;
			}
			.circle{
			  width:40%;height:40%;position: absolute;z-index: 100;top:0%;left:0%;bottom:0;right: 0;margin:auto;border-radius: 100%;background-color: #546f7a;text-align: center;
				  border: 2px solid #2e3342;
				  color:#fff
			}
			.circle span{
				display: block;width: 100%;height: 100%;line-height: 130px;font-size: 24px;
				margin: -13px auto;
				text-align: center;
			}
			.quartercircle a{
				position: absolute;width: 100%;height: 100%;
				background: #888888;
				bottom: 0;
				right: 0;
				transform:rotate(-45deg);
			}
			.quartercircle a:hover{
				background: #8BFF7C;
				bottom: 0;
				right: 0;
			}
			.divBottom:active{
				background: #6641e2;
			}
			.divTop:active{
				background: #6641e2;
			}
			.divLeft:active{
				background: #6641e2;
			}
			.divRight:active{
				background: #6641e2;
			}
			.circle:active{
				background: #6641e2;
			}
			#ok:active{
				background: #546f7a;
			}
			.div {
				width: 100px;
				height: 100px;
				text-align: center;
				margin-top:10px;
				background:  url(img/stop.png) no-repeat 50% 10%;
			}	
			.circle {
				border-radius: 50%;
			}
			* { touch-action: none; }
		</style>
	</head>
	<body style="background-image: url(img/bg.png);">
		<div id="title" style="height: 4%;text-align: center;padding-top: 10px;padding-bottom: 5px;background: url(img/title_bg.png) no-repeat 0 17px;background-size:100%;">
			<a style="color: #FFFFFF;font-size: 20px;">华力西曼克</a>
		</div>
		<div class="mui-content-padded" style="margin-top: 0px;">
			<div class="mui-row" id="goods" style="margin-right: 0;height: auto;">
				<div class="mui-col mui-col-xs-12" style="height: 50px;">
					<div class="mui-col mui-col-xs-4"></div>
					<div class="mui-col mui-col-xs-4"></div>
				</div>
				<style>
					.mui-icon-undo{
					font-size: 50px;
				}
				</style>
				<div class="mui-col mui-col-xs-12" style="position:relative;height:400px">
					<div class="mui-col mui-col-xs-2" style=" position:absolute; left:0px; top:10px;">
						<button type="button" class="mui-btn mui-btn-royal mui-btn-block" id="right">升</button>
					</div>
					<div class="mui-col mui-col-xs-2" style=" position:absolute; right:0px; top:10px;">
						<button type="button" class="mui-btn mui-btn-royal mui-btn-block" id="right">降</button>
					</div>
					<div class="contents">
						<div id="divLeft" class="quartercircle divLeft" style="border-right:2px solid #2e3342;border-bottom:2px solid #2e3342;">
							<i class="iconfont iconfont iconbtn-ico" style="position:absolute; right:50px; bottom:50px;"></i>
						</div>
						<div id="divTop" class="quartercircle divTop" style="border-right:2px solid #2e3342;border-bottom:2px solid #2e3342;">
							<i class="iconfont iconfont iconbtn-ico" style="position:absolute; right:50px; bottom:50px;"></i>
						</div>
						<div id="divRight" class="quartercircle divRight" style="border-right:2px solid #2e3342;border-bottom:2px solid #2e3342;">
							<i class="iconfont iconfont iconbtn-ico" style="position:absolute; right:50px; bottom:50px;"></i>
						</div>
						<div id="divBottom" class="quartercircle divBottom" style="border-right:2px solid #2e3342;border-bottom:2px solid #2e3342;">
							<i class="iconfont iconfont iconbtn-ico" style="position:absolute; right:50px; bottom:50px;"></i>
						</div>
						<div class="circle"><span>取消</span></div>
					</div>
					<div class="mui-col mui-col-xs-2" style=" position:absolute; left:0px; bottom:0;">
						<button type="button" class="mui-btn mui-btn-royal mui-btn-block" id="left">左旋</button>
					</div>
					<div class="mui-col mui-col-xs-2" style=" position:absolute; right:0px; bottom:0;">
						<button type="button" class="mui-btn mui-btn-royal mui-btn-block" id="left">右旋</button>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 13px;height: 15px;background: url(img/bottom_bg.png) no-repeat -25px 0;"></div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/mui.min.js"></script>
	<script>
		var windowHeight = $(window).height(),
		$body = $("body");
		$("body").on("touchstart", function(e) {
			e.preventDefault();
			startX = e.originalEvent.changedTouches[0].pageX,
			startY = e.originalEvent.changedTouches[0].pageY;
		});
		$("body").on("touchmove", function(e) {
			e.preventDefault();
			moveEndX = e.originalEvent.changedTouches[0].pageX,
			moveEndY = e.originalEvent.changedTouches[0].pageY,
			X = moveEndX - startX,
			Y = moveEndY - startY;
	　　　　if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
	　　　　　window.location.href = "internet.html"; //right
	　　　　}
	　　　　else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
	　　　　　　　window.location.href = "details.html";  //left
	　　　　}
	　　　　else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
	　　　　　　return //bottom
	　　　　}
	　　　　else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
	　　　　　　return //top
	　　　　}
	　　　　else{
	　　　　　　return
	　　　　}
		});
		
		
		$(function() {
			var h = window.screen.availHeight - 135;
			g = document.getElementById("goods");
			g.style.height = h + "px";
			var w = $("#stop").innerWidth();
			$("#stop").css('height', w);
		})
		$("#returns").click(function() {
			window.location.href = "index.html";
		})
		//console.log("ontouchstart" in window);

		
		//方向键左
		$("#divLeft").click(function() {
			console.log("divLeft")
		})
		//方向键上
		$("#divTop").click(function() {
			console.log("divTop")
		})
		//方向键右
		$("#divRight").click(function() {
			console.log("divRight")
		})
		//方向键下
		$("#divBottom").click(function() {
			console.log("divBottom")
		})
		//取消
		$("#cancel").click(function() {
			history.go(0)
		})
		//左旋
		$("#left").click(function() {
			console.log("left")
		})
		//右旋
		$("#right").click(function() {
			console.log("right")
		})
		//急停
		$("#stop").click(function() {
			console.log("stop")
		})
		</script>
</html>