jzcz.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>金质成长</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. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/main.css" />
  12. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  13. <script>
  14. //屏蔽分享
  15. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  16. WeixinJSBridge.call('hideOptionMenu');
  17. });
  18. </script>
  19. </head>
  20. <body style="background: #fff;">
  21. <div class="loading-bg">
  22. <div class="mui-loading">
  23. <div class="mui-spinner">
  24. </div>
  25. &nbsp;&nbsp;加载中...
  26. </div>
  27. </div>
  28. <div class="mui-content" style="background: #fff;">
  29. <div class="mui-content-padded">
  30. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed" id="link-to">
  31. <li class="mui-table-view-cell">
  32. <div class="mui-table">
  33. <div class="mui-table-cell mui-col-xs-6">
  34. <img width="100%" style="display: block;" src="images/jzcz-1.jpg" />
  35. </div>
  36. <div class="mui-table-cell mui-col-xs-6 mui-text-center" style="vertical-align: middle;border: 1px solid rgba(0,0,0,.1);">
  37. <div class="mui-h5">0~6个月</div>
  38. <button type="button" style="width: 100px;margin-top: 10px;">更多</button>
  39. </div>
  40. </div>
  41. </li>
  42. <li class="mui-table-view-cell">
  43. <div class="mui-table">
  44. <div class="mui-table-cell mui-col-xs-6">
  45. <img width="100%" style="display: block;" src="images/jzcz-2.jpg" />
  46. </div>
  47. <div class="mui-table-cell mui-col-xs-6 mui-text-center" style="vertical-align: middle;border: 1px solid rgba(0,0,0,.1);">
  48. <div class="mui-h5">7~12个月</div>
  49. <button type="button" style="width: 100px;margin-top: 10px;">更多</button>
  50. </div>
  51. </div>
  52. </li>
  53. <li class="mui-table-view-cell">
  54. <div class="mui-table">
  55. <div class="mui-table-cell mui-col-xs-6">
  56. <img width="100%" style="display: block;" src="images/jzcz-3.jpg" />
  57. </div>
  58. <div class="mui-table-cell mui-col-xs-6 mui-text-center" style="vertical-align: middle;border: 1px solid rgba(0,0,0,.1);">
  59. <div class="mui-h5">2周岁</div>
  60. <button type="button" style="width: 100px;margin-top: 10px;">更多</button>
  61. </div>
  62. </div>
  63. </li>
  64. </ul>
  65. </div>
  66. </div>
  67. <script type="text/javascript" src="js/mui.min.js"></script>
  68. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  69. <script type="text/javascript">
  70. window.addEventListener('pageshow', function(e) {
  71. // 通过persisted属性判断是否存在 BF Cache
  72. if(e.persisted) {
  73. location.reload();
  74. }
  75. });
  76. mui.ready(function() {
  77. mui.each(document.querySelectorAll('#link-to li button'), function(index, el) {
  78. el.addEventListener('tap', function() {
  79. switch(index) {
  80. case 0:
  81. mui.openWindow({
  82. url: 'http://www.iamberry.com/zh-cn/pregnancy_details5.html'
  83. });
  84. break;
  85. case 1:
  86. mui.openWindow({
  87. url: 'http://www.iamberry.com/zh-cn/pregnancy_details6.html'
  88. });
  89. break;
  90. case 2:
  91. mui.openWindow({
  92. url: 'http://www.iamberry.com/zh-cn/pregnancy_details7.html'
  93. });
  94. break;
  95. default:
  96. break;
  97. }
  98. }, false);
  99. });
  100. document.querySelector('.loading-bg').style.display = 'none';
  101. });
  102. </script>
  103. </body>
  104. </html>