xiaogang

ColorUI 源代码

app.js

@@ -0,0 +1,51 @@
+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  },
+  showModal: function (e) {
+    var showName = e.currentTarget.dataset.modal;
+    console.log(e)
+    this.setData({
+      modalName: showName
+    })
+  },
+  closeModal: function (e) {
+    this.setData({
+      modalName: 0
+    })
+  }
+})

app.json

@@ -0,0 +1,34 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/layout/layout",
+    "pages/button/button",
+    "pages/button/sub",
+    "pages/border/border",
+    "pages/badge/badge",
+    "pages/bar/bar",
+    "pages/label/label",
+    "pages/text/text",
+    "pages/icon/icon",
+    "pages/loading/loading",
+    "pages/image/image",
+    "pages/form/form",
+    "pages/nav/nav",
+    "pages/item/item",
+    "pages/list/list",
+    "pages/side/side",
+    "pages/comment/comment",
+    "pages/timeline/timeline",
+    "pages/slider/slider",
+    "pages/rating/rating",
+    "pages/modal/modal",
+    "pages/progress/progress",
+    "pages/chat/chat"
+  ],
+  "window": {
+    "backgroundTextStyle": "black",
+    "navigationBarBackgroundColor": "#39b54a",
+    "navigationBarTitleText": "Color UI",
+    "navigationBarTextStyle": "light"
+  }
+}

app.wxss

@@ -0,0 +1,170 @@
+@import "icon.wxss";
+@import "colorui.wxss";
+
+page {
+  counter-reset: header;
+}
+
+.indexImage {
+  width: 100%;
+}
+
+.screen {
+  display: flex;
+  align-items: center;
+  height: 100vh;
+  text-align: center;
+  justify-content: center;
+  font-size: 80rpx;
+}
+
+.desc text {
+  text-align: center;
+  color: #999;
+  display: block;
+  margin-bottom: 60rpx;
+}
+
+.nav-list {
+  display: flex;
+  color: #666;
+  align-items: center;
+  padding: 30rpx;
+  margin: 30rpx 30rpx 0;
+  background: #fff;
+  border-radius: 6rpx;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.nav-list.cur {
+  color: #fff;
+  background: rgb(94, 185, 94);
+  box-shadow: 2px 2px 3px rgba(94, 185, 94, 0.4);
+}
+
+.nav-list .iconfont {
+  flex: 1;
+  text-align: right;
+}
+
+.nav-title {
+  margin-right: 20rpx;
+}
+
+.nav-name {
+  color: #aaa;
+  font-size: 24rpx;
+  text-transform: Capitalize;
+}
+
+.doc-top {
+  padding: 30rpx;
+  background: #39b54a;
+  position: relative;
+}
+
+.doc-top::after {
+  content: "";
+  position: absolute;
+  top: 30rpx;
+  border-radius: 6rpx;
+  display: block;
+  width: 50rpx;
+  height: 5rpx;
+  background: #fff;
+  box-shadow: 5rpx 7rpx 7rpx rgba(0, 0, 0, 0.15);
+}
+
+.doc-top-title {
+  margin-top: 30rpx;
+  font-size: 48rpx;
+  font-weight: 900;
+  color: #fff;
+  text-shadow: 10rpx 15rpx 15rpx rgba(0, 0, 0, 0.15);
+}
+
+.doc-top-name {
+  margin-top: 20rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #fff;
+  text-transform: Capitalize;
+  text-shadow: 5rpx 7rpx 7rpx rgba(0, 0, 0, 0.15);
+}
+
+.doc-main {
+  background: #fff;
+  padding: 20rpx;
+  line-height: 52rpx;
+}
+
+.doc-main-title {
+  counter-increment: header;
+  line-height: 80rpx;
+  font-weight: 600;
+  font-size: 36rpx;
+}
+
+.doc-main-title::before {
+  content: counter(header) ". ";
+  color: #888;
+  font-weight: 400;
+}
+
+.doc-main-content {
+  margin-bottom: 20rpx;
+  line-height: 1.6;
+}
+
+.doc-example {
+  padding: 0 30rpx 30rpx;
+  position: relative;
+  margin-bottom: 30rpx;
+}
+
+.doc-example + .doc-example, .doc-example + .doc-main-content {
+  margin-top: 20rpx;
+}
+
+.doc-example::before {
+  content: 'Demo';
+  display: block;
+  color: #bbb;
+  text-transform: uppercase;
+  margin: 0 -30rpx 30rpx;
+  padding: 4px 10px;
+  font-size: 24rpx;
+  background: #f5f5f5;
+}
+
+.doc-example::after {
+  content: " ";
+  width: 200%;
+  height: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  border-radius: 10rpx;
+}
+
+.doc-box {
+  background: #f5f5f5;
+  border-radius: 10rpx;
+}
+
+.doc-box-sub {
+  background: #ddd;
+  line-height: 60rpx;
+  border-radius: 10rpx;
+}
+
+.big-sub {
+  line-height: 160rpx;
+  padding: 50rpx;
+}

pages/badge/badge.js

@@ -0,0 +1,5 @@
+// pages/element/badge/badge.js
+Page({
+  data: {  
+  },
+})

pages/badge/badge.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "徽章/Badge"
+}

pages/badge/badge.wxml

@@ -0,0 +1,89 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>形状</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="flex align-center">
+    <view class='badge gray'>默认</view>
+    <view class='badge gray round ml-sm'>椭圆</view>
+    <view class='badge gray radius ml-sm'>圆角</view>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>尺寸</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="flex align-center">
+    <view class='badge gray sm mr-sm'>小尺寸</view>
+    <view class='badge gray'>默认</view>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>颜色</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="flex justify-between align-center">
+    <view class='badge gray'>暗灰</view>
+    <text class='badge primary round'>蔚蓝</text>
+    <text class='badge secondary radius'>天青</text>
+    <view class='badge success '>森绿</view>
+    <text class='badge warning round'>鲜橙</text>
+    <text class='badge danger radius'>嫣红</text>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>胶囊徽章</text>
+  </view>
+</view>
+
+<view class="doc-main">
+  <view class="flex justify-between align-center">
+    <view class='badge danger capsule-badge'>
+      <text class='iconfont icon-likefill'></text>
+      <text>1213</text>
+    </view>
+    <view class='badge primary round capsule-badge'>
+      <text>说明</text>
+    </view>
+    <view class='badge secondary round capsule-badge'>
+      <text>说明</text>
+      <text>说明</text>
+    </view>
+    <view class='badge warning radius capsule-badge'>
+      <text>说明</text>
+      <text>10:00</text>
+    </view>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>标记徽章</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="flex justify-between align-center">
+    <view class='mark-list-item'>
+      <text class='badge mark-badge cur'></text>
+    </view>
+    <view class='mark-list-item'>
+      <text class='badge mark-badge'>9</text>
+    </view>
+    <view class='mark-list-item'>
+      <text class='badge mark-badge'>99</text>
+    </view>
+    <view class='mark-list-item'>
+      <text class='badge mark-badge'>99+</text>
+    </view>
+  </view>
+</view>

pages/badge/badge.wxss

@@ -0,0 +1,11 @@
+page{
+  background: #f5f5f5;
+}
+.mark-list-item {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 10rpx;
+  background: #f5f5f5;
+  margin: 20rpx;
+  position: relative;
+}

pages/bar/bar.js

@@ -0,0 +1,22 @@
+// pages/element/bar/bar.js
+Page({
+  data: {
+    nav: [
+      { title: '标题 + 图标', name: 'normIcon' },
+      { title: '浮动在顶部', name: 'topfix' },
+      { title: '颜色', name: 'background' },
+      { title: '居中的标题', name: 'center' },
+      { title: '搜索 + 按钮', name: 'serach' },
+      { title: '头像 + 搜索（跳转）+ 城市', name: 'serachRound' },
+      { title: '浮动在底部', name: 'bottomfix' },
+      { title: '浮动在底部的方形按钮组', name: 'bottomfixBtns' },
+      { title: '浮动在底部的输入框', name: 'bottomfixInput' }
+    ],
+    barName: 'normIcon'
+  },
+  setName: function (e) {
+    this.setData({
+      barName: e.currentTarget.dataset.name
+    })
+  }
+})

pages/bar/bar.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "操作条/Bar"
+}

pages/bar/bar.wxml

@@ -0,0 +1,124 @@
+<view class="bar" wx:if="{{barName=='normIcon'}}">
+  <view class='text-lg'>
+    <text class=' iconfont icon-titles warning-text ml-sm'></text> 猜你喜欢
+  </view>
+</view>
+
+<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
+  <view class='text-lg'>
+    <text class=' iconfont icon-title success-text ml-sm'></text> 备注说明
+  </view>
+</view>
+
+<view class="bar mt-sm" wx:if="{{barName=='normIcon'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back gray-text ml-sm'></text> 返回
+  </view>
+</view>
+
+<view class="bar gray" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar primary mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar secondary mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar success mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar warning mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+<view class="bar danger mt-sm" wx:if="{{barName=='background'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+
+<view class="bar justify-between" wx:if="{{barName=='center'}}">
+  <view class='text-df'>
+    <text class='iconfont icon-back ml-sm text-lg'></text> 返回
+  </view>
+  <view class='bar-text'>操作条/Bar </view>
+  <view class='text-df'>
+    <text class='iconfont icon-share mr-sm text-lg'></text>
+  </view>
+</view>
+
+<view class="bar" wx:if="{{barName=='serach'}}">
+  <view class='serach-form'>
+    <text class="iconfont icon-search"></text>
+    <input type="text" class="search-input sub" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  </view>
+  <button class='success btn sm mr-sm'>分类
+    <text class='iconfont icon-similar'></text>
+  </button>
+</view>
+
+<view class="bar success" wx:if="{{barName=='serachRound'}}">
+  <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='round mh-sm'></image>
+  <view class='serach-round'>
+    <text class="iconfont icon-search"></text>
+    <text>搜索图片、文章、视频</text>
+  </view>
+  <view class='mh-sm text-sm'>广州
+    <text class="iconfont icon-triangledownfill"></text>
+  </view>
+</view>
+
+<view class="bar topfix shadow" wx:if="{{barName=='topfix'}}">
+  <view class='text-lg'>
+    <text class='iconfont icon-back ml-sm'></text> 返回
+  </view>
+</view>
+
+<view class="bar bottomfix shadow justify-center" wx:if="{{barName=='bottomfix'}}">
+  <button class='btn success round basis-sm'>提交保存</button>
+</view>
+<view class="bar bottomfix shadow btns" wx:if="{{barName=='bottomfixBtns'}}">
+  <view class='flex-sub solid-right'>
+    <view class="text-xs gray-text">
+      <view class='iconfont icon-service success-text text-lg'></view>
+      <text class='badge mark-badge cur'></text> 客服
+    </view>
+  </view>
+  <view class='flex-sub solid-right text-sm'>
+    <view class="text-xs gray-text">
+      <view class='iconfont icon-shop warning-text text-lg'></view>
+      店铺
+    </view>
+  </view>
+  <view class='flex-sub text-sm'>
+    <view class="text-xs gray-text">
+      <view class='iconfont icon-cart warning-text text-lg'></view>
+      <text class='badge mark-badge'>99</text> 购物车
+    </view>
+  </view>
+  <view class='danger flex-twice'>立即订购</view>
+</view>
+
+<view class="bar bottomfix shadow bar-textarea" wx:if="{{barName=='bottomfixInput'}}">
+  <input class='flex-sub solid-bottom ml-sm' focus="true" maxlength="300" cursor-spacing="10"></input>
+  <button class='success btn mh-sm'>发送</button>
+</view>
+
+<view class="{{barName=='topfix'?'fixed-page':''}}">
+  <view class="nav-list {{barName==item.name?'cur':''}}" wx:for="{{nav}}" wx:key="{{index}}" bindtap='setName' data-name='{{item.name}}'>
+    <view class="nav-title">{{item.title}}</view>
+    <view class="iconfont icon-right"></view>
+  </view>
+</view>
+
+<image src='/images/skin.jpg' mode='widthFix' class="fixed-image mt-df" wx:if="{{barName=='topfix'||barName=='bottomfixBtns'||barName=='bottomfixInput'}}"></image>

pages/bar/bar.wxss

@@ -0,0 +1,10 @@
+page {
+  background: #f1f1f1;
+}
+.fixed-page{
+  margin-top: 120rpx;
+}
+.fixed-image{
+  width: 100%;
+  display:block;
+}

pages/border/border.js

@@ -0,0 +1,5 @@
+// pages/document/border/border.js
+Page({
+  data: {  
+  },
+})

pages/border/border.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "边框/Border"
+}

pages/border/border.wxml

@@ -0,0 +1,42 @@
+<view class="bar">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>实线</text>
+  </view>
+</view>
+<view class="flex p-xs mt-xs mb-sm flex-direction text-center">
+  <view class='doc-box-sub p-sm m-xs solid'>solid</view>
+  <view class='doc-box-sub p-sm m-xs solid-top'>solid-top</view>
+  <view class='doc-box-sub p-sm m-xs solid-right'>solid-right</view>
+  <view class='doc-box-sub p-sm m-xs solid-bottom'>solid-bottom</view>
+  <view class='doc-box-sub p-sm m-xs solid-left'>solid-left</view>
+
+  <view class='doc-box-sub p-sm m-xs solids mt-xl'>solids</view>
+  <view class='doc-box-sub p-sm m-xs solids-top'>solids-top</view>
+  <view class='doc-box-sub p-sm m-xs solids-right'>solids-right</view>
+  <view class='doc-box-sub p-sm m-xs solids-bottom'>solids-bottom</view>
+  <view class='doc-box-sub p-sm m-xs solids-left'>solids-left</view>
+</view>
+
+<view class="bar mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>虚线</text>
+  </view>
+</view>
+<view class="flex p-xs mt-xs mb-sm flex-direction text-center">
+  <view class='doc-box-sub p-sm m-xs dashed'>dashed</view>
+  <view class='doc-box-sub p-sm m-xs dashed-top'>dashed-top</view>
+  <view class='doc-box-sub p-sm m-xs dashed-right'>dashed-right</view>
+  <view class='doc-box-sub p-sm m-xs dashed-bottom'>dashed-bottom</view>
+  <view class='doc-box-sub p-sm m-xs dashed-left'>dashed-left</view>
+</view>
+
+<view class="bar mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>阴影</text>
+  </view>
+</view>
+<view class="flex p-xs mt-xs pb-lg flex-direction text-center">
+  <view class='doc-box-sub p-sm m-xs shadow'>shadow</view>
+  <view class='doc-box-sub p-sm m-xs mt-xl shadow-lg'>shadow-lg</view>
+  <view class='doc-box-sub p-sm m-xs mt-xl shadow-alice'>shadow-alice</view>
+</view>

