评鉴通 UI （PUI）

布局

1.1 栅格系统

<div class="row">
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
    <div class="col-xs-1">1</div>
</div>
<div class="row">
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
    <div class="col-xs-3">3</div>
</div>
<div class="row">
    <div class="col-xs-4">4</div>
    <div class="col-xs-4">4</div>
    <div class="col-xs-4">4</div>
</div>
<div class="row">
    <div class="col-xs-6">6</div>
    <div class="col-xs-6">6</div>
</div>
<div class="row">
    <div class="col-xs-12">12</div>
</div>

1.2 面包屑

<div class="page-crumb">
    <p>
        <b>当前位置：</b>
        <a href="">首页</a>
        <em>></em>
        <a href="">项目列表</a>
        <em>></em>
        <span class="t-blue">分组管理</span>
    </p>
</div>

1.3 普通导航栏     纯展示，无交互

<div class="page-tab line">   <!-- 三种样式： line、box、radio -->
    <div class="tab-header radio-group fs clearfix">
        <div class="thone radione checked isrender">   <!-- checked 状态 -->
            <i class="radicon ant"></i>
            <span>分组管理</span>
        </div>
        <div class="thone radione isrender">
            <i class="radicon ant"></i>
            <span>管理员列表</span>
        </div>
        <div class="thone radione isrender">
            <i class="radicon ant"></i>
            <span>角色管理</span>
        </div>
    </div>
</div>

1.4 标签

• 系统管理员
• 都城快餐
• 家乐园
• 鱼头王
• 桂林米粉

1.5 黄底橙字

                <div class="page-notice full ffs">
                    <p class="c-brown title">温馨提示：</p>
                    <ul class="c-brown">
                        <li>
                            <p>TCP建模： 中国成为撒气的对象。有媒体称，这是中国希望维护算盘。</p>
                        </li>
                        <li>
                            <p>全新建模：印度将继续向中国表明，两国相互适应彼此关切和优先选项是推动双边表明。</p>
                        </li>
                    </ul>
                </div>
            

1.5 步骤图

                <div class="page-step fm">
                    <ul>
                        <li class="cur"><a href="javascript:void(0);" class="ant"><span>1 产品信息</span></a></li>
                        <li class="cur"><a href="javascript:void(0);" class="ant"><span>2 选择模型</span></a></li>
                        <li class="cur"><a href="javascript:void(0);" class="ant"><span>3 模型结构</span></a></li>
                        <li class="cur"><a href="javascript:void(0);" class="ant"><span>4 评估问卷</span></a></li>
                        <li class="cur"><a href="javascript:void(0);" class="ant"><span>5 评估关系</span></a></li>
                        <li><a href="javascript:void(0);" class="ant"><span>6 指标权重</span></a></li>
                        <li><a href="javascript:void(0);" class="ant"><span>7 完成</span></a></li>
                    </ul>
                </div>