Showing
14 changed files
with
919 additions
and
5 deletions
@@ -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"></span> | ||
19 | + </a> | ||
20 | + <a class="next" href="javascript:;"> | ||
21 | + <span class="iconfont"></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> |
public/img/index/logo-brand-line.png
0 → 100644
2.27 KB
public/js/common/logo-brand.js
0 → 100644
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:;"></a>' + | ||
52 | + '<a class="next iconfont" href="javascript:;"></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 | +}()); |
public/js/product/outlets.page.js
0 → 100644
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"; |
public/scss/plugin/_slider.css
0 → 100644
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 | +} |
public/scss/product/outlets/_index.css
0 → 100644
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 | +*/ |
-
Please register or login to post a comment