pages/border/border.wxss

@@ -0,0 +1,14 @@
+.doc-main {
+  background: transparent;
+}
+page{
+  background: #f5f5f5;
+}
+.doc-box-sub {
+  background: #fff;
+  border-radius: 0;
+}
+
+.doc-box-sub.shadow, .doc-box-sub.shadow-lg,.shadow-alice {
+  border-radius: 6rpx;
+}

pages/button/button.js

@@ -0,0 +1,5 @@
+// pages/element/button/button.js
+Page({
+  data: {  
+  },
+})

pages/button/button.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "按钮/Button"
+}

pages/button/button.wxml

@@ -0,0 +1,119 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>形状</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-wrap '>
+    <button class='gray btn'>默认</button>
+    <button class='gray btn round ml-sm'>椭圆</button>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>尺寸</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-wrap justify-between align-center'>
+    <button class='gray btn xs'>最小</button>
+    <button class='gray btn sm round'>小尺寸</button>
+    <button class='gray btn'>默认</button>
+    <button class='gray btn lg round'>大尺寸</button>
+    <button class='gray btn xl'>最大</button>
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>颜色</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-wrap justify-between'>
+    <button class='primary btn'>蔚蓝</button>
+    <button class='secondary btn round'>天青</button>
+    <navigator class='success btn'>森绿</navigator>
+    <button class='warning btn round'>鲜橙</button>
+    <button class='danger btn'>嫣红</button>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>幽灵按钮</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-wrap justify-between align-center'>
+    <button class='gray btn hollow xs'>默认</button>
+    <button class='primary btn hollow sm'>蔚蓝</button>
+    <button class='secondary btn hollow round'>天青</button>
+    <navigator class='success btn hollow'>森绿</navigator>
+    <button class='warning btn hollow lg round'>鲜橙</button>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>块状按钮</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-direction'>
+    <button class='gray btn block lg'>默认</button>
+    <button class='primary btn mt-sm block lg'>主键</button>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>带图标的按钮</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex justify-center align-center'>
+    <button class='secondary btn block hollow round'>
+      <text class='iconfont icon-appreciate mr-xs'></text> 次级键
+    </button>
+    <button class='primary btn ml-sm'>
+      <text class='iconfont icon-loading iconfont-spin mr-xs'></text> 主键
+    </button>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>带图标的圆形按钮</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex justify-center align-center'>
+    <button class='primary btn xs iconfont icon-appreciate'>
+    </button>
+    <button class='secondary btn sm ml-sm iconfont icon-discoverfill'>
+    </button>
+    <button class='success btn ml-sm iconfont icon-locationfill'>
+    </button>
+    <button class='warning btn lg ml-sm iconfont icon-weibo'>
+    </button>
+    <button class='danger btn xl ml-sm iconfont icon-presentfill'>
+    </button>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>固定在底部</text>
+  </view>
+</view>
+<view class="doc-main">
+  <navigator class='btn success block lg' url='sub?ctype=foot'> 预览
+    <text class='iconfont icon-roundright ml-xs'></text>
+  </navigator>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>悬浮按钮</text>
+  </view>
+</view>
+<view class="doc-main">
+  <navigator class='btn warning block lg mb-sm' url='sub?ctype=fixed'> 预览
+    <text class='iconfont icon-roundright ml-xs'></text>
+  </navigator>
+</view>

pages/button/button.wxss

@@ -0,0 +1,6 @@
+page{
+  background: #f5f5f5;
+}
+.doc-example > button{
+  margin-right: 20rpx;
+}

pages/button/sub.js

@@ -0,0 +1,73 @@
+// pages/element/button/foot.js
+Page({
+  data: {
+    ctype: '',
+    clist: [],
+    glo_is_load: true
+  },
+  onLoad: function (options) {
+    var that = this
+    var ctype = options.ctype;
+    that.setData({
+      ctype: ctype,
+    })
+    var this_title = '';
+    if (ctype == 'foot') {
+      this_title = '固定在底部'
+    } else if (ctype == 'fixed') {
+      this_title = '悬浮按钮'
+    } 
+    wx.setNavigationBarTitle({
+      title: this_title
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+  
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+  
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  
+  }
+})

pages/button/sub.json

@@ -0,0 +1,5 @@
+{
+      "backgroundTextStyle": "light",
+      "navigationBarBackgroundColor": "#fff",
+      "navigationBarTextStyle": "black"
+}

pages/button/sub.wxml

@@ -0,0 +1,6 @@
+<image src='/images/skin.jpg' mode='widthFix'></image>
+<view class='foot-btn' wx:if="{{ctype == 'foot'}}">
+  <button class='danger btn hollow'><text class='iconfont icon-delete mr-xs'></text> 删除</button>
+  <button class='success btn round'><text class='iconfont icon-upload mr-xs'></text> 上传</button>
+</view> 
+<button class='warning btn iconfont lg fixed icon-add' style='bottom:40rpx' wx:if="{{ctype == 'fixed'}}"></button>

pages/button/sub.wxss

@@ -0,0 +1,4 @@
+image{
+  width: 100%;
+  display:block;
+}

pages/chat/chat.js

@@ -0,0 +1,5 @@
+// pages/document/chat/chat.js
+Page({
+  data: {  
+  },
+})

pages/chat/chat.json

@@ -0,0 +1 @@
+{}

pages/chat/chat.wxml

@@ -0,0 +1,71 @@
+<view class="chat-item">
+  <view class="chat-main justify-end flex">
+    <view>
+      <view class='chat-centact success'>
+        喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！
+      </view>
+      <view class='gray-text text-sm text-right mt-sm'>2018年3月23日 13:23</view>
+    </view>
+  </view>
+  <image src="http://image.weilanwl.com/img/square-3.jpg" class="img-df radius" mode='widthFix'></image>
+</view>
+<view class="chat-item chat-left">
+  <image src="http://image.weilanwl.com/img/square-2.jpg" class="img-df round" mode='widthFix'></image>
+  <view class="chat-main">
+    <view>
+      <view class='chat-centact'>
+        喵喵喵！喵！喵！喵！喵喵喵！
+      </view>
+      <view class='gray-text text-sm mt-sm'>5天前 </view>
+    </view>
+  </view>
+</view>
+<view class="chat-item">
+  <view class="chat-main justify-end flex">
+    <view>
+      <view class='chat-centact'>
+        <image src="http://image.weilanwl.com/img/3x4-1.jpg" mode="widthFix"></image>
+      </view>
+      <view class='gray-text text-sm text-right mt-sm'>10分钟前</view>
+    </view>
+  </view>
+  <image src="http://image.weilanwl.com/img/square-3.jpg" class="img-df radius" mode='widthFix'></image>
+</view>
+<view class="chat-item chat-left">
+  <image src="http://image.weilanwl.com/img/square-2.jpg" class="img-df round" mode='widthFix'></image>
+  <view class="chat-main">
+    <view>
+      <view class='chat-centact'>
+        <text class='iconfont icon-notification'></text>3"
+      </view>
+      <view class='gray-text text-sm mt-sm'>1分钟前 </view>
+    </view>
+  </view>
+</view>
+<view class="chat-item">
+  <view class="chat-main justify-end flex">
+    <view>
+      <view class='chat-centact'>
+        <view>戏精铲屎官，主子了解一下？</view>
+        <view class="flex mt-sm">
+          <image src="http://image.weilanwl.com/img/4x3-3.jpg" mode="widthFix" class='basis-sm'></image>
+          <view class="ml-sm text-sm">
+            一个伪铲屎官瞎几把乱写的一堆文字.
+          </view>
+        </view>
+        <view class="flex solid-top align-center pt-sm mt-sm">
+          <image src="http://image.weilanwl.com/img/4x4.jpg" class='round img-xs' mode='widthFix'></image>
+          <view class="gray-text ml-sm text-sm">文晓港
+            <text>/ 程序员</text>
+          </view>
+        </view>
+      </view>
+      <view class='gray-text text-sm text-right mt-sm'>刚刚</view>
+    </view>
+  </view>
+  <image src="http://image.weilanwl.com/img/square-3.jpg" class="img-df radius" mode='widthFix'></image>
+</view>
+<view class="bar bottomfix shadow bar-textarea">
+  <input class='flex-sub solid-bottom ml-sm' focus="true" maxlength="300" cursor-spacing="10"></input>
+  <button class='success btn mh-sm'>发送</button>
+</view>

pages/chat/chat.wxss

@@ -0,0 +1,4 @@
+page {
+  background: #f1f1f1;
+  padding-bottom: 120rpx;
+}

pages/comment/comment.js

@@ -0,0 +1,5 @@
+// pages/document/comment/comment.js
+Page({
+  data: {  
+  },
+})

pages/comment/comment.json

@@ -0,0 +1 @@
+{}

pages/comment/comment.wxml

@@ -0,0 +1,36 @@
+<view class="comment">
+  <view class="comment-item ph-sm">
+    <view class="bar justify-between">
+      <view class="bar-fr bar">
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class="round"></image>
+        <text class='ml-sm'>文晓港</text>
+        <text class="gray-text text-sm"> 3 小时前</text>
+      </view>
+      <button class="success btn sm bar-fr" bindtap="recomment" data-id="{{comments.comment_id}}">
+        <text class="iconfont icon-writefill"> 回复</text>
+      </button>
+    </view>
+    <view class="comment-mian">
+      <view class="comment-content">评论回复的内容</view>
+      <view class="lattice-image">
+        <view style='background-image:url(http://image.weilanwl.com/img/4x3-1.jpg)'>
+        </view>
+        <view style='background-image:url(http://image.weilanwl.com/img/3x4-3.jpg)'>
+        </view>
+      </view>
+      <view class="comment-sub">
+        <view class="comment-sub-name">
+          <text class="success-text">王晓明</text>
+          <text class="gray-text text-sm">2 分钟前</text>
+        </view>
+        <view class="comment-sub-content">说的dei dei！</view>
+        <view class="comment-sub-name top-xs">
+          <text class="success-text">文晓港 </text>回复
+          <text class="success-text"> 王晓明</text>
+          <text class="gray-text text-sm">2 分钟前</text>
+        </view>
+        <view class="comment-sub-content">说的dei dei！</view>
+      </view>
+    </view>
+  </view>
+</view>

pages/comment/comment.wxss

@@ -0,0 +1 @@
+/* pages/document/comment/comment.wxss */

pages/form/form.js

@@ -0,0 +1,171 @@
+// pages/form/form.js
+Page({
+  data: {
+    array: ['	禁止换行，超出容器部分截断（以 ... 结束）', '中国', '巴西', '日本'],
+    index: 0,
+    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
+    radio: [
+      { name: 'USA', value: '美国' },
+      { name: 'CHN', value: '中国', checked: 'true' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'ENG', value: '澳大利亚' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'ENG', value: '英国' },
+      { name: 'TUR', value: '哈萨克斯坦' },
+      { name: 'TUR', value: '法国' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'ENG', value: '英国' },
+      { name: 'TUR', value: '法国' }
+    ],
+    multiIndex: [0, 0, 0],
+    date: '2018-02-03',
+    time: '12:01',
+    region: ['广东省', '广州市', '海珠区'],
+    customItem: '全部'
+  },
+  bindPickerChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      index: e.detail.value
+    })
+  },
+  bindMultiPickerChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      multiIndex: e.detail.value
+    })
+  },
+  bindMultiPickerColumnChange: function (e) {
+    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
+    var data = {
+      multiArray: this.data.multiArray,
+      multiIndex: this.data.multiIndex
+    };
+    data.multiIndex[e.detail.column] = e.detail.value;
+    switch (e.detail.column) {
+      case 0:
+        switch (data.multiIndex[0]) {
+          case 0:
+            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
+            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
+            break;
+          case 1:
+            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
+            data.multiArray[2] = ['鲫鱼', '带鱼'];
+            break;
+        }
+        data.multiIndex[1] = 0;
+        data.multiIndex[2] = 0;
+        break;
+      case 1:
+        switch (data.multiIndex[0]) {
+          case 0:
+            switch (data.multiIndex[1]) {
+              case 0:
+                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
+                break;
+              case 1:
+                data.multiArray[2] = ['蛔虫'];
+                break;
+              case 2:
+                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
+                break;
+              case 3:
+                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
+                break;
+              case 4:
+                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
+                break;
+            }
+            break;
+          case 1:
+            switch (data.multiIndex[1]) {
+              case 0:
+                data.multiArray[2] = ['鲫鱼', '带鱼'];
+                break;
+              case 1:
+                data.multiArray[2] = ['青蛙', '娃娃鱼'];
+                break;
+              case 2:
+                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
+                break;
+            }
+            break;
+        }
+        data.multiIndex[2] = 0;
+        console.log(data.multiIndex);
+        break;
+    }
+    this.setData(data);
+  },
+
+  bindDateChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      date: e.detail.value
+    })
+  },
+  bindTimeChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      time: e.detail.value
+    })
+  },
+  bindRegionChange: function (e) {
+    console.log('picker发送选择改变，携带值为', e.detail.value)
+    this.setData({
+      region: e.detail.value
+    })
+  },
+  showModal: function (e) {
+    var showName = e.currentTarget.dataset.modal;
+    this.setData({
+      modalName: showName
+    })
+  },
+  closeModal: function (e) {
+    this.setData({
+      modalName: null
+    })
+  },
+  uploadimg: function () {
+    var that = this;
+    wx.chooseImage({
+      count: 1, // 默认9
+      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: function (res) {
+        var tempFilePaths = res.tempFilePaths
+        that.setData({
+          chooseimg: true,
+          tempFilePaths: tempFilePaths
+        })
+      }
+    })
+  },
+  viewUploadimg: function (e) {
+    var url = this.data.tempFilePaths;
+    wx.previewImage({
+      urls: url
+    })
+  },
+  uploadImage: function (e) {
+    var that = this;
+    wx.chooseImage({
+      count: 1, // 默认9
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: function (res) {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        var uploadImage = res.tempFilePaths;
+        that.setData({
+          uploadImage: uploadImage
+        })
+      }
+    })
+  }
+})

