场景，左图，又字段的布局

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/mui/mui.min.css"/>
  7.         <style type="text/css">
  8.             body{font-family: "微软雅黑";background: #fff;}
  9.             #logo{max-width:85px;min-width:80px;height:100%;margin-top: 16px;}
  10.             .dian{max-width:39px;position: relative;top:7px}
  11.             #title{color:#33333b;font-size:16px;line-height:25px;}
  12.             .num{color:#ff9395;padding:0px 5px}
  13.             .goinfo{font-size:14px;color:#a8a8a8;float:right;}
  14.             .mui-table-view .mui-media-object.mui-pull-left{margin-right:15px;}
  15.             .mui-ellipsis{margin-top:5px;}
  16.             .mui-table-view-cell>a:not(.mui-btn){white-space:normal;}
  17.             .qiandao{margin:0px 0px 0px 10px;border:1px dashed #ff5f68;border-radius: 100%;padding: 5px 10px;}
  18.             .shangpin_name{color:#ff9395}
  19.             .mui-table-view::before{border:1px solid #fee0c4;top:0.68px;}
  20.             .mui-table-view::after{border:1px solid #fee0c4;}
  21.             #controller{margin-left: 0;background:#fff8ee;width: 100%;margin:auto;}
  22.             #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%;}
  23.             #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%;}
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <div style="width: 95%;margin:auto;margin-top:20px;">
  28.             <ul class="mui-table-view mui-content-padded" id="controller">
  29.  
  30.                 <a class="leftbinggan"></a>
  31.                 <a class="rightbinggan"></a>
  32.  
  33.                 <li class="mui-table-view-cell mui-media">
  34.                     <a href="index2.html">
  35.                         <img id="logo" class="mui-media-object mui-pull-left" src="Images/logo.png">
  36.                         <div class="mui-media-body">
  37.                             <p style="margin-top:5px;">
  38.                                 <img src="Images/dian.png" alt="LOGO" class="dian" />
  39.                                 <span class="qiandao">2</span>
  40.                                 <span class="qiandao">3</span>
  41.                                 <span class="qiandao">4</span>
  42.                                 <span class="qiandao">5</span>
  43.                             </p>
  44.                             <p style="margin-top:15px;" id="title" class="mui-content-padded">太棒啦！已集结<span class="num">9</span>个集点,可兑换<span class="shangpin_name">1杯红豆布丁</span>哦oooo~</p>
  45.                             <p class='mui-ellipsis'><span class="goinfo">查看详情>>></span></p>
  46.                         </div>
  47.                     </a>
  48.                 </li>
  49.             </ul>
  50.         </div>
  51.     </body>
  52. </html>

场景：左图，中字段，又字段

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="expires" content="0">
  7.         <meta http-equiv="cache-control" content="no-cache">
  8.         <meta http-equiv="pragma" content="no-cache">
  9.         <meta name="renderer" content="ie-comp">
  10.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  11.         <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  12.  
  13.         <title>我的集点卡</title>
  14.         <link rel="stylesheet" type="text/css" href="css/mui/mui.min.css" />
  15.  
  16.         <style type="text/css">
  17.             body{font-family:"微软雅黑";background: #f5f5f9;}
  18.             .mui-content-padded{background:#fff}
  19.             .xiaofeishuoming{color:#a5a5a5;font-size:15px}
  20.             .ico_img{width:30px}
  21.             .goinfo{float:right;color:#969696;font-size:14px}
  22.             .num{padding:0 5px;color:#ef6767}
  23.             .mui-table-view .mui-media-object{height:65px;max-width:75px;border:1px solid #ccc}
  24.             .mui-table-view:before{display:none}
  25.             .dian{position:relative;top:7px;max-width:39px}
  26.             .qiandao{margin:0 0 0 10px;padding:5px 10px;border:1px dashed #ff5f68;border-radius:100%}
  27.  
  28.             #binggan{position:relative;margin-bottom:0;padding:20px 0 20px;width:100%;height:100%;background:#fff8ee;text-align:center}
  29.             #binggan:before{content:open-quote;font-size:0px;width: 100%;background:url(Images/22_01.png) repeat-x ;display: block;position: absolute;top: -5px;}
  30.             #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;}
  31.             #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}
  32.             #binggan img{margin:10px 10px;width:50px;text-align:centet;}
  33.             #binggan .bingganblock{display:block;margin:auto;width:100%;padding-bottom:10px;padding-top:10px;}
  34.  
  35.         </style>
  36.     </head>
  37.  
  38.     <body>
  39.  
  40.         <div class="mui-contet">
  41.             <p style="border-top: 1px solid #ddd;background: #fff;padding:20px 0px;margin:20px 0px 0px;padding:30px 20px;">
  42.                 <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>
  43.             </p>
  44.  
  45.                  <div id="binggan" style="width: 100%;">
  46.  
  47.                          <p id="bingganinner" style="margin: auto;max-width: 400px;">
  48.  
  49.                              <img src="Images/xindian.png" class="ico_img"/>
  50.                              <img src="Images/xindian.png" class="ico_img"/>
  51.                              <img src="Images/xindian.png" class="ico_img"/>
  52.                              <img src="Images/xindian.png" class="ico_img"/>
  53.                              <img src="Images/xindian.png" class="ico_img"/>
  54.  
  55.                              <img src="Images/xindian.png" class="ico_img"/>
  56.                              <img src="Images/xindian.png" class="ico_img"/>
  57.                              <span class="mui-icon">8</span>
  58.                             <span class="mui-icon">9</span>
  59.                             <span class="mui-icon">10</span>
  60.  
  61.                              <span class="mui-icon">11</span>
  62.                             <span class="mui-icon">12</span>
  63.                             <span class="mui-icon">13</span>
  64.                             <span class="mui-icon">14</span>
  65.                             <span class="mui-icon">15</span>
  66.  
  67.                             <span class="bingganblock" style="font-size:18px;color:#ff878b;clear: both;">
  68.                                 已集12个
  69.                             </span>
  70.  
  71.                         </p>    
  72.  
  73.                 </div>    
  74.  
  75.                 <ul class="mui-table-view" id="dianpujihua" style="padding-top:15px;border-bottom: 1px solid #ddd;">
  76.                     <li class="mui-table-view-cell mui-media">
  77.                         <a href="javascript:;" onclick="exchange_兑换奖品()">
  78.                             <div class="mui-media-body mui-pull-left">
  79.                                 <img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
  80.                             </div>
  81.                             <div class="mui-media-body mui-pull-left" style="margin-left:10px;">
  82.                                 <h4 class="mui-content-padded">抹茶布丁</h4>
  83.                                 <p class="mui-text-left mui-content-padded">
  84.                                     6个集点兑换
  85.                                 </p>
  86.                             </div>
  87.                             <div class="mui-media-body mui-pull-right" style="max-width:35%;overflow:visible;white-space: normal;line-height:30px;">
  88.                                 <button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
  89.                             </div>
  90.                         </a>
  91.                     </li>
  92.                     <li class="mui-table-view-cell mui-media">
  93.                         <a href="javascript:;" onclick="exchange_兑换奖品()">
  94.                             <div class="mui-media-body mui-pull-left">
  95.                                 <img class="mui-media-object shangpinlogo" src="Images/kouxiangtang.png">
  96.                             </div>
  97.                             <div class="mui-media-body mui-pull-left" style="margin-left:10px;">
  98.                                 <h4 class="mui-content-padded">抹茶布丁</h4>
  99.                                 <p class="mui-text-left mui-content-padded">
  100.                                     8个集点兑换
  101.                                 </p>
  102.                             </div>
  103.                             <div class="mui-media-body mui-pull-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
  104.                                 <p id="title" class="mui-pull-right">
  105.                                     <button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
  106.                                 </p>
  107.                             </div>
  108.                         </a>
  109.                     </li>
  110.                     <li class="mui-table-view-cell mui-media">
  111.                         <a href="javascript:;" onclick="exchange_兑换奖品()">
  112.                             <div class="mui-media-body mui-pull-left">
  113.                                 <img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
  114.                             </div>
  115.                             <div class="mui-media-body mui-pull-left" style="margin-left:10px;">
  116.                                 <h4 class="mui-content-padded">抹茶布丁</h4>
  117.                                 <p class="mui-text-left mui-content-padded">
  118.                                     8个集点兑换
  119.                                 </p>
  120.                             </div>
  121.                             <div class="mui-media-body mui-pull-right mui-text-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
  122.                                 <button type="button" style="color:#C0C0C0;height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-outlined">兑换</button>
  123.                             </div>
  124.                         </a>
  125.                     </li>
  126.                 </ul>
  127.  
  128.             <p style="border-top: 1px solid #ddd;border-bottom:1px solid #EBCCCC;background: #fff;padding:20px 0px;margin:20px 0px 0px;padding:20px;">
  129.                 <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>
  130.             </p>
  131.  
  132.                 <ul class="mui-table-view" id="pinpaijihua" style="border-bottom: 1px solid #ddd;">
  133.                     <li class="mui-table-view-cell mui-media">
  134.                         <a href="javascript:;" onclick="exchange_兑换奖品()">
  135.                             <div class="mui-media-body mui-pull-left">
  136.                                 <img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
  137.                             </div>
  138.                             <div class="mui-media-body mui-pull-left" style="margin-left:15px;">
  139.                                 <p>
  140.                                     <img src="Images/huaduo.png" alt="" />
  141.                                     <img src="Images/huaduo.png" alt="" />
  142.                                     <img src="Images/huaduo.png" alt="" />
  143.                                     <img src="Images/baihuaduo.png" alt="" />
  144.                                     <img src="Images/baihuaduo.png" alt="" />
  145.                                 </p>
  146.                                 <p class="mui-text-left" style="text-indent: 10px;">
  147.                                     农夫山泉高端泉水
  148.                                 </p>
  149.                             </div>
  150.                             <div class="mui-media-body mui-pull-right" style="max-width:35%;overflow:visible;white-space: normal;line-height:30px;">
  151.                                 <button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
  152.                             </div>
  153.                         </a>
  154.                     </li>
  155.                     <li class="mui-table-view-cell mui-media">
  156.                         <a href="javascript:;" onclick="exchange_兑换奖品()">
  157.                             <div class="mui-media-body mui-pull-left">
  158.                                 <img class="mui-media-object shangpinlogo" src="Images/kouxiangtang.png">
  159.                             </div>
  160.                             <div class="mui-media-body mui-pull-left" style="margin-left:15px;">
  161.                                 <p>
  162.                                     <img src="Images/huaduo.png" alt="" />
  163.                                     <img src="Images/huaduo.png" alt="" />
  164.                                     <img src="Images/huaduo.png" alt="" />
  165.                                     <img src="Images/huaduo.png" alt="" />
  166.                                     <img src="Images/huaduo.png" alt="" />
  167.                                 </p>
  168.                                 <p class="mui-text-left" style="text-indent: 10px;">
  169.                                     绿箭口香糖
  170.                                 </p>
  171.                             </div>
  172.                             <div class="mui-media-body mui-pull-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
  173.                                 <p id="title" class="mui-pull-right">
  174.                                     <button type="button" style="height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>
  175.                                 </p>
  176.                             </div>
  177.                         </a>
  178.                     </li>
  179.                     <li class="mui-table-view-cell mui-media">
  180.                         <a href="javascript:;" onclick="exchange_兑换奖品()">
  181.                             <div class="mui-media-body mui-pull-left">
  182.                                 <img class="mui-media-object shangpinlogo" src="Images/nongfushanquan.png">
  183.                             </div>
  184.                             <div class="mui-media-body mui-pull-left" style="margin-left:15px;">
  185.                                 <p>
  186.                                     <img src="Images/huaduo.png" alt="" />
  187.                                     <img src="Images/huaduo.png" alt="" />
  188.                                     <img src="Images/huaduo.png" alt="" />
  189.                                     <img src="Images/huaduo.png" alt="" />
  190.                                     <img src="Images/baihuaduo.png" alt="" />
  191.  
  192.                                 </p>
  193.                                 <p class="mui-text-left" style="text-indent: 10px;">
  194.                                     农夫山泉高端泉水
  195.                                 </p>
  196.                             </div>
  197.                             <div class="mui-media-body mui-pull-right mui-text-right" style="width:35%;overflow:visible;white-space: normal;line-height:30px;">
  198.                                 <button type="button" style="color:#C0C0C0;height:35px;margin-top:15px;border-radius: 15px;width:60px;" class="mui-btn mui-btn-outlined">兑换</button>
  199.                             </div>
  200.                         </a>
  201.                     </li>
  202.                 </ul>
  203.  
  204.             <p style="background: #fff;padding:20px 0px;margin:20px 0px;padding:20px;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;">
  205.                 <span style="color:#2c3038;font-size:16px;">集点规则</span> <span class="mui-icon mui-icon-arrowright mui-pull-right"></span>
  206.             </p>
  207.  
  208.         </div>
  209.  
  210.     </body>
  211.  
  212.     <script type="text/template" id="shangpin_info" class="mui-hidden">
  213.  
  214.         <img src="Images/shangpintu.png" alt="" />
  215.  
  216.         <h4 class="mui-content-padded mui-text-center">大满贯布丁奶茶1杯</h4>
  217.         <p class="mui-text-center">
  218.             <img src="Images/dian.png" class="ico_img" alt="" />
  219.             <img src="Images/dian.png" class="ico_img" alt="" />
  220.             <img src="Images/dian.png" class="ico_img" alt="" />
  221.         </p>
  222.  
  223.         <p>
  224.             <img id="set_barcode" alt="扫描二维码" style="margin-left: 14%;" />
  225.         </p>
  226.  
  227.         <p class="mui-text-center" id="saomiaoerweima">请向收银员出示该二维码</p>
  228.  
  229.     </script>
  230.  
  231.     <script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  232.     <script src="js/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
  233.     <script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
  234.     <script src="js/JsBarcode/CODE39.js" type="text/javascript" charset="utf-8"></script>
  235.     <script src="js/JsBarcode/JsBarcode.js" type="text/javascript" charset="utf-8"></script>
  236.  
  237.     <script type="text/javascript">
  238.         $(function() {
  239.             $("#qiandao ul li").each(function() {
  240.                 var self = $(this);
  241.                 var index = parseInt(self.index() + 1);
  242.                 var num = self.find("img").size();
  243.                 if (num == 0) {
  244.                     self.find("h4").text(index);
  245.                 }
  246.             })
  247.         })
  248.         exchange_兑换奖品 = function() {
  249.             //询问框
  250.             layer.confirm('你确认要兑换该商品吗？', {
  251.                 btn: ['确定', '取消'], //按钮
  252.                 icon: 3,
  253.                 title: '温馨提示'
  254.             }, function()
  255.             {
  256.                 layer.closeAll();
  257.                 var html = $("#shangpin_info").html();
  258.                 var index = layer.open({
  259.                     title: false,
  260.                     skin: "mylayer",
  261.                     closeBtn: 2,
  262.                     type: 1,
  263.                     btn: 0,
  264.                     content: html,
  265.                     shade: [0.4, '#000'],
  266.                     shadeClose: true,
  267.                     success: function() {
  268.                         $("#set_barcode").JsBarcode("6931273201136", {
  269.                             format: "CODE39",
  270.                             width: 1,
  271.                             displayValue: true
  272.                         });
  273.                         $('img').load(function() {
  274.                             //由于模板中存在图片未加载，
  275.                             //当layer弹出的时候。
  276.                             //宽度计算错误导致不居中，所以我手动居中了
  277.                             var widthForWindow = $(window).width();
  278.                             var winthForLayer = $(".mylayer").width();
  279.                             var myWidth = (widthForWindow - winthForLayer) / 2;
  280.                             layer.style(index, {
  281.                                 left: myWidth,
  282.                                 top: "15%"
  283.                             });
  284.                         })
  285.                     }
  286.                 })
  287.             }, function() {
  288.                 return;
  289.             });
  290.         }
  291.     </script>
  292.  
  293. </html>

场景：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Hello MUI</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7.         <meta name="apple-mobile-web-app-capable" content="yes">
  8.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.  
  10.         <link rel="stylesheet" href="css/mui/mui.min.css">
  11.         <style>
  12.             /*自定义Css*/
  13.  
  14.             body{height:auto;background:#e95452;font-family:"微软雅黑";}
  15.             .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);}
  16.             .chushi{margin:auto;width:50%}
  17.             #shangpinmingcheng{margin:20px 0}
  18.             #youxiaoriqi{margin:25px 0}
  19.             #qitagongneng{text-align:left}
  20.             .mui-icon-arrowright{color:#c7c7cc}
  21.             #shangpinlogo{width: 70px;position: absolute;top: -30px;left:50%;margin-left:-35px;border-radius: 100%;}
  22.             .leftbinggan{position:absolute;height:20px;width:20px;background:#e95452;display: block;left:-10px;top:60%;border-radius: 25px;}
  23.             .rightbinggan{position:absolute;height:20px;width:20px;background:#e95452;display: block;right:-10px;top:60%;border-radius: 25px;}
  24.             #shangpintupian{width: 100%;max-height: 210px;max-width:400px;}
  25.             #juli{font-size: 16px;padding-top:7px;padding-right:5px;} 
  26.  
  27.               /*DIV切换固定样式*/
  28.             .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}
  29.             .mui-pages{height:auto}
  30.             .mui-scroll,.mui-scroll-wrapper{background-color:#e95452}
  31.             .mui-page.mui-transitioning{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}
  32.             .mui-page-left{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  33.             .mui-ios .mui-page-left{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}
  34.             .mui-navbar{position:fixed;right:0;left:0;z-index:10;height:44px;background-color:#f7f7f8}
  35.             .mui-navbar .mui-bar{position:absolute;background:0 0;text-align:center}
  36.             .mui-android .mui-navbar-inner.mui-navbar-left{opacity:0}
  37.             .mui-ios .mui-navbar-left .mui-center,.mui-ios .mui-navbar-left .mui-left,.mui-ios .mui-navbar-left .mui-right{opacity:0}
  38.             .mui-navbar .mui-btn-nav{-webkit-transition:none;transition:none;-webkit-transition-duration:0s;transition-duration:0s}
  39.             .mui-navbar .mui-bar .mui-title{display:inline-block;width:auto}
  40.             .mui-page-shadow{position:absolute;right:100%;top:0;width:16px;height:100%;z-index:-1;content:''}
  41.             .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%)}
  42.             .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}
  43.             .mui-page{display:none}
  44.             .mui-pages .mui-page{display:block}
  45.             .mui-page .mui-table-view:first-child{margin-top:15px}
  46.             .mui-page .mui-table-view:last-child{margin-bottom:30px}
  47.             .mui-table-view{margin-top:20px}
  48.             .mui-table-view span.mui-pull-right{color:#999}
  49.             .mui-table-view-divider{background-color:#efeff4;font-size:14px}
  50.             .mui-table-view-divider:after,.mui-table-view-divider:before{height:0}
  51.             .mui-fullscreen{position:fixed;z-index:20;background-color:#000}
  52.             .mui-ios .mui-navbar .mui-bar .mui-title{position:static}
  53.  
  54.         </style>
  55.  
  56.     </head>
  57.  
  58.     <body class="mui-fullscreen">
  59.         <!--页面主结构开始-->
  60.         <div id="app" class="mui-views">
  61.             <div class="mui-view">
  62.                 <div class="mui-pages">
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         <!--页面主结构结束-->
  67.  
  68.         <!--主页面开始-->
  69.         <div id="default" class="mui-page">
  70.             <div class="mui-scroll-wrapper">
  71.                 <div class="mui-scroll">
  72.                     <div class="controller">
  73.                         <img src="Images/main_dian.png" id="shangpinlogo"/>
  74.                         <a class="leftbinggan"></a>
  75.                         <a class="rightbinggan"></a>
  76.                         <img src="Images/shangpintu.png" alt="" id="shangpintupian" />
  77.                         <h2 class="mui-content-padded mui-text-center" id="shangpinmingcheng">抹茶布丁<h2>
  78.                         <a class="mui-btn mui-btn-danger mui-btn-block chushi"  href="#Qrcode">出示</a>
  79.                         <h5 class="mui-text-center " id="youxiaoriqi">有效期 2015-12-10 至 2015-12-31</h5>
  80.                         <div class="mui-content-padded" id="qitagongneng">
  81.                             <ul class="mui-table-view">
  82.                                 <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>
  83.                                 <li class="mui-table-view-cell"><a href="index2.html">集点卡<span class="mui-icon mui-icon-arrowright mui-pull-right"></span></a></li>
  84.                                 <li class="mui-table-view-cell" id="shiyongxuzhi"><a href="#">使用须知<span class="mui-icon mui-icon-arrowright mui-pull-right"></span></a></li>
  85.                                 <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>
  86.                             </ul>
  87.                         </div>
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.  
  92.         </div>
  93.         <!--主页面结束-->
  94.  
  95.         <div id="Qrcode" class="mui-page">
  96.             <div class="mui-scroll-wrapper">
  97.                 <div class="mui-scroll">
  98.                     <div class="controller">
  99.                         <img src="Images/main_dian.png" id="shangpinlogo"/>
  100.                         <a class="leftbinggan"></a>
  101.                         <a class="rightbinggan"></a>
  102.                         <img src="Images/shangpintu.png" alt="" id="shangpintupian" />
  103.                         <h2 class="mui-content-padded mui-text-center" id="shangpinmingcheng">抹茶布丁<h2>
  104.                         <img id="set_barcode" alt="扫描二维码" />
  105.                         <h5 class="mui-text-center " id="youxiaoriqi">有效期 2015-12-10 至 2015-12-31</h5>
  106.                         <a class="mui-btn mui-btn-danger mui-btn-block chushi mui-action-back" style="margin-top:15px;">返回</a>
  107.                     </div>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.  
  112.         <div id="Cy-Tp-XieYi" style="display:none">
  113.             <div role="main" class="ui-content">
  114.                 <div class="col-xs-12 well" id="Div1" style="max-height: 400px;overflow: auto;">
  115.                     <div>
  116.                         <div style="text-align:center"><span style="font-size:24px;line-height: 40px;">《使用须知》</span></div>
  117.                         <span>&nbsp;</span>
  118.                         <br/>
  119.                         <div style="text-align:left" >
  120.                             集点卡服务协议（以下简称“本协议”）是东莞市糖酒集团美宜佳便利店有限公司下辖特许加盟商户(以下简称“商户”)向东莞市彩洋信息科技有限公司（以下简称“我公司”）申请便民预存款额度服授信服务（以下简称“本服务”）所订立的有效合约。
  121.                             <br/>
  122.                             <br/>在接受本协议之前，请商户仔细阅读本协议的全部内容（特别是粗体字的内容）。商户通过网络页面点击确认或以其他方式选择接受本协议，即表示商户与我公司已达成本协议并同意接受本协议的全部约定内容。
  123.                             <br/>
  124.                             <br/> 第一条 信用评级
  125.                             <br/> 我公司有权根据商户日常业务开展情况，结合第三方评估意见，对商户的信用等级进行评级。此评级作为我公司判断是否批准商户申请预存款额度的标准之一。
  126.                             <br/>
  127.                             <br/> 第二条 预存款额度授信
  128.                             <br/> 商户通过我公司指定的渠道申请办理集点卡，我公司根据本协议相关约定予以批复。
  129.                             <br/>
  130.                             <br/> 第三条 服务费标准及收取
  131.                             <br/> 在商户使用本服务时，我公司有权向商户收取相关服务费用和免抵押担保费用。服务费用和免抵押担保费用明细详见本协议附件上所列的收费方式说明。相关服务费和免抵押担保费用自商户在我公司的预存款账户额度中直接扣除。
  132.                             <br/>
  133.                             <br/> 第四条 预存款额度发放
  134.                             <br/> 商户申请的便民预存款额度由我公司直接划入商户在我公司预存款账户后，由商户用于开展便民服务业务。
  135.                             <br/>
  136.                             <br/> 第五条 预存款额度适用范围
  137.                             <br/> 商户仅可用以开展便民服务业务，不挪作他用。
  138.                             <br/>
  139.                             <br/> 第六条 商户还款日计算
  140.                             <br/> 按照商户申请账期，自商户成功申请预存款额度时点（以时间点算）起，至成功扣取商户预存款时点，商户需确保在约定还款时点时，预存款账户余额足以抵扣商户申请的额度。本协议项下款项商户可以提前存入商户在我公司的预存款账户，待本协议时间到期，我公司即从商户预存款账户中扣除。
  141.                             <br/>
  142.                             <br/> 第七条 预存款额度逾期归还
  143.                             <br/> 商户同意并确认我公司如商户未在约定时点前归还的本金与服务费，视为违约，需要承担逾期违约金和罚金。逾期违约金计算如下：
  144.                             <br/> 逾期违约金按照每日应还本金的0.25%计算，不低于2元，每日单独计算。
  145.                             <br/> 商户同意并确认如商户逾期15日仍未向我公司偿还申请额度全部本金与服务费，我公司在征得东莞市糖酒集团美宜佳便利店有限公司同意的情况下有权优先扣除该商户在东莞市糖酒集团美宜佳便利店有限公司保留的相应加盟保证金，作为额度授信服务本金、违约金的偿还，并通知东莞市糖酒集团美宜佳便利店有限公司停止向商户供货。
  146.                             <br/>
  147.                             <br/> 第八条 商户的义务和权利
  148.                             <br/> 1、商户承诺绝不为任何非法目的或以任何非法方式使用我公司便民服务平台，也不将便民预存款额度申请服务用于禁止或限制物品的交易，并承诺遵守中华人民共和国相关法律、法规及一切使用互联网及支付服务的惯例。
  149.                             <br/> 2、商户同意并保证不得利用便民预存款额度申请服务从事下列任何侵害他人合法权益或违法的行为，若有违反者，商户应自行承担所有法律责任：
  150.                             <br/> A、违反依法律或本协议所应负的保密义务；
  151.                             <br/> B、 冒用他人名义使用集点卡服务；
  152.                             <br/> C.、涉嫌洗钱、恐怖融资、套现或进行传销活动的；
  153.                             <br/> D、 使用无效银行账户或他人银行账户交易；
  154.                             <br/> E、从事任何可能侵害我公司便民服务系统的行为；
  155.                             <br/> F、其他我司有正当理由认为不适当的行为。
  156.                             <br/> 3、商户可利用我公司各种渠道来查询自己的信用额度、预存款额度授信的进度以及还款情况等。我公司有义务协助商户对账目有异议的部分的进行查询。
  157.                             <br/>
  158.                             <br/> 第九条 我公司的权利和义务
  159.                             <br/> 1、有权检查、监督商户额度资金的使用情况；
  160.                             <br/> 2、按本协议约定在商户额度授信申请通过后及时发放相应额度；
  161.                             <br/> 3、在额度使用期限到期时有权从商户的预存款账户内直接划款。
  162.                             <br/>
  163.                             <br/> 第十条 协议的变更和解除
  164.                             <br/> 我公司有权对本协议内容进行单方面的变更，并以本公司公告的方式予以公布，无需另行单独通知商户；若商户在本协议内容公告变更后继续使用本服务的，表示商户已充分阅读、理解并接受修改后的协议内容，也将遵循修改后的协议内容使用本服务；若商户不同意修改后的协议内容，商户应停止使用本服务并将停止使用本服务前申请的额度一次性支付给我公司。
  165.                             <br/>
  166.                             <br/> 第十一条　本协议争议的解决方式
  167.                             <br/> 商户在履行本合同中发生的争议，由双方协商或者通过调解解决。协商或调解不成，可以向东莞市人民法院起诉，或者向东莞市仲裁机构申请仲裁。在协商和诉讼期间，本协议不涉及争议部分的条款，双方仍需履行。
  168.                             <br/>
  169.                             <br/> 第十二条　协议生效和终止
  170.                             <br/> 本协议经商户确认申请服务或以其他方式选择接受本协议后生效，至协议项下额度与服务费用全部清偿完毕后终止。
  171.                             <br/>
  172.                             <br/> 第十三条　协议附件
  173.                             <br/> 《集点卡服务费标准》
  174.                             <br/>
  175.                         </div>
  176.                     </div>
  177.                 </div>
  178.  
  179.                 <p style="margin:10px 0px 0px 0px;text-align:center;">
  180.                     <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>
  181.                     <a id="Cy_Tp_cannel" onclick="Cy_Tp_cannel()" style="z-index: 9999;color:#fff" class="mui-btn mui-btn-outlined">取 消</a>
  182.                 </p>
  183.             </div>
  184.         </div>
  185.  
  186.     <script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  187.     <script src="js/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
  188.     <script src="js/mui/mui.view.js" type="text/javascript" charset="utf-8"></script>
  189.     <script src="js/layermobile/layer.js" type="text/javascript" charset="utf-8"></script>
  190.     <script src="js/JsBarcode/CODE39.js" type="text/javascript" charset="utf-8"></script>
  191.     <script src="js/JsBarcode/JsBarcode.js" type="text/javascript" charset="utf-8"></script>
  192.     <script type="text/javascript">
  193.             //jQuery代码
  194.             $(function()
  195.             {
  196.  
  197.                 mui('.mui-scroll-wrapper').scroll({
  198.                     deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  199.                 });
  200.  
  201.                 $("#set_barcode").JsBarcode("6931273201136", {
  202.                                 format: "CODE39",
  203.                                 width: 1,
  204.                                 displayValue: true
  205.                 });
  206.  
  207.                 $("#shiyongxuzhi").bind("tap",function()
  208.                 {
  209.                     layer.open
  210.                     ({
  211.                             style: "width:80%;color:#fff;background:rgba(0,0, 0, .9);border-radius:5px;",
  212.                             title: false,
  213.                             shadeClose: false,
  214.                             shade:0,
  215.                             content: $("#Cy-Tp-XieYi").html()
  216.                     });
  217.                 })
  218.  
  219.             })
  220.  
  221.             //∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏ 方法体 ∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏∏
  222.              Cy_Tp_Agree = function()
  223.             {
  224.                 layer.closeAll();
  225.               }
  226.  
  227.              Cy_Tp_cannel = function()
  228.              {
  229.                 layer.closeAll();
  230.                 return false;
  231.              }
  232.  
  233.             //初始化单页view
  234.             var viewApi = mui('#app').view({
  235.                 defaultPage: '#default'
  236.             });
  237.  
  238.             var view = viewApi.view;
  239.             (function($) {
  240.                 //处理view的后退与webview后退
  241.                 var oldBack = $.back;
  242.                 $.back = function() {
  243.                     if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
  244.                         viewApi.back();
  245.                     } else { //执行webview后退
  246.                         oldBack();
  247.                     }
  248.                 };
  249.                 //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
  250.                 //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
  251.                 view.addEventListener('pageBeforeShow', function(e) {
  252.                     //                console.log(e.detail.page.id + ' beforeShow');
  253.                 });
  254.                 view.addEventListener('pageShow', function(e) {
  255.                     //                console.log(e.detail.page.id + ' show');
  256.                 });
  257.                 view.addEventListener('pageBeforeBack', function(e) {
  258.                     //                console.log(e.detail.page.id + ' beforeBack');
  259.                 });
  260.                 view.addEventListener('pageBack', function(e) {
  261.                     //                console.log(e.detail.page.id + ' back');
  262.                 });
  263.             })(mui);
  264.  
  265.     </script>
  266.   /body>
  267. </html>

Html - SPA页面收集（有图）的更多相关文章

  1. NSIS脚本：在卸载页面收集信息

    原文 NSIS脚本:在卸载页面收集信息 此功能用于在软件卸载时收集相关信息,以便进行后续改进.实现功能如图: 以下为实现代码: 01 !include nsDialogs.nsh 02 !includ ...

  2. C#图片采集软件 自动翻页 自动分类（收集美图必备工具）（一）

    网站管理员希望将别人的整站数据下载到自己的网站里或者将别人网站的一些内容保存到自己的服务器上.从内容中抽取相关的字段,发布到自己的网站系统中.有时需要将网页相关的文件也保存到本地,如图片.附件等. 图 ...

  3. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  4. SPA页面初试

    之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...

  5. react-native构建基本页面2---轮播图+九宫格

    配置首页的轮播图 轮播图官网 运行npm i react-native-swiper --save安装轮播图组件 导入轮播图组件import Swiper from 'react-native-swi ...

  6. SPA页面

    背景: 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用,它将所有的活动均局限于一个Web页面中:这就表示Web应用被加载出来之后,W ...

  7. requirejs+angularjs搭建SPA页面应用

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  8. SPA页面缓存再优化二

    部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...

  9. SPA页面性能优化

    1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...

随机推荐

  1. BestCoder16 1002.Revenge of LIS II(hdu 5087) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5087 题目意思:找出第二个最长递增子序列,输出长度.就是说,假如序列为 1 1 2,第二长递增子序列是 ...

  2. Java虚拟机支持的最大内存限制

    最近在开发Java的程序.本来我是一直很喜欢Java的内存管理的,不需要担心分配内存,只管分配,垃圾收集器自己会给你回收内存的.现在开发的程序数据量很大,为了速度快,我准备把所有的信息加载进内存,这样 ...

  3. 补丁vs错误（codevs 2218 错误答案）

    题目描述 Description 错误就是人们所说的Bug.用户在使用软件时总是希望其错误越少越好,最好是没有错误的.但是推出一个没有错误的软件几乎不可能,所以很多软件公司都在疯狂地发放补丁(有时这种 ...

  4. cocos2dx实现象棋之运动

    1.头文件 void moveStone(int moveid, int killid, int x, int y); void moveComplete(CCNode*, void*); bool ...

  5. Hibernate核心思想—ORM机制（一）

    转:http://blog.csdn.net/wanghuan203/article/details/7566518 hibernate是一个采用ORM(Object/Relation Mapping ...

  6. Xamarin.Android开发实践（十五）

    Xamarin.Android学习之应用程序首选项 一.前言 任何App都会存在设置界面,如果开发者利用普通控件并绑定监听事件保存设置,这 一过程会非常的枯燥,而且耗时.我们可以看到Android系统 ...

  7. loj 1156(二分+最大流）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26870 思路:由于溢出问题,wa了半天,还以为构图错了呢,查了半天 ...

  8. dp核心问题研究-从入门到放弃

    首先从数字三角形开始 这个题的特点是..本身遍历次序就是个树型的 每次的决策都已经给定,左下或者右下 并且当我们纠结于是往左下走还是往右下走的时候,每次根据当前的情况贪心都为时尚早,因为后面的数据可以 ...

  9. CodeForces 304C

    E - E Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  10. 源码安装Memcached服务器及其2种PHP客户端

    本文所用源码包皆为当时最新stable稳定版. 安装memcached服务器 先安装libevent, 最新版为2.0.21 tar -zxvf libevent-2.0.21-stable.tar. ...