fuxm.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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. <link rel="stylesheet" href="../../css/mui.min.css">
  10. <style>
  11. html,
  12. body {
  13. background-color: #efeff4;
  14. }
  15. .title {
  16. margin: 20px 15px 10px;
  17. color: #6d6d72;
  18. font-size: 15px;
  19. }
  20. .oa-contact-cell.mui-table .mui-table-cell {
  21. padding: 11px 0;
  22. vertical-align: middle;
  23. }
  24. .oa-contact-cell {
  25. position: relative;
  26. margin: -11px 0;
  27. }
  28. .oa-contact-avatar {
  29. width: 110px;
  30. }
  31. .oa-contact-avatar img {
  32. border-radius: 50%;
  33. }
  34. .oa-contact-content {
  35. width: 100%;
  36. }
  37. .oa-contact-name {
  38. margin-right: 20px;
  39. }
  40. .oa-contact-name,
  41. oa-contact-position {
  42. float: left;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <header class="mui-bar mui-bar-nav">
  48. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  49. <h1 id="title" class="mui-title">特色服务</h1>
  50. </header>
  51. <div class="mui-content">
  52. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
  53. <li class="mui-table-view-cell">
  54. <div class="mui-slider-cell">
  55. <div class="oa-contact-cell mui-table">
  56. <div class="oa-contact-avatar mui-table-cell">
  57. <img src="../../images/tesefuwu/tese1.png" style="width:100px;" ; />
  58. </div>
  59. <div class="oa-contact-content mui-table-cell">
  60. <div class="mui-clearfix">
  61. <span class="oa-contact-position mui-h4">拔罐</span>
  62. </div>
  63. <p class="oa-contact-email mui-h5">
  64. 首次免费
  65. </p>
  66. <p class="oa-contact-email mui-h6">
  67. 拔罐挺好的,对身体好,延年益寿,长命百岁的。 我们这里服务好,真的很好,不信你来试试吧。
  68. </p>
  69. <div>
  70. <span class="mui-badge mui-badge-purple">活动</span>
  71. <div class="mui-pull-right">
  72. <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined " onclick="return false;">付费</button>
  73. <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined " style="margin-left: 3px;" onclick="return false;">咨询</button>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </li>
  80. <li class="mui-table-view-cell">
  81. <div class="mui-slider-cell">
  82. <div class="oa-contact-cell mui-table">
  83. <div class="oa-contact-avatar mui-table-cell">
  84. <img src="../../images/tesefuwu/tese2.png" style="width:100px;" ; />
  85. </div>
  86. <div class="oa-contact-content mui-table-cell">
  87. <div class="mui-clearfix">
  88. <span class="oa-contact-position mui-h4">拔罐</span>
  89. </div>
  90. <p class="oa-contact-email mui-h5">
  91. 首次免费
  92. </p>
  93. <p class="oa-contact-email mui-h6">
  94. 拔罐挺好的,对身体好,延年益寿,长命百岁的。 我们这里服务好,真的很好,不信你来试试吧。
  95. </p>
  96. <div>
  97. <span class="mui-badge mui-badge-success">上门服务</span>
  98. <div class="mui-pull-right">
  99. <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined " onclick="return false;">付费</button>
  100. <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined " style="margin-left: 3px;" onclick="return false;">咨询</button>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </li>
  107. </ul>
  108. </div>
  109. </body>
  110. <script src="../../js/mui.min.js"></script>
  111. <script>
  112. mui.init({
  113. swipeBack: true //启用右滑关闭功能
  114. });
  115. </script>
  116. </html>