pages/form/form.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "表单/Form"
+}

pages/form/form.wxml

@@ -0,0 +1,266 @@
+<form>
+  <view class="form-box form-avatar-box">
+    <view class="form-avatar" bindtap="uploadPhoto" style='background-image:url({{src}})'>
+      <text>修改/上传</text>
+    </view>
+    <view class="form-avatar-item">
+      <view class="form-item">
+        <input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
+      </view>
+      <view class="form-item">
+        <input type="text" class="form-input" name="title" value="" placeholder="输入框的描述" />
+        <view class='form-input-btn'>
+          <button class='success btn sm'>获取验证码</button>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class='form-box'>
+    <view class='form-item'>
+      <view class='form-title cur form-title-sm'>
+        两字
+      </view>
+      <input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
+    </view>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        输入框
+      </view>
+      <input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
+    </view>
+    <view class='form-item'>
+      <view class='form-title'>
+        输入框项
+      </view>
+      <view class='form-input'>
+        <input class='' type="text" placeholder="输入框的描述"></input>
+      </view>
+      <view class='form-input-btn'>
+        <text class='iconfont icon-locationfill warning-text'></text>
+      </view>
+    </view>
+    <view class='form-item'>
+      <view class='form-title'>
+        输入框
+      </view>
+      <input class='' type="text" placeholder="输入框的描述" class='form-input'></input>
+      <view class='form-input-btn'>
+        <button class='success btn sm'>获取验证码</button>
+      </view>
+    </view>
+  </view>
+  <view class='form-box'>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        单列选择
+      </view>
+      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+        <view class="picker">
+          {{array[index]}}
+        </view>
+      </picker>
+    </view>
+    <view class='form-item'>
+      <view class='form-title'>
+        多列选择
+      </view>
+      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
+        <view class="picker">
+          {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
+        </view>
+      </picker>
+    </view>
+    <view class='form-item'>
+      <view class='form-title'>
+        时间选择
+      </view>
+      <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
+        <view class="picker">
+          {{time}}
+        </view>
+      </picker>
+    </view>
+    <view class='form-item'>
+      <view class='form-title'>
+        日期选择
+      </view>
+      <picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
+        <view class="picker">
+          {{date}}
+        </view>
+      </picker>
+    </view>
+    <view class='form-item'>
+      <view class='form-title'>
+        地址选择
+      </view>
+      <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
+        <view class="picker">
+          {{region[0]}}，{{region[1]}}，{{region[2]}}
+        </view>
+      </picker>
+    </view>
+  </view>
+  <view class='form-box'>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        单选框
+      </view>
+      <view class='form-arrow' bindtap='showModal' data-modal="radioModal">
+        单选框
+      </view>
+      <view class="modal-box {{modalName=='radioModal'?'cur':''}}">
+        <view class='modal-dialog'>
+          <view class="modal-title">
+            <text>单选框</text>
+          </view>
+          <scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
+            <radio-group class="list-double-col list-box" bindchange="radioChange">
+              <label class="list-li" wx:for="{{radio}}">
+                <view class='list-text'>{{item.value}}</view>
+                <radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
+              </label>
+            </radio-group>
+          </scroll-view>
+          <view class='modal-option'>
+            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
+            <view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
+          </view>
+        </view>
+
+      </view>
+    </view>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        复选框
+      </view>
+      <view class='form-arrow' bindtap='showModal' data-modal="checkboxModal">
+        复选框
+      </view>
+      <view class="modal-box {{modalName=='checkboxModal'?'cur':''}}">
+        <view class='modal-dialog'>
+          <view class="modal-title">
+            <text>复选框</text>
+            <view class='bar-close badge danger round' bindtap='closeModal'>
+              <text class='iconfont icon-close'></text>
+            </view>
+          </view>
+          <scroll-view class='modal-bd' scroll-y="true" style='max-height:500rpx;'>
+            <checkbox-group class="list-double-col list-box" bindchange="checkboxChange">
+              <label class="list-li" wx:for="{{radio}}">
+                <view class='list-text'>{{item.value}}</view>
+                <checkbox class='list-icon' value="{{item.name}}" checked="{{item.checked}}" />
+              </label>
+            </checkbox-group>
+          </scroll-view>
+          <view class='modal-option'>
+            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
+            <view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        两级联动
+      </view>
+      <view class='form-arrow' bindtap='showModal' data-modal="doubleModal">
+        两级联动
+      </view>
+      <view class="modal-box {{modalName=='doubleModal'?'cur':''}}">
+        <view class='modal-dialog'>
+          <view class="modal-title">
+            <text>两级联动</text>
+          </view>
+          <view class='modal-bd double-chose'>
+            <scroll-view scroll-y class="double-chose-first" style='height:640rpx;width: 400rpx;'>
+              <view class="cur">北京</view>
+              <view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
+            </scroll-view>
+            <scroll-view scroll-y class="double-chose-last" style='height:640rpx;'>
+              <view class="cur">北京</view>
+              <view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
+            </scroll-view>
+          </view>
+          <view class='modal-option'>
+            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
+            <view class='modal-option-btn success-text' bindtap='closeModal'>确认</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        单项选择
+      </view>
+      <view class='form-arrow' bindtap='showModal' data-modal="singleModal">
+        单项选择
+      </view>
+      <view class="modal-box {{modalName=='singleModal'?'cur':''}}">
+        <view class='modal-dialog'>
+          <view class="modal-title">
+            <text>单项选择</text>
+          </view>
+          <scroll-view class='modal-bd' scroll-y="true" style='max-height:800rpx;'>
+            <view class='single-modal'>
+              <view class="single-modal-item {{item.checked?'cur':''}}" wx:for="{{radio}}" bindtap='closeModal'>{{item.value}}</view>
+            </view>
+          </scroll-view>
+          <view class='modal-option'>
+            <view class='modal-option-btn' bindtap='closeModal'>取消</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="form-item form-textarea {{modalName==null?'':'hide'}}">
+      <view class='form-title cur'>
+        文本框
+      </view>
+      <textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
+    </view>
+  </view>
+  <view class='form-box'>
+    <view class='form-item'>
+      <view class='form-title cur'>
+        单图上传
+      </view>
+      <view class='form-arrow' wx:if="{{chooseimg}}" bindtap='viewUploadimg'>
+        <text class='success-text iconfont icon-roundcheckfill'></text> 已上传
+        <text class='gray-text fr'>预览</text>
+      </view>
+      <view class='form-arrow form-add' bindtap='uploadimg' wx:else>
+        请选择图片
+      </view>
+    </view>
+
+    <view class='form-item form-upload'>
+      <view class='form-title cur'>
+        多图上传
+      </view>
+      <view class="lattice-image">
+        <view>
+          <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
+          <view class='iconfont icon-close'></view>
+        </view>
+        <view class='lattice-btn'>
+          <text class='iconfont icon-cameraadd'></text>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class='form-box'>
+    <view class="form-item form-upload  {{modalName==null?'':'hide'}}">
+      <textarea placeholder='多行文本输入框' maxlength="-1"></textarea>
+      <view class="lattice-image">
+        <view>
+          <image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
+          <view class='iconfont icon-close'></view>
+        </view>
+        <view class='lattice-btn'>
+          <text class='iconfont icon-cameraadd'></text>
+        </view>
+      </view>
+    </view>
+  </view>
+</form>

pages/form/form.wxss

@@ -0,0 +1,3 @@
+page {
+  background: #f1f1f1;
+}

pages/icon/icon.js

@@ -0,0 +1,5 @@
+// pages/element/icon/icon.js
+Page({
+  data: {  
+  },
+})

pages/icon/icon.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "图标/Icon"
+}

pages/icon/icon.wxml

