fe / yohobuy-mobile · Commits

Go to a project

Authored by 2586703@qq.com
Commit 325c1dd64122fe8bf2f05fd21d5bba1a87cda027 1 parent 04d513a9

女生首页html css js

Inline Side-by-side
Showing 26 changed files with 474 additions and 21 deletions
@@ -37,6 +37,9 @@ @@ -37,6 +37,9 @@
37 base: 'http://localhost:8000/' 37 base: 'http://localhost:8000/'
38 }) 38 })
39 </script> 39 </script>
  40 +<script>
  41 + seajs.use('public/js/public');
  42 +</script>
40 {{# module}} 43 {{# module}}
41 <script type="text/javascript"> 44 <script type="text/javascript">
42 seajs.use('public/js/{{../module}}'); 45 seajs.use('public/js/{{../module}}');
@@ -13,11 +13,9 @@ @@ -13,11 +13,9 @@
13 "main": "index.js", 13 "main": "index.js",
14 "dependencies": { 14 "dependencies": {
15 "jquery": "1.8.3", 15 "jquery": "1.8.3",
16 - "mlellipsis": "0.0.6",  
17 "lazyload": "1.9.6", 16 "lazyload": "1.9.6",
18 - "iscroll": "5.1.2",  
19 "mustache": "2.0.0", 17 "mustache": "2.0.0",
20 - "underscore": "1.6.0" 18 + "yoho-idangerous.swiper": "0.0.3"
21 }, 19 },
22 "devDependencies": { 20 "devDependencies": {
23 "expect.js": "0.3.1" 21 "expect.js": "0.3.1"
@@ -9,6 +9,7 @@ module.exports = { @@ -9,6 +9,7 @@ module.exports = {
9 textCn: '男生', 9 textCn: '男生',
10 textEn: 'Boys', 10 textEn: 'Boys',
11 url: false, 11 url: false,
  12 + current: true,
12 subNav: { 13 subNav: {
13 list: [{ 14 list: [{
14 textCn: '男生', 15 textCn: '男生',
  1 +/**
  2 + * 女首页数据结构
  3 + * @author: liuyue(yue.liu@yoho.cn)
  4 + * @date: 2015/7/13
  5 + */
  6 +
  7 +module.exports = {
  8 + sideNav: [{
  9 + textCn: '男生',
  10 + textEn: 'Boys',
  11 + url: false,
  12 + subNav: {
  13 + list: [{
  14 + textCn: '男生',
  15 + textEn: 'Boys',
  16 + img: '',
  17 + url: false
  18 + }, {
  19 + textCn: '首页',
  20 + img: 'http://res.yohoboys.com/res/new/boys/images/about/thirdbtn-sina.png',
  21 + url: ''
  22 + }, {
  23 + textCn: '新品到着',
  24 + img: '',
  25 + url: ''
  26 + }]
  27 + }
  28 + }, {
  29 + textCn: '女生',
  30 + textEn: 'Girls',
  31 + current: true,
  32 + url: false,
  33 + subNav: {
  34 + list: [{
  35 + textCn: '女生',
  36 + textEn: 'Girls',
  37 + img: '',
  38 + url: false
  39 + }, {
  40 + textCn: '首页',
  41 + img: '',
  42 + url: ''
  43 + }, {
  44 + textCn: '新品到着',
  45 + img: '',
  46 + url: ''
  47 + }, {
  48 + textCn: '上衣',
  49 + img: '',
  50 + url: ''
  51 + }, {
  52 + textCn: '鞋靴',
  53 + img: '',
  54 + url: ''
  55 + }, {
  56 + textCn: '裤装',
  57 + img: '',
  58 + url: ''
  59 + }, {
  60 + textCn: '品牌一览',
  61 + img: '',
  62 + url: ''
  63 + }]
  64 + }
  65 + }, {
  66 + textCn: '潮童',
  67 + textEn: 'Kids'
  68 + }, {
  69 + textCn: '家居',
  70 + textEn: 'Life Style'
  71 + }],
  72 + bannerTop: {
  73 + list: [{
  74 + url: '',
  75 + img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
  76 + }, {
  77 + url: '',
  78 + img: 'http://img02.yohoboys.com/staticimg/2015/07/08/10/02096990afbb3c1f327dd7e180aee02604.jpg'
  79 + }, {
  80 + url: '',
  81 + img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg'
  82 + }]
  83 + },
  84 + hotCategory: {
  85 + img: 'http://img13.static.yhbimg.com/adpic/2015/05/07/15/020cfde7eb630474916655cc0e290c68e2.jpg?imageView/2/w/640/h/480',
  86 + list: [{
  87 + textCn: '打底衫',
  88 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  89 + url: ''
  90 + }, {
  91 + textCn: '打底衫',
  92 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  93 + url: ''
  94 + }, {
  95 + textCn: '打底衫',
  96 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  97 + url: ''
  98 + }, {
  99 + textCn: '打底衫',
  100 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  101 + url: ''
  102 + }, {
  103 + textCn: '打底衫',
  104 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  105 + url: ''
  106 + }, {
  107 + textCn: '打底衫',
  108 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  109 + url: ''
  110 + }, {
  111 + textCn: '打底衫',
  112 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  113 + url: ''
  114 + }, {
  115 + textCn: '打底衫',
  116 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  117 + url: ''
  118 + }]
  119 + },
  120 + hotBrands: {
  121 + name: '热门品牌',
  122 + list: [{
  123 + textCn: 'Moussy',
  124 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  125 + url: ''
  126 + }, {
  127 + textCn: 'Moussy',
  128 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  129 + url: ''
  130 + }, {
  131 + textCn: 'Moussy',
  132 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  133 + url: ''
  134 + }, {
  135 + textCn: 'Moussy',
  136 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  137 + url: ''
  138 + }, {
  139 + textCn: 'Moussy',
  140 + img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
  141 + url: ''
  142 + }]
  143 + },
  144 + bannerBottom: {
  145 + img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg',
  146 + url: ''
  147 + }
  148 +}
  1 +var $ = require('jquery'),
  2 + swiper = require('yoho-idangerous.swiper');
  3 +
  4 +var bannerSwiper,
  5 + hotBrandsSwiper;
  6 +
  7 +//热门品牌轮播
  8 +hotBrandsSwiper = new swiper('.brands-swiper', {
  9 + grabCursor: true,
  10 + slidesPerView: 'auto',
  11 + wrapperClass: 'brands-list',
  12 + slideElement: 'li'
  13 +});
  1 +var $ = require('jquery'),
  2 + swiper = require('yoho-idangerous.swiper'),
  3 + bannerSwiper;
  4 +
  5 +//点击首页汉堡menu图标，滑出侧栏导航
  6 +$('.nav-btn').on('click', function(event) {
  7 + if (!$(this).hasClass('menu-open')) {
  8 + $('.mobile-wrap').addClass('menu-open');
  9 + $('.overlay').addClass('show');
  10 + //设置boy高度，页面不能上下滑动
  11 + $('body').css({
  12 + height: $(window).height(),
  13 + overflow: 'hidden'
  14 + });
  15 + }
  16 + event.stopPropagation();
  17 +});
  18 +
  19 +//点击页面主体，收起侧栏导航及二级导航
  20 +$('.mobile-wrap').on('click', function() {
  21 + if ($(this).hasClass('menu-open')) {
  22 + $('.mobile-wrap').removeClass('menu-open');
  23 + $('.overlay').removeClass('show');
  24 + $('.sub-nav').removeClass('show');
  25 + $('body').css({
  26 + height: 'auto',
  27 + overflow: 'auto'
  28 + })
  29 + }
  30 +});
  31 +
  32 +//点击一级导航，弹出二级导航
  33 +$('.side-nav').on('click', 'li', function() {
  34 + if ($(this).find('.sub-nav').size() > 0) {
  35 + $('.sub-nav').removeClass('show');
  36 + $(this).find('.sub-nav').addClass('show');
  37 + }
  38 +});
  39 +
  40 +//返回一级导航，收起二级导航
  41 +$('.sub-nav').each(function() {
  42 + $(this).find('li').eq(0).on('click', function() {
  43 + $('.sub-nav').removeClass('show');
  44 + event.stopPropagation();
  45 + });
  46 +});
  47 +
  48 +//头部banner轮播
  49 +if ($('.banner-swiper').find('li').size() > 1) {
  50 + bannerSwiper = new swiper('.banner-swiper', {
  51 + loop: true,
  52 + autoplay: 5000,
  53 + autoplayDisableOnInteraction: false,
  54 + paginationClickable: true,
  55 + slideElement: 'li',
  56 + pagination: '.banner-top .pagination-inner'
  57 + });
  58 +}
  1 +.banner-bottom {
  2 + margin: (30rem / $pxConvertRem) 0 0;
  3 + height: 160rem / $pxConvertRem;
  4 + overflow: hidden;
  5 + img {
  6 + display: block;
  7 + width: 100%;
  8 + }
  9 +}
1 -.banner-top{ 1 +.banner-top {
  2 + position: relative;
  3 + .swiper-pagination {
  4 + position: absolute;
  5 + left: 0;
  6 + right: 0;
  7 + bottom: 20rem / $pxConvertRem;
  8 + text-align: center;
  9 + .pagination-inner {
  10 + display: inline-block;
  11 + span {
  12 + display: inline-block;
  13 + width: 14rem / $pxConvertRem;
  14 + height: 14rem / $pxConvertRem;
  15 + background: #fff;
  16 + opacity: 0.5;
  17 + margin: 0 (9rem / $pxConvertRem);
  18 + border-radius: 50%;
  19 + }
  20 + span.swiper-active-switch {
  21 + opacity: 1;
  22 + }
  23 + }
  24 + }
  25 +}
  26 +
  27 +.banner-swiper {
2 height: 309rem / $pxConvertRem; 28 height: 309rem / $pxConvertRem;
3 overflow: hidden; 29 overflow: hidden;
4 - img{  
5 - width: 100%; 30 + ul {
  31 + position: relative;
6 height: 100%; 32 height: 100%;
  33 + li {
  34 + float: left;
  35 + height: 100%;
  36 + img {
  37 + width: 100%;
  38 + height: 100%;
  39 + }
  40 + }
7 } 41 }
8 } 42 }
@@ -2,6 +2,8 @@ @@ -2,6 +2,8 @@
2 height: 87rem / $pxConvertRem; 2 height: 87rem / $pxConvertRem;
3 line-height: 87rem / $pxConvertRem; 3 line-height: 87rem / $pxConvertRem;
4 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141)); 4 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
  5 + background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
  6 + background-image: gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
5 position: relative; 7 position: relative;
6 .iconfont { 8 .iconfont {
7 color: #fff; 9 color: #fff;
@@ -29,3 +31,6 @@ @@ -29,3 +31,6 @@
29 bottom: 0; 31 bottom: 0;
30 } 32 }
31 } 33 }
  34 +.girls-wrap .header{
  35 + background: #fd307f;
  36 +}
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 font-weight: bold; 40 font-weight: bold;
41 } 41 }
42 } 42 }
43 - li:hover{ 43 + li.current{
44 .nav-point{ 44 .nav-point{
45 color: #444; 45 color: #444;
46 } 46 }
@@ -59,11 +59,14 @@ @@ -59,11 +59,14 @@
59 transition: transform .3s ease-out; 59 transition: transform .3s ease-out;
60 li{ 60 li{
61 a{ 61 a{
  62 + display: flex;
  63 + display: -webkit-flex;
62 margin: 0 30rem / $pxConvertRem 0 112rem / $pxConvertRem; 64 margin: 0 30rem / $pxConvertRem 0 112rem / $pxConvertRem;
63 padding-left: 0; 65 padding-left: 0;
64 border-bottom: 1px solid #e0e0e0; 66 border-bottom: 1px solid #e0e0e0;
  67 + align-items: center;
65 } 68 }
66 - img{ 69 + /* img{
67 position: absolute; 70 position: absolute;
68 max-width: 50rem / $pxConvertRem; 71 max-width: 50rem / $pxConvertRem;
69 max-height: 50rem / $pxConvertRem; 72 max-height: 50rem / $pxConvertRem;
@@ -71,6 +74,12 @@ @@ -71,6 +74,12 @@
71 top: 50%; 74 top: 50%;
72 margin-top: -25rem / $pxConvertRem; 75 margin-top: -25rem / $pxConvertRem;
73 border: none; 76 border: none;
  77 + } */
  78 + img{
  79 + max-width: 50rem / $pxConvertRem;
  80 + max-height: 50rem / $pxConvertRem;
  81 + margin-left: -70rem / $pxConvertRem;
  82 + margin-right: 16rem / $pxConvertRem;
74 } 83 }
75 em{ 84 em{
76 font-weight: normal; 85 font-weight: normal;
@@ -82,6 +91,7 @@ @@ -82,6 +91,7 @@
82 background: #3e3e3e; 91 background: #3e3e3e;
83 a{ 92 a{
84 color: #fff; 93 color: #fff;
  94 + border-bottom: none;
85 } 95 }
86 } 96 }
87 } 97 }
  1 +.brands-swiper{
  2 + background: #fff;
  3 + width: 100%;
  4 + height: 140rem / $pxConvertRem;
  5 + overflow: hidden;
  6 + .brands-list{
  7 + position: relative;
  8 + padding-bottom: 29rem / $pxConvertRem;
  9 + border-bottom: 1px solid #e0e0e0;
  10 + li{
  11 + position: relative;
  12 + float: left;
  13 + padding-left: 30rem / $pxConvertRem;
  14 + width: 140rem / $pxConvertRem;
  15 + height: 140rem / $pxConvertRem;
  16 + img{
  17 + display: block;
  18 + width: 100%;
  19 + height: 100%;
  20 + }
  21 + .brands-title{
  22 + position: absolute;
  23 + left: 8rem / $pxConvertRem;
  24 + right: 8rem / $pxConvertRem;
  25 + bottom: 8rem / $pxConvertRem;
  26 + height: 28rem / $pxConvertRem;
  27 + line-height: 28rem / $pxConvertRem;
  28 + text-align: center;
  29 + font-size: 18rem / $pxConvertRem;
  30 + color: #444;
  31 + background: rgba(255, 255, 255, 0.5);
  32 + }
  33 + }
  34 + }
  35 +}
  1 +.hot-category{
  2 + margin: 30rem / $pxConvertRem 0 0;
  3 + border-top: 1px solid #e0e0e0;
  4 + .category-banner{
  5 + height: 198rem / $pxConvertRem;
  6 + img{
  7 + display: block;
  8 + width: 100%;
  9 + height: 100%;
  10 + }
  11 + }
  12 + .category-list{
  13 + background: #fff;
  14 + border-top: 1px solid #e0e0e0;
  15 + li{
  16 + float: left;
  17 + width: 158rem / $pxConvertRem;
  18 + height: 174rem / $pxConvertRem;
  19 + border-bottom: 1px solid #e0e0e0;
  20 + border-left: 1px solid #e0e0e0;
  21 + .img-box{
  22 + width: 100%;
  23 + height: 138rem / $pxConvertRem;
  24 + text-align: center;
  25 + vertical-align: middle;
  26 + img{
  27 + max-width: 100%;
  28 + max-height: 100%;
  29 + vertical-align: middle;
  30 + }
  31 + }
  32 + .category-title{
  33 + line-height: 22rem / $pxConvertRem;
  34 + color: #aaa;
  35 + font-size: 18rem / $pxConvertRem;
  36 + text-align: center;
  37 + }
  38 + }
  39 + }
  40 +}
1 $pxConvertRem : 40; 1 $pxConvertRem : 40;
2 -@import "compass", "compass/reset", "pages/boys"; 2 +
  3 +@import "compass", "compass/reset";
  4 +@import "common/side-nav", "common/header", "common/floor-header", "common/banner-top", "common/banner-bottom";
  5 +@import "pages/boys", "pages/girls";
3 6
4 body { 7 body {
5 font-family: helvetica,Arial,"黑体"; 8 font-family: helvetica,Arial,"黑体";
1 -@import "common/side-nav", "common/header", "common/floor-header", "common/banner-top";  
2 -  
3 -.mobile-wrap{ 1 +.mobile-wrap {
4 position: relative; 2 position: relative;
5 z-index: 2; 3 z-index: 2;
6 background: #f0f0f0; 4 background: #f0f0f0;
7 transform: translate3d(0, 0, 0); 5 transform: translate3d(0, 0, 0);
8 transition: transform .3s ease-out; 6 transition: transform .3s ease-out;
9 } 7 }
10 -.mobile-wrap.menu-open{ 8 +
  9 +.mobile-wrap.menu-open {
11 -webkit-transform: translate3d(540rem / $pxConvertRem, 0, 0); 10 -webkit-transform: translate3d(540rem / $pxConvertRem, 0, 0);
12 transform: translate3d(540rem / $pxConvertRem, 0, 0); 11 transform: translate3d(540rem / $pxConvertRem, 0, 0);
13 transition: transform .3s ease-out; 12 transition: transform .3s ease-out;
14 } 13 }
15 14
16 -.overlay{ 15 +.overlay {
17 display: none; 16 display: none;
18 position: absolute; 17 position: absolute;
19 top: 0; 18 top: 0;
@@ -25,6 +24,6 @@ @@ -25,6 +24,6 @@
25 z-index: 99; 24 z-index: 99;
26 } 25 }
27 26
28 -.overlay.show{ 27 +.overlay.show {
29 display: block; 28 display: block;
30 } 29 }
  1 +@import "girls/hot-category";
  2 +
  3 +@import "girls/hot-brands";
@@ -3,8 +3,10 @@ @@ -3,8 +3,10 @@
3 * @author: liuyue(yue.liu@yoho.cn) 3 * @author: liuyue(yue.liu@yoho.cn)
4 * @date: 2015/7/13 4 * @date: 2015/7/13
5 */ 5 */
6 -var boys = require('./views/controller/boys'); 6 +var boys = require('./views/controller/boys'),
  7 + girls = require('./views/controller/girls');
7 8
8 module.exports = function(app) { 9 module.exports = function(app) {
9 app.get('/boys', boys.index); //boys首页 10 app.get('/boys', boys.index); //boys首页
  11 + app.get('/girls', girls.index); //boys首页
10 }; 12 };
  1 +/**
  2 + * 女首页控制器
  3 + * @author: liuyue(yue.liu@yoho.cn)
  4 + * @date: 2015/7/13
  5 + */
  6 +var data = require('../../public/js/data/girls'),
  7 + layoutPath = '../layouts/layout';
  8 +
  9 +// 首页
  10 +exports.index = function(req, res) {
  11 + res.render('pages/girls', {
  12 + data: data,
  13 + layout: layoutPath,
  14 + module: 'girls'
  15 + });
  16 +};
  1 +{{# data}}
  2 +<div class="mobile-wrap girls-wrap">
  3 + {{> header}}
  4 + {{> common/banner_top}}
  5 + {{> girls/hot_category}}
  6 + {{> girls/hot_brands}}
  7 + {{> common/banner_bottom}}
  8 + <div class="overlay"></div>
  9 +</div>
  10 +{{> common/side_nav}}
  11 +{{/ data}}
  1 +{{# bannerBottom}}
  2 +<div class="banner-bottom">
  3 + <a href="{{url}}">
  4 + <img src="{{img}}" alt="">
  5 + </a>
  6 +</div>
  7 +{{/ bannerBottom}}
1 {{# bannerTop}} 1 {{# bannerTop}}
2 <div class="banner-top"> 2 <div class="banner-top">
3 - <div class="swiper-container"> 3 + <div class="banner-swiper swiper-container">
4 <ul class="swiper-wrapper"> 4 <ul class="swiper-wrapper">
5 {{# list}} 5 {{# list}}
6 - <li> 6 + <li class="swiper-slide">
7 <a href="{{url}}"> 7 <a href="{{url}}">
8 <img class="lazy" data-original="{{img}}" src="{{img}}" alt=""> 8 <img class="lazy" data-original="{{img}}" src="{{img}}" alt="">
9 </a> 9 </a>
@@ -11,6 +11,9 @@ @@ -11,6 +11,9 @@
11 {{/ list}} 11 {{/ list}}
12 </ul> 12 </ul>
13 </div> 13 </div>
14 - <div class="swiper-pagination"></div> 14 + <div class="swiper-pagination">
  15 + <div class="pagination-inner">
  16 + </div>
  17 + </div>
15 </div> 18 </div>
16 {{/ bannerTop}} 19 {{/ bannerTop}}
1 <div class="side-nav"> 1 <div class="side-nav">
2 <ul> 2 <ul>
3 {{# sideNav}} 3 {{# sideNav}}
4 - <li> 4 + <li {{# current}}class="current"{{/ current}}>
5 {{# url}} 5 {{# url}}
6 <a href="{{.}}"> 6 <a href="{{.}}">
7 {{/ url}} 7 {{/ url}}
@@ -32,4 +32,4 @@ @@ -32,4 +32,4 @@
32 </li> 32 </li>
33 {{/ sideNav}} 33 {{/ sideNav}}
34 </ul> 34 </ul>
35 -</div> 35 +</div>
  1 +{{# hotBrands}}
  2 +<div class="hot-brands">
  3 + {{> common/floor_header_more}}
  4 + <div class="brands-swiper">
  5 + <ul class="brands-list clearfix">
  6 + {{# list}}
  7 + <li class="swiper-slide">
  8 + <a href="{{url}}">
  9 + <img src="{{img}}" alt="">
  10 + <span class="brands-title">{{textCn}}</span>
  11 + </a>
  12 + </li>
  13 + {{/ list}}
  14 + </ul>
  15 + </div>
  16 +</div>
  17 +{{/ hotBrands}}
  1 +{{# hotCategory}}
  2 +<div class="hot-category">
  3 + <div class="category-banner">
  4 + <img src="{{img}}" alt="">
  5 + </div>
  6 + <ul class="category-list clearfix">
  7 + {{# list}}
  8 + <li>
  9 + <a href="{{url}}">
  10 + <div class="img-box">
  11 + <img src="{{img}}" alt="">
  12 + </div>
  13 + <p class="category-title">{{textCn}}</p>
  14 + </a>
  15 + </li>
  16 + {{/ list}}
  17 + </ul>
  18 +</div>
  19 +{{/ hotCategory}}
  1 +{{# hotCategory}}
  2 +<div class="hot-category">
  3 + <div class="category-banner">
  4 + <img src="{{img}}" alt="">
  5 + </div>
  6 + <ul class="category-list clearfix">
  7 + {{# list}}
  8 + <li>
  9 + <a href="{{url}}">
  10 + <div class="img-box">
  11 + <img src="{{img}}" alt="">
  12 + </div>
  13 + <p class="category-title">{{textCn}}</p>
  14 + </a>
  15 + </li>
  16 + {{/ list}}
  17 + </ul>
  18 +</div>
  19 +{{/ hotCategory}}