Html - SPA页面收集（有图）
场景，左图，又字段的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mui/mui.min.css"/>
<style type="text/css">
body{font-family: "微软雅黑";background: #fff;}
#logo{max-width:85px;min-width:80px;height:100%;margin-top: 16px;}
.dian{max-width:39px;position: relative;top:7px}
#title{color:#33333b;font-size:16px;line-height:25px;}
.num{color:#ff9395;padding:0px 5px}
.goinfo{font-size:14px;color:#a8a8a8;float:right;}
.mui-table-view .mui-media-object.mui-pull-left{margin-right:15px;}
.mui-ellipsis{margin-top:5px;}
.mui-table-view-cell>a:not(.mui-btn){white-space:normal;}
.qiandao{margin:0px 0px 0px 10px;border:1px dashed #ff5f68;border-radius: 100%;padding: 5px 10px;}
.shangpin_name{color:#ff9395}
.mui-table-view::before{border:1px solid #fee0c4;top:0.68px;}
.mui-table-view::after{border:1px solid #fee0c4;}
#controller{margin-left: 0;background:#fff8ee;width: 100%;margin:auto;}
#controller .leftbinggan{width:20px;display:block;content:open-quote;font-size:0px;background:url(Images/binggan2_01.png) repeat-y;position:absolute;left:-8px;top:0px;height:100%;}
#controller .rightbinggan{width:20px;display:block;content:open-quote;font-size:0px;background:url(Images/binggan2_03.png) repeat-y;position:absolute;right:-18px;top:0px;height:100%;}
</style>
</head>
<body>
<div style="width: 95%;margin:auto;margin-top:20px;">
<ul class="mui-table-view mui-content-padded" id="controller">
<a class="leftbinggan"></a>
<a class="rightbinggan"></a>
<li class="mui-table-view-cell mui-media">
<a href="index2.html">
<img id="logo" class="mui-media-object mui-pull-left" src="Images/logo.png">
<div class="mui-media-body">
<p style="margin-top:5px;">
<img src="Images/dian.png" alt="LOGO" class="dian" />
<span class="qiandao">2</span>
<span class="qiandao">3</span>
<span class="qiandao">4</span>
<span class="qiandao">5</span>
</p>
<p style="margin-top:15px;" id="title" class="mui-content-padded">太棒啦！已集结<span class="num">9</span>个集点,可兑换<span class="shangpin_name">1杯红豆布丁</span>哦oooo~</p>
<p class='mui-ellipsis'><span class="goinfo">查看详情>>></span></p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
场景：左图，中字段，又字段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta name="renderer" content="ie-comp">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<title>我的集点卡</title>
<link rel="stylesheet" type="text/css" href="css/mui/mui.min.css" />
<style type="text/css">
body{font-family:"微软雅黑";background: #f5f5f9;}
.mui-content-padded{background:#fff}
.xiaofeishuoming{color:#a5a5a5;font-size:15px}
.ico_img{width:30px}
.goinfo{float:right;color:#969696;font-size:14px}
.num{padding:0 5px;color:#ef6767}
.mui-table-view .mui-media-object{height:65px;max-width:75px;border:1px solid #ccc}
.mui-table-view:before{display:none}
.dian{position:relative;top:7px;max-width:39px}
.qiandao{margin:0 0 0 10px;padding:5px 10px;border:1px dashed #ff5f68;border-radius:100%}
#binggan{position:relative;margin-bottom:0;padding:20px 0 20px;width:100%;height:100%;background:#fff8ee;text-align:center}
#binggan:before{content:open-quote;font-size:0px;width: 100%;background:url(Images/22_01.png) repeat-x ;display: block;position: absolute;top: -5px;}
#binggan:after{content:open-quote;font-size:0px;width: 100%;background:url(Images/22_03.png) repeat-x #fff;display: block;position: absolute;bottom: -8px;}
#binggan .mui-icon{vertical-align: top;display:inline-block;margin:11px 10px;padding-top:9pt;width:50px;height:50px;border:1px dashed #ff5e67;border-radius:25px;background-color:#fff8ee;background-clip:padding-box}
#binggan img{margin:10px 10px;width:50px;text-align:centet;}
#binggan .bingganblock{display:block;margin:auto;width:100%;padding-bottom:10px;padding-top:10px;}
</style>
</head>
<body>
<div class="mui-contet">
<p style="border-top: 1px solid #ddd;background: #fff;padding:20px 0px;margin:20px 0px 0px;padding:30px 20px;">
<span style="color:#2c3038;font-size:16px;">店铺集点</span> <span class="xiaofeishuoming mui-pull-right">消费满 <span class="num">15</span>元获得<span class="num">1</span>个店铺集点</span>
</p>
<div id="binggan" style="width: 100%;">
<p id="bingganinner" style="margin: auto;max-width: 400px;">
<img src="Images/xindian.png" class="ico_img"/>
<img src="Images/xindian.png" class="ico_img"/>
<img src="Images/xindian.png" class="ico_img"/>
<img src="Images/xindian.png" class="ico_img"/>
<img src="Images/xindian.png" class="ico_img"/>
<img src="Images/xindian.png" class="ico_img"/>
<img src="Images/xindian.png" class="ico_img"/>
<span class="mui-icon">8</span>
<span class="mui-icon">9</span>
<span class="mui-icon">10</span>
<span class="mui-icon">11</span>
<span class="mui-icon">12</span>
<span class="mui-icon">13</span>
<span class="mui-icon">14</span>
<span class="mui-icon">15</span>
<span class="bingganblock" style="font-size:18px;color:#ff878b;clear: both;">
已集12个
</span>
</p>
</div>
<ul class="mui-table-view" id="dianpujihua" style="padding-top:15px;border-bottom: 1px solid #ddd;">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" onclick="exchange_兑换奖品()">
<div class="mui-media-body mui-pull-left">
<img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
</div>
<div class="mui-media-body mui-pull-left" style="margin-left:10px;">
<h4 class="mui-content-padded">抹茶布丁</h4>
<p class="mui-text-left mui-content-padded">
6个集点兑换
</p>
</div>
<div class="mui-media-body mui-pull-right" style="max-width:35%;overflow:visible;white-space: normal;line-height:30px;">
<button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" onclick="exchange_兑换奖品()">
<div class="mui-media-body mui-pull-left">
<img class="mui-media-object shangpinlogo" src="Images/kouxiangtang.png">
</div>
<div class="mui-media-body mui-pull-left" style="margin-left:10px;">
<h4 class="mui-content-padded">抹茶布丁</h4>
<p class="mui-text-left mui-content-padded">
8个集点兑换
</p>
</div>
<div class="mui-media-body mui-pull-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
<p id="title" class="mui-pull-right">
<button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" onclick="exchange_兑换奖品()">
<div class="mui-media-body mui-pull-left">
<img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
</div>
<div class="mui-media-body mui-pull-left" style="margin-left:10px;">
<h4 class="mui-content-padded">抹茶布丁</h4>
<p class="mui-text-left mui-content-padded">
8个集点兑换
</p>
</div>
<div class="mui-media-body mui-pull-right mui-text-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
<button type="button" style="color:#C0C0C0;height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-outlined">兑换</button>
</div>
</a>
</li>
</ul>
<p style="border-top: 1px solid #ddd;border-bottom:1px solid #EBCCCC;background: #fff;padding:20px 0px;margin:20px 0px 0px;padding:20px;">
<span style="color:#2c3038;font-size:16px;">商品集点</span> <span class="xiaofeishuoming mui-pull-right">消费<span class="num">1</span>次该商品获得<span class="num">1</span>个商品集点</span>
</p>
<ul class="mui-table-view" id="pinpaijihua" style="border-bottom: 1px solid #ddd;">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" onclick="exchange_兑换奖品()">
<div class="mui-media-body mui-pull-left">
<img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
</div>
<div class="mui-media-body mui-pull-left" style="margin-left:15px;">
<p>
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/baihuaduo.png" alt="" />
<img src="Images/baihuaduo.png" alt="" />
</p>
<p class="mui-text-left" style="text-indent: 10px;">
农夫山泉高端泉水
</p>
</div>
<div class="mui-media-body mui-pull-right" style="max-width:35%;overflow:visible;white-space: normal;line-height:30px;">
<button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" onclick="exchange_兑换奖品()">
<div class="mui-media-body mui-pull-left">
<img class="mui-media-object shangpinlogo" src="Images/kouxiangtang.png">
</div>
<div class="mui-media-body mui-pull-left" style="margin-left:15px;">
<p>
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
</p>
<p class="mui-text-left" style="text-indent: 10px;">
绿箭口香糖
</p>
</div>
<div class="mui-media-body mui-pull-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
<p id="title" class="mui-pull-right">
<button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;" onclick="exchange_兑换奖品()">
<div class="mui-media-body mui-pull-left">
<img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
</div>
<div class="mui-media-body mui-pull-left" style="margin-left:15px;">
<p>
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/huaduo.png" alt="" />
<img src="Images/baihuaduo.png" alt="" />
</p>
<p class="mui-text-left" style="text-indent: 10px;">
农夫山泉高端泉水
</p>
</div>
<div class="mui-media-body mui-pull-right mui-text-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
<button type="button" style="color:#C0C0C0;height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-outlined">兑换</button>
</div>
</a>
</li>
</ul>
<p style="background: #fff;padding:20px 0px;margin:20px 0px;padding:20px;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;">
<span style="color:#2c3038;font-size:16px;">集点规则</span> <span class="mui-icon mui-icon-arrowright mui-pull-right"></span>
</p>
</div>
</body>
<script type="text/template" id="shangpin_info" class="mui-hidden">
<img src="Images/shangpintu.png" alt="" />
<h4 class="mui-content-padded mui-text-center">大满贯布丁奶茶1杯</h4>
<p class="mui-text-center">
<img src="Images/dian.png" class="ico_img" alt="" />
<img src="Images/dian.png" class="ico_img" alt="" />
<img src="Images/dian.png" class="ico_img" alt="" />
</p>
<p>
<img id="set_barcode" alt="扫描二维码" style="margin-left: 14%;" />
</p>
<p class="mui-text-center" id="saomiaoerweima">请向收银员出示该二维码</p>
</script>
<script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/JsBarcode/CODE39.js" type="text/javascript" charset="utf-8"></script>
<script src="js/JsBarcode/JsBarcode.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#qiandao ul li").each(function() {
var self = $(this);
var index = parseInt(self.index() + 1);
var num = self.find("img").size();
if (num == 0) {
self.find("h4").text(index);
}
})
})
exchange_兑换奖品 = function() {
//询问框
layer.confirm('你确认要兑换该商品吗？', {
btn: ['确定', '取消'], //按钮
icon: 3,
title: '温馨提示'
}, function()
{
layer.closeAll();
var html = $("#shangpin_info").html();
var index = layer.open({
title: false,
skin: "mylayer",
closeBtn: 2,
type: 1,
btn: 0,
content: html,
shade: [0.4, '#000'],
shadeClose: true,
success: function() {
$("#set_barcode").JsBarcode("6931273201136", {
format: "CODE39",
width: 1,
displayValue: true
});
$('img').load(function() {
//由于模板中存在图片未加载，
//当layer弹出的时候。
//宽度计算错误导致不居中，所以我手动居中了
var widthForWindow = $(window).width();
var winthForLayer = $(".mylayer").width();
var myWidth = (widthForWindow - winthForLayer) / 2;
layer.style(index, {
left: myWidth,
top: "15%"
});
})
}
})
}, function() {
return;
});
}
</script>
</html>
场景：
<!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/mui.min.css">
<style>
/*自定义Css*/
body{height:auto;background:#e95452;font-family:"微软雅黑";}
.controller{max-width:400px;position:relative;border-radius:5px;margin:30px auto;margin-top:10%;padding:0 0 20px;width:90%;height:auto;background:#fff;text-align:center;box-shadow: 0px 5px 20px rgba(54,54,54,.9);}
.chushi{margin:auto;width:50%}
#shangpinmingcheng{margin:20px 0}
#youxiaoriqi{margin:25px 0}
#qitagongneng{text-align:left}
.mui-icon-arrowright{color:#c7c7cc}
#shangpinlogo{width: 70px;position: absolute;top: -30px;left:50%;margin-left:-35px;border-radius: 100%;}
.leftbinggan{position:absolute;height:20px;width:20px;background:#e95452;display: block;left:-10px;top:60%;border-radius: 25px;}
.rightbinggan{position:absolute;height:20px;width:20px;background:#e95452;display: block;right:-10px;top:60%;border-radius: 25px;}
#shangpintupian{width: 100%;max-height: 210px;max-width:400px;}
#juli{font-size: 16px;padding-top:7px;padding-right:5px;}
/*DIV切换固定样式*/
.mui-page,.mui-page-content,.mui-pages,.mui-view,.mui-views{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-color:#e95452}
.mui-pages{height:auto}
.mui-scroll,.mui-scroll-wrapper{background-color:#e95452}
.mui-page.mui-transitioning{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}
.mui-page-left{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.mui-ios .mui-page-left{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}
.mui-navbar{position:fixed;right:0;left:0;z-index:10;height:44px;background-color:#f7f7f8}
.mui-navbar .mui-bar{position:absolute;background:0 0;text-align:center}
.mui-android .mui-navbar-inner.mui-navbar-left{opacity:0}
.mui-ios .mui-navbar-left .mui-center,.mui-ios .mui-navbar-left .mui-left,.mui-ios .mui-navbar-left .mui-right{opacity:0}
.mui-navbar .mui-btn-nav{-webkit-transition:none;transition:none;-webkit-transition-duration:0s;transition-duration:0s}
.mui-navbar .mui-bar .mui-title{display:inline-block;width:auto}
.mui-page-shadow{position:absolute;right:100%;top:0;width:16px;height:100%;z-index:-1;content:''}
.mui-page-shadow{background:-webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.2) 100%);background:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.2) 100%)}
.mui-navbar-inner .mui-transitioning,.mui-navbar-inner.mui-transitioning{-webkit-transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease}
.mui-page{display:none}
.mui-pages .mui-page{display:block}
.mui-page .mui-table-view:first-child{margin-top:15px}
.mui-page .mui-table-view:last-child{margin-bottom:30px}
.mui-table-view{margin-top:20px}
.mui-table-view span.mui-pull-right{color:#999}
.mui-table-view-divider{background-color:#efeff4;font-size:14px}
.mui-table-view-divider:after,.mui-table-view-divider:before{height:0}
.mui-fullscreen{position:fixed;z-index:20;background-color:#000}
.mui-ios .mui-navbar .mui-bar .mui-title{position:static}
</style>
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-pages">
</div>
</div>
</div>
<!--页面主结构结束-->
<!--主页面开始-->
<div id="default" class="mui-page">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="controller">
<img src="Images/main_dian.png" id="shangpinlogo"/>
<a class="leftbinggan"></a>
<a class="rightbinggan"></a>
<img src="Images/shangpintu.png" alt="" id="shangpintupian" />
<h2 class="mui-content-padded mui-text-center" id="shangpinmingcheng">抹茶布丁<h2>
<a class="mui-btn mui-btn-danger mui-btn-block chushi" href="#Qrcode">出示</a>
<h5 class="mui-text-center " id="youxiaoriqi">有效期 2015-12-10 至 2015-12-31</h5>
<div class="mui-content-padded" id="qitagongneng">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">适用门店<span class="mui-icon mui-icon-arrowright mui-pull-right"><p class="mui-pull-left" id="juli">最近200米</p></span></a></li>
<li class="mui-table-view-cell"><a href="index2.html">集点卡<span class="mui-icon mui-icon-arrowright mui-pull-right"></span></a></li>
<li class="mui-table-view-cell" id="shiyongxuzhi"><a href="#">使用须知<span class="mui-icon mui-icon-arrowright mui-pull-right"></span></a></li>
<li class="mui-table-view-cell"><a href="#">商家电话<span class="mui-icon mui-icon-arrowright mui-pull-right"><p class="mui-pull-left" id="juli">400-1231-238</p></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--主页面结束-->
<div id="Qrcode" class="mui-page">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="controller">
<img src="Images/main_dian.png" id="shangpinlogo"/>
<a class="leftbinggan"></a>
<a class="rightbinggan"></a>
<img src="Images/shangpintu.png" alt="" id="shangpintupian" />
<h2 class="mui-content-padded mui-text-center" id="shangpinmingcheng">抹茶布丁<h2>
<img id="set_barcode" alt="扫描二维码" />
<h5 class="mui-text-center " id="youxiaoriqi">有效期 2015-12-10 至 2015-12-31</h5>
<a class="mui-btn mui-btn-danger mui-btn-block chushi mui-action-back" style="margin-top:15px;">返回</a>
</div>
</div>
</div>
</div>
<div id="Cy-Tp-XieYi" style="display:none">
<div role="main" class="ui-content">
<div class="col-xs-12 well" id="Div1" style="max-height: 400px;overflow: auto;">
<div>
<div style="text-align:center"><span style="font-size:24px;line-height: 40px;">《使用须知》</span></div>
<span> </span>
<br/>
<div style="text-align:left" >
集点卡服务协议（以下简称“本协议”）是东莞市糖酒集团美宜佳便利店有限公司下辖特许加盟商户(以下简称“商户”)向东莞市彩洋信息科技有限公司（以下简称“我公司”）申请便民预存款额度服授信服务（以下简称“本服务”）所订立的有效合约。
<br/>
<br/>在接受本协议之前，请商户仔细阅读本协议的全部内容（特别是粗体字的内容）。商户通过网络页面点击确认或以其他方式选择接受本协议，即表示商户与我公司已达成本协议并同意接受本协议的全部约定内容。
<br/>
<br/> 第一条 信用评级
<br/> 我公司有权根据商户日常业务开展情况，结合第三方评估意见，对商户的信用等级进行评级。此评级作为我公司判断是否批准商户申请预存款额度的标准之一。
<br/>
<br/> 第二条 预存款额度授信
<br/> 商户通过我公司指定的渠道申请办理集点卡，我公司根据本协议相关约定予以批复。
<br/>
<br/> 第三条 服务费标准及收取
<br/> 在商户使用本服务时，我公司有权向商户收取相关服务费用和免抵押担保费用。服务费用和免抵押担保费用明细详见本协议附件上所列的收费方式说明。相关服务费和免抵押担保费用自商户在我公司的预存款账户额度中直接扣除。
<br/>
<br/> 第四条 预存款额度发放
<br/> 商户申请的便民预存款额度由我公司直接划入商户在我公司预存款账户后，由商户用于开展便民服务业务。
<br/>
<br/> 第五条 预存款额度适用范围
<br/> 商户仅可用以开展便民服务业务，不挪作他用。
<br/>
<br/> 第六条 商户还款日计算
<br/> 按照商户申请账期，自商户成功申请预存款额度时点（以时间点算）起，至成功扣取商户预存款时点，商户需确保在约定还款时点时，预存款账户余额足以抵扣商户申请的额度。本协议项下款项商户可以提前存入商户在我公司的预存款账户，待本协议时间到期，我公司即从商户预存款账户中扣除。
<br/>
<br/> 第七条 预存款额度逾期归还
<br/> 商户同意并确认我公司如商户未在约定时点前归还的本金与服务费，视为违约，需要承担逾期违约金和罚金。逾期违约金计算如下：
<br/> 逾期违约金按照每日应还本金的0.25%计算，不低于2元，每日单独计算。
<br/> 商户同意并确认如商户逾期15日仍未向我公司偿还申请额度全部本金与服务费，我公司在征得东莞市糖酒集团美宜佳便利店有限公司同意的情况下有权优先扣除该商户在东莞市糖酒集团美宜佳便利店有限公司保留的相应加盟保证金，作为额度授信服务本金、违约金的偿还，并通知东莞市糖酒集团美宜佳便利店有限公司停止向商户供货。
<br/>
<br/> 第八条 商户的义务和权利
<br/> 1、商户承诺绝不为任何非法目的或以任何非法方式使用我公司便民服务平台，也不将便民预存款额度申请服务用于禁止或限制物品的交易，并承诺遵守中华人民共和国相关法律、法规及一切使用互联网及支付服务的惯例。
<br/> 2、商户同意并保证不得利用便民预存款额度申请服务从事下列任何侵害他人合法权益或违法的行为，若有违反者，商户应自行承担所有法律责任：
<br/> A、违反依法律或本协议所应负的保密义务；
<br/> B、 冒用他人名义使用集点卡服务；
<br/> C.、涉嫌洗钱、恐怖融资、套现或进行传销活动的；
<br/> D、 使用无效银行账户或他人银行账户交易；
<br/> E、从事任何可能侵害我公司便民服务系统的行为；
<br/> F、其他我司有正当理由认为不适当的行为。
<br/> 3、商户可利用我公司各种渠道来查询自己的信用额度、预存款额度授信的进度以及还款情况等。我公司有义务协助商户对账目有异议的部分的进行查询。
<br/>
<br/> 第九条 我公司的权利和义务
<br/> 1、有权检查、监督商户额度资金的使用情况；
<br/> 2、按本协议约定在商户额度授信申请通过后及时发放相应额度；
<br/> 3、在额度使用期限到期时有权从商户的预存款账户内直接划款。
<br/>
<br/> 第十条 协议的变更和解除
<br/> 我公司有权对本协议内容进行单方面的变更，并以本公司公告的方式予以公布，无需另行单独通知商户；若商户在本协议内容公告变更后继续使用本服务的，表示商户已充分阅读、理解并接受修改后的协议内容，也将遵循修改后的协议内容使用本服务；若商户不同意修改后的协议内容，商户应停止使用本服务并将停止使用本服务前申请的额度一次性支付给我公司。
<br/>
<br/> 第十一条 本协议争议的解决方式
<br/> 商户在履行本合同中发生的争议，由双方协商或者通过调解解决。协商或调解不成，可以向东莞市人民法院起诉，或者向东莞市仲裁机构申请仲裁。在协商和诉讼期间，本协议不涉及争议部分的条款，双方仍需履行。
<br/>
<br/> 第十二条 协议生效和终止
<br/> 本协议经商户确认申请服务或以其他方式选择接受本协议后生效，至协议项下额度与服务费用全部清偿完毕后终止。
<br/>
<br/> 第十三条 协议附件
<br/> 《集点卡服务费标准》
<br/>
</div>
</div>
</div>
<p style="margin:10px 0px 0px 0px;text-align:center;">
<a id="Cy_Tp_Agree" onclick="Cy_Tp_Agree()" style="z-index: 9999;margin-right: 10px;color:#fff" class="mui-btn mui-btn-outlined">确 认</a>
<a id="Cy_Tp_cannel" onclick="Cy_Tp_cannel()" style="z-index: 9999;color:#fff" class="mui-btn mui-btn-outlined">取 消</a>
</p>
</div>
</div>
<script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui/mui.view.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layermobile/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/JsBarcode/CODE39.js" type="text/javascript" charset="utf-8"></script>
<script src="js/JsBarcode/JsBarcode.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//jQuery代码
$(function()
{
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
$("#set_barcode").JsBarcode("6931273201136", {
format: "CODE39",
width: 1,
displayValue: true
});
$("#shiyongxuzhi").bind("tap",function()
{
layer.open
({
style: "width:80%;color:#fff;background:rgba(0,0, 0, .9);border-radius:5px;",
title: false,
shadeClose: false,
shade:0,
content: $("#Cy-Tp-XieYi").html()
});
})
})
//∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏ 方法体 ∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏
Cy_Tp_Agree = function()
{
layer.closeAll();
}
Cy_Tp_cannel = function()
{
layer.closeAll();
return false;
}
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#default'
});
var view = viewApi.view;
(function($) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) {
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
// console.log(e.detail.page.id + ' show');
});
view.addEventListener('pageBeforeBack', function(e) {
// console.log(e.detail.page.id + ' beforeBack');
});
view.addEventListener('pageBack', function(e) {
// console.log(e.detail.page.id + ' back');
});
})(mui);
</script>
/body>
</html>
Html - SPA页面收集（有图）的更多相关文章
- NSIS脚本：在卸载页面收集信息
原文 NSIS脚本:在卸载页面收集信息 此功能用于在软件卸载时收集相关信息,以便进行后续改进.实现功能如图: 以下为实现代码: 01 !include nsDialogs.nsh 02 !includ ...
- C#图片采集软件 自动翻页 自动分类（收集美图必备工具）（一）
网站管理员希望将别人的整站数据下载到自己的网站里或者将别人网站的一些内容保存到自己的服务器上.从内容中抽取相关的字段,发布到自己的网站系统中.有时需要将网页相关的文件也保存到本地,如图片.附件等. 图 ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- SPA页面初试
之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...
- react-native构建基本页面2---轮播图+九宫格
配置首页的轮播图 轮播图官网 运行npm i react-native-swiper --save安装轮播图组件 导入轮播图组件import Swiper from 'react-native-swi ...
- SPA页面
背景: 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用,它将所有的活动均局限于一个Web页面中:这就表示Web应用被加载出来之后,W ...
- requirejs+angularjs搭建SPA页面应用
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
- SPA页面缓存再优化二
部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...
- SPA页面性能优化
1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...
随机推荐
- windows下安装coreseek/sphinx
2013年12月8日 17:26:26 注意的地方: 1.配置文件的 数据源, 索引, 服务 这3处配置的路径要写成windows识别的路径,最好是绝对路径 2.安装windows服务的时候,可以不带 ...
- tomcat启动，输出system.out.println()
tomcat6.0在使用System.out.println("aa")的时候,用cmd启动startup.bat,弹出的那个cmd窗口看到 还可以看logs/catalina.o ...
- Gym 100801D Distribution in Metagonia (数学思维题)
题目:传送门.(需要下载PDF) 题意:t组数据,每组数据给定一个数ni(1 ≤ ni ≤ 10^18),把ni拆成尽可能多的数,要求每个数的素因子只包含2和3,且这些数不能被彼此整除,输出一共能拆成 ...
- [Android Pro] 超能RecyclerView组件使用
RecyclerView最强大的功能在于秒变功能,只需要改动很少的代码就可以实现ListView,GridView及水平ListViw的切换功能 public class MainActivity e ...
- kvm xxx.xml文件的位置
/var/run/libvirt/qemu/xxx.xml /etc/libvirt/qemu/xxx.xml
- php变量的几种写法
一.最简单的 $str = 'Hello World!'; 二.来个变种 $str = 'good'; $good = 'test'; $test = 'Hello World!'; echo $$$ ...
- CI如何接受POST请求中的JSON数据
PHP默认只识别application/x-www.form-urlencoded标准的数据类型 “php://input可以读取没有处理过的POST数据.相较于$HTTP_RAW_POST_DATA ...
- 解决来QQ消息后歌曲音量降低问题
今天学了一天,晚上听歌放松一下,谁知碰到了一个很纠结的问题,我正在聊天,每当来QQ消息后,我的歌曲音量自动降低,降到非常小,然后我就调高 音量,把音乐的音量调到最大,又把系统音量调到最大,谁知音乐的声 ...
- 一个功能完备的.NET开源OpenID Connect/OAuth 2.0框架——IdentityServer3
今天推荐的是我一直以来都在关注的一个开源的OpenID Connect/OAuth 2.0服务框架--IdentityServer3.其支持完整的OpenID Connect/OAuth 2.0标准, ...
- jQuery插件AjaxFileUpload实现ajax文件上传
转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...