初始化

3 years ago · bb39720c2a
48 changed files with 3370 additions and 0 deletions
--- a/.project
+++ b/.project
@ -0,0 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <projectDescription>
 	<name>bowuGuanH5</name>
 	<comment></comment>
 	<projects>
 	</projects>
 	<buildSpec>
 		<buildCommand>
 			<name>com.aptana.ide.core.unifiedBuilder</name>
 			<arguments>
 			</arguments>
 		</buildCommand>
 	</buildSpec>
 	<natures>
 		<nature>com.aptana.projects.webnature</nature>
 	</natures>
 	<filteredResources>
 		<filter>
 			<id>1620701358829</id>
 			<name></name>
 			<type>26</type>
 			<matcher>
 				<id>org.eclipse.ui.ide.multiFilter</id>
 				<arguments>1.0-name-matches-false-false-node_modules</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>
 </projectDescription>
--- a/areaList.html
+++ b/areaList.html
@ -0,0 +1,234 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<title>探途足迹</title>
 		<meta name="keywords" content="keyword1,keyword2,keyword3">
 		<meta name="description" content="this is my page">
 		<meta name="content-type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
 		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" type="text/css" href="css/base.css" />
 		<link rel="stylesheet" type="text/css" href="css/areaList.css" />
 	</head>
 	<body>
 		<div class="wrap">
 			<div class="box_cont">
 				<div class="leftList">
 					<ul>
 						<li class="active">
 							<span class="name">热门</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">北京</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">天津</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">上海</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">重庆</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">河北</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">山西</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">陕西</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">山东</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">河南</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">辽宁</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">吉林</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">黑龙江</span>
 							<span class="num">(0)</span>
 						</li>
 						<li>
 							<span class="name">江苏</span>
 							<span class="num">(0)</span>
 						</li>
 					</ul>
 				</div>
 				<div class="rightCont">
 					<div class="title">
 						<img src="img/icon1.png" />博物馆
 					</div>
 					<div class="imgList">
 						<ul class="museumImg">
 							<li class="active">
 								<div class="item ">
 									<p class="contImg"><img src="img/bowuguan/bj1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">故宫博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/bj2.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">国家博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/hb1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">河北博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/hn1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">河南博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/hub1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">湖北博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/hun1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">湖南博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/nj1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">南京博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/shanxi1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">陕西博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/sx1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">山西博物馆</p>
 							</li>
 							<li>
 								<div class="item">
 									<p class="contImg"><img src="img/bowuguan/zj1.png" /></p>
 									<p class="icon">
 										<img src="img/select.png" />
 									</p>
 								</div>
 								<p class="name">浙江博物馆</p>
 							</li>
 						</ul>
 					</div>
 					<div class="chooseList">
 						<p><img src="img/unselected.png" />已选</p>
 						<ul class="chooseName">
 							<li>
 								<span class="text">故宫博物馆</span>
 								<span class="closeIcon"><img src="img/close.png"/></span>
 							</li>
 							<li>
 							<span class="text">故宫</span>
 							<span class="closeIcon"><img src="img/close.png"/></span>
 						</li>
 						<li>
 							<span class="text">故宫</span>
 							<span class="closeIcon"><img src="img/close.png"/></span>
 						</li>
 						<li>
 							<span class="text">故宫</span>
 							<span class="closeIcon"><img src="img/close.png"/></span>
 						</li>
 						<li>
 							<span class="text">故宫</span>
 							<span class="closeIcon"><img src="img/close.png"/></span>
 						</li>
 						<li>
 							<span class="text">故宫</span>
 							<span class="closeIcon"><img src="img/close.png"/></span>
 						</li>
 						<li>
 							<span class="text">故宫</span>
 							<span class="closeIcon"><img src="img/close.png"/></span>
 						</li>
 						</ul>
 					</div>
 				</div>
 			</div>
 			<div class="deepBtn">提交</div>
 		</div>
 	</body>
 </html>
 <script type="text/javascript">
 	$('.wrap').css('height', $(window).height());
 	$('.leftList ul li').on('touchstart',function(e){
 		$(this).addClass('active').siblings().removeClass('active')
 	})
 	var clickState=true;
 	$('.museumImg  li').on('touchstart',function(e){
 		$(this).toggleClass('active')
 	})
 </script>