@@ -0,0 +1,839 @@
+<view class="doc-icon-list">
+     <view class="iconfont icon-activityfill">
+     <text>activity_fill</text>
+     </view>
+     <view class="iconfont icon-add">
+     <text>add</text>
+     </view>
+     <view class="iconfont icon-addressbook">
+     <text>address_book</text>
+     </view>
+     <view class="iconfont icon-album">
+     <text>album</text>
+     </view>
+     <view class="iconfont icon-all">
+     <text>all</text>
+     </view>
+     <view class="iconfont icon-appreciate">
+     <text>appreciate</text>
+     </view>
+     <view class="iconfont icon-appreciatefill">
+     <text>appreciate_fill</text>
+     </view>
+     <view class="iconfont icon-apps">
+     <text>apps</text>
+     </view>
+     <view class="iconfont icon-attention">
+     <text>attention</text>
+     </view>
+     <view class="iconfont icon-attentionfavor">
+     <text>attention_favor</text>
+     </view>
+     <view class="iconfont icon-attentionfavorfill">
+     <text>attention_favor_fill</text>
+     </view>
+     <view class="iconfont icon-attentionfill">
+     <text>attention_fill</text>
+     </view>
+     <view class="iconfont icon-attentionforbid">
+     <text>attention_forbid</text>
+     </view>
+     <view class="iconfont icon-attentionforbidfill">
+     <text>attention_forbid_fill</text>
+     </view>
+     <view class="iconfont icon-baby">
+     <text>baby</text>
+     </view>
+     <view class="iconfont icon-babyfill">
+     <text>baby_fill</text>
+     </view>
+     <view class="iconfont icon-back">
+     <text>back</text>
+     </view>
+     <view class="iconfont icon-back_android">
+     <text>back_android</text>
+     </view>
+     <view class="iconfont icon-backdelete">
+     <text>back_delete</text>
+     </view>
+     <view class="iconfont icon-backwardfill">
+     <text>backward_fill</text>
+     </view>
+     <view class="iconfont icon-bad">
+     <text>bad</text>
+     </view>
+     <view class="iconfont icon-barcode">
+     <text>bar_code</text>
+     </view>
+     <view class="iconfont icon-brand">
+     <text>brand</text>
+     </view>
+     <view class="iconfont icon-brandfill">
+     <text>brand_fill</text>
+     </view>
+     <view class="iconfont icon-calendar">
+     <text>calendar</text>
+     </view>
+     <view class="iconfont icon-camera">
+     <text>camera</text>
+     </view>
+     <view class="iconfont icon-cameraadd">
+     <text>camera_add</text>
+     </view>
+     <view class="iconfont icon-cameraaddfill">
+     <text>camera_add_fill</text>
+     </view>
+     <view class="iconfont icon-camerafill">
+     <text>camera_fill</text>
+     </view>
+     <view class="iconfont icon-camerarotate">
+     <text>camera_rotate</text>
+     </view>
+     <view class="iconfont icon-cardboard">
+     <text>cardboard</text>
+     </view>
+     <view class="iconfont icon-cardboardfill">
+     <text>cardboard_fill</text>
+     </view>
+     <view class="iconfont icon-cardboardforbid">
+     <text>cardboard_forbid</text>
+     </view>
+     <view class="iconfont icon-cart">
+     <text>cart</text>
+     </view>
+     <view class="iconfont icon-cartfill">
+     <text>cart_fill</text>
+     </view>
+     <view class="iconfont icon-cascades">
+     <text>cascades</text>
+     </view>
+     <view class="iconfont icon-check">
+     <text>check</text>
+     </view>
+     <view class="iconfont icon-choiceness">
+     <text>choiceness</text>
+     </view>
+     <view class="iconfont icon-choicenessfill">
+     <text>choiceness_fill</text>
+     </view>
+     <view class="iconfont icon-circle">
+     <text>circle</text>
+     </view>
+     <view class="iconfont icon-circlefill">
+     <text>circle_fill</text>
+     </view>
+     <view class="iconfont icon-close">
+     <text>close</text>
+     </view>
+     <view class="iconfont icon-clothes">
+     <text>clothes</text>
+     </view>
+     <view class="iconfont icon-clothesfill">
+     <text>clothes_fill</text>
+     </view>
+     <view class="iconfont icon-coin">
+     <text>coin</text>
+     </view>
+     <view class="iconfont icon-command">
+     <text>command</text>
+     </view>
+     <view class="iconfont icon-commandfill">
+     <text>command_fill</text>
+     </view>
+     <view class="iconfont icon-comment">
+     <text>comment</text>
+     </view>
+     <view class="iconfont icon-commentfill">
+     <text>comment_fill</text>
+     </view>
+     <view class="iconfont icon-community">
+     <text>community</text>
+     </view>
+     <view class="iconfont icon-communityfill">
+     <text>community_fill</text>
+     </view>
+     <view class="iconfont icon-copy">
+     <text>copy</text>
+     </view>
+     <view class="iconfont icon-countdown">
+     <text>countdown</text>
+     </view>
+     <view class="iconfont icon-countdownfill">
+     <text>countdown_fill</text>
+     </view>
+     <view class="iconfont icon-creative">
+     <text>creative</text>
+     </view>
+     <view class="iconfont icon-creativefill">
+     <text>creative_fill</text>
+     </view>
+     <view class="iconfont icon-crown">
+     <text>crown</text>
+     </view>
+     <view class="iconfont icon-crownfill">
+     <text>crown_fill</text>
+     </view>
+     <view class="iconfont icon-cut">
+     <text>cut</text>
+     </view>
+     <view class="iconfont icon-delete">
+     <text>delete</text>
+     </view>
+     <view class="iconfont icon-deletefill">
+     <text>delete_fill</text>
+     </view>
+     <view class="iconfont icon-deliver">
+     <text>deliver</text>
+     </view>
+     <view class="iconfont icon-deliver_fill">
+     <text>deliver_fill</text>
+     </view>
+     <view class="iconfont icon-discover">
+     <text>discover</text>
+     </view>
+     <view class="iconfont icon-discoverfill">
+     <text>discover_fill</text>
+     </view>
+     <view class="iconfont icon-down">
+     <text>down</text>
+     </view>
+     <view class="iconfont icon-edit">
+     <text>edit</text>
+     </view>
+     <view class="iconfont icon-emoji">
+     <text>emoji</text>
+     </view>
+     <view class="iconfont icon-emojifill">
+     <text>emoji_fill</text>
+     </view>
+     <view class="iconfont icon-emojiflashfill">
+     <text>emoji_flash_fill</text>
+     </view>
+     <view class="iconfont icon-evaluate">
+     <text>evaluate</text>
+     </view>
+     <view class="iconfont icon-evaluate_fill">
+     <text>evaluate_fill</text>
+     </view>
+     <view class="iconfont icon-exit">
+     <text>exit</text>
+     </view>
+     <view class="iconfont icon-explore">
+     <text>explore</text>
+     </view>
+     <view class="iconfont icon-explorefill">
+     <text>explore_fill</text>
+     </view>
+     <view class="iconfont icon-expressman">
+     <text>expressman</text>
+     </view>
+     <view class="iconfont icon-favor">
+     <text>favor</text>
+     </view>
+     <view class="iconfont icon-favorfill">
+     <text>favor_fill</text>
+     </view>
+     <view class="iconfont icon-female">
+     <text>female</text>
+     </view>
+     <view class="iconfont icon-file">
+     <text>file</text>
+     </view>
+     <view class="iconfont icon-filter">
+     <text>filter</text>
+     </view>
+     <view class="iconfont icon-flashbuyfill">
+     <text>flashbuy_fill</text>
+     </view>
+     <view class="iconfont icon-flashlightclose">
+     <text>flashlight_close</text>
+     </view>
+     <view class="iconfont icon-flashlightopen">
+     <text>flashlight_open</text>
+     </view>
+     <view class="iconfont icon-focus">
+     <text>focus</text>
+     </view>
+     <view class="iconfont icon-fold">
+     <text>fold</text>
+     </view>
+     <view class="iconfont icon-footprint">
+     <text>footprint</text>
+     </view>
+     <view class="iconfont icon-form">
+     <text>form</text>
+     </view>
+     <view class="iconfont icon-formfill">
+     <text>form_fill</text>
+     </view>
+     <view class="iconfont icon-forward">
+     <text>forward</text>
+     </view>
+     <view class="iconfont icon-forwardfill">
+     <text>forward_fill</text>
+     </view>
+     <view class="iconfont icon-friend">
+     <text>friend</text>
+     </view>
+     <view class="iconfont icon-friendadd">
+     <text>friend_add</text>
+     </view>
+     <view class="iconfont icon-friendaddfill">
+     <text>friend_add_fill</text>
+     </view>
+     <view class="iconfont icon-friendfamous">
+     <text>friend_famous</text>
+     </view>
+     <view class="iconfont icon-friendfavor">
+     <text>friend_favor</text>
+     </view>
+     <view class="iconfont icon-friendfill">
+     <text>friend_fill</text>
+     </view>
+     <view class="iconfont icon-full">
+     <text>full</text>
+     </view>
+     <view class="iconfont icon-game">
+     <text>game</text>
+     </view>
+     <view class="iconfont icon-global">
+     <text>global</text>
+     </view>
+     <view class="iconfont icon-goods">
+     <text>goods</text>
+     </view>
+     <view class="iconfont icon-goodsfavor">
+     <text>goods_favor</text>
+     </view>
+     <view class="iconfont icon-goodsfill">
+     <text>goods_fill</text>
+     </view>
+     <view class="iconfont icon-goodsnew">
+     <text>goods_new</text>
+     </view>
+     <view class="iconfont icon-goodsnewfill">
+     <text>goods_new_fill</text>
+     </view>
+     <view class="iconfont icon-group">
+     <text>group</text>
+     </view>
+     <view class="iconfont icon-group_fill">
+     <text>group_fill</text>
+     </view>
+     <view class="iconfont icon-home">
+     <text>home</text>
+     </view>
+     <view class="iconfont icon-homefill">
+     <text>home_fill</text>
+     </view>
+     <view class="iconfont icon-hot">
+     <text>hot</text>
+     </view>
+     <view class="iconfont icon-hotfill">
+     <text>hot_fill</text>
+     </view>
+     <view class="iconfont icon-info">
+     <text>info</text>
+     </view>
+     <view class="iconfont icon-infofill">
+     <text>info_fill</text>
+     </view>
+     <view class="iconfont icon-keyboard">
+     <text>keyboard</text>
+     </view>
+     <view class="iconfont icon-light">
+     <text>light</text>
+     </view>
+     <view class="iconfont icon-lightauto">
+     <text>light_auto</text>
+     </view>
+     <view class="iconfont icon-lightfill">
+     <text>light_fill</text>
+     </view>
+     <view class="iconfont icon-lightforbid">
+     <text>light_forbid</text>
+     </view>
+     <view class="iconfont icon-like">
+     <text>like</text>
+     </view>
+     <view class="iconfont icon-likefill">
+     <text>like_fill</text>
+     </view>
+     <view class="iconfont icon-link">
+     <text>link</text>
+     </view>
+     <view class="iconfont icon-list">
+     <text>list</text>
+     </view>
+     <view class="iconfont icon-loading">
+     <text>loading</text>
+     </view>
+     <view class="iconfont icon-location">
+     <text>location</text>
+     </view>
+     <view class="iconfont icon-locationfill">
+     <text>location_fill</text>
+     </view>
+     <view class="iconfont icon-lock">
+     <text>lock</text>
+     </view>
+     <view class="iconfont icon-magic">
+     <text>magic</text>
+     </view>
+     <view class="iconfont icon-mail">
+     <text>mail</text>
+     </view>
+     <view class="iconfont icon-male">
+     <text>male</text>
+     </view>
+     <view class="iconfont icon-mark">
+     <text>mark</text>
+     </view>
+     <view class="iconfont icon-markfill">
+     <text>mark_fill</text>
+     </view>
+     <view class="iconfont icon-medal">
+     <text>medal</text>
+     </view>
+     <view class="iconfont icon-medalfill">
+     <text>medal_fill</text>
+     </view>
+     <view class="iconfont icon-message">
+     <text>message</text>
+     </view>
+     <view class="iconfont icon-messagefill">
+     <text>message_fill</text>
+     </view>
+     <view class="iconfont icon-mobile">
+     <text>mobile</text>
+     </view>
+     <view class="iconfont icon-mobilefill">
+     <text>mobile_fill</text>
+     </view>
+     <view class="iconfont icon-moneybag">
+     <text>money_bag</text>
+     </view>
+     <view class="iconfont icon-moneybagfill">
+     <text>money_bag_fill</text>
+     </view>
+     <view class="iconfont icon-more">
+     <text>more</text>
+     </view>
+     <view class="iconfont icon-moreandroid">
+     <text>more_android</text>
+     </view>
+     <view class="iconfont icon-move">
+     <text>move</text>
+     </view>
+     <view class="iconfont icon-musicfill">
+     <text>music_fill</text>
+     </view>
+     <view class="iconfont icon-musicforbidfill">
+     <text>music_forbid_fill</text>
+     </view>
+     <view class="iconfont icon-my">
+     <text>my</text>
+     </view>
+     <view class="iconfont icon-myfill">
+     <text>my_fill</text>
+     </view>
+     <view class="iconfont icon-new">
+     <text>new</text>
+     </view>
+     <view class="iconfont icon-newfill">
+     <text>new_fill</text>
+     </view>
+     <view class="iconfont icon-news">
+     <text>news</text>
+     </view>
+     <view class="iconfont icon-newsfill">
+     <text>news_fill</text>
+     </view>
+     <view class="iconfont icon-newshot">
+     <text>news_hot</text>
+     </view>
+     <view class="iconfont icon-newshotfill">
+     <text>news_hot_fill</text>
+     </view>
+     <view class="iconfont icon-notice">
+     <text>notice</text>
+     </view>
+     <view class="iconfont icon-noticefill">
+     <text>notice_fill</text>
+     </view>
+     <view class="iconfont icon-notice_forbid_fill">
+     <text>notice_forbid_fill</text>
+     </view>
+     <view class="iconfont icon-notification">
+     <text>notification</text>
+     </view>
+     <view class="iconfont icon-notificationfill">
+     <text>notification_fill</text>
+     </view>
+     <view class="iconfont icon-notificationforbidfill">
+     <text>notification_forbid_fill</text>
+     </view>
+     <view class="iconfont icon-order">
+     <text>order</text>
+     </view>
+     <view class="iconfont icon-paint">
+     <text>paint</text>
+     </view>
+     <view class="iconfont icon-paintfill">
+     <text>paint_fill</text>
+     </view>
+     <view class="iconfont icon-pay">
+     <text>pay</text>
+     </view>
+     <view class="iconfont icon-people">
+     <text>people</text>
+     </view>
+     <view class="iconfont icon-peoplefill">
+     <text>people_fill</text>
+     </view>
+     <view class="iconfont icon-peoplelist">
+     <text>people_list</text>
+     </view>
+     <view class="iconfont icon-phone">
+     <text>phone</text>
+     </view>
+     <view class="iconfont icon-pic">
+     <text>pic</text>
+     </view>
+     <view class="iconfont icon-picfill">
+     <text>pic_fill</text>
+     </view>
+     <view class="iconfont icon-pick">
+     <text>pick</text>
+     </view>
+     <view class="iconfont icon-playfill">
+     <text>play_fill</text>
+     </view>
+     <view class="iconfont icon-play_forward_fill">
+     <text>play_forward_fill</text>
+     </view>
+     <view class="iconfont icon-post">
+     <text>post</text>
+     </view>
+     <view class="iconfont icon-present">
+     <text>present</text>
+     </view>
+     <view class="iconfont icon-presentfill">
+     <text>present_fill</text>
+     </view>
+     <view class="iconfont icon-profile">
+     <text>profile</text>
+     </view>
+     <view class="iconfont icon-profilefill">
+     <text>profile_fill</text>
+     </view>
+     <view class="iconfont icon-pulldown">
+     <text>pull_down</text>
+     </view>
+     <view class="iconfont icon-pullleft">
+     <text>pull_left</text>
+     </view>
+     <view class="iconfont icon-pullright">
+     <text>pull_right</text>
+     </view>
+     <view class="iconfont icon-pullup">
+     <text>pull_up</text>
+     </view>
+     <view class="iconfont icon-punch">
+     <text>punch</text>
+     </view>
+     <view class="iconfont icon-qrcode">
+     <text>qr_code</text>
+     </view>
+     <view class="iconfont icon-question">
+     <text>question</text>
+     </view>
+     <view class="iconfont icon-questionfill">
+     <text>question_fill</text>
+     </view>
+     <view class="iconfont icon-radiobox">
+     <text>radio_box</text>
+     </view>
+     <view class="iconfont icon-radioboxfill">
+     <text>radio_box_fill</text>
+     </view>
+     <view class="iconfont icon-rank">
+     <text>rank</text>
+     </view>
+     <view class="iconfont icon-rankfill">
+     <text>rank_fill</text>
+     </view>
+     <view class="iconfont icon-read">
+     <text>read</text>
+     </view>
+     <view class="iconfont icon-recharge">
+     <text>recharge</text>
+     </view>
+     <view class="iconfont icon-rechargefill">
+     <text>recharge_fill</text>
+     </view>
+     <view class="iconfont icon-record">
+     <text>record</text>
+     </view>
+     <view class="iconfont icon-recordfill">
+     <text>record_fill</text>
+     </view>
+     <view class="iconfont icon-redpacket">
+     <text>redpacket</text>
+     </view>
+     <view class="iconfont icon-redpacket_fill">
+     <text>redpacket_fill</text>
+     </view>
+     <view class="iconfont icon-refresh">
+     <text>refresh</text>
+     </view>
+     <view class="iconfont icon-refresharrow">
+     <text>refresh_arrow</text>
+     </view>
+     <view class="iconfont icon-refund">
+     <text>refund</text>
+     </view>
+     <view class="iconfont icon-remind">
+     <text>remind</text>
+     </view>
+     <view class="iconfont icon-repair">
+     <text>repair</text>
+     </view>
+     <view class="iconfont icon-repairfill">
+     <text>repair_fill</text>
+     </view>
+     <view class="iconfont icon-repeal">
+     <text>repeal</text>
+     </view>
+     <view class="iconfont icon-right">
+     <text>right</text>
+     </view>
+     <view class="iconfont icon-round">
+     <text>round</text>
+     </view>
+     <view class="iconfont icon-roundadd">
+     <text>round_add</text>
+     </view>
+     <view class="iconfont icon-roundaddfill">
+     <text>round_add_fill</text>
+     </view>
+     <view class="iconfont icon-roundcheck">
+     <text>round_check</text>
+     </view>
+     <view class="iconfont icon-roundcheckfill">
+     <text>round_check_fill</text>
+     </view>
+     <view class="iconfont icon-roundclose">
+     <text>round_close</text>
+     </view>
+     <view class="iconfont icon-roundclosefill">
+     <text>round_close_fill</text>
+     </view>
+     <view class="iconfont icon-rounddown">
+     <text>round_down</text>
+     </view>
+     <view class="iconfont icon-roundleftfill-copy">
+     <text>round_left_fill</text>
+     </view>
+     <view class="iconfont icon-roundright">
+     <text>round_right</text>
+     </view>
+     <view class="iconfont icon-roundrightfill">
+     <text>round_right_fill</text>
+     </view>
+     <view class="iconfont icon-safe">
+     <text>safe</text>
+     </view>
+     <view class="iconfont icon-same">
+     <text>same</text>
+     </view>
+     <view class="iconfont icon-samefill">
+     <text>same_fill</text>
+     </view>
+     <view class="iconfont icon-scan">
+     <text>scan</text>
+     </view>
+     <view class="iconfont icon-search">
+     <text>search</text>
+     </view>
+     <view class="iconfont icon-searchlist">
+     <text>search_list</text>
+     </view>
+     <view class="iconfont icon-selection">
+     <text>selection</text>
+     </view>
+     <view class="iconfont icon-selectionfill">
+     <text>selection_fill</text>
+     </view>
+     <view class="iconfont icon-send">
+     <text>send</text>
+     </view>
+     <view class="iconfont icon-service">
+     <text>service</text>
+     </view>
+     <view class="iconfont icon-servicefill">
+     <text>service_fill</text>
+     </view>
+     <view class="iconfont icon-settings">
+     <text>settings</text>
+     </view>
+     <view class="iconfont icon-shake">
+     <text>shake</text>
+     </view>
+     <view class="iconfont icon-share">
+     <text>share</text>
+     </view>
+     <view class="iconfont icon-shop">
+     <text>shop</text>
+     </view>
+     <view class="iconfont icon-shopfill">
+     <text>shop_fill</text>
+     </view>
+     <view class="iconfont icon-similar">
+     <text>similar</text>
+     </view>
+     <view class="iconfont icon-skin">
+     <text>skin</text>
+     </view>
+     <view class="iconfont icon-skinfill">
+     <text>skin_fill</text>
+     </view>
+     <view class="iconfont icon-sort">
+     <text>sort</text>
+     </view>
+     <view class="iconfont icon-sound">
+     <text>sound</text>
+     </view>
+     <view class="iconfont icon-sponsor">
+     <text>sponsor</text>
+     </view>
+     <view class="iconfont icon-sponsorfill">
+     <text>sponsor_fill</text>
+     </view>
+     <view class="iconfont icon-square">
+     <text>square</text>
+     </view>
+     <view class="iconfont icon-squarecheck">
+     <text>square_check</text>
+     </view>
+     <view class="iconfont icon-squarecheckfill">
+     <text>square_check_fill</text>
+     </view>
+     <view class="iconfont icon-stop">
+     <text>stop</text>
+     </view>
+     <view class="iconfont icon-subscription">
+     <text>subscription</text>
+     </view>
+     <view class="iconfont icon-tag">
+     <text>tag</text>
+     </view>
+     <view class="iconfont icon-tagfill">
+     <text>tag_fill</text>
+     </view>
+     <view class="iconfont icon-taoxiaopu">
+     <text>taoxiaopu</text>
+     </view>
+     <view class="iconfont icon-taxi">
+     <text>taxi</text>
+     </view>
+     <view class="iconfont icon-text">
+     <text>text</text>
+     </view>
+     <view class="iconfont icon-ticket">
+     <text>ticket</text>
+     </view>
+     <view class="iconfont icon-time">
+     <text>time</text>
+     </view>
+     <view class="iconfont icon-timefill">
+     <text>time_fill</text>
+     </view>
+     <view class="iconfont icon-top">
+     <text>top</text>
+     </view>
+     <view class="iconfont icon-triangledownfill">
+     <text>triangle_down_fill</text>
+     </view>
+     <view class="iconfont icon-triangleupfill">
+     <text>triangle_up_fill</text>
+     </view>
+     <view class="iconfont icon-unfold">
+     <text>unfold</text>
+     </view>
+     <view class="iconfont icon-unlock">
+     <text>unlock</text>
+     </view>
+     <view class="iconfont icon-upblock">
+     <text>up_block</text>
+     </view>
+     <view class="iconfont icon-upload">
+     <text>upload</text>
+     </view>
+     <view class="iconfont icon-upstage">
+     <text>upstage</text>
+     </view>
+     <view class="iconfont icon-upstagefill">
+     <text>upstage_fill</text>
+     </view>
+     <view class="iconfont icon-usefull">
+     <text>usefull</text>
+     </view>
+     <view class="iconfont icon-usefullfill">
+     <text>usefull_fill</text>
+     </view>
+     <view class="iconfont icon-video">
+     <text>video</text>
+     </view>
+     <view class="iconfont icon-videofill">
+     <text>video_fill</text>
+     </view>
+     <view class="iconfont icon-vip">
+     <text>vip</text>
+     </view>
+     <view class="iconfont icon-vipcard">
+     <text>vipcard</text>
+     </view>
+     <view class="iconfont icon-voice">
+     <text>voice</text>
+     </view>
+     <view class="iconfont icon-voicefill">
+     <text>voice_fill</text>
+     </view>
+     <view class="iconfont icon-wang">
+     <text>wang</text>
+     </view>
+     <view class="iconfont icon-wangfill">
+     <text>wang_fill</text>
+     </view>
+     <view class="iconfont icon-warn">
+     <text>warn</text>
+     </view>
+     <view class="iconfont icon-warnfill">
+     <text>warn_fill</text>
+     </view>
+     <view class="iconfont icon-we">
+     <text>we</text>
+     </view>
+     <view class="iconfont icon-weblock">
+     <text>we_block</text>
+     </view>
+     <view class="iconfont icon-wefill">
+     <text>we_fill</text>
+     </view>
+     <view class="iconfont icon-weunblock">
+     <text>we_unblock</text>
+     </view>
+     <view class="iconfont icon-weibo">
+     <text>weibo</text>
+     </view>
+     <view class="iconfont icon-wifi">
+     <text>wifi</text>
+     </view>
+     <view class="iconfont icon-write">
+     <text>write</text>
+     </view>
+     <view class="iconfont icon-writefill">
+     <text>write_fill</text>
+     </view>
+</view>

