Merge remote-tracking branch 'origin/develop' into develop

@@ -5,7 +5,6 @@
  */
 'use strict';
 const _ = require('lodash');
-
 const helpers = global.yoho.helpers;
 
 /**

@@ -27,6 +27,7 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 
 <h2>button</h2>
 三种尺寸，圆角直角，实心空心<br>
+设计图尺寸太多，不统一，用的时候自己改一下大小<br>
 
 <button class="button">空心</button>
 <button class="button button-solid">实心</button>
@@ -41,9 +42,55 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 <button class="button button-large button-round button-solid">大，圆角，实心</button>
 
 <h2>badge</h2>
+<a style="position:relative"><i class="icon icon-bag"></i><span class="badge badge-tr">1</span></a>
+<a style="position:relative"><i class="icon icon-bag"></i><span class="badge">99</span></a>
+<br>
 一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道
 
 <h2>checkbox</h2>
+
+<div class="checkbox">
+    <input type="checkbox" id="check1">
+    <label class="checkbox" for="check1">初始状态</label>
+</div>
+<div class="checkbox">
+    <input type="checkbox" id="check2" checked>
+    <label class="checkbox" for="check2">选中状态</label>
+</div>
+<div class="checkbox">
+    <input type="checkbox" id="check3" disabled>
+    <label class="checkbox" for="check3">disabled状态</label>
+</div>
+<div class="checkbox">
+    <input type="checkbox" id="check4" disabled checked>
+    <label class="checkbox" for="check4">disabled选中状态</label>
+</div>
+<br>
+<div class="radio">
+    <input type="radio" id="radio1">
+    <label for="radio1">初始状态</label>
+</div>
+<div class="radio">
+    <input type="radio" id="radio2" checked>
+    <label for="radio2" >选中状态</label>
+</div>
+<div class="radio">
+    <input type="radio" id="radio3" disabled>
+    <label for="radio3">disabled状态</label>
+</div>
+<div class="radio">
+    <input type="radio" id="radio4" disabled checked>
+    <label for="radio4">disabled选中状态</label>
+</div>
+<br>
+<div class="switch">
+    <input type="checkbox" id="switch1">
+    <label for="switch1"></label>
+</div>
+
+
+
+
 单选，多选，开关，选中不选中。
 纯 CSS 实现，不能依赖 JS，原理参考 http://forsigner.com/magic-check/
 

+/**
+ * 主页
+ * @author: Bi Kai<kai.bi@yoho.cn>
+ * @date: 2016/05/09
+ */
+'use strict';
+const _ = require('lodash');
+const helpers = global.yoho.helpers;
+
+/**
+ * 频道选择页
+ */
+const component = {
+    index: (req, res, next) => {
+        res.render('index', {
+            module: 'example',
+            page: 'home'
+        });
+    }
+};
+
+module.exports = component;

+/**
+ * sub app home
+ * @author: shenzm<zhimin.shen@yoho.cn>
+ * @date: 2016/07/18
+ */
+
+var express = require('express'),
+    path = require('path'),
+    hbs = require('express-handlebars');
+
+var app = express();
+
+// set view engin
+var doraemon = path.join(__dirname, '../../doraemon/views'); //parent view root
+
+app.on('mount', function(parent) {
+    delete parent.locals.settings; // 不继承父 App 的设置
+    Object.assign(app.locals, parent.locals);
+});
+
+app.set('views', path.join(__dirname, 'views/action'));
+app.engine('.hbs', hbs({
+    extname: '.hbs',
+    defaultLayout: 'layout',
+    layoutsDir: doraemon,
+    partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
+    helpers: global.yoho.helpers
+}));
+
+// router
+app.use(require('./router'));
+
+module.exports = app;

+/**
+ * router of sub app home 
+ * @author: shenzm<zhimin.shen@yoho.cn>
+ * @date: 2016/07/18
+ */
+
+'use strict';
+
+const router = require('express').Router();
+const cRoot = './controllers';
+
+// Your controller here
+
+module.exports = router;
\ No newline at end of file

+<h1>test</h1>
\ No newline at end of file

@@ -54,6 +54,7 @@
     "gulp-postcss": "^6.1.0",
     "gulp-sourcemaps": "^2.0.0-alpha",
     "gulp-util": "^3.0.7",
+    "handlebars": "^4.0.5",
     "handlebars-loader": "^1.3.0",
     "husky": "^0.11.4",
     "nodemon": "1.9.2",

+.badge {
+    min-width: 16px;
+    padding: 3px 7px;
+    border-radius: 10px;
+    font-size: 14px;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+
+    background-color: $blue;
+    color: $white;
+}
+
+/* position */
+.badge-tr {
+    position: absolute;
+    top: -5px;
+    right: -11px;
+}

+.checkbox,
+.radio {
+    position: relative;
+    display: inline-block;
+
+    label {
+        padding-left: 33px;
+        &:before {
+            z-index: 8;
+            border: 2px solid $black;
+            content: "";
+        }
+        &:after {
+            position: absolute;
+            top: 6px;
+            left: 12px;
+            z-index: 9;
+            display: none;
+            content: "";
+            width: 8px;
+            height: 16px;
+            transform: rotate(45deg);
+            border: 2px solid $white;
+            border-top: 0;
+            border-left: 0;
+        }
+    }
+
+    label:before,
+    input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 30px;
+        height: 30px;
+    }
+    input {
+        z-index: 10;
+        opacity: 0;
+    }
+
+    /* when checked */
+    input:checked {
+        ~ label:before {
+            background: $black;
+        }
+        ~ label:after {
+            display: block;
+        }
+    }
+
+    /* when disabled */
+    input:disabled {
+        ~ label {
+            color: #ccc;
+        }
+        ~ label:before {
+            border-color: #e4e4e4;
+        }
+        &:checked {
+            ~ label:before {
+                background-color: #e4e4e4;
+            }
+        }
+    }
+}
+
+.radio {
+    label:before {
+        border-radius: 50%;
+    }
+
+}
+
+.switch {
+    display: inline-block;
+    input {
+        display: none;
+    }
+    label {
+        position: relative;
+        display: block;
+        width: 54px;
+        height: 34px;
+        background-color: $white;
+        border: 1px solid #ddd;
+        border-radius: 99999px;
+        transition: 0.3s;
+
+        &:after {
+            content: "";
+        }
+    }
+}

@@ -6,4 +6,6 @@
 @import "modal";
 @import "button";
 @import "swiper";
+@import "badge";
+@import "form";
 @import "modal";