chenchao / YOHOBUYPC · Commits

Go to a project

Authored by biao
Commit adb32ce89222c46bcc8b7c4ffee1168dc3ff8012 1 parent 73544d74

sale页面加入列表

Inline Side-by-side
Showing 6 changed files with 491 additions and 0 deletions
@@ -6,5 +6,6 @@ @@ -6,5 +6,6 @@
6 6
7 {{> sale/activity-entry}} 7 {{> sale/activity-entry}}
8 {{> sale/brand-sale}} 8 {{> sale/brand-sale}}
  9 + {{> sale/sale-box}}
9 </div> 10 </div>
10 {{> layout/footer}} 11 {{> layout/footer}}
  1 +<div class="home-page">
  2 + {{#sale-category}}
  3 + <div class="floor-header clearfix">
  4 + <h2 class="floor-title">{{title}}</h2>
  5 + </div>
  6 + <ul class="sale-nav">
  7 + {{#navItem}}
  8 + <li class="{{#vip}}green{{/vip}} {{#incompleteSize}}yellow{{/incompleteSize}} {{#newDiscount}}red{{/newDiscount}} {{#if @first}}active first{{/if}} {{#if @last}}last{{/if}}">aa</li>
  9 + {{/navItem}}
  10 + </ul>
  11 + <div class="commodity-list">
  12 + <ul class="clearfix">
  13 + {{#each saleImage}}
  14 + <li class="commodity-item">
  15 + <a href="{{href}}" target= "_blank"><div class="commodity-img">
  16 + {{# tip}}
  17 + <i class="top">{{.}}</i>
  18 + {{/ tip}}
  19 + <img class="lazy" data-original="{{img}}"/></div>
  20 + <div class="commodity-content">
  21 + <p class="commodity-name">{{name}}</p>
  22 + <p class="commodity-price"><span>¥{{price}}</span></p>
  23 + </div>
  24 + </a>
  25 + </li>
  26 + {{/each}}
  27 + </ul>
  28 + </div>
  29 + {{/sale-category}}
  30 +</div>
  1 +/**
  2 + * sale页js打包入口文件
  3 + * @author： zhaobiao<bill.zhao@yoho.cn>
  4 + * @date: 2016/01/18
  5 + */
  6 +
  7 +require('./index');
@@ -5,9 +5,15 @@ @@ -5,9 +5,15 @@
5 */ 5 */
6 6
7 var $ = require('yoho.jquery'), 7 var $ = require('yoho.jquery'),
  8 + $navItem = $('.sale-nav li'),
8 lazyLoad = require('yoho.lazyload'); 9 lazyLoad = require('yoho.lazyload');
9 10
10 require('../common/slider'); 11 require('../common/slider');
11 12
12 lazyLoad($('img.lazy')); 13 lazyLoad($('img.lazy'));
13 $('.slide-container').slider(); 14 $('.slide-container').slider();
  15 +
  16 +$navItem.on('click', function() {
  17 + $(this).siblings('.active').removeClass('active');
  18 + $(this).addClass('active');
  19 +});
@@ -137,4 +137,233 @@ @@ -137,4 +137,233 @@
137 } 137 }
138 } 138 }
139 } 139 }
  140 +
  141 + .sale-nav li {
  142 + float: left;
  143 + width: 20%;
  144 + height: 40px;
  145 + line-height: 40px;
  146 + background-color: #e0e0e0;
  147 + text-align: center;
  148 + background-color: #f5f5f5;
  149 + color: #6d6d6d;
  150 + margin-bottom: 10px;
  151 + }
  152 + .sale-nav li.active {
  153 + color: #fff;
  154 + background-repeat: no-repeat;
  155 + background-size: 100% 100%;
  156 + }
  157 +
  158 + .sale-nav li.green.active {
  159 + color: #fff;
  160 + background-image: image-url('sale/navactive-green-middle.png');
  161 + background-repeat: no-repeat;
  162 + background-size: 100% 100%;
  163 + }
  164 +
  165 + .sale-nav li.green.first.active {
  166 + background-image: image-url('sale/navactive-green-first.png');
  167 + }
  168 +
  169 + .sale-nav li.green.last.active {
  170 + background-image: image-url('sale/navactive-green-last.png');
  171 + }
  172 +
  173 + .sale-nav li.yellow.active {
  174 + color: #fff;
  175 + background-image: image-url('sale/navactive-yellow-middle.png');
  176 + background-repeat: no-repeat;
  177 + background-size: 100% 100%;
  178 + }
  179 +
  180 + .sale-nav li.yellow.first.active {
  181 + background-image: image-url('sale/navactive-yellow-first.png');
  182 + }
  183 +
  184 + .sale-nav li.yellow.last.active {
  185 + background-image: image-url('sale/navactive-yellow-last.png');
  186 + }
  187 +
  188 + .sale-nav li.red.active {
  189 + color: #fff;
  190 + background-image: image-url('sale/navactive-red-middle.png');
  191 + background-repeat: no-repeat;
  192 + background-size: 100% 100%;
  193 + }
  194 +
  195 + .sale-nav li.red.first.active {
  196 + background-image: image-url('sale/navactive-red-first.png');
  197 + }
  198 +
  199 + .sale-nav li.red.last.active {
  200 + background-image: image-url('sale/navactive-red-last.png');
  201 + }
  202 +
  203 + @media screen and (min-width: 1150px) {
  204 + .floor-header {
  205 + margin:80px 0 40px
  206 + }
  207 +
  208 + .floor-header .header-navs li {
  209 + padding: 1px 15px
  210 + }
  211 + }
  212 +
  213 + .commodity-list ul {
  214 + width: 1004px
  215 + }
  216 +
  217 + .commodity-item {
  218 + float: left;
  219 + width: 241px;
  220 + margin: 0 10px 0 0
  221 + }
  222 +
  223 + .commodity-tag {
  224 + height: 20px
  225 + }
  226 +
  227 + .commodity-tag .good-tag {
  228 + display: block;
  229 + float: left;
  230 + margin-right: 5px;
  231 + height: 20px;
  232 + font-size: 12px;
  233 + text-align: center;
  234 + line-height: 20px;
  235 + box-sizing: border-box
  236 + }
  237 +
  238 + .commodity-tag .good-tag:last-child {
  239 + margin-right: 0
  240 + }
  241 +
  242 + .commodity-tag .new-tag {
  243 + width: 43px;
  244 + background-color: #78dc7e;
  245 + color: #fff
  246 + }
  247 +
  248 + .commodity-tag .renew-tag {
  249 + width: 53px;
  250 + background-color: #78dc7e;
  251 + color: #fff
  252 + }
  253 +
  254 + .commodity-tag .sale-tag {
  255 + width: 43px;
  256 + background-color: #ff575c;
  257 + color: #fff
  258 + }
  259 +
  260 + .commodity-tag .yohood-tag {
  261 + width: 64px;
  262 + background: url('../assets/images/yohood.png?1450667948') no-repeat;
  263 + background-size: 100% 100%
  264 + }
  265 +
  266 + .commodity-tag .limit-tag {
  267 + width: 60px;
  268 + line-height: 18px;
  269 + border: 1px solid #000;
  270 + color: #000
  271 + }
  272 +
  273 + .commodity-tag .yep-tag,.commodity-tag .ymp-tag {
  274 + width: 64px;
  275 + background-color: #ff575c;
  276 + color: #fff
  277 + }
  278 +
  279 + .commodity-img {
  280 + position: relative;
  281 + height: 323px;
  282 + text-align: center
  283 + }
  284 +
  285 + .commodity-img img {
  286 + width: 100%;
  287 + height: 100%;
  288 + vertical-align: middle
  289 + }
  290 +
  291 + .commodity-img .top-tag {
  292 + position: absolute;
  293 + width: 60px;
  294 + height: 60px;
  295 + top: 10px;
  296 + right: 10px;
  297 + line-height: 60px;
  298 + background: url('../assets/images/furniture/top-tag-bg.png?1450667948');
  299 + font-size: 20px;
  300 + color: #fff
  301 + }
  302 +
  303 + .commodity-img .few-tag {
  304 + position: absolute;
  305 + bottom: 0;
  306 + width: 100%;
  307 + height: 20px;
  308 + background: #ffac5b;
  309 + color: #fff;
  310 + line-height: 20px;
  311 + text-align: center;
  312 + font-size: 12px
  313 + }
  314 +
  315 + .commodity-content {
  316 + padding: 10px 0 0 0;
  317 + height: 69px;
  318 + overflow: hidden
  319 + }
  320 +
  321 + .commodity-content .commodity-name {
  322 + font-size: 12px;
  323 + color: #000;
  324 + line-height: 18px;
  325 + text-align: center
  326 + }
  327 +
  328 + .commodity-content .commodity-price {
  329 + position: relative;
  330 + margin: 3px 0 0 0;
  331 + text-align: center;
  332 + line-height: 20px;
  333 + color: #000
  334 + }
  335 +
  336 + .commodity-content .commodity-price span {
  337 + display: inline-block;
  338 + font-size: 12px
  339 + }
  340 +
  341 + .commodity-content .commodity-price .price-sale {
  342 + margin-left: 10px;
  343 + padding-left: 10px;
  344 + width: 36px;
  345 + height: 20px;
  346 + line-height: 20px;
  347 + background: url('../assets/images/furniture/sale-tag-bg.png?1450667948');
  348 + color: #fff
  349 + }
  350 +
  351 + @media screen and (min-width: 1150px) {
  352 + .commodity-list ul {
  353 + width:1160px
  354 + }
  355 +
  356 + .commodity-item {
  357 + width: 280px
  358 + }
  359 +
  360 + .commodity-img {
  361 + height: 374px
  362 + }
  363 +
  364 + .commodity-content {
  365 + padding: 14px 0 0 0;
  366 + height: 77px
  367 + }
  368 + }
140 } 369 }
@@ -152,6 +152,224 @@ class Sale1Controller extends WebAction @@ -152,6 +152,224 @@ class Sale1Controller extends WebAction
152 'title' => '2015春夏海量大促！' 152 'title' => '2015春夏海量大促！'
153 ) 153 )
154 ) 154 )
  155 + ),
  156 + 'sale-category' => array(
  157 + array(
  158 + 'title' => 'VIP会员专享 ',
  159 + 'vip' => true,
  160 + 'navItem' => array(
  161 + array(
  162 + 'name' => '12',
  163 + ),
  164 + array(
  165 + 'name' => '12',
  166 + ),
  167 + array(
  168 + 'name' => '12',
  169 + ),
  170 + array(
  171 + 'name' => '12',
  172 + ),
  173 + array(
  174 + 'name' => '12',
  175 + ),
  176 + ),
  177 + 'saleImage'=> array(
  178 + array(
  179 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  180 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  181 + 'name' => 'test',
  182 + 'price' => '888'
  183 + ),
  184 + array(
  185 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  186 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  187 + 'name' => 'test',
  188 + 'price' => '888'
  189 + ),
  190 + array(
  191 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  192 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  193 + 'name' => 'test',
  194 + 'price' => '888'
  195 + ),
  196 + array(
  197 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  198 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  199 + 'name' => 'test',
  200 + 'price' => '888'
  201 + ),
  202 + array(
  203 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  204 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  205 + 'name' => 'test',
  206 + 'price' => '888'
  207 + ),
  208 + array(
  209 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  210 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  211 + 'name' => 'test',
  212 + 'price' => '888'
  213 + ),
  214 + array(
  215 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  216 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  217 + 'name' => 'test',
  218 + 'price' => '888'
  219 + ),
  220 + array(
  221 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  222 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  223 + 'name' => 'test',
  224 + 'price' => '888'
  225 + )
  226 +
  227 + )
  228 + ),
  229 + array(
  230 + 'title' => '断码区域',
  231 + 'incompleteSize' => true,
  232 + 'navItem' => array(
  233 + array(
  234 + 'name' => '12',
  235 + ),
  236 + array(
  237 + 'name' => '12',
  238 + ),
  239 + array(
  240 + 'name' => '12',
  241 + ),
  242 + array(
  243 + 'name' => '12',
  244 + ),
  245 + array(
  246 + 'name' => '12',
  247 + ),
  248 + ),
  249 + 'saleImage'=> array(
  250 + array(
  251 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  252 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  253 + 'name' => 'test',
  254 + 'price' => '888'
  255 + ),
  256 + array(
  257 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  258 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  259 + 'name' => 'test',
  260 + 'price' => '888'
  261 + ),
  262 + array(
  263 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  264 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  265 + 'name' => 'test',
  266 + 'price' => '888'
  267 + ),
  268 + array(
  269 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  270 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  271 + 'name' => 'test',
  272 + 'price' => '888'
  273 + ),
  274 + array(
  275 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  276 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  277 + 'name' => 'test',
  278 + 'price' => '888'
  279 + ),
  280 + array(
  281 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  282 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  283 + 'name' => 'test',
  284 + 'price' => '888'
  285 + ),
  286 + array(
  287 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  288 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  289 + 'name' => 'test',
  290 + 'price' => '888'
  291 + ),
  292 + array(
  293 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  294 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  295 + 'name' => 'test',
  296 + 'price' => '888'
  297 + )
  298 +
  299 + )
  300 + ),
  301 + array(
  302 + 'title' => '最新降价',
  303 + 'newDiscount' => true,
  304 + 'navItem' => array(
  305 + array(
  306 + 'name' => '12',
  307 + ),
  308 + array(
  309 + 'name' => '12',
  310 + ),
  311 + array(
  312 + 'name' => '12',
  313 + ),
  314 + array(
  315 + 'name' => '12',
  316 + ),
  317 + array(
  318 + 'name' => '12',
  319 + ),
  320 + ),
  321 + 'saleImage'=> array(
  322 + array(
  323 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  324 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  325 + 'name' => 'test',
  326 + 'price' => '888'
  327 + ),
  328 + array(
  329 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  330 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  331 + 'name' => 'test',
  332 + 'price' => '888'
  333 + ),
  334 + array(
  335 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  336 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  337 + 'name' => 'test',
  338 + 'price' => '888'
  339 + ),
  340 + array(
  341 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  342 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  343 + 'name' => 'test',
  344 + 'price' => '888'
  345 + ),
  346 + array(
  347 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  348 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  349 + 'name' => 'test',
  350 + 'price' => '888'
  351 + ),
  352 + array(
  353 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  354 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  355 + 'name' => 'test',
  356 + 'price' => '888'
  357 + ),
  358 + array(
  359 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  360 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  361 + 'name' => 'test',
  362 + 'price' => '888'
  363 + ),
  364 + array(
  365 + 'href' => 'http://www.yohobuy.com/product/pro_327765_421995/TUCTUC36205TaoZhuang.html?channel=kids',
  366 + 'img' => "http://img13.static.yhbimg.com/goodsimg/2015/11/05/09/02eb88e527a57d0e26e13f2eb9cc35ad0e.jpg?imageMogr2/thumbnail/280x373/extent/280x373/background/d2hpdGU=/position/center/quality/90",
  367 + 'name' => 'test',
  368 + 'price' => '888'
  369 + )
  370 +
  371 + )
  372 + )
155 ) 373 )
156 ); 374 );
157 $this->setWebNavHeader(); 375 $this->setWebNavHeader();