fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit a6bfd70ce23739e2600c02d20e8e8a1ede7d96a6 1 parent 514361bc

完善列表，添加店铺首页

Inline Side-by-side
Showing 16 changed files with 610 additions and 173 deletions
@@ -11,39 +11,39 @@ @@ -11,39 +11,39 @@
11 const _ = require('lodash'); 11 const _ = require('lodash');
12 const camelCase = global.yoho.camelCase; 12 const camelCase = global.yoho.camelCase;
13 13
14 -// const cookie = global.yoho.cookie;  
15 -const BrandData = require('../models/brand-service'); 14 +const cookie = global.yoho.cookie;
16 const Search = require('../models/search'); 15 const Search = require('../models/search');
17 const DataHelper = require('../models/helpers'); 16 const DataHelper = require('../models/helpers');
18 -  
19 -function bannerFormat(banner) {  
20 - let url = banner.brandBanner;  
21 -  
22 - return {  
23 - bgImg: url.split('?')[0],  
24 - brandIntro: {  
25 - text: '品牌介绍'  
26 - },  
27 - height: 150,  
28 - info: banner.brandIntro,  
29 - name: banner.brandName  
30 - };  
31 -}  
32 -  
33 -function shopMenu(domain) {  
34 - let menus = [  
35 - {name: '店铺首页', href: `/product/shop/${domain}`},  
36 - {name: '全部商品', href: `/product/shop/${domain}/list`, icon: ''},  
37 - {name: '人气单品', href: `/product/shop/${domain}/list?order=xxx`},  
38 - {name: '新品上架', href: `/product/shop/${domain}/list?order=s_t_desc`}  
39 - ];  
40 -  
41 - return menus;  
42 -} 17 +const ShopData = require('../models/shop-service');
43 18
44 const shop = { 19 const shop = {
45 - index(req, res) {  
46 - res.send('shop index'); 20 + index(req, res, next) {
  21 + let domain = req.params.domain;
  22 + let uid = cookie.getUid(req);
  23 + let data = {
  24 + module: 'product',
  25 + page: 'shop',
  26 + title: domain
  27 + };
  28 +
  29 + ShopData.getShopHeadData(domain, uid).then(result => {
  30 +
  31 + if (result.shopId) {
  32 + let nav = [DataHelper.getChannelNav()];
  33 +
  34 + nav.push({
  35 + name: result.name
  36 + });
  37 + data.navPath = {
  38 + nav: nav
  39 + };
  40 + data.banner = result;
  41 + res.display('shop-index', data);
  42 + } else {
  43 + shop.list(req, res, next);
  44 + }
  45 + });
  46 +
47 }, 47 },
48 list(req, res, next) { 48 list(req, res, next) {
49 let data = { 49 let data = {
@@ -54,19 +54,17 @@ const shop = { @@ -54,19 +54,17 @@ const shop = {
54 let nav = [DataHelper.getChannelNav()]; 54 let nav = [DataHelper.getChannelNav()];
55 let domain = req.params.domain; 55 let domain = req.params.domain;
56 56
57 - // let uid = cookie.getUid(req); 57 + let uid = cookie.getUid(req);
58 let q = req.query; 58 let q = req.query;
59 59
60 q.page = q.page || 1; 60 q.page = q.page || 1;
61 - data.shopMenu = shopMenu(domain);  
62 61
63 - BrandData.getBrandByDomainAsync(domain).then(result => {  
64 - console.log(result);  
65 - data.brandBanner = bannerFormat(result);  
66 - q.brand = result.id;  
67 - q.shop_id = q.shopId || ''; 62 + ShopData.getShopHeadData(domain, uid).then(result => {
  63 + data.banner = result;
  64 + q.brand = result.brandId;
  65 + q.shop_id = result.shopId;
68 nav.push({ 66 nav.push({
69 - name: result.brandName 67 + name: result.name
70 }); 68 });
71 }).then(() => { 69 }).then(() => {
72 return Search.queryProductOfBrand(q).then(result => { 70 return Search.queryProductOfBrand(q).then(result => {
@@ -6,22 +6,25 @@ @@ -6,22 +6,25 @@
6 6
7 const api = global.yoho.API; 7 const api = global.yoho.API;
8 8
9 -const getBannerInfoAsync = bid => {  
10 - return api.get('', {  
11 - method: 'web.brand.banner',  
12 - brand_id: bid  
13 - }); 9 +const BrandApi = {
  10 + getBrandInfo(bid, uid) {
  11 + let params = {
  12 + method: 'app.brand.getBrandIntro',
  13 + brand_id: bid
  14 + };
14 15
15 -}; 16 + if (uid) {
  17 + params.uid = uid;
  18 + }
  19 + return api.get('', params);
  20 + },
16 21
17 -const getBrandLogoByDomainAsync = domain => {  
18 - return api.get('', {  
19 - domain: domain,  
20 - method: 'web.brand.byDomain'  
21 - }); 22 + getDomainInfo(domain) {
  23 + return api.get('', {
  24 + domain: domain,
  25 + method: 'web.brand.byDomain'
  26 + });
  27 + }
22 }; 28 };
23 29
24 -module.exports = {  
25 - getBannerInfoAsync,  
26 - getBrandLogoByDomainAsync  
27 -}; 30 +module.exports = BrandApi;
@@ -8,21 +8,20 @@ const co = Promise.coroutine; @@ -8,21 +8,20 @@ const co = Promise.coroutine;
8 const api = require('./brand-api'); 8 const api = require('./brand-api');
9 const camelCase = global.yoho.camelCase; 9 const camelCase = global.yoho.camelCase;
10 10
11 -const getBrandByDomainAsync = domain => { 11 +const getDomainInfo = domain => {
12 return co(function*() { 12 return co(function*() {
13 - let brandInfo = yield api.getBrandLogoByDomainAsync(domain); 13 + let brandInfo = yield api.getDomainInfo(domain);
14 14
15 if (!brandInfo.data || brandInfo.code !== 200) { 15 if (!brandInfo.data || brandInfo.code !== 200) {
16 return {}; 16 return {};
17 } 17 }
18 -  
19 return camelCase(brandInfo.data); 18 return camelCase(brandInfo.data);
20 })(); 19 })();
21 }; 20 };
22 21
23 -const getBannerInfoAsync = bid => { 22 +const getBrandInfo = bid => {
24 return co(function*() { 23 return co(function*() {
25 - let brandInfo = yield api.getBannerInfoAsync(bid); 24 + let brandInfo = yield api.getBrandInfo(bid);
26 25
27 if (!brandInfo.data || brandInfo.code !== 200) { 26 if (!brandInfo.data || brandInfo.code !== 200) {
28 return {}; 27 return {};
@@ -33,6 +32,6 @@ const getBannerInfoAsync = bid => { @@ -33,6 +32,6 @@ const getBannerInfoAsync = bid => {
33 }; 32 };
34 33
35 module.exports = { 34 module.exports = {
36 - getBrandByDomainAsync,  
37 - getBannerInfoAsync: getBannerInfoAsync 35 + getDomainInfo,
  36 + getBrandInfo
38 }; 37 };
  1 +/**
  2 + * 店铺相关api调用
  3 + *
  4 + * @author: jiangfeng<jeff.jiang@yoho.cn>
  5 + * @date: 2016/07/14
  6 + **/
  7 +
  8 +'use strict';
  9 +
  10 +const Api = global.yoho.API;
  11 +
  12 +const ShopApi = {
  13 + getShopIntro(shopId, uid) {
  14 + let param = {
  15 + method: 'app.shops.getIntro',
  16 + shop_id: shopId
  17 + };
  18 +
  19 + if (uid) {
  20 + param.uid = uid;
  21 + }
  22 +
  23 + return Api.get('', param);
  24 + },
  25 +
  26 + getShopDecorator(shopId) {
  27 + let param = {
  28 + method: 'app.shopsdecorator.getList',
  29 + shop_id: shopId
  30 + };
  31 +
  32 + return Api.get('', param);
  33 + },
  34 +
  35 + getShopSorts(shopId, channel, gender) {
  36 + let param = {
  37 + method: 'app.shop.getSortInfo',
  38 + shop_id: shopId
  39 + };
  40 +
  41 + if (channel) {
  42 + param.yh_channel = channel;
  43 + }
  44 +
  45 + if (gender) {
  46 + param.gender = gender;
  47 + }
  48 +
  49 + return Api.get('', param);
  50 + }
  51 +};
  52 +
  53 +module.exports = ShopApi;
  1 +/**
  2 + * 店铺相关数据处理
  3 + *
  4 + * @author: jiangfeng<jeff.jiang@yoho.cn>
  5 + * @date: 2016/07/14
  6 + **/
  7 +
  8 +'use strict';
  9 +
  10 +const Promise = require('bluebird');
  11 +const co = Promise.coroutine;
  12 +const camelCase = global.yoho.camelCase;
  13 +const BrandService = require('./brand-service');
  14 +const ShopApi = require('./shop-api');
  15 +const _ = require('lodash');
  16 +
  17 +/**
  18 + * 处理店铺默认菜单
  19 + * @param domain
  20 + * @returns {*[]}
  21 + */
  22 +function shopMenu(domain) {
  23 + let menus = [
  24 + {name: '店铺首页', href: `/product/shop/${domain}`},
  25 + {name: '全部商品', href: `/product/shop/${domain}/list`, icon: '&#xe60a;'},
  26 + {name: '人气单品', href: `/product/shop/${domain}/list?order=xxx`},
  27 + {name: '新品上架', href: `/product/shop/${domain}/list?order=s_t_desc`}
  28 + ];
  29 +
  30 + return menus;
  31 +}
  32 +
  33 +/**
  34 + * 处理店铺首页资源位数据
  35 + * @param data
  36 + * @returns {{}}
  37 + */
  38 +function resourceDataHandle(data) {
  39 + let resource = {};
  40 +
  41 + if (data && _.isArray(data)) {
  42 + data.forEach(d => {
  43 + resource[d.resourceName] = JSON.parse(d.resourceData);
  44 + });
  45 + }
  46 +
  47 + return resource;
  48 +}
  49 +
  50 +const ShopService = {
  51 + getShopIntro(shopId, uid) {
  52 + return co(function*() {
  53 + let shopIntro = yield ShopApi.getShopIntro(shopId, uid);
  54 +
  55 + if (shopIntro && shopIntro.code === 200) {
  56 + return camelCase(shopIntro.data);
  57 + } else {
  58 + return {};
  59 + }
  60 + })();
  61 + },
  62 + getShopDecorator(shopId) {
  63 + return co(function*() {
  64 + let data = yield ShopApi.getShopDecorator(shopId);
  65 +
  66 + if (data && data.code === 200) {
  67 + return camelCase(data.data);
  68 + } else {
  69 + return {};
  70 + }
  71 + })();
  72 + },
  73 +
  74 + getShopSecondSorts(shopId) {
  75 + return co(function*() {
  76 + let data = yield ShopApi.getShopSorts(shopId);
  77 +
  78 + if (data && data.code === 200) {
  79 + let sorts = camelCase(data.data);
  80 +
  81 + return sorts.sort((a, b) => {
  82 + return a.sub.length >= b.sub.length;
  83 + });
  84 + } else {
  85 + return [];
  86 + }
  87 + })();
  88 + },
  89 +
  90 + getShopHeadData(domain, uid) {
  91 + return co(function*() {
  92 + let domainInfo = yield BrandService.getDomainInfo(domain);
  93 + let info = {
  94 + brandId: domainInfo.id,
  95 + shopId: ''
  96 + };
  97 +
  98 + if (domainInfo.shopId) {
  99 + let shopId = domainInfo.shopId;
  100 + let shopIntro = yield ShopService.getShopIntro(shopId, uid);
  101 +
  102 + info.shopId = shopId;
  103 + info.name = shopIntro.shopName;
  104 + info.info = shopIntro.shopIntro;
  105 + info.btnName = '店铺介绍';
  106 + info.isFavorite = shopIntro.isFavorite === 'Y';
  107 +
  108 + let shopData = yield Promise.all([ShopService.getShopDecorator(shopId),
  109 + ShopService.getShopSecondSorts(shopId)]);
  110 + let shopList = shopData[0];
  111 + let sorts = shopData[1];
  112 + let resources = resourceDataHandle(shopList.list);
  113 +
  114 + info.sorts = sorts;
  115 +
  116 + if (resources.shopTopBanner_base && resources.shopTopBanner_base.length > 0) { // eslint-disable-line
  117 + info.banner = resources.shopTopBanner_base[0].shopSrc; // eslint-disable-line
  118 + }
  119 + info.resources = resources;
  120 + info.menus = shopMenu(domain);
  121 + } else {
  122 + let brandId = domainInfo.id;
  123 + let brandInfo = yield BrandService.getBrandInfo(brandId, uid);
  124 +
  125 + info.name = brandInfo.brandName;
  126 + info.info = brandInfo.brandIntro;
  127 + info.btnName = '品牌介绍';
  128 + info.isFavorite = brandInfo.isFavorite === 'Y';
  129 + info.banner = domainInfo.brandBanner;
  130 + }
  131 + return info;
  132 + })();
  133 + }
  134 +};
  135 +
  136 +module.exports = ShopService;
  1 +<div class="blk-page yoho-shop-index">
  2 + <div class="center-content">
  3 + {{# navPath}}
  4 + {{> path-nav}}
  5 + {{/ navPath}}
  6 + </div>
  7 + <div class="center-content clearfix">
  8 + {{> brand-banner-list }}
  9 + {{> list/shop-menu }}
  10 + {{> list/banner-info }}
  11 + </div>
  12 +
  13 + {{# banner.resources}}
  14 +
  15 + {{#if newProducts}}
  16 + <div class="center-content clearfix slide-warp">
  17 + {{#each largeSlideImg}}
  18 + {{#each data}}
  19 + <div class="slide-left">
  20 + <a href="{{url}}">
  21 + <img src="{{src}}" alt="">
  22 + </a>
  23 + </div>
  24 + {{/each}}
  25 + {{/each}}
  26 + <div class="slide-right">
  27 + {{#each oneRowTwoColImages}}
  28 + {{#each data}}
  29 + <a href="{{url}}">
  30 + <img src="{{src}}" alt="">
  31 + </a>
  32 + {{/each}}
  33 + {{/each}}
  34 + </div>
  35 + </div>
  36 + {{/if}}
  37 +
  38 + {{#if newProducts}}
  39 + <div class="center-content clearfix new-arrival-warp">
  40 + <div class="floor-header clearfix">
  41 + <h2 class="floor-title en-size">NEW ARRIVALS</h2>
  42 + <p class="floor-title zh-size">最新上架</p>
  43 + <a class="floor-more" href="#">MORE</a>
  44 + </div>
  45 +
  46 + <div class="goods-wrap">
  47 + {{#each newProducts}}
  48 + <div class="goods-info" data-skn="{{productSkn}}">
  49 + <a href="" target="_blank">
  50 + <img class="lazy thumb" data-original="{{src}}" style="display: block;">
  51 + </a>
  52 + <div class="desc">
  53 + <a class="name" href="" target="_blank">{{productName}}</a>
  54 + <p class="price">￥{{round salesPrice 2}}</p>
  55 + </div>
  56 + </div>
  57 + {{/each}}
  58 + </div>
  59 + </div>
  60 + {{/if}}
  61 +
  62 + {{#if hotProducts}}
  63 + <div class="center-content clearfix hot-product-warp">
  64 + <div class="floor-header clearfix">
  65 + <h2 class="floor-title en-size">HOT</h2>
  66 + <p class="floor-title zh-size">人气单品</p>
  67 + <a class="floor-more" href="#">MORE</a>
  68 + </div>
  69 +
  70 + <div class="goods-wrap">
  71 + {{#each hotProducts}}
  72 + <div class="goods-info" data-skn="{{productSkn}}">
  73 + <a href="" target="_blank">
  74 + <img class="lazy thumb" data-original="{{src}}" style="display: block;">
  75 + </a>
  76 + <div class="desc">
  77 + <a class="name" href="" target="_blank">{{productName}}</a>
  78 + <p class="price">￥{{round salesPrice 2}}</p>
  79 + </div>
  80 + </div>
  81 + {{/each}}
  82 + </div>
  83 + </div>
  84 + {{/if}}
  85 +
  86 + {{/ banner.resources}}
  87 +
  88 + <div class="center-content clearfix all-product-warp">
  89 + <div class="floor-header clearfix">
  90 + <h2 class="floor-title en-size">ALL</h2>
  91 + <p class="floor-title zh-size">全部商品</p>
  92 + </div>
  93 + {{> list/shop-sort}}
  94 + {{> list/order-area}}
  95 + <div class="goods-wrap">
  96 +
  97 + </div>
  98 + </div>
  99 +</div>
1 -{{# brandBanner}} 1 +{{# banner}}
2 <div class="brand-banner"> 2 <div class="brand-banner">
3 - <div class="brand-img" style="height:150px; background: url('{{image bgImg 1150 150}}')"></div> 3 + <div class="brand-img" style="height:150px; background: url('{{image banner 1150 150}}')"></div>
4 <p class="opts"> 4 <p class="opts">
5 - {{# brandIntro}}  
6 - <a id="brand-info">  
7 - <i class="iconfont">&#xe631;</i>  
8 - {{text}}  
9 - </a>  
10 - {{/ brandIntro}} 5 + <a id="brand-info">
  6 + <i class="iconfont">&#xe631;</i>
  7 + {{btnName}}
  8 + </a>
11 9
12 - <span id="brand-fav" class="brand-fav{{#if coled}} coled{{/if}}"> 10 + <span id="brand-fav" class="brand-fav{{#if isFavorite}} coled{{/if}}">
13 {{> icon/collection}} 11 {{> icon/collection}}
14 </span> 12 </span>
15 </p> 13 </p>
16 </div> 14 </div>
17 -{{/brandBanner}} 15 +{{/banner}}
@@ -11,9 +11,9 @@ @@ -11,9 +11,9 @@
11 {{productName}} 11 {{productName}}
12 </div> 12 </div>
13 <div class="goods-price"> 13 <div class="goods-price">
14 - <span>¥{{salesPrice}}</span> 14 + <span>¥{{round salesPrice}}</span>
15 {{#if marketPrice}} 15 {{#if marketPrice}}
16 - <b>¥{{marketPrice}}</b> 16 + <b>¥{{round marketPrice}}</b>
17 {{/if}} 17 {{/if}}
18 </div> 18 </div>
19 <div class="goods-list hide"> 19 <div class="goods-list hide">
1 -<ul class="shop-menu">  
2 - {{#each shopMenu}}  
3 - <li>  
4 - <a href="{{href}}">  
5 - {{name}}  
6 - {{#icon}}  
7 - <i class="iconfont">&#xe60a;</i>  
8 - {{/icon}}  
9 - </a>  
10 - </li>  
11 - {{/each}}  
12 -</ul> 1 +{{# banner}}
  2 + {{#if menus}}
  3 + <ul class="shop-menu">
  4 + {{#each menus}}
  5 + <li>
  6 + <a href="{{href}}">
  7 + {{name}}
  8 + {{#icon}}
  9 + <i class="iconfont">&#xe60a;</i>
  10 + {{/icon}}
  11 + </a>
  12 + </li>
  13 + {{/each}}
  14 + </ul>
  15 + {{/if}}
  16 +{{/ banner}}
  1 +<div class="shop-sort">
  2 + <div class="all">所有商品</div>
  3 + <div class="sort-list">
  4 + <div><a href="#">女装</a></div>
  5 + <div><a href="#">男装</a></div>
  6 + {{# each banner.sorts}}
  7 + <div><a href="#">{{categoryName}}</a></div>
  8 + {{/ each}}
  9 + </div>
  10 + <div class="more">MORE</div>
  11 +</div>
@@ -59,7 +59,7 @@ @@ -59,7 +59,7 @@
59 "uuid": "^2.0.2", 59 "uuid": "^2.0.2",
60 "winston": "^2.2.0", 60 "winston": "^2.2.0",
61 "winston-daily-rotate-file": "^1.1.4", 61 "winston-daily-rotate-file": "^1.1.4",
62 - "yoho-node-lib": "0.0.17" 62 + "yoho-node-lib": "0.0.20"
63 }, 63 },
64 "devDependencies": { 64 "devDependencies": {
65 "autoprefixer": "^6.3.6", 65 "autoprefixer": "^6.3.6",
  1 +var lazyload = require('yoho-jquery-lazyload');
  2 +
  3 +lazyload();
1 @import 'list'; 1 @import 'list';
2 @import 'item'; 2 @import 'item';
3 -@import 'shop-list'; 3 +@import '_shop.css';
4 4
5 /* 组件 */ 5 /* 组件 */
6 @import 'brand-banner'; 6 @import 'brand-banner';
1 .yoho-product-list { 1 .yoho-product-list {
2 - 2 + @import "order-area";
3 font-size: 14px; 3 font-size: 14px;
4 4
5 .btn { 5 .btn {
@@ -239,92 +239,6 @@ @@ -239,92 +239,6 @@
239 } 239 }
240 } 240 }
241 241
242 - .order-area {  
243 - border-top: 1px solid #eee;  
244 - border-bottom: 1px solid #eee;  
245 - color: #878787;  
246 - font-weight: 700;  
247 -  
248 - .order {  
249 - display: inline-block;  
250 - margin: 14px 15px;  
251 - height: 24px;  
252 - line-height: 24px;  
253 - cursor: pointer;  
254 - }  
255 -  
256 - .dest {  
257 - display: inline-block;  
258 - position: relative;  
259 - width: 15px;  
260 - height: 24px;  
261 - line-height: 24px;  
262 - margin: 14px 15px;  
263 - margin-left: -10px;  
264 - margin-bottom: -10px;  
265 - cursor: pointer;  
266 -  
267 - .iconfont {  
268 - display: block;  
269 - font-size: 12px;  
270 - height: 12px;  
271 - line-height: 12px;  
272 - position: absolute;  
273 - }  
274 -  
275 - .iconfont.selected {  
276 - color: #1b1b1b;  
277 - }  
278 -  
279 - .iconfont.up {  
280 - top: -2px;  
281 - }  
282 - .iconfont.down {  
283 - top: 8px;  
284 - }  
285 - }  
286 -  
287 - .order.selected {  
288 - color: #1b1b1b;  
289 - }  
290 -  
291 - .right {  
292 - width: auto;  
293 - height: 24px;  
294 - line-height: 24px;  
295 - margin-top: 12px;  
296 -  
297 - label {  
298 - color: #1b1b1b;  
299 - font-weight: 700;  
300 - display: inline-block;  
301 - }  
302 -  
303 - label.page-info {  
304 - margin: 0 25px;  
305 - }  
306 -  
307 - .page {  
308 - color: #1b1b1b;  
309 - font-weight: 700;  
310 - border: 2px solid #1b1b1b;  
311 - width: 24px;  
312 - height: 24px;  
313 - line-height: 24px;  
314 - display: inline-block;  
315 - font-size: 14px;  
316 - text-align: center;  
317 - margin-right: 8px;  
318 - cursor: pointer;  
319 - }  
320 -  
321 - .page.disable {  
322 - color: #878787;  
323 - border: 2px solid #878787;  
324 - }  
325 - }  
326 - }  
327 -  
328 .goods-area { 242 .goods-area {
329 243
330 margin: 0 -12px; 244 margin: 0 -12px;
  1 +.order-area {
  2 + border-top: 1px solid #eee;
  3 + border-bottom: 1px solid #eee;
  4 + color: #878787;
  5 + font-weight: 700;
  6 +
  7 + .order {
  8 + display: inline-block;
  9 + margin: 14px 15px;
  10 + height: 24px;
  11 + line-height: 24px;
  12 + cursor: pointer;
  13 + }
  14 +
  15 + .dest {
  16 + display: inline-block;
  17 + position: relative;
  18 + width: 15px;
  19 + height: 24px;
  20 + line-height: 24px;
  21 + margin: 14px 15px;
  22 + margin-left: -10px;
  23 + margin-bottom: -10px;
  24 + cursor: pointer;
  25 +
  26 + .iconfont {
  27 + display: block;
  28 + font-size: 12px;
  29 + height: 12px;
  30 + line-height: 12px;
  31 + position: absolute;
  32 + }
  33 +
  34 + .iconfont.selected {
  35 + color: #1b1b1b;
  36 + }
  37 +
  38 + .iconfont.up {
  39 + top: -2px;
  40 + }
  41 + .iconfont.down {
  42 + top: 8px;
  43 + }
  44 + }
  45 +
  46 + .order.selected {
  47 + color: #1b1b1b;
  48 + }
  49 +
  50 + .right {
  51 + width: auto;
  52 + height: 24px;
  53 + line-height: 24px;
  54 + margin-top: 12px;
  55 +
  56 + label {
  57 + color: #1b1b1b;
  58 + font-weight: 700;
  59 + display: inline-block;
  60 + }
  61 +
  62 + label.page-info {
  63 + margin: 0 25px;
  64 + }
  65 +
  66 + .page {
  67 + color: #1b1b1b;
  68 + font-weight: 700;
  69 + border: 2px solid #1b1b1b;
  70 + width: 24px;
  71 + height: 24px;
  72 + line-height: 24px;
  73 + display: inline-block;
  74 + font-size: 14px;
  75 + text-align: center;
  76 + margin-right: 8px;
  77 + cursor: pointer;
  78 + }
  79 +
  80 + .page.disable {
  81 + color: #878787;
  82 + border: 2px solid #878787;
  83 + }
  84 + }
  85 +}
1 -.yoho-product-list { 1 +.yoho-product-list,
  2 +.yoho-shop-index {
2 3
3 .brand-banner { 4 .brand-banner {
4 width: 100%; 5 width: 100%;
@@ -52,6 +53,139 @@ @@ -52,6 +53,139 @@
52 53
53 } 54 }
54 55
  56 +.yoho-shop-index {
  57 +
  58 + font-size: 14px;
  59 +
  60 + @import "order-area";
  61 +
  62 + .slide-warp {
  63 + margin-bottom: 80px;
  64 +
  65 + .slide-left {
  66 + float: left;
  67 + width: 375px;
  68 + height: 400px;
  69 + margin-right: 20px;
  70 + }
  71 +
  72 + .slide-right {
  73 + float: right;
  74 + width: 360px;
  75 + height: 400px;
  76 +
  77 + a {
  78 + display: block;
  79 + img {
  80 + width: 100%;
  81 + height: 190px;
  82 + }
  83 + }
  84 +
  85 + a:first-child {
  86 + margin-bottom: 20px;
  87 + }
  88 + }
  89 + }
  90 +
  91 + .new-arrival-warp,
  92 + .hot-product-warp {
  93 + margin-bottom: 75px;
  94 + }
  95 +
  96 + .new-arrival-warp,
  97 + .all-product-warp {
  98 + .goods-wrap {
  99 + margin: 30px -10px 0;
  100 + .goods-info {
  101 + display: inline-block;
  102 + width: 270px;
  103 + margin: 0 9px;
  104 + border-width: 1px;
  105 + }
  106 + }
  107 + }
  108 +
  109 + .hot-product-warp {
  110 + .goods-wrap {
  111 + margin: 30px -10px 0;
  112 +
  113 + .goods-info {
  114 + position: relative;
  115 + display: inline-block;
  116 + width: 369px;
  117 + height: 495px;
  118 + margin: 0 9px;
  119 + border-width: 1px;
  120 +
  121 + .desc {
  122 + position: absolute;
  123 + bottom: 0;
  124 + width: 100%;
  125 + background-color: #000;
  126 + opacity: 0.6;
  127 + padding: 20px 0;
  128 + color: #fff;
  129 + }
  130 + }
  131 + }
  132 + }
  133 +
  134 + .floor-header {
  135 + position: relative;
  136 + .floor-more {
  137 + position: absolute;
  138 + right: 0;
  139 + bottom: 0;
  140 + font-size: 14px;
  141 + font-weight: 700;
  142 + }
  143 + }
  144 +
  145 + .shop-sort {
  146 + margin: 30px 0;
  147 + height: 30px;
  148 + vertical-align: middle;
  149 + font-size: 14px;
  150 +
  151 + .all {
  152 + color: #f31a2a;
  153 + height: 30px;
  154 + line-height: 30px;
  155 + float: left;
  156 + border-right: 1px solid #bbb;
  157 + padding-right: 15px;
  158 + font-weight: 700;
  159 + }
  160 +
  161 + .more {
  162 + height: 30px;
  163 + line-height: 30px;
  164 + float: right;
  165 + font-weight: 700;
  166 + }
  167 +
  168 + .sort-list {
  169 + float: left;
  170 + height: 30px;
  171 + line-height: 30px;
  172 + div {
  173 + float: left;
  174 + margin: 0 5px;
  175 + padding: 0 10px;
  176 + height: 30px;
  177 + }
  178 +
  179 + div:hover {
  180 + background-color: #000;
  181 + a {
  182 + color: #fff !important;
  183 + }
  184 + }
  185 + }
  186 + }
  187 +}
  188 +
55 .yoho-dialog.brand-info-dialog { 189 .yoho-dialog.brand-info-dialog {
56 width: 900px; 190 width: 900px;
57 height: 600px; 191 height: 600px;