Authored by 张丽霞

奥莱频道页模板

@@ -8,6 +8,9 @@ @@ -8,6 +8,9 @@
8 8
9 // const headerModel = require('../../../doraemon/models/header'); 9 // const headerModel = require('../../../doraemon/models/header');
10 10
  11 +// 开发用模拟数据
  12 +const outletsSimulation = require('../models/simulation');
  13 +
11 /** 14 /**
12 * outlets 首页 15 * outlets 首页
13 * @param {[type]} req [description] 16 * @param {[type]} req [description]
@@ -16,6 +19,7 @@ @@ -16,6 +19,7 @@
16 */ 19 */
17 exports.index = (req, res) => { 20 exports.index = (req, res) => {
18 res.render('outlets/index', {}); 21 res.render('outlets/index', {});
  22 +
19 // headerModel.requestHeaderData() 23 // headerModel.requestHeaderData()
20 // .then(response => { 24 // .then(response => {
21 // response = headerModel.setHeaderData(response.data, 'outlets'); 25 // response = headerModel.setHeaderData(response.data, 'outlets');
@@ -50,15 +54,24 @@ exports.index = (req, res) => { @@ -50,15 +54,24 @@ exports.index = (req, res) => {
50 */ 54 */
51 exports.channel = (req, res) => { 55 exports.channel = (req, res) => {
52 let channel = { 56 let channel = {
53 - boys: '',  
54 - girls: '', 57 + boys: 'true',
  58 + girls: 'true',
55 kids: '', 59 kids: '',
56 lifestyle: '' 60 lifestyle: ''
57 }; 61 };
58 - let response = {}; 62 + let response = {
  63 + module: 'product',
  64 + page: 'outlets',
  65 + footerTop: true,
  66 + devEnv: true
  67 + };
59 68
60 if (!channel[req.params.channel]) { 69 if (!channel[req.params.channel]) {
61 response.pageErr = true; 70 response.pageErr = true;
62 } 71 }
63 - res.render('outlets/channel', response); 72 +
  73 + // 假数据输出
  74 + res.render('outlets/channel', Object.assign(response, outletsSimulation.outletBanner()));
  75 +
  76 + // res.render('outlets/channel', response);
64 }; 77 };
@@ -554,3 +554,36 @@ exports.other = () => { @@ -554,3 +554,36 @@ exports.other = () => {
554 } 554 }
555 }; 555 };
556 }; 556 };
  557 +
  558 +/**
  559 + * outlets 奥莱
  560 + * @return {[type]} [description]
  561 + */
  562 +exports.outletBanner = () => {
  563 + return {
  564 + center: [
  565 + {
  566 + href: 'www.baidu.com',
  567 + img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/700/h/500'
  568 + },
  569 + {
  570 + href: 'www.baidu.com',
  571 + img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/700/h/500'
  572 + }
  573 + ],
  574 +
  575 + right: [{
  576 + href: 'www.baidu.com',
  577 + img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/240/h/103'
  578 + },
  579 + {
  580 + href: 'www.baidu.com',
  581 + img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/240/h/103'
  582 + }
  583 + ],
  584 +
  585 + hotBrands: {
  586 + brandUrl: 'www.baidu.com'
  587 + }
  588 + };
  589 +};
