yueji
/
detailes.html

<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			@font-face {
				font-family: "FZGBK" src: url("../fonts/FZGBK.ttf")
			}

			.shop_jj {
				height: 90px;
				background: #ffffff;
				border-bottom: 10px solid #e6e6e6;
				align-items: center;
			}

			.shop_map {
				padding-left: 10px;
			}

			.shop_map span {
				height: 38px;
				color: #323232;
				line-height: 38px;
				font-size: 16px;
				margin-left: 5px;
				font-family: font-family: "PingFangLight";
			}

			.shop_map img {
				height: 16px;
				line-height: 16px;
			}

			.shop_time {
				padding-left: 10px;
			}

			.shop_time span {
				height: 40px;
				color: #323232;
				line-height: 40px;
				font-size: 15px;
				margin-left: 5px;
			}

			.shop_time img {
				height: 16px;
				line-height: 16px;
			}

			.purchase {
				display: flex;
				position: fixed;
				height: 50px;
				border-top: 1px solid #e6e6e6;
				z-index: 999;
				bottom: 0;
				width: 100%;
				background: #ffffff;
			}

			.shop_pl {
				padding: 0px 10px;
				background: #ffffff;
				margin-top: 10px;
			}

			.shop_title {
				font-size: 16px;
				color: #323232;
				height: 40px;
				line-height: 40px;
				text-align: left;
			}

			.pl_score {
				display: flex;
				padding-bottom: 20px;
			}

			.z_pl {
				-webkit-flex-grow: 1;
				flex-grow: 1;
				text-align: center;
				color: #db5a6b;
				margin-top: 15px;
				font-size: 28px;
				font-weight: bold;
				vertical-align: middle;
			}

			.x_pl {
				-webkit-flex-grow: 1;
				flex-grow: 1;
				text-align: center;
			}

			.x_pl li {
				list-style-type: none;
				-webkit-flex-direction: column;
				flex-direction: column;
				color: #323232;
				font-size: 15px;
			}

			.x_pl li span {
				list-style-type: none;
				-webkit-flex-direction: column;
				flex-direction: column;
				color: #db5a6b;
				font-size: 15px;
			}

			.pl_list {
				border-top: 1px solid #e6e6e6;
			}

			.pl_title {
				color: #323232;
				font-size: 16px;
				text-align: left;
				height: 40px;
				line-height: 40px;
			}

			.pl_title span {
				text-align: right;
			}

			.pl_list_content {
				border-bottom: 1px solid #e6e6e6;
				overflow: hidden;
				width: 100%;
			}

			.user-content {
				padding: 6px 0px;
				overflow: hidden;
			}

			.user-info {
				display: inline-block;
			}

			.user-info li {
				list-style-type: none;
				-webkit-flex-direction: column;
				flex-direction: column;
			}

			.user-pic {
				width: 40px;
				margin-right: 6px;
				display: inline-block;
			}

			.user-pic img {
				border-radius: 50px;
				width: 40px;
			}

			.user-text {
				padding-bottom: 8px;
				font-size: 15px;
				line-height: 24px;
				color: #646464;
			}

			.pl_btn {
				padding-top: 6px;
				width: 80px;
				display: inline-block;
				text-align: center;
			}

			.pl_btn img {
				height: 20px;
				width: 20px;
			}

			.pl_btn span {
				height: 12px;
				font-size: 12px;
				color: #646464;
			}

			.case {
				width: 100%;
				display: inline-block;
			}

			.purchase input {
				color: #ffffff;
				background: #443255;
				border: none;
			}

			.h50 {
				height: 50px;
			}

			.card_title {
				height: 40px;
				line-height: 40px;
				padding-left: 15px;
				color: #323232;
				background: #ffffff;
				border-bottom: 1px solid #e6e6e6;
			}

			.card {
				padding: 11px 15px;
				background: #ffffff;
			}

			.card_info {
				justify-content: space-between;
				display: flex;
				border-bottom: 1px solid #e6e6e6;
			}

			.card li {
				list-style: none;
				height: 50px;
			}
		</style>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">详情</h1>
		</header>-->

		<div class="mui-content">
			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="images/map_location1.png" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="images/2.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="images/3.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="images/2.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="images/3.jpg" /></a>
					</div>
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="1.jpg" /></a>
					</div>
				</div>
			</div>
			<div class="shop_jj">
				<div class="shop_map"><img src="images/shopgps@2x.png"><span>北京市朝阳区四惠大厦底商203室</span></div>
				<div class="shop_time"><img src="images/time@2x.png"><span>营业时间：9：30-19：00</span></div>
			</div>
			<div class="card_title">
				办理会员卡
			</div>
			<div class="card">
				<div class="card_info">
					<li>
						asdf<br />
						zhe
					</li>
					<li>
						asdf
					</li>
				</div>
					<div class="card_info">
					<li>
						asdf
					</li>
					<li>
						asdf
					</li>
				</div>

			</div>
			<div class="shop_pl">
				<div class="shop_title">综合评分</div>
				<div class="pl_score">
					<div class="z_pl">3.5</div>
					<div class="x_pl">
						<li>口碑:<span>3.5分</span></li>
						<li>服务:<span>3.5分</span></li>
						<li>环境:<span>3.5分</span></li>
					</div>
				</div>
				<div class="pl_list">
					<div class="pl_title">网友评论<span>32条评论</span> </div>
					<div class="pl_list_content">
						<div class="user-content">
							<div class="user-pic"><img src="images/map_location1.png"></div>
							<div class="user-info">
								<li style="font-size: 16px;font-weight: 700;color: #323232;">张三的各</li>
								<li style="font-size: 12px;">一小时前评论</li>
							</div>

						</div>
						<div class="user-text">
							在Google工作的那些年里，我遇到不少IPO前加入公司的程序员。然而他们无一炫富，甚至有时给人一种寒酸的感觉。比如我的好友C，员工号小三位数，资产在千万美元级。
						</div>

					</div>
					<div class="pl_list_content">
						<div class="user-content">
							<div class="user-pic"><img src="images/map_location1.png"></div>
							<div class="user-info">
								<li style="font-size: 16px;font-weight: 700;color: #323232;">张三的各</li>
								<li style="font-size: 12px;">一小时前评论</li>
							</div>
						</div>
						<div class="user-text">
							跟其它行业的苦逼打工仔比，程序员的工资可能相对高些。但是这个社会上太多的企业家、炒房、拆迁、靠关系等致富的存在。
						</div>
					</div>
					<div class="pl_list_content">
						<div class="user-content">
							<div class="user-pic"><img src="images/map_location1.png"></div>
							<div class="user-info">
								<li style="font-size: 16px;font-weight: 700;color: #323232;">张三的各</li>
								<li style="font-size: 12px;">一小时前评论</li>
							</div>
						</div>
						<div class="user-text">
							跟其它行业的苦逼打工仔比，程序员的工资可能相对高些。但是这个社会上太多的企业家、炒房、拆迁、靠关系等致富的存在。
						</div>
					</div>
				</div>
			</div>
			<div class="h50"></div>
			<div class="purchase">

				<input class="case" type="button" value="我要办卡" />
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var vm = new Vue();
			mui.plusReady(function() {
				//重写返回逻辑，返回时隐藏详情页webview
				mui.back = function() {
					plus.webview.currentWebview().hide("auto", 300);
				}
				//窗口隐藏时，重置页面数据
				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					self.addEventListener("hide", function(e) {
						window.scrollTo(0, 0); //重置滚动条位置
					}, false);
				})
			});
			//监听自定义事件，获取新闻详情
			document.addEventListener('get_detail', function(event) {
				var id = event.detail.id;
				if(!id) {
					return;
				}
				//document.getElementById('name').innerText = "这是第" + id + "个详情页";
				//前页传入的数据，直接渲染，无需等待ajax请求详情后
				//			    vm.cover = event.detail.cover;
				//			    vm.title = event.detail.title;
				//			    vm.author = event.detail.author;
				//			    vm.time = event.detail.time;
				//向服务端请求文章详情内容
				//			    mui.ajax('your-server-url' + guid, {
				//			        type:'GET',
				//			        dataType: 'json', //服务器返回json格式数据
				//			        timeout: 15000, //15秒超时
				//			        success: function(rsp) {
				//			            vm.content = rsp.content;
				//			        },
				//			        error: function(xhr, type, errorThrown) {
				//			            mui.toast('获取文章内容失败');
				//			            //TODO 此处可以向服务端告警
				//			        }
				//			    });
			});
		</script>
	</body>

</html>