tab-webview-subpage-contact.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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,body {
  12. background-color: #efeff4;
  13. }
  14. .title{
  15. margin: 20px 15px 10px;
  16. color: #6d6d72;
  17. font-size: 15px;
  18. }
  19. .oa-contact-cell.mui-table .mui-table-cell {
  20. padding: 11px 0;
  21. vertical-align: middle;
  22. }
  23. .oa-contact-cell {
  24. position: relative;
  25. margin: -11px 0;
  26. }
  27. .oa-contact-avatar {
  28. width: 75px;
  29. }
  30. .oa-contact-avatar img {
  31. border-radius: 50%;
  32. }
  33. .oa-contact-content {
  34. width: 100%;
  35. }
  36. .oa-contact-name {
  37. margin-right: 20px;
  38. }
  39. .oa-contact-name, oa-contact-position {
  40. float: left;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <header class="mui-bar mui-bar-nav">
  46. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  47. <h1 id="title" class="mui-title">附近的社区</h1>
  48. </header>
  49. <div class="mui-content">
  50. <div class="title">
  51. <b>益真康门诊</b>
  52. </div>
  53. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
  54. <li class="mui-table-view-cell">
  55. <div class="mui-slider-cell">
  56. <div class="oa-contact-cell mui-table">
  57. <div class="oa-contact-avatar mui-table-cell">
  58. <img src="../images/shequ.png" style="width:60px;"; />
  59. </div>
  60. <div class="oa-contact-content mui-table-cell">
  61. <div class="mui-clearfix">
  62. <span class="oa-contact-position mui-h6">地址: 市南区宁国路1号,天福苑小区北门</span>
  63. </div>
  64. <p class="oa-contact-email mui-h6">
  65. 简介:
  66. </p>
  67. <div><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;">咨询</button>&nbsp;&nbsp;<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;">电话</button>&nbsp;&nbsp;<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;">定点</button>&nbsp;&nbsp;</div>
  68. </div>
  69. </div>
  70. </div>
  71. </li>
  72. </ul>
  73. <div class="title">
  74. <b>鲁信长春社区卫生服务站</b>
  75. </div>
  76. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
  77. <li class="mui-table-view-cell">
  78. <div class="mui-slider-cell">
  79. <div class="oa-contact-cell mui-table">
  80. <div class="oa-contact-avatar mui-table-cell">
  81. <img src="../images/luxin.png" style="width:60px;"/>
  82. </div>
  83. <div class="oa-contact-content mui-table-cell">
  84. <div class="mui-clearfix">
  85. <span class="oa-contact-position mui-h6">地址: 崂山区鲁信长春65号楼</span>
  86. </div>
  87. <p class="oa-contact-email mui-h6">
  88. 简介: 国家基本公共卫生服务项目指定实施单位...
  89. </p>
  90. <div><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;">咨询</button>&nbsp;&nbsp;<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;">电话</button>&nbsp;&nbsp;<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;">定点</button>&nbsp;&nbsp;</div>
  91. </div>
  92. </div>
  93. </div>
  94. </li>
  95. </ul>
  96. </div>
  97. </body>
  98. <script src="../js/mui.min.js"></script>
  99. <script>
  100. mui.init({
  101. swipeBack:true //启用右滑关闭功能
  102. });
  103. </script>
  104. </html>