fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit d304d9ac31b89f1f4cdcadbc928dc1618b5ea17f 1 parent fdecd612

添加列表页面，完成筛选部分样式

Inline Side-by-side
Showing 12 changed files with 498 additions and 1 deletions
'use strict';
const headerModel = require('../../../doraemon/models/header');
const _ = require('lodash');
const list = {
index: (req, res) => {
let channel = req.query.channel || req.cookies._Channel || 'boys';
headerModel.requestHeaderData(channel).then(header => {
res.render('list', _.assign(header, {
navPath: {
nav: true,
pathNav: [
{
link: true,
href: '',
pathTitle: '',
name: 'MEN首页'
},
{
link: true,
href: '',
pathTitle: '',
name: '咨询'
},
{
link: false,
href: '',
pathTitle: '',
name: '咨询'
}
]
}
}));
});
}
};
module.exports = list;
... ...
/**
* sub app product
* @author: jiangfeng<jeff.jiang@yoho.cn>
* @date: 2016/07/02
*/
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
var partials = path.join(__dirname, './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: [`${partials}/partial`, `${doraemon}/partial`],
helpers: global.yoho.helpers
}));
// router
app.use(require('./router'));
module.exports = app;
... ...
/**
* router of sub app partial
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/06/30
*/
'use strict';
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const list = require(cRoot + '/list');
// Your controller here
router.get('/list', list.index); // 组件demo页
module.exports = router;
... ...
<div class="yoho-product-list">
<div class="center-content">
{{# navPath}}
{{> path-nav}}
{{/ navPath}}
</div>
<div class="center-content clearfix">
<div class="left">
{{> list/filter}}
</div>
<div class="right">
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="yoho-ui-accordion">
<h3>适用人群</h3>
<div class="body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>男士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
</div>
</div>
<div class="blank-div"></div>
<div class="title">全部品类</div>
<div class="yoho-ui-accordion">
<h3>上衣</h3>
<div class="body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>男士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
</div>
<h3>裤装</h3>
<div class="body">
<div class="list-body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>男士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
</div>
</div>
</div>
<div class="blank-div"></div>
<div class="yoho-ui-accordion">
<h3>品牌</h3>
<div class="body">
<div class="brand-body">
<input type="text" class="brand-search" placeholder="输入您要查找的品牌">
</div>
<div class="sub-items">
<span class="item">全部</span>
<span class="item">0-9</span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item">G</span>
<span class="item">H</span>
<span class="item">I</span>
<span class="item">J</span>
<span class="item">K</span>
<span class="item">L</span>
<span class="item">M</span>
<span class="item">N</span>
<span class="item">O</span>
<span class="item">P</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
</div>
<div class="brand-list">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>男士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
</div>
<div class="brand-btns">
<span class="btn disable large">确定</span>
<span class="btn large">取消</span>
</div>
</div>
</div>
<div class="yoho-ui-accordion">
<h3>价格</h3>
<div class="body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>¥0-¥1000</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>¥1001-¥2000</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>¥2001-¥4000</label>
</div>
<div class="price-btns">
<div class="price-input inline-block">
<span>¥</span>
<input type="text">
</div>
<span>－</span>
<div class="price-input inline-block">
<span>¥</span>
<input type="text">
</div>
<span class="btn large">确定</span>
</div>
</div>
</div>
<div class="yoho-ui-accordion">
<h3>尺码</h3>
<div class="body">
<div class="size-body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>M</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>L</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>XL</label>
</div>
</div>
</div>
</div>
<div class="yoho-ui-accordion">
<h3>颜色</h3>
<div class="body">
<div class="color-body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe611;</span>
<label>黑色</label>
</div>
<div class="input-radio">
<span class="iconfont radio c-blue">&#xe611;</span>
<label>蓝色</label>
</div>
<div class="input-radio">
<span class="iconfont radio c-red">&#xe604;</span>
<label>红色</label>
</div>
</div>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -10,4 +10,5 @@ module.exports = app => {
app.use('/partial', require('./apps/partial')); // 组件demo
// 业务模块
app.use('/product', require('./apps/product'));
};
... ...
... ... @@ -92,6 +92,7 @@
"webpack-stream": "^3.1.0",
"yoho-handlebars": "^4.0.5",
"yoho-jquery": "^1.12.4",
"yoho-jquery-accordion": "0.0.1",
"yoho-jquery-lazyload": "^1.9.7",
"yoho-slider": "0.0.2"
}
... ...
var $ = require('yoho-jquery');
require('yoho-jquery-accordion');
$('.yoho-ui-accordion').accordion({
collapsible: true,
heightStyle: 'content'
});
... ...
... ... @@ -6,3 +6,5 @@
/* 模块 */
@import "base";
@import "components/index";
@import "product/index";
... ...
@import 'list';
... ...
.yoho-product-list {
.center-content {
.left {
width: 250px;
}
.right {
width: 850px;
}
}
.input-radio {
padding: 10px 0;
}
.input-radio span {
margin-left: 0;
}
.input-radio label {
font-size: 14px;
font-weight: 700;
}
.blank-div {
height: 70px;
}
.title {
font-size: 14px;
font-weight: 700;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #eee;
}
.list-body,
.size-body,
.color-body {
max-height: 260px;
overflow-y: auto;
}
.brand-body {
margin: 5px 0;
.brand-search {
border: 0;
background-color: #e3e3e3;
width: 100%;
height: 40px;
padding: 0 8px;
color: #333;
font-weight: 700;
}
}
.sub-items {
margin: 15px 0;
font-size: 12px;
font-weight: bolder;
span {
margin-right: 10px;
line-height: 30px;
}
}
.brand-list {
max-height: 260px;
overflow-y: auto;
}
.brand-btns {
text-align: center;
margin-top: 10px;
.btn {
margin: 0 10px;
}
}
.btn {
display: inline-block;
}
.btn.large {
height: 38px;
line-height: 38px;
font-size: 14px;
}
.price-btns {
.price-input {
background-color: #eee;
width: 72px;
height: 38px;
line-height: 38px;
span {
height: 36px;
line-height: 36px;
margin-top: 1px;
display: inline-block;
padding: 0 3px;
}
input {
border: 0;
background-color: transparent;
width: 50px;
height: 38px;
line-height: 38px;
padding: 0;
font-size: 14px;
font-family: 'BrownStd', '黑体';
}
}
.btn {
margin-left: 4px;
}
}
.yoho-ui-accordion {
h3 {
font-size: 14px;
font-weight: 700;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #eee;
display: block;
cursor: pointer;
position: relative;
.ui-accordion-header-icon {
position: absolute;
right: 0.5em;
top: 50%;
margin-top: -20px;
}
.ui-accordion-header-icon:after {
font-family: "iconfont" !important;
display: inline-block;
content: "\e616";
}
}
h3.ui-accordion-header-active {
.ui-accordion-header-icon:after {
font-family: "iconfont" !important;
display: inline-block;
content: "\e617";
}
}
> .body {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
}
.c-blue {
color: blue;
}
.c-red {
color: red;
}
}
... ...
... ... @@ -23,7 +23,8 @@ shelljs.ls(path.join(__dirname, '/js/**/*.page.js')).forEach((f) => {
'yoho-handlebars',
'yoho-jquery',
'yoho-jquery-lazyload',
'yoho-slider'
'yoho-slider',
'yoho-jquery-accordion'
];
});
... ...