1 <p>outlets channel page</p> 1 <p>outlets channel page</p>
  2 +
  3 +<div class="home-page yoho-page" data-page="girls">
  4 + <div class="debris-slider clearfix">
  5 + <div class="center-col col">
  6 + <ul class="slide-wrapper">
  7 + {{# center}}
  8 + <li>
  9 + <a href="{{href}}" target="_blank">
  10 + <img src="{{img}}">
  11 + <!-- <img class="lazy" data-original="{{img}}"> -->
  12 + </a>
  13 + </li>
  14 + {{/ center}}
  15 + </ul>
  16 + <div class="slide-switch">
  17 + <a class="prev" href="javascript:;">
  18 + <span class="iconfont">&#xe60c;</span>
  19 + </a>
  20 + <a class="next" href="javascript:;">
  21 + <span class="iconfont">&#xe60b;</span>
  22 + </a>
  23 + </div>
  24 + </div>
  25 + <div class="right-col col">
  26 + {{# right}}
  27 + <a href="{{href}}" target="_blank">
  28 + <img src="{{img}}">
  29 + <!-- <img class="lazy" data-original="{{img}}"> -->
  30 + </a>
  31 + {{/ right}}
  32 + </div>
  33 + </div>
  34 +
  35 + {{!热门品牌}}
  36 + {{# hotBrands}}
  37 + {{> brand/hot-brand}}
  38 + {{/hotBrands}}
  39 +</div>
  1 +{{> index/floor-header}}
  2 +<div class="preference-brand imgopacity">
  3 + <div class="logo-brand " data-url="{{brandUrl}}">
  4 + </div>
  5 +</div>
  1 +<div class="floor-header clearfix">
  2 + <h2 class="floor-title">{{name}}</h2>
  3 + {{#if navs}}
  4 + <ul class="header-navs">
  5 + {{# navs}}
  6 + <li data-classify="{{id}}">
  7 + <a target="_blank" href="{{href}}">{{name}}</a>
  8 + </li>
  9 + {{/ navs}}
  10 + </ul>
  11 + {{/if}}
  12 +</div>
  1 +/**
  2 + * 首页优选品牌js
  3 + * @author: liuyue(yue.liu@yoho.cn)
  4 + * @date: 2015/12/08
  5 + */
  6 +
  7 +var $ = require('yoho-jquery'),
  8 + Handlebars = require('yoho-handlebars'),
  9 + lazyLoad = require('yoho-jquery-lazyload');
  10 +
  11 +(function() {
  12 + var LogoBrand = function(element, options) {
  13 + this.$element = $(element);
  14 + this.options = $.extend({}, $.fn.logoBrand.defaults, options);
  15 +
  16 + this.init();
  17 + };
  18 +
  19 + LogoBrand.prototype = {
  20 + init: function() {
  21 + this.$element.addClass('logos-' + this.options.showNum);
  22 + this._sendRequest();
  23 + },
  24 + _createHelper: function() {
  25 + var showNum = this.options.showNum;
  26 +
  27 + Handlebars.registerHelper('brandList', function(items, options) {
  28 + var out = '<ul>',
  29 + i = 0,
  30 + item = null,
  31 + fillNum = 0;
  32 +
  33 + // 不是每页显示个数的倍数,填充数据
  34 + if (items.length % showNum !== 0) {
  35 + fillNum = showNum - (items.length % showNum);
  36 + for (i = 0; i < fillNum; i++) {
  37 + items.push({
  38 + href: 'javascript:;',
  39 + img: ''
  40 + });
  41 + }
  42 + }
  43 +
  44 + for (i = 0; i < items.length; i++) {
  45 + item = options.fn(items[i]);
  46 +
  47 + if (i % showNum === 5 || i === 5) {
  48 +
  49 + // 插入切换按钮的位置
  50 + out = out + '<li class="logo-brand-switch" data-page="' + Math.floor(i / showNum) + '">' +
  51 + '<a class="prev iconfont" href="javascript:;">&#xe60f;</a>' +
  52 + '<a class="next iconfont" href="javascript:;">&#xe60e;</a></li>' +
  53 + '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
  54 + } else if (i !== 0 && i % showNum === 0) {
  55 +
  56 + // 插入more的位置,more占的是下一页第一个brand的位置,所以page是i/17
  57 + out = out + '<li class="brand-more" data-page="' + Math.floor(i / (showNum + 1)) + '">' +
  58 + '<a href="javascript:;" target="_blank">MORE ></a></li>' +
  59 + '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
  60 + } else {
  61 + out = out + '<li data-page="' + Math.floor(i / showNum) + '">' + item + '</li>';
  62 + }
  63 + }
  64 +
  65 + // 加上最后一个more, more占的是下一页第一个brand的位置,这里已经循环不到brand,所以加在末尾
  66 + return out + '<li class="brand-more" data-page="' + Math.floor(i / (showNum + 1)) + '">' +
  67 + '<a href="javascript:;" target="_blank">MORE ></a></li></ul>';
  68 +
  69 + });
  70 + },
  71 + _sendRequest: function() {
  72 + var that = this;
  73 +
  74 + $.ajax({
  75 + type: 'GET',
  76 + url: that.options.url,
  77 + dataType: 'json',
  78 + success: function(data) {
  79 + var brandTpl,
  80 + brandHtml;
  81 +
  82 + if (!data || data.length === 0) {
  83 + return;
  84 + }
  85 +
  86 + that._createHelper();
  87 + brandHtml = '\{{#brandList logoBrand}}' +
  88 + '<a href="\{{href}}" target="_blank"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
  89 + '\{{/brandList}}';
  90 + brandTpl = Handlebars.compile(brandHtml);
  91 + that.$element.html(brandTpl(data));
  92 + that.$element.find('.brand-more a').attr('href', data.moreBrand);
  93 + lazyLoad(that.$element.find('img.lazy'));
  94 + that._bindEvent();
  95 + }
  96 + });
  97 + },
  98 + _brandShow: function(hidePage, showPage) {
  99 + var that = this;
  100 +
  101 + lazyLoad($('li[data-page=' + showPage + ']').find('img.lazy').trigger('appear'));
  102 + that.$element.find('li[data-page=' + hidePage + ']').find('img').fadeOut('normal', function() {
  103 + that.$element.find('li').hide();
  104 + that.$element.find('li[data-page=' + showPage + ']').show().find('img').fadeIn();
  105 + });
  106 + },
  107 + _bindEvent: function() {
  108 + var that = this;
  109 +
  110 + that.$element.on('click', '.next', function() {
  111 + var page = $(this).parent().data('page'),
  112 + nextPage = 0,
  113 + totalPage = Math.ceil(that.$element.find('li').size() / (that.options.showNum + 2)) - 1;
  114 +
  115 + if (page === totalPage) {
  116 + nextPage = 0;
  117 + } else {
  118 + nextPage = page + 1;
  119 + }
  120 + that._brandShow(page, nextPage);
  121 + });
  122 +
  123 + that.$element.on('click', '.prev', function() {
  124 + var page = $(this).parent().data('page'),
  125 + prevPage = 0,
  126 + totalPage = Math.ceil(that.$element.find('li').size() / (that.options.showNum + 2)) - 1;
  127 +
  128 + if (page === 0) {
  129 + prevPage = totalPage;
  130 + } else {
  131 + prevPage = page - 1;
  132 + }
  133 + that._brandShow(page, prevPage);
  134 + });
  135 + }
  136 + };
  137 + $.fn.logoBrand = function(option) {
  138 + return this.each(function() {
  139 + var $this = $(this),
  140 + data = $this.data('LogoBrand'),
  141 + options = typeof option === 'object' && option;
  142 +
  143 + if (!data) {
  144 + $this.data('LogoBrand', (data = new LogoBrand(this, options)));
  145 + }
  146 + if (typeof option === 'string') {
  147 + data[option]();
  148 + }
  149 + });
  150 + };
  151 + $.fn.logoBrand.Constructor = LogoBrand;
  152 + $.fn.logoBrand.defaults = {
  153 + showNum: 16,
  154 + url: '/boys/getBrand'
  155 + };
  156 +}());
  1 +
  2 +var $ = require('yoho-jquery'),
  3 + lazyLoad = require('yoho-jquery-lazyload'),
  4 + homePage = $('.home-page').data('page');
  5 +
  6 +lazyLoad($('img.lazy'));
  7 +
  8 +require('../common/slider');
  9 +require('../common/slider2');
  10 +require('../common/logo-brand');
  11 +
  12 +
  13 +if (homePage === 'boys') {
  14 + $('.slide-container').slider({
  15 + pagination: '.thumb-pagination'
  16 + });
  17 +} else {
  18 + $('.center-col').slider();
  19 + $('.slide-container').slider();
  20 +}
  21 +
  22 +// if (homePage === 'boys') {
  23 +// $('.logo-brand').logoBrand({
  24 +// url: brandUrl
  25 +// });
  26 +// $('.img-brand').slider2();
  27 +// } else {
  28 +// $('.logo-brand').logoBrand({
  29 +// showNum: 10,
  30 +// url: brandUrl
  31 +// });
  32 +// $('.img-slider-wrapper').slider2();
  33 +// }
@@ -4,7 +4,7 @@ var $ = require('yoho-jquery'), @@ -4,7 +4,7 @@ var $ = require('yoho-jquery'),
4 var product = require('./product'); 4 var product = require('./product');
5 5
6 require('../header'); 6 require('../header');
7 -require('../index/slider'); 7 +require('../common/slider');
8 product.init(); 8 product.init();
9 9
10 lazyLoad($('img.lazy')); 10 lazyLoad($('img.lazy'));
@@ -229,6 +229,7 @@ a { @@ -229,6 +229,7 @@ a {
229 @import "footer"; 229 @import "footer";
230 @import "404"; 230 @import "404";
231 @import "common/index"; 231 @import "common/index";
  232 +@import "plugin/slider";
232 233
233 /* 模块 */ 234 /* 模块 */
234 @import "product/index"; 235 @import "product/index";
  1 +.slider {
  2 + position: relative;
  3 + height: 327px;
  4 + width: 100%;
  5 + overflow: hidden;
  6 +
  7 + img {
  8 + max-width: 100%;
  9 + max-height: 100%;
  10 + }
  11 +}
  12 +
  13 +.slide-pagination {
  14 + position: absolute;
  15 + left: 0;
  16 + right: 0;
  17 + bottom: 12px;
  18 + text-align: center;
  19 +}
  20 +
  21 +.slide-pagination-inner {
  22 + display: inline-block;
  23 + position: relative;
  24 + padding: 7px;
  25 + vertical-align: middle;
  26 +}
  27 +
  28 +.slide-shade {
  29 + position: absolute;
  30 + left: 0;
  31 + right: 0;
  32 + top: 0;
  33 + bottom: 0;
  34 + background: #000;
  35 + opacity: 0.3;
  36 + border-radius: 13px;
  37 +}
  38 +
  39 +.slide-pagination-last span {
  40 + display: block;
  41 + float: left;
  42 + position: relative;
  43 + margin: 0 7px;
  44 + width: 12px;
  45 + height: 12px;
  46 + background: #fff;
  47 + cursor: pointer;
  48 + opacity: 0.6;
  49 + border-radius: 6px;
  50 + z-index: 2;
  51 +
  52 + &.focus {
  53 + opacity: 1;
  54 + }
  55 +}
  56 +
  57 +.slide-switch {
  58 + display: none;
  59 +
  60 + &.show {
  61 + display: block;
  62 + }
  63 +
  64 + a {
  65 + display: block;
  66 + position: absolute;
  67 + top: 50%;
  68 + margin: -30px 0 0;
  69 + width: 60px;
  70 + height: 60px;
  71 + line-height: 56px;
  72 + text-align: center;
  73 + z-index: 2;
  74 + background: #fff;
  75 + opacity: 0.55;
  76 +
  77 + &:hover {
  78 + opacity: 0.9;
  79 + }
  80 +
  81 + .iconfont {
  82 + font-size: 32px;
  83 + color: #59585a;
  84 + }
  85 + }
  86 +
  87 + .prev {
  88 + left: 0;
  89 + }
  90 +
  91 + .next {
  92 + right: 0;
  93 + }
  94 +}
@@ -11,6 +11,7 @@ @@ -11,6 +11,7 @@
11 @import "shop-entry"; 11 @import "shop-entry";
12 @import "detail"; 12 @import "detail";
13 @import "sale/_index.css"; 13 @import "sale/_index.css";
  14 +@import "outlets/_index.css";
14 15
15 .product-page { 16 .product-page {
16 /* 分页 */ 17 /* 分页 */
  1 +.home-page {
  2 + width: 1150px;
  3 + margin: 10px auto 0;
  4 +
  5 + .slide-container {
  6 + position: absolute;
  7 + left: 0;
  8 + right: 0;
  9 + height: 450px;
  10 + }
  11 +
  12 + .slide-thumb-container {
  13 + height: 510px;
  14 + }
  15 +
  16 + .slide-wrapper {
  17 + position: relative;
  18 + height: 450px;
  19 + overflow: hidden;
  20 +
  21 + ul {
  22 + position: relative;
  23 + height: 100%;
  24 + }
  25 +
  26 + &:hover .slide-switch.show {
  27 + display: block;
  28 + }
  29 +
  30 + li {
  31 + display: none;
  32 + position: absolute;
  33 + top: 0;
  34 + right: 0;
  35 + width: 100%;
  36 + height: 100%;
  37 +
  38 + a {
  39 + display: block;
  40 + height: 100%;
  41 + width: 1150px;
  42 + margin: 0 auto;
  43 + }
  44 +
  45 + &:first-child {
  46 + display: block;
  47 + }
  48 +
  49 + img {
  50 + width: 100%;
  51 + height: 100%;
  52 + }
  53 + }
  54 + }
  55 +
  56 + .slide-container-placeholder {
  57 + height: 450px;
  58 + width: 100%;
  59 +
  60 + }
  61 +
  62 + .slide-thumb-container-placeholder {
  63 + height: 510px;
  64 + }
  65 +
  66 + .slide-switch {
  67 + display: block;
  68 +
  69 + a {
  70 + position: absolute;
  71 + top: 50%;
  72 + margin: -30px 0 0;
  73 + width: 60px;
  74 + height: 60px;
  75 + line-height: 56px;
  76 + text-align: center;
  77 + z-index: 2;
  78 + background: #fff;
  79 + opacity: 0.55;
  80 +
  81 + &.prev {
  82 + left: 50%;
  83 + margin-left: -575px;
  84 + }
  85 +
  86 + &.next {
  87 + right: 50%;
  88 + margin-right: -575px;
  89 + }
  90 +
  91 + &:hover {
  92 + opacity: 0.9;
  93 + }
  94 +
  95 + .iconfont {
  96 + font-size: 32px;
  97 + color: #59585a;
  98 + }
  99 + }
  100 + }
  101 +
  102 + .thumb-pagination {
  103 + width: 1148px;
  104 + margin: 6px auto 0;
  105 + padding-left: 2px;
  106 +
  107 + li {
  108 + position: relative;
  109 + float: left;
  110 + margin-left: 6px;
  111 + width: 138px;
  112 + height: 54px;
  113 +
  114 + &:first-child {
  115 + margin: 0;
  116 + }
  117 +
  118 + &.focus a {
  119 + opacity: 0;
  120 + }
  121 +
  122 + a {
  123 + position: absolute;
  124 + left: 0;
  125 + right: 0;
  126 + bottom: 0;
  127 + top: 0;
  128 + background: #000;
  129 + opacity: 0.3;
  130 + }
  131 +
  132 + img {
  133 + width: 100%;
  134 + height: 100%;
  135 + }
  136 + }
  137 + }
  138 +
  139 + /*
  140 + 大banner圆点
  141 + */
  142 + .slide-pagination {
  143 + font-size: 0;
  144 +
  145 + .slide-shade {
  146 + position: absolute;
  147 + left: 0;
  148 + right: 0;
  149 + top: 0;
  150 + bottom: 0;
  151 + background: #000;
  152 + opacity: 0.3;
  153 + border-radius: 13px;
  154 + }
  155 +
  156 + span {
  157 + position: relative;
  158 + display: inline-block;
  159 + margin: 0 7px;
  160 + width: 12px;
  161 + height: 12px;
  162 + background: #fff;
  163 + cursor: pointer;
  164 + opacity: 0.6;
  165 + border-radius: 6px;
  166 + z-index: 2;
  167 +
  168 + &.focus {
  169 + opacity: 1;
  170 + }
  171 + }
  172 + }
  173 +
  174 + .debris-slider {
  175 + height: 510px;
  176 + width: 100%;
  177 +
  178 + .col {
  179 + float: left;
  180 +
  181 + a {
  182 + display: block;
  183 + }
  184 + }
  185 + .right-col a {
  186 + margin-bottom: 10px;
  187 +
  188 + &:last-child {
  189 + margin-bottom: 0;
  190 + }
  191 + }
  192 +
  193 + .right-col img {
  194 + height: 100%;
  195 + width: 100%;
  196 + }
  197 +
  198 + .center-col {
  199 + position: relative;
  200 + width: 700px;
  201 + height: 100%;
  202 + margin-right: 10px;
  203 + font-size: 0;
  204 +
  205 + &:hover {
  206 + .slide-switch.show {
  207 + display: block;
  208 + }
  209 + }
  210 +
  211 + .slide-wrapper {
  212 + height: 100%;
  213 +
  214 + li a {
  215 + width: 100%;
  216 + }
  217 + }
  218 +
  219 + .slide-switch {
  220 + a.prev {
  221 + left: 0;
  222 + margin-left: 0;
  223 + }
  224 + a.next {
  225 + right: 0;
  226 + margin-right: 0;
  227 + }
  228 + }
  229 +
  230 + img {
  231 + max-width: 100%;
  232 + max-height: 100%;
  233 + }
  234 + }
  235 +
  236 + .right-col a {
  237 + width: 280px;
  238 + height: 120px;
  239 + }
  240 +
  241 + .right-col a:first-child {
  242 + height: 380px;
  243 + margin-bottom: 11px;
  244 + }
  245 + }
  246 +
  247 + .new-report {
  248 + img {
  249 + display: block;
  250 + width: 100%;
  251 + height: 100%;
  252 + }
  253 +
  254 + .report-list {
  255 + float: left;
  256 + width: 868px;
  257 + }
  258 +
  259 + li {
  260 + float: left;
  261 + margin: 0 8px 8px 0;
  262 + width: 185px;
  263 + height: 248px;
  264 + overflow: hidden;
  265 +
  266 + &:first-child {
  267 + margin-right: 7px;
  268 + width: 282px;
  269 + height: 504px;
  270 + }
  271 + }
  272 +
  273 + .last-item {
  274 + float: left;
  275 + width: 282px;
  276 + height: 504px;
  277 + overflow: hidden;
  278 + }
  279 + }
  280 +
  281 + /*
  282 + 优选品牌
  283 + */
  284 + .preference-brand {
  285 + overflow: hidden;
  286 + }
  287 +
  288 + .preference-brand-list {
  289 + margin-top: 8px;
  290 + width: 1158px;
  291 + }
  292 +
  293 + .preference-brand-item {
  294 + float: left;
  295 + margin-right: 8px;
  296 + margin-bottom: 8px;
  297 +
  298 + a {
  299 + display: table-cell;
  300 + width: 185px;
  301 + height: 86px;
  302 + text-align: center;
  303 + vertical-align: middle;
  304 + }
  305 +
  306 + img {
  307 + display: block;
  308 + max-width: 100%;
  309 + max-height: 100%;
  310 + margin: 0 auto;
  311 + }
  312 + }
  313 +
  314 + .preference-more {
  315 + float: left;
  316 + width: 185px;
  317 + height: 86px;
  318 + line-height: 100px;
  319 + text-align: center;
  320 + color: black;
  321 + font-size: 16px;
  322 + }
  323 +
  324 + .img-slider-wrapper {
  325 + position: relative;
  326 + width: 100%;
  327 + height: 558px;
  328 + background: #8ae6e0;
  329 + overflow: hidden;
  330 +
  331 + .img-brand-switch {
  332 + display: block;
  333 + a {
  334 + position: absolute;
  335 + top: 50%;
  336 + font-size: 36px;
  337 + color: #fff;
  338 +
  339 + &.next {
  340 + right: 30px;
  341 + }
  342 +
  343 + &.prev {
  344 + left: 30px;
  345 + }
  346 + }
  347 + }
  348 + }
  349 +
  350 + .img-container-landscape {
  351 + box-sizing: border-box;
  352 + margin: 86px auto 0;
  353 + width: 982px;
  354 + height: 433px;
  355 + overflow: hidden;
  356 +
  357 + .img-list {
  358 + width: 1000px;
  359 + height: 100%;
  360 + }
  361 +
  362 + .img-item {
  363 + float: left;
  364 + box-sizing: border-box;
  365 + width: 320px;
  366 + height: 100%;
  367 + margin-right: 10px;
  368 +
  369 + img {
  370 + width: 100%;
  371 + height: 100%;
  372 + }
  373 + }
  374 + }
  375 +
  376 + .img-brand {
  377 + position: relative;
  378 + width: 100%;
  379 + height: 175px;
  380 + overflow: hidden;
  381 +
  382 + &:hover {
  383 + .img-brand-switch {
  384 + display: block;
  385 + }
  386 + }
  387 + ul {
  388 + width: 1158px;
  389 + }
  390 + li {
  391 + float: left;
  392 + margin: 0 8px 0 0;
  393 + width: 378px;
  394 + height: 175px;
  395 + line-height: 175px;
  396 + overflow: hidden;
  397 + font-size: 0;
  398 + text-align: center;
  399 +
  400 + img {
  401 + max-width: 100%;
  402 + max-height: 100%;
  403 + vertical-align: middle;
  404 + }
  405 + }
  406 + .img-brand-switch {
  407 + display: none;
  408 +
  409 + a {
  410 + position: absolute;
  411 + top: 50%;
  412 + margin: -20px 0 0;
  413 + width: 40px;
  414 + height: 40px;
  415 + line-height: 40px;
  416 + text-align: center;
  417 + z-index: 2;
  418 + background: #fff;
  419 + opacity: 0.55;
  420 +
  421 + &.prev {
  422 + left: 0;
  423 + }
  424 + &.next {
  425 + right: 0;
  426 + }
  427 + &:hover {
  428 + opacity: 0.9;
  429 +
  430 + }
  431 + }
  432 + }
  433 + }
  434 +
  435 + .logo-brand {
  436 + width: 100%;
  437 + height: 282px;
  438 + overflow: hidden;
  439 +
  440 + &.logos-10 {
  441 + height: 188px;
  442 + }
  443 +
  444 + ul {
  445 + width: 1158px;
  446 + }
  447 +
  448 + li {
  449 + float: left;
  450 + margin: 8px 8px 0 0;
  451 + width: 185px;
  452 + height: 86px;
  453 + line-height: 86px;
  454 + font-size: 0;
  455 + text-align: center;
  456 + img {
  457 + max-width: 100%;
  458 + max-height: 100%;
  459 + vertical-align: middle;
  460 + }
  461 + }
  462 +
  463 + .logo-brand-switch {
  464 + position: relative;
  465 + background: resolve('index/logo-brand-line.png') no-repeat center center;
  466 + line-height: normal;
  467 +
  468 + .iconfont {
  469 + position: absolute;
  470 + left: 50%;
  471 + font-size: 32px;
  472 +
  473 + &.prev {
  474 + top: 10px;
  475 + margin-left: -48px;
  476 + }
  477 + &.next {
  478 + bottom: 12px;
  479 + margin-left: 20px;
  480 + }
  481 + }
  482 + }
  483 +
  484 + .brand-more {
  485 + font-size: 16px;
  486 +
  487 + &:hover {
  488 + text-decoration: underline;
  489 + }
  490 + }
  491 + }
  492 +
  493 + .categorys-list {
  494 + ul {
  495 + width: 1158px;
  496 + }
  497 +
  498 + li {
  499 + float: left;
  500 + margin: 0 8px 8px 0;
  501 + width: 185px;
  502 + height: 248px;
  503 +
  504 + &.cate-item0 {
  505 + width: 185px;
  506 + height: 504px;
  507 + }
  508 +
  509 + &.cate-item1 {
  510 + width: 377px;
  511 + height: 504px;
  512 + }
  513 +
  514 + img {
  515 + display: block;
  516 + width: 100%;
  517 + height: 100%;
  518 + }
  519 + }
  520 + }
  521 +
  522 +}
  523 +
  524 +/*
  525 + @import "index-pliffy";
  526 +@import "min-index";
  527 +@import "brand";
  528 +*/