pages/icon/icon.wxss

@@ -0,0 +1,30 @@
+.doc-icon-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.doc-icon-list .iconfont {
+  width: 33.33%;
+  background: #fff;
+  text-align: center;
+  padding: 30rpx 0;
+  border-right: 1rpx solid #eee;
+  border-top: 1rpx solid #eee;
+  color: #888;
+}
+
+.doc-icon-list .iconfont:nth-child(3n) {
+  border-right: 0rpx solid #eee;
+}
+
+.doc-icon-list .iconfont::before {
+  font-size: 50rpx;
+}
+
+.doc-icon-list .iconfont text {
+  display: block;
+  color: #aaa;
+  font-size: 24rpx;
+  line-height: 60rpx;
+  font-family: Arial, -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
+}

pages/image/image.js

@@ -0,0 +1,5 @@
+// pages/document/image/image.js
+Page({
+  data: {  
+  },
+})

pages/image/image.json

@@ -0,0 +1 @@
+{}

pages/image/image.wxml

@@ -0,0 +1,75 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>基础形状</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='text-center'>
+    <image src='http://image.weilanwl.com/img/square-4.jpg' mode='widthFix' class='radius mr-df' style='width:280rpx;'></image>
+    <image src='http://image.weilanwl.com/img/square-3.jpg' mode='widthFix' class='round' style='width:280rpx;'></image>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>尺寸大小</text>
+  </view>
+</view>
+
+<view class="doc-main">
+  <view class='text-center'>
+    <image src='http://image.weilanwl.com/img/square-1.jpg' mode='widthFix' class='round mr-df img-xs'></image>
+    <image src='http://image.weilanwl.com/img/square-2.jpg' mode='widthFix' class='round mr-df img-sm'></image>
+    <image src='http://image.weilanwl.com/img/square-3.jpg' mode='widthFix' class='round mr-df img-df'></image>
+    <image src='http://image.weilanwl.com/img/square-4.jpg' mode='widthFix' class='round mr-df img-lg'></image>
+    <image src='http://image.weilanwl.com/img/square-1.jpg' mode='widthFix' class='round img-xl'></image>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>百分百图片</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='text-center'>
+    <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='widthFix' class='img-block'></image>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>宫格图片</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="lattice-image">
+    <view>
+      <image src='http://image.weilanwl.com/img/4x3-2.jpg' mode='aspectFill'></image>
+    </view>
+    <view style="background-image:url('http://image.weilanwl.com/img/4x3-3.jpg')">
+      <view class='iconfont icon-close'></view>
+    </view>
+    <view style="background-image:url('http://image.weilanwl.com/img/4x3-4.jpg')"></view>
+    <view>
+      <view class='iconfont icon-upload'></view>
+      <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
+    </view>
+    <view>
+      <image src='http://image.weilanwl.com/img/3x4-4.jpg' mode='aspectFill'></image>
+    </view>
+    <view>
+      <image src='http://image.weilanwl.com/img/3x4-1.jpg' mode='aspectFill'></image>
+    </view>
+    <view>
+      <image src='http://image.weilanwl.com/img/3x4-2.jpg' mode='aspectFill'></image>
+    </view>
+    <view>
+      <image src='http://image.weilanwl.com/img/3x4-3.jpg' mode='aspectFill'></image>
+    </view>
+    <view class='lattice-btn'>
+      <text class='iconfont icon-pic'></text>
+    </view>
+  </view>
+</view>

pages/image/image.wxss

@@ -0,0 +1,3 @@
+page{
+  background: #f5f5f5;
+}

pages/index/index.js

@@ -0,0 +1,39 @@
+//index.js
+//获取应用实例
+const app = getApp()
+
+Page({
+  data: {
+    desc: { image: '/images/index.png', text: '鲜亮的高饱和色彩，专注视觉的小程序组件库' },
+    elements: [
+      { title: '布局', name: 'layout' },
+      { title: '按钮', name: 'button' },
+      { title: '徽章', name: 'badge' },
+      { title: '边框', name: 'border' },
+      { title: '文本', name: 'text' },
+      { title: '图标 ', name: 'icon' },
+      { title: '加载', name: 'loading' },
+      { title: '图片 ', name: 'image' },
+    ],
+    modules: [
+      { title: '操作条', name: 'bar' },
+      { title: '表单', name: 'form' },
+      { title: '导航条 ', name: 'nav' },
+      { title: '列表项', name: 'item' },
+      { title: '列表 ', name: 'list' },
+      { title: '侧边栏', name: 'side' },
+      { title: '评论 ', name: 'comment' },
+      { title: '时间线', name: 'timeline' },
+      { title: '轮播 ', name: 'slider' },
+      { title: '评分', name: 'rating' },
+      { title: '弹出框 ', name: 'modal' },
+      { title: '进度条 ', name: 'progress' },
+      { title: '聊天 ', name: 'chat' },
+    ],
+    userinfo: []
+  },
+
+  onLoad: function () {
+
+  }
+})

pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "enablePullDownRefresh":false
+}

pages/index/index.wxml

@@ -0,0 +1,22 @@
+<view class="desc">
+  <image src="{{desc.image}}" mode="widthFix" class="indexImage"></image>
+  <text>{{desc.text}}</text>
+</view>
+
+<view class='title'>Elements 元素</view>
+<navigator url="../{{item.name}}/{{item.name}}" class="nav-list" wx:for="{{elements}}" wx:key="{{index}}">
+  <view class="nav-title">{{item.title}}</view>
+  <view class="nav-name">{{item.name}}</view>
+  <view class="iconfont icon-right"></view>
+</navigator>
+
+<view class='title'>Modules 模块</view>
+<navigator url="../{{item.name}}/{{item.name}}" class="nav-list" wx:for="{{modules}}" wx:key="{{index}}">
+  <view class="nav-title">{{item.title}}</view>
+  <view class="nav-name">{{item.name}}</view>
+  <view class="iconfont icon-right"></view>
+</navigator>
+<view class="foot-text">
+  <text class="iconfont icon-discover"></text>
+  <text> https://color.weilanwl.com/</text>
+</view>

pages/index/index.wxss

@@ -0,0 +1,18 @@
+page {
+  background: #f1f1f1;
+}
+
+.foot-text {
+  line-height: 100rpx;
+  text-align: center;
+  color: #aaa;
+  font-size: 26rpx;
+}
+.title{
+  text-align: center;
+  font-size: 32rpx;
+  color: #888;
+}
+.nav-list + .title {
+  margin-top: 50rpx;
+}

pages/item/item.js

@@ -0,0 +1,5 @@
+// pages/document/item/item.js
+Page({
+  data: {  
+  },
+})

pages/item/item.json

@@ -0,0 +1 @@
+{}

pages/item/item.wxml

