如下是一个实例，为PIROS系统的主页
<div class="yt-navbar">
<a id="navbar-brand" href="https://account.daily.yuantutech.com/account/account/workbench.html" target="iframe">
<!-- <div class="navbar-brand"></div> -->
<!-- 替换 -->
<img src="//image.yuantutech.com/user/2eb47ee09b98ac3d79875c0d42f1e703-272-56.png" class="navbar-brand">
</a>
<!-- <div class="navbar-brand"></div> -->
<ul class="navbar-nav ">
<li class="dropdown dropdown-action">
<a href="#">
产品
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper clear">
<div class="clear-sider">
<ul class="yt-list-group">
<li class="list-group-item list-action" target-clear="#myclear1">
<a href="#">
线上服务平台
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item " target-clear="#myclear2">
<a href="#">
线下智慧医院
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
</ul>
</div>
<div class="clear-inner">
<ul class="clear-item-action" id="myclear1">
<li doc="UserManagementPlatform.json">
<div class="clear-item">
<div class="product-title">用户核心系统管理平台</div>
<div class="prouct-introduce">连接多个系统，提供账户管理，用户数据管理等功能</div>
</div>
</li>
<li doc="VirtualSettlementPlatform.json">
<div class="clear-item">
<div class="product-title">虚拟结算平台</div>
<div class="prouct-introduce">连接医院、银行与患者，实现区域诊疗卡一卡通</div>
</div>
</li>
<li doc="">
<div class="clear-item">
<div class="product-title">运维监控平台</div>
<div class="prouct-introduce">实时集成监控，报警及时有效，专业运维平台</div>
</div>
</li>
<li doc="AppointmentManagementPlatform.json" >
<div class="clear-item">
<div class="product-title">预约挂号管理平台</div>
<div class="prouct-introduce">帮助医院科学、高效、快速的排班并分配挂号资源</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">在线问诊平台（互联网医院）</div>
<div class="prouct-introduce">足不出户，与医生零距离交流</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">移动互联网应用（APP／微信公众号）</div>
<div class="prouct-introduce">全新就诊方式，让健康触手可得</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">工单服务系统</div>
<div class="prouct-introduce">实现企业机构产品咨询、技术对接等流程化渠道管理</div>
</div>
</li>
</ul>
<ul id="myclear2" id="myclear2">
<li doc="OutpatientSelfservice.json">
<div class="clear-item">
<div class="product-title">门诊自助服务</div>
<div class="prouct-introduce">解决门诊就医「三长一短」，提供零距离一站式服务</div>
</div>
</li>
<li doc="Interdiagnosissettlementsystem.json">
<div class="clear-item">
<div class="product-title">诊间结算系统</div>
<div class="prouct-introduce">边诊疗边结算，高效率优质服务系统</div>
</div>
</li>
<li doc="SmartQueuing.json">
<div class="clear-item">
<div class="product-title">智慧分诊</div>
<div class="prouct-introduce">将无序变为有序优化医院就诊环境</div>
</div>
</li>
<li doc="Inpatientselfserviceterminal.json">
<div class="clear-item">
<div class="product-title">住院部自助服务终端</div>
<div class="prouct-introduce">轻松办理出入院，随时查看日清单</div>
</div>
</li>
<li doc="Inpatienttelevisionservicesystem.json">
<div class="clear-item">
<div class="product-title">住院部电视服务系统</div>
<div class="prouct-introduce">稳定安全的发布后台，智能查询、订餐系统</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">健康管理自助服务终端</div>
<div class="prouct-introduce">精准检测，智能报告，云健康管理系统</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
<a href="#">
解决方案
<span class="icon-dropdown"></span>
</a>
</li>
<li>
<a href="#">文档中心</a>
</li>
</ul>
<div class="user-mark dropdown ">
<a >
<!-- 替换 -->
<!-- <span class="icon-user-marklogo"></span> -->
<img class="icon-user-marklogo" src="//image.yuantutech.com/user/83870c7f2a1d41f918de90273d0eab7a-100-100.png">
<spna class="user-name">姓名</spna>
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a href="updatePassword.html">修改密码</a></li>
<!--<li class="dropdown-item"><a>我的订单</a></li>-->
<li class="dropdown-item" id="logout"><a>退出</a> </li>
</ul>
</div>
</div>
<ul class="navbar-nav-right">
<li class="dropdown ">
<a href="#">
工单服务
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>我的工单</a></li>
<li class="dropdown-item"><a>提交工单</a></li>
<li class="dropdown-item"><a>工单后台</a> </li>
</ul>
</div>
</li>
<li >
<a href="myworkstand.html">
控制台
</a>
</li>
</ul>
</div><!-- 此处还有unfoldicon-right类，为菜单栏收缩时的样式 -->
<div class="yt-main-wrapper">
<div class="yt-main">
<div class="yt-sidebar action">
<div class="extend">
<span class="icon-ellipsis">...</span>
</div>
<ul class="sider-nav">
<li>
<a href="#" class="action">
<span class="icon-portrait"></span>
<span class="sider-text">用户核心管理平台</span>
</a>
</li>
<li >
<a href="#">
<span class="icon-money"></span>
<span class="sider-text">虚拟结算平台</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-tendency"></span>
<span class="sider-text">运维监控平台</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-workbench"></span>
<span class="sider-text">预约挂号管理平台</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-location"></span>
<span class="sider-text">在线问诊平台</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-mobile"></span>
<span class="sider-text">移动互联应用平台</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-house"></span>
<span class="sider-text">远程会诊平台</span>
</a>
</li>
</ul>
</div>
<div class="yt-main-body">
<div class="yt-main-product">
<div class="platform-nav-scene">
<span class="unfoldicon-right "></span>
<div class="platform-nav-title">预约排班管理平台</div>
<div class="product-wrapper">
<ul class="yt-list-group">
<li class="list-group-item"><a href="#">排班结果</a></li>
<li class="list-group-item list-dropdown action">
<a href="#">
排班模版
<span class="icon-caret icon-caret-color"></span>
</a>
<ul class="dropdown-menu">
<li class="list-dropdown-item"><a href="#">医院模版</a></li>
<li class="list-dropdown-item"><a href="#">医生模版</a></li>
</ul>
</li>
<li class="list-group-item"><a href="#">预约纪录</a></li>
<li class="list-group-item list-dropdown">
<a href="#">
统计报表
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
黑名单
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
用户管理
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
系统匹配
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
平台配置
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="inner-con">
<p class="con-title">我的工作台</p>
<div class="yt-panel user-message">
<div class="panel-title">用户信息<span class="icon-caret panel-caret"></span></div>
<div class="panel-body">
<div class="user-message-con">
<div class="user-message-item user-name">
<img class="user-logo" src="//image.yuantutech.com/user/83870c7f2a1d41f918de90273d0eab7a-100-100.png">
<!-- <span class="icon-user-marklogo user-logo"></span> -->
<div class="item">
<div class="item-name">罗耀秋</div>
<div class="item-con">系统管理员</div>
</div>
</div>
<div class="user-message-item">
<div class="item-name">手机号码</div>
<div class="item-con">
<span>150****0635</span>
<span class="operating">更改</span>
</div>
</div>
<div class="user-message-item">
<div class="item-name">绑定邮箱</div>
<div class="item-con">
<span>luoyq@qq.com</span>
<span class="operating">更改</span>
</div>
</div>
<div class="user-message-item">
<div class="item-name">子账号</div>
<div class="item-con">
<span>共三个</span>
<span class="operating">管理</span>
</div>
</div>
<div class="user-message-item">
<div class="item-name">所属机构</div>
<div class="item-con">
<span>浙江省人民医院</span>
<span class="yt-label label-message">已认证</span>
</div>
</div>
</div>
</div>
</div>
<div class="yt-panel">
<div class="panel-title">正在使用的 PIROS 产品<span class="icon-caret panel-caret"></span></div>
<div class="panel-body ">
<div class="large-panel">
<div class="yt-panel-notitle">
<p class="panel-head">统一配置管理中心</p>
<p>查看账户信息、管理和分配权限</p>
<p> 管理医联体／医院信息1</p>
<p class="panel-footer">* 更新至 V2.02 版本，看看新增哪些功能</p>
<span class="panel-icon icon-antion-update"></span>
</div>
<div class="yt-panel-notitle">
<p class="panel-head">虚拟结算平台</p>
<p>管理医院账户信息、交易流水</p>
<p>医疗机构预缴金信息、医联体预缴金账户</p>
<p class="panel-footer">*版本号 V1.03</p>
<span class="panel-icon icon-antion-no-update"></span>
</div>
<div class="yt-panel-notitle">
<p class="panel-head">预约挂号平台</p>
<p>设置医生排班，管理预约渠道</p>
<p> 查看预约纪录</p>
<p class="panel-footer">版本号 V2.01</p>
<span class="panel-icon "></span>
</div>
<div class="yt-panel-notitle">
<p class="panel-head">远程会诊平台</p>
<p>为患者完成病历分析、病情诊断</p>
<p> 进一步确定治疗方案的治疗方式</p>
<p class="panel-footer">版本号 V1.01</p>
<span class="panel-icon "></span>
</div>
<div class="yt-panel-notitle">
<p class="panel-head">运维监控平台</p>
<p>第一时间了解设备损坏情况，第一时间通知维保公司</p>
<p> 并记录时间管理只需要一个人一台电脑轻松搞定整个维保服务</p>
<p class="panel-footer">版本号 V1.21</p>
<span class="panel-icon icon-antion-update"></span>
</div>
<div class="yt-panel-notitle add">
<!-- <span class="add">+</span> -->
</div>
</div>
</div>
</div>
<div class="yt-panel">
<div class="panel-title">什么是 PIROS ？<span class="icon-caret panel-caret"></span></div>
<div class="panel-body">
<p>Patients-oriented In-hospital Resource Optimization System
</br>
简称 “PIROS” ，即患者就医全流程优化系统</p>
<p>
致力于患者就医全流程优化，提供面向患者 诊前－诊中－诊后 的全流程解决方案，提升患者就医体验，帮助医疗机构和主管单位优化医疗资源配置，完善医疗信息化建设，缓解医患纠纷。</p>
</div>
</div>
<div class="yt-panel">
<div class="panel-title">我的订单<span class="icon-caret panel-caret"></span></div>
<div class="panel-body">您项目订单中订购的是 <span class="sign">远图 PIROS</span> 系统 <span class="stress">尊享贵宾服务</span>，服务有效期至 <span class="stress"> 2018-10-11</span></div>
</div>
<!-- <footer class="footer clearfix">
<div class="copyright-left">客服电话：0571-89916777</div>
<div class="copyright-right">
远图互联科技股份有限公司 © 2010-2016
</div>
</footer> -->
</div>
</div>
</div>
</div>
</div>通过在body标签上加类 yt-login 来实现PIROS的登陆页。 加上yt-login-main 来得到默认的登录主页
<body class="yt-login yt-login-main">
<div class="login-navbar-wrapper">
<div class="yt-navbar login-navbar">
<img class="navbar-brand" src="//image.yuantutech.com/user/67bf143af49b2235f1b6508ca2844742-272-56.png">
<ul class="navbar-nav login-list">
<li class="dropdown">
<a href="#">
产品
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper clear">
<div class="clear-sider">
<ul class="yt-list-group">
<li class="list-group-item list-action" target-clear="#myclear1">
<a href="#">
线上服务平台
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item " target-clear="#myclear2">
<a href="#">
线下智慧医院
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
</ul>
</div>
<div class="clear-inner">
<ul class="clear-item-action" id="myclear1">
<li doc="UserManagementPlatform.json">
<div class="clear-item">
<div class="product-title">用户核心系统管理平台</div>
<div class="prouct-introduce">连接多个系统，提供账户管理，用户数据管理等功能</div>
</div>
</li>
<li doc="VirtualSettlementPlatform.json">
<div class="clear-item">
<div class="product-title">虚拟结算平台</div>
<div class="prouct-introduce">连接医院、银行与患者，实现区域诊疗卡一卡通</div>
</div>
</li>
<li doc="">
<div class="clear-item">
<div class="product-title">运维监控平台</div>
<div class="prouct-introduce">实时集成监控，报警及时有效，专业运维平台</div>
</div>
</li>
<li doc="AppointmentManagementPlatform.json" >
<div class="clear-item">
<div class="product-title">预约挂号管理平台</div>
<div class="prouct-introduce">帮助医院科学、高效、快速的排班并分配挂号资源</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">在线问诊平台（互联网医院）</div>
<div class="prouct-introduce">足不出户，与医生零距离交流</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">移动互联网应用（APP／微信公众号）</div>
<div class="prouct-introduce">全新就诊方式，让健康触手可得</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">工单服务系统</div>
<div class="prouct-introduce">实现企业机构产品咨询、技术对接等流程化渠道管理</div>
</div>
</li>
</ul>
<ul id="myclear2" id="myclear2">
<li doc="OutpatientSelfservice.json">
<div class="clear-item">
<div class="product-title">门诊自助服务</div>
<div class="prouct-introduce">解决门诊就医「三长一短」，提供零距离一站式服务</div>
</div>
</li>
<li doc="Interdiagnosissettlementsystem.json">
<div class="clear-item">
<div class="product-title">诊间结算系统</div>
<div class="prouct-introduce">边诊疗边结算，高效率优质服务系统</div>
</div>
</li>
<li doc="SmartQueuing.json">
<div class="clear-item">
<div class="product-title">智慧分诊</div>
<div class="prouct-introduce">将无序变为有序优化医院就诊环境</div>
</div>
</li>
<li doc="Inpatientselfserviceterminal.json">
<div class="clear-item">
<div class="product-title">住院部自助服务终端</div>
<div class="prouct-introduce">轻松办理出入院，随时查看日清单</div>
</div>
</li>
<li doc="Inpatienttelevisionservicesystem.json">
<div class="clear-item">
<div class="product-title">住院部电视服务系统</div>
<div class="prouct-introduce">稳定安全的发布后台，智能查询、订餐系统</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">健康管理自助服务终端</div>
<div class="prouct-introduce">精准检测，智能报告，云健康管理系统</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
<a href="#">
解决方案
<span class="icon-dropdown"></span>
</a>
</li>
<li>
<a href="#">文档中心</a>
</li>
</ul>
<button class="btn nav-btn">登 录</button>
<!-- <div class="user-mark dropdown dropdown-action">
<a >
<span class="icon-user-marklogo"></span>
<spna class="user-name">姓名</spna>
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a >账户信息</a></li>
<li class="dropdown-item"><a >我的订单</a></li>
<li class="dropdown-item" id="logout"><a>退出</a> </li>
</ul>
</div>
</div> -->
<ul class="navbar-nav-right login-list">
<li class="dropdown">
<a href="#">
工单服务
<span class="icon-dropdown"></span>
</a>
</li>
<li class="line-crumbs">
<a>
控制台
</a>
</li>
</ul>
</div>
</div>
<!-- 登陆页的默认主页 -->
<div class="popup-wrapper">
<div class="popup-content">
<div class="product-message">
<img class="login-text " src="//image.yuantutech.com/user/06debfc6451efe5c45e8a0cd11c38e56-556-166.png">
<img class="login-text " src="//image.yuantutech.com/user/d2f6bf731107be35c843184031765ce9-554-168.png">
<img class="login-text " src="//image.yuantutech.com/user/d90d543aaaf4c4248bc04ceef5986b72-554-168.png">
</div>
<div class="popup-login login-main">
<div class="login-title">
<h1>登录 PIROS 系统</h1>
<p>开启您医院患者就诊全流程优化服务新体验</p>
</div>
<div class="form-group">
<input type="text" id="loginName" name="loginName" class="input" placeholder="输入用户名，支持手机登录">
<input type="password" id="password" name="password" class="input" placeholder="输入密码，6-20 位含字母＋数字" >
<a class="password-forget txt-link">忘记密码？</a>
<button class="btn btn-block btn-login">立即登陆</button>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-top-wrapper">
<div class="footer-top clearfix">
<div class="phone-wrapper">
<span class="icon-phone"></span>
<div class="phone-text">客服电话：</div>
<div class="phone">0571-89916777</div>
</div>
<div class="footer-message">量身定制的服务推荐 · 全面周至的购买咨询 · 1 对 1 的贴心售后</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">
远图互联科技股份有限公司 © 2010-2016
</div>
</div>
</div>
</body>通过在body标签上加类 yt-login 来实现PIROS的登陆页。 加上yt-login-set 登录后与登录相关的操作页
<body class=" yt-login yt-login-set">
<div class="login-navbar-wrapper">
<div class="yt-navbar login-navbar">
<div class="navbar-brand"></div>
<ul class="navbar-nav login-list">
<li class="dropdown">
<a href="#">
产品
<span class="icon-dropdown"></span>
</a>
</li>
<li class="dropdown">
<a href="#">
解决方案
<span class="icon-dropdown"></span>
</a>
</li>
<li>
<a href="#">文档中心</a>
</li>
</ul>
<ul class="navbar-nav-right login-list">
<li class="dropdown">
<a href="#">
工单服务
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>我的工单</a></li>
<li class="dropdown-item"><a>提交工单</a></li>
<li class="dropdown-item"><a>工单后台</a> </li>
</ul>
</div>
</li>
<li class="line-crumbs">
<a>
控制台
</a>
</li>
<li>
<button class="btn"><a href="login.html"> 登 录</a></button>
</li>
</ul>
</div>
</div>
<div class="popup-wrapper">
<!-- 登陆页的确认手机获取验证码 -->
<div class="popup-login login-verification">
<div class="login-title">
<h1>找回您的密码</h1>
<p>为了账号安全，需要验证手机有效性</p>
</div>
<div class="form-group">
<div class="validate-status" id="phone">
<span class="input-wrapper">
<input type="text" name="phone" class="input" placeholder="输入您的用户名 (手机号码）">
<span class="icon-validate-status"></span>
</span>
</div>
<!-- <input type="input" name="" class="input" placeholder="输入新密码，6-20 位含字母＋数字"> -->
<div class="verification-code ">
<div class="input-verification validate-status" id="code">
<span class="input-wrapper">
<input type="text" name="" class="input" placeholder="输入您收到的短信验证码">
<span class="icon-validate-status"></span>
</span>
<!--<div class="input-explain">验证码验证失败，请重新发送</div>-->
</div>
<!-- <input type="input " name="" class="input input-verification" placeholder="输入您收到的短信验证码" > -->
<button class="btn btn-verification" id="codeBtn">点此免费获取</button>
</div>
<div class=" validate-status" id="password">
<span class="input-wrapper">
<input type="password" name="password" class="input" placeholder="输入新密码，6-20 位含字母＋数字">
<span class="icon-validate-status"></span>
</span>
<!--<div class="input-explain">密码不符合要求，请设置 6-20 位含字母＋数字</div>-->
</div>
<div class=" validate-status " id="passwordRepeat">
<span class="input-wrapper">
<input type="password" name="passwordRepeat" class="input" placeholder="再一次输入新密码">
<span class="icon-validate-status"></span>
</span>
<!--<div class="input-explain">两次输入的密码不一致</div>-->
</div>
<button class="btn btn-block btn-login ">提交</button>
</div>
</div>
</div>
<!-- </div> -->
<div class="footer">
<div class="footer-top-wrapper">
<div class="footer-top clearfix">
<div class="phone-wrapper">
<span class="icon-phone"></span>
<div class="phone-text">客服电话：</div>
<div class="phone">0571-89916777</div>
</div>
<div class="footer-message">量身定制的服务推荐 · 全面周至的购买咨询 · 1 对 1 的贴心售后</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">
远图互联科技股份有限公司 © 2010-2016
</div>
</div>
</div>
</body>
通过在body标签上加类 yt-login 来实现PIROS的登陆页。 加上yt-login-set 登录后与登录相关的操作页
<div class="popup-login login-verification">
<div class="login-title">
<h1>设置新的密码</h1>
<p>为了账号安全，需要验证手机有效性</p>
</div>
<form class="form-group">
<input type="input" name="" class="input" placeholder="输入新密码，6-20 位含字母＋数字">
<div class="verification-code">
<input type="input " name="" class="input input-verification " placeholder="输入您收到的短信验证码" >
<button class="btn btn-verification ">点此免费获取</button>
</div>
<button class="btn btn-login ">提交</button>
</form>
<span class="tel">客服电话：0571-89916777</span>
<span class="footer">© 2010-2016 远图互联</span>
</div>此页面面为登陆页相关页，不另外添加导航条和背景，请参考上方的登陆页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>统计</title><!--
<link rel="stylesheet" type="text/css" href="css/piros.css"> -->
<link rel="stylesheet" type="text/css" href="css/piros.less.css">
</head>
<body>
<div class="inner-con">
<div class="con-title">统计</div>
<div class="con-main">
<div class="con-divider"></div>
<div class="con-small-title">基础数据</div>
<div class="panel-card-wrapper con-wrapper">
<div class="panel-card-layout" style="width:50%;">
<div class="panel-card ">
<div class="panel-card-title">
今日实时总门诊量机构排名
</div>
<div class="panel-card-body">
<div class="panel-card-icon pirosicon-statistics">
</div>
<div class="panel-card-content-wrapper">
<div class="panel-card-content" style="width:33%;">
<div class="panel-card-item">
<div class="panel-card-text">
总门诊量
<div class="pirosicon-count-tip tooltip-wrapper">
<!-- 注释部分放在body下 -->
<!-- <div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrap">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div> -->
</div>
</div>
<div class="panel-card-number">369,585</div>
</div>
<div class="panel-card-item">
</div>
</div>
<div class="panel-card-content" style="width:66%">
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">
预约就诊量
<div class="pirosicon-count-tip tooltip-wrapper">
</div>
</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">
预约挂号量
<div class="pirosicon-count-tip tooltip-wrapper">
<!-- 注释部分放在body下 -->
<!-- <div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrap">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div> -->
</div>
</div>
<div class="panel-card-number">235,243</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-card-layout" style="width:50%;">
<div class="panel-card" >
<div class="panel-card-title">
今日实时预约排名
</div>
<div class="panel-card-body">
<div class="panel-card-icon pirosicon-proportion">
</div>
<div class="panel-card-content-wrapper">
<div class="panel-card-content" style="width:25%;">
<div class="panel-card-item">
<div class="panel-card-text">
爽约率
<div class="pirosicon-count-tip tooltip-wrapper">
<!-- 注释部分放在body下 -->
<!-- <div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrap">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div> -->
</div>
</div>
<div class="panel-card-number">369,585</div>
</div>
<div class="panel-card-item">
</div>
</div>
<div class="panel-card-content" style="width:75%">
<div class="panel-card-item" style="width:33%;">
<div class="panel-card-text">
预约成功量
<div class="pirosicon-count-tip tooltip-wrapper">
<!-- 注释部分放在body下 -->
<!-- <div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrap">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div> -->
</div>
</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:33%;">
<div class="panel-card-text">
预约就诊量
<div class="pirosicon-count-tip tooltip-wrapper">
<!-- 注释部分放在body下 -->
<!-- <div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrap">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div> -->
</div>
</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:33%;">
<div class="panel-card-text">
爽约量
<div class="pirosicon-count-tip tooltip-wrapper">
<!-- 注释部分放在body下 -->
<!-- <div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrap">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div> -->
</div>
</div>
<div class="panel-card-number">235,243</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="con-divider"></div>
<div class="con-small-title">分渠道对比数据</div>
<div class="panel-card-wrapper con-wrapper">
<div class="panel-card-layout">
<div class="panel-card ">
<div class="panel-card-title">
今日实时总门诊量机构排名
</div>
<div class="panel-card-body">
<div class="panel-card-icon pirosicon-statistics">
</div>
<div class="panel-card-content-wrapper">
<div class="panel-card-content" style="width:33%;">
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">APP预约</div>
<div class="panel-card-number">369,585</div>
</div>
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">APP挂号</div>
<div class="panel-card-number">369,585</div>
</div>
</div>
<div class="panel-card-content" style="width:33%;">
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">自助机预约</div>
<div class="panel-card-number">369,585</div>
</div>
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">自助机挂号</div>
<div class="panel-card-number">369,585</div>
</div>
</div>
<div class="panel-card-content" style="width:33%">
<div class="panel-card-item" style="width:33%;">
<div class="panel-card-text">诊间预约</div>
<div class="panel-card-number">293</div>
</div>
<div class="panel-card-item" style="width:33%;">
<div class="panel-card-text">电话预约</div>
<div class="panel-card-number">235</div>
</div>
<div class="panel-card-item" style="width:33%;">
<div class="panel-card-text">窗口预约</div>
<div class="panel-card-number">23</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="con-divider"></div>
<div class="con-small-title">分机构对比数据</div>
<div class="con-small-title">
</div>
<div class="panel-card-wrapper con-wrapper">
<div class="panel-card-layout" >
<div class="panel-card" >
<div class="panel-card-title">
今日实时总门诊量机构排名
</div>
<div class="panel-card-body">
<div class="panel-card-icon pirosicon-rank">
</div>
<div class="panel-card-content-wrapper">
<div class="panel-card-content">
<div class="panel-card-item" style="width:20%;">
<div class="panel-card-text">TOP1 青岛市妇儿儿童医院</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:20%;">
<div class="panel-card-text">TOP2 青岛市市立医院（本部）</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:20%;">
<div class="panel-card-text">TOP3 青岛市海慈医院</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:20%;">
<div class="panel-card-text">TOP4 青岛市口腔医院</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:20%;">
<div class="panel-card-text">TOP5 青岛市口腔医院</div>
<div class="panel-card-number">235,243</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="inner-con">
<div class="inner-con-wrapper">
<div class="con-title">健康数据查询</div>
<div class="con-main">
<div class="form-inline con-wrapper">
<input type="txt" name="" class="input" placeholder="请输入身份证号">
<input type="txt" name="" class="input" placeholder="请输入一卡通卡号">
<button class="btn ">
<span class="pirosicon pirosicon-search"></span>
查询
</button>
</div>
<p>该身份证号绑定多张卡，请选择正确的就诊人</p>
<div class="collapse collapse-split">
<div class="collapse-item collapse-action">
<div class="collapse-header">
<span class="collapse-icon"></span>
<div class="row">
<div class="col" style="width:13%">
<span>姓名：</span>
<span class="g-weight-normal">李三</span>
</div>
<div class="col" style="width:13%">
<span>性别：</span>
<span class="g-weight-normal">男</span>
</div>
<div class="col" style="width:13%">
<span>类型：</span>
<span class="g-weight-normal">成人类型</span>
</div>
<div class="col" style="width:30%">
<span>监护人身份证号：</span>
<span class="g-weight-normal">310621199007211020</span>
</div>
<div class="col" style="width:30%">
<span>办卡时间：</span>
<span class="g-weight-normal">2011-11-12 14:00</span>
</div>
</div>
</div>
<div class="collapse-content">
<div class="tabs-wrapper g-space">
<div class="tabs-nav-container">
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">基本信息</div>
<div class="tabs-tab-item" tabsKey="2">预约/挂号记录</div>
<div class="tabs-tab-item" tabsKey="3">Lis 检验报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 影像报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 健康体检报告</div>
</div>
</div>
</div>
</div>
<div class="txt-horizontal g-space">
<div class="txt-inline">
<span class="txt-item-title" >姓名：</span>
<span class="txt-item-inner" >张三</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >性别：</span>
<span class="txt-item-inner">男</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >类型：</span>
<span class="txt-item-inner">成人类型</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >身份证号：</span>
<span class="txt-item-inner">310621199007211020</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >年龄：</span>
<span class="txt-item-inner">28</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >手机号：</span>
<span class="txt-item-inner">15001001011</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >一卡通号：</span>
<span class="txt-item-inner">10000000000001</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >办卡日期：</span>
<span class="txt-item-inner">2011-11-12 14:00</span>
</div>
</div>
</div>
</div>
<div class="collapse-item ">
<div class="collapse-header">
<span class="collapse-icon"></span>
<div class="row">
<div class="col" style="width:13%">
<span>姓名：</span>
<span class="g-weight-normal">李三</span>
</div>
<div class="col" style="width:13%">
<span>性别：</span>
<span class="g-weight-normal">男</span>
</div>
<div class="col" style="width:13%">
<span>类型：</span>
<span class="g-weight-normal">成人类型</span>
</div>
<div class="col" style="width:30%">
<span>监护人身份证号：</span>
<span class="g-weight-normal">310621199007211020</span>
</div>
<div class="col" style="width:30%">
<span>办卡时间：</span>
<span class="g-weight-normal">2011-11-12 14:00</span>
</div>
</div>
</div>
<div class="collapse-content">
<div class="tabs-wrapper g-space">
<div class="tabs-nav-container">
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">基本信息</div>
<div class="tabs-tab-item" tabsKey="2">预约/挂号记录</div>
<div class="tabs-tab-item" tabsKey="3">Lis 检验报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 影像报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 健康体检报告</div>
</div>
</div>
</div>
</div>
<div class="txt-horizontal g-space">
<div class="txt-inline">
<span class="txt-item-title" >姓名：</span>
<span class="txt-item-inner" >张三</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >性别：</span>
<span class="txt-item-inner">男</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >类型：</span>
<span class="txt-item-inner">成人类型</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >身份证号：</span>
<span class="txt-item-inner">310621199007211020</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >年龄：</span>
<span class="txt-item-inner">28</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >手机号：</span>
<span class="txt-item-inner">15001001011</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >一卡通号：</span>
<span class="txt-item-inner">10000000000001</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >办卡日期：</span>
<span class="txt-item-inner">2011-11-12 14:00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>为了替那些对css样式不熟悉的同志，提供更好的服务，piros预先设置了一些类用于布局，使用这些你可以得到固定的内补用于页面整体布局，它们可以解决大部分的宏观方向上的页面布局问题，但是请注意，再好的框架也不可能面面具到，不可能解决所有的问题，所有引用者发现当piros无法满足要求时，必要的你们需要自己写一些样式用于自己的页面，当然你也可以向我们提出建议。
使用 inner-con 包裹页面内容部分。 con-title 为页面主体部分的 title； 将除 con-title 部分的页面主体部分包裹在 con-main 中（你可以获得一个很好的内补）；请写一个模块就为这个模块包裹一层 .con-wrapper 。表单控件使用水平布局请使用 包裹表单的行内布局请使用 form-inline 表单块请使用 .form-horizontal 。使用 con-divider 来获得分割线使用 con-small-title 来包裹小标题；小标题和分割线请不要使用 con-wrapper
| 序号 | 科室 | 医生 | 类别 | 放号模式 | 星期 | 限号 | 诊疗费 | 操作 |
|---|---|---|---|---|---|---|---|---|
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
统一配置管理中心
查看账户信息、管理和分配权限
管理医联体／医院信息1
<div class="inner-con">
<div class="con-title">页面布局实例页面</div>
<div class="con-main">
<div class="con-wrapper">
<div class="form-inline">
<label>用户名：</label>
<input type="password" name="" class="input">
<label>密码：</label>
<input type="password" name="" class="input">
<label class="checkbox-wrapper">
<input type="checkbox" name="" checked>记住我
</label>
<label>用户名：</label>
<div class="select">
<div class="select-inner"></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>全部状态</li>
<li>待客服接入</li>
<li>待您反馈</li>
<li>客服处理中</li>
<li>待您确认</li>
<li>工单已关闭</li>
</ul>
</div>
</div>
<label>用户名：</label>
<div class="select">
<div class="select-inner"></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>全部状态</li>
<li>待客服接入</li>
<li>待您反馈</li>
<li>客服处理中</li>
<li>待您确认</li>
<li>工单已关闭</li>
</ul>
</div>
</div>
<button class="btn">登录</button>
</div>
</div>
<div class="con-wrapper">
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>科室</th>
<th>医生</th>
<th>类别</th>
<th>放号模式</th>
<th>星期</th>
<th>限号</th>
<th>诊疗费</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<span>修改排班</span>
<span>删除排班</span>
<span>立即生成</span>
</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<span>修改排班</span>
<span>删除排班</span>
<span>立即生成</span>
</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<span>修改排班</span>
<span>删除排班</span>
<span>立即生成</span>
</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<span>修改排班</span>
<span>删除排班</span>
<span>立即生成</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="con-wrapper form-inline">
<div class="select">
<div class="select-inner"></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>全部状态</li>
<li>待客服接入</li>
<li>待您反馈</li>
<li>客服处理中</li>
<li>待您确认</li>
<li>工单已关闭</li>
</ul>
</div>
</div>
</div>
<div class="con-divider"></div>
<div class="con-small-title">小标题</div>
<div class="con-wrapper">
<div class="yt-panel panel-action">
<div class="panel-title">什么是 PIROS ？<span class="panel-caret"></span></div>
<div class="panel-body ">您项目订单中订购的是 <span class="sign">远图 PIROS</span> 系统 <span class="stress">尊享贵宾服务</span>，服务有效期至 <span class="stress"> 2018-10-11</span></div>
</div>
<div class="yt-panel-notitle">
<p class="panel-head">统一配置管理中心</p>
<p>查看账户信息、管理和分配权限</p>
<p> 管理医联体／医院信息1</p>
<p class="panel-footer">* 更新至 V2.02 版本，看看新增哪些功能</p>
<span class="panel-icon icon-circle-portrait"></span>
</div>
</div>
<div class="con-wrapper">
<div class="form-horizontal">
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">用户名：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<input type="password" name="" class="input">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">请输入您的用户名</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">密码：</label>
<div class=" validate-status has-warning">
<span class="input-wrapper">
<span class="icon-validate-status"></span>
<input type="password" name="" class="input">
</span>
<div class="input-explain">密码设置过于简单</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">您的性别：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<label class="radio-wrapper">
<input type="radio" name="" >男士
</label>
<label class="radio-wrapper">
<input type="radio" name="" >女士
</label>
</span>
<div class="input-explain">请选择您的性别</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">兴趣爱好：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<span class="icon-validate-status"></span>
<input type="text" name="" class="input" placeholder="您的兴趣爱好">
</span>
<div class="input-explain">请输入一项兴趣爱好</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required label-for-textarea">备注：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<textarea type="textarea" name="" placeholder="请输入内容"></textarea>
</span>
<div class="input-explain">请输入您的建议</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required label-for-textarea">服务条款：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >同意
</label>
</span>
<div class="input-explain">必须同意服务条款</div>
</div>
</div>
<div class="form-inline form-only">
<button class="btn btn-upload">登录</button>
<button class="btn btn-upload">登录</button>
</div>
</div>
</div>
</div>
</div>用于简单的文本展示
<div class="txt-horizontal ">
<div class="txt-inline">
<span class="txt-item-title" >姓名：</span>
<span class="txt-item-inner" >张三</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >性别：</span>
<span class="txt-item-inner">男</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >类型：</span>
<span class="txt-item-inner">成人类型</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >身份证号：</span>
<span class="txt-item-inner">310621199007211020</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >年龄：</span>
<span class="txt-item-inner">28</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >手机号：</span>
<span class="txt-item-inner">15001001011</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >一卡通号：</span>
<span class="txt-item-inner">10000000000001</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >办卡日期：</span>
<span class="txt-item-inner">2011-11-12 14:00</span>
</div>
</div>栅格系统用于通过一系列的行（row）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下栅格系统的工作原理：
“行（row）”可以包含在 .container（100% 宽度）中，或者其他定宽的标签中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一行。栅格系统的槽宽为20px(左右10px)
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
<div class="container">
<div class="row">
<div class="col-12">col-12</div>
</div>
<div class="row">
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
<div class="row">
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
</div>
<div class="row">
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
</div>
</div>piros提供了一套来自Pirosicon的字体图标。出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。如果你要对其调整大小，请对其font-size来调整。
不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的
span标签，并将图标类应用到这个span标签上。
只对内容为空的元素起作用。
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的
span标签，并将图标类应用到这个span标签上。
<span class=" pirosicon pirosicon-rollback"></span>HTML 中的所有标题标签，<h1> 到 <h6>均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
<h1>h1.字体为44px</h1>
<h2>h2.字体为36px</h2>
<h3>h3.字体为28px</h3>
<h4>h4.字体为20px</h4>
<h5>h5.字体为16px</h5>
<h6>h6.字体为14px</h6>在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. 标题文字 <small>Sub. 副标题文字</small></h1>
<h2>h2. 标题文字 <small>Sub. 副标题文字</small></h2>
<h3>h3. 标题文字 <small>Sub. 副标题文字</small></h3>
<h4>h4. 标题文字 <small>Sub. 副标题文字</small></h4>
<h5>h5. 标题文字 <small>Sub. 副标题文字</small></h5><body>Piros 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body>元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
根据公司战略，推出了公司在医疗行业新的愿景。 Patients-oriented In-hospital Resource Optimization System 简称 “PIROS” ，即患者就医全流程我们优化系统
致力于患者就医全流程优化，提供面向患者 诊前－诊中－诊后 的全流程解决方案，提升患者就医体验，帮助医疗机构和主管单位优化医疗资源配置，完善医疗信息化建设，缓解医患纠纷。
<p>...</p>在你的文档中引用其他来源的内容。
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签
针对这个愿景落地，需要做两方面事情：第一是让新客户和意向用户能够增强感知；第二是让老客户也能纳入到搞生态中来，寻找二次销售的机会。
<blockquote>
<p>...</p>
</blockquote>
为标识源添加一个 <footer> 。
致力于医院就诊全流程优化服务
<blockquote>
<p>...</p>
<footer>...</footer>
</blockquote>
使用 badge 类。不包裹任何元素即是独立使用，可自定样式展现。预定义来三种样式，默认为红色。包裹在 badge－wrapper 时表现为定位在右上角的小红点。
<span class="badge">22</span>
<span class="badge badge-muted">1</span>
<span class="badge badge-weaker">102</span>
<span class="badge-wrapper">被提示的文字<span class="badge"></span></span>
通过添加 yt-label 类来引用默认标签，添加 label-XX 来引用不同样式的标签，具体标签如下：
<span class="yt-label">默认标签</span>
<span class="yt-label label-message">消息标签</span>
<span class="yt-label label-succeed">成功标签</span>
<span class="yt-label label-warning">警告标签</span>
<span class="yt-label label-error">错误标签</span>
<span class="yt-label label-remove">可移除标签1<span class="icon-delete"></span>
</span>
<span class="yt-label label-remove-color">可移除标签2<span class="icon-delete"></span>
</span>
<span class="yt-label label-add"><span class="icon-add"></span>添加标签</span>预定义来不同场景中的文字样式
<p class="txt-table-thead">这是一个表格标题示例</p>
<p class="txt-body">这是一个正文文字示例</p>
<p class="txt-assist">这是一个辅助文字示例</p>
<p class="txt-failure">这是一个失效文字示例</p>
<a class="txt-link">这是一个默认链接示例</a>
<p class="txt-message">这是一个消息提示示例</p>
<p class="txt-message-success">这是一个成功提示示例</p>
<p class="txt-message-warning">这是一个警告提示示例</p>
<p class="txt-message-error">这是一个错误提示示例</p>
未设置高度，默认居中显示，请根据需求来设置loading的放置位置。不兼容ie9以下，若引用自行控制。
<div class="loading-wrapper">
<span class="loading"></span>
<span> 正在加载中</span>
</div>通过<code>标签包裹内联样式的代码片段。
<input>
<code><code></code> 多行代码可以使用 <pre>
标签。为了正确的展示代码，注意将尖括号做转义处理。
<p>这是个例子</p>
<pre><p>这是个例子</p></pre> PIROS系统中的导航条部分将其设为一个独立的模块，可在外部应用它，使用类 .yt-navbar 来引用。
罗耀秋
<div class="yt-navbar">
<img src="//image.yuantutech.com/user/2eb47ee09b98ac3d79875c0d42f1e703-272-56.png" class="navbar-brand">
<ul class="navbar-nav">
<li class="dropdown">
<a href="#">
产品
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper clear">
<div class="clear-sider">
<ul class="yt-list-group">
<li class="list-group-item list-action" target-clear="#myclear1">
<a href="#">
线上服务平台
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item " target-clear="#myclear2">
<a href="#">
线下智慧医院
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
</ul>
</div>
<div class="clear-inner">
<ul class="clear-item-action" id="myclear1">
<li>
<div class="clear-item">
<div class="product-title">用户核心系统管理平台</div>
<div class="prouct-introduce">连接多个系统，提供账户管理，用户数据管理等功能</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">预约挂号管理平台</div>
<div class="prouct-introduce">帮助医院科学、高效、快速的排班并分配挂号资源</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">虚拟结算平台</div>
<div class="prouct-introduce">连接医院、银行与患者，实现区域诊疗卡一卡通</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">运维监控平台</div>
<div class="prouct-introduce">稳定安全，高易用可弹性伸缩的计算服务</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">在线问诊平台（互联网医院）</div>
<div class="prouct-introduce">足不出户，与医生零距离交流</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">移动互联网应用（APP／微信公众号）</div>
<div class="prouct-introduce">全新就诊方式，让健康触手可得</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">工单服务系统</div>
<div class="prouct-introduce">实现企业机构产品咨询、技术对接等流程化渠道管理</div>
</div>
</li>
</ul>
<ul id="myclear2" id="myclear2">
<li>
<div class="clear-item">
<div class="product-title">门诊自助服务</div>
<div class="prouct-introduce">解决门诊就医「三长一短」，提供零距离一站式服务</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">诊间结算系统</div>
<div class="prouct-introduce">稳定安全，高易用可弹性伸缩的计算服务</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">智慧分诊</div>
<div class="prouct-introduce">将无序变为有序优化医院就诊环境</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">住院部自助服务终端</div>
<div class="prouct-introduce">轻松办理出入院，随时查看日清单</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">住院部电视服务系统</div>
<div class="prouct-introduce">稳定安全，高易用可弹性伸缩的计算服务</div>
</div>
</li>
<li>
<div class="clear-item">
<div class="product-title">健康管理自助服务终端</div>
<div class="prouct-introduce">稳定安全，高易用可弹性伸缩的计算服务</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
<a href="#">
解决方案
<span class="icon-dropdown"></span>
</a>
</li>
<li>
<a href="#">文档中心</a>
</li>
</ul>
<div class="user-mark dropdown dropdown-action">
<a >
<!-- <span class="icon-user-marklogo"></span> -->
<img class="icon-user-marklogo" src="//image.yuantutech.com/user/83870c7f2a1d41f918de90273d0eab7a-100-100.png">
罗耀秋
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>账户信息</a></li>
<li class="dropdown-item"><a>我的订单</a></li>
<li class="dropdown-item"><a>退出</a> </li>
</ul>
</div>
</div>
<ul class="navbar-nav-right">
<li class="dropdown dropdown-action">
<a href="#">
工单服务
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>我的工单</a></li>
<li class="dropdown-item"><a>提交工单</a></li>
<li class="dropdown-item"><a>工单后台</a> </li>
</ul>
</div>
</li>
<li >
<a href="#">
控制台
</a>
</li>
</ul>
</div>通过类 yt-sideba 包裹侧边栏的代码片段。侧边栏使用绝对定位 。点击 extend 时，文字部分可以进行缩放， action 时为全显示状态
<div class="yt-sidebar action">
<div class="extend">
<span class="icon-ellipsis">...</span>
</div>
<ul class="sider-nav">
<li>
<a href="#" class="action">
<span class="pirosicon pirosicon-user-manage"></span>
<span class="sider-text">用户核心管理平台</span>
</a>
</li>
<li >
<a href="#">
<span class="pirosicon pirosicon-virtual"></span>
<span class="sider-text">虚拟结算平台</span>
</a>
</li>
<li>
<a href="#">
<span class="pirosicon pirosicon-operation-monitoring"></span>
<span class="sider-text">运维监控平台</span>
</a>
</li>
<li>
<a href="#">
<span class="pirosicon pirosicon-appointment"></span>
<span class="sider-text">预约挂号管理平台</span>
</a>
</li>
<li>
<a href="#">
<span class="pirosicon pirosicon-online-interview"></span>
<span class="sider-text">在线问诊平台</span>
</a>
</li>
<li>
<a href="#">
<span class="pirosicon pirosicon-mobile-app"></span>
<span class="sider-text">移动互联应用平台</span>
</a>
</li>
<!-- <li>
<a href="#">
<span class="pirosicon -house"></span>
<span class="sider-text">远程会诊平台</span>
</a>
</li> -->
</ul>
</div>使用yt-panel创建默认面板，用.panel-title 来包裹面板头，.panel-body 包裹面板主体。默认面板可收起。添加属性 action="false"时，面板不能收起。
Patients-oriented In-hospital Resource Optimization System
简称 “PIROS” ，即患者就医全流程优化系统
致力于患者就医全流程优化，提供面向患者 诊前－诊中－诊后 的全流程解决方案，提升患者就医体验，帮助医疗机构和主管单位优化医疗资源配置，完善医疗信息化建设，缓解医患纠纷。
<div class="yt-panel">
<div class="panel-title">什么是 PIROS ？<span class="icon-caret panel-caret"></span></div>
<div class="panel-body">
<p>Patients-oriented In-hospital Resource Optimization System
</br>
简称 “PIROS” ，即患者就医全流程优化系统</p>
<p>
致力于患者就医全流程优化，提供面向患者 诊前－诊中－诊后 的全流程解决方案，提升患者就医体验，帮助医疗机构和主管单位优化医疗资源配置，完善医疗信息化建设，缓解医患纠纷。</p>
</div>
</div>使用yt-panel-notitle创建不带标题的面板。
运维监控平台
第一时间了解设备损坏情况，第一时间通知维保公司
并记录时间管理只需要一个人一台电脑轻松搞定整个维保服务
<div class="yt-panel-notitle">
<p class="panel-head">运维监控平台</p>
<p>第一时间了解设备损坏情况，第一时间通知维保公司</p>
<p> 并记录时间管理只需要一个人一台电脑轻松搞定整个维保服务</p>
<p class="panel-footer">版本号 V1.21</p>
<span class="panel-icon icon-antion-update"></span>
</div>创建统计面板，你需要自己定义面板的width。
<div class="panel-card-wrapper">
<div class="panel-card-layout" style="width:50%;">
<div class="panel-card ">
<div class="panel-card-title">
今日实时总门诊量机构排名
</div>
<div class="panel-card-body">
<div class="panel-card-icon pirosicon-statistics">
</div>
<div class="panel-card-content-wrapper">
<div class="panel-card-content" style="width:33%;">
<div class="panel-card-item">
<div class="panel-card-text">总门诊量
<div class="pirosicon-count-tip tooltip-wrapper-static">
<!-- 注释部分放在 -->
<div class="tooltip tooltip-placement-right">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner tooltip-inner-wrapper">敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待敬请期待</div>
</div>
</div>
</div>
<div class="panel-card-number">369,585</div>
</div>
<div class="panel-card-item">
</div>
</div>
<div class="panel-card-content" style="width:66%">
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">
预约就诊量
<div class="pirosicon-count-tip tooltip-wrapper" data-toggle="tooltip" data-placement="right" data-original-title="敬请期待敬请期待敬请期待敬请期待">
</div>
</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">预约挂号量</div>
<div class="panel-card-number">235,243</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-card-layout" style="width:50%;">
<div class="panel-card" >
<div class="panel-card-title">
今日实时总门诊量机构排名
</div>
<div class="panel-card-body">
<div class="panel-card-icon pirosicon-statistics">
</div>
<div class="panel-card-content-wrapper">
<div class="panel-card-content" style="width:33%;">
<div class="panel-card-item">
<div class="panel-card-text">总门诊量</div>
<div class="panel-card-number">369,585</div>
</div>
<div class="panel-card-item">
</div>
</div>
<div class="panel-card-content" style="width:66%">
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">预约就诊量</div>
<div class="panel-card-number">235,243</div>
</div>
<div class="panel-card-item" style="width:50%;">
<div class="panel-card-text">预约挂号量</div>
<div class="panel-card-number">235,243</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>对复杂区域进行分组和隐藏，保持页面的整洁。
<div class="collapse ">
<div class="collapse-item">
<div class="collapse-header">
<span class="collapse-icon"></span>
标题一
</div>
<div class="collapse-content"></div>
</div>
<div class="collapse-item collapse-action">
<div class="collapse-header">
<span class="collapse-icon"></span>
标题一
</div>
<div class="collapse-content">
内容
</div>
</div>
<div class="collapse-item ">
<div class="collapse-header">
<span class="collapse-icon"></span>
标题一
</div>
<div class="collapse-content"></div>
</div>
</div>添加类<collapse-split>可以得到带空隙的折叠面板
<div class="collapse collapse-split ">
<div class="collapse-item">
<div class="collapse-header">
<span class="collapse-icon"></span>
标题一
</div>
<div class="collapse-content"></div>
</div>
<div class="collapse-item collapse-action">
<div class="collapse-header">
<span class="collapse-icon"></span>
标题一
</div>
<div class="collapse-content">
内容
</div>
</div>
<div class="collapse-item collapse-action">
<div class="collapse-header">
<span class="collapse-icon"></span>
标题一
</div>
<div class="collapse-content"></div>
</div>
</div>使用<collapse-alert>得到折叠面板组件的信息提示。
<div class="collapse-alert">请使用患者在医院办理就诊卡时所使用的身份证号码或者区域一卡通卡号进行查询。</div> 使用<collapse-alert>得到折叠面板组件的信息提示。
该身份证号绑定多张卡，请选择正确的就诊人
<div class="inner-con">
<div class="inner-con-wrapper">
<div class="con-title">健康数据查询</div>
<div class="con-main">
<div class="form-inline con-wrapper">
<input type="txt" name="" class="input" placeholder="请输入身份证号">
<input type="txt" name="" class="input" placeholder="请输入一卡通卡号">
<button class="btn ">
<span class="pirosicon pirosicon-search"></span>
查询
</button>
</div>
<p>该身份证号绑定多张卡，请选择正确的就诊人</p>
<div class="collapse collapse-split">
<div class="collapse-item collapse-action">
<div class="collapse-header">
<span class="collapse-icon"></span>
<div class="row">
<div class="col" style="width:13%">
<span>姓名：</span>
<span class="g-weight-normal">李三</span>
</div>
<div class="col" style="width:13%">
<span>性别：</span>
<span class="g-weight-normal">男</span>
</div>
<div class="col" style="width:13%">
<span>类型：</span>
<span class="g-weight-normal">成人类型</span>
</div>
<div class="col" style="width:30%">
<span>监护人身份证号：</span>
<span class="g-weight-normal">310621199007211020</span>
</div>
<div class="col" style="width:30%">
<span>办卡时间：</span>
<span class="g-weight-normal">2011-11-12 14:00</span>
</div>
</div>
</div>
<div class="collapse-content">
<div class="tabs-wrapper g-space">
<div class="tabs-nav-container">
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">基本信息</div>
<div class="tabs-tab-item" tabsKey="2">预约/挂号记录</div>
<div class="tabs-tab-item" tabsKey="3">Lis 检验报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 影像报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 健康体检报告</div>
</div>
</div>
</div>
</div>
<div class="txt-horizontal g-space">
<div class="txt-inline">
<span class="txt-item-title" >姓名：</span>
<span class="txt-item-inner" >张三</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >性别：</span>
<span class="txt-item-inner">男</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >类型：</span>
<span class="txt-item-inner">成人类型</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >身份证号：</span>
<span class="txt-item-inner">310621199007211020</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >年龄：</span>
<span class="txt-item-inner">28</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >手机号：</span>
<span class="txt-item-inner">15001001011</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >一卡通号：</span>
<span class="txt-item-inner">10000000000001</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >办卡日期：</span>
<span class="txt-item-inner">2011-11-12 14:00</span>
</div>
</div>
</div>
</div>
<div class="collapse-item ">
<div class="collapse-header">
<span class="collapse-icon"></span>
<div class="row">
<div class="col" style="width:13%">
<span>姓名：</span>
<span class="g-weight-normal">李三</span>
</div>
<div class="col" style="width:13%">
<span>性别：</span>
<span class="g-weight-normal">男</span>
</div>
<div class="col" style="width:13%">
<span>类型：</span>
<span class="g-weight-normal">成人类型</span>
</div>
<div class="col" style="width:30%">
<span>监护人身份证号：</span>
<span class="g-weight-normal">310621199007211020</span>
</div>
<div class="col" style="width:30%">
<span>办卡时间：</span>
<span class="g-weight-normal">2011-11-12 14:00</span>
</div>
</div>
</div>
<div class="collapse-content">
<div class="tabs-wrapper g-space">
<div class="tabs-nav-container">
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">基本信息</div>
<div class="tabs-tab-item" tabsKey="2">预约/挂号记录</div>
<div class="tabs-tab-item" tabsKey="3">Lis 检验报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 影像报告</div>
<div class="tabs-tab-item" tabsKey="4">Pacs 健康体检报告</div>
</div>
</div>
</div>
</div>
<div class="txt-horizontal g-space">
<div class="txt-inline">
<span class="txt-item-title" >姓名：</span>
<span class="txt-item-inner" >张三</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >性别：</span>
<span class="txt-item-inner">男</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >类型：</span>
<span class="txt-item-inner">成人类型</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >身份证号：</span>
<span class="txt-item-inner">310621199007211020</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >年龄：</span>
<span class="txt-item-inner">28</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >手机号：</span>
<span class="txt-item-inner">15001001011</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >一卡通号：</span>
<span class="txt-item-inner">10000000000001</span>
</div>
<div class="txt-inline">
<span class="txt-item-title" >办卡日期：</span>
<span class="txt-item-inner">2011-11-12 14:00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里；然后加入组成菜单的 HTML 代码。通过.dropdown标签包裹内联样式的代码片段。默认左对齐
<div class="dropdown dropdown-action">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>e</a></li>
<li class="dropdown-item"><a>第一个菜单项</a></li>
<li class="dropdown-item"><a>第十一个菜单项</a> </li>
</ul>
</div>
</div>为下拉菜单添加一条分割线，用于将多个链接分组。用 .dropdown-item-divider 包裹
<div class="dropdown dropdown-action">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
...
<li class="dropdown-item-divider"></li>
...
</div>
</div>为下拉菜单中的 <li> 元素添加.dropdown-item-disabled 类，从而禁用相应的菜单项。
<div class="dropdown dropdown-action">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
...
<li class="dropdown-item ropdown-item-disabled"></li>
...
</div>
</div>把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。添加 .dropdown-button 就能得到一个默认的按钮式下拉菜单。按钮式下拉菜单的禁用和分割线都有预定义的样式。按钮式下拉菜单默认右对齐
<div class="btn-gloup dropdown-button dropdown-button-action">
<button class="btn btn-primary " >功能按钮</button>
<button class="btn btn-primary dropdown-toggle">
<span class="icon-dropdown-button"></span>
</button>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>e</a></li>
<li class="dropdown-item"><a>第一个菜单项</a></li>
<li class="dropdown-item-divider"></li>
<li class="dropdown-item"><a>第十一个菜单项</a> </li>
<li class="dropdown-item dropdown-item-disabled"><a>第一个菜单项</a></li>
</ul>
</div>
</div>使用 .alert 来包裹警告提示组件，提供四种不同状态的提示样式。
<div class="alert alert-success">
<span class="alert-message">成功提示的文案</span>
</div>
<div class="alert alert-info">
<span class="alert-message">消息提示的文案</span>
</div>
<div class="alert alert-warning">
<span class="alert-message">警告提示的文案</span>
</div>
<div class="alert alert-error">
<span class="alert-message">错误提示的文案</span>
</div>添加 .alert-icon-circle 标签就能获得带有图标的警告提示，可口的图标让信息类型更加醒目。
<div class="alert alert-success">
<span class="alert-icon-circle"></span>
<span class="alert-message">成功提示的文案</span>
</div>
<div class="alert alert-info">
<span class="alert-icon-circle"></span>
<span class="alert-message">消息提示的文案</span>
</div>
<div class="alert alert-warning">
<span class="alert-icon-circle"></span>
<span class="alert-message">警告提示的文案</span>
</div>
<div class="alert alert-error">
<span class="alert-icon-circle"></span>
<span class="alert-message">错误提示的文案</span>
</div>添加 .alert-with-description 类，可以得到一个含有辅助性文字介绍的警告提示且有大图标。使用.alert-icon-circle-lg 来包裹图标标签
警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍
消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍
成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍
错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍
<div class="alert alert-warning alert-with-description">
<span class="alert-icon-circle-lg"></span>
<span class="alert-message">警告提示的文案</span>
<p class="alert-description">...</p>
</div>
<div class="alert alert-info alert-with-description">
<span class="alert-icon-circle-lg"></span>
<span class="alert-message">消息提示的文案</span>
<p class="alert-description">...</p>
</div>
<div class="alert alert-success alert-with-description">
<span class="alert-icon-circle-lg"></span>
<span class="alert-message">成功提示的文案</span>
<p class="alert-description">...</p>
</div>
<div class="alert alert-error alert-with-description">
<span class="alert-icon-circle-lg"></span>
<span class="alert-message">错误提示的文案</span>
<p class="alert-description">...</p>
</div>添加 .alert-with-description 和 .alert-no-icon 类，可以得到一个含有辅助性文字介绍的提示且无大图标。使用.alert-description 来包裹含有辅助消息内容的标签。
<div class="alert alert-error alert-with-description alert-no-icon">
<span class="alert-message">错误提示的文案</span>
<p class="alert-description">...</p>
</div>添加一个包裹 .alert-icon-close 类的 span 标签可以得到一个带图标的可关闭提示。
<div class="alert alert-success">
<span class="alert-icon-close"></span>
<span class="alert-message">成功提示的文案</span>
</div>
<div class="alert alert-warning alert-with-description alert-no-icon">
<span class="alert-icon-close"></span>
<span class="alert-message">警告提示的文案</span>
<p class="alert-description">...</p>
</div>
Piros也提供了通过文字来关闭提示的样式；添加一个包裹 .alert-close-txt 类的 span 标签可以得到可关闭提示。
<div class="alert alert-success">
<span class="alert-close-txt"></span>
<span class="alert-message">成功提示的文案</span>
</div>
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
不支持模态框重叠
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。
模态框的 HTML 代码放置的位置
务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
以下模态框包含了模态框的头、体和一组放置于底部的按钮。
<div class="modal" id="myModal1">
<div class="modal-content">
<span class="modal-close"></span>
<div class="modal-header">
这是标题
</div>
<div class="modal-body">
<p>对话框的内容
</p>
<p>对话框的内容
</p>
<p>对话框的内容
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary">取消</button>
<button class="btn">确定</button>
</div>
</div>
</div>点击下面的按钮即可通过 JavaScript 启动一个模态框（此组件js正在添加，敬请期待）
<button class="btn" data-toggle="modal" data-target="#myModal01">显示对话框</button>
<!-- Modal content-->
<div class="modal " id="myModal01">
<div class="modal-content">
<span class="modal-close"></span>
<div class="modal-header">
这是标题
</div>
<div class="modal-body">
<p>对话框的内容
</p>
<p>对话框的内容
</p>
<p>对话框的内容
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary">取消</button>
<button class="btn">确定</button>
</div>
</div>
</div>通过js来显示
务必为模态框触发器添加
data-toggle="modal"属性，data-target=""属性用来标识需显示的模态框，相应的为模态框加上id来一一对应。
下面是一个确认模态框 为类 modal-content 包裹的标签添加类 .modal-content-confirmgt
对于icon
你可以使用Pirosicon字体图标来得到你想添加的图标，但前提是前保留类
.confirm-icon（无须加.pirosicon 这个基类）。
<div class="modal " id="...">
<div class="modal-content modal-content-confirm">
<div class="modal-body">
<div class="confirm-body">
<span class="confirm-icon pirosicon-warning"></span>
<span class="confirm-title">您是否确认要删除这项内容？</span>
<div class="confirm-content">
<p>对话框的内容</p>
</div>
</div>
<div class="confirm-btns">
<button class="btn btn-secondary btn-ghost">取消</button>
<button class="btn">确定</button>
</div>
</div>
</div>
</div>信息提示模态框与确认模态框大致相同。
对于icon
你可以使用Pirosicon字体图标来得到你想添加的图标，但前提是前保留类
.confirm-icon。（无须加.pirosicon 这个基类）。
<div class="modal " id="...">
<div class="modal-content modal-content-confirm">
<div class="modal-body">
<div class="confirm-body">
<span class="confirm-icon pirosicon-info"></span>
<span class="confirm-title">这是一条信息提示</span>
<div class="confirm-content">
<p>对话框的内容</p>
<p>对话框的内容</p>
</div>
</div>
<div class="confirm-btns">
<button class="btn">知道了</button>
</div>
</div>
</div>
</div>点击元素，弹出气泡式的卡片浮层。将气泡卡片和触发器包裹在 .popover-wrapper 中，并为之添加属性 data-toggle="popover"
内容
内容
<div class="popover-wrapper" data-toggle="popover" >
<button class="btn btn-secondary btn-sm" >上边</button>
<div class="popover popover-placement-top" >
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-title">标题</div>
<div class="popover-inner-content">
<p>内容</p>
<p>内容</p>
</div>
</div>
</div>
</div>
</div>为气泡卡片添加 popover-placement-top／-right／-bottom／-left 来确定气泡卡片的位置
内容
内容
内容
内容
内容
内容
内容
内容
如果你想使用气泡卡片并且希望该组件能够兼容ie8，9；那么请为触发器添加 类 popover-wrapper-ie 使用data-target来一一对应气泡卡片,为卡片添加popover-ie 并
<!-- 触发器 -->
<div class="popover-wrapper popover-wrapper-ie" data-placement="top" data-toggle="popover" data-target="#myPopover01" >
<button class="btn btn-secondary btn-sm" >上边</button>
</div>
<div class="popover-wrapper popover-wrapper-ie" data-placement="left" data-toggle="popover" data-target="#myPopover02" >
<button class="btn btn-secondary btn-sm" >左边</button>
</div>
<div class="popover-wrapper popover-wrapper-ie" data-placement="right" data-toggle="popover" data-target="#myPopover03">
<button class="btn btn-secondary btn-sm" >右边</button>
</div>
<div class="popover-wrapper popover-wrapper-ie" data-placement="bottom" data-toggle="popover" data-target="#myPopover04" >
<button class="btn btn-secondary btn-sm" >下边</button>
</div>
<!-- 气泡卡片 放在body下 -->
<div class="popover popover-placement-top popover-ie" id="myPopover01">
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-title">标题</div>
<div class="popover-inner-content">
<p>内容</p>
<p>内容</p>
</div>
</div>
</div>
</div>
<div class="popover popover-placement-left popover-ie" id="myPopover02" >
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-title">标题</div>
<div class="popover-inner-content">
<p>内容</p>
<p>内容</p>
</div>
</div>
</div>
</div>
<div class="popover popover-placement-right popover-ie" id="myPopover03">
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-title">标题</div>
<div class="popover-inner-content">
<p>内容</p>
<p>内容</p>
</div>
</div>
</div>
</div>
<div class="popover popover-placement-bottom popover-ie" id="myPopover04" >
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-title">标题</div>
<div class="popover-inner-content">
<p>内容</p>
<p>内容</p>
</div>
</div>
</div>
</div>如下
内容
关闭卡片<div class="popover-wrapper" data-toggle="popover">
<button class="btn btn-secondary btn-sm" >从浮层内关闭</button>
<div class="popover popover-placement-top" >
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-title">标题</div>
<div class="popover-inner-content">
<p>内容</p>
<a class="popover-close txt-link">关闭卡片</a>
</div>
</div>
</div>
</div>
</div>点击元素，弹出气泡式的确认框。目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和全屏居中模态对话框相比，交互形式更轻量。通过添加Pirosicon字体图标来获得相应的图标，前提是保留 .popover-icon （无须加.pirosicon 这个基类）。
<div class="popover-wrapper" data-toggle="popover" >
<a class="txt-link">删除</a>
<div class="popover popover-placement-top" >
<div class="popover-content">
<div class="popover-arrow"></div>
<div class="popover-inner">
<div class="popover-inner-content">
<div class="popover-message">
<span class="popover-icon pirosicon-solid-warning"></span>
<div class="popover-message-title">确定要删除这个任务吗？</div>
</div>
<div class="popover-buttons">
<button class="btn btn-secondary btn-sm btn-ghost">取消</button>
<button class="btn btn-sm">确定</button>
</div>
</div>
</div>
</div>
</div>
</div>鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。可用来代替系统默认的 title 提示，提供一个按钮/文字/操作的文案解释。
为信息提示包裹 .tooltip-wrapper
<div class="tooltip-wrapper" data-toggle="tooltip" data-placement="top" data-original-title="文字提示">
鼠标移上来就会出现提示
</div>
为信息提示添加类 .tooltip－placement-top／-right／-bottom／-left 来确定信息提示的位置
<div class="tooltip-wrapper" data-toggle="tooltip" data-placement="bottom" data-original-title="文字提示在下面">
<button class="btn btn-secondary btn-sm ">下面</button>
</div>在实际应用中，你或许不能需要动态的信息提示（因为种种原因不能将其写入固定的dom中）piros为你提供了本组件的动态生成方式（此组件js正在添加，敬请期待）
需要设定特定的属性
务必为
.tooltip-wrapper添加属性data-toggle="tooltip"；属性data-placement=""用了确定信息提示的位置 属性data-original-title=""原来确定信息提示的内容
<div class="tooltip-wrapper" data-toggle="tooltip" data-placement="..." data-original-title="...">
...
</div>全局展示操作反馈信息。
可提供成功、警告和错误等反馈信息。
顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。不可以承载太复杂的操作
全局提示 HTML 代码放置的位置
务必将全局提示的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
<div class="message " id="myMessage01">
<div class="message-notice">
<div class="message-notice-content">
<span class="message-icon pirosicon-solid-info"></span>
<span>这是一条普通的提示</span>
</div>
</div>
</div>点击下面的按钮即可通过 JavaScript 启动一条全局提示（此组件js正在添加，敬请期待）
<button class="btn btn-sm" data-toggle="message" data-time="10" data-target="#myMessage01">显示普通提示</button>
<div class="message " id="myMessage01">
<div class="message-notice">
<div class="message-notice-content">
<span class="message-icon pirosicon-solid-info"></span>
<span>这是一条普通的提示</span>
</div>
</div>
</div>通过js来显示
务必为模态框触发器添加
data-toggle="message"属性，data-target=""默认时长为 1.5s,显式设置属性data-time=""来修改他的延长时间。属性用来标识需显示的模态框，相应的为模态框加上id来一一对应。
为 .message-icon 加上类 .loading 就可以得到一条加载中的全局提示。不兼容ie9以下，若引用自行控制。
<!-- 触发器 -->
<button class="btn btn-secondary btn-sm" data-toggle="message" data-target="#myMessage02">显示加载中...</button>
<!-- message -->
<div class="message " id="myMessage02">
<div class="message-notice">
<div class="message-notice-content">
<span class="message-icon loading"></span>
<span>正在加载中...</span>
</div>
</div>
</div>你可以很容易的得到其他类型的提示包括：成功、失败、警告。你只需要将message－icon 包裹的标签加上相应的 图标
<!-- 触发器 -->
<button class="btn btn-secondary btn-sm" data-toggle="message" data-target="...">显示加载中...</button>
<!-- message -->
<div class="message " id="...">
<div class="message-notice">
<div class="message-notice-content">
<span class="message-icon pirosicon-solid-..."></span>
<span>正在加载中...</span>
</div>
</div>
</div>通过js显示
务必为模态框触发器添加
data-toggle="notification"属性，data-target=""属性用来标识需显示的模态框，相应的为模态框加上 id 来一一对应。最简单的用法，4.5 秒后自动关闭。显示设置data-time来确定自动关闭的延时取消自动关闭只要将该值设为 0 即可。
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭
<button class="btn btn-sm" data-toggle="notification" data-target="#myNotification01">点击打开通知提醒框</button>
<div class="notification " id="myNotification01" >
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<div class="notification-message">这是标题</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭
<button class="btn btn-sm" data-toggle="notification" data-time="0" data-target="#myNotification02">不自动关闭</button>
<div class="notification " id="myNotification01" >
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<div class="notification-message">这是标题</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>包裹 notification-with-icon得到带图标的通知提示框，你可以很容易的得到其他类型的通知提示框包括：成功、失败、警告。你只需要保留 .notification-icon类并加上相应的 图标(不需要添加基类.pirosicon)
<button class="btn btn-sm" data-toggle="notification" data-target="#myNotification03">error</button>
<div class="notification notification-with-icon" id="myNotification03">
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<span class="notification-icon pirosicon-error"></span>
<div class="notification-message">错误提示的文案</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>
<button class="btn btn-sm" data-toggle="notification" data-target="#myNotification04">warning</button>
<div class="notification notification-with-icon" id="myNotification04">
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<span class="notification-icon pirosicon-warning"></span>
<div class="notification-message">错误提示的文案</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>
<button class="btn btn-sm" data-toggle="notification" data-target="#myNotification05">info</button>
<div class="notification notification-with-icon" id="myNotification05">
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<span class="notification-icon pirosicon-info"></span>
<div class="notification-message">错误提示的文案</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>
<button class="btn btn-sm" data-toggle="notification" data-target="#myNotification06">success</button>
<div class="notification notification-with-icon" id="myNotification06">
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<span class="notification-icon pirosicon-success"></span>
<div class="notification-message">错误提示的文案</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>自定义链接的样式和文字。
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭
操作链接<button class="btn btn-sm" data-toggle="notification" data-target="#myNotification00">点击打开通知提醒框</button>
<div class="notification " id="myNotification00">
<div class="notification-notice">
<span class="notification-icon-close icon-antion-remove"></span>
<div class="notification-message">错误提示的文案</div>
<p class="notification-description">
可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭可以设置自动关闭或手动关闭</p>
<a class="txt-link">操作链接</a>
</div>
</div>通过在标签 ul 上添加类 yt-list-group来引用默认列表组
<ul class="yt-list-group">
<li class="list-group-item"><a href="#">排班结果</a></li>
<li class="list-group-item list-dropdown list-dropdown-action">
<a href="#">
排班模版
<span class="icon-caret icon-caret-color"></span>
</a>
<ul class="dropdown-menu">
<li class="list-dropdown-item list-action"><a href="#">医院模版</a></li>
<li class="list-dropdown-item"><a href="#">医生模版</a></li>
</ul>
</li>
<li class="list-group-item"><a href="#">预约纪录</a></li>
<li class="list-group-item list-dropdown">
<a href="#">
统计报表
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
黑名单
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
用户管理
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
系统匹配
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
<li class="list-group-item list-dropdown">
<a href="#">
平台配置
<span class="icon-caret icon-caret-color"></span>
</a>
</li>
</ul>通过 .table 可以为其赋予基本的样式 — 少量的内补（padding）和 边框。请务必使用 <thead> 和 <tbody> 来包裹表格的头和主体
| 序号 | 科室 | 医生 | 类别 | 放号模式 | 星期 | 限号 | 诊疗费 | 操作 |
|---|---|---|---|---|---|---|---|---|
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
| 1 | 肛肠门诊 | 董嘉俊 | 急诊 | 预约 + 挂号 | 星期三 |
上午：6 (09:00 ~ 12:00)
下午：不坐诊
|
￥4.00 | 修改排班 删除排班 立即生成 |
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>科室</th>
<th>医生</th>
<th>类别</th>
<th>放号模式</th>
<th>星期</th>
<th>限号</th>
<th>诊疗费</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<a class="txt-link">修改排班</a>
<span class="divider"></span>
<a class="txt-link">删除排班</a>
<span class="divider"></span>
<a class="txt-link">立即生成</a>
</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<a class="txt-link">修改排班</a>
<span class="divider"></span>
<a class="txt-link">删除排班</a>
<span class="divider"></span>
<a class="txt-link">立即生成</a>
</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<a class="txt-link">修改排班</a>
<span class="divider"></span>
<a class="txt-link">删除排班</a>
<span class="divider"></span>
<a class="txt-link">立即生成</a>
</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
<td>预约 + 挂号</td>
<td>星期三</td>
<td>
<div>上午：6 (09:00 ~ 12:00)</div>
<div>下午：不坐诊</div>
</td>
<td>￥4.00</td>
<td>
<a class="txt-link">修改排班</a>
<span class="divider"></span>
<a class="txt-link">删除排班</a>
<span class="divider"></span>
<a class="txt-link">立即生成</a>
</td>
</tr>
</tbody>
</table>| 名称 | 医院编号 | 限号 | 是否上线 | 操作 |
|---|---|---|---|---|
| 广州番禺中心医院 | 132 | 不限号 | 未上线 | 修改 删除 |
| 北京协和医院 | 202 | 不限号 | 未上线 | 修改 删除 |
| 杭州邵逸夫医院 | 333 | 上午 | 修改 删除 | |
| 青岛市口腔医院 | 422 | 下午 | 修改 删除 |
<div class="con-wrapper">
<table class="table">
<thead>
<tr>
<th>名称</th>
<th>医院编号</th>
<th>限号</th>
<th>是否上线</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>132</td>
<td>不限号</td>
<td><span class="yt-label label-error">未上线</span></td>
<td>
<a class="txt-link">修改</a>
<span class="divider"></span>
<a class="txt-link">删除</a>
<span class="divider"></span>
<div class="dropdown ">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>第一个菜单项</a></li>
<li class="dropdown-item-divider"></li>
<li class="dropdown-item"><a>第十一个菜单项</a> </li>
<li class="dropdown-item dropdown-item-disabled"><a>第一个菜单项</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="txt-link">北京协和医院</a></td>
<td>202</td>
<td>不限号</td>
<td><span class="yt-label label-error">未上线</span></td>
<td>
<a class="txt-link">修改</a>
<span class="divider"></span>
<a class="txt-link">删除</a>
<span class="divider"></span>
<div class="dropdown ">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>第一个菜单项</a></li>
<li class="dropdown-item-divider"></li>
<li class="dropdown-item"><a>第十一个菜单项</a> </li>
<li class="dropdown-item dropdown-item-disabled"><a>第一个菜单项</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="txt-link">杭州邵逸夫医院</a></td>
<td>333</td>
<td>上午</td>
<td><span class="yt-label label-message">未上线</span></td>
<td>
<a class="txt-link">修改</a>
<span class="divider"></span>
<a class="txt-link">删除</a>
<span class="divider"></span>
<div class="dropdown ">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>第一个菜单项</a></li>
<li class="dropdown-item-divider"></li>
<li class="dropdown-item"><a>第十一个菜单项</a> </li>
<li class="dropdown-item dropdown-item-disabled"><a>第一个菜单项</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td><a class="txt-link">青岛市口腔医院</a></td>
<td>422</td>
<td>下午</td>
<td><span class="yt-label label-message">未上线</span></td>
<td>
<a class="txt-link">修改</a>
<span class="divider"></span>
<a class="txt-link">删除</a>
<span class="divider"></span>
<div class="dropdown ">
<a class="txt-link" >更多
<span class="icon-dropdown"></span>
</a>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item"><a>第一个菜单项</a></li>
<li class="dropdown-item-divider"></li>
<li class="dropdown-item"><a>第十一个菜单项</a> </li>
<li class="dropdown-item dropdown-item-disabled"><a>第一个菜单项</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="con-wrapper">
<div class="pagination-wrapper">
<span class="pagination-total-text">共 4 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item agination-item-action"><a>1</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>
</div>第一列是联动的选择框。需要为第一列添加 .table-selection-column
<div class="con-wrapper">
<table class="table">
<thead>
<tr>
<th class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</th>
<th>名称</th>
<th>医院编号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
<a class="txt-link">修改</a>
<span class="divider"></span>
<a class="txt-link">删除</a>
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">北京协和医院</a></td>
<td>342</td>
<td>
<a class="txt-link">修改</a>
<span class="divider"></span>
<a class="txt-link">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="con-wrapper">
<div class="pagination-wrapper">
<span class="pagination-total-text">共 2 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item agination-item-action"><a>1</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>
</div>对某一项数据进行筛选
注意：prios只提供了样式，具体一些动态数据需要引用者自己编写代码
<!-- 表格筛选功能组件－代码 -->
<div class="dropdown table-filter">
<span class="icon-antion-hover-filter"></span>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
全部
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
限号
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
不限号
</label>
</a>
</li>
<li class="dropdown-item-divider"></li>
</ul>
<div class="table-filter-dropdown-btns">
<a class="btn btn-sm">确 定</a>
<a class="btn btn-secondary btn-sm">重 置</a>
</div>
</div>
</div>
<!-- 整体表格代码 -->
<div class="con-wrapper">
<table class="table">
<thead>
<tr>
<th class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</th>
<th>名称</th>
<th>医院编号</th>
<th>
<span>限号</span>
<div class="dropdown table-filter">
<span class="icon-antion-hover-filter"></span>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
全部
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
限号
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
不限号
</label>
</a>
</li>
<li class="dropdown-item-divider"></li>
</ul>
<div class="table-filter-dropdown-btns">
<a class="btn btn-sm">确 定</a>
<a class="btn btn-secondary btn-sm">重 置</a>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
不限号
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">北京协和医院</a></td>
<td>342</td>
<td>
上午
</td>
</tr>
</tbody>
</table>
</div>
<div class="con-wrapper">
<div class="pagination-wrapper">
<span class="pagination-total-text">共 2 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a>
</a></li>
<li class="pagination-item agination-item-action"><a>1</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>
</div>只提供
icon。table-up-sort-icon table-sorttable-down-sort-icon table-sorttable-sort-icon table-sort使用direction来控制初始状态具体点击之后实现的数据升序降序排列需要引用者自己实现。
<span class="table-sort table-sort-icon " direction="default"></span>
<span class="table-sort table-up-sort-icon " direction="up"></span>
<span class="table-sort table-down-sort-icon " direction="down"></span>
例子：
<table class="table">
<thead>
<tr>
<th class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</th>
<th>名称</th>
<th>
<span>医院编号</span>
<span class="table-sort-icon table-sort" direction="default"></span>
<span class="table-up-sort-icon table-sort" ></span>
<span class="table-down-sort-icon table-sort" ></span\>
<th>
<span>限号</span>
<div class="dropdown table-filter">
<span class="icon-antion-hover-filter"></span>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
全部
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
限号
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
不限号
</label>
</a>
</li>
<li class="dropdown-item-divider"></li>
</ul>
<div class="table-filter-dropdown-btns">
<a class="btn btn-sm">确 定</a>
<a class="btn btn-secondary btn-sm">重 置</a>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
不限号
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">北京协和医院</a></td>
<td>342</td>
<td>
上午
</td>
</tr>
</tbody>
</table>
在table的外面包裹一层table－wrapper，不兼容ie9以下，若引用自行控制。
引用者自己确定出现的时间与触发条件
<div class="con-wrapper">
<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<th class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</th>
<th>名称</th>
<th>
<span>医院编号</span>
<span class="table-sort-icon table-sort" direction="default"></span>
</th>
<th>
<span>限号</span>
<div class="dropdown table-filter">
<span class="icon-antion-hover-filter"></span>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
全部
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
限号
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
不限号
</label>
</a>
</li>
<li class="dropdown-item-divider"></li>
</ul>
<div class="table-filter-dropdown-btns">
<a class="btn btn-sm">确 定</a>
<a class="btn btn-secondary btn-sm">重 置</a>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
不限号
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">北京协和医院</a></td>
<td>342</td>
<td>
上午
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
不限号
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
不限号
</td>
</tr>
<tr>
<td class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</td>
<td><a class="txt-link">广州番禺中心医院</a></td>
<td>233</td>
<td>
不限号
</td>
</tr>
</tbody>
</table>
<div class="loading-wrapper">
<div class="loading-con">
<span class="loading"></span>
<span> 正在加载中</span>
</div>
</div>
</div>
</div>
<div class="con-wrapper">
<div class="pagination-wrapper">
<span class="pagination-total-text">共 2 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a>
</a></li>
<li class="pagination-item agination-item-action"><a>1</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>
</div>
请预留一行空的单元格。
<div class="con-wrapper">
<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<th class="table-selection-column">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
</label>
</th>
<th>名称</th>
<th>
<span>医院编号</span>
<span class="table-sort-icon table-sort" direction="default"></span>
</th>
<th>
<span>限号</span>
<div class="dropdown table-filter">
<span class="icon-antion-hover-filter"></span>
<div class="dropdown-item-wrapper">
<ul>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
全部
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
限号
</label>
</a>
</li>
<li class="dropdown-item">
<a>
<label class="checkbox-wrapper">
<input type="checkbox" name="" >
不限号
</label>
</a>
</li>
<li class="dropdown-item-divider"></li>
</ul>
<div class="table-filter-dropdown-btns">
<a class="btn btn-sm">确 定</a>
<a class="btn btn-secondary btn-sm">重 置</a>
</div>
</div>
</div>
</th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody>
</tbody>
</table>
<div class="table-empty">当前列表为空</div>
</div>
</div>
<div class="con-wrapper">
<div class="pagination-wrapper">
<span class="pagination-total-text">共 2 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a>
</a></li>
<li class="pagination-item agination-item-action"><a>1</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>
</div>为您的网站或应用提供带有展示页码的分页组件。如下是一个基本的分页，为 .pagination 添加属性 defaultCurrent 来设定默认的当前页数通过
<div class="pagination-wrapper">
<ul class="pagination" defaultCurrent="3">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item"><a>1</a></li>
<li class="pagination-item"><a>2</a></li>
<li class="pagination-item pagination-item-action"><a>3</a></li>
<li class="pagination-item"><a>4</a></li>
<li class="pagination-item"><a>5</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>添加 .pagination-total-tex 的 span 标签，并为 .pagination 添加属性 total 来设定数据总量
<div class="pagination-wrapper">
<span class="pagination-total-text">共 50 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item"><a>1</a></li>
<li class="pagination-item"><a>2</a></li>
<li class="pagination-item pagination-item-action"><a>3</a></li>
<li class="pagination-item"><a>4</a></li>
<li class="pagination-item"><a>5</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>为 .pagination-item 添加 .pagination-item-disabled 来禁用该页
<div class="pagination-wrapper">
<span class="pagination-total-text">共 50 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item"><a>1</a></li>
<li class="pagination-item"><a>2</a></li>
<li class="pagination-item pagination-item-action"><a>3</a></li>
<li class="pagination-item"><a>4</a></li>
<li class="pagination-item"><a>5</a></li>
<li class="pagination-next"><a></a></li>
</ul>
<div class="pagination-options-quick-jumper">
跳至 <input type="text" name="" class="input"> 页
</div>
</div>如下实例为拥有更多项的分页，为 .pagination 添加属性 page 来表示有几页 添加 .pagination-options-quick-jumper 来添加快速跳转到某一页的功能组件。
<div class="pagination-wrapper">
<span class="pagination-total-text">共 500 条</span>
<ul class="pagination" total="500" defaultCurrent="8" page="50">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item"><a>1</a></li>
<li class="pagination-ellipsis"></li>
<li class="pagination-item"><a>7</a></li>
<li class="pagination-item pagination-item-action"><a>8</a></li>
<li class="pagination-item"><a>9</a></li>
<li class="pagination-item"><a>10</a></li>
<li class="pagination-item"><a>11</a></li>
<li class="pagination-ellipsis"></li>
<li class="pagination-item"><a>50</a></li>
<li class="pagination-next"><a></a></li>
</ul>
<div class="pagination-options-quick-jumper">
跳至 <input type="text" name="" class="input"> 页
</div>
</div>
单独的表单控件会被自动赋予一些全局样式。所有设置了 .input 类的 <input> input属性 元素都将被默认设置宽度属性为 disabled 为ture是为禁用状态width: 100%;。 建议将 label 元素和input包裹在 .form-group 中可以获得最好的排列。
<div class="form-group">
<label>基本：</label>
<input type="text" name="" class="input" placeholder="请输入内容">
</div>
<div class="form-group">
<label>禁用：</label>
<input type="text" name="" disabled="true " class="input" placeholder="不可选">
</div>
<div class="form-group">
<label>密码框：</label>
<input type="password" name="" class="input">
</div>为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
可能需要手动设置宽度。 输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。
<form class="form-inline">
<div class="form-group">
<label>基本：</label>
<input type="text" name="" class="input" placeholder="请输入内容">
</div>
<div class="form-group">
<label>禁用：</label>
<input type="text" name="" disabled="true " class="input " placeholder="不可选">
</div>
<div class="form-group">
<label>密码框：</label>
<input type="password" name="" class="input">
</div>
</form>为 label 标签添加类 .input-required 类标记该表单为必须项。
我们为表单控件定义了三种校验状态，为 input 添加具有 validate-status 类名的div
validate-status: 'has-success', 'has-warning', 'has-error', 'is-validating'。
另外为输入框添加反馈图标,一定要将需要验证的input输入框包裹在具有类名.input-weapper的span 标签中
注意: 反馈图标只对input 有效。
<div class="form-inline">
<label class="input-required">必填项:</label>
<div class=" validate-status">
<span class="input-wrapper">
<input type="text" name="" class="input" placeholder="请输入内容">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">提示的长度控制在一行内，也可以超出一行</div>
</div>
</div>下面是校验提示的不同状态的具体样式
<div class=" validate-status has-error"><!-- 此处保留validate-status 添加：has-success、is-validating、has-warning、has-error来替换得到相应的校验提示 -->
<span class="input-wrapper">
<input type="text" name="" class="input">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">错误校验的文案提示</div>
</div>
添加.form-item-with-help 类 你也可以联合使用piros预置的栅格系统,可以将 label 标签和 input 水平并排布局。
<form class="form-group">
<div class="form-item-with-help row">
<div class="col-2 form-item-label form-item-label">
<label class=" input-required">必填(文案提示):</label>
</div>
<div class="col-5">
<div class=" validate-status ">
<span class="input-wrapper">
<input type="text" name="" class="input" placeholder="请输入内容">
</span>
<div class="input-explain">提示的长度控制在一行内，也可以超出一行</div>
</div>
</div>
</div>
<div class="form-item-with-help row">
<div class="col-2 form-item-label">
<label >校验中:</label>
</div>
<div class="col-5">
<div class=" validate-status is-validating">
<span class="input-wrapper">
<input type="text" name="" class="input">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">信息审核中…</div>
</div>
</div>
</div>
<div class="form-item-with-help row">
<div class="col-2 form-item-label">
<label >成功校验:</label>
</div>
<div class="col-5">
<div class=" validate-status has-success">
<span class="input-wrapper">
<input type="text" name="" class="input" value="成功校验的内容">
<span class="icon-validate-status"></span>
</span>
</div>
</div>
</div>
<div class="form-item-with-help row">
<div class="col-2 form-item-label">
<label >警告校验:</label>
</div>
<div class="col-5">
<div class=" validate-status has-warning">
<span class="input-wrapper">
<input type="text" name="" class="input">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">警告校验的文案提示</div>
</div>
</div>
</div>
<div class="form-item-with-help row">
<div class="col-2 form-item-label">
<label >错误校验:</label>
</div>
<div class="col-5">
<div class=" validate-status has-error">
<span class="input-wrapper">
<input type="text" name="" class="input">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">错误校验的文案提示</div>
</div>
</div>
</div>
</form>
通过.form-search包裹搜索框的代码片段。为 inline-block ,你可能需要手动设置宽度。
兼容版本（js未添加）
<div class="form-search">
<input type="text" name="" class="input " placeholder="请输入内容">
<span class="submit-wrapper">
<input type="submit" >
</span>
</div>
原先版本
<div class="form-search">
<input type="text" name="" class="input " placeholder="请输入内容">
<input type="submit" name="" class="submit" value=" ">
</div>
通过<code>标签包裹内联样式的代码片段。通过为表单添加 .group-horizontal 类，并联合使用 预置的栅格类，可以将input组水平并排布局。因.group-horizontal 其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。最常见的应用为组合输入框，常见于电话号码的输入
<div class="group-horizontal">
<div class="col-4">
<input type="text" name="" class="input " placeholder="请输入内容">
</div>
<div class="col-7">
<input type="text" name="" class="input " placeholder="请输入内容">
</div>
</div>通过<code>
单选框（radio） 用于从多个选项中只选择一个。请将 label 与 radio 联合使用，为 label 添加 .radio-wrapper 类，包裹住 input 。如果希望单选框（radio）具有disabled的属性，则为外层的 label 标签加上 .radio-disabled 类并为 input 添加设置了 disabled 属性。
<label class="radio-wrapper" for="radio">
<input type="radio" name="radio">默认
</label>
<label class="radio-wrapper" for="radio">
<input type="radio" name="radio" checked>默认已选
</label>
<label class="radio-wrapper radio-disabled" for="radio">
<input type="radio" name="radio" disabled >禁用
</label>
<label class="radio-wrapper radio-disabled" for="radio">
<input type="radio" name="radio" disabled checked>已选禁用
</label> 通过<code>
按钮样式的单选组合。用 .radio-gloup 来包裹按钮组 label 用 .radio-button-wrapper 来包裹。若使用禁用属性，则为 label 添加 radio-button-item-disabled 属性，若想使用默认选择属性则为 label 添加 radio-button-item-checked 属性。
<div class="radio-gloup">
<label class="radio-button-wrapper radio-button-item-checked" for="radio">
<input type="radio" name="radio">杭州
</label>
<label class="radio-button-wrapper" for="radio">
<input type="radio" name="radio">上海
</label>
<label class="radio-button-wrapper" for="radio">
<input type="radio" name="radio">西安
</label>
<label class="radio-button-wrapper" for="radio">
<input type="radio" name="radio">南京
</label>
</div>
<div class="radio-gloup ">
<label class="radio-button-wrapper " for="radio">
<input type="radio" name="radio">杭州
</label>
<label class="radio-button-wrapper" for="radio">
<input type="radio" name="radio">上海
</label>
<label class="radio-button-wrapper radio-button-item-disabled" for="radio">
<input type="radio" name="radio">西安
</label>
<label class="radio-button-wrapper" for="radio">
<input type="radio" name="radio">南京
</label>
</div>
<div class="radio-gloup">
<label class="radio-button-wrapper radio-button-item-disabled" for="radio">
<input type="radio" name="radio">杭州
</label>
<label class="radio-button-wrapper radio-button-item-disabled" for="radio">
<input type="radio" name="radio">上海
</label>
<label class="radio-button-wrapper radio-button-item-disabled" for="radio">
<input type="radio" name="radio">西安
</label>
<label class="radio-button-wrapper radio-button-item-checked radio-button-item-disabled" for="radio">
<input type="radio" name="radio">南京
</label>
</div>
通过<code>
复选框（checkbox） 用于从多个选项中只选择一个。请将 label 与 checkbox 联合使用，为 label 添加 .checkbox-wrapper 类，包裹住 input 。如果希望复选框（checkbox）具有disabled的属性，则为外层的 label 标签加上 .checkbox-disabled 类并为 input 添加设置了 disabled 属性。
<label class="checkbox-wrapper">
<input type="checkbox" name="" checked>默认已选
</label>
<label class="checkbox-wrapper ">
<input type="checkbox" name="" >默认
</label>
<label class="checkbox-wrapper checkbox-disabled">
<input type="checkbox" name="" disabled>不可用
</label>
<label class="checkbox-wrapper checkbox-disabled">
<input type="checkbox" name="" disabled checked>已选不可用
</label>
通过<code>
按钮样式的复选组合。用 .checkbox-gloup 来包裹按钮组 label 用 .checkbox-button-wrapper 来包裹。若使用禁用属性，则为 label 添加 checkbox-button-item-disabled 属性，若想使用默认选择属性则为 label 添加 checkbox-button-item-checked 属性。
<div class="checkbox-gloup">
<label class="checkbox-button-wrapper checkbox-button-item-checked">
<input type="checkbox" name="" >杭州
</label>
<label class="checkbox-button-wrapper ">
<input type="checkbox" name="" >上海
</label>
<label class="checkbox-button-wrapper checkbox-button-item-disabled">
<input type="checkbox" name="" >西安
</label>
<label class="checkbox-button-wrapper checkbox-button-item-disabled checkbox-button-item-checked">
<input type="checkbox" name="" >南京
</label>
</div>
为 lable 标签加上 radio-block 或者 checkbox-block 就可以得到垂直排列的单选或复选框
<label class="radio-wrapper radio-block" for="radio">
<input type="radio" name="radio">默认
</label>
<label class="radio-wrapper radio-block" for="radio">
<input type="radio" name="radio" checked="checked">默认已选
</label>
<label class="checkbox-wrapper checkbox-block">
<input type="checkbox" name="" checked>默认已选
</label>
<label class="checkbox-wrapper checkbox-block">
<input type="checkbox" name="" >默认
</label>
通过使用 checkbox-switch 来创建滑动开关 ,你只需要对input input标签添加 checked disabled
属性就能获得组件的不同状态。该组件依赖js，不建议在ie9以下使用。
<!-- 不兼容 -->
<label class="checkbox-switch ">
<input class="mui-switch mui-switch-animbg" type="checkbox" checked>
</label >
<label class="checkbox-switch ">
<input class="mui-switch mui-switch-animbg" type="checkbox" >
</label >
<span>禁用：</span>
<label class="checkbox-switch ">
<input class="mui-switch mui-switch-animbg" type="checkbox" checked disabled>
</label >
<label class="checkbox-switch ">
<input class="mui-switch mui-switch-animbg" type="checkbox" disabled>
</label >
<!-- 兼容 -->
<span class="checkbox-switch >
<span class="switch" > </span>
<input class="input" type="checkbox" name="" checked>
</span >
<span class="checkbox-switch ">
<span class="switch" ></span>
<input class="input" type="checkbox" name="">
</span >
<span class="checkbox-switch ">
<span class="switch" > </span>
<input class="input" type="checkbox" name="" checked disabled>
</span >
<span class="checkbox-switch ">
<span class="switch" ></span>
<input class="input" type="checkbox" name="" disabled>
</span >
为表单组件包裹.form-inline可以很好的得到水平排序，为组件初始化了8px的上下内补（padding）。
<div class="form-inline">
<div class="select">
<div class="select-inner" ></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>。。。</li>
</ul>
</div>
</div>
<div class="form-search">
<input type="text" name="" class="input " placeholder="请输入内容">
<input type="submit" name="" class="submit" value=" ">
</div>
</div>
<div class="form-inline">
<label>用户名：</label>
<input type="password" name="" class="input">
<label>密码：</label>
<input type="password" name="" class="input">
<label class="checkbox-wrapper">
<input type="checkbox" name="" checked>记住我
</label>
<button class="btn">登录</button>
</div>
包裹 form-horizontal 可以得到行内布局，结合 .form-inline 使用。为左边 label 定宽，右边的表单组件赋予400px的宽度。为 textarea 匹配的 label 添加 .label-for-textarea 。
<div class="form-horizontal">
<div class="form-inline">
<label class="form-item-label" >用户名：</label>
<label>丹桂飘香</label>
</div>
<div class="form-inline">
<label class="form-item-label">密码：</label>
<input type="password" name="" class="input">
</div>
<div class="form-inline">
<label class="form-item-label">您的性别：</label>
<label class="radio-wrapper">
<input type="radio" name="" >男士
</label>
<label class="radio-wrapper">
<input type="radio" name="" checked>女士
</label>
</div>
<div class="form-inline">
<label class="form-item-label label-for-textarea">备注：</label>
<textarea type="textarea" name="" placeholder="请输入内容"></textarea>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required label-for-textarea">请选择时间：</label>
<div class="inline-control">
<div class="time-picker time-picker-action">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择开始时间" >
<span class="icon-time-picker"></span>
</div>
</div>
<span class="form-split">-</span>
<div class="time-picker time-picker-action">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择开始时间" >
<span class="icon-time-picker"></span>
</div>
</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">地址：</label>
<div class=" validate-status is-validating">
<span class="input-wrapper">
<input type="password" name="" class="input">
</span>
<div class="input-explain">有特殊需求请补充</div>
</div>
</div>
<div class="form-inline form-only">
<button class="btn btn-upload">登录</button>
</div>
</div>
综合了表单的个个组件。
<div class="form-horizontal">
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">用户名：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<input type="password" name="" class="input">
<span class="icon-validate-status"></span>
</span>
<div class="input-explain">请输入您的用户名</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">密码：</label>
<div class=" validate-status has-warning">
<span class="input-wrapper">
<span class="icon-validate-status"></span>
<input type="password" name="" class="input">
</span>
<div class="input-explain">密码设置过于简单</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">您的性别：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<label class="radio-wrapper">
<input type="radio" name="" >男士
</label>
<label class="radio-wrapper">
<input type="radio" name="" >女士
</label>
</span>
<div class="input-explain">请选择您的性别</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required">兴趣爱好：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<span class="icon-validate-status"></span>
<input type="text" name="" class="input" placeholder="您的兴趣爱好">
</span>
<div class="input-explain">请输入一项兴趣爱好</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required label-for-textarea">备注：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<textarea type="textarea" name="" placeholder="请输入内容"></textarea>
</span>
<div class="input-explain">请输入您的建议</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required label-for-textarea">请选择时间：</label>
<div class="inline-control">
<div class="validate-status has-error">
<div class="time-picker ">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择开始时间">
<span class="icon-time-picker"></span>
</div>
</div>
<div class="input-explain">请选择开始正确时间</div>
</div>
<span class="form-split">-</span>
<div class="validate-status has-error">
<div class="time-picker ">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择结束时间">
<span class="icon-time-picker"></span>
</div>
</div>
<div class="input-explain">请选择结束正确时间</div>
</div>
</div>
</div>
<div class="form-inline form-item-with-help clearfix">
<label class="form-item-label input-required label-for-textarea">服务条款：</label>
<div class=" validate-status has-error">
<span class="input-wrapper">
<label class="checkbox-wrapper">
<input type="checkbox" name="" >同意
</label>
</span>
<div class="input-explain">必须同意服务条款</div>
</div>
</div>
<div class="form-inline form-only">
<button class="btn btn-upload">登录</button>
<button class="btn btn-upload">登录</button>
</div>
</div>
为<buttom>标签添加按钮类 btn即可使用 cssytmodule 提供的样式。你可以使用下面的类来创建不同样式的按钮，disabled属性为"disabled"时为不可用按钮
<button class="btn">主按钮</button>
<button class="btn btn-secondary">次级按钮</button>
<button class="btn" disabled="disabled">主按钮</button>
<button class="btn btn-secondary" disabled="disabled">次级按钮</button>需要让按钮具有不同尺寸吗？使用 .btn-lg 、.btn-sm 就可以获得相应尺寸的按钮。
<button class="btn btn-lg" >大尺寸按钮</button>
<button class="btn btn-secondary btn-lg">大尺寸按钮</button>
<button class="btn btn-sm" >小尺寸按钮</button>
<button class="btn btn-secondary btn-sm">小尺寸按钮</button>
为按钮标签添加 .btn-is-loading 或者 .btn-secondary-is-loading 类来获取加载中的按钮组件，同时要添加一个类名为 loading 的 <span> 子标签。 不兼容ie9以下，若引用自行控制。
<button class="btn btn-is-loading">
<span class="loading"></span>
主按钮
</button>
<button class="btn btn-secondary btn-secondary-is-loading">
<span class="loading"></span>
次按钮
</button>通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
<button class="btn btn-block">次级按钮</button>
用 .btn-gloup 包裹按钮组，主按钮加上类名 .btn-primary ，次级按钮加 .上btn-secondary ，禁用请为 button 加上
<div class="btn-gloup">
<button class="btn btn-primary " >A</button>
<button class="btn btn-primary">B</button>
<button class="btn btn-primary">C</button>
</div>
<div class="btn-gloup">
<button class="btn btn-secondary" >A</button>
<button class="btn btn-secondary">B</button>
<button class="btn btn-secondary">C</button>
</div>
<div class="btn-gloup">
<button class="btn btn-primary" >A</button>
<button class="btn btn-secondary">D</button>
</div>
<div class="btn-gloup">
<button class="btn btn-secondary">D</button>
<button class="btn btn-primary " >A</button>
</div>
<div class="btn-gloup">
<button class="btn btn-primary" disabled>A</button>
<button class="btn btn-secondary" disabled>B</button>
</div>
为 input 添加 .input-number ，就可以得到一个默认的数字输入框
<input type="text" name="" class="input-number">通过<code>
为 input 添加 .number-control ，就可以得到一个数字输入框
<div class="number-control">
<input type="text" name="" class="input-number">
<div class="number-control-icon">
<span class="number-control-icon-item icon-formup "></span>
<span class="number-control-icon-item icon-formdown"></span>
</div>
</div>
用 .select-cascader-picker 来包裹住级联选择器
<div class="select cascader-action select-cascader-picker">
<div class="select-inner" >青岛市口腔医院</div>
<span class="icon-formup"></span>
<div class="select-dropdown">
<ul class="select-cascader-menu">
<li class="cascader-menu-item cascader-menu-item-expend">山东</li>
<li class="cascader-menu-item cascader-menu-item-expend item-action">广东</li>
<li class="cascader-menu-item cascader-menu-item-expend">浙江</li>
</ul>
<ul class="select-cascader-menu">
<li class="cascader-menu-item cascader-menu-item-expend item-action">青岛</li>
</ul>
<ul class="select-cascader-menu">
<li class="cascader-menu-item ">青岛市口腔医院</li>
<li class="cascader-menu-item item-action">青岛市胶州中心医院</li>
<li class="cascader-menu-item item-disabled">青岛海慈医院（未开通）</li>
<li class="cascader-menu-item">平度市人民医院</li>
</ul>
</div>
</div>通过 .form-item-control 包裹。
<div class="form-item-control">
<span class="input-group-addon">http://</span>
<input type="text" name="" class="input-grounp-inner">
<div class="select input-group-addon ">
<div class="select-inner" >.com</div>
<span class="icon-formup"></span>
<div class="select-dropdown">
<ul>
<li class="item-action">.com</li>
<li >.net</li>
<li >.cn</li>
<li>.org</li>
</ul>
</div>
</div>
</div>
使用 .time-picker 来获得一个时间选择器
<div class="time-picker ">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择时间">
<span class="icon-time-picker"></span>
</div>
</div>
.time-picker-disabled 可以使用禁用状态 并为input添加disabled属性。
<div class="time-picker time-picker-disabled ">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择时间" disabled>
<span class="icon-time-picker"></span>
</div>
</div>
使用.inlien-control 来包裹。
<div class="inline-control">
<div class="validate-status has-error">
<div class="time-picker ">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择开始时间">
<span class="icon-time-picker"></span>
</div>
</div>
<div class="input-explain">请选择开始正确时间</div>
</div>
<span class="form-split">-</span>
<div class="validate-status has-error">
<div class="time-picker ">
<div class="time-picker-input-wrapper">
<input type="" name="" class="time-picker-input" placeholder="请选择结束时间">
<span class="icon-time-picker"></span>
</div>
</div>
<div class="input-explain">请选择结束正确时间</div>
</div>
</div>三列栅格式的表单排列方式，常用于数据表格的高级搜索。由于输入标签长度不确定，需要根据具体情况自行调整。
<div class="advanced-filter ">
<div class="advanced-filter-button ">
高级筛选
<span class="icon-advanced-filter"></span>
</div>
<div class="advanced-filter-wrapper">
<div class="filter-inner ">
<div class="filter-inner-item">
<div class="col-4">
<div class="col-5">
<label>选择时间:</label>
</div>
<div class="col-7">
<div class="calendar-picker calendar-range-picker" >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-range-input" placeholder="开始日期">
<span>~</span>
<input type="" name="" class="calendar-picker-range-input" placeholder="结束日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="col-5">
<label>输入名称:</label>
</div>
<div class="col-7">
<input type="text" class="input">
</div>
</div>
<div class="col-4">
<div class="col-5">
<label>交易类型:</label>
</div>
<div class="col-7">
<div class="select">
<div class="select-inner" ></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="filter-inner-item">
<div class="col-4">
<div class="col-5">
<label>终端类型:</label>
</div>
<div class="col-7">
<div class="select">
<div class="select-inner" ></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="col-5">
<label>身份证号:</label>
</div>
<div class="col-7">
<input type="text" class="input">
</div>
</div>
<div class="col-4">
<div class="col-5">
<label>交易流水号:</label>
</div>
<div class="col-7">
<input type="text" class="input">
</div>
</div>
</div>
<div class="filter-btn">
<button class="btn">搜 索</button>
<button class="btn btn-secondary">清除条件</button>
</div>
</div>
</div>
</div>使用以下代码可以得到日期选择器。
<div class="calendar-picker calendar-single-picker" >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择日期">
<span class="icon-calendar-picker"></span>
</div>
</div>使用 calendar-picker-disabled 得到禁用状态的日期选择器。并为input添加disabled属性
<div class="calendar-picker calendar-picker-disabled calendar-single-picker" >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择日期" disabled>
<span class="icon-calendar-picker"></span>
</div>
</div>使用inline-control包裹住两个日期选择器
<div class="inline-control">
<div class="calendar-picker calendar-single-picker " >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择开始日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
<span class="form-split">-</span>
<div class="calendar-picker calendar-single-picker " >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择结束日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
</div><div class="inline-control">
<div class="validate-status has-error">
<div class="calendar-picker calendar-single-picker " >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择开始日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
<div class="input-explain">请选择开始正确日期</div>
</div>
<span class="form-split">-</span>
<div class="validate-status has-error">
<div class="calendar-picker calendar-single-picker " >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择结束日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
<div class="input-explain">请选择结束正确日期</div>
</div>
</div>使用calendar-range-picker得到日期范围选择器
<div class="calendar-picker calendar-range-picker" >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-range-input" placeholder="开始日期">
<span>~</span>
<input type="" name="" class="calendar-picker-range-input" placeholder="结束日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
<div class="inline-control">
<div class="validate-status has-error">
<div class="calendar-picker calendar-range-picker" >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-range-input" placeholder="开始日期">
<span>~</span>
<input type="" name="" class="calendar-picker-range-input" placeholder="结束日期">
<span class="icon-calendar-picker"></span>
</div>
</div>
<div class="input-explain">请选择开始正确日期</div>
</div>
</div>通过添加类 calendar-picker calendar-time-picker calendar-single-picker得到一个日期时间组件。
<div class="calendar-picker calendar-single-picker calendar-time-picker " >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-input" placeholder="请选择日期与时间">
<span class="icon-calendar-picker"></span>
</div>
</div>通过添加类calendar-picker calendar-time-picker calendar-range-picker得到一个日期时间组件。
<div class="calendar-picker calendar-time-picker calendar-range-picker" >
<div class="calendar-picker-input-wrapper">
<input type="" name="" class="calendar-picker-range-input" placeholder="开始日期时间">
<span>~</span>
<input type="" name="" class="calendar-picker-range-input" placeholder="结束日期时间">
<span class="icon-calendar-picker"></span>
</div>
</div>请使用为div添加 .select类的方法来创建select选择器，不禁用使用 select 来创建组件，原因是select的原生样式常规手段无法完全覆盖。以下这种方法组件与表单的交互部分需要引用者自行书写
<div class="select">
<div class="select-inner" ></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
</div>
</div>我们也为你提供了简易版本，使用以下方法引用js会为你生成一个相同name的input，这样这个下拉框能实现原生下拉框的主要功能，包括响应表单的提交。
<div class="select-easy" value="1" name="select">
<ul>
<li value="1" >一号</li>
<li value="2">二号</li>
<li value="3">三号</li>
</ul>
</div>用 .select-group 进行选项分组。
<div class="select">
<div class="select-inner" ></div>
<span class="icon-select"></span>
<div class="select-dropdown">
<div class="select-group">...</div>
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
<div class="select-group">...</div>
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
</div>
</div>请在外层包裹类 .select-search 你只需要见类 .select-inner 包裹的 div 标签替换成 input 标签就可以获得一个带有搜索功能的select选择器。
<div class="select-search">
<input type="text" name="" class="select-inner" value="">
<span class="icon-select"></span>
<div class="select-dropdown">
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
</div>
</div>请为select选择器的外层使用类 .select-search、类 .select-multi 包裹，并将类名为 .select-nner 的 input 标签包裹在一个 类名为 .select-multi-inner 的div 中 就可以来创造出一个多项的select选择器
<div class=" select-multi">
<div class="select-multi-inner" >
<input type="text" name="" class="select-inner">
</div>
<span class="icon-select"></span>
<div class="select-dropdown">
<div class="select-group">...</div>
<ul>
<li>...</li>
<li >...</li>
<li>...</li>
</ul>
</div>
</div>标签页组件，提供平级的区域将大块内容进行收纳和展现，保持界面整洁。标准线条式页签，用于容器内部的主功能切换。使用 tabsKey 属性来一一对应标签页头和主体。在 .tabs-tab-item 包裹的标签中添加你的标签页头，且为其添加 .tabs-tab-item-disabled 表示禁用状态；在 .tabs-content-item 包裹的标签中添加你的主体内容。 默认选择第一项。
<div class="tabs-wrapper">
<div class="tabs-nav-container">
<span class=""></span>
<span class=""></span>
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">选项一</div>
<div class="tabs-tab-item" tabsKey="2">选项二</div>
<div class="tabs-tab-item tabs-tab-item-disabled" tabsKey="3">选项三</div>
<div class="tabs-tab-item" tabsKey="4">选项四</div>
</div>
</div>
</div>
<div class="tabs-content">
<div class="tabs-content-item tabs-content-item-action" tabsKey="1">选项一</div>
<div class="tabs-content-item" tabsKey="2">选项二</div>
<div class="tabs-content-item" tabsKey="3">选项三</div>
<div class="tabs-content-item" tabsKey="4">选项四</div>
</div>
</div>
可以左右滑动，可以容纳更多标签。
<div class="tabs-wrapper">
<div class="tabs-nav-container tabs-nav-container-scroll">
<span class="icon-tabs-prev icon-tabs-prev-disabled"></span>
<span class="icon-tabs-next "></span>
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">选项一</div>
<div class="tabs-tab-item" tabsKey="2">选项二</div>
<div class="tabs-tab-item tabs-tab-item-disabled" tabsKey="3">选项三</div>
<div class="tabs-tab-item" tabsKey="4">选项四</div>
<div class="tabs-tab-item" tabsKey="5">选项五</div>
<div class="tabs-tab-item" tabsKey="6">选项六</div>
<div class="tabs-tab-item" tabsKey="7">选项七</div>
<div class="tabs-tab-item" tabsKey="8">选项八</div>
<div class="tabs-tab-item" tabsKey="9">选项九</div>
<div class="tabs-tab-item" tabsKey="10">选项十</div>
<div class="tabs-tab-item" tabsKey="11">选项十一</div>
<div class="tabs-tab-item" tabsKey="12">选项十二</div>
</div>
</div>
</div>
<div class="tabs-content">
<div class="tabs-content-item tabs-content-item-action" tabsKey="1">选项一</div>
<div class="tabs-content-item" tabsKey="2">选项二</div>
<div class="tabs-content-item" tabsKey="3">选项三</div>
<div class="tabs-content-item" tabsKey="4">选项四</div>
<div class="tabs-content-item" tabsKey="5">选项五</div>
<div class="tabs-content-item" tabsKey="6">选项六</div>
<div class="tabs-content-item" tabsKey="7">选项七</div>
<div class="tabs-content-item" tabsKey="8">选项八</div>
<div class="tabs-content-item" tabsKey="9">选项九</div>
<div class="tabs-content-item" tabsKey="10">选项十</div>
<div class="tabs-content-item" tabsKey="11">选项十一</div>
<div class="tabs-content-item" tabsKey="12">选项十二</div>
</div>
</div>添加类.tabs-wrapper-card来获得一个卡片式的标签页。
<div class="tabs-wrapper tabs-wrapper-card">
<div class="tabs-nav-container">
<span class=""></span>
<span class=""></span>
<div class= "tabs-nav-wrapper">
<div class="tabs-nav">
<div class="tabs-tab-item tabs-tab-item-action" tabsKey="1">选项一
<span class="pirosicon pirosicon-edit"></span>
<span class="pirosicon pirosicon-remove"></span>
</div>
<div class="tabs-tab-item" tabsKey="2">选项二</div>
<div class="tabs-tab-item tabs-tab-item-disabled" tabsKey="3">选项三</div>
<div class="tabs-tab-item" tabsKey="4">选项四</div>
</div>
</div>
</div>
<div class="tabs-content">
<div class="tabs-content-item tabs-content-item-action" tabsKey="1">
<div class="con-wrapper">
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>科室</th>
<th>医生</th>
<th>类别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
</tr>
<tr>
<td>1</td>
<td>肛肠门诊</td>
<td>董嘉俊</td>
<td>急诊</td>
</tr>
</tbody>
</table>
</div>
<div class="con-wrapper">
<div class="pagination-wrapper">
<span class="pagination-total-text">共 50 条</span>
<ul class="pagination" total="50" defaultCurrent="3">
<li class="pagination-prev"><a></a></li>
<li class="pagination-item"><a>1</a></li>
<li class="pagination-item"><a>2</a></li>
<li class="pagination-item pagination-item-action"><a>3</a></li>
<li class="pagination-item"><a>4</a></li>
<li class="pagination-item"><a>5</a></li>
<li class="pagination-next"><a></a></li>
</ul>
</div>
</div>
</div>
<div class="tabs-content-item" tabsKey="2">选项二</div>
<div class="tabs-content-item" tabsKey="3">选项三</div>
<div class="tabs-content-item" tabsKey="4">选项四</div>
</div>
</div>通过upload-wrapper upload-file来包裹上传文件组件。属性size：上传文件的大小限制；count：一次最多上传的个数；post-url：上传文件的地址。
<div class="upload-wrapper upload-file" size="5" count="5" post-url="http://daily.yuantutech.com:3000/upload">
<div class="upload">
<input type="file" name="">
<button class="btn btn-secondary ">
<span class="icon-antion-hover-upload"></span>
上传文件
</button>
</div>
<div class="explain">上传附件支持 jpg、png、txt、rar、doc、xls 格式，最大不超过 5M，每次最多上传 5 个</div>
</div>
<div class="sigle-upload upload" size="5" count="5">
<div class="upload-wrapper upload-picture-card">
<input type="file" name="">
<input type="text" name="">
<span class="icon-antion-add"></span>
<span class="upload-txt">上传照片</span>
</div>
<div class="upload-wrapper upload-picture-card upload-picture-card-after">
<a class="upload-picture-item-thumbnail" href="http://image.yuantutech.com/user/d7846bb575a7f446364306052bd2292c-503-444.jpg" target="_blank">
<img src="http://image.yuantutech.com/user/d7846bb575a7f446364306052bd2292c-503-444.jpg">
</a>
<div class="upload-picture-icon">
<span class="icon-antion-see"></span>
<span class="icon-antion-delete"></span>
</div>
</div>
</div>
通过<code>
<div class="upload-wrapper upload-drag upload" post-url="http://daily.yuantutech.com:3000/upload" size="5" count="5">
<input type="file" name="">
<span class="icon-antion-file"></span>
<span class="upload-txt">单击或拖拽上传文件</span>
</div>在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
当需要显示一个操作完成的百分比时。
你需要手动为其设置宽度。
<div class="progress progress-line">
<div class="progress-outer">
<div class="progress-inner">
<div class="progress-bg" style="width:30%;"></div>
</div>
<span class="progress-text">30%</span>
</div>
</div>
<div class="progress progress-line">
<div class="progress-outer">
<div class="progress-inner">
<div class="progress-bg" style="width:50%;"></div>
</div>
<span class="progress-text">50%</span>
</div>
</div>
<div class="progress progress-line progress-status-error">
<div class="progress-outer">
<div class="progress-inner">
<div class="progress-bg" style="width:70%;"></div>
</div>
<span class="progress-text"></span>
</div>
</div>
<div class="progress progress-line progress-status-success">
<div class="progress-outer">
<div class="progress-inner">
<div class="progress-bg" style="width:100%;"></div>
</div>
<span class="progress-text"></span>
</div>
</div>通过steps-wrapper包裹可以时步骤条居中。steps 组件的steps-item 为定宽250px，你也可以手动的调整宽度，不建议放置过多步骤，4步以上要手动调整 steps-item 的 width 提供了三种状态：等待:steps-status-wait | 进行:steps-status-process | 结束:steps-status-finish
<div class="steps-wrapper">
<div class="steps">
<div class="steps-item steps-status-finish " >
<div class="steps-tail">
</div>
<div class="steps-step">
<div class="steps-head">
<div class="steps-head-inner">
<span class="steps-icon">1</span>
</div>
</div>
<div class="steps-main">
<div class="steps-title">已受理</div>
</div>
</div>
</div>
<div class="steps-item steps-status-process" >
<div class="steps-tail">
</div>
<div class="steps-step">
<div class="steps-head">
<div class="steps-head-inner">
<span class="steps-icon">2</span>
</div>
</div>
<div class="steps-main">
<div class="steps-title">等待您反馈</div>
</div>
</div>
</div>
<div class="steps-item steps-status-wait" >
<div class="steps-tail">
</div>
<div class="steps-step">
<div class="steps-head">
<div class="steps-head-inner">
<span class="steps-icon">3</span>
</div>
</div>
<div class="steps-main">
<div class="steps-title">待确认</div>
</div>
</div>
</div>
<div class="steps-item steps-status-wait steps-item-last">
<div class="steps-tail">
</div>
<div class="steps-step">
<div class="steps-head">
<div class="steps-head-inner">
<span class="steps-icon">4</span>
</div>
</div>
<div class="steps-main">
<div class="steps-title">待评价</div>
</div>
</div>
</div>
</div>
</div>piros提供了几个操作按钮，使用fiex布局，有默认的位置，引用者可以自己调整位置。
<!-- 回到顶部 -->
<a class="buoy back-top" href="#"></a>
<!-- 电话 -->
<a class="buoy buoy-tel tooltip-wrapper" data-toggle="tooltip" data-placement="left" data-original-title="客服电话：0571-89916777">
</a>内容
内容
内容
内容
内容
内容
内容
内容