aid-elements-cmcc
Version:
AI Design Elements
1,024 lines (1,009 loc) • 127 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="../dist-mobile/css/aid-mobile.min.css">
<link rel="stylesheet" href="../doc/docs.min.css">
<script type="text/javascript" src="js/responsive.js"></script>
<style>
body {
padding: 1.28rem .24rem 1rem .24rem;
background-color: rgba(0, 0, 0, .1);
}
.demoName {
font-size: .32rem;
color: #404040;
text-align: left;
line-height: .6rem;
margin-top: .6rem;
font-weight: bolder;
}
.demoTitle {
color: #000;
font-size: .32rem;
margin-top: .1rem;
position: relative;
line-height: .6rem;
}
.demo-contanier .btn,
.demo-contanier .segment {
margin-bottom: .1rem;
}
.doc-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.progress {
margin-bottom: .2rem;
}
.yuan {
position: relative;
width:2rem;
height:2rem;
background-color: red;
border-radius: 50%;
}
.yuan2 {
position: absolute;
top:50%;
left:0;
width:100%;
height:50%;
transform: scaleY(2.5);
border-radius:0 0 1rem 1rem;
background-color: blue;
}
</style>
</head>
<body>
<section class="demo-contanier">
<nav class="nav-bar doc-nav-bar">
<div class="nav-bar__left" onclick="document.getElementById('menu').style.display='block'">
<span class="nav-bar__left-icon"><i class="aid aid-menu"></i></span>
</div>
<div class="nav-bar__title">
导航栏
</div>
<div class="nav-bar__right">
<span class="nav-bar__right-icon"><i class="aid aid-magnify"></i></span>
</div>
</nav>
<div id="button">
<div class="demoName">
Button <span class="ch">按钮</span>
</div>
<div>
<div class="demoTitle">颜色</div>
<button class="btn"><span>default</span></button>
<button class="btn btn--primary"><span>primary</span></button>
<button class="btn btn--success"><span>success</span></button>
<button class="btn btn--warning"><span>warning</span></button>
<button class="btn btn--danger"><span>danger</span></button>
<button class="btn btn--assist"><span>assist</span></button>
<div class="demoTitle">类型</div>
<button class="btn btn--block"><span>block</span></button>
<p>
<button class="btn btn--ghost">ghost</span></button>
<button class="btn btn--ghost btn--primary"><span>ghost primary</span></button>
<button class="btn btn--ghost btn--success"><span>ghost success</span></button>
<button class="btn btn--ghost btn--warning"><span>ghost warning</span></button>
<button class="btn btn--ghost btn--danger"><span>ghost danger</span></button>
<button class="btn btn--ghost btn--assist"><span>ghost assist</span></button>
<button class="btn btn--ghost btn--white"><span>ghost white</span></button>
</p>
<p>
<button class="btn btn--icon btn--white">
<i class="aid aid-home"></i>
<span>with icon</span>
</button>
</p>
<div class="demoTitle">状态</div>
<button class="btn btn--primary" disabled><span>primary disabled</span></button>
<button class="btn btn--primary btn--active"><span>primary tap</span></button>
<div class="demoTitle">大小</div>
<button class="btn btn--primary btn--sm"><span>primary</span></button>
<button class="btn btn--primary btn--ghost btn--sm"><span>ghost primary</span></button>
<button class="btn btn--primary btn--icon btn--sm"><span><i class="aid aid-home"></i>primary with icon</span>
</button>
<div class="demoTitle">大小</div>
<button class="btn">
<span class="loading-spanner loading-spanner--sm">
<i></i>
</span>
<span>正在加载</span>
</button>
</div>
</div>
<div id="segment">
<div class="demoName">
segment <span class="ch">分段</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<ul class="segment">
<li class="segment__item segment__item--selected">分段一</li>
<li class="segment__item">分段二</li>
</ul>
<ul class="segment">
<li class="segment__item segment__item--selected">分段一</li>
<li class="segment__item">分段二</li>
<li class="segment__item">分段三</li>
</ul>
<div class="demoTitle">自定义宽度</div>
<ul class="segment" style="width:80%">
<li class="segment__item segment__item--selected">年</li>
<li class="segment__item">月</li>
<li class="segment__item">日</li>
</ul>
</div>
</div>
<div id="tab">
<div class="demoName">
tab <span class="ch">页签</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<div class="tabs">
<div class="tabs__bar">
<div class="tabs__bar-line"
style="display: block; transform: translate3d(30px, 0px, 0px); width: 48px;"></div>
<div class="tabs__tab tabs__tab--active"><span>页签一</span></div>
<div class="tabs__tab"><span>页签二</span></div>
<div class="tabs__tab"><span>页签三</span></div>
</div>
<div class="tabs__content tabs__content--no-animated">
<div class="tabs__tab-panel tabs__tab-panel--active">
<div style="display: flex; align-items: center; justify-content: center; height: 2rem; background-color: rgb(255, 255, 255);">
页签内容一
</div>
</div>
<div class="tabs__tab-panel">
页签内容二
</div>
<div class="tabs__tab-panel">
页签内容三
</div>
</div>
</div>
<div class="demoTitle">动画</div>
<div class="tabs">
<div class="tabs__bar">
<div class="tabs__bar-line tabs__bar-line--animated"
style="display: block; transform: translate3d(30px, 0px, 0px); width: 48px;"></div>
<div class="tabs__tab tabs__tab--active"><span>页签一</span></div>
<div class="tabs__tab"><span>页签二</span></div>
<div class="tabs__tab"><span>页签三</span></div>
</div>
<div class="tabs__content tabs__content--animated">
<div class="tabs__tab-panel tabs__tab-panel--active">
<div style="display: flex; align-items: center; justify-content: center; height: 2rem; background-color: rgb(255, 255, 255);">
页签内容一
</div>
</div>
<div class="tabs__tab-panel">
页签内容二
</div>
<div class="tabs__tab-panel">
页签内容三
</div>
</div>
</div>
<div class="demoTitle">超出屏幕宽度（5个）</div>
<div class="tabs">
<div class="tabs__bar">
<div class="tabs-nav-container tabs-nav-swipe-container tabs-prevpage tabs-nextpage">
<div class="tabs-nav-wrap">
<div class="tabs-nav-swipe">
<div class="tabs-nav">
<div class="tabs__bar-line"
style="display: block; transform: translate3d(10px, 0px, 0px); width: 48px;"></div>
<div class="tabs__tab tabs__tab--active"><span>页签一</span></div>
<div class="tabs__tab"><span>页签二</span></div>
<div class="tabs__tab"><span>页签三</span></div>
<div class="tabs__tab"><span>页签四</span></div>
<div class="tabs__tab"><span>页签五</span></div>
<div class="tabs__tab"><span>页签六</span></div>
<div class="tabs__tab"><span>页签七</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs__content tabs__content--no-animated">
<div class="tabs__tab-panel tabs__tab-panel--active">
<div style="display: flex; align-items: center; justify-content: center; height: 2rem; background-color: rgb(255, 255, 255);">
页签内容一
</div>
</div>
<div class="tabs__tab-panel">
页签内容二
</div>
<div class="tabs__tab-panel">
页签内容三
</div>
</div>
</div>
</div>
</div>
<div id="navBar">
<div class="demoName">
navBar <span class="ch">导航栏</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<nav class="nav-bar">
<div class="nav-bar__left">
<span class="nav-bar__left-icon"><i class="aid aid-chevron-left"></i></span>
</div>
<div class="nav-bar__title">
导航栏
</div>
<div class="nav-bar__right">
<span class="nav-bar__right-icon"><i class="aid aid-magnify"></i></span>
</div>
</nav>
<div class="demoTitle">主色背景</div>
<nav class="nav-bar nav-bar--primary">
<div class="nav-bar__left">
<span class="nav-bar__left-icon"><i class="aid aid-chevron-left"></i></span>
</div>
<div class="nav-bar__title">
导航栏
</div>
<div class="nav-bar__right">
<span class="nav-bar__right-icon"><i class="aid aid-magnify"></i></span>
</div>
</nav>
<div class="demoTitle">文本</div>
<nav class="nav-bar">
<div class="nav-bar__left">
<span class="nav-bar__left-content">取消</span>
</div>
<div class="nav-bar__title">
导航栏
</div>
<div class="nav-bar__right">
<span class="nav-bar__left-content">完成</span>
</div>
</nav>
<div class="demoTitle">文本+图标</div>
<nav class="nav-bar">
<div class="nav-bar__left">
<span class="nav-bar__left-icon"><i class="aid aid-chevron-left"></i></span>
<span class="nav-bar__left-content">返回</span>
</div>
<div class="nav-bar__title">
导航栏
</div>
<div class="nav-bar__right">
<span class="nav-bar__right-icon"><i class="aid aid-magnify"></i></span>
</div>
</nav>
</div>
</div>
<div id="searchBar">
<div class="demoName">
searchBar <span class="ch">搜索栏</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<div class="search-bar">
<div class="search-bar__input">
<div class="search-bar__synthetic-ph">
<span class="search-bar__synthetic-ph-icon"></span>
<span class="search-bar__synthetic-ph-placeholder">搜索</span>
</div>
<input type="search" value="" placeholder="搜索">
<span class="search-bar__clear"></span>
</div>
<div class="search-bar__cancel">取消</div>
</div>
<div class="demoTitle">获取到光标</div>
<div class="search-bar search-bar--start">
<div class="search-bar__input">
<div class="search-bar__synthetic-ph">
<span class="search-bar__synthetic-ph-icon"></span>
<span class="search-bar__synthetic-ph-placeholder">获取到光标</span>
</div>
<input type="search" value="" placeholder="获取到光标">
<span class="search-bar__clear"></span>
</div>
<div class="search-bar__cancel search-bar__cancel--anim search-bar__cancel--show">取消</div>
</div>
<div class="demoTitle">输入状态</div>
<div class="search-bar search-bar--start">
<div class="search-bar__input">
<div class="search-bar__synthetic-ph">
<span class="search-bar__synthetic-ph-icon"></span>
<span class="search-bar__synthetic-ph-placeholder">输入中</span>
</div>
<input type="search" value="" placeholder="输入中">
<span class="search-bar__clear search-bar__clear--show"></span>
</div>
<div class="search-bar__cancel search-bar__cancel--anim search-bar__cancel--show">取消</div>
</div>
</div>
</div>
<div id="input">
<div class="demoName">
input <span class="ch">输入框</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<div class="input-control">
<input type="text" placeholder="请输入">
</div>
<div class="demoTitle">带清除</div>
<div class="input-control input-control--clear">
<input type="text" placeholder="请输入">
<span class="input-control__clear"></span>
</div>
<div class="demoTitle">获取焦点</div>
<div class="input-control input-control--focus">
<input type="text" placeholder="请输入">
</div>
<div class="demoTitle">右对齐</div>
<div class="input-control input-control--text-right">
<input type="text" placeholder="请输入">
</div>
<div class="demoTitle">禁用</div>
<div class="input-control input-control--text-right input-control--disabled">
<input type="text" placeholder="请输入">
</div>
<div class="demoTitle">在列表内</div>
<div class="list">
<div class="list__header">基本资料，单行与左对齐</div>
<div class="list__body">
<div class="list__item input-item">
<div class="input-item__content col-12">
<div class="input-control input-control--text-right">
<input type="text" placeholder="请输入姓名">
</div>
</div>
</div>
<div class="list__item input-item">
<label class="input-item__label col-3">普通键盘</label>
<div class="input-item__content col">
<div class="input-control input-control--clear">
<input type="text" placeholder="文字在这里">
<span class="input-control__clear"></span>
</div>
</div>
</div>
<div class="list__item input-item">
<label class="input-item__label col-3">数字键盘</label>
<div class="input-item__content col">
<div class="input-control">
<input type="number" placeholder="123">
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="list__header">支付信息右对齐</div>
<div class="list__body">
<div class="list__item input-item">
<label class="input-item__label col-3">银行卡</label>
<div class="input-item__content input-control--text-right col">
<div class="input-control">
<input type="number" placeholder="银行卡号">
</div>
</div>
</div>
<div class="list__item input-item">
<label class="input-item__label col-3">密码</label>
<div class="input-item__content input-control--text-right col">
<div class="input-control">
<input type="password" placeholder="银行卡密码">
</div>
</div>
</div>
<div class="list__item input-item">
<label class="input-item__label col-3">手机号码</label>
<div class="input-item__content input-control--text-right col">
<div class="input-control">
<input type="number" placeholder="手机号码">
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="list__header">标题可自定为icon，图片或文字</div>
<div class="list__body">
<div class="list__item input-item">
<label class="input-item__label col-3">
<i class="aid aid-home"></i> 年龄
</label>
<div class="input-item__content col">
<div class="input-control input-control--text-right">
<input type="text" placeholder="填写用户名">
</div>
</div>
</div>
</div>
</div>
<div class="list">
<div class="list__header">支付订单</div>
<div class="list__body">
<div class="list__item input-item">
<label class="input-item__label col-3">
数量
</label>
<div class="input-item__content col">
<div class="input-control input-control--text-right">
<input type="text" placeholder="1">
</div>
</div>
<div class="list__extra">
￥
</div>
</div>
<div class="list__item input-item">
<label class="input-item__label col-3">
价格
</label>
<div class="input-item__content col">
<div class="input-control input-control--text-right">
<input type="text" placeholder="0.00">
</div>
</div>
<div class="list__extra">
元
</div>
</div>
</div>
</div>
<div class="list">
<div class="list__header">多行输入</div>
<div class="list__body">
<div class="list__item input-item list__item--top">
<label class="input-item__label col-4">
高度自适应
</label>
<div class="input-item__content col">
<div class="input-control">
<textarea rows="5" placeholder="高度自适应"></textarea>
</div>
</div>
</div>
<div class="list__item input-item">
<div class="input-control">
<textarea rows="5" placeholder="高度自适应"></textarea>
</div>
</div>
<div class="list__item input-item">
<div class="input-control">
<textarea rows="5" placeholder="计数功能"></textarea>
</div>
<span class="textarea-count">
<span>13</span>/100
</span>
</div>
</div>
</div>
</div>
</div>
<div id="radio-checkbox">
<div class="demoName">
radio-checkbox <span class="ch">单复选</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<label for="" class="radio">
<input type="radio" class="radio__input">
<span class="radio__inner">
单选
</span>
</label>
<label for="" class="checkbox">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__inner">
复选
</span>
</label>
<div class="demoTitle">禁用</div>
<label for="" class="radio" disabled>
<input type="radio" class="radio__input">
<span class="radio__inner">
单选
</span>
</label>
<label for="" class="checkbox" disabled>
<input type="checkbox" class="checkbox__input">
<span class="checkbox__inner">
复选
</span>
</label>
<div class="demoTitle">列表模式</div>
<div class="list">
<div class="list__header">列表标题</div>
<div class="list__body">
<div class="list__item list__item--radio">
<label for="" class="checkbox">
<input type="checkbox" class="checkbox__input" checked="checked">
<span class="checkbox__inner">
</span>
</label>
<div class="list__line">
<div class="list__content">
标题
</div>
<div class="list__extra">内容文字</div>
</div>
</div>
<div class="list__item list__item--radio list__item--top">
<label for="" class="checkbox">
<input type="checkbox" class="checkbox__input" checked="checked">
<span class="checkbox__inner">
</span>
</label>
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<div class="list__extra">内容文字</div>
</div>
</div>
<div class="list__item list__item--radio list__item--bottom list__item--disabled">
<label for="" class="checkbox">
<input type="checkbox" class="checkbox__input" checked="checked">
<span class="checkbox__inner">
</span>
</label>
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<div class="list__extra">内容文字</div>
</div>
</div>
<div class="list__item list__item--radio list__item--bottom">
<label for="" class="checkbox">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__inner">
</span>
</label>
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<div class="list__extra">内容文字</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="switch">
<div class="demoName">
switch <span class="ch">开关</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<label class="switch">
<input type="checkbox">
<div class="switch__inner"></div>
</label>
<div class="demoTitle">列表模式</div>
<div class="list">
<div class="list__header">列表标题</div>
<div class="list__body">
<div class="list__item">
<div class="list__line">
<div class="list__content">
标题
</div>
<div class="list__extra">
<label class="switch">
<input type="checkbox">
<div class="switch__inner"></div>
</label>
</div>
</div>
</div>
<div class="list__item list__item--top">
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<div class="list__extra">
<label class="switch">
<input type="checkbox">
<div class="switch__inner"></div>
</label>
</div>
</div>
</div>
<div class="list__item list__item--bottom list__item--disabled">
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<div class="list__extra">
<label class="switch">
<input type="checkbox">
<div class="switch__inner"></div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="list">
<div class="demoName">
list <span class="ch">列表</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<div class="list">
<div class="list__header">列表标题</div>
<div class="list__body">
<div class="list__item">
<div class="list__line">
<div class="list__content">
标题
</div>
<div class="list__extra">内容文字</div>
</div>
</div>
</div>
</div>
<div class="demoTitle">副标题</div>
<div class="list">
<div class="list__header">列表标题</div>
<div class="list__body">
<div class="list__item">
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是副标题我的文字长度可以完全显示且会发生宽度变化
</div>
</div>
<div class="list__extra">内容文字</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
<div class="list__item list__item--mask">
<div class="list__line">
<div class="list__content">
固定宽度 The Best Photo Printer
<div class="list__brief">
这是文字长度具有白色渐变遮罩
</div>
</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="demoTitle">带图标</div>
<div class="list">
<div class="list__header">列表标题</div>
<div class="list__body">
<div class="list__item">
<div class="list__line">
<div class="list__thumb" style="background-color: #0F76FD">
<span>
A
</span>
</div>
<div class="list__content">
列表标题
</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
<div class="list__item">
<div class="list__line">
<div class="list__thumb list__thumb--circle" style="background-color: #0F76FD">
<span>
A
</span>
</div>
<div class="list__content">
列表标题
<div class="list__brief">
我是说明我是说明我是说明我是说明我是说明我是说明我是说明
</div>
</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
<div class="demoTitle">右侧内容垂直对齐方式</div>
<div class="list">
<div class="list__header">列表标题</div>
<div class="list__body">
<div class="list__item list__item--top">
<div class="list__line">
<div class="list__content">
标题
<div class="list__brief">
我是副标题我的文字长度可以完全显示且会发生宽度变化
</div>
</div>
<div class="list__extra">内容文字</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
<div class="list__item list__item--mask list__item--bottom">
<div class="list__line">
<div class="list__content">
固定宽度 The Best Photo Printer
<div class="list__brief">
这是文字长度具有白色渐变遮罩
</div>
</div>
<div class="list__extra">
10:30
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="picker" style="display: none">
<div class="demoName">
picker <span class="ch">选择器</span>
</div>
<div class="picker-wrap">
<div class="picker-mask"></div>
<div class="picker">
<div class="picker-header">
<div class="picker-header__item">取消</div>
<div class="picker-header__title">选择地址</div>
<div class="picker-header__item picker-header__item--right">确定</div>
</div>
<div class="picker-body">
<div class="picker-col">
<div class="picker-col__mask"></div>
<div class="picker-col__indicator"></div>
<div class="picker-col__content" style="top:-120px">
<div class="picker-col__item picker-col__item--pre-two">安徽省</div>
<div class="picker-col__item picker-col__item--pre-one">澳门特别行政区</div>
<div class="picker-col__item picker-col__item--selected">湖南</div>
<div class="picker-col__item">北京</div>
<div class="picker-col__item">浙江</div>
</div>
</div>
<div class="picker-col">
<div class="picker-col__mask"></div>
<div class="picker-col__indicator"></div>
<div class="picker-col__content" style="top:-120px">
<div class="picker-col__item picker-col__item--pre-two">长沙市</div>
<div class="picker-col__item picker-col__item--pre-one">株洲市</div>
<div class="picker-col__item picker-col__item--selected">郴州市</div>
<div class="picker-col__item">衡阳市</div>
<div class="picker-col__item">岳阳市</div>
<div class="picker-col__item">永州市</div>
</div>
</div>
<div class="picker-col">
<div class="picker-col__mask"></div>
<div class="picker-col__indicator"></div>
<div class="picker-col__content" style="top:-120px">
<div class="picker-col__item picker-col__item--pre-two">县城</div>
<div class="picker-col__item picker-col__item--pre-one">县城</div>
<div class="picker-col__item picker-col__item--selected">县城</div>
<div class="picker-col__item">县城</div>
<div class="picker-col__item">县城</div>
<div class="picker-col__item">县城</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="picker-date" style="display: none">
<div class="demoName">
picker <span class="ch">选择器</span>
</div>
<div class="picker-wrap">
<div class="picker-mask"></div>
<div class="picker">
<div class="picker-header">
<div class="picker-header__item">取消</div>
<div class="picker-header__title">选择日期</div>
<div class="picker-header__item picker-header__item--right">确定</div>
</div>
<div class="picker-body">
<div class="picker-col">
<div class="picker-col__mask"></div>
<div class="picker-col__indicator">年</div>
<div class="picker-col__content" style="top:-180px">
<div class="picker-col__item">2014</div>
<div class="picker-col__item picker-col__item--pre-two">2014</div>
<div class="picker-col__item picker-col__item--pre-one">2015</div>
<div class="picker-col__item picker-col__item--selected">2016</div>
<div class="picker-col__item">2017</div>
<div class="picker-col__item">2018</div>
</div>
</div>
<div class="picker-col">
<div class="picker-col__mask"></div>
<div class="picker-col__indicator">月</div>
<div class="picker-col__content" style="top:-120px">
<div class="picker-col__item picker-col__item--pre-two">02</div>
<div class="picker-col__item picker-col__item--pre-one">03</div>
<div class="picker-col__item picker-col__item--selected">04</div>
<div class="picker-col__item">05</div>
<div class="picker-col__item">06</div>
<div class="picker-col__item">07</div>
</div>
</div>
<div class="picker-col">
<div class="picker-col__mask"></div>
<div class="picker-col__indicator">日</div>
<div class="picker-col__content" style="top:-120px">
<div class="picker-col__item picker-col__item--pre-two">01</div>
<div class="picker-col__item picker-col__item--pre-one">02</div>
<div class="picker-col__item picker-col__item--selected">03</div>
<div class="picker-col__item">04</div>
<div class="picker-col__item">05</div>
<div class="picker-col__item">06</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="form">
<div class="demoName">
form <span class="ch">表单</span>
</div>
<div>
<div class="demoTitle">校验</div>
<form>
<div class="input-item input-item--top">
<label class="input-item__label">姓名</label>
<div class="input-item__content">
<div class="input-control">
<input type="text" placeholder="请输入姓名">
</div>
</div>
</div>
<div class="input-item input-item--top has-success">
<label class="input-item__label">姓名</label>
<div class="input-item__content">
<div class="input-control">
<input type="text" placeholder="请输入姓名">
</div>
</div>
</div>
<div class="input-item input-item--top has-warning">
<label class="input-item__label">生日</label>
<div class="input-item__content">
<div class="input-control">
<input type="number" placeholder="请输入生日">
</div>
</div>
</div>
<div class="input-item input-item--top has-danger">
<label class="input-item__label">年龄</label>
<div class="input-item__content">
<div class="input-control">
<input type="number" placeholder="请输入年龄">
</div>
</div>
</div>
</form>
<div class="list">
<div class="list__header">列表表单</div>
<div class="list__body">
<div class="list__item input-item has-danger">
<label class="input-item__label col-3">
数量
</label>
<div class="input-item__content col">
<div class="input-control input-control--text-right">
<input type="text" placeholder="数量">
</div>
</div>
<div class="list__extra">
￥
</div>
</div>
<div class="list__item">
<div class="list__line">
<div class="list__content">
标题
</div>
<div class="list__extra">
<label class="switch">
<input type="checkbox">
<div class="switch__inner"></div>
</label>
</div>
</div>
</div>
<div class="list__item" id="address-select-trigger">
<div class="list__line">
<div class="list__content">选择地区</div>
<div class="list__extra">湖南省,郴州市,县城</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
<div class="list__item" id="date-select-trigger">
<div class="list__line">
<div class="list__content">日期</div>
<div class="list__extra">2015-09-09</div>
<div class="list__arrow">
<i class="aid aid-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="alert">
<div class="demoName">
alert <span class="ch">通知</span>
</div>
<div>
<div class="demoTitle">基本用法</div>
<div class="alert">
<div class="alert__content">默认提示信息</div>
</div>
<div class="demoTitle">带情景图标</div>
<div class="alert alert--success">
<i class="alert__icon aid aid-check-circle"></i>
<div class="alert__content">success提示信息</div>
</div>
<div class="alert alert--warning">
<i class="alert__icon aid aid-alert-circle"></i>
<div class="alert__content">warning提示信息</div>
</div>
<div class="alert alert--danger">
<i class="alert__icon aid aid-close-circle"></i>
<div class="alert__content">danger提示信息</div>
</div>
<div class="alert alert--info">
<i class="alert__icon aid aid-help-circle"></i>
<div class="alert__content">info提示信息</div>
</div>
<div class="demoTitle">带操作</div>
<div class="alert alert--success">
<i class="alert__icon aid aid-check-circle"></i>
<div class="alert__content">操作为文本</div>
<span class="alert__operation">