@@ -0,0 +1,219 @@
+
+<view class='column-box'>
+  <view class='column-li'>
+    <image src='http://www.diwuyuan.com/attachs/case/137/201803/20180319_7E4E388763E70039631E31B9F9BB8A42.jpg_thumb.png' mode='widthFix'></image>
+  </view>
+  <view class='column-li'>
+    <image src='http://www.diwuyuan.com/attachs/case/137/201803/20180319_06C12D2703D564BAC06F2BCC311E9440.jpg_thumb.png' mode='widthFix'></image>
+  </view>
+  <view class='column-li'>
+    <image src='http://www.diwuyuan.com/attachs/case/18/201801/20180123_C4B1DD3B9D4326F9458A1C11FAFD23F6.jpg_thumb.png' mode='widthFix'></image>
+  </view>
+  <view class='column-li'>
+    <image src='http://www.diwuyuan.com/attachs/case/18/201801/20180123_5B3C4F1DAFB8F86186B50D18919A7BA8.jpg_thumb.png' mode='widthFix'></image>
+  </view>
+</view>
+<view class='order-box'>
+  <view class='order-item'>
+    <view class='order-bar justify-between'>
+      <view class='ml-sm'>喵星酱的杂货铺
+        <text class='iconfont icon-right'></text> </view>
+      <view class='warning-text mr-sm'>等待付款</view>
+    </view>
+    <view class='goods-main'>
+      <image src='http://image.weilanwl.com/img/square-1.jpg' mode='aspectFill' class='goods-list-img'></image>
+      <view class='goods-text'>
+        <view class=''>非常可爱的喵咪爬架 喵星酱特价供货</view>
+        <view class='gray-text text-sm'>主子爱不释爪的首选</view>
+        <view class='mt-xs'>
+          <text class='badge danger round mr-sm'>爬架</text>
+          <text class='badge success round'>喵星酱</text>
+        </view>
+      </view>
+      <view class='goods-info'>
+        <view class='price'>¥ 520.00</view>
+        <view class='del-price'>¥ 1314.00</view>
+        <view class='goods-num'>x 2</view>
+      </view>
+    </view>
+    <view class='pt-sm pr-sm text-right'>
+      共2件商品 合计:￥2360.00 (含运费￥)
+    </view>
+    <view class='flex p-sm justify-end'>
+      <view class=''>
+        <button class='gray btn mr-sm'>查看详情</button>
+        <button class='warning btn'>立即付款</button>
+      </view>
+    </view>
+  </view>
+</view>
+
+<view class='item-list-box mt-sm'>
+  <view class="goods-list-li">
+    <view class='goods-list-main'>
+      <image src='http://image.weilanwl.com/img/4x4.jpg' mode='aspectFill' class='goods-list-img'></image>
+      <view class='goods-list-text'>
+        <view class='goods-list-top'>
+          <view class='text-lg'>【新品首发】微信小程序前端定制化服务 </view>
+          <view class='gray-text'>ColorUi规范 精简 高效</view>
+        </view>
+        <view class='goods-list-foot'>
+          <view class='goods-list-price'>0.01
+            <text class='gray-text'>9689</text>
+          </view>
+          <button class='danger btn sm'> 去购买
+            <text class='iconfont icon-right'></text>
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="case-list-li">
+    <view class="case-list-img">
+      <image src="http://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
+      <view class="case-list-badge">标签</view>
+      <view class="case-list-title">小主子卖萌熊猫套装</view>
+    </view>
+    <view class="item-list-data">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class='item-list-author'>
+        <view class="item-list-name">文晓港
+          <text>/ 伪铲屎官</text>
+        </view>
+        <view class="item-list-info">
+          <text class="iconfont icon-timefill"> 十天前</text>
+          <view class="item-list-num">
+            <text class="iconfont icon-attentionfill"> 10</text>
+            <text class="iconfont icon-favorfill"> 20</text>
+            <text class="iconfont icon-messagefill"> 30</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="article-list-li">
+    <view class="article-list-title">这里有个戏精铲屎官，主子了解一下？</view>
+    <view class="article-list-content">
+      <view class="article-list-thumbs">
+        <image src="http://image.weilanwl.com/img/4x3-3.jpg" mode="widthFix"></image>
+      </view>
+      <view class="article-list-desc">
+        <view class='article-list-text'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
+        <view class="article-list-tag">
+          <view class='badge danger round mr-sm'>假装有猫系列</view>
+          <view class='badge success round'>戏精系列</view>
+        </view>
+      </view>
+    </view>
+    <view class="item-list-data">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class='item-list-author'>
+        <view class="item-list-name">文晓港
+          <text>/ 程序员</text>
+        </view>
+        <view class="item-list-info">
+          <text class="iconfont icon-timefill"> 十天前</text>
+          <view class="item-list-num">
+            <text class="iconfont icon-attentionfill"> 10</text>
+            <text class="iconfont icon-favorfill"> 20</text>
+            <text class="iconfont icon-messagefill"> 30</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="article-list-li">
+    <view class="article-list-title">这是没有图片的文章列表项的标题</view>
+    <view class="article-list-content">
+      <view class="article-list-desc">
+        <view class='article-list-text'>其实吧，做程序员也不都是枯燥乏味的，比如我吧，为了写段话在这里凑字数也是很开心的呀，嘻嘻嘻！求关注！持续更新组件...</view>
+        <view class="article-list-tag">
+          <view class='badge warning round'># 严肃脸 #</view>
+        </view>
+      </view>
+    </view>
+    <view class="item-list-data">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class='item-list-author'>
+        <view class="item-list-name">文晓港
+          <text>/ 90后</text>
+        </view>
+        <view class="item-list-info">
+          <text class="iconfont icon-timefill"> 十天前</text>
+          <view class="item-list-num">
+            <text class="iconfont icon-attentionfill"> 10</text>
+            <text class="iconfont icon-favorfill"> 20</text>
+            <text class="iconfont icon-messagefill"> 30</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+
+</view>
+<view class='card-list-box'>
+  <view class="ins-list-li">
+    <view class="ins-list-img">
+      <image src="http://image.weilanwl.com/img/3x4-1.jpg" mode="widthFix"></image>
+      <view class="ins-list-num">
+        <text class="iconfont icon-attentionfill">10</text>
+        <text class="iconfont icon-favorfill">20</text>
+        <text class="iconfont icon-picfill">30</text>
+      </view>
+      <view class="ins-list-title">小兔几</view>
+    </view>
+    <view class="ins-list-author">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class="ins-list-name">文晓港</view>
+    </view>
+  </view>
+  <view class="ins-list-li">
+    <view class="ins-list-img">
+      <image src="http://image.weilanwl.com/img/3x4-2.jpg" mode="widthFix"></image>
+      <view class="ins-list-num">
+        <text class="iconfont icon-attentionfill">10</text>
+        <text class="iconfont icon-favorfill">20</text>
+        <text class="iconfont icon-picfill">30</text>
+      </view>
+      <view class="ins-list-title">瓜皮的id酱的照片</view>
+    </view>
+    <view class="ins-list-author">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class="ins-list-name">文晓港</view>
+    </view>
+  </view>
+  <view class="ins-list-li">
+    <view class="ins-list-img">
+      <image src="http://image.weilanwl.com/img/3x4-3.jpg" mode="widthFix"></image>
+      <view class="ins-list-num">
+        <text class="iconfont icon-attentionfill"> 10</text>
+        <text class="iconfont icon-favorfill"> 20</text>
+        <text class="iconfont icon-picfill"> 30</text>
+      </view>
+      <view class="ins-list-title">求收养</view>
+    </view>
+    <view class="ins-list-author">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class="ins-list-name">文晓港</view>
+    </view>
+  </view>
+  <view class="ins-list-li">
+    <view class="ins-list-img">
+      <image src="http://image.weilanwl.com/img/3x4-4.jpg" mode="widthFix"></image>
+      <view class="ins-list-num">
+        <text class="iconfont icon-attentionfill"> 10</text>
+        <text class="iconfont icon-favorfill"> 20</text>
+        <text class="iconfont icon-picfill"> 30</text>
+      </view>
+      <view class="ins-list-title">小主子和Ta的玩具.jpg</view>
+    </view>
+    <view class="ins-list-author">
+      <image src="http://image.weilanwl.com/img/4x4.jpg" class='round'></image>
+      <view class="ins-list-name">文晓港</view>
+    </view>
+  </view>
+</view>

pages/item/item.wxss

@@ -0,0 +1,3 @@
+page{
+  background: #f1f1f1;
+}

pages/label/label.js

@@ -0,0 +1,5 @@
+// pages/document/label/label.js
+Page({
+  data: {  
+  },
+})

pages/label/label.json

@@ -0,0 +1 @@
+{}

pages/label/label.wxml

@@ -0,0 +1,5 @@
+<view class='screen'>
+  <view class='iconfont icon-discover gray-text'>
+    <view class='text-df'>组件开发中...</view>
+  </view>
+</view>

pages/label/label.wxss

@@ -0,0 +1,10 @@
+.textarea {
+  width: 100%;
+  z-index: 999;
+  bottom: 0;
+  background: #aaa
+}
+.textarea  textarea {
+  background: #666
+}
+

pages/layout/layout.js

@@ -0,0 +1,66 @@
+// pages/document/layout/layout.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+  
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+  
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  
+  }
+})

pages/layout/layout.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "布局/Layout"
+}

pages/layout/layout.wxml

@@ -0,0 +1,134 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>Flex 布局</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view>
+    <text class='iconfont icon-title success-text'></text> 固定尺寸
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm flex-wrap">
+    <view class='basis-xs doc-box-sub p-sm m-xs'>xs(20%)</view>
+    <view class='basis-df'></view>
+    <view class='basis-sm doc-box-sub p-sm m-xs'>sm(40%)</view>
+    <view class='basis-df'></view>
+    <view class='basis-df doc-box-sub p-sm m-xs'>sub(50%)</view>
+    <view class='basis-lg doc-box-sub p-sm m-xs'>lg(60%)</view>
+    <view class='basis-xl doc-box-sub p-sm m-xs'>xl(80%)</view>
+  </view>
+  <view>
+    <text class='iconfont icon-title success-text'></text> 比例
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm">
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm">
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+    <view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm">
+    <view class='flex-sub doc-box-sub p-sm m-xs'>1</view>
+    <view class='flex-twice doc-box-sub p-sm m-xs'>2</view>
+    <view class='flex-treble doc-box-sub p-sm m-xs'>3</view>
+  </view>
+  <view>
+    <text class='iconfont icon-title success-text'></text> 水平对齐
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-start">
+    <view class='doc-box-sub p-sm m-xs'>start</view>
+    <view class='doc-box-sub p-sm m-xs'>start</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-end">
+    <view class='doc-box-sub p-sm m-xs'>end</view>
+    <view class='doc-box-sub p-sm m-xs'>end</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-center">
+    <view class='doc-box-sub p-sm m-xs'>center</view>
+    <view class='doc-box-sub p-sm m-xs'>center</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-between">
+    <view class='doc-box-sub p-sm m-xs'>between</view>
+    <view class='doc-box-sub p-sm m-xs'>between</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm justify-around">
+    <view class='doc-box-sub p-sm m-xs'>around</view>
+    <view class='doc-box-sub p-sm m-xs'>around</view>
+  </view>
+  <view>
+    <text class='iconfont icon-title success-text'></text> 垂直对齐
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm align-start">
+    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
+    <view class='doc-box-sub p-sm m-xs'>start</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm align-end">
+    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
+    <view class='doc-box-sub p-sm m-xs'>end</view>
+  </view>
+  <view class="flex doc-box p-xs mt-sm mb-sm align-center">
+    <view class='doc-box-sub big-sub p-sm m-xs'>ColorUi</view>
+    <view class='doc-box-sub p-sm m-xs'>center</view>
+  </view>
+</view>
+<view class="bar mt-sm solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>内外边距</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view>{size}的尺寸有xs/sm/df/lg/xl</view>
+  <view class='doc-box flex flex-wrap pv-xs ph-df mt-sm'>
+    <view class="basis-df">外边距</view>
+    <view class="basis-df">内边距</view>
+    <view class="basis-df">.m-{size}</view>
+    <view class="basis-df">.p-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm  pv-xs ph-df'>
+    <view class="basis-df">水平方向外边距</view>
+    <view class="basis-df">水平方向内边距</view>
+    <view class="basis-df">.mh-{size}</view>
+    <view class="basis-df">.ph-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">垂直方向外边距</view>
+    <view class="basis-df">垂直方向内边距</view>
+    <view class="basis-df">.mv-{size}</view>
+    <view class="basis-df">.pv-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">上外边距</view>
+    <view class="basis-df">上内边距</view>
+    <view class="basis-df">.mt-{size}</view>
+    <view class="basis-df">.pt-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">右外边距</view>
+    <view class="basis-df">右内边距</view>
+    <view class="basis-df">.mr-{size}</view>
+    <view class="basis-df">.pr-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">下外边距</view>
+    <view class="basis-df">下内边距</view>
+    <view class="basis-df">.mb-{size}</view>
+    <view class="basis-df">.pb-{size}</view>
+  </view>
+  <view class='doc-box flex flex-wrap mt-sm pv-xs ph-df'>
+    <view class="basis-df">左外边距</view>
+    <view class="basis-df">左内边距</view>
+    <view class="basis-df">.ml-{size}</view>
+    <view class="basis-df">.pl-{size}</view>
+  </view>
+</view>
+<view class="bar mt-sm solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>浮动</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="doc-box cf p-sm">
+    <view class='doc-box-sub fl p-sm'>ColorUi fl</view>
+    <view class='doc-box-sub fr p-sm'>ColorUi fr</view>
+  </view>
+</view>

pages/layout/layout.wxss

@@ -0,0 +1,3 @@
+page{
+  background: #f5f5f5;
+}

pages/list/list.js

@@ -0,0 +1,5 @@
+// pages/element/list/list.js
+Page({
+  data: {  
+  },
+})

pages/list/list.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "列表/list"
+}

pages/list/list.wxml

@@ -0,0 +1,228 @@
+<view class="user">
+  <view class="user-top">
+    <view class="user-img">
+      <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='radius'></image>
+    </view>
+    <view class="user-text">
+      <view class="user-name">
+        文晓港
+        <text>切图仔</text>
+      </view>
+      <view class="user-sub cf">
+        <navigator hover-class='none' class='gray btn xs round'>编辑资料</navigator>
+        <navigator hover-class='none' class='fr'>
+          <text class='iconfont icon-qrcode'></text> 个人名片</navigator>
+      </view>
+    </view>
+  </view>
+  <view class="user-nav icon-nav-box">
+    <view class="icon-nav">
+      <navigator hover-class="none" class="icon-nav-navigator">
+        <text class="iconfont icon-moneybagfill"></text>
+        <text class="icon-nav-text">资金</text>
+      </navigator>
+      <navigator hover-class="none" class="icon-nav-navigator">
+        <text class="iconfont icon-radiobox"></text>
+        <text class="icon-nav-text">圈子</text>
+      </navigator>
+      <navigator hover-class="none" class="icon-nav-navigator">
+        <text class="iconfont icon-cartfill"><text class='badge mark-badge'>9</text></text>
+        <text class="icon-nav-text">购物车</text>
+      </navigator>
+      <navigator hover-class="none" class="icon-nav-navigator">
+        <text class="iconfont icon-messagefill"><text class='badge mark-badge'>99+</text></text>
+        <text class="icon-nav-text">消息</text>
+      </navigator>
+    </view>
+  </view>
+  <view class='user-bg' style='background-image:url(http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg)'>
+  </view>
+</view>
+<view class="list-box">
+  <view class="list-li">
+    <view class="list-text">
+      <view class="iconfont icon-list warning-text"> </view>
+      默认
+    </view>
+  </view>
+  <view class="list-li list-arrow">
+    <view class="list-text">
+      <view class="iconfont icon-right warning-text"> </view> 带箭头
+    </view>
+  </view>
+  <navigator url="" hover-class="none" class="list-li">
+    <view class="list-text">
+      <view class="iconfont icon-medal primary-text"> </view> 带徽章
+    </view>
+    <view class="list-badge">
+      <text class='badge warning-badge round'>徽章</text>
+      <text class='badge secondary-badge radius '>徽章</text>
+    </view>
+  </navigator>
+  <navigator url="" hover-class="none" class="list-li list-arrow">
+    <view class="list-text">
+      <view class="iconfont icon-medal primary-text"> </view> 带图标的提示
+    </view>
+    <view class="list-icon iconfont icon-appreciatefill warning-text">
+      点赞
+    </view>
+  </navigator>
+  <navigator url="" hover-class="none" class="list-li list-arrow">
+    <view class="list-text">
+      <view class="iconfont icon-medal danger-text"> </view> 带说明
+    </view>
+    <view class="list-icon gray-text">
+      小目标还没实现！
+    </view>
+  </navigator>
+</view>
+<view class='list-box'>
+  <view class="list-li">
+    <view class='list-tx'>
+      <view class='list-tx-img'>
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg"></image>
+      </view>
+      <text> 名字</text>
+    </view>
+    <view class="delet-box iconfont icon-delete"></view>
+  </view>
+  <view class="list-li">
+    <view class='list-tx'>
+      <view class='list-tx-img'>
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg"></image>
+      </view>
+      <text> 名字</text>
+    </view>
+    <view class="delet-box iconfont icon-delete"></view>
+  </view>
+  <view class="list-li">
+    <view class='list-tx'>
+      <view class='list-tx-img'>
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg"></image>
+      </view>
+      <text> 名字</text>
+    </view>
+    <view class="delet-box iconfont icon-delete"></view>
+  </view>
+</view>
+<view class="list-box">
+  <view class="list-li">
+    <view class="list-text">
+      <view class="iconfont icon-medal danger-text"> </view> 带信息
+      <text>信息内容</text>
+    </view>
+  </view>
+  <view class="list-li">
+    <view class="list-text">
+      <view class="iconfont icon-medal danger-text"> </view> 带头像
+    </view>
+    <view class="list-tx">
+      <view class='list-tx-img'>
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" mode="aspectFill"></image>
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" mode="aspectFill"></image>
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" mode="aspectFill"></image>
+      </view>
+      <text>3 人</text>
+    </view>
+  </view>
+  <navigator url="" hover-class="none" class="list-li">
+    <view class="list-text">
+      <view class="iconfont icon-medal primary-text"> </view> 带按钮
+    </view>
+    <view class="list-btn">
+      <button class='primary btn'>
+        <text class='iconfont icon-yinsi'></text> 按钮</button>
+      <button class='danger btn'>按钮</button>
+    </view>
+  </navigator>
+</view>
+<view class="list-box list-double-col">
+  <view class="list-li">
+    <view class="list-text">
+      带信息
+      <text>信息内容</text>
+    </view>
+  </view>
+  <view class="list-li">
+    <view class="list-text">
+      <view class="iconfont icon-medal danger-text"> </view> 双列
+    </view>
+  </view>
+  <navigator url="" hover-class="none" class="list-li">
+    <view class="list-text success-text">
+      消息
+    </view>
+    <view class="list-badge">
+      <text class='badge mark-badge cur'></text>
+    </view>
+  </navigator>
+  <navigator url="" hover-class="none" class="list-li">
+    <view class='list-text warning-text'>访客</view>
+    <view class="list-badge">
+      <text class='badge mark-badge'>99+</text>
+    </view>
+  </navigator>
+  <navigator url="" hover-class="none" class="list-li">
+    <view class="list-text">
+      没有图标
+    </view>
+    <view class="list-btn">
+      <button class='danger btn'>按钮</button>
+    </view>
+  </navigator>
+  <view class="list-li">
+  </view>
+</view>
+<view class='list-box lattice-list'>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+  <view class='lattice-li'>
+    <view class="iconfont icon-countdown danger-text"> </view>
+    <view class="lattice-text">
+      宫格列表
+    </view>
+  </view>
+</view>
+<view class='pv-sm text-center'>
+  <button class='danger btn'>按钮</button>
+</view>

pages/list/list.wxss

@@ -0,0 +1,3 @@
+page {
+  background: #f1f1f1;
+}

pages/loading/loading.js

@@ -0,0 +1,26 @@
+// pages/element/loading/loading.js
+Page({
+  data: {
+    loading: true
+  },
+  showLoading: function () {
+    var that = this;
+    this.setData({
+      showLoading: true
+    })
+
+    setTimeout(function () {
+      that.setData({
+        showLoading: false
+      })
+    }, 2000)
+  },
+  // onLoad: function () {
+  //   var that = this;
+  //   setTimeout(function () {
+  //     that.setData({
+  //       loading: true
+  //     })
+  //   }, 3000)
+  // }
+})

pages/loading/loading.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "加载/Loading"
+}

pages/loading/loading.wxml

@@ -0,0 +1,49 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>底部-加载中</text>
+  </view>
+</view>
+<view class="loading-more {{loading?'cur':''}}">
+  <view class='no-more'>
+    <text class='iconfont icon-info'></text> 我也是有底线的！
+  </view>
+  <view class='loading-ing'>
+    <text class='iconfont icon-loading iconfont-spin'></text> 加载中...
+  </view>
+</view>
+
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>底部-加载完毕</text>
+  </view>
+</view>
+
+<view class="loading-more {{!loading?'cur':''}}">
+  <view class='no-more'>
+    <text class='iconfont icon-info'></text> 我也是有底线的！
+  </view>
+  <view class='loading-ing'>
+    <text class='iconfont icon-loading iconfont-spin'></text> 加载中...
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>弹出框-加载</text>
+  </view>
+</view>
+<view class='doc-main'>
+  <view class='text-center'>
+    <button class='warning btn' bindtap='showLoading'>点我</button>
+  </view>
+</view>
+<view class='mode-loading' wx:if="{{showLoading}}">
+  <view class='mode-text'>
+    <view class='iconfont icon-emojifill warning-text'></view>
+    <view class='gray-text'>加载中...</view>
+  </view>
+</view>

pages/loading/loading.wxss

@@ -0,0 +1,10 @@
+image{
+  width: 100%;
+  display:block;
+}
+page {
+  background: #f1f1f1;
+}
+.doc-main-title{
+  padding: 0 20rpx;
+}

pages/modal/modal.js

@@ -0,0 +1,29 @@
+var app =getApp()
+Page({
+
+  data: {
+    items: [
+      { name: 'USA', value: '美国' },
+      { name: 'CHN', value: '中国', checked: 'true' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'ENG', value: '英国' },
+      { name: 'TUR', value: '法国' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'ENG', value: '英国' },
+      { name: 'TUR', value: '法国' }
+    ]
+  },
+  showModal: function (e) {
+    var showName = e.currentTarget.dataset.modal;
+    this.setData({
+      modalName: showName
+    })
+  },
+  closeModal: function (e) {
+    this.setData({
+      modalName: null
+    })
+  },
+})

pages/modal/modal.json

@@ -0,0 +1 @@
+{}

pages/modal/modal.wxml

@@ -0,0 +1,99 @@
+<view class="nav-list {{modalName=='defualtmodal'?'cur':''}}" bindtap='showModal' data-modal="defualtmodal">
+  <view class="nav-title">普通弹出层</view>
+  <view class="iconfont icon-right"></view>
+</view>
+<view class="nav-list {{modalName=='bottomModal'?'cur':''}}" bindtap='showModal' data-modal="bottomModal">
+  <view class="nav-title">底部弹出层</view>
+  <view class="iconfont icon-right"></view>
+</view>
+
+
+<view class="nav-list {{modalName=='modal'?'cur':''}}" bindtap='showModal' data-modal="modal">
+  <view class="nav-title">两个操作的模态框</view>
+  <view class="iconfont icon-right"></view>
+</view>
+
+
+<view class="nav-list {{modalName=='modals'?'cur':''}}" bindtap='showModal' data-modal="modals">
+  <view class="nav-title">多个操作的模态框</view>
+  <view class="iconfont icon-right"></view>
+</view>
+
+
+
+<view class="modal-box {{modalName=='defualtmodal'?'cur':''}}">
+  <view class='modal-dialog'>
+    <view class="modal-title">
+      <text>复选框</text>
+      <view class='bar-close badge danger round' bindtap='closeModal'>
+        <text class='iconfont icon-close'></text>
+      </view>
+    </view>
+    <view class='modal-bd'>
+      <radio-group class="list-double-col list-box" bindchange="radioChange">
+        <label class="radio list-li" wx:for="{{items}}">
+          <view class='list-text'>{{item.value}}</view>
+          <radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
+        </label>
+      </radio-group>
+    </view>
+  </view>
+</view>
+
+
+<view class="modal-box bottom-modal {{modalName=='bottomModal'?'cur':''}}">
+  <view class='modal-dialog'>
+    <view class="modal-title">
+      <text>复选框</text>
+      <view class='bar-close badge danger round' bindtap='closeModal'>
+        <text class='iconfont icon-close'></text>
+      </view>
+    </view>
+    <view class='modal-bd'>
+      <radio-group class="list-double-col list-box" bindchange="radioChange">
+        <label class="list-li" wx:for="{{items}}">
+          <view class='list-text'>{{item.value}}</view>
+          <radio value="{{item.name}}" checked="{{item.checked}}" class='list-icon' />
+        </label>
+      </radio-group>
+    </view>
+  </view>
+</view>
+
+<view class="modal-box {{modalName=='modal'?'cur':''}}">
+  <view class='modal-dialog'>
+    <view class="modal-title">
+      <text>复选框</text>
+      <view class='bar-close badge danger round' bindtap='closeModal'>
+        <text class='iconfont icon-close'></text>
+      </view>
+    </view>
+    <view class='modal-bd modal-message'>
+      带确认和取消
+    </view>
+    <view class='modal-option'>
+      <view class='modal-option-btn'>取消</view>
+      <view class='modal-option-btn success-text'>确认</view>
+    </view>
+  </view>
+</view>
+
+<view class="modal-box {{modalName=='modals'?'cur':''}}">
+  <view class='modal-dialog'>
+    <view class="modal-title">
+      <text>请选择</text>
+      <view class='bar-close badge danger round' bindtap='closeModal'>
+        <text class='iconfont icon-close'></text>
+      </view>
+    </view>
+    <view class='modal-bd modal-message'>
+      带确认和取消
+    </view>
+    <view class='modal-option'>
+      <view class='modal-option-btn success-text'>
+        <text class='iconfont icon-moneybag'></text> 微信支付</view>
+      <view class='modal-option-btn'>取消</view>
+      <view class='modal-option-btn '>确认</view>
+    </view>
+  </view>
+</view>

pages/modal/modal.wxss

@@ -0,0 +1,3 @@
+page {
+  background: #f1f1f1;
+}

pages/nav/nav.js

@@ -0,0 +1,24 @@
+// pages/element/bar/bar.js
+Page({
+  data: {
+    nav: [
+      { title: '可滚动', name: 'norm' },
+      { title: '居中', name: 'center' },
+      { title: '深色', name: 'success' },
+      { title: '带菜单', name: 'menu' },
+      { title: '图标导航', name: 'icon' }
+    ],
+    navName: 'norm'
+  },
+  navScroll: function (e) {
+    var sl = e.detail.scrollLeft * 0.1;
+    this.setData({
+      scrollleft: sl
+    })
+  },
+  setName: function (e) {
+    this.setData({
+      navName: e.currentTarget.dataset.name
+    })
+  }
+})

pages/nav/nav.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "导航栏/Nav"
+}

pages/nav/nav.wxml

@@ -0,0 +1,111 @@
+<!--顶部导航-->
+<view class="nav" wx:if="{{navName=='norm'}}">
+  <view class="nav-item-box">
+    <view class="nav-item">全球</view>
+    <view class="nav-item cur">中国</view>
+    <view class="nav-item">美国</view>
+    <view class="nav-item">巴西</view>
+    <view class="nav-item">日本</view>
+    <view class="nav-item">德国</view>
+    <view class="nav-item">加拿大</view>
+  </view>
+</view>
+
+<view class="nav center-nav" wx:if="{{navName=='center'}}">
+  <view class="nav-item-box">
+    <view class="nav-item">
+      <text class='iconfont icon-album'></text> 图集</view>
+    <view class="nav-item cur">
+      <text class='iconfont icon-video'></text> 视频</view>
+  </view>
+</view>
+
+<view class="nav center-nav success-nav" wx:if="{{navName=='success'}}">
+  <view class="nav-item-box">
+    <view class="nav-item">
+      <text class='iconfont icon-album'></text> 图集</view>
+    <view class="nav-item cur">
+      <text class='iconfont icon-video'></text> 视频</view>
+  </view>
+</view>
+
+
+<view class="nav menu-nav" wx:if="{{navName=='menu'}}">
+  <view class="nav-item-box">
+    <view class="nav-item">
+      <text class='iconfont icon-hot'></text> 热销</view>
+    <view class="nav-item cur">衣服</view>
+    <view class="nav-item">裤子</view>
+    <view class="nav-item">箱包</view>
+    <view class="nav-item">手表</view>
+    <view class="nav-item">珠宝</view>
+    <view class="nav-item">数码</view>
+    <view class="nav-item">家居</view>
+  </view>
+  <view class="menu-nav-btn">筛选
+    <text class="iconfont icon-filter success-text"></text>
+  </view>
+</view>
+
+<scroll-view scroll-x="true" class="icon-nav-box" bindscroll="navScroll" wx:if="{{navName=='icon'}}">
+  <view class="icon-nav">
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-picfill"></text>
+      <text class="icon-nav-text">图集</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-cardboardfill"></text>
+      <text class="icon-nav-text">VR</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-discoverfill"><text class='badge mark-badge cur'></text></text>
+      <text class="icon-nav-text">发现</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-cartfill"><text class='badge mark-badge'>9</text></text>
+      <text class="icon-nav-text">购物车</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-favorfill"></text>
+      <text class="icon-nav-text">收藏</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-locationfill"></text>
+      <text class="icon-nav-text">附近</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-weibo"><text class='badge mark-badge'>New</text></text>
+      <text class="icon-nav-text">微博</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-selectionfill"></text>
+      <text class="icon-nav-text">勋章</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-messagefill"><text class='badge mark-badge'>99+</text></text>
+      <text class="icon-nav-text">消息</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-recordfill"></text>
+      <text class="icon-nav-text">短视频</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-redpacket_fill"></text>
+      <text class="icon-nav-text">红包</text>
+    </navigator>
+    <navigator class="icon-nav-navigator">
+      <text class="iconfont icon-timefill"></text>
+      <text class="icon-nav-text">历史记录</text>
+    </navigator>
+  </view>
+</scroll-view>
+<view class="icon-bar-box" wx:if="{{navName=='icon'}}">
+  <view class="icon-bar">
+    <view class="icon-bar-dot" style='margin-left:{{scrollleft}}%'></view>
+  </view>
+</view>
+
+<view class="nav-list {{navName==item.name?'cur':''}}" wx:for="{{nav}}" wx:key="{{index}}" bindtap='setName' data-name='{{item.name}}'>
+  <view class="nav-title">{{item.title}}</view>
+  <view class="iconfont icon-right"></view>
+</view>

pages/nav/nav.wxss

@@ -0,0 +1,3 @@
+page {
+  background: #f1f1f1;
+}

pages/norm/norm.js

@@ -0,0 +1,5 @@
+// pages/element/norm/norm.js
+Page({
+  data: {  
+  },
+})

pages/norm/norm.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "规范/Norm"
+}

pages/norm/norm.wxml

