fe / yohobuy-mobile · Commits

Go to a project

Authored by unknown
Commit 74fe571d022306ba70d9354d98f157f5e5e2f8da 1 parent f1ec2a06

商品分类html css

Inline Side-by-side
Showing 8 changed files with 277 additions and 1 deletions
@@ -40,4 +40,9 @@ @@ -40,4 +40,9 @@
40 <script> 40 <script>
41 seajs.use('public/js/public'); 41 seajs.use('public/js/public');
42 </script> 42 </script>
  43 + {{# module}}
  44 + <script type="text/javascript">
  45 + seajs.use('public/js/{{../module}}');
  46 + </script>
  47 + {{/ module}}
43 </html> 48 </html>
  1 +/**
  2 + * 商品分类数据结构
  3 + * @author: liuyue(yue.liu@yoho.cn)
  4 + * @date: 2015/9/7
  5 + */
  6 +
  7 +module.exports = {
  8 + header: {
  9 + title: '商品分类'
  10 + },
  11 + searchUrl: 'www.baidu.com',
  12 + cateNav: {
  13 + list: [{
  14 + textEn: 'Boy'
  15 + }, {
  16 + textEn: 'Girl'
  17 + }, {
  18 + textEn: 'Kids'
  19 + }, {
  20 + textEn: 'Lifestyle'
  21 + }]
  22 + },
  23 + cateFirst: [{
  24 + list: [{
  25 + textCn: '上衣'
  26 + }, {
  27 + textCn: '裤装'
  28 + }, {
  29 + textCn: '裙装'
  30 + }, {
  31 + textCn: '鞋靴'
  32 + }, {
  33 + textCn: '包类'
  34 + }, {
  35 + textCn: '服配'
  36 + }],
  37 + cateSecond: [{
  38 + list: [{
  39 + textCn: '全部上衣',
  40 + url: ''
  41 + }, {
  42 + textCn: 'T恤',
  43 + url: ''
  44 + }, {
  45 + textCn: '衬衫',
  46 + url: ''
  47 + }, {
  48 + textCn: 'POLO',
  49 + url: ''
  50 + }, {
  51 + textCn: '卫衣',
  52 + url: ''
  53 + }, {
  54 + textCn: 'T恤',
  55 + url: ''
  56 + }, {
  57 + textCn: '衬衫',
  58 + url: ''
  59 + }, {
  60 + textCn: 'POLO',
  61 + url: ''
  62 + }, {
  63 + textCn: '卫衣',
  64 + url: ''
  65 + }, {
  66 + textCn: 'POLO',
  67 + url: ''
  68 + }, {
  69 + textCn: '卫衣',
  70 + url: ''
  71 + }, {
  72 + textCn: 'T恤',
  73 + url: ''
  74 + }, {
  75 + textCn: '衬衫',
  76 + url: ''
  77 + }, {
  78 + textCn: 'POLO',
  79 + url: ''
  80 + }, {
  81 + textCn: '卫衣',
  82 + url: ''
  83 + }]
  84 + }, {
  85 + list: [{
  86 + textCn: '全部上衣',
  87 + url: ''
  88 + }, {
  89 + textCn: 'T恤',
  90 + url: ''
  91 + }, {
  92 + textCn: '衬衫',
  93 + url: ''
  94 + }, {
  95 + textCn: '卫衣',
  96 + url: ''
  97 + }]
  98 + }]
  99 + }, {
  100 + list: [{
  101 + textCn: '上衣'
  102 + }, {
  103 + textCn: '裤装'
  104 + }, {
  105 + textCn: '裙装'
  106 + }, {
  107 + textCn: '鞋靴'
  108 + }, {
  109 + textCn: '包类'
  110 + }, {
  111 + textCn: '创意市集'
  112 + }],
  113 + cateSecond: [{
  114 + list: [{
  115 + textCn: '全部上衣',
  116 + url: ''
  117 + }, {
  118 + textCn: 'T恤',
  119 + url: ''
  120 + }, {
  121 + textCn: '衬衫',
  122 + url: ''
  123 + }, {
  124 + textCn: 'POLO',
  125 + url: ''
  126 + }, {
  127 + textCn: '卫衣',
  128 + url: ''
  129 + }, {
  130 + textCn: 'T恤',
  131 + url: ''
  132 + }, {
  133 + textCn: '衬衫',
  134 + url: ''
  135 + }, {
  136 + textCn: 'POLO',
  137 + url: ''
  138 + }, {
  139 + textCn: '卫衣',
  140 + url: ''
  141 + }, {
  142 + textCn: 'T恤',
  143 + url: ''
  144 + }, {
  145 + textCn: '衬衫',
  146 + url: ''
  147 + }, {
  148 + textCn: 'POLO',
  149 + url: ''
  150 + }, {
  151 + textCn: '卫衣',
  152 + url: ''
  153 + }]
  154 + }, {
  155 + list: [{
  156 + textCn: '全部上衣',
  157 + url: ''
  158 + }, {
  159 + textCn: 'T恤',
  160 + url: ''
  161 + }, {
  162 + textCn: '衬衫',
  163 + url: ''
  164 + }, {
  165 + textCn: '卫衣',
  166 + url: ''
  167 + }]
  168 + }]
  169 + }],
  170 +
  171 +}
  1 +/**
  2 + * 商品分类js
  3 + * @author: liuyue(yue.liu@yoho.cn)
  4 + * @date: 2015/9/7
  5 + */
  6 +
  7 +var $ = require('yoho.jquery');
  8 +
  9 +//主导航样式及点击事件
  10 +$('.cate-nav').find('li').eq(0).addClass('current');
  11 +$('.cate-nav').on('click', 'li', function() {
  12 + var nowIndex = $(this).index();
  13 + $(this).addClass('current').siblings().removeClass('current');
  14 + $('.cate-main').hide().eq(nowIndex).show();
  15 +});
  16 +
  17 +//主体内容显示控制
  18 +$('.cate-main').eq(0).show();
  19 +
  20 +//一级导航样式及点击事件
  21 +$('.cate-first').each(function() {
  22 + $(this).find('li').eq(0).addClass('current');
  23 + $(this).on('click', 'li', function() {
  24 + var nowIndex = $(this).index();
  25 + $(this).addClass('current').siblings().removeClass('current');
  26 + $(this).parents('.cate-main').find('.cate-second-section').hide().eq(nowIndex).show();
  27 + });
  28 +});
  29 +
  30 +//设置二级导航高度，出现滚动条
  31 +$('.cate-second').height($(window).height() - $('.cate-second').offset().top);
@@ -8,16 +8,19 @@ var controllerPath = './views/controller/', @@ -8,16 +8,19 @@ var controllerPath = './views/controller/',
8 boys = require(controllerPath + 'boys'), 8 boys = require(controllerPath + 'boys'),
9 girls = require(controllerPath + 'girls'), 9 girls = require(controllerPath + 'girls'),
10 goods = require(controllerPath + 'goods'), 10 goods = require(controllerPath + 'goods'),
11 - kids = require(controllerPath + 'kids') 11 + kids = require(controllerPath + 'kids'),
  12 + goodsCate = require(controllerPath + 'goods-cate');
12 13
13 14
14 module.exports = function(app) { 15 module.exports = function(app) {
15 app.get('/boys', boys.index); //boys首页 16 app.get('/boys', boys.index); //boys首页
16 app.get('/girls', girls.index); //girls首页 17 app.get('/girls', girls.index); //girls首页
17 app.get('/kids', kids.index); //girls首页 18 app.get('/kids', kids.index); //girls首页
  19 + app.get('/goods-cate', goodsCate.index);
18 20
19 app.get('/common/goodinfo', goods.goodTpl); //商品信息模板 21 app.get('/common/goodinfo', goods.goodTpl); //商品信息模板
20 app.get('/goods/more', goods.more); //下拉加载更多 22 app.get('/goods/more', goods.more); //下拉加载更多
21 app.get('/goods/prise', goods.like); //商品收藏/取消收藏 23 app.get('/goods/prise', goods.like); //商品收藏/取消收藏
22 app.get('/goods/cancelprise', goods.like); 24 app.get('/goods/cancelprise', goods.like);
  25 +
23 }; 26 };
  1 +/**
  2 + * 商品分类控制器
  3 + * @author: liuyue(yue.liu@yoho.cn)
  4 + * @date: 2015/9/7
  5 + */
  6 +var data = require('../../public/js/data/goods-cate'),
  7 + layoutPath = '../layouts/layout';
  8 +
  9 +// 首页
  10 +exports.index = function(req, res) {
  11 + res.render('pages/goods-cate', {
  12 + data: data,
  13 + layout: layoutPath,
  14 + module: 'goods-cate'
  15 + });
  16 +};
  1 +{{# data}}
  2 + {{> common/header}}
  3 + {{> common/search}}
  4 + {{# cateNav}}
  5 + <div class="cate-nav">
  6 + <ul class="clearfix">
  7 + {{# list}}
  8 + <li>
  9 + <a href="javascript:;"><span>{{textEn}}</span></a>
  10 + </li>
  11 + {{/ list}}
  12 + </ul>
  13 + </div>
  14 + {{/ cateNav}}
  15 + {{# cateFirst}}
  16 + <div class="cate-main clearfix">
  17 + <ul class="cate-first">
  18 + {{# list}}
  19 + <li>
  20 + <a href="javascript:;">{{textCn}}</a>
  21 + </li>
  22 + {{/ list}}
  23 + </ul>
  24 + <div class="cate-second">
  25 + {{# cateSecond}}
  26 + <ul class="cate-second-section">
  27 + {{# list}}
  28 + <li>
  29 + <a href="{{url}}">{{textCn}}</a>
  30 + </li>
  31 + {{/ list}}
  32 + </ul>
  33 + {{/ cateSecond}}
  34 + </div>
  35 + </div>
  36 + {{/ cateFirst}}
  37 +{{/ data}}
  1 +{{# header}}
  2 +<div id="header" class="header clearfix">
  3 + <a class="icon-back iconfont" href="javascript:;"></a>
  4 + {{title}}
  5 + <a class="icon-home iconfont" href="www.yohobuy.com"></a>
  6 +</div>
  7 +{{/ header}}
  1 +<div class="search-input">
  2 + <a href="{{searchUrl}}">
  3 + <i class="search-icon iconfont">&#xe60f;</i>
  4 + <input type="text" placeholder="搜索商品">
  5 + </a>
  6 +</div>