qdqtrj
/
dyyj-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</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">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			#close1 {
				position: absolute;
				width: 160px;
				left: 50%;
				margin-left: -80px;
				bottom: 15%;
				padding: 10px;
				color: #fff;
				border-color: #fff;
			}
			
			.item-logo {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			.item-logo a {
				width: 200px;
				height: 200px;
				display: block;
				border: 1px solid #FFFFFF;
				border-color: rgba(255, 255, 255, 0.5);
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
				font-size: 40px;
				color: #fff;
				position: absolute;
				top: 15%;
				left: 50%;
				margin-left: -100px;
			}
			
			.animate {
				position: absolute;
				left: 0;
				bottom: 15%;
				width: 100%;
				color: #fff;
				display: -moz-box;
			}
			
			.animate h2 {
				text-align: center;
				margin-bottom: 20px;
			}
			
			.animate li {
				width: 50%;
				height: 30px;
				line-height: 30px;
				list-style: none;
				font-size: 16px;
				text-align: right;
			}
			
			.animate li:nth-child(3) {
				text-align: left;
				float: right;
			}
			
			.animated {
				-webkit-animation-duration: 1s;
				-webkit-animation-play-state: paused;
				-webkit-animation-fill-mode: both;
			}
			
			.guide-show .bounceInDown {
				-webkit-animation-name: bounceInDown;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 1s;
				display: block;
			}
			
			.guide-show .bounceInLeft {
				-webkit-animation-name: bounceInLeft;
				display: block;
				-webkit-animation-play-state: running;
			}
			
			.guide-show .bounceInRight {
				-webkit-animation-name: bounceInRight;
				display: block;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 0.5s;
			}
		</style>
	</head>

	<body style="background-color: white;">
		<div id="slider" class="mui-slider mui-fullscreen">
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item" style="text-align: center;">
					<div style="top:10%;position: relative;font-size: 2em;color: #DAA520;">
						健康，时时在线
					</div>
					<div style="width:100%;">
						<img style="width:90%;top: 140px;position: relative;" src="../images/guide/01_02.jpg" />
					</div>
					<div style="bottom: 30px;position: absolute;width:100%;">
						<img style="width:40%;" src="../images/guide/01_05.jpg" />
					</div>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item" style="text-align: center;">
					<div style="width:100%;">
						<img style="width:90%;top: 100px;position: relative;" src="../images/guide/02_02.jpg" />
					</div>
					<div style="bottom: 30px;position: absolute;width:100%;">
						<img style="width:40%;" src="../images/guide/01_05.jpg" />
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item" style="text-align: center;">
					<div style="top: 60px;position: absolute;width:100%;">
						<img style="width:40%;" src="../images/guide/01_05.jpg" />
					</div>
					<div style="width:100%;">
						<img style="width:90%;top: 190px;position: relative;" src="../images/guide/03_02.jpg" />
					</div>
					<div style="width: 100%;position: absolute;bottom: 40px;">
						<button style="" id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
					</div>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.back = function() {};
			mui.plusReady(function() {
				if (mui.os.ios) {
					plus.navigator.setFullscreen(true);
				}
				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				mui.openWindow({
					id: 'login-win',
					url: '../login.html',
					show: {
						duration: 200
					}
				});
			}, false);
			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				//注意slideNumber是从0开始的；
				var index = event.detail.slideNumber + 1;
				if (index == 2 || index == 3) {
					var item = document.getElementById("tips-" + index);
				}
			});
		</script>
	</body>

</html>