@@ -0,0 +1,30 @@
+<!--pages/element/norm/norm.wxml-->
+<view class="doc-main">
+  <view class="doc-main-title">CSS 盒模型</view>
+  <view class="doc-main-content">
+    <text>Color UI将所有元素的盒模型 </text><view class="code">box-sizing</view><text> 设置为 </text><view class="code">border-box</view>
+    <text> 这一属性，减少不必要的计算</text>
+  </view>
+  <view class="pre">view, text, scroll-view, swiper, button, form, input, textarea, label, navigator, image {
+  box-sizing: border-box;
+}</view>
+  <view class="doc-main-title">页面默认样式</view>
+  <view class="doc-main-content">    
+    <text>页面 </text><view class="code">page</view><text> 有默认的设置参数 </text>
+  </view>
+  <view class="pre">page {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.6;
+  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
+}</view>
+  <view class="doc-main-title">尺寸单位</view>
+  <view class="doc-main-content">    
+    <text>Color UI将继续使用小程序默认的单位 </text><view class="code">rpx</view>
+  </view>
+  <view class="doc-main-content">    
+    <text> rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。</text>
+  </view>
+</view>
+
+

pages/norm/norm.wxss

@@ -0,0 +1 @@
+/* pages/element/norm/norm.wxss */

pages/progress/progress.js

@@ -0,0 +1,5 @@
+// pages/document/progress/progress.js
+Page({
+  data: {  
+  },
+})

pages/progress/progress.json

@@ -0,0 +1 @@
+{}

pages/progress/progress.wxml

@@ -0,0 +1,110 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>基本样式</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="progress mb-sm round">
+    <view class="progress-bar " style="width: 30%"></view>
+  </view>
+  <view class="progress">
+    <view class="progress-bar" style="width: 40%">40%</view>
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>进度条颜色</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="progress mb-sm">
+    <view class="progress-bar" style="width: 15%"></view>
+  </view>
+
+  <view class="progress mb-sm">
+    <view class="progress-bar progress-bar-secondary" style="width: 30%"></view>
+  </view>
+
+  <view class="progress mb-sm">
+    <view class="progress-bar progress-bar-success" style="width: 45%"></view>
+  </view>
+
+  <view class="progress mb-sm">
+    <view class="progress-bar progress-bar-warning" style="width: 60%"></view>
+  </view>
+
+  <view class="progress">
+    <view class="progress-bar progress-bar-danger" style="width: 75%"></view>
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>进度条高度</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="progress progress-xs mb-sm">
+    <view class="progress-bar" style="width: 80%"></view>
+  </view>
+
+  <view class="progress progress-sm mb-sm">
+    <view class="progress-bar" style="width: 60%"></view>
+  </view>
+
+  <view class="progress">
+    <view class="progress-bar" style="width: 40%"></view>
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>进度条条纹</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="progress mt-sm progress-striped">
+    <view class="progress-bar progress-bar-danger" style="width: 80%"></view>
+  </view>
+  <view class="progress mt-sm progress-striped">
+    <view class="progress-bar progress-bar-warning" style="width: 60%"></view>
+  </view>
+  <view class="progress mt-sm progress-striped">
+    <view class="progress-bar progress-bar-success" style="width: 45%"></view>
+  </view>
+  <view class="progress mt-sm progress-striped">
+    <view class="progress-bar progress-bar-secondary" style="width: 30%"></view>
+  </view>
+  <view class="progress mt-sm progress-striped">
+    <view class="progress-bar" style="width: 15%"></view>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>进度条动画</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="progress progress-striped progress-sm active ">
+    <view class="progress-bar progress-bar-secondary" style="width: 57%"></view>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>进度条动画</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class="progress">
+    <view class="progress-bar" style="width: 65%">Male</view>
+    <view class="progress-bar progress-bar-success" style="width: 15%">Female</view>
+    <view class="progress-bar progress-bar-warning" style="width: 20%">Other</view>
+  </view>
+</view>

pages/progress/progress.wxss

@@ -0,0 +1,3 @@
+page {
+  background: #f1f1f1;
+}

pages/rating/rating.js

@@ -0,0 +1,29 @@
+
+Page({
+  data: {
+    rating: [{
+      id: 0,
+      title: '描述相符',
+      scores: 0,
+    }, {
+      id: 1,
+      title: '物流服务',
+      scores: 0,
+    }, {
+      id: 2,
+      title: '服务态度',
+      scores: 0,
+    }]
+  },
+  onLoad: function (options) {
+
+  },
+  setScores: function (e) {
+    var id = e.currentTarget.dataset.id;
+    var index = e.currentTarget.dataset.index;
+    this.data.rating[id].scores = index;
+    this.setData({
+      rating: this.data.rating
+    })
+  }
+})

pages/rating/rating.json

@@ -0,0 +1 @@
+{}

pages/rating/rating.wxml

@@ -0,0 +1,21 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>星级评分</text>
+  </view>
+</view>
+<view class='doc-main'>
+  <view class='rating-item' wx:for="{{rating}}" wx:for-item="rat">
+    <view class='rating-title'>{{rat.title}}</view>
+    <view class='rating-star'>
+      <text wx:for="{{5}}" class="iconfont {{index<rat.scores?'icon-favorfill warning-text':'icon-favor gray-text'}}" bindtap='setScores' data-id='{{rat.id}}' data-index='{{index+1}}'></text>
+    </view>
+    <view class='rating-text gray-text'>
+      <text wx:if="{{rat.scores==5}}">非常好</text>
+      <text wx:if="{{rat.scores==4}}">好</text>
+      <text wx:if="{{rat.scores==3}}">一般</text>
+      <text wx:if="{{rat.scores==2}}">差</text>
+      <text wx:if="{{rat.scores==1}}">非常差</text>
+    </view>
+  </view>
+</view>

pages/rating/rating.wxss

@@ -0,0 +1,14 @@
+page{
+  background: #f5f5f5;
+}
+.rating-item{
+  display: flex;
+  line-height: 60rpx;
+}
+.rating-title,.rating-star {
+  padding: 0 10rpx;
+}
+.rating-star text{
+    padding: 0 10rpx;
+    font-size: 32rpx;
+}

pages/side/side.js

@@ -0,0 +1,28 @@
+Page({
+  data: {
+    radio: [
+      { name: 'USA', value: '美国' },
+      { name: 'CHN', value: '中国', checked: 'true' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'ENG', value: '澳大利亚' },
+      { name: 'TUR', value: '哈萨克斯坦' },
+      { name: 'TUR', value: '法国' },
+      { name: 'BRA', value: '巴西' },
+      { name: 'JPN', value: '日本' },
+      { name: 'ENG', value: '英国' },
+      { name: 'TUR', value: '法国' }
+    ],
+  },
+  showModal: function (e) {
+    var showName = e.currentTarget.dataset.modal;
+    this.setData({
+      modalName: showName
+    })
+  },
+  closeModal: function (e) {
+    this.setData({
+      modalName: null
+    })
+  }
+})

pages/side/side.json

@@ -0,0 +1 @@
+{}

pages/side/side.wxml

@@ -0,0 +1,80 @@
+<view class="bar justify-between">
+  <view class='ml-sm' bindtap='showModal' data-modal='listSide'>
+    <view class='btn success sm radius'>
+      <text class='iconfont icon-list'> 侧边菜单</text>
+    </view>
+  </view>
+  <view class='mr-sm' bindtap='showModal' data-modal='menuSide'>筛选
+    <text class="iconfont icon-filter success-text"></text>
+  </view>
+</view>
+<view class='side side-right' wx:if="{{modalName=='menuSide'}}">
+  <view class='side-close' bindtap='closeModal'></view>
+  <view class="bar">
+    <view class='text-lg'>
+      <text class=' iconfont icon-title success-text ml-sm'></text> 城市
+    </view>
+  </view>
+  <view class='double-chose'>
+    <scroll-view scroll-y class="double-chose-first" style='height:240px;width: 400rpx;'>
+      <view class="cur">北京</view>
+      <view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
+    </scroll-view>
+    <scroll-view scroll-y class="double-chose-last" style='height:240px;'>
+      <view class="cur">北京</view>
+      <view class="" wx:for="asdasdasdasdasdasdasdasdasd">北京</view>
+    </scroll-view>
+  </view>
+  <view class="bar mt-sm">
+    <view class='text-lg'>
+      <text class=' iconfont icon-title success-text ml-sm'></text> 国家
+    </view>
+  </view>
+  <scroll-view class='modal-bd' scroll-y="true" style='max-height:800rpx;'>
+    <view class='single-modal'>
+      <view class="single-modal-item {{item.checked?'cur':''}}" wx:for="{{radio}}">{{item.value}}</view>
+    </view>
+  </scroll-view>
+  <view class='flex justify-center bar'>
+    <button class='success btn hollow mr-sm'>重置</button>
+    <button class='warning btn' bindtap='closeModal'>确定</button>
+  </view>
+</view>
+
+<view class='side side-list' wx:if="{{modalName=='listSide'}}">
+  <view class="user">
+    <view class="user-top">
+      <view class="user-img">
+        <image src="http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg" class='radius'></image>
+      </view>
+      <view class="user-text">
+        <view class="user-name">
+          文晓港
+        </view>
+      </view>
+    </view>
+    <view class='user-bg' style='background-image:url(http://www.diwuyuan.com/bbs/uc_server/data/avatar/000/00/02/52_avatar_big.jpg)'>
+    </view>
+  </view>
+  <view class="list-box">
+    <view class="list-li list-arrow">
+      <view class="list-text">
+        <view class="iconfont icon-moneybagfill danger-text"> </view> 余额
+      </view>
+    </view>
+    <view class="list-li list-arrow">
+      <view class="list-text">
+        <view class="iconfont icon-skinfill success-text"> </view> 主题
+      </view>
+    </view>
+    <view class="list-li list-arrow">
+      <view class="list-text">
+        <view class="iconfont icon-locationfill warning-text"> </view> 地址
+      </view>
+    </view>
+  </view>
+  <view class='flex justify-center bar mt-xs'>
+    <button class='warning btn hollow' bindtap='closeModal'>退出账号</button>
+  </view>
+  <view class='side-close' bindtap='closeModal'></view>
+</view>

pages/side/side.wxss

@@ -0,0 +1,38 @@
+page {
+  background: #f1f1f1;
+}
+
+.side {
+  background: #f1f1f1;
+  position: fixed;
+  top: 0;
+  width: 650rpx;
+  height: 100%;
+  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
+  left: 0;
+  overflow-y: auto;
+}
+
+.side-right {
+  left: auto;
+  right: 0;
+}
+
+.side-list {
+  width: 400rpx;
+}
+
+.side-close {
+  background: rgba(0, 0, 0, 0.1);
+  width: 350rpx;
+  height: 100%;
+  position: fixed;
+  z-index: 997;
+  right: 0rpx;
+  top: 0rpx;
+}
+.side-right .side-close{
+  width: 100rpx;
+  left: 0rpx;
+  right: auto;
+}

pages/slider/slider.js

@@ -0,0 +1,41 @@
+// pages/document/slider/slider.js
+Page({
+  data: {  
+    scrollInto: 0,
+    scrollList: [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '1' },
+      { id: '2' }]
+  },
+  scrollLeft: function (e) {
+    var into = this.data.scrollInto;
+    var length = this.data.scrollList.length;
+    if (into > 0) {
+      this.setData({
+        scrollInto: into - 1,
+      })
+    } else {
+      this.setData({
+        scrollInto: length - 3,
+      })
+    }
+  },
+  scrollRight: function (e) {
+    var into = this.data.scrollInto;
+    if (into < this.data.scrollList.length - 3) {
+      this.setData({
+        scrollInto: into + 1,
+      })
+    } else {
+      this.setData({
+        scrollInto: 0,
+      })
+    }
+  },
+})

pages/slider/slider.json

@@ -0,0 +1 @@
+{}

pages/slider/slider.wxml

@@ -0,0 +1,36 @@
+<view class="bar">
+  <view class='ml-sm iconfont icon-titles success-text'>全屏限高轮播</view>
+</view>
+<swiper class='swiper-screen' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
+  <swiper-item wx:for="1234">
+    <image src="http://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
+  </swiper-item>
+</swiper>
+
+<view class="bar mt-sm">
+  <view class='ml-sm iconfont icon-titles success-text'>带背景图轮播</view>
+</view>
+<swiper class='swiper-bg' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
+  <swiper-item wx:for="124">
+    <view class='shadow-alice'>
+      <image src="http://image.weilanwl.com/img/4x3-{{index+2}}.jpg" mode='aspectFill' />
+    </view>
+  </swiper-item>
+</swiper>
+
+<view class="bar mt-sm">
+  <view class='ml-sm iconfont icon-titles success-text'>多图轮播(scroll-view)</view>
+</view>
+<view class='scroll-bar'>
+  <view class='scroll-left' bindtap='scrollLeft'>
+    <text class='iconfont icon-back'></text>
+  </view>
+  <scroll-view scroll-x class='scroll-list-box' scroll-into-view="in-{{scrollInto}}" scroll-with-animation>
+    <view class='scroll-list'>
+      <view class='scroll-item' id="in-{{index}}" style='background-image:url(http://image.weilanwl.com/img/4x3-{{item.id}}.jpg)' wx:for="{{scrollList}}"></view>
+    </view>
+  </scroll-view>
+  <view class='scroll-right' bindtap='scrollRight'>
+    <text class='iconfont icon-right'></text>
+  </view>
+</view>

pages/slider/slider.wxss

@@ -0,0 +1,69 @@
+page {
+  background: #f1f1f1;
+}
+
+.swiper-screen {
+  height: 460rpx;
+}
+
+.swiper-screen image {
+  width: 100%;
+  display: block;
+  height: 460rpx;
+  margin: 0;
+}
+
+.swiper-bg {
+  background-image: url(http://image.weilanwl.com/img/swiper-bg.png);
+  background-size: cover;
+  height: 500rpx;
+}
+
+.swiper-bg swiper-item {
+  height: 400rpx;
+}
+
+.swiper-bg swiper-item view {
+  margin: 40rpx;
+}
+
+.swiper-bg image {
+  width: 100%;
+  display: block;
+  height: 400rpx;
+  margin: 0;
+  border-radius: 10rpx;
+}
+
+.scroll-bar {
+  background: #fff;
+  display: flex;
+}
+
+.scroll-left, .scroll-right {
+  width: 75rpx;
+  text-align: center;
+  line-height: 150rpx;
+  font-size: 36rpx;
+  color: #666;
+}
+
+.scroll-list-box {
+  height: 150rpx;
+  width: 600rpx;
+}
+
+.scroll-list {
+  height: 150rpx;
+  white-space: nowrap;
+}
+
+.scroll-item {
+  display: inline-block;
+  width: 200rpx;
+  height: 150rpx;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 170rpx;
+  background-color: #fff;
+}