WeUI表单预览
在WeUI的学习过程中，了解到了一些微信上面的一些组件，当然还有很多事需要学习的。
下面我介绍的这个组件是一个表单预览的组件。
概述：在我们使用微信支付，付款完后查询账单是可以预览消费记录，这就是WeUI其中的表单预览组件。
大家还是先看下效果：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>WeUI基础结构</title>
<link rel="stylesheet" href="css/weui.css" />
</head>
<body>
<div class="page">
<div class="page__hd">
<h1 class="page__title">Preview</h1>
<p class="page__desc">表单预览</p>
</div>
<div class="page__bd">
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">付款金</label>
<em class="weui-form-preview__value">¥2400.00</em>
</div>
</div>
<div class="weui-form-preview__bd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">商品</label>
<span class="weui-form-preview__value">电动打蛋机</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">名字名字名字</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字</span>
</div>
</div>
<div class="weui-form-preview__ft">
<a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a>
</div>
</div>
<br>
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<label class="weui-form-preview__label">付款金额</label>
<em class="weui-form-preview__value">¥2400.00</em>
</div>
<div class="weui-form-preview__bd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">商品</label>
<span class="weui-form-preview__value">电动打蛋机</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">名字名字名字</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">标题标题</label>
<span class="weui-form-preview__value">很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字</span>
</div>
</div>
<div class="weui-form-preview__ft">
<a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:">辅助操作</a>
<button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</button>
</div>
</div>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/weui.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>