表单预览

表单预览可用于显示账单等。

foot 部分的操作按钮可以为一个,也可以为多个,样式有 weui-form-preview__btn_defaultweui-form-preview__btn_primary 两种。

  1. <!-- 表单预览 -->
  2. <div class="weui-form-preview">
  3. <!-- head 部分 -->
  4. <div class="weui-form-preview__hd">
  5. <div class="weui-form-preview__item">
  6. <label class="weui-form-preview__label">付款金额</label>
  7. <em class="weui-form-preview__value">¥2400.00</em>
  8. </div>
  9. </div>
  10. <!-- body 部分 -->
  11. <div class="weui-form-preview__bd">
  12. <div class="weui-form-preview__item">
  13. <label class="weui-form-preview__label">商品</label>
  14. <span class="weui-form-preview__value">电动打蛋机</span>
  15. </div>
  16. <div class="weui-form-preview__item">
  17. <label class="weui-form-preview__label">标题标题</label>
  18. <span class="weui-form-preview__value">名字名字名字</span>
  19. </div>
  20. <div class="weui-form-preview__item">
  21. <label class="weui-form-preview__label">标题标题</label>
  22. <span class="weui-form-preview__value">很长很长的名字很长很长的名字</span>
  23. </div>
  24. </div>
  25. <!-- foot 部分 -->
  26. <div class="weui-form-preview__ft">
  27. <a href="#" class="weui-form-preview__btn weui-form-preview__btn_default">辅助操作</a>
  28. <a href="#" class="weui-form-preview__btn weui-form-preview__btn_primary">操作</a>
  29. </div>
  30. </div>

表单预览 - 图1