--- a/css/areaList.css
+++ b/css/areaList.css
@ -0,0 +1,228 @@
 .wrap {
 	width: 100%;
 	height: auto;
 	position: relative;
 	background: url(../img/areaBgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 }
 .box_cont {
 	display: flex;
 	margin-top: .14rem;
 	margin-left: .1rem;
 	height: 88%;
 	overflow: hidden;
 }
 /*地区*/
 .leftList {
 	/*flex: 1;*/
 	height: 96%;
 	/*overflow-y: auto;*/
 }
 .leftList ul{
 	height: 100%;
 	overflow-y: auto;
 }
 ::-webkit-scrollbar {
 /*隐藏滚轮*/
 display: none;
 }
 .leftList li {
 	width: .8rem;
 	height: .32rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	background: #fff;
 	border-radius: .05rem;
 	margin-bottom: .12rem;
 }
 .leftList li span {
 	display: block;
 	box-sizing: border-box;
 	color: #333;
 	font-size: .14rem;
 	line-height: .32rem;
 	text-align: center;
 }
 .leftList li span.name {
 	text-align: center;
 }
 .leftList li span.num {
 	display: none;
 }
 .leftList li.active {
 	background: #F09C22;
 }
 .leftList li.active span {
 	color: #FFFFFF;
 }
 /*博物馆图片*/
 .rightCont {
 	/*flex: 2;*/
 	margin-left: 0.15rem;
 	margin-top: .05rem;
 	position: relative;
 	height: 96%;
 }
 .rightCont .title {
 	font-size: .12rem;
 	color: #fff;
 	position: fixed;
 	z-index: 999;
 }
 .rightCont .title img {
 	width: .14rem;
 	height: .14rem;
 	margin-right: .05rem;
 }
 .imgList{
 	height: 85%;
 	overflow-y: auto;
 }
 .museumImg {
 	display: flex;
 	flex-wrap: wrap;
 	margin-left: .1rem;
 	margin-right: .24rem;
 	margin-top: .32rem;
 }
 .museumImg li {
 	/*width: 50%;*/
 	height: auto;
 	width: 1.04rem;
 }
 .museumImg li:nth-child(2n){
 	margin-left: .28rem;
 }
 .museumImg div.item {
 	width: 1.04rem;
 	/*height: .42rem;*/
 	position: relative;
 	border-radius: .05rem;
 }
 .museumImg li .contImg {
 	width: 1.04rem;
 	height: .42rem;
 }
 .museumImg p.contImg img {
 	width: 100%;
 	height: 100%;
 }
 .museumImg p.icon {
 	width: .12rem;
 	height: .12rem;
 	position: absolute;
 	right: 0;
 	top: 0;
 	font-size: 0;
 	transform: translate(50%,-50%);
 	display: none;
 }
 .museumImg p.icon img {
 	width: 100%;
 	height: 100%;
 }
 .museumImg p.name{
 	color: #fff;
 	font-size: .13rem;
 	width: 1.04rem;
 	text-align: center;
 	margin-top: .08rem;
 	margin-bottom:.18rem ;
 }
 .museumImg li.active div.item{
 	background: #F09C22;
 }
 .museumImg li.active  p.icon{
 	display: block;
 }
 /*选中名称*/
 .chooseList {
 	height: 16%;
 	margin-top: .2rem;
 	width: 100%;
 	/*overflow: hidden;*/
 }
 .chooseList p{
 	font-size: .12rem;
 	color: #fff;
 	display: flex;
 	align-items: center;
 }
 .chooseList p img{
 	width: .13rem;
 	height: .13rem;
 }
 .chooseName {
 	width: 2.7rem;
 	display: flex;
 	margin-top: .12rem;
 	overflow-x: auto;
 }
 .chooseName li{
 	width: .75rem;
 	height: .3rem;
 	border: 1px solid #F09C22;
 	border-radius: .05rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	margin-right: .04rem;
 }
 .chooseName li  span.text{
 	width: .42rem;
 	overflow: auto;
 	white-space: nowrap;
 	font-size: .14rem;
 	margin-left: .07rem;
 	color: #fff;
 	box-sizing: border-box;
 }
 span.closeIcon img{
 	width: .14rem;
 	height: .14rem;
 	margin-left: .06rem;
 	padding-right: .02rem;
 }
 /*底部按钮*/
 .deepBtn {
 	/*height: 12%;*/
 	position: fixed;
 	left: 50%;
 	bottom: .16rem;
 	transform: translateX(-50%);
 	display: flex;
 	width: 2.91rem;
 	height: .46rem;
 	background: #3B7BFF;
 	justify-content: center;
 	border-radius: .04rem;
 	line-height: .46rem;
 	text-align: center;
 	color: #fff;
 	font-size: .18rem;
 }
--- a/css/base.css
+++ b/css/base.css
@ -0,0 +1,18 @@
 *{margin: 0;padding: 0;}/*将所有的HTML元素的默认边距清零*/
 html body{font-size:12px; font-family: "宋体";color:#000;}/*对HTML的元素中的字体，颜色，背景色进行初始设置*/
 ul li,ol li{list-style: none;}/*将列表的默认样式清除*/
 a{text-decoration: none;outline: none; blr:expression(this.onFocus=this.blur());}/*将超链接的下划线去掉以及在IE6中点击出现的虚线框去掉*/
 img{border:none;}/*图片的默认边框去掉 */
 table{border-collapse:collapse;border-spacing:0;}
 caption,th,td{font-weight:normal;text-align:left;}
 input,textarea,select,button{font-size:100%;font-family:inherit;margin:0;padding:0;}
 label,button{cursor:pointer}
 textarea{white-space:pre;resize:none;border:1px solid #ececec;}
 article,aside,figcaption,figure,footer,header,hgroup,nav,section,summary{ display: block;}
 /*清除浮动*/
 .clearfix:after{content:""; display:block; clear:both; height:0; line-height:0; visibility:hidden;}
 .clearfix{zoom:1;}/*解决ie6的兼容性问题*/
 .fl{float: left;}
 .fr{float: right;}
 a:hover{-webkit-tap-highlight-color: transparent;}
 wrapper{width:1000px; margin:0 auto;}
--- a/css/common.css
+++ b/css/common.css
--- a/css/index.css
+++ b/css/index.css
@ -0,0 +1,40 @@
 .box {
 	width: 100%;
 	height: auto;
 	position: relative;
 }
 .box img {
 	width: 100%;
 	height: 100%;
 }
 .btn {
 	position: absolute;
 	left: 50%;
 	bottom: .46rem;
 	transform: translateX(-50%);
 	display: flex;
 	width: 2.91rem;
 	height: .46rem;
 	background: #3B7BFF;
 	justify-content: center;
 	border-radius: .04rem;
 }
 .btn span {
 	font-size: .18rem;
 	color: #fff;
 	line-height: .46rem;
 }
 .btn p {
 	display: flex;
 	align-items: center;
 }
 .btn img {
 	width: .23rem;
 	height: .22rem;
 	margin-right: .1rem;
 }
--- a/css/share.css
+++ b/css/share.css
@ -0,0 +1,68 @@
 .box_cont {
 	background: url(../img/share/bgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 	height: 80%;
 }
 .tip{
 	width: 3rem;
 	height: .5rem;
 	margin: 0.24rem auto 0;
 }
 .tip img{
 	width: 100%;
 	height: 100%;
 }
 .info{
 	margin-left:.1rem ;
 	display: flex;
 	align-items: center;
 	margin-top: .13rem;
 }
 .info p.avater{
 	width: .4rem;
 	height: .4rem;
 	background:#083EA6 ;
 	border-radius: 50%;
 }
 .info p.avater img{
 	width: .39rem;
 	height: .39rem;
 	margin: 0 auto;
 }
 .info p.name{
 	color: #fff;
 	font-size: .14rem;
 	margin-left: .21rem;
 }
 .numInfo{
 	margin-left: .1rem;
 }
 .numInfo p{
 	font-size: .16rem;
 	color: #fff;
 	margin-bottom:.18rem ;
 }
 .numInfo p span{
 	font-size: .3rem;
 	color: #FFBF63;
 	padding: 0 .1rem;
 }
 #container {
 	margin-top: -.8rem;
 }
 section {
 	margin: 0 auto;
 }
 #container svg {
 	/*width: 3.55rem;*/
 	background: url(../img/map1.png) no-repeat;
 	background-size: 100% 73%;
 	background-position-y: .6rem;
 	background-position-x: -4px;
 }
--- a/img/areaBgm.png
+++ b/img/areaBgm.png
--- a/img/begin.png
+++ b/img/begin.png
--- a/img/bowuguan/bj1.png
+++ b/img/bowuguan/bj1.png
--- a/img/bowuguan/bj2.png
+++ b/img/bowuguan/bj2.png
--- a/img/bowuguan/hb1.png
+++ b/img/bowuguan/hb1.png
--- a/img/bowuguan/hn1.png
+++ b/img/bowuguan/hn1.png
--- a/img/bowuguan/hub1.png
+++ b/img/bowuguan/hub1.png
--- a/img/bowuguan/hun1.png
+++ b/img/bowuguan/hun1.png
--- a/img/bowuguan/nj1.png
+++ b/img/bowuguan/nj1.png
--- a/img/bowuguan/shanxi1.png
+++ b/img/bowuguan/shanxi1.png
--- a/img/bowuguan/sx1.png
+++ b/img/bowuguan/sx1.png
--- a/img/bowuguan/zj1.png
+++ b/img/bowuguan/zj1.png
--- a/img/close.png
+++ b/img/close.png
--- a/img/icon1.png
+++ b/img/icon1.png
--- a/img/indexBgm.png
+++ b/img/indexBgm.png
--- a/img/map.png
+++ b/img/map.png
--- a/img/map1.png
+++ b/img/map1.png
--- a/img/select.png
+++ b/img/select.png
--- a/img/share/avatar.png
+++ b/img/share/avatar.png
--- a/img/share/bgm.png
+++ b/img/share/bgm.png
--- a/img/share/bgm1.png
+++ b/img/share/bgm1.png
--- a/img/share/positionIcon.png
+++ b/img/share/positionIcon.png
--- a/img/share/pyq.png
+++ b/img/share/pyq.png
--- a/img/share/shuax.png
+++ b/img/share/shuax.png
--- a/img/share/titleIcon.png
+++ b/img/share/titleIcon.png
--- a/img/share/weixin.png
+++ b/img/share/weixin.png
--- a/img/unselected.png
+++ b/img/unselected.png
--- a/img/切啊图啊(5).zip
+++ b/img/切啊图啊(5).zip
--- a/img/切啊图啊/Group
+++ b/img/切啊图啊/Group
--- a/img/切啊图啊/Group
+++ b/img/切啊图啊/Group
--- a/img/切啊图啊/Group
+++ b/img/切啊图啊/Group
--- a/img/切啊图啊/Group
+++ b/img/切啊图啊/Group
--- a/img/切啊图啊/Mask
+++ b/img/切啊图啊/Mask
--- a/img/切啊图啊/bg.png
+++ b/img/切啊图啊/bg.png
--- a/img/切啊图啊/d1a6ec1dec36882f52c549ff20a136f
+++ b/img/切啊图啊/d1a6ec1dec36882f52c549ff20a136f
--- a/index.html
+++ b/index.html
@ -0,0 +1,33 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<title>探途足迹</title>
 		<meta name="keywords" content="keyword1,keyword2,keyword3">
 		<meta name="description" content="this is my page">
 		<meta name="content-type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
 		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" type="text/css" href="css/base.css" />
 		<link rel="stylesheet" type="text/css" href="css/index.css" />
 	</head>
 	<body>
 		<div class="wrap">
 			<div class="box">
 				<img src="img/indexBgm.png" />
 				<div class="btn">
 					<p>
 						<img src="img/begin.png" />
 						<span>开始</span>
 					</p>
 				</div>
 			</div>
 		</div>
 	</body>
 </html>
--- a/js/common.js
+++ b/js/common.js
@ -0,0 +1,46 @@
 (function(designWidth, maxWidth) {
 	var doc = document,
 		win = window,
 		docEl = doc.documentElement,
 		remStyle = document.createElement("style"),
 		tid;
 	function refreshRem() {
 		var width = docEl.getBoundingClientRect().width;
 		maxWidth = maxWidth || 540;
 		width > maxWidth && (width = maxWidth);
 		var rem = width * 100 / designWidth;
 		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
 	}
 	if(docEl.firstElementChild) {
 		docEl.firstElementChild.appendChild(remStyle);
 	} else {
 		var wrap = doc.createElement("div");
 		wrap.appendChild(remStyle);
 		doc.write(wrap.innerHTML);
 		wrap = null;
 	}
 	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
 	refreshRem();
 	win.addEventListener("resize", function() {
 		clearTimeout(tid); //防止执行两次
 		tid = setTimeout(refreshRem, 300);
 	}, false);
 	win.addEventListener("pageshow", function(e) {
 		if(e.persisted) { // 浏览器后退的时候重新计算
 			clearTimeout(tid);
 			tid = setTimeout(refreshRem, 300);
 		}
 	}, false);
 	if(doc.readyState === "complete") {
 		doc.body.style.fontSize = "16px";
 	} else {
 		doc.addEventListener("DOMContentLoaded", function(e) {
 			doc.body.style.fontSize = "16px";
 		}, false);
 	}
 })(375, 750);
--- a/js/jquery-3.4.1.min.js
+++ b/js/jquery-3.4.1.min.js
--- a/js/jsMap-1.1.0.min.js
+++ b/js/jsMap-1.1.0.min.js
--- a/share.html
+++ b/share.html
@ -0,0 +1,76 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<title>探途足迹</title>
 		<meta name="keywords" content="keyword1,keyword2,keyword3">
 		<meta name="description" content="this is my page">
 		<meta name="content-type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
 		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" type="text/css" href="css/base.css" />
 		<link rel="stylesheet" type="text/css" href="css/share.css" />
 	</head>
 	<body>
 		<div class="wrap">
 			<div class="box_cont">
 				<p class="tip"><img src="img/share/titleIcon.png"/></p>
 				<div class="info">
 					<p class="avater"><img src="img/share/avatar.png"/></p>
 					<p class="name">不闻不问</p>
 				</div>
 				<div class="numInfo">
 					<p>
 						踏足中国<span>7</span>个省区，<span>7</span>个一级博物馆
 					</p>
 					<p>超越了<span>80.88%</span>的用户</p>
 				</div>
 				<div id="container"></div>
 				<div class="nameList">
 					<ul>
 						<li>1</li>
 						<li>1</li>
 						<li>1</li>
 						<li>1</li>
 						<li>1</li>
 						<li>1</li>
 						<li>1</li>
 					</ul>
 				</div>
 			</div>
 			<div class="deepIcon">
 				<ul>
 					<li>
 						<p class="icon"><img src="img/share/weixin.png"/></p>
 						<p class="text">分享到微信</p>
 					</li>
 					<li>
 						<p class="icon"><img src="img/share/pyq.png"/></p>
 						<p class="text">保存图片分享</p>
 					</li>
 					<li>
 						<p class="icon"><img src="img/share/shuax.png"/></p>
 						<p class="text">重新选择</p>
 					</li>
 				</ul>
 			</div>
 		</div>
 	</body>
 	<script src="js/jsMap-1.1.0.min.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript">
 		jsMap.config("#container", {
 			name: "china",
 			width: 355,
 			height: 400,
 			datafill: "#4291DA",
 			areaName: false,
 		})
 	</script>
 </html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,60 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 		<!-- 启用360浏览器的极速模式(webkit) -->
 		<meta name="renderer" content="webkit">
 		<!-- 避免IE使用兼容模式 -->
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
 		<meta name="HandheldFriendly" content="true">
 		<!-- 微软的老式浏览器 -->
 		<meta name="MobileOptimized" content="320">
 		<!-- uc强制竖屏 -->
 		<meta name="screen-orientation" content="portrait">
 		<!-- QQ强制竖屏 -->
 		<meta name="x5-orientation" content="portrait">
 		<!-- UC强制全屏 -->
 		<meta name="full-screen" content="yes">
 		<!-- QQ强制全屏 -->
 		<meta name="x5-fullscreen" content="true">
 		<!-- UC应用模式 -->
 		<meta name="browsermode" content="application">
 		<!-- QQ应用模式 -->
 		<meta name="x5-page-mode" content="app">
 		<!-- windows phone 点击无高光 -->
 		<meta name="msapplication-tap-highlight" content="no">
 		<meta content="telephone=no" name="format-detection" />
 		<meta name="huaban" content="nopin" />
 		<link rel="icon" type="image/x-icon" href="/favicon.ico">
 		<title>新茶饮</title>
 		<script src="/config.js"></script>
 		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 	</head>
 	<body>
 		<div id="app"></div>
 		<!-- 
    在iphone 5 中1rem=16px; 
    html font-size =16px=1rem;
  -->
 		<script>
 			//得到手机屏幕的宽度
 			let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
 			console.log('htmlWidth', htmlWidth)
 			//得到html的Dom元素
 			let htmlDom = document.getElementsByTagName('html')[0];
 			// if(htmlWidth>640){//超过640大小的，字体根部都是16px
 			//   htmlWidth=640;
 			//   console.log('htmlWidth-true',htmlWidth)
 			// }
 			//设置根元素字体大小
 			htmlDom.style.fontSize = htmlWidth / 40 + 'px';
 		</script>
 	</body>
 </html>