面板
用于页面级别的布局单位
规则
- 作为一个布局基础元件作用于页面中。
- 更多的是用来布局，他不是一个独立的组件，用他来包裹组件，你可以得到比较好的排版
- 你可以和g-space联合使用。
代码演示
面板
基本
就医提醒
已支付
1. 请于就诊时间前到达医院，凭就诊人所绑定的就诊卡到自助机取号就诊；
2. 首次预约请携带本人身份证在自助机上办理就诊卡，儿童就诊人凭监护人身份证办理就诊卡
组合
完成评价
本次就诊服务已完成
等待支付
取号就诊
完成就诊
就诊人信息
-
就诊人李明
-
绑定卡号370201112100000365
-
身份证号330***********1815
订单信息
已支付
-
订单编号1203943
-
下单时间2016-09-12 11:15:255
-
支付方式在线支付
-
应付 ￥11.00 - 优惠 ￥4.00实付 ￥7.00
我的评价
-
医生医术
-
医务人员服务
-
医院环境
就医提醒
1. 请于就诊时间前到达医院，凭就诊人所绑定的就诊卡到自助机取号就诊；
2. 首次预约请携带本人身份证在自助机上办理就诊卡，儿童就诊人凭监护人身份证办理就诊卡
基本
panel组件规定的一些样式
基本
<div class="panel-notitle">
<div class="message-txt">
医生既细心又周到，对病人十分关心。真的真的非常感谢李医生，是个好大夫！
</div>
</div>
<br>
<div class="panel g-space">
<div class="panel-title">就医提醒
<span class="panel-extra txt-prompt">已支付</span>
</div>
<div class="panel-msg">
<p>1. 请于就诊时间前到达医院，凭就诊人所绑定的就诊卡到自助机取号就诊；</p>
<p>2. 首次预约请携带本人身份证在自助机上办理就诊卡，儿童就诊人凭监护人身份证办理就诊卡</p>
</div>
</div>组合
<div class="panel g-space">
<div class="list-ord">
<div class="list-item ">
<span class="list-icon icon-hook"></span>
<div class="list-content">
<div class="list-title ">完成评价</div>
<div class="list-brief">本次就诊服务已完成</div>
</div>
</div>
</div>
<div class="step">
<div class="step-item step-finish ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">等待支付</div>
</div>
<div class="step-item step-finish">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">取号就诊</div>
</div>
<div class="step-item step-finish ">
<div class="step-circle "></div>
<div class="step-line"></div>
<div class="step-msg">完成就诊</div>
</div>
</div>
</div>
<div class="panel g-space">
<div class="panel-title">预约信息</div>
<ul class="list-ord ">
<li class="list-item list-item-middel" >
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-brief-title">医院</div>
<div class="list-content ">青岛市妇女儿童医院</div>
</a>
</li>
<li class="list-item list-item-middel" >
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-brief-title">科室</div>
<div class="list-content ">儿保科</div>
</a>
</li>
<li class="list-item list-item-middel" >
<a href="" class="txt-arrowlink list-link-wrapper">
<div class="list-brief-title">医生</div>
<div class="list-content ">孙艳寰</div>
</a>
</li>
</ul>
<ul class="list-ord ">
<li class="list-item list-item-noborder">
<div class="list-brief-title">门诊类型</div>
<div class="list-content txt-nowrap">专家预约</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">序号</div>
<div class="list-content txt-nowrap">13号</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">就诊时间</div>
<div class="list-content txt-nowrap txt-prompt">2016-11-14 周一 上午</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">就诊地点</div>
<div class="list-content txt-nowrap">医技楼一楼</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">取号密码</div>
<div class="list-content txt-nowrap txt-prompt">126856679</div>
</li>
</ul>
</div>
<div class="panel g-space">
<div class="panel-title">就诊人信息</div>
<ul class="list-ord ">
<li class="list-item list-item-noborder">
<div class="list-brief-title">就诊人</div>
<div class="list-content txt-nowrap">李明</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">绑定卡号</div>
<div class="list-content txt-nowrap">370201112100000365</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">身份证号</div>
<div class="list-content txt-nowrap txt-prompt">330***********1815</div>
</li>
</ul>
</div>
<div class="panel g-space">
<div class="panel-title">订单信息
<span class="txt-prompt panel-extra">已支付</span>
</div>
<ul class="list-ord ">
<li class="list-item list-item-noborder">
<div class="list-brief-title">订单编号</div>
<div class="list-content txt-nowrap">1203943</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">下单时间</div>
<div class="list-content txt-nowrap">2016-09-12 11:15:255</div>
</li>
<li class="list-item list-item-noborder">
<div class="list-brief-title">支付方式</div>
<div class="list-content txt-nowrap ">在线支付</div>
</li>
</ul>
<ul class="list-ord ">
<li class="list-item ">
<div class="list-content">
<span class="txt-info">应付</span>
<span><span class="txt-size-sm">￥</span>11.00</span>
<span class="txt-info">- 优惠</span>
<span><span class="txt-size-sm">￥</span>4.00</span>
</div>
<div class="list-extra">
<span class="txt-info">实付</span>
<span class="txt-highlight"><span class="txt-size-sm">￥</span>7.00</span>
</div>
</li>
</ul>
</div>
<div class="panel g-space">
<div class="panel-title">我的评价</div>
<ul class="list-ord">
<li class="list-item list-item-middel" >
<div class="list-content txt-info">医生医术</div>
<div class="list-extra">
<span class="icon-star icon-star-action"></span>
<span class="icon-star icon-star-action"></span>
<span class="icon-star icon-star-action"></span>
<span class="icon-star"></span>
<span class="icon-star"></span>
</div>
</li>
<li class="list-item list-item-middel">
<div class="list-content txt-info">医务人员服务</div>
<div class="list-extra">
<span class="icon-star icon-star-action"></span>
<span class="icon-star icon-star-action"></span>
<span class="icon-star icon-star-action"></span>
<span class="icon-star"></span>
<span class="icon-star"></span>
</div>
</li>
<li class="list-item list-item-middel">
<div class="list-content txt-info">医院环境</div>
<div class="list-extra">
<span class="icon-star icon-star-action"></span>
<span class="icon-star icon-star-action"></span>
<span class="icon-star icon-star-action"></span>
<span class="icon-star"></span>
<span class="icon-star"></span>
</div>
</li>
</ul>
<div class="panel-notitle">
<div class="message-txt">
医生既细心又周到，对病人十分关心。真的真的非常感谢李医生，是个好大夫！
</div>
</div>
</div>
<div class="panel g-space">
<div class="panel-title">就医提醒</div>
<div class="panel-msg">
<p>1. 请于就诊时间前到达医院，凭就诊人所绑定的就诊卡到自助机取号就诊；</p>
<p>2. 首次预约请携带本人身份证在自助机上办理就诊卡，儿童就诊人凭监护人身份证办理就诊卡</p>
</div>
</div>