WeUI 框架的学习(二)

WeUI 李宜发
文章标签: WeUI

preview用于实现表单预览效果

<div class="weui-form-preview">
    <div class="weui-form-preview__hd">
	<label class="weui-form-preview__label">付款金额</label>
	<em class="weui-form-preview__value">¥4400.00</em>
   </div>
   <div class="weui-form-preview__bd">
	<p>
	    <label class="weui-form-preview__label">商品</label>
	    <span class="weui-form-preview__value">vivo play6手机</span>
	</p>
	<p>
	     <label class="weui-form-preview__label">收款方</label>
	     <span class="weui-form-preview__value">手机代理商</span>
	</p>
	<p>
	    <label class="weui-form-preview__label">支付状态</label>
    	    <span class="weui-form-preview__value">支付成功,对方已收款</span>
	</p>
    </div>
    <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">操作</a>
    </div>
</div>

以上是HTML代码

.weui-form-preview{
  position:relative;
  background-color:#FFFFFF;
}
.weui-form-preview__hd{
  position:relative;
  padding:10px 15px;
  text-align:right;
  line-height:2.5em;
}
.weui-form-preview__bd{
  padding:10px 15px;
  font-size:.9em;
  text-align:right;
  color:#999999;
  line-height:2;
}
.weui-form-preview__label{
  float:left;
  margin-right:1em;
  min-width:4em;
  color:#999999;
  text-align:justify;
  text-align-last:justify;
}
.weui-form-preview__value{
  display:block;
  overflow:hidden;
  word-break:normal;
  word-wrap:break-word;
}
.weui-form-preview__ft{
  position:relative;
  line-height:50px;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
}

以上是css代码

xiaoguotu.png

以上是效果图

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :