合并一次dev

@@ -14,10 +14,10 @@ const brandModel = require(`${mRoot}/brand`);
 /**
  * 品牌，品类，店铺相关页面
  */
-const component = {
+module.exports = {
 
     /* 品牌店铺页面 */
-    brand: (req, res) => {
+    index: (req, res) => {
         let params = req.query;
 
         brandModel.getBrandData(params).then(result => {
@@ -29,5 +29,3 @@ const component = {
         });
     }
 };
-
-module.exports = component;

+/**
+ * 主页
+ * @author: Bi Kai<kai.bi@yoho.cn>
+ * @date: 2016/05/09
+ */
+'use strict';
+const channelModel = require('../models/channel');
+
+/**
+ * 频道选择页
+ */
+module.exports = {
+    index(req, res) {
+        let channel = req.path.split('/')[1] || req.yoho.channel;
+
+        res.render('index', {
+            module: 'channel',
+            page: 'home',
+            channel: channel
+        });
+    },
+    resources(req, res, next) {
+        channelModel.getResourcesData(req.query).then(result => {
+            return res.json(result);
+        }).catch(next);
+    }
+};

+'use strict';
+const api = global.yoho.ServiceAPI;
+const contentCode = require('../../../config/content-code');
+const resourcesProcess = require('../../../utils/resources-process');
+
+let channel = {
+    getResourcesData(params) {
+        let code;
+
+        if (params.channel) {
+            code = contentCode.channel[params.channel];
+        } else if (params.contentCode) {
+            code = params.contentCode;
+        } else {
+            code = contentCode.channel.men;
+        }
+        return api.get('operations/api/v5/resource/get', {
+            content_code: code
+        }, {
+            cache: true,
+            code: 200
+        }).then(result => {
+            return resourcesProcess(result.data);
+        });
+    }
+};
+
+module.exports = channel;

@@ -8,11 +8,16 @@
 
 const expressRouter = require('express').Router;
 const cRoot = './controllers';
-const channel = require(cRoot);
+const channel = require(cRoot + '/channel');
+const brand = require(cRoot + '/brand');
 
 const router = expressRouter();
 
 router.get('/', channel.index); // 首页
-router.get('/brand', channel.brand); // 店铺首页
+router.get('/men', channel.index); // 首页
+router.get('/women', channel.index); // 首页
+router.get('/lifestyle', channel.index); // 首页
+router.get('/resources', channel.resources); // 资源位接口
+router.get('/brand', brand.index); // 店铺首页
 
 module.exports = router;

-<h1>Index</h1>
+<div id="app">
+    <tab></tab>
+    <resources v-bind:channel="'{{channel}}'" v-ref:resources></resources>
+</div>

@@ -23,6 +23,8 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>
 <span class="icon icon-up"></span>
 <span class="icon icon-love"></span>
 <span class="icon icon-delete"></span>
+<span class="icon icon-sort-asc"></span>
+<span class="icon icon-sort-desc"></span>
 
 
 <h2>button</h2>

 /**
  * 主页
- * @author: Bi Kai<kai.bi@yoho.cn>
- * @date: 2016/05/09
+ * @author: shenzm<zhimin.shen@yoho.cn>
+ * @date: 2016/07/18
  */
 'use strict';
 const _ = require('lodash');
 const helpers = global.yoho.helpers;
 
 /**
- * 频道选择页
+ * 个人中心主页
  */
 const component = {
     index: (req, res, next) => {
-        res.render('index', {
-            module: 'example',
-            page: 'home'
-        });
+        var testData = {
+            isLogin: false,
+            head_ico: '',
+            profile_name: 'XXX',
+            signinUrl: '/home',
+            wait_pay_num: 1,
+            wait_cargo_num: 2,
+            send_cargo_num: 3
+        };
+        res.render('index', _.merge({
+            module: 'home',
+            page: 'index'
+        }, testData));
     }
 };
 

@@ -4,14 +4,14 @@
  * @date: 2016/07/18
  */
 
-var express = require('express'),
-    path = require('path'),
-    hbs = require('express-handlebars');
+const express = require('express');
+const path = require('path');
+const hbs = require('express-handlebars');
 
-var app = express();
+const app = express();
 
 // set view engin
-var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
+const doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
 
 app.on('mount', function(parent) {
     delete parent.locals.settings; // 不继承父 App 的设置

@@ -8,7 +8,9 @@
 
 const router = require('express').Router();
 const cRoot = './controllers';
+const home = require(cRoot);
 
 // Your controller here
+router.get('/', home.index); // 个人中心主页
 
 module.exports = router;

-<h1>test</h1>
\ No newline at end of file
+<div class="my-page yoho-page">
+    <div class="my-header">
+        {{#isLogin}}
+        <a class="user-info" href="/home/mydetails">
+            <span class="user-avatar" data-avatar="{{head_ico}}"></span>
+            <br><span class="username">{{profile_name}}</span>
+        </a>
+        {{/isLogin}}
+        {{^isLogin}}
+        <div class="user-info">
+            <a class="login-btn" href="{{signinUrl}}">
+                登录/注册
+            </a>
+        </div>
+        {{/isLogin}}
+    </div>
+    <div class="my-order">
+        <a class="order-title"  href="/home/orders">
+            我的订单
+            <span>
+                查看全部订单 <span class="icon icon-right"></span>
+            </span>
+        </a>
+        <div class="order-type clearfix">
+            <a class="type-item" href="/home/orders?type=2">
+                <span>&#xe634;</span>
+                <br>待付款
+                {{#if wait_pay_num}}
+                <span class="num">{{wait_pay_num}}</span>
+                {{/if}}
+            </a>
+            <a class="type-item" href="/home/orders?type=3">
+                <span>&#xe63b;</span>
+                <br>待发货
+                {{#if wait_cargo_num}}
+                <span class="num">{{wait_cargo_num}}</span>
+                {{/if}}
+            </a>
+            <a class="type-item" href="/home/orders?type=4">
+                <span>&#xe633;</span>
+                <br>待收货
+                {{#if send_cargo_num}}
+                <span class="num">{{send_cargo_num}}</span>
+                {{/if}}
+            </a>
+            <a class="type-item" href="/home/orders?type=5">
+                <span>&#xe633;</span>
+                <br>退换货
+                {{#if send_cargo_num}}
+                <span class="num">{{send_cargo_num}}</span>
+                {{/if}}
+            </a>
+        </div>
+    </div>
+    <div class="group-list">
+        <a class="list-item" href="/home/address">
+            地址管理
+            <span class="num">3 <span class="icon icon-right"></span></span>
+        </a>
+    </div>
+     <div class="group-list">
+         <a class="list-item" href="/home/favorite">
+            收藏的商品
+            <span class="num">120 <span class="icon icon-right"></span></span>
+        </a>
+        <a class="list-item" href="/home/favorite?tab=brand">
+            收藏的品牌
+            <span class="num">100 <span class="icon icon-right"></span></span>
+        </a>
+    </div>
+    <div class="group-list">
+        <a class="list-item" href="/home/mycurrency">
+            YOHO 币
+            <span class="num">100 <span class="icon icon-right"></span></span>
+        </a>
+    </div>
+    <div class="group-list">
+         <a class="list-item" href="/home/help">
+            帮助中心
+            <span class="num"><span class="icon icon-right"></span></span>
+        </a>
+        <a class="list-item" href="/home/onlineService">
+            在线客服
+            <span class="num"><span class="icon icon-right"></span></span>
+        </a>
+    </div>
+</div>
\ No newline at end of file

+/**
+ *  商品列表页
+ *  @author  chen xuan <xuan.chen@yoho.cn>
+ */
+const listModel = require('../models/list');
+
+exports.index = (req, res) =>{
+    res.render('list');
+};
+
+/*
+ * 获取 商品列表
+ */
+exports.getProducts = (req, res, next)=>{
+    listModel.search()
+        .then(data=>{
+            res.json(data);
+        })
+        .catch(next);
+};

+/**
+ * sub app product
+ * @author: chen xuan<xuan.chen@yoho.cn>
+ * @date: 2016/07/19
+ */
+
+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;

+/**
+ *  product list Model
+ */
+'use strict';
+const api = global.yoho.API;
+const camelCase = global.yoho.camelCase;
+const path = require('path');
+const processProductList = require(path.join(global.utils, '/product-process')).processProductList;
+
+
+let list = {
+
+    /**
+     * 商品搜索
+     * @param  {[type]} params [description]
+     * @return {[type]}        [description]
+     */
+    search(params) {
+        return api.post('', {
+            method: 'app.search.sales',
+            limit: 4,
+            saleType: 2,
+            yh_channel: 3
+        }, {
+            cache: true,
+            code: 200
+        })
+        .then(result => {
+            result = camelCase(result);
+            result.data.productList = processProductList(result.data.productList);
+            return result;
+        });
+    }
+};
+
+
+module.exports = list;

+/**
+ * router of sub app product
+ * @author: chen xuan<xuan.chen@yoho.cn>
+ * @date: 2016/07/19
+ */
+
+'use strict';
+
+const Router = require('express').Router;
+const cRoot = './controllers';
+const productList = require(`${cRoot}/list`);
+
+const router = Router();
+
+// 商品列表
+router.use('/list', (req, res, next) => {
+    req.module = 'product';
+    req.page = 'list';
+    next();
+});
+router.get('/list', productList.index);
+router.post('/list', productList.getProducts);
+
+module.exports = router;

+<div id="product-list">
+    <Sort></Sort>
+    <List url="/product/list" :query='{a:1}'></List>
+    <div class="drawer-slide">
+        <div class="drawer-main">
+            <filter></filter>
+        </div>
+    </div>
+</div>
\ No newline at end of file

@@ -16,7 +16,7 @@ module.exports = {
     siteUrl: '//m.yohobuy.com',
     domains: {
         api: 'http://devapi.yoho.cn:58078/',
-        service: 'http://devservice.yoho.cn:58077/'
+        service: 'http://123.206.1.104:28077/'
     },
     subDomains: {
         host: '.m.yohobuy.com',

@@ -6,52 +6,12 @@
 
 'use strict';
 
-const saleContentCode = {
-    boys: {
-        sale: '153180b9a88c0b565848850c523bb637',
-        breakCode: 'd763e3f8d208cbed8f100253ea4f8946',
-        vip: '6b9810a442efe1e6252b134154d36769'
-    },
-    girls: {
-        sale: '0b2d133419a0f7c381306fd3522365e1',
-        breakCode: '77258d0b526c7b6e243c1419877ead4a',
-        vip: 'e83f3582df32b6753eed49fda236a755'
-    },
-    kids: {
-        sale: 'de23648d28ee1e8a3f087a9dbac506f8',
-        breakCode: '3f0898f1089b7bef5f3e071725c7a608',
-        vip: '664935745012db6e2a96a7d57f75512f'
-    },
-    lifestyle: {
-        sale: '01269e498ff5b07756e0733ec0e88c75',
-        breakCode: '0020a5762771aa16902a666c9491394e',
-        vip: '647f1154d30b323ff46c787fc78aef65'
-    }
+const channel = {
+    men: '9ee58aadd9559d07207fe4a98843eaac', // 男 9ee58aadd9559d07207fe4a98843eaac
+    women: '9ee58aadd9559d07207fe4a98843eaac',
+    lifestyle: '9ee58aadd9559d07207fe4a98843eaac'
 };
 
-const guangContentCode = {
-    special: '89cc20483ee2cbc8a716dcfe2b6c7603'
-};
-
-const channelContentCode = {
-    boys: '8512bf0755cc549ac323f852c9fd945d',
-    girls: '189b6686065dbd6755dd6906cf03c002',
-    kids: 'b8c1bff53d4ea60f978926d538620636',
-    lifestyle: '61cd852c6afcf60660196154f66a3a62',
-    index: '7ba9118028f9b22090b57341487567eb'
-};
-
-const bottomBannerContentCode = {
-    boys: 'a2ec977c027d0cd9cdccb356ddf16b08',
-    girls: '8c8bd1b89a22e5895f05882e0825b493'
-};
-
-const outletContentCode = 'c19ffa03f053f4cac3690b22c8da26b7';
-
 module.exports = {
-    sale: saleContentCode,
-    outlet: outletContentCode,
-    channel: channelContentCode,
-    bottom: bottomBannerContentCode,
-    guang: guangContentCode
+    channel
 };

@@ -6,6 +6,8 @@
 
 module.exports = app => {
     app.use('/', require('./apps/channel'));
+    app.use('/product', require('./apps/product'));
+    app.use('/home', require('./apps/home'));
 
     // 组件示例
     if (app.locals.devEnv) {

@@ -12,7 +12,7 @@ module.exports = () => {
             pageChannel: {},
             yohoTitle: 'Yoho!BLK'
         };
-        const channel = req.query.channel || req.cookies._Channel || 'boys';
+        const channel = req.query.channel || req.cookies._Channel || 'men';
 
         // 用于头部颜色控制
         yoho.pageChannel[channel] = true;

@@ -57,6 +57,7 @@
     "handlebars": "^4.0.5",
     "handlebars-loader": "^1.3.0",
     "husky": "^0.11.4",
+    "node-sass": "^3.8.0",
     "nodemon": "1.9.2",
     "postcss-assets": "^4.0.1",
     "postcss-cachebuster": "^0.1.3",
@@ -70,11 +71,13 @@
     "postcss-sprites": "^3.1.2",
     "postcss-use": "^2.2.0",
     "precss": "^1.4.0",
+    "sass-loader": "^4.0.0",
     "shelljs": "^0.7.0",
     "style-loader": "^0.13.1",
     "stylelint": "^6.9.0",
     "stylelint-config-yoho": "1.2.5",
     "vue-loader": "^8.5.3",
+    "vue-swipe": "^0.2.6",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1",
     "webpack-stream": "^3.1.0",

 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>
-Created by FontForge 20120731 at Mon Jul 18 12:07:13 2016
- By admin
-</metadata>
+<metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="iconfont" horiz-adv-x="1024" >
-  <font-face 
-    font-family="iconfont"
-    font-weight="500"
-    font-stretch="normal"
-    units-per-em="1024"
-    panose-1="2 0 6 3 0 0 0 0 0 0"
-    ascent="896"
-    descent="-128"
-    x-height="792"
-    bbox="0 -212 1024 896"
-    underline-thickness="50"
-    underline-position="-100"
-    unicode-range="U+0078-E617"
-  />
-<missing-glyph horiz-adv-x="374" 
-d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
-    <glyph glyph-name=".notdef" horiz-adv-x="374" 
-d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
-    <glyph glyph-name=".null" horiz-adv-x="0" 
- />
-    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
- />
-    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
-d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
-t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
-t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
-    <glyph glyph-name="uniE600" unicode="&#xe600;" 
-d="M911 725h-242v123q0 21 -13.5 34.5t-34.5 13.5h-246q-20 0 -33.5 -13.5t-13.5 -34.5v-123h-246q-21 0 -34.5 -13.5t-13.5 -34t13.5 -34t34.5 -13.5h829q21 0 34.5 13.5t13.5 34t-13.5 34t-34.5 13.5zM423 725v72h147v-72h-147zM765 579q-21 0 -34.5 -14t-13.5 -34v-560
-h-441v560q0 20 -13.5 34t-34 14t-34 -14t-13.5 -34v-611q0 -21 13.5 -34.5t34.5 -13.5h536q20 0 33.5 13.5t13.5 34.5v611q3 20 -11.5 34t-35.5 14zM447 67v389q0 20 -13.5 33.5t-34 13.5t-34 -13.5t-13.5 -33.5v-389q0 -21 13.5 -34.5t34 -13.5t34 13.5t13.5 34.5zM645 67
-v389q0 20 -13.5 33.5t-34.5 13.5q-20 0 -35.5 -13.5t-15.5 -33.5v-389q0 -21 13.5 -34.5t34.5 -13.5t36 13.5t15 34.5z" />
-    <glyph glyph-name="uniE601" unicode="&#xe601;" 
-d="M512 812q43 0 82.5 -17t68 -45.5t45.5 -68t17 -82.5v-43h171v-640q0 -53 -37.5 -90.5t-90.5 -37.5h-512q-53 0 -90.5 37.5t-37.5 90.5v640h171v43q0 43 17 82.5t45.5 68t68 45.5t82.5 17zM811 -84v555h-598v-555q0 -18 12.5 -30.5t30.5 -12.5h512q18 0 30.5 12.5
-t12.5 30.5zM512 727q-53 0 -90.5 -37.5t-37.5 -90.5v-43h256v43q0 53 -37.5 90.5t-90.5 37.5z" />
-    <glyph glyph-name="uniE602" unicode="&#xe602;" 
-d="M516 256l409 404q2 1 6 6t7 8t8 7t9 5.5t8.5 2t8.5 -2.5l38 -21q7 -7 7.5 -17.5t-6.5 -17.5l-476 -471q-7 -8 -17.5 -8t-17.5 7zM86 669zM531 158q-8 -7 -18.5 -7t-17.5 8l-475 471q-7 7 -7 17.5t7 17.5l38 21q4 3 8.5 2.5t8.5 -2t9 -5.5t8 -7t7 -8t6 -6l415 -407z
-M945 669z" />
-    <glyph glyph-name="uniE603" unicode="&#xe603;" 
-d="M998.5 724.5q-12.5 11.5 -29.5 11t-29 -12.5l-552 -588l-302 297q-12 12 -29.5 12t-29.5 -12.5t-12 -29.5t13 -29l332 -327v-1q2 -1 9 -5q1 -1 2.5 -2t2.5 -1q7 -3 15 -3t16 3q1 1 3 2l1 1q7 5 9 6l1 1l581 619q12 13 11.5 30t-13 28.5z" />
-    <glyph glyph-name="uniE605" unicode="&#xe605;" 
-d="M512 415l360 360l45 -45l-360 -360l360 -359l-45 -45l-360 359l-360 -359l-45 45l360 359l-360 360l45 45z" />
-    <glyph glyph-name="uniE606" unicode="&#xe606;" 
-d="M245 384l-9 9l472 472l80 -80l-400 -401l400 -401l-80 -80l-472 472z" />
-    <glyph glyph-name="uniE607" unicode="&#xe607;" 
-d="M785 384l13 13l-488 487l-84 -84l416 -416l-416 -416l84 -84l488 487z" />
-    <glyph glyph-name="uniE608" unicode="&#xe608;" 
-d="M682 74q-108 -89 -249 -89q-107 0 -197.5 53t-143.5 143.5t-53 197.5t53 197.5t143.5 143.5t197.5 53t197.5 -53t143.5 -143.5t53 -197.5q0 -141 -89 -249l286 -286l-56 -56zM433.5 64q130.5 0 222.5 92t92 222.5t-92 223t-222.5 92.5t-223 -92.5t-92.5 -223t92.5 -222.5
-t223 -92z" />
-    <glyph glyph-name="uniE60D" unicode="&#xe60d;" 
-d="M734 860q-65 0 -123.5 -31t-99.5 -85q-41 54 -99.5 85t-124.5 31q-118 0 -202.5 -92t-84.5 -222q0 -37 7 -70.5t21.5 -65t25 -50t29.5 -48.5q31 -48 82.5 -105.5t98 -101.5t100 -90t75 -63.5t35.5 -28.5q17 -13 37 -13t37 13q13 11 35 28.5t75.5 63.5t100 90t98 101.5
-t81.5 105.5q19 30 29.5 48.5t25.5 50t22 65t7 70.5q0 130 -84.5 222t-203.5 92zM886 352q-29 -45 -78 -100t-98.5 -101t-95.5 -85.5t-74 -62.5l-29 -23q-11 9 -30 24t-71.5 60t-98 88t-96 99t-79.5 101q-24 37 -37 60.5t-24 60t-11 73.5q0 101 65.5 172.5t157.5 71.5
-q68 0 123 -40t82 -105v0q4 -15 19 -15t19 15q27 65 82 105t122 40q93 0 158.5 -71.5t65.5 -172.5q0 -37 -11.5 -73.5t-24 -60t-36.5 -60.5z" />
-    <glyph glyph-name="uniE617" unicode="&#xe617;" 
-d="M24 94l22 -22q9 -10 22 -10t23 10l424 430l420 -426q9 -9 21.5 -9t21.5 9l22 22q9 9 9 22t-9 23l-458 464q-5 5 -12 7q-9 7 -20.5 6t-20.5 -9l-465 -472q-9 -9 -9 -22t9 -23z" />
-  </font>
-</defs></svg>
+<font id="iconfont" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="896" descent="-128" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xe600;" glyph-name="delete" d="M911 809h-242v123q0 21-13.5 34.5t-34.5 13.5h-246q-20 0-33.5-13.5t-13.5-34.5v-123h-246q-21 0-34.5-13.5t-13.5-34 13.5-34 34.5-13.5h829q21 0 34.5 13.5t13.5 34-13.5 34-34.5 13.5zM423 809v72h147v-72h-147zM765 663q-21 0-34.5-14t-13.5-34v-560h-441v560q0 20-13.5 34t-34 14-34-14-13.5-34v-611q0-21 13.5-34.5t34.5-13.5h536q20 0 33.5 13.5t13.5 34.5v611q3 20-11.5 34t-35.5 14zM447 151v389q0 20-13.5 33.5t-34 13.5-34-13.5-13.5-33.5v-389q0-21 13.5-34.5t34-13.5 34 13.5 13.5 34.5zM645 151v389q0 20-13.5 33.5t-34.5 13.5q-20 0-35.5-13.5t-15.5-33.5v-389q0-21 13.5-34.5t34.5-13.5 36 13.5 15 34.5z" />
+<glyph unicode="&#xe601;" glyph-name="bag" d="M512 896q43 0 82.5-17t68-45.5 45.5-68 17-82.5v-43h171v-640q0-53-37.5-90.5t-90.5-37.5h-512q-53 0-90.5 37.5t-37.5 90.5v640h171v43q0 43 17 82.5t45.5 68 68 45.5 82.5 17zM811 0v555h-598v-555q0-18 12.5-30.5t30.5-12.5h512q18 0 30.5 12.5t12.5 30.5zM512 811q-53 0-90.5-37.5t-37.5-90.5v-43h256v43q0 53-37.5 90.5t-90.5 37.5z" />
+<glyph unicode="&#xe602;" glyph-name="down" d="M516 340l409 404q2 1 6 6t7 8 8 7 9 5.5 8.5 2 8.5-2.5l38-21q7-7 7.5-17.5t-6.5-17.5l-476-471q-7-8-17.5-8t-17.5 7zM531 242q-8-7-18.5-7t-17.5 8l-475 471q-7 7-7 17.5t7 17.5l38 21q4 3 8.5 2.5t8.5-2 9-5.5 8-7 7-8 6-6l415-407z" />
+<glyph unicode="&#xe603;" glyph-name="check" d="M998.5 808.5q-12.5 11.5-29.5 11t-29-12.5l-552-588-302 297q-12 12-29.5 12t-29.5-12.5-12-29.5 13-29l332-327v-1q2-1 9-5 1-1 2.5-2t2.5-1q7-3 15-3t16 3q1 1 3 2l1 1q7 5 9 6l1 1 581 619q12 13 11.5 30t-13 28.5z" />
+<glyph unicode="&#xe605;" glyph-name="close" d="M512 499l360 360 45-45-360-360 360-359-45-45-360 359-360-359-45 45 360 359-360 360 45 45z" />
+<glyph unicode="&#xe606;" glyph-name="left" d="M245 468l-9 9 472 472 80-80-400-401 400-401-80-80-472 472z" />
+<glyph unicode="&#xe607;" glyph-name="right" d="M785 468l13 13-488 487-84-84 416-416-416-416 84-84 488 487z" />
+<glyph unicode="&#xe608;" glyph-name="search" d="M682 158q-108-89-249-89-107 0-197.5 53t-143.5 143.5-53 197.5 53 197.5 143.5 143.5 197.5 53 197.5-53 143.5-143.5 53-197.5q0-141-89-249l286-286-56-56zM433.5 148q130.5 0 222.5 92t92 222.5-92 223-222.5 92.5-223-92.5-92.5-223 92.5-222.5 223-92z" />
+<glyph unicode="&#xe609;" glyph-name="print" horiz-adv-x="1001" d="M281 627q-27-1-53-1h-83q-18 0-36.5-6t-32.5-18.5-23-32-9-45.5v-76h912v41q0 16-0.5 30t-0.5 18q0 13-5 29t-17 29.5-31.5 22.5-49.5 9h-133v-97h-438v97zM955 394v-52q0-23 0.5-52t0.5-58-10.5-47.5-26-30-33-16-31.5-4.5q-14-1-29.5-0.5t-29.5 0.5h-32l-45 128h-439l-44-128h-63q-20 0-45 1-25 0-41 9.5t-25.5 23-13.5 29.5-4 30v167h911zM163 331q-12 0-21-8.5t-9-21.5 9-21.5 21-8.5q13 0 22 8.5t9 21.5-9 21.5-22 8.5zM316 207q-8-26-14-48-5-19-10.5-37t-7.5-25-3-15 1-14.5 9.5-10.5 21.5-4h365q23 0 34 12t2 38q-5 13-9.5 30.5t-9.5 34.5q-5 19-11 39h-368zM336 582v228q0 11 2.5 23t10 21.5 20.5 15.5 34 6h188q31 0 51.5-14.5t20.5-52.5v-227h-327z" />
+<glyph unicode="&#xe60d;" glyph-name="love" d="M734 944q-65 0-123.5-31t-99.5-85q-41 54-99.5 85t-124.5 31q-118 0-202.5-92t-84.5-222q0-37 7-70.5t21.5-65 25-50 29.5-48.5q31-48 82.5-105.5t98-101.5 100-90 75-63.5 35.5-28.5q17-13 37-13t37 13q13 11 35 28.5t75.5 63.5 100 90 98 101.5 81.5 105.5q19 30 29.5 48.5t25.5 50 22 65 7 70.5q0 130-84.5 222t-203.5 92zM886 436q-29-45-78-100t-98.5-101-95.5-85.5-74-62.5l-29-23q-11 9-30 24t-71.5 60-98 88-96 99-79.5 101q-24 37-37 60.5t-24 60-11 73.5q0 101 65.5 172.5t157.5 71.5q68 0 123-40t82-105v0q4-15 19-15t19 15q27 65 82 105t122 40q93 0 158.5-71.5t65.5-172.5q0-37-11.5-73.5t-24-60-36.5-60.5z" />
+<glyph unicode="&#xe617;" glyph-name="up" d="M24 178l22-22q9-10 22-10t23 10l424 430 420-426q9-9 21.5-9t21.5 9l22 22q9 9 9 22t-9 23l-458 464q-5 5-12 7-9 7-20.5 6t-20.5-9l-465-472q-9-9-9-22t9-23z" />
+<glyph unicode="&#xe900;" glyph-name="sort-asc" horiz-adv-x="585" d="M585.143 475.428q0-14.857-10.857-25.714t-25.714-10.857h-512q-14.857 0-25.714 10.857t-10.857 25.714 10.857 25.714l256 256q10.857 10.857 25.714 10.857t25.714-10.857l256-256q10.857-10.857 10.857-25.714z" />
+<glyph unicode="&#xe901;" glyph-name="sort-desc" horiz-adv-x="585" d="M585.143 256q0-14.857-10.857-25.714l-256-256q-10.857-10.857-25.714-10.857t-25.714 10.857l-256 256q-10.857 10.857-10.857 25.714t10.857 25.714 25.714 10.857h512q14.857 0 25.714-10.857t10.857-25.714z" />
+</font></defs></svg>
\ No newline at end of file

+const Vue = require('yoho-vue');
+const tab = require('channel/tab.vue');
+const resources = require('channel/resources.vue');
+
+require('common/vue-filter');
+
+new Vue({
+    el: '#app',
+    components: {
+        tab: tab,
+        resources: resources
+    }
+});

+const Vue = require('yoho-vue');
+
+let vue = new Vue();
+
+module.exports = vue;

+let Vue = require('yoho-vue');
+
+
+/**
+ * 替换参数
+ *
+ * @example
+ *   value = /{width}/{height}/{model}
+ *
+ *   {value | resize 100 200 2}  ==> /100/200/2
+ */
+Vue.filter('resize', (value, width, height, model)=>{
+    return value.replace(/({width}|{height}|{mode})/g, function($0) {
+        const dict = {
+            '{width}': width,
+            '{height}': height,
+            '{mode}': model || 2
+        };
+
+        return dict[$0];
+    });
+});

+console.log('test');

+const Vue = require('yoho-vue');
+const sort = require('component/sort.vue');
+const list = require('component/list.vue');
+const filter = require('component/filter.vue');
+
+require('common/vue-filter');
+
+new Vue({
+    el: '#product-list',
+    components: {
+        list, sort, filter
+    }
+});

+@import "home";

 @font-face {
     font-family: "iconfont";
-    src: resolve("iconfont.eot"); /* IE9 */
-    src: resolve("iconfont.eot?#iefix") format("embedded-opentype"), resolve("iconfont.woff") format("woff"), resolve("iconfont.ttf") format("truetype"), resolve("iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */
+    src: resolve("iconfont.eot?vqs6e2");
+    src: resolve("iconfont.eot?vqs6e2#iefix") format("embedded-opentype"), resolve("iconfont.ttf?vqs6e2") format("truetype"), resolve("iconfont.woff?vqs6e2") format("woff"), resolve("iconfont.svg?vqs6e2#iconfont") format("svg");
+    font-weight: normal;
+    font-style: normal;
 }
 
 .icon {
-    text-decoration: none;
-    font-style: normal;
-    font-size: 24px;
+    /* use !important to prevent issues with browser extensions that change fonts */
     font-family: "iconfont" !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
-    -webkit-text-stroke-width: 0.4px;
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-sort-asc:before {
+    content: "\e900";
+}
+
+.icon-sort-desc:before {
+    content: "\e901";
+}
+
+.icon-print:before {
+    content: "\e609";
+}
+
+.icon-delete:before {
+    content: "\e600";
+}
+
 .icon-bag:before {
     content: "\e601";
 }
 
+.icon-down:before {
+    content: "\e602";
+}
+
 .icon-check:before {
     content: "\e603";
 }
@@ -38,18 +65,11 @@
     content: "\e608";
 }
 
-.icon-down:before {
-    content: "\e602";
+.icon-love:before {
+    content: "\e60d";
 }
 
 .icon-up:before {
     content: "\e617";
 }
 
-.icon-love:before {
-    content: "\e60d";
-}
-
-.icon-delete:before {
-    content: "\e600";
-}

+.my-page {
+    color: #444;
+    background: #f0f0f0;
+
+    a {
+        color: #444;
+    }
+
+    .user-info {
+        display: block;
+        position: relative;
+        padding: 0 30px;
+        color: #fff;
+        font-size: 34px;
+        line-height: 138px;
+        height: 449px;
+        background-size: cover;
+        background: #444;
+        /*background: resolve("home/header-bg.jpg"); */
+        text-align: center;
+
+        .user-avatar {
+            display: inline-block;
+            position: relative;
+            top: 88px;
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            border: 6px solid #a7a8a9;
+            background: #a7a8a9;
+            background-size: 100%;
+        }
+
+        .username {
+            display: inline-block;
+            padding: 0 16px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 260px;
+        }
+    }
+
+    .login-btn {
+        display: inline-block;
+        top: 40px;
+        left: 194px;
+        width: 244px;
+        height: 82px;
+        line-height: 82px;
+        color: #fff;
+        border: 4px solid #fff;
+        margin: 120px auto;
+    }
+
+    .my-order {
+        margin-bottom: 30px;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+
+        .order-title {
+            display: block;
+            padding: 0 30px;
+            font-size: 16PX;
+            line-height: 88px;
+
+            span {
+                color: #e0e0e0;
+                float: right;
+            }
+
+            &.highlight {
+                background: #eee;
+            }
+        }
+
+        .order-type {
+            padding: 20px 30px;
+            text-align: center;
+            border-top: 1px solid #e0e0e0;
+
+            .type-item {
+                position: relative;
+                float: left;
+                color: #444;
+                font-size: 14PX;
+                line-height: 1.5;
+                width: 170px;
+
+                &.highlight {
+                    background: #eee;
+                }
+
+                .num {
+                    position: absolute;
+                    top: -24px;
+                    right: 36px;
+                    width: 72px;
+                    height: 72px;
+                    font-size: 40px;
+                    line-height: 72px;
+                    color: #fff;
+                    background: #f03d35;
+                    text-align: center;
+                    border-radius: 50%;
+                    transform: scale(0.5);
+                }
+            }
+        }
+    }
+
+    .group-list {
+        margin-bottom: 30px;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+
+        .list-item {
+            display: block;
+            position: relative;
+            padding: 0 30px;
+            font-size: 16PX;
+            line-height: 90px;
+
+            &.highlight {
+                background: #eee;
+            }
+
+            &:after {
+                content: '';
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                width: 100%;
+                height: 0;
+                border-top: 1px solid #f0f0f0;
+            }
+
+            &:last-child:after {
+                content: none;
+            }
+        }
+
+        .icon {
+            margin-right: 5px;
+            font-size: 30px;
+            vertical-align: top;
+        }
+
+        .num {
+            color: #e0e0e0;
+            float: right;
+        }
+    }
+}

 @charset "utf-8";
 @import "common/index";
 @import "example/index";
+@import "channel/index";
+@import "home/index";
 @import "brand/index";

+<template>
+    <div class="resources">
+        <template v-for="floor in resources">
+            <focus v-if="floor.focus" v-bind:floor="floor.data" v-bind:style="{height: '182px'}"></focus>
+            <title-image v-if="floor.titleImage" v-bind:floor="floor.data"></title-image>
+            <goods v-if="floor.goods" v-bind:floor="floor.data"></goods>
+        </template>
+    </div>
+</template>
+
+<script>
+    const $ = require('yoho-jquery');
+    const tip = require('common/tip');
+    const bus = require('common/vue-bus');
+    const focus = require('component/resources/focus.vue');
+    const titleImage = require('component/resources/title-image.vue');
+    const goods = require('component/resources/goods.vue');
+
+    module.exports = {
+        props: ['channel', 'contentCode'],
+        data() {
+            return {
+                resources: []
+            };
+        },
+        components: {
+            focus: focus,
+            titleImage: titleImage,
+            goods: goods
+        },
+        watch: {
+            channel() {
+                this.getResourcesData();
+            },
+            contentCode() {
+                this.getResourcesData();
+            }
+        },
+        methods: {
+            getResourcesData() {
+                let data = {};
+
+                if (this.contentCode) {
+                    data.contentCode = this.contentCode;
+                } else {
+                    data.channel = this.channel;
+                }
+
+                $.ajax({
+                    url: '/resources',
+                    data: data
+                }).then(result => {
+                    this.resources = result;
+                }).fail(() => {
+                    tip('网络错误');
+                });
+            }
+        },
+        created() {
+            this.getResourcesData();
+            bus.$on('changeChannel', channel => {
+                this.channel = channel;
+                this.getResourcesData();
+            });
+        }
+    };
+</script>
+
+<style>
+    .resources {
+        background: #f6f6f6;
+    }
+</style>

+<template>
+    <div class="channel-tab">
+        <a v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click.prevent="changeChannel(index)" href="/{{item.channel}}">
+            <span class="name">{{item.name | uppercase}}</span>
+        </a>
+    </div>
+</template>
+
+<script>
+    const bus = require('common/vue-bus');
+
+    module.exports = {
+        data() {
+            return {
+                current: 0,
+                channel: [{
+                    name: 'MEN男士',
+                    channel: 'men'
+                }, {
+                    name: 'WOMEN女士',
+                    channel: 'women'
+                }, {
+                    name: 'LIFESTYLE生活',
+                    channel: 'lifestyle'
+                }]
+            };
+        },
+        methods: {
+            changeChannel(index) {
+                this.current = index;
+                bus.$emit('changeChannel', this.channel[index].channel);
+            }
+        }
+    };
+</script>
+
+<style>
+    .channel-tab {
+        width: 100%;
+        height: 90px;
+        font-size: 24px;
+        text-align: center;
+        background: #fff;
+
+        a {
+            display: inline-block;
+            line-height: 90px;
+            width: 33%;
+            color: #999;
+
+            &.focus {
+                color: #000;
+            }
+        }
+
+        .name {
+            padding: 9px 0;
+
+            &.focus {
+                border-bottom: 4px solid #000;
+            }
+        }
+
+        .focus {
+            .name {
+                border-bottom: 4px solid #000;
+            }
+        }
+    }
+</style>

+<template>
+    <div class="filter">
+        <div class="filter-actions">
+            <a href="javascript:; filter-action">清空</a>
+            <button class="button button-small filter-action">确定</button>
+        </div>
+        <div class="filter-params">
+            <ul class="filter-cates">
+                <li class="filter-cate" v-for="filter in filters">
+                    <i class="icon icon-right"></i>
+                    <span>{{filter.classfly}}</span>
+                    <span class="filter-cate-val">{{val[filter.key]}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+<style>
+@import "../../scss/common/color";
+
+.filter {
+    padding: 0 20px;
+}
+
+.filter-actions {
+    text-align: right;
+    padding: 10px 0;
+}
+
+.filter-action {
+    margin-left: 20px;
+}
+
+.filter-actions,
+.filter-cate {
+    border-bottom: 1px solid $grey;
+}
+
+.filter-cates {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.filter-cate {
+    .icon-right {
+        float: right;
+    }
+}
+
+.filter-cate-val {
+    float: right;
+}
+
+.filter-cate-val,
+.filter-cate .icon {
+    color: $grey;
+}
+</style>
+<script>
+module.exports = {
+    data: function() {
+        return {
+            val: {
+                brand: 'Supreme',
+                category: '夹克'
+            },
+            filters: [{
+                classfly: 'Brand品牌',
+                key: 'brand',
+                itemArray: []
+            }, {
+                classfly: 'Category品类',
+                key: 'category',
+                itemArray: []
+            }, {
+                classfly: 'Color颜色',
+                key: 'color',
+                itemArray: []
+            }, {
+                classfly: 'Size尺寸',
+                key: 'size',
+                itemArray: []
+            }]
+        };
+    }
+};
+</script>

+<template>
+    <div class="goods-box">
+        <ul class="cardlist card-large">
+            <li class="card" v-for="item in products">
+                <div class="card-pic">
+                    <a href="">
+                        <img :src="item.goodsList[0].imagesUrl | resize 372 499" alt="{{item.productName}}">
+                    </a>
+                </div>
+                <div class="card-bd">
+                    <h2 class="card-label">
+                        <a href="">{{item.productName}}</a>
+                    </h2>
+                    <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice}}</span>
+                    <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice}}</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+let $ = require('yoho-jquery');
+
+module.exports = {
+    props: {
+        /* 请求地址 */
+        url: {
+            type: String,
+            required: true
+        },
+        initData: Array, /* 初始数据, 应该只单次绑定, 然后fetch数据全靠url */
+        query: Object /* 请求参数 */
+    },
+    data: function() {
+        return {
+            products: []
+        };
+    },
+    methods: {
+        fetch: function() {
+            let self = this;
+
+            $.ajax({
+                url: this.url,
+                type: 'POST',
+            })
+            .then(result => {
+                self.$set('products', self.products.concat(result.data.productList));
+            });
+        }
+    },
+    created: function() {
+        // 有初始数据，用初始数据
+        if (this.initData) {
+            self.$set('products', self.products.concat(this.initData));
+        } else if (this.url) {
+            this.fetch();
+        }
+    },
+};
+</script>
+<style>
+@import "../../scss/common/color";
+
+.cardlist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.card-large {
+    .card {
+        float: left;
+        width: 372px;
+        margin-right: 6px;
+        &:nth-child(2n) {
+            margin-right: 0;
+        }
+    }
+    .card-pic {
+        width: 100%;
+        height: 499px;
+        a,
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .card-bd {
+        min-height: 180px;
+        margin-left: 30px;
+        margin-right: 30px;
+        padding-top: 25px;
+        text-align: center;
+        font-size: 24px;
+    }
+    .card-label {
+        margin: 0 0 10px;
+        font-size: inherit;
+        font-weight: normal;
+    }
+}
+
+.good-price {
+    color: #b0b0b0;
+    margin-right: 10px;
+    &:last-of-type {
+        margin-right: 0;
+    }
+    &.old-price {
+        text-decoration: line-through;
+    }
+    &.sale-price {
+        color: $red;
+    }
+}
+
+.drawer-slide {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.drawer-main {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    min-width: 80%;
+    max-width: 100%;
+    background-color: #fff;
+}
+</style>

+<template>
+    <div class="floor-header">
+        {{title.title}}
+
+        <a class="more" href="{{title.moreUrl}}">
+            {{title.moreName}}
+        </a>
+    </div>
+</template>
+
+<script>
+    module.exports = {
+        props: ['title']
+    };
+</script>
+
+<style>
+    .floor-header {
+        position: relative;
+        width: 100%;
+        height: 100px;
+        font-size: 32px;
+        line-height: 100px;
+        text-align: center;
+        font-weight: bold;
+        border-top: 1px solid #eee;
+        margin-top: 20px;
+        background: #fff;
+
+        .more {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100px;
+            height: 100px;
+        }
+    }
+</style>

+<template>
+    <div class="focus">
+        <swipe class="swipe swipe-{{floor.length}}">
+            <swipe-item v-for="item in floor" v-bind:style="{backgroundColor: item.bgColor}">
+                <a href="{{item.url}}" title="{{item.title}}">
+                    <img v-bind:src="item.src | resize 750 365">
+                </a>
+            </swipe-item>
+        </swipe>
+    </div>
+</template>
+
+<script>
+    require('vue-swipe/dist/vue-swipe.css');
+    const swipe = require('vue-swipe');
+
+    module.exports = {
+        props: ['floor'],
+        components: {
+            swipe: swipe.Swipe,
+            swipeItem: swipe.SwipeItem
+        }
+    };
+</script>
+
+<style>
+    .focus {
+        .swipe {
+            height: 100%;
+        }
+
+        .swipe-1 {
+            .swipe-indicators {
+                display: none;
+            }
+        }
+
+        .swipe-item {
+            a {
+                display: block;
+            }
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .swipe-indicators {
+            left: initial;
+            right: 20px;
+        }
+
+        .swipe-indicator {
+            width: 8px;
+            height: 8px;
+            background: #ccc;
+            opacity: 1;
+
+            &.active {
+                width: 12px;
+                height: 12px;
+                background: #fff;
+            }
+        }
+    }
+</style>

+<template>
+    <div class="goods">
+        goods
+    </div>
+</template>
+
+<script>
+    const floorHeader = require('component/resources/floor-header.vue');
+
+    module.exports = {
+        props: ['floor'],
+        components: {
+            floorHeader: floorHeader
+        }
+    };
+</script>
+
+<style>
+</style>

+<template>
+    <div class="title-image">
+        <floor-header v-bind:title="floor.title"></floor-header>
+        <a class="image" v-bind:href="floor.image.url">
+            <img v-bind:src="floor.image.src | resize 750 364">
+        </a>
+    </div>
+</template>
+
+<script>
+    const floorHeader = require('component/resources/floor-header.vue');
+
+    module.exports = {
+        props: ['floor'],
+        components: {
+            floorHeader: floorHeader
+        }
+    };
+</script>
+
+<style>
+    .title-image {
+        a {
+            display: block;
+        }
+
+        .image {
+            width: 100%;
+            height: 364px;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+</style>

+<template>
+    <ul class="sort-navs clearfix">
+        <li class="sort-item active"><span>默认</span></li>
+        <li class="sort-item">
+            <span class="sort-name">最新</span>
+        </li>
+        <li class="sort-item">
+            <span class="sort-name">价格</span>
+        </li>
+        <li class="sort-item">
+            <span class="sort-name">折扣</span>
+        </li>
+    </ul>
+</template>
+<script>
+module.exports = {
+
+}
+</script>
+<style>
+@import '../../scss/common/color';
+
+.sort-navs {
+    list-style: none;
+    margin: 0;
+    padding: 25px 0;
+    color: $grey;
+}
+
+.sort-item {
+    position: relative;
+    display: block;
+    width: 25%;
+    float: left;
+    text-align: center;
+
+    &:after {
+        content: '|';
+        position: absolute;
+        right: 0;
+        color: $grey;
+        font-size: 28px;
+    }
+    &:last-of-type:after {
+        display: none;
+    }
+
+    .sort-name {
+        font-size: 28px;
+    }
+
+    &.active {
+        color: $black;
+    }
+}
+</style>

@@ -58,7 +58,7 @@ module.exports = {
         }]
     },
     resolve: {
-        modulesDirectories: ['node_modules', './vue', './hbs']
+        modulesDirectories: ['node_modules', './vue', './hbs', './js']
     },
     plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),