duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<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="../layui/css/layui.mobile.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/inits.css" />
		<title>首页</title>
		<style>
			body {
				width: 100vx;
				height: 100vh;
				background-image: url('../images/homebg.jpg');
	            background-size: 100% 100%;
	            background-position: center;
	            background-repeat: no-repeat;
			}
			
			.mui-content {
				margin-top: 70px;
			}
			
			.logo {
				width: 150px;
				height: 150px;
				display: block;
				margin: 0 auto 0;
				margin-bottom: 10px;
			}
			
			.btn {
				width: 75%;
				margin: 50px auto 0px;
				background-color: #1ba3c9;
				outline: none;
				border: none;
				padding: 13px 12px;
				display: block;
				border-radius: 20px;
				font-size: 18px;
				color: #fff;
			}
			
			.topBtn {
				background-color: #fb9703;
			}
			
			.topBtn:active {
				background-color: #fb9703;
			}
			
			.title p {
				text-align: center;
				color: #000000;
				width: 100%;
				font-size: 24px;
				margin: 0 auto;
				line-height: 35px;
				font-weight: 600;
			}
			
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 50%;
				left: 50%;
			}
			/*移除底部或顶部三角,需要在删除此代码*/
			
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
			/*.mui-scroll-wrapper {
				padding: 10px 13px;
				/*height: 100%;
				width: 100%;*/
			/*overflow-y: auto;*/
		}
		*/ .yhxztitle {
			text-align: center;
			font-weight: bold;
			color: #000000;
			font-size: 15px;
		}
		.mui-scroll p {
			margin-bottom: 5px;
			color: #333333;
			font-family: simsun;
		}
		.xzbtn {
			text-align: center;
			background: #0062CC;
			padding: 5px;
			width: 80%;
			margin: 0 auto;
			border-radius: 3%;
		}
		.xzbtn span {
			color: white;
			font-size: 13px;
		}
		.qrbtn {
			text-align: center;
			background: #0062CC;
			padding: 5px;
			width: 80%;
			margin: 0 auto;
			border-radius: 3%;
		}
		.qrbtn span {
			color: white;
			font-size: 14px;
		}
		</style>
	</head>

	<body>
		<div style="position: fixed; top: 60%; width: 100%;">
			<button type="button" class="btn topBtn">建议</button>
			<button type="button" class="btn bottomBtn">问题结果查询</button>
		</div>

		<div id="div"></div>
		<div id="popover" class="mui-popover" style="height: 90%;width: 90%;margin: 0 auto;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper" style="padding: 10px 13px;">

				<div class="mui-scroll" style="width: 95%;">
					<p class="yhxztitle">个人用户须知</p>
					<p>为更好提供及时高效优质“安阳12345政务热线”服务，请您知晓以下信息：</p>
					<p>一、您可以对安阳市经济发展、城市建设、社会管理、公共服务、民生需求等方面的事项提出意见建议和诉求，请客观真实提供相关信息和情况;</p>
					<p>二、安阳12345政务热线平台将会获取您的个人信息(包括姓名和联系电话等)，以便必要时工作人员可以直接联系到您。如您点选“个人信息保密”，您的信息将会被严格保密，但承办单位将无法与您联系，以及反馈办理情况和结果。同时提示您，如您已点选“个人信息保密”，请勿在“诉求内容”栏中填写您的个人信息 (包括姓名和联系电话等)，避免因此造成您的个人信息泄漏。</p>
					<p>三、以下诉求和问题，请您通过相应渠道反映并获得帮助:</p>
					<p>(一)涉及生命财产安全等紧急类事项，请您第-时间拨打110、119、120、122等紧急服务热线。</p>
					<p>(二)涉及诉讼、仲裁、纪检监察、行政复议、政府信息公开等法定途径，以及已进入信访渠道办理的事项，请您按照法定途径向有关机关提出。</p>
					<p style="text-align: center;"><input name="checkbox" type="checkbox" id="ischeck" style="margin-right: 10px;"><span style="color: #0077b3;">我已阅读并知晓上述条款</span></p>
					<p class="xzbtn"><span class="djs">阅读用户须知倒计时(3)秒</span></p>
					<p class="qrbtn"><span>确认</span></p>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../layui/layui.js"></script>
		<script src="../js/zepto.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../Script/Common/huayi.http.js"></script>
		<script>
			$(document).ready(function() {
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
			})
			$('.topBtn').click(function() {
				mui("#popover").popover('toggle', document.getElementById("div"));
				let count = 3
				$('.xzbtn').css('display', 'block')
				$('.qrbtn').css('display', 'none')
				var djs = setInterval(function() {
					count -= 1
					$('.djs').text('阅读用户须知倒计时(' + count + ')秒')
					if(count == 0) {
						clearInterval(djs)
						$('.xzbtn').css('display', 'none')
						$('.qrbtn').css('display', 'block')
					}
				}, 1000)
			})
			$('.qrbtn').click(function() {
				if($("#ischeck").is(":checked")) {
					window.location.replace("../html/addAdviceOrder.html");
				} else {
					mui.alert('请勾选并确认用户须知条款！');
				}
			})
			$('.bottomBtn').click(function() {
				window.location.replace("../html/login.html?v=0.2");
			})
		</script>
	</body>

</html>