fe / yohoblk-wap · Commits

Go to a project

Authored by 郝肖肖
Commit d8f0894f1df12769ded79f9589e0f246afbac33e 1 parent 6cdd4929

css focus cate

Inline Side-by-side
Showing 2 changed files with 24 additions and 53 deletions
... ... @@ -170,8 +170,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,
... ...
<template>
<div class="cate-page" id='cate-page'>
<div class="cate-nav clearfix" v-on:click='cateNavTopFun'>
<div class="cate-page" id='cate-page'>
<div class="cate-nav clearfix">
<ul>
<li v-for="cate in brandCate">
<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 hide" style="height: 522px;" v-for="cate in brandCate">
<div class="content" style="height: 522px;">
<ul class="primary-level">
<li v-for="ca in cate.ca" class="p-level-item {{#if index}} focus {{/if}}" v-on:click='cateNavLeftFun'>
<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 hide" v-for="ca in cate.ca">
<li v-for="sub in ca.sub">
<ul class="sub-level">
<li v-for="sub in cateNavRightData">
<a href="{{sub.url}}">{{sub.name}}</a>
</li>
</ul>
</div>
</div>
</div><!--/end cate-container-->
</div>
</div>
</template>
<style>
.cate-page {
font-size: 36px;
... ... @@ -202,12 +201,13 @@
props: [],
data() {
return {
brandCate: []
brandCate: [],
cateNavLeftData: [],
cateNavRightData: [],
topcurrent: 0,
leftcurrent: 0
};
},
watch: {
},
methods: {
getCateList() {
let data = {
... ... @@ -219,50 +219,20 @@
data: data
}).then(result => {
this.brandCate = result;
console.log(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');
console.log($cur.html(), '222');
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() {
... ...