fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit d29784548a63ec02fa6c3d156d3d5544110cec4b 2 parents 69a2363f 61d03cee

Merge remote-tracking branch 'origin/develop' into develop

Inline Side-by-side
Showing 31 changed files with 576 additions and 1316 deletions
... ... @@ -3,4 +3,6 @@
|Name | Path| Note|
|首页| /|
|侧边栏| /sidebar| 只有 app 使用|
|品牌列表| /brand-list| |
\ No newline at end of file
|品牌列表| /brand-list| |
|品牌店铺| /brand?domain=colormad| |
|品牌店铺分享页面| /brand-share?domain=colormad| |
\ No newline at end of file
... ...
... ... @@ -53,6 +53,7 @@ module.exports = {
});
},
/* 获取品牌列表数据 */
getBrandList: (req, res) => {
brandModel.getBrandListData({
... ... @@ -62,6 +63,14 @@ module.exports = {
});
},
/* 品牌店铺分享页面 */
brandShare: (req, res) => {
res.render('brand/brand-share', {
module: 'channel',
page: 'brand-share'
});
},
/* 全部分类 */
cate: (req, res) => {
res.render('brand/cate', {
... ...
... ... @@ -28,7 +28,9 @@ const handleBrandList = origin => {
_.forEach(value, (subValue) => {
brands.push({
name: subValue.brand_name,
link: helpers.urlFormat('', null, subValue.brand_domain),
// link: helpers.urlFormat('/brand', {domain: subValue.brand_domain}),
link: '/brand?domain=' + subValue.brand_domain,
logo: subValue.brand_ico
});
});
... ... @@ -173,8 +175,9 @@ const getCateListData = params => {
// 有子分类的，首先添加一级分类
item.sub.push({
id: item.id,
name: '全部' + item.name,
id: item.sort,
sort: item.sort,
url: helpers.urlFormat('/', {
sort: item.sort,
sort_name: item.name,
... ...
... ... @@ -20,6 +20,7 @@ router.get('/get-brand-intro', brand.getBrandIntro); // 店铺介绍
router.get('/get-brand-shop-goods', brand.getBrandShopGoods); // 店铺介绍
router.get('/brand-list', brand.brandList); // 品牌列表页
router.get('/get-brand-list', brand.getBrandList); // 获取品牌列表数据
router.get('/brand-share', brand.brandShare); // 获取品牌列表数据
router.get('/cate', brand.cate); // 全部分类
router.get('/get-cate-list', brand.getCateList); // 全部分类数据列表
... ...
<div id="brand-share">
<brand-share-box></brand-share-box>
</div>
... ...
... ... @@ -4,18 +4,29 @@
* @date: 2016/05/09
*/
'use strict';
const _ = require('lodash');
const helpers = global.yoho.helpers;
/**
* 频道选择页
*/
const component = {
index: (req, res, next) => {
/**
* 示例页面
*/
index: (req, res) => {
res.render('index', {
module: 'example',
page: 'home'
});
},
/**
* 调用 APP 原生方法示例
* @param req
* @param res
*/
app: (req, res) => {
res.render('app', {
module: 'example',
page: 'app'
});
}
};
... ...
... ... @@ -13,5 +13,6 @@ const component = require(cRoot);
const router = expressRouter();
router.get('/', component.index); // 首页
router.get('/app', component.app); // 首页
module.exports = router;
... ...
<div id="app">
<app-box></app-box>
</div>
\ No newline at end of file
... ...
No preview for this file type
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Fri Jul 22 13:41:45 2016
Created by FontForge 20120731 at Fri Jul 22 18:41:59 2016
By admin
</metadata>
<defs>
... ... @@ -16,7 +16,7 @@ Created by FontForge 20120731 at Fri Jul 22 13:41:45 2016
ascent="896"
descent="-128"
x-height="792"
bbox="13 -212 1024 896"
bbox="-0.0999985 -221.6 1457 896"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E617"
... ... @@ -60,6 +60,20 @@ d="M682 74q-108 -89 -249 -89q-107 0 -197.5 53t-143.5 143.5t-53 197.5t53 197.5t14
t223 -92z" />
<glyph glyph-name="uniE609" unicode="&#xe609;"
d="M513 17q-15 0 -121 93t-168 161q-37 40 -64 95.5t-27 99.5q0 97 61.5 166.5t149.5 69.5q49 0 93 -34.5t76 -86.5q31 52 75 86.5t93 34.5q88 0 150 -69.5t62 -166.5q0 -47 -27 -104t-65 -92q-20 -18 -61.5 -57t-74 -68.5t-67 -61t-57 -49t-28.5 -17.5z" />
<glyph glyph-name="uniE60A" unicode="&#xe60a;" horiz-adv-x="1463"
d="M798 -160q0 -46 25 -58t61 16l537 420q36 28 36 68t-36 68l-537 424q-36 29 -61 16.5t-25 -57.5v-238q-138 0 -252.5 -24.5t-192 -63t-137.5 -94t-94.5 -109.5t-57.5 -117t-31.5 -109.5t-11 -94t-1.5 -63.5t2 -25q47 62 87 104t90 78t103.5 57.5t127 36.5t161.5 21t207 6
v-262z" />
<glyph glyph-name="uniE60B" unicode="&#xe60b;"
d="M150.5 805q23.5 0 40 -16.5t16.5 -40t-16.5 -40.5t-40 -17t-40.5 17t-17 40.5t17 40t40.5 16.5zM150 600q49 0 87.5 28.5t53.5 74.5h731v91h-731q-15 45 -53.5 73.5t-87.5 28.5q-61 0 -104.5 -43.5t-43.5 -104.5t43.5 -104.5t104.5 -43.5zM723 327q-23 0 -40 16.5
t-17 40.5t17 40.5t40.5 16.5t40 -16.5t16.5 -40.5t-16.5 -40.5t-40.5 -16.5zM864 430q-15 45 -53.5 73.5t-87 28.5t-87.5 -28.5t-53 -73.5h-583v-92h583q14 -45 53 -73.5t87.5 -28.5t87 28.5t53.5 73.5h160v92h-160zM150.5 -37q-23.5 0 -40.5 16.5t-17 40t17 40.5t40.5 17
t40 -17t16.5 -40.5t-16.5 -40t-40 -16.5zM150 168q-61 0 -104.5 -43.5t-43.5 -104.5t43.5 -104.5t104.5 -43.5q49 0 87.5 28.5t53.5 73.5h731v91h-731q-15 46 -53.5 74.5t-87.5 28.5z" />
<glyph glyph-name="uniE60C" unicode="&#xe60c;" horiz-adv-x="1122"
d="M793 798q92 0 150.5 -65t58.5 -161q0 -82 -54 -145l-398 -413l-399 413q-53 63 -53 145q0 96 58 161t150 65q43 0 90 -22t79 -52t53.5 -58.5t21.5 -42.5q0 14 21 42.5t53.5 58.5t79 52t89.5 22zM793 896q-63 0 -127 -30t-116 -78q-53 48 -117 78t-127 30
q-131 0 -218.5 -92.5t-87.5 -231.5q0 -118 76 -208l3 -3l2 -2l398 -413l71 -73l70 73l398 413l3 2l2 3q76 90 76 208q0 139 -87.5 231.5t-218.5 92.5z" />
<glyph glyph-name="uniE60D" unicode="&#xe60d;" horiz-adv-x="1122"
d="M793 896q-63 0 -127 -30t-116 -78q-53 48 -117 78t-127 30q-131 0 -218.5 -92.5t-87.5 -231.5q0 -118 76 -208l3 -3l2 -2l398 -413l71 -73l70 73l398 413l3 2l2 3q76 90 76 208q0 139 -87.5 231.5t-218.5 92.5z" />
<glyph glyph-name="uniE60E" unicode="&#xe60e;" horiz-adv-x="1321"
d="M1297 366l-597 530v-328q-448 -11 -616 -283q-87 -142 -84 -319q1 -32 2 -32q65 82 120.5 129.5t135.5 82t183 47.5t259 15v-328z" />
<glyph glyph-name="uniE617" unicode="&#xe617;"
d="M24 94l22 -22q9 -10 22 -10t23 10l424 430l420 -426q9 -9 21.5 -9t21.5 9l22 22q9 9 9 22t-9 23l-458 464q-5 5 -12 7q-9 7 -20.5 6t-20.5 -9l-465 -472q-9 -9 -9 -22t9 -23z" />
</font>
... ...
No preview for this file type
No preview for this file type

2.66 KB | W: | H:

1.24 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
/**
* Created by PhpStorm.
* User: Targaryen
* Date: 2016/7/22
* Time: 14:30
*/
const Vue = require('yoho-vue');
const lazyload = require('yoho-vue-lazyload');
const brandShareBox = require('channel/brand-share-box.vue');
require('common/vue-filter');
Vue.use(lazyload);
new Vue({
el: '#brand-share',
components: {
brandShareBox
}
});
... ...
... ... @@ -6,14 +6,16 @@
*/
const Vue = require('yoho-vue');
const lazyload = require('yoho-vue-lazyload');
const infinitScroll = require('yoho-vue-infinite-scroll');
const brandBox = require('channel/brand-box.vue');
Vue.use(lazyload);
Vue.use(infinitScroll);
new Vue({
el: '#brand',
components: {
brandBox
}
});
Vue.use(lazyload);
... ...
... ... @@ -10,6 +10,8 @@
const $ = require('yoho-jquery');
const Overlay = require('./overlay');
const template = require('components/loading.hbs');
const _ = require('lodash');
const AJAX_LOADING_ENABLED = false; // 全局控制
if (!Overlay) {
throw new Error('Required dependency "Overlay" not found!');
... ... @@ -19,31 +21,56 @@ class Loading {
constructor(opts) {
this.defaults = {};
this.settings = Object.assign({}, this.defaults, opts);
this.elem = $(template());
}
/**
* 显示
*/
show() {
if (!this.elem) {
this.elem = $(template());
this.elem.appendTo('body');
}
if (!this.isVisible) {
this.isVisible = true;
this.overlay = new Overlay({
animation: 'fade',
clickToClose: false
});
this.overlay.show();
if (this.elem.parent().length === 0) {
this.elem.appendTo('body');
}
this.overlay = new Overlay({
animation: 'fade',
clickToClose: false
});
this.overlay.show();
}
}
/**
* 关闭
*/
hide() {
this.overlay.hide();
this.elem.remove();
if (this.isVisible) {
this.overlay.hide();
this.elem.detach();
this.isVisible = false;
}
}
}
module.exports = new Loading();
const instance = new Loading();
if (AJAX_LOADING_ENABLED) {
$(document).ajaxStart(()=> {
_.debounce(()=> {
instance.show();
}, 100)();
});
$(document).ajaxStop(()=> {
_.debounce(()=> {
instance.hide();
}, 500)();
});
}
module.exports = instance;
... ...
... ... @@ -70,20 +70,22 @@ class Overlay {
* 显示覆盖层
*/
show() {
if (this.elem.parent().length === 0) {
if (this.elem.parent().length === 0 && !this.isVisible) {
this.elem.appendTo('body');
}
this._clearStylesClasses();
this.elem.css({
visibility: 'visible'
}).show().addClass(this.settings.animationClasses.in);
this.isVisible = true;
if (this.settings.disableScrolling) {
$('body').css({
overflow: 'hidden'
});
this._clearStylesClasses();
this.elem.css({
visibility: 'visible'
}).show().addClass(this.settings.animationClasses.in);
if (this.settings.disableScrolling) {
$('body').css({
overflow: 'hidden'
});
}
this.isVisible = true;
}
}
... ... @@ -91,28 +93,31 @@ class Overlay {
* 关闭覆盖层
*/
hide() {
this._clearStylesClasses();
const listener = () => {
// 一次性监听，动画完成事件触发后删除监听器
this.elem[0].removeEventListener('webkitTransitionEnd', listener);
this.elem.css({
visibility: 'hidden'
});
if (this.isVisible) {
this._clearStylesClasses();
this.isVisible = false;
this.elem.detach();
};
this.elem[0].addEventListener('webkitTransitionEnd', listener);
this.elem.addClass(this.settings.animationClasses.out);
const listener = () => {
this.elem.css({
visibility: 'hidden'
});
this._clearStylesClasses();
this.isVisible = false;
this.elem.detach();
// 一次性监听，动画完成事件触发后删除监听器
this.elem[0].removeEventListener('webkitTransitionEnd', listener);
};
this.elem[0].addEventListener('webkitTransitionEnd', listener);
this.elem.addClass(this.settings.animationClasses.out);
if (this.settings.disableScrolling) {
$('body').css({
overflow: 'auto'
});
}
if (this.settings.disableScrolling) {
$('body').css({
overflow: 'auto'
});
this.settings.onClose();
}
this.settings.onClose();
}
}
... ...
... ... @@ -44,3 +44,12 @@ Vue.filter('clothingGenderIdentity', (value)=> {
return ret;
});
/**
* 品牌URL
*
* @param value brand domain
*/
Vue.filter('brandUrl', (value)=> {
return `/brand?domain=${value}`;
});
... ...
/**
* Created by PhpStorm.
* User: Targaryen
* Date: 2016/7/22
* Time: 20:20
*/
const Vue = require('yoho-vue');
const lazyload = require('yoho-vue-lazyload');
const appBox = require('example/app-box.vue');
new Vue({
el: '#app',
components: {
appBox
}
});
Vue.use(lazyload);
... ...
const Vue = require('yoho-vue');
const app = require('product/detail/index.vue');
const loading = require('common/loading');
const _ = require('lodash');
require('../common/overlay');
... ... @@ -9,3 +11,15 @@ new Vue({
app: app
}
});
$(document).ajaxStart(()=> {
_.debounce(()=> {
loading.show();
}, 100)();
});
$(document).ajaxStop(()=> {
_.debounce(()=> {
loading.hide();
}, 500)();
});
... ...
... ... @@ -29,6 +29,10 @@
content: "\e603";
}
.icon-yoho-share:before {
content: "\e60a";
}
.icon-close:before {
content: "\e605";
}
... ... @@ -64,3 +68,19 @@
.icon-love-solid:before {
content: "\e609";
}
.icon-filter:before {
content: "\e60b";
}
.icon-focus:before {
content: "\e60c";
}
.icon-focused:before {
content: "\e60d";
}
.icon-share:before {
content: "\e60e";
}
... ...
<template>
<brand-top-cmpnt v-bind:share-data="shareData"></brand-top-cmpnt>
<brand-shop-top-cmpnt v-bind:domain="'nike'"></brand-shop-top-cmpnt>
<!--<goods-list v-bind:data="productList"></goods-list>-->
<brand-top v-bind:share-data="shareData"></brand-top>
<brand-shop-top></brand-shop-top>
<goods-list v-bind:data="productList"></goods-list>
<drawer v-ref:drawer>
<filter :config.once="filterConfig"></filter>
</drawer>
</template>
<script>
const $ = require('yoho-jquery');
const bus = require('common/vue-bus');
const tip = require('common/tip');
const brandTopCmpnt = require('channel/brand-top.vue');
const brandShopTopCmpnt = require('channel/brand-shop-top.vue');
const brandTop = require('channel/brand-top.vue');
const brandShopTop = require('channel/brand-shop-top.vue');
const goodsList = require('product/list.vue');
const drawer = require('product/drawer.vue');
const filter = require('product/filter.vue');
require('common/vue-filter');
module.exports = {
data() {
... ... @@ -19,27 +27,125 @@
link: 'm.blk.com',
img: 'https://img11.static.yhbimg.com/brandLogo/2016/04/13/15/010eb8606c1072fd2e769c62567d3bbe93.png?imageView2/2/w/140/h/140'
},
productList: []
sortConfig: global.sortConfig,
filterConfig: global.filterConfig,
// query
url: '/product/list',
sort: 3,
filter: {},
page: 0, // page= 0 未搜索, 1 并且productList.length =0 没有数据, page = page_total 全部加载完
totalPage: 3,
// 产品列表
productList: [],
// state:
inSearching: false,
brand: require('product/filter/brand-group-mock')
};
},
watch: {
/* sort 和 filter 改变 都会触发 重新搜索 (想象成清空所有分页) */
sort: function() {
this.research();
},
filter: function() {
this.research();
}
},
methods: {
getProductList() {
let data = {};
$.ajax({
url: '/get-brand-shop-goods',
method: 'post',
url: '/product/list',
data: data
}).done(result => {
this.productList = result.productList;
this.$set('productList', this.productList.concat(result.data.productList));
}).fail(() => {
tip('网络错误');
});
},
search: function() {
const self = this;
if (this.inSearching) {
return;
}
if (this.page && this.page + 1 > this.totalPage) {
return;
}
this.inSearching = true;
this.page++;
$.post(this.url, {
sort: this.sort,
filter: this.filter,
page: this.page
}).done(res => {
self.$set('productList', self.productList.concat(res.data.productList));
}).fail(error => {
self.page--;
console.log(error);
}).always(() => {
self.inSearching = false;
});
},
openFilterSub: function() {
console.log('TODO: open filter sub');
},
/**
*
*/
research: function() {
this.page = 0;
this.$set('productList', []);
this.search();
}
},
components: {
brandTopCmpnt,
brandShopTopCmpnt,
goodsList
brandTop,
brandShopTop,
goodsList,
drawer,
filter
},
created() {
this.search();
bus.$on('list.paging', function() {
this.search();
});
bus.$on('sort.change', function({ val }) {
console.log(val);
this.sort = val;
});
/**
* 筛选组件 筛选值变更，触发 filter.change事件
* 1. 重新搜索
* 2. 关闭 drawer 组件
*/
bus.$on('filter.change', function({ val }) {
console.log(val);
this.filter = val;
this.$refs.drawer.on = false;
});
/**
* 筛选组件 打开二级晒寻，通过bridge 打开APP view
* 1. 打开view
* 2. 监听 router.back ，重新设置 筛选值
*/
bus.$on('filter.sub.show', function({val}) {
this.openFilterSub(val);
});
}
};
</script>
... ...
<template>
<div class="cate-page" id='cate-page'>
<div class="cate-nav clearfix" v-on:click='cateNavTopFun'>
<ul>
<li class="focus">
<span>Boy</span>
</li>
<li class="">
<span>Girl</span>
</li>
<li class="">
<span>Kid</span>
</li>
<li class="">
<span>Lifestyle</span>
</li>
</ul>
</div>
<div class="cate-container clearfix" v-on:click='cateNavLeftFun'>
<div class="content " style="height: 522px;">
<ul class="primary-level">
<li class="p-level-item">
上衣
</li>
<li class="p-level-item focus">
鞋靴
</li>
<li class="p-level-item">
包类
</li>
<li class="p-level-item">
内衣/家居服
</li>
<li class="p-level-item">
美妆/个护
</li>
<li class="p-level-item">
裤装
</li>
<li class="p-level-item">
服配
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=115&amp;sort_name=NINO&amp;gender=1%2C3"> NINO</a>
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=242&amp;sort_name=%E6%B5%8B%E8%AF%95%E5%89%8D%E5%8F%B0%E6%98%AF%E5%90%A6%E8%83%BD%E5%90%8C%E6%AD%A5&amp;gender=1%2C3"> 测试前台是否能同步</a>
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=585&amp;sort_name=%E5%90%AB3%E7%BA%A7%E4%B8%8D%E5%85%B3%E8%81%94&amp;gender=1%2C3"> 含3级不关联</a>
</li>
<li class="p-level-item">
含3级关联
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=321&amp;sort_name=12&amp;gender=1%2C3"> 12</a>
</li>
</ul>
<div class="sub-level-container">
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=116%2C114%2C640&amp;sort_name=%E4%B8%8A%E8%A1%A3&amp;gender=1%2C3">
全部上衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=114%2C293&amp;sort_name=T%E6%81%A4&amp;gender=1%2C3">
T恤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=123&amp;sort_name=%E6%A3%89%E8%A1%A3&amp;gender=1%2C3">
棉衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=119&amp;sort_name=%E5%8D%AB%E8%A1%A3&amp;gender=1%2C3">
卫衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=115&amp;sort_name=%E8%A1%AC%E8%A1%AB&amp;gender=1%2C3">
衬衫
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=125&amp;sort_name=%E5%A4%A7%E8%A1%A3%2F%E9%A3%8E%E8%A1%A3&amp;gender=1%2C3">
大衣/风衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=173&amp;sort_name=%E7%9A%AE%E8%A1%A3&amp;gender=1%2C3">
皮衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=227&amp;sort_name=%E9%98%B2%E9%A3%8E%E5%A4%96%E5%A5%97&amp;gender=1%2C3">
防风外套
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=118&amp;sort_name=%E9%A9%AC%E7%94%B2&amp;gender=1%2C3">
马甲
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=124&amp;sort_name=%E5%A4%B9%E5%85%8B&amp;gender=1%2C3">
夹克
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=258&amp;sort_name=%E6%AF%9B%E8%A1%A3%2F%E9%92%88%E7%BB%87&amp;gender=1%2C3">
毛衣/针织
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=122&amp;sort_name=%E8%A5%BF%E8%A3%85&amp;gender=1%2C3">
西装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=413&amp;sort_name=%E5%A5%97%E8%A3%85&amp;gender=1%2C3">
套装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=116&amp;sort_name=POLO&amp;gender=1%2C3">
POLO
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=117&amp;sort_name=%E8%83%8C%E5%BF%83&amp;gender=1%2C3">
背心
</a>
</li>
</ul>
<ul class="sub-level">
<li>
<a href="//list.dev.yohobuy.com/?sort=228%2C299%2C231%2C149%2C148%2C147&amp;sort_name=%E9%9E%8B%E9%9D%B4&amp;gender=1%2C3">
全部鞋靴
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=147&amp;sort_name=%E4%BC%91%E9%97%B2%2F%E8%BF%90%E5%8A%A8%E9%9E%8B&amp;gender=1%2C3">
休闲/运动鞋
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=148&amp;sort_name=%E9%9D%B4%E5%AD%90&amp;gender=1%2C3">
靴子
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=151&amp;sort_name=%E6%97%B6%E8%A3%85%E9%9E%8B&amp;gender=1%2C3">
时装鞋
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=149&amp;sort_name=%E5%87%89%E9%9E%8B%2F%E5%87%89%E6%8B%96&amp;gender=1%2C3">
凉鞋/凉拖
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=231&amp;sort_name=%E4%BF%9D%E5%85%BB%E6%8A%A4%E7%90%86&amp;gender=1%2C3">
保养护理
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=152%2C153%2C196%2C238%2C239%2C240%2C349%2C157%2C342%2C156%2C161%2C300%2C160%2C233%2C341%2C340%2C210%2C339%2C351%2C195%2C197&amp;sort_name=%E5%8C%85%E7%B1%BB&amp;gender=1%2C3">
全部包类
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=339&amp;sort_name=%E5%89%91%E6%A1%A5%E5%8C%85&amp;gender=1%2C3">
剑桥包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=153%2C196%2C195%2C197&amp;sort_name=%E6%89%8B%E6%8B%8E%E5%8C%85%2F%E5%8D%95%E8%82%A9%E5%8C%85&amp;gender=1%2C3">
手拎包/单肩包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=238%2C239%2C240%2C349&amp;sort_name=%E9%92%B1%E5%8C%85%2F%E5%8D%A1%E5%8C%85%2F%E6%89%8B%E5%8C%85%2F%E9%92%A5%E5%8C%99%E5%8C%85&amp;gender=1%2C3">
钱包/卡包/手包/钥匙包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=157&amp;sort_name=%E8%85%B0%E5%8C%85&amp;gender=1%2C3">
腰包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=342&amp;sort_name=%E9%82%AE%E5%B7%AE%E5%8C%85&amp;gender=1%2C3">
邮差包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=156&amp;sort_name=%E7%94%B5%E8%84%91%E5%8C%85&amp;gender=1%2C3">
电脑包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=161%2C300&amp;sort_name=%E5%82%A8%E7%89%A9%E5%8C%85&amp;gender=1%2C3">
储物包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=160&amp;sort_name=%E7%8E%AF%E4%BF%9D%E5%8C%85&amp;gender=1%2C3">
环保包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=233&amp;sort_name=%E5%8C%85%E9%85%8D&amp;gender=1%2C3">
包配
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=341&amp;sort_name=tote%E5%8C%85&amp;gender=1%2C3">
tote包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=340&amp;sort_name=%E6%97%85%E8%A1%8C%E5%8C%85&amp;gender=1%2C3">
旅行包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=210&amp;sort_name=%E6%97%85%E8%A1%8C%E7%AE%B1&amp;gender=1%2C3">
旅行箱
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=351&amp;sort_name=mini%E5%8C%85&amp;gender=1%2C3">
mini包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=239&amp;sort_name=%E6%BD%AE%E5%8C%85&amp;gender=1%2C3">
潮包
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=311%2C357%2C359&amp;sort_name=%E5%86%85%E8%A1%A3%2F%E5%AE%B6%E5%B1%85%E6%9C%8D&amp;gender=1%2C3">
全部内衣/家居服
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=311&amp;sort_name=%E5%86%85%E8%A3%A4&amp;gender=1%2C3">
内裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=357&amp;sort_name=%E5%AE%B6%E5%B1%85%E6%9C%8D&amp;gender=1%2C3">
家居服
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=359&amp;sort_name=%E5%AE%B6%E5%B1%85%E9%9E%8B&amp;gender=1%2C3">
家居鞋
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=263%2C260%2C264%2C261%2C352&amp;sort_name=%E7%BE%8E%E5%A6%86%2F%E4%B8%AA%E6%8A%A4&amp;gender=1%2C3">
全部美妆/个护
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=263&amp;sort_name=%E9%A6%99%E6%B0%B4&amp;gender=1%2C3">
香水
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=260&amp;sort_name=%E9%9D%A2%E9%83%A8%E6%8A%A4%E7%90%86&amp;gender=1%2C3">
面部护理
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=264&amp;sort_name=%E4%B8%AA%E4%BA%BA%E6%8A%A4%E7%90%86&amp;gender=1%2C3">
个人护理
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=261&amp;sort_name=%E5%BD%A9%E5%A6%86&amp;gender=1%2C3">
彩妆
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=352&amp;sort_name=%E7%BA%B9%E8%BA%AB%E8%B4%B4&amp;gender=1%2C3">
纹身贴
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=131%2C129%2C346%2C133%2C348%2C130&amp;sort_name=%E8%A3%A4%E8%A3%85&amp;gender=1%2C3">
全部裤装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=130&amp;sort_name=%E7%89%9B%E4%BB%94%E8%A3%A4&amp;gender=1%2C3">
牛仔裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=129&amp;sort_name=%E4%BC%91%E9%97%B2%E8%A3%A4&amp;gender=1%2C3">
休闲裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=131&amp;sort_name=%E7%9F%AD%E8%A3%A4&amp;gender=1%2C3">
短裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=346&amp;sort_name=%E8%BF%90%E5%8A%A8%E8%A3%A4&amp;gender=1%2C3">
运动裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=133&amp;sort_name=%E6%89%93%E5%BA%95%E8%A3%A4%2F%E7%B4%A7%E8%BA%AB%E8%A3%A4&amp;gender=1%2C3">
打底裤/紧身裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=348&amp;sort_name=%E8%A5%BF%E8%A3%A4&amp;gender=1%2C3">
西裤
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=186%2C235%2C163%2C224%2C322%2C323%2C324%2C325%2C326%2C327%2C328%2C329%2C330%2C331%2C72%2C74%2C75%2C76%2C142%2C77%2C78%2C79%2C80%2C199%2C213%2C217%2C218%2C234%2C303%2C305%2C306%2C307%2C334%2C162%2C316%2C320%2C164%2C317%2C295%2C321&amp;sort_name=%E6%9C%8D%E9%85%8D&amp;gender=1%2C3">
全部服配
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=186%2C235&amp;sort_name=%E5%A4%AA%E9%98%B3%E9%95%9C%2F%E7%9C%BC%E9%95%9C&amp;gender=1%2C3">
太阳镜/眼镜
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=163%2C224%2C322%2C323%2C324%2C325%2C326%2C327%2C328%2C329%2C330%2C331&amp;sort_name=%E5%B8%BD%E5%AD%90&amp;gender=1%2C3">
帽子
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=72%2C74%2C75%2C76&amp;sort_name=%E9%A6%96%E9%A5%B0&amp;gender=1%2C3">
首饰
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=142&amp;sort_name=%E8%A2%9C%E5%AD%90&amp;gender=1%2C3">
袜子
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=77%2C78%2C79%2C80%2C199%2C213%2C217%2C218%2C234%2C303%2C305%2C306%2C307%2C334&amp;sort_name=%E9%85%8D%E9%A5%B0&amp;gender=1%2C3">
配饰
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=162&amp;sort_name=%E6%89%8B%E8%A1%A8&amp;gender=1%2C3">
手表
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=316&amp;sort_name=%E5%9B%B4%E5%B7%BE&amp;gender=1%2C3">
围巾
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=320&amp;sort_name=%E6%89%8B%E5%B8%95&amp;gender=1%2C3">
手帕
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=321&amp;sort_name=%E4%B8%9D%E5%B7%BE&amp;gender=1%2C3">
丝巾
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=164&amp;sort_name=%E6%89%8B%E5%A5%97&amp;gender=1%2C3">
手套
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=317&amp;sort_name=%E6%8A%AB%E8%82%A9&amp;gender=1%2C3">
披肩
</a>
</li>
</ul>
<ul class="sub-level hide">
</ul>
<ul class="sub-level hide">
</ul>
<ul class="sub-level hide">
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=362&amp;sort_name=%E5%90%AB3%E7%BA%A7%E5%85%B3%E8%81%94&amp;gender=1%2C3">
全部含3级关联
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=618&amp;sort_name=3%E7%BA%A7%E5%85%B3%E8%81%94&amp;gender=1%2C3">
3级关联
</a>
</li>
</ul>
<ul class="sub-level hide">
</ul>
</div>
</div>
<div class="content hide" style="height: 522px;">
<ul class="primary-level">
<li class="p-level-item focus">
上衣
</li>
<li class="p-level-item">
裙装
</li>
<li class="p-level-item">
裤装
</li>
<li class="p-level-item">
鞋靴
</li>
<li class="p-level-item">
包类
</li>
<li class="p-level-item">
服配
</li>
<li class="p-level-item">
内衣/家居服
</li>
<li class="p-level-item">
美妆/个护
</li>
</ul>
<div class="sub-level-container">
<ul class="sub-level ">
<li>
<a href="//list.dev.yohobuy.com/?sort=227%2C173%2C125%2C258%2C121%2C123%2C119%2C124%2C118%2C122%2C115%2C117%2C114%2C293%2C116%2C413&amp;sort_name=%E4%B8%8A%E8%A1%A3&amp;gender=2%2C3">
全部上衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=114%2C293&amp;sort_name=T%E6%81%A4&amp;gender=2%2C3">
T恤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=116&amp;sort_name=POLO&amp;gender=2%2C3">
POLO
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=115&amp;sort_name=%E8%A1%AC%E8%A1%AB&amp;gender=2%2C3">
衬衫
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=119&amp;sort_name=%E5%8D%AB%E8%A1%A3&amp;gender=2%2C3">
卫衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=124&amp;sort_name=%E5%A4%B9%E5%85%8B&amp;gender=2%2C3">
夹克
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=121%2C123&amp;sort_name=%E6%A3%89%E6%9C%8D&amp;gender=2%2C3">
棉服
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=121&amp;sort_name=%E7%BE%BD%E7%BB%92%E6%9C%8D&amp;gender=2%2C3">
羽绒服
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=258&amp;sort_name=%E6%AF%9B%E8%A1%A3%2F%E9%92%88%E7%BB%87&amp;gender=2%2C3">
毛衣/针织
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=227&amp;sort_name=%E9%98%B2%E9%A3%8E%E5%A4%96%E5%A5%97&amp;gender=2%2C3">
防风外套
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=173&amp;sort_name=%E7%9A%AE%E8%A1%A3&amp;gender=2%2C3">
皮衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=122&amp;sort_name=%E8%A5%BF%E8%A3%85&amp;gender=2%2C3">
西装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=117&amp;sort_name=%E8%83%8C%E5%BF%83&amp;gender=2%2C3">
背心
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=118&amp;sort_name=%E9%A9%AC%E7%94%B2&amp;gender=2%2C3">
马甲
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=413&amp;sort_name=%E5%A5%97%E8%A3%85&amp;gender=2%2C3">
套装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=125&amp;sort_name=%E5%A4%A7%E8%A1%A3%2F%E9%A3%8E%E8%A1%A3&amp;gender=2%2C3">
大衣/风衣
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=134%2C135&amp;sort_name=%E8%A3%99%E8%A3%85&amp;gender=2%2C3">
全部裙装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=134&amp;sort_name=%E8%BF%9E%E8%A1%A3%E8%A3%99&amp;gender=2%2C3">
连衣裙
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=135&amp;sort_name=%E5%8D%8A%E8%BA%AB%E8%A3%99&amp;gender=2%2C3">
半身裙
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=134&amp;sort_name=LOLITA%28%E6%B5%8B%E8%AF%95%29&amp;gender=2%2C3">
LOLITA(测试)
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=362&amp;sort_name=LOLITA2%EF%BC%88%E6%B5%8B%E8%AF%95%EF%BC%89&amp;gender=2%2C3">
LOLITA2（测试）
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=359%2C364&amp;sort_name=%E6%B5%8B%E8%AF%95&amp;gender=2%2C3">
测试
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=348%2C346%2C131%2C133%2C129%2C130&amp;sort_name=%E8%A3%A4%E8%A3%85&amp;gender=2%2C3">
全部裤装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=129&amp;sort_name=%E4%BC%91%E9%97%B2%E8%A3%A4&amp;gender=2%2C3">
休闲裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=130&amp;sort_name=%E7%89%9B%E4%BB%94%E8%A3%A4&amp;gender=2%2C3">
牛仔裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=346&amp;sort_name=%E8%BF%90%E5%8A%A8%E8%A3%A4&amp;gender=2%2C3">
运动裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=133&amp;sort_name=%E6%89%93%E5%BA%95%E8%A3%A4%2F%E7%B4%A7%E8%BA%AB%E8%A3%A4&amp;gender=2%2C3">
打底裤/紧身裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=131&amp;sort_name=%E7%9F%AD%E8%A3%A4&amp;gender=2%2C3">
短裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=348&amp;sort_name=%E8%A5%BF%E8%A3%A4&amp;gender=2%2C3">
西裤
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=147%2C149%2C148%2C151%2C231&amp;sort_name=%E9%9E%8B%E9%9D%B4&amp;gender=2%2C3">
全部鞋靴
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=147&amp;sort_name=%E4%BC%91%E9%97%B2%2F%E8%BF%90%E5%8A%A8%E9%9E%8B&amp;gender=2%2C3">
休闲/运动鞋
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=148&amp;sort_name=%E9%9D%B4%E5%AD%90&amp;gender=2%2C3">
靴子
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=151&amp;sort_name=%E6%97%B6%E8%A3%85%E9%9E%8B&amp;gender=2%2C3">
时装鞋
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=149&amp;sort_name=%E5%87%89%E9%9E%8B%2F%E5%87%89%E6%8B%96&amp;gender=2%2C3">
凉鞋/凉拖
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=231&amp;sort_name=%E4%BF%9D%E5%85%BB%E6%8A%A4%E7%90%86&amp;gender=2%2C3">
保养护理
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=152%2C153%2C238%2C239%2C240%2C349%2C157%2C342%2C156%2C161%2C300%2C160%2C233%2C341%2C340%2C210%2C339%2C351%2C195%2C196%2C197&amp;sort_name=%E5%8C%85%E7%B1%BB&amp;gender=2%2C3">
全部包类
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=152&amp;sort_name=%E5%8F%8C%E8%82%A9%E5%8C%85&amp;gender=2%2C3">
双肩包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=153%2C195%2C196%2C197&amp;sort_name=%E6%89%8B%E6%8B%8E%E5%8C%85%2F%E5%8D%95%E8%82%A9%E5%8C%85&amp;gender=2%2C3">
手拎包/单肩包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=238%2C239%2C240%2C349&amp;sort_name=%E9%92%B1%E5%8C%85%2F%E5%8D%A1%E5%8C%85%2F%E6%89%8B%E5%8C%85%2F%E9%92%A5%E5%8C%99%E5%8C%85&amp;gender=2%2C3">
钱包/卡包/手包/钥匙包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=157&amp;sort_name=%E8%85%B0%E5%8C%85&amp;gender=2%2C3">
腰包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=342&amp;sort_name=%E9%82%AE%E5%B7%AE%E5%8C%85&amp;gender=2%2C3">
邮差包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=156&amp;sort_name=%E7%94%B5%E8%84%91%E5%8C%85&amp;gender=2%2C3">
电脑包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=161%2C300&amp;sort_name=%E5%82%A8%E7%89%A9%E5%8C%85&amp;gender=2%2C3">
储物包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=160&amp;sort_name=%E7%8E%AF%E4%BF%9D%E5%8C%85&amp;gender=2%2C3">
环保包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=233&amp;sort_name=%E5%8C%85%E9%85%8D&amp;gender=2%2C3">
包配
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=341&amp;sort_name=tote%E5%8C%85&amp;gender=2%2C3">
tote包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=340&amp;sort_name=%E6%97%85%E8%A1%8C%E5%8C%85&amp;gender=2%2C3">
旅行包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=210&amp;sort_name=%E6%97%85%E8%A1%8C%E7%AE%B1&amp;gender=2%2C3">
旅行箱
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=339&amp;sort_name=%E5%89%91%E6%A1%A5%E5%8C%85&amp;gender=2%2C3">
剑桥包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=351&amp;sort_name=mini+%E5%8C%85&amp;gender=2%2C3">
mini 包
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=186%2C235%2C163%2C224%2C322%2C323%2C324%2C325%2C326%2C327%2C328%2C329%2C330%2C331%2C72%2C74%2C75%2C76%2C142%2C77%2C78%2C79%2C80%2C199%2C213%2C217%2C218%2C234%2C303%2C305%2C306%2C307%2C334%2C162%2C316%2C320%2C164%2C317%2C295%2C321&amp;sort_name=%E6%9C%8D%E9%85%8D&amp;gender=2%2C3">
全部服配
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=163%2C224%2C322%2C323%2C324%2C325%2C326%2C327%2C328%2C329%2C330%2C331&amp;sort_name=%E5%B8%BD%E5%AD%90&amp;gender=2%2C3">
帽子
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=72%2C74%2C75%2C76&amp;sort_name=%E9%A6%96%E9%A5%B0&amp;gender=2%2C3">
首饰
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=142&amp;sort_name=%E8%A2%9C%E5%AD%90&amp;gender=2%2C3">
袜子
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=77%2C78%2C79%2C80%2C199%2C213%2C217%2C218%2C234%2C303%2C305%2C306%2C307%2C334&amp;sort_name=%E9%85%8D%E9%A5%B0&amp;gender=2%2C3">
配饰
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=162&amp;sort_name=%E6%89%8B%E8%A1%A8&amp;gender=2%2C3">
手表
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=316&amp;sort_name=%E5%9B%B4%E5%B7%BE&amp;gender=2%2C3">
围巾
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=164&amp;sort_name=%E6%89%8B%E5%A5%97&amp;gender=2%2C3">
手套
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=317&amp;sort_name=%E6%8A%AB%E8%82%A9&amp;gender=2%2C3">
披肩
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=186%2C235&amp;sort_name=%E5%A4%AA%E9%98%B3%E9%95%9C%2F%E7%9C%BC%E9%95%9C&amp;gender=2%2C3">
太阳镜/眼镜
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=320&amp;sort_name=%E6%89%8B%E5%B8%95&amp;gender=2%2C3">
手帕
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=321&amp;sort_name=%E4%B8%9D%E5%B7%BE&amp;gender=2%2C3">
丝巾
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=311%2C364%2C357%2C359&amp;sort_name=%E5%86%85%E8%A1%A3%2F%E5%AE%B6%E5%B1%85%E6%9C%8D&amp;gender=2%2C3">
全部内衣/家居服
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=364&amp;sort_name=%E6%96%87%E8%83%B8&amp;gender=2%2C3">
文胸
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=311&amp;sort_name=%E5%86%85%E8%A3%A4&amp;gender=2%2C3">
内裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=357&amp;sort_name=%E5%AE%B6%E5%B1%85%E6%9C%8D&amp;gender=2%2C3">
家居服
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=359&amp;sort_name=%E5%AE%B6%E5%B1%85%E9%9E%8B&amp;gender=2%2C3">
家居鞋
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=263&amp;sort_name=%E7%BE%8E%E5%A6%86%2F%E4%B8%AA%E6%8A%A4&amp;gender=2%2C3">
全部美妆/个护
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=263&amp;sort_name=%E9%A6%99%E6%B0%B4&amp;gender=2%2C3">
香水
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=260&amp;sort_name=%E9%9D%A2%E9%83%A8%E6%8A%A4%E7%90%86&amp;gender=2%2C3">
面部护理
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=264&amp;sort_name=%E4%B8%AA%E4%BA%BA%E6%8A%A4%E7%90%86&amp;gender=2%2C3">
个人护理
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=261&amp;sort_name=%E5%BD%A9%E5%A6%86&amp;gender=2%2C3">
彩妆
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=352&amp;sort_name=%E7%BA%B9%E8%BA%AB%E8%B4%B4&amp;gender=2%2C3">
纹身贴
</a>
</li>
</ul>
</div>
</div>
<div class="content hide" style="height: 522px;">
<ul class="primary-level">
<li class="p-level-item focus">
上衣
</li>
<li class="p-level-item">
裤装
</li>
<li class="p-level-item">
泳衣
</li>
<li class="p-level-item">
裙装
</li>
<li class="p-level-item">
鞋靴
</li>
<li class="p-level-item">
包类
</li>
<li class="p-level-item">
服配
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=211&amp;sort_name=%E6%B5%8B%E8%AF%95%E6%BD%AE%E7%AB%A5%E6%96%B0%E5%A2%9E%E4%BA%8C%E7%BA%A7%E7%B1%BB%E7%9B%AE&amp;gender=1%2C2%2C3"> 测试潮童新增二级类目</a>
</li>
</ul>
<div class="sub-level-container">
<ul class="sub-level ">
<li>
<a href="//list.dev.yohobuy.com/?sort=407%2C405%2C403%2C397%2C374%2C373&amp;sort_name=%E4%B8%8A%E8%A1%A3&amp;gender=1%2C2%2C3">
全部上衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=407&amp;sort_name=%E5%A4%A7%E8%A1%A3%2F%E9%A3%8E%E8%A1%A3&amp;gender=1%2C2%2C3">
大衣/风衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=405&amp;sort_name=%E5%A4%B9%E5%85%8B%2F%E9%98%B2%E9%A3%8E%E5%A4%96%E5%A5%97&amp;gender=1%2C2%2C3">
夹克/防风外套
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=401&amp;sort_name=%E6%AF%9B%E8%A1%A3%2F%E9%92%88%E7%BB%87&amp;gender=1%2C2%2C3">
毛衣/针织
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=403&amp;sort_name=%E9%A9%AC%E7%94%B2&amp;gender=1%2C2%2C3">
马甲
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=397&amp;sort_name=%E5%8D%AB%E8%A1%A3&amp;gender=1%2C2%2C3">
卫衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=399%2C400%2C374&amp;sort_name=%E8%A1%AC%E8%A1%AB&amp;gender=1%2C2%2C3">
衬衫
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=387&amp;sort_name=%E8%83%8C%E5%BF%83&amp;gender=1%2C2%2C3">
背心
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=373&amp;sort_name=T%E6%81%A4&amp;gender=1%2C2%2C3">
T恤
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=389%2C385%2C377%2C376%2C391&amp;sort_name=%E8%A3%A4%E8%A3%85&amp;gender=1%2C2%2C3">
全部裤装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=376&amp;sort_name=%E4%BC%91%E9%97%B2%E8%A3%A4&amp;gender=1%2C2%2C3">
休闲裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=389&amp;sort_name=%E7%89%9B%E4%BB%94%E8%A3%A4&amp;gender=1%2C2%2C3">
牛仔裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=391&amp;sort_name=%E8%BF%90%E5%8A%A8%E8%A3%A4&amp;gender=1%2C2%2C3">
运动裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=385&amp;sort_name=%E6%89%93%E5%BA%95%E8%A3%A4+%2F%E7%B4%A7%E8%BA%AB%E8%A3%A4&amp;gender=1%2C2%2C3">
打底裤 /紧身裤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=377&amp;sort_name=%E7%9F%AD%E8%A3%A4&amp;gender=1%2C2%2C3">
短裤
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=381&amp;sort_name=%E6%B3%B3%E8%A1%A3&amp;gender=1%2C2%2C3">
全部泳衣
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=381&amp;sort_name=%E6%B3%B3%E8%A1%A3&amp;gender=1%2C2%2C3">
泳衣
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=378%2C379&amp;sort_name=%E8%A3%99%E8%A3%85&amp;gender=1%2C2%2C3">
全部裙装
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=378&amp;sort_name=%E8%BF%9E%E8%A1%A3%E8%A3%99&amp;gender=1%2C2%2C3">
连衣裙
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=379&amp;sort_name=%E5%8D%8A%E8%BA%AB%E8%A3%99&amp;gender=1%2C2%2C3">
半身裙
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=383%2C375&amp;sort_name=%E9%9E%8B%E9%9D%B4&amp;gender=1%2C2%2C3">
全部鞋靴
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=383&amp;sort_name=%E5%87%89%E9%9E%8B%2F%E5%87%89%E6%8B%96&amp;gender=1%2C2%2C3">
凉鞋/凉拖
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=375&amp;sort_name=%E4%BC%91%E9%97%B2%2F%E8%BF%90%E5%8A%A8%E9%9E%8B&amp;gender=1%2C2%2C3">
休闲/运动鞋
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=393&amp;sort_name=%E5%8C%85%E7%B1%BB&amp;gender=1%2C2%2C3">
全部包类
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=393&amp;sort_name=%E5%8F%8C%E8%82%A9%E5%8C%85&amp;gender=1%2C2%2C3">
双肩包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=153&amp;sort_name=%E6%89%8B%E6%8B%8E%E5%8C%85%2F%E5%8D%95%E8%82%A9%E5%8C%85&amp;gender=1%2C2%2C3">
手拎包/单肩包
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=210&amp;sort_name=%E6%97%85%E8%A1%8C%E7%AE%B1&amp;gender=1%2C2%2C3">
旅行箱
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=351%2C342&amp;sort_name=%E6%B5%8B%E8%AF%953%E7%BA%A7&amp;gender=1%2C2%2C3">
测试3级
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=395%2C431%2C433&amp;sort_name=%E6%9C%8D%E9%85%8D&amp;gender=1%2C2%2C3">
全部服配
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=395&amp;sort_name=%E6%8A%AB%E8%82%A9&amp;gender=1%2C2%2C3">
披肩
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=431%2C433&amp;sort_name=%E5%A4%AA%E9%98%B3%E9%95%9C%2F%E7%9C%BC%E9%95%9C&amp;gender=1%2C2%2C3">
太阳镜/眼镜
</a>
</li>
</ul>
<ul class="sub-level hide">
</ul>
</div>
</div>
<div class="content hide" style="height: 522px;">
<ul class="primary-level">
<li class="p-level-item focus">
<a href="//list.dev.yohobuy.com/?sort=259%2C263%2C352&amp;sort_name=%E5%8B%BF%E5%88%A0SYJ%E6%B5%8B%E8%AF%95%E5%88%86%E7%B1%BB&amp;gender=1%2C2%2C3"> 勿删SYJ测试分类</a>
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=110%2C112%2C184&amp;sort_name=%E6%96%87%E5%85%B72&amp;gender=1%2C2%2C3"> 文具2</a>
</li>
<li class="p-level-item">
家居生活
</li>
<li class="p-level-item">
数码3C
</li>
<li class="p-level-item">
美妆/个护
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=130%2C348%2C346&amp;sort_name=%E6%B5%8B%E8%AF%95%E6%96%B0%E5%A2%9E%E5%88%86%E7%B1%BB%EF%BC%88%E9%9D%9E%E6%B5%8B%E8%AF%95%E8%AF%AF%E6%93%8D%E4%BD%9C%EF%BC%81%EF%BC%89&amp;gender=1%2C2%2C3"> 测试新增分类（非测试误操作！）</a>
</li>
<li class="p-level-item">
<a href="//list.dev.yohobuy.com/?sort=292&amp;sort_name=%E5%85%B3%E8%81%94%E4%B8%80%E4%B8%AA%E7%89%A9%E7%90%86%E7%B1%BB%E7%9B%AE&amp;gender=1%2C2%2C3"> 关联一个物理类目</a>
</li>
<div class="cate-page" id='cate-page'>
<div class="cate-nav clearfix">
<ul>
<li v-for="(index, cate) in brandCate" v-on:click='cateNavTopFun(index)' v-bind:class="{focus: index === topcurrent}" >
<span>{{cate.name}}</span>
</li>
</ul>
</div>
<div class="cate-container clearfix">
<div class="content" style="height: 522px;">
<ul class="primary-level">
<li v-for="(index, ca) in cateNavLeftData" v-bind:class="{focus: index === leftcurrent}" class="p-level-item" v-on:click='cateNavLeftFun(index)'>
<a href="{{ca.url}}">{{ca.name}}</a>
</li>
</ul>
<div class="sub-level-container">
<ul class="sub-level">
<li v-for="sub in cateNavRightData">
<a href="{{sub.url}}">{{sub.name}}</a>
</li>
</ul>
<div class="sub-level-container">
<ul class="sub-level ">
</ul>
<ul class="sub-level hide">
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=281%2C292%2C304%2C267%2C268%2C269%2C270%2C271%2C272%2C273%2C274%2C275%2C276%2C277%2C332%2C333%2C353%2C355%2C110%2C112%2C184%2C302%2C343%2C344%2C399&amp;sort_name=%E5%AE%B6%E5%B1%85%E7%94%9F%E6%B4%BB&amp;gender=1%2C2%2C3">
全部家居生活
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=268%2C269%2C270%2C271%2C272%2C273%2C274%2C275%2C276%2C277%2C332%2C333%2C353&amp;sort_name=%E5%B1%85%E5%AE%B6&amp;gender=1%2C2%2C3">
居家
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=355&amp;sort_name=%E5%AE%A0%E7%89%A9%E5%91%A8%E8%BE%B9&amp;gender=1%2C2%2C3">
宠物周边
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=281%2C282%2C283%2C284%2C292%2C304&amp;sort_name=%E7%8E%A9%E5%85%B7%E5%A8%B1%E4%B9%90&amp;gender=1%2C2%2C3">
玩具娱乐
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=283%2C110%2C111%2C112%2C184&amp;sort_name=%E6%96%87%E5%85%B7&amp;gender=1%2C2%2C3">
文具
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=112&amp;sort_name=%E6%96%87%E5%85%B73&amp;gender=1%2C2%2C3">
文具3
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=185%2C211%2C313%2C212%2C171%2C113%2C200%2C398&amp;sort_name=%E6%95%B0%E7%A0%813C&amp;gender=1%2C2%2C3">
全部数码3C
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=211&amp;sort_name=%E6%95%B0%E7%A0%81%E9%85%8D%E4%BB%B6&amp;gender=1%2C2%2C3">
数码配件
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=313&amp;sort_name=%E6%89%8B%E6%9C%BA%2Fipad%E5%A3%B3%E5%A5%97&amp;gender=1%2C2%2C3">
手机/ipad壳套
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=212&amp;sort_name=%E6%89%8B%E6%9C%BA%E9%85%8D%E4%BB%B6&amp;gender=1%2C2%2C3">
手机配件
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=171&amp;sort_name=%E8%80%B3%E6%9C%BA&amp;gender=1%2C2%2C3">
耳机
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=113&amp;sort_name=U%E7%9B%98&amp;gender=1%2C2%2C3">
U盘
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=200&amp;sort_name=%E7%94%B5%E8%84%91%E6%9E%B6&amp;gender=1%2C2%2C3">
电脑架
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=398&amp;sort_name=%E6%99%BA%E8%83%BD%E8%A3%85%E5%A4%87&amp;gender=1%2C2%2C3">
智能装备
</a>
</li>
</ul>
<ul class="sub-level hide">
<li>
<a href="//list.dev.yohobuy.com/?sort=263%2C260%2C264%2C261%2C352&amp;sort_name=%E7%BE%8E%E5%A6%86%2F%E4%B8%AA%E6%8A%A4&amp;gender=1%2C2%2C3">
全部美妆/个护
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=352&amp;sort_name=%E7%BA%B9%E8%BA%AB%E8%B4%B4&amp;gender=1%2C2%2C3">
纹身贴
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=264&amp;sort_name=%E4%B8%AA%E4%BA%BA%E6%8A%A4%E7%90%86&amp;gender=1%2C2%2C3">
个人护理
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=260&amp;sort_name=%E9%9D%A2%E9%83%A8%E6%8A%A4%E8%82%A4&amp;gender=1%2C2%2C3">
面部护肤
</a>
</li>
<li>
<a href="//list.dev.yohobuy.com/?sort=263&amp;sort_name=%E9%A6%99%E6%B0%B4&amp;gender=1%2C2%2C3">
香水
</a>
</li>
</ul>
<ul class="sub-level hide">
</ul>
<ul class="sub-level hide">
</ul>
</div>
</div>
</div>
</div>
</div>
</div><!--/end cate-container-->
</div>
</template>
<style>
.cate-page {
... ... @@ -1345,12 +201,13 @@
props: [],
data() {
return {
brandCate: [],
cateNavLeftData: [],
cateNavRightData: [],
topcurrent: 0,
leftcurrent: 0
};
},
watch: {
},
methods: {
getCateList() {
let data = {
... ... @@ -1361,49 +218,21 @@
url: '/get-cate-list',
data: data
}).then(result => {
console.log(result, '====');
this.brandCate = result;
this.cateNavLeftData = this.brandCate[0].ca;
this.cateNavRightData = this.cateNavLeftData[0].sub;
}).fail(() => {
tip('网络错误');
});
},
cateNavTopFun(e) {
var $this = $(e.target).closest('li'),
$nav = $('.cate-nav'),
$cateContainer = $('.cate-container'),
$contents = $cateContainer.children('.content'),
$curContent = $contents.not('.hide'),
index = $this.index();
if ($this.hasClass('focus')) {
return;
}
$nav.find('li.focus').removeClass('focus');
$this.addClass('focus');
$curContent.addClass('hide');
$curContent = $contents.eq(index).removeClass('hide');
cateNavTopFun(index) {
this.topcurrent = index;
this.cateNavLeftData = this.brandCate[index].ca;
this.cateNavRightData = this.cateNavLeftData[0].sub;
},
cateNavLeftFun(e) {
var $this = $(e.target),
$subLevel,
$cur, index;
$cur = $this.closest('.p-level-item');
if ($cur.length > 0) {
index = $cur.index();
$subLevel = $this.closest('.content').find('.sub-level');
if ($this.hasClass('focus')) {
return;
}
$this.closest('.primary-level').children('.focus').removeClass('focus');
$this.addClass('focus');
$subLevel.not('.hide').addClass('hide');
$subLevel.eq(index).removeClass('hide');
}
cateNavLeftFun(index) {
this.leftcurrent = index;
this.cateNavRightData = this.cateNavLeftData[index].sub;
}
},
created() {
... ...
<template>
<div class="brand-share">
<div class="brand-top-box" v-bind:style="{ 'background-image': `url(${brandBg})` }"></div>
<div class="brand-title">{{ brandName }}</div>
<div class="brand-intro">{{ brandIntro }}</div>
<div class="tip">进入 BLK 选购潮品</div>
<div class="arrow">i</div>
<img v-lazy="brandBg | resize 752 365">
</div>
<share-bottom></share-bottom>
</template>
<style>
.brand-share {
.brand-top-box {
width: 100%;
height: 468px;
color: #fff;
background-color: #000;
position: relative;
}
.brand-title {
margin: 30px;
font-weight: 700;
font-size: 32px;
color: #000;
font-style: italic;
}
.brand-intro {
margin: 30px;
min-height: 400px;
}
.tip {
width: 100%;
text-align: center;
font-size: 36px;
margin: 10px 0;
}
.arrow {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
img {
width: 100%;
height: 365px;
}
}
</style>
<script>
const brandShopTop = require('channel/brand-shop-top.vue');
const shareBottom = require('channel/share-bottom.vue');
module.exports = {
data() {
return {
brandName: 'COLORMAD',
brandBg: 'http://7xwj52.com1.z0.glb.clouddn.com/brandbg.jpg',
brandIntro: 'COLORMAD坚持女性的时尚美丽不应为牺牲健康为代价，以健康，时尚，科技为理念，' +
'研发健康无伤害的新概念甲油。'
};
},
components: {
brandShopTop,
shareBottom
}
};
</script>
... ...
... ... @@ -6,8 +6,8 @@
<hr>
<div v-show="showMore" transition="brand-intro" v-bind:class="{ 'brand-short': !showMore }">{{ brandIntro.brandIntro }}</div>
</div>
<div v-if="!showMore" class="showmore expand" @click="introTrans()"></div>
<div v-else class="showmore collapse" @click="introTrans()"></div>
<div v-if="!showMore" class="showmore expand" @click="introTrans()"><span class="icon">&#xe602;</span></div>
<div v-else class="showmore collapse" @click="introTrans()"><span class="icon">&#xe617;</span></div>
</div>
</template>
<style>
... ... @@ -25,7 +25,9 @@
padding: 0 30px;
.brand-title {
font-weight: 700;
font-size: 32px;
font-style: italic;
}
hr {
... ... @@ -66,16 +68,9 @@
width: 60px;
height: 60px;
position: absolute;
bottom: 20px;
bottom: 10px;
right: 30px;
}
.expand {
background: url("/channel/expand.png") no-repeat;
}
.collapse {
background: url("/channel/collapse.png") no-repeat;
font-size: 32px;
}
}
</style>
... ... @@ -85,7 +80,6 @@
const qs = require('yoho-qs');
module.exports = {
props: ['domain'],
data() {
return {
brandIntro: {},
... ...
<template>
<div class="top-box clearfix">
<i class="back" @click="goBack()"></i>
<span class="icon back" @click="goBack()">&#xe606;</span>
<div class="right">
<i class="favorite"></i>
<i class="share" @click="goShare()"></i>
<i class="filter"></i>
<span class="icon favorite">&#xe609;</span>
<span class="icon share" @click="goShare()">&#xe60e;</span>
<span class="icon filter">&#xe60b;</span>
</div>
</div>
</template>
... ... @@ -13,39 +13,30 @@
.top-box {
width: 100%;
height: 60px;
padding: 0 20px;
position: fixed;
top: 60px;
left: 0;
z-index: 99;
color: #fff;
font-size: 48px;
.back {
width: 60px;
height: 60px;
float: left;
background: url("/channel/back.png") no-repeat;
}
.right {
height: 60px;
float: right;
margin: 0;
padding: 0;
i {
span {
width: 60px;
height: 60px;
margin: 0 5px;
display: inline-block;
}
.favorite {
background: url("/channel/favorite.png") no-repeat;
}
.share {
background: url("/channel/share.png") no-repeat;
}
.filter {
background: url("/channel/filter.png") no-repeat;
}
}
}
... ...
<template>
<div class="share-bottom clearfix" v-bind:class="{ 'hidden': close }">
<!-- TODO iconfont 要换-->
<span class="icon close" @click="closeBottom()">&#xe609;</span>
<img v-lazy="">
<a href="javascript:;" class="new-user">新用户送千元礼包</a>
<a href="http://m.yohoblk.com" class="download">立即下载</a>
</div>
</template>
<style>
.share-bottom {
width: 100%;
padding: 20px 10px;
background: #fff;
position: fixed;
left: 0;
bottom: 0;
height: 100px;
border-top: #ececec solid 2px;
.close {
position: fixed;
left: 0;
bottom: 60px;
font-size: 40px;
}
img {
float: left;
}
a {
border: #000 solid 2px;
padding: 10px;
border-radius: 40px;
}
.new-user {
float: left;]
border: #fff solid 2px;
}
.download {
float: right;
}
}
.hidden {
display: none;
}
</style>
<script>
module.exports = {
data() {
return {
close: false
};
},
methods: {
closeBottom() {
this.close = true;
}
}
};
</script>
\ No newline at end of file
... ...
... ... @@ -6,7 +6,7 @@
*/
const tip = require('common/tip');
const Overlay = require('common/overlay');
/**
* 颜色尺码选择组件
... ... @@ -37,7 +37,7 @@ module.exports = {
const self = this;
if (this.isVisible) {
this.overlay = $.overlay({
this.overlay = new Overlay({
disableScrolling: false,
onClose: function() {
self.isVisible = false;
... ...
<template>
<button @click="yoho.goTap()">跳转 TAP</button>
<button @click="yoho.goLogin()">跳转登录</button>
<button @click="yoho.goShopingCart()">跳转购物车</button>
<button @click="yoho.goAddress()">跳转地址管理列表</button>
<button @click="yoho.goImageBrowser()">跳转图片浏览</button>
<button @click="yoho.goNewPage()">跳转新的 WAP 页面</button>
<button @click="yoho.goPay()">跳转支付页面</button>
</template>
<style>
button {
width: 30%;
height: 60px;
margin: 1%;
}
</style>
<script>
const yoho = require('yoho');
module.exports = {
data() {
return {
yoho
};
}
};
</script>
... ...
... ... @@ -19,7 +19,7 @@
<img :src="entity.brand.brandIco | resize 110 68" width="55" height="34"/>
<h2>{{entity.brand.brandName}}</h2>
<a href="#">
<a :href="entity.brand.brandDomain | brandUrl">
进入店铺
<span class="icon icon-right"></span>
</a>
... ...
... ... @@ -4,7 +4,7 @@
* @author: Aiden Xu<aiden.xu@yoho.cn>
* @date: 2016/07/19
*/
const $ = require('yoho-jquery');
const app = $('#app');
const tip = require('common/tip');
... ... @@ -92,6 +92,7 @@ module.exports = {
created() {
const self = this;
const pid = app.data('pid');
let loadIntroDeferred;
// 显示商品特征选择组件
this.$on('feature.close', function() {
... ... @@ -104,12 +105,19 @@ module.exports = {
this.entity = result;
return result;
}).then((result)=> {
// 读取商品详情
return $.get(`/product/product/intro_${pid}.json`, {skn: result.productPriceBo.productSkn});
}).then(result => {
this.intro = result;
}).fail(err => {
console.log(err);
loadIntroDeferred = () => {
// 读取商品详情
$.get(`/product/product/intro_${pid}.json`, {skn: result.productPriceBo.productSkn}).then(intro => {
this.intro = intro;
});
};
});
$(window).on('scroll', ()=> {
if ($(window).scrollTop() > 200 && loadIntroDeferred) {
loadIntroDeferred();
loadIntroDeferred = null;
}
});
// 读取购物车数量
... ...