form9.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart class="page-bg">
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. Preview
  20. </h1>
  21. <p class="page-hd-desc">表单预览来自weui1.01版本移植</p>
  22. </div>
  23. <div class="weui-form-preview">
  24. <div class="weui-form-preview-hd">
  25. <label class="weui-form-preview-label">付款金额</label>
  26. <em class="weui-form-preview-value">¥2400.00</em>
  27. </div>
  28. <div class="weui-form-preview-bd">
  29. <p>
  30. <label class="weui-form-preview-label">商品</label>
  31. <span class="weui-form-preview-value">电动打蛋机</span>
  32. </p>
  33. <p>
  34. <label class="weui-form-preview-label">标题标题</label>
  35. <span class="weui-form-preview-value">名字名字名字</span>
  36. </p>
  37. <p>
  38. <label class="weui-form-preview-label">标题标题</label>
  39. <span class="weui-form-preview-value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
  40. </p>
  41. </div>
  42. <div class="weui-form-preview-ft">
  43. <a class="weui-form-preview-btn weui-form-preview-btn-primary" href="javascript:">操作</a>
  44. </div>
  45. </div>
  46. <h2>例子</h2>
  47. <div class="weui-form-preview">
  48. <div class="weui-form-preview-hd">
  49. <label class="weui-form-preview-label">付款金额</label>
  50. <em class="weui-form-preview-value">¥2400.00</em>
  51. </div>
  52. <div class="weui-form-preview-bd">
  53. <p>
  54. <label class="weui-form-preview-label">商品</label>
  55. <span class="weui-form-preview-value">电动打蛋机</span>
  56. </p>
  57. <p>
  58. <label class="weui-form-preview-label">标题标题</label>
  59. <span class="weui-form-preview-value">名字名字名字</span>
  60. </p>
  61. <p>
  62. <label class="weui-form-preview-label">标题标题</label>
  63. <span class="weui-form-preview-value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
  64. </p>
  65. </div>
  66. <div class="weui-form-preview-ft">
  67. <a class="weui-form-preview-btn weui-form-preview-btn-default" href="javascript:">辅助操作</a>
  68. <button class="weui-form-preview-btn weui-form-preview-btn-primary" href="javascript:">操作</button>
  69. </div>
  70. </div>
  71. </body>
  72. </html>