ui-p2p-lending by Abstack

栅格系统

可实现页面基本的排版布局，共分十二栏，总宽度默认为 1000 px，可在 settings.less 中进行配置。

col-1

col-2

col-10


  <div class="container presentation-grids">
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
  </div>
  <div class="container presentation-grids">
    <div class="col-2">col-2</div>
    <div class="col-10">col-10</div>
  </div>

文字样式

颜色（可在`settings.less`中进行配置）：

text-danger 危险 text-warning 警告 text-calm 冷静 text-dream 梦幻 text-cute 可爱 text-growth 生长 text-dark 黑暗

超链接：

红色链接

对齐方式：

text-left 靠左对齐

text-center 居中对齐

text-right 靠右对齐

text-indent 首行缩进两个字符

text-ellipsis CSS 3省略号：文字超出容器宽度时自动显示省略号，文字超出容器宽度时自动显示省略号，文字超出容器宽度时自动显示省略号，文字超出容器宽度时自动显示省略号


  <h3 class="component-desc text-dark">颜色（可在<code>settings.less</code>中进行配置）：</h3>
  <span class="text-danger">text-danger 危险</span>
  <span class="text-warning">text-warning 警告</span>
  <span class="text-calm">text-calm 冷静</span>
  <span class="text-dream">text-dream 梦幻</span>
  <span class="text-cute">text-cute 可爱</span>
  <span class="text-growth">text-growth 生长</span>
  <span class="text-dark">text-dark 黑暗</span>
  <h3 class="component-desc text-dark">超链接：</h3>
  <p>
    <a href="javascript:;" class="text-danger">红色链接</a>
  </p>
  <h3 class="component-desc text-dark">对齐方式：</h3>
  <p class="text-left">text-left 靠左对齐</p>
  <p class="text-center">text-center 居中对齐</p>
  <p class="text-right">text-right 靠右对齐</p>
  <p class="text-indent">text-indent 首行缩进两个字符</p>
  <p class="text-ellipsis">text-ellipsis CSS 3省略号：文字超出容器宽度时自动显示省略号，文字超出容器宽度时自动显示省略号，文字超出容器宽度时自动显示省略号，文字超出容器宽度时自动显示省略号</p>

标的组件

基本的标列表样式及布局，利用栅格系统可以对每个属性的宽度进行修改。

项目名称

预期年化收益率

15%

借款期限

12 天

项目金额

100000 元

立即投标


  <div class="container">
    <div class="col-8">
      <div class="project-list">
        <div class="project-item">
          <h3>
            <a href="javascript:;">项目名称</a>
          </h3>
          <div class="project-attr rate col-3">
            <p class="project-attr-desc">预期年化收益率</p>
            <strong class="project-attr-val">15%</strong>
          </div>
          <div class="project-attr periods col-2">
            <p class="project-attr-desc">借款期限</p>
            <strong class="project-attr-val">12 <small>天</small></strong>
          </div>
          <div class="project-attr amount col-4">
            <p class="project-attr-desc">项目金额</p>
            <strong class="project-attr-val">100000 <small>元</small></strong>
          </div>
          <div class="project-attr invest col-3">
            <a href="javascript:;" class="button button-danger">立即投标</a>
          </div>
        </div>
      </div>
    </div>
  </div>

按钮样式


  <button class="button">默认按钮</button>
  <button class="button button-danger">危险按钮</button>
  <button class="button button-warning">警告按钮</button>
  <button class="button button-calm">蓝色按钮</button>
  <button class="button button-dream">紫色按钮</button>
  <button class="button button-cute">粉色按钮</button>
  <button class="button button-growth">绿色按钮</button>
  <button class="button button-dark">黑色按钮</button>
  <p>
    <button class="button button-clear">默认无边框背景按钮</button>
    <button class="button button-danger button-clear">危险无边框背景按钮</button>
    <button class="button button-warning button-clear">警告无边框背景按钮</button>
    <button class="button button-calm button-clear">蓝色无边框背景按钮</button>
    <button class="button button-dream button-clear">紫色无边框背景按钮</button>
    <button class="button button-cute button-clear">粉色无边框背景按钮</button>
    <button class="button button-growth button-clear">绿色无边框背景按钮</button>
    <button class="button button-dark button-clear">黑色无边框背景按钮</button>
  </p>
  <p>
    <button class="button button-calm" disabled="disabled">禁用状态按钮</button>
  </p>
  <p>
    <button class="button button-block button-calm">块级按钮</button>
  </p>

表单样式

除垂直排列的表单之外，给 form 加上 form-inline 的 className，则会以行内表单样式呈现。

表单可具备三种状态：错误（红色）、警告（橙色）、成功（绿色），给 form-group 分别加上 form-group-error、form-group-warning、form-group-success 即可显示对应状态。

用户名： *用户名为必填

上次登录时间：

只读

手机验证码：

登录状态保存：

用户类型：

验证码：

记住我一星期

男女


  <div class="container">
    <div class="col-2"></div>
    <div class="col-8">
      <form>
        <div class="form-group form-group-error">
          <label for="username" class="col-3 text-right">用户名：</label>
          <input id="username" type="text" class="form-control">
          <span class="form-control-note">*用户名为必填</span>
        </div>
        <div class="form-group">
          <label for="lasttime" class="col-3 text-right">上次登录时间：</label>
          <div class="input-group">
            <input id="lasttime" type="text" class="form-control" readonly="readonly" value="123">
            <span class="input-group-addon">只读</span>
          </div>
        </div>
        <div class="form-group">
          <label for="mobile_vcode" class="col-3 text-right">手机验证码：</label>
          <div class="input-group">
            <input id="mobile_vcode" type="text" class="form-control" readonly="readonly" value="123">
            <span class="input-group-addon input-group-addon-button">
              <button class="button" type="button">发送验证码</button>
            </span>
          </div>
        </div>
        <div class="form-group">
          <label for="status-saved" class="col-3 text-right">登录状态保存：</label>
          <div class="input-group">
            <input id="status-saved" type="text" class="form-control" value="1">
            <span class="input-group-addon input-group-addon-select">
              <select class="form-control">
                <option value="1">天</option>
                <option value="2">个月</option>
              </select>
            </span>
          </div>
        </div>
        <div class="form-group">
          <label for="usertype" class="col-3 text-right">用户类型：</label>
          <select id="usertype" class="form-control">
            <option value="1">普通用户</option>
            <option value="2">管理员</option>
          </select>
        </div>
        <div class="form-group">
          <label for="vcode" class="col-3 text-right">验证码：</label>
          <input id="vcode" type="text" class="form-control form-control-small">
          <a href="javascript:;">
            <img src="https://www.baidu.com/img/bd_logo1.png" alt="验证码" class="form-vcode">
          </a>
        </div>
        <div class="form-group">
          <div class="col-3"></div>
          <label class="checkbox">
            <input type="checkbox">
            记住我一星期
          </label>
        </div>
        <div class="form-group">
          <div class="col-3"></div>
          <label class="radio">
            <input type="radio" name="sex">
            男
          </label>
          <label class="radio">
            <input type="radio" name="sex">
            女
          </label>
        </div>
        <div class="form-group">
          <div class="col-3"></div>
          <textarea class="form-control"></textarea>
        </div>
        <div class="form-group">
          <div class="col-3"></div>
          <button class="button button-calm">立即登录</button>
        </div>
      </form>
    </div>
    <div class="col-2"></div>
  </div>

信息提示样式

默认提示

危险提示

警告提示

信息提示

成功提示


  <div class="caution-box">
    默认提示
  </div>
  <div class="caution-box caution-danger">
    危险提示
  </div>
  <div class="caution-box caution-warning">
    警告提示
  </div>
  <div class="caution-box caution-info">
    信息提示
  </div>
  <div class="caution-box caution-success">
    成功提示
  </div>

表格组件

表格组件提供默认的表格样式去除了 collapse 及 spacing，并且给 th 添加了下边框。与此同时也提供了 table-bordered className 给表格加上边框、table-hover 给表格加上鼠标悬浮效果、table-striped 使 tbody 中奇数行与偶数行的背景颜色不一致。

姓名	性别	年龄
张三	男	28
小丽	女	24

姓名	性别	年龄
张三	男	28
小丽	女	24


  <table class="table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>28</td>
      </tr>
      <tr>
        <td>小丽</td>
        <td>女</td>
        <td>24</td>
      </tr>
    </tbody>
  </table>
  <table class="table table-bordered table-hover table-striped light-bg">
    <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th class="sorter desc">年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>28</td>
      </tr>
      <tr>
        <td>小丽</td>
        <td>女</td>
        <td>24</td>
      </tr>
    </tbody>
  </table>

选项卡切换样式

给 tabs-header 中的 li 标签和对应的 tabs-content 加上 active className 则会选中中该选项卡。

注：暂不支持点击切换不同的选项卡

2011 家里蹲大学

2012 车库研究院

2015 社会大学

2011 家里蹲大学

2012 车库研究院

2015 社会大学


  <div class="tabs">
    <ul class="tabs-header">
      <li class="active">
        <a href="javascript:;">工作经历</a>
      </li>
      <li>
        <a href="javascript:;">曾获荣誉</a>
      </li>
    </ul>
    <div class="tabs-content active">
      <p>2011 家里蹲大学</p>
      <p>2012 车库研究院</p>
      <p>2015 社会大学</p>
    </div>
    <div class="tabs-content">
      <p>2011 家里蹲大学</p>
      <p>2012 车库研究院</p>
      <p>2015 社会大学</p>
    </div>
  </div>

过滤器样式

时间: ~
成色: 全新; 九成新; 八成新


  <dl class="filter">
    <dt>时间</dt>
    <dd>
      <input type="date" class="form-control">
    </dd>
    <dd>~</dd>
    <dd>
      <input type="date" class="form-control">
    </dd>
    <dt>成色</dt>
    <dd class="active">
      <a href="javascript:;">全新</a>
    </dd>
    <dd>
      <a href="javascript:;">九成新</a>
    </dd>
    <dd>
      <a href="javascript:;">八成新</a>
    </dd>
  </dl>

翻页按钮样式

可以通过 text-center 和 text-right 使翻页器居中或靠右。

给其中的 a 、 span 标签添加 disabled className 可以使其显示被禁用的样式，但点击事件并不能真正的被禁用


  <div class="pagination text-center">
    <a href="javascript:;" class="disabled">上一页</a>
    <a href="javascript:;">1</a>
    <a href="javascript:;">2</a>
    <a href="javascript:;">3</a>
    ...
    <a href="javascript:;">20</a>
    <a href="javascript:;">下一页</a>
  </div>

标签组件

加上label属性便变成一个标签，自动调整大小。

加上label属性便变成一个标签，自动调整大小

New New New New New New New


  <span class="label">New</span>
  <span class="label label-danger">New</span>
  <span class="label label-warning">New</span>
  <span class="label label-calm">New</span>
  <span class="label label-cute">New</span>
  <span class="label label-growth">New</span>
  <span class="label label-dark">New</span>

徽章组件

分别为普通状态，在按钮中的状态。当不存在值时，就隐藏

2 2 2 2 2 2


  <p>
    <span class="badge badge-danger">2</span>
    <span class="badge badge-warning">2</span>
    <span class="badge badge-calm">2</span>
    <span class="badge badge-cute">2</span>
    <span class="badge badge-growth">2</span>
    <span class="badge badge-dark">2</span>
  </p>
  <button class="button button-danger">新消息<span class="badge">99</span></button>

消息提示组件

定义消息位置：给 prompt-box-queue 元素加上 top-right （右上方）、 bottom-right （右下方）、 top-center （中上方）、 bottom-center （中下方）。

定义消息样式：给 prompt-box 元素加上 prompt-info （蓝色信息框）、 prompt-danger （红色错误框）、 prompt-success （绿色成功框）。

注意：暂无 JavaScript 代码，消息框的显示与隐藏需要额外编写 JavaScript 代码。


  <div class="prompt-box-queue top-center" id="demo-prompt-queue" style="display: none;">
    <div class="prompt-box">
      <i class="prompt-icon"></i>
      <h3>系统提示</h3>
      <p>这是提示内容</p>
    </div>
    <div class="prompt-box prompt-info">
      <i class="prompt-icon"></i>
      <h3>系统提示</h3>
      <p>有一个提示框出现了</p>
    </div>
    <div class="prompt-box prompt-danger">
      <i class="prompt-icon"></i>
      <h3>系统提示</h3>
      <p>操作错误了</p>
    </div>
    <div class="prompt-box prompt-success">
      <i class="prompt-icon"></i>
      <h3>系统提示</h3>
      <p>操作成功了</p>
    </div>
    <div class="prompt-box prompt-warning">
      <i class="prompt-icon"></i>
      <h3>系统提示</h3>
      <p>操作将会影响到系统稳定</p>
    </div>
  </div>
  <button class="button button-calm" onclick="document.getElementById('demo-prompt-queue').style.display = 'block'">点击显示消息提示框</button>

对话框组件

如果需要模态背景，则给 dialog-container 加上 has-backdrop 的 className。

注意：暂无 JavaScript 代码，对话框的显示与隐藏需要额外编写 JavaScript 代码。

确认框

您确定要继续吗？


  <div class="dialog-container has-backdrop" id="demo-dialog">
    <div class="dialog-box">
      <h3>确认框</h3>
      <p>您确定要继续吗？</p>
      <div class="dialog-box-buttons">
        <button class="button">取消</button>
        <button class="button button-growth">确定</button>
      </div>
    </div>
  </div>
  <button class="button button-growth" onclick="document.getElementById('demo-dialog').className += ' active'">点击显示对话框</button>

模态框组件

注意：暂无 JavaScript 代码，对话框的显示与隐藏需要额外编写 JavaScript 代码。

请确认您的机票预定信息

乘机人	身份证号码	时间
张三	330284759238420192	2015-12-06
李四	330284759238420192	2015-12-06
王麻子	330284759238420192	2015-12-06
二子	330284759238420192	2015-12-06


  <div class="modal-container" id="demo-modal">
    <div class="modal-box">
      <h3>
        请确认您的机票预定信息
        <button class="button modal-close-button"></button>
      </h3>
      <div class="modal-content">
        <table class="table table-bordered table-hover table-striped light-bg">
          <thead>
            <tr>
              <th>乘机人</th>
              <th>身份证号码</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>张三</td>
              <td>330284759238420192</td>
              <td>2015-12-06</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>330284759238420192</td>
              <td>2015-12-06</td>
            </tr>
            <tr>
              <td>王麻子</td>
              <td>330284759238420192</td>
              <td>2015-12-06</td>
            </tr>
            <tr>
              <td>二子</td>
              <td>330284759238420192</td>
              <td>2015-12-06</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-box-buttons">
        <button class="button">返回修改</button>
        <button class="button button-danger">确认无误</button>
      </div>
    </div>
  </div>
  <button class="button button-dream" onclick="document.getElementById('demo-modal').className += ' active'">点击显示模态框</button>

ui-p2p-lending

为开发 P2P 平台准备的基本样式框架

栅格系统

文字样式

颜色（可在settings.less中进行配置）：

超链接：

对齐方式：

标的组件

项目名称

按钮样式

表单样式

信息提示样式

表格组件

选项卡切换样式

过滤器样式

翻页按钮样式

标签组件

徽章组件

消息提示组件

系统提示

系统提示

系统提示

系统提示

系统提示

对话框组件

确认框

模态框组件

请确认您的机票预定信息

颜色（可在`settings.less`中进行配置）：