fe / yohobuywap-node · Commits

Go to a project

Authored by ccbikai(👎🏻🍜)
Commit 3f65022381b331622cea9ba1338439ce7b9e3dc5 2 parents d9470987 3895945c

Merge remote-tracking branch 'origin/feature/brandsTree' into release/5.4.1

Inline Side-by-side
Showing 5 changed files with 192 additions and 186 deletions
<div class="brand-blk-page yoho-page">
<!--//no-download 标签不出现头部下载按钮-->
<div id="no-download"></div>
<div class="tab-box">
<ul class="brand-tab">
<li class="brand {{#unless categoryTab}}active{{/ unless}}">鍝佺墝</li>
... ...
... ... @@ -46,7 +46,7 @@
<ul class="list-box">
{{# indexList}}
<li class="item in items">
<li>
<a class="no-intercept" href="#{{index}}">{{name}}</a>
</li>
{{/ indexList}}
... ...
... ... @@ -6,15 +6,17 @@ var categoryHeight = $('.tab-box').height(),
isBrand;
var $intercept = $('.no-intercept'),
$list = $('.brand-list-box');
$list = $('.brand-list-box'),
$listBox = $('.list-box');
function channels(key) {
return {
var channel = {
men: 1,
women: 2,
lifestyle: 4
}[key];
};
return channel[key];
}
function initialize() {
... ... @@ -97,6 +99,10 @@ $('.brand-tab').find('li').click(function() {
initialize();
});
if ($listBox.find('li').length <= 0) {
$listBox.hide();
}
$(function() {
$('.banner-swiper').each(function() {
if (!$(this).parents('.content').hasClass('hide') && $(this).hasClass('swiper-container-horizontal') === false && $(this).find('li').length > 1) {
... ...
... ... @@ -9,7 +9,7 @@
.brand-tab {
max-width: inherit;
height: 80px;
font-size: 0.65rem;
font-size: 26px;
text-align: center;
z-index: 10;
background-color: #fff;
... ... @@ -38,8 +38,8 @@
.channel-tab {
width: 100%;
max-width: inherit;
height: 2rem;
font-size: 0.65rem;
height: 80px;
font-size: 26px;
text-align: center;
position: relative;
z-index: 10;
... ... @@ -49,12 +49,12 @@
li {
width: 50%;
color: #b0b0b0;
line-height: 2rem;
line-height: 80px;
float: left;
}
li:first-child {
margin-left: -0.25rem;
margin-left: -10px;
}
.focus {
... ... @@ -121,27 +121,6 @@
background: #f6f6f6;
border-top: 1px solid #eee;
.per-brand-box {
background: #fff;
padding: 0 30px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
overflow: hidden;
&:not(:first-of-type) {
margin-top: 20px;
}
.index {
height: 60px;
line-height: 60px;
a {
font-size: 32px;
}
}
}
.brand-big-box {
width: 100%;
}
... ... @@ -154,17 +133,6 @@
text-align: center;
margin-bottom: 20px;
.brand-logo {
margin: 0 auto;
width: 136px;
height: 136px;
overflow: hidden;
img {
width: 100%;
}
}
.brand-name {
width: 136px;
font-size: 18px;
... ... @@ -175,6 +143,38 @@
display: inline-block;
}
}
.brand-logo {
margin: 0 auto;
width: 136px;
height: 136px;
overflow: hidden;
img {
width: 100%;
}
}
}
.per-brand-box {
background: #fff;
padding: 0 30px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
overflow: hidden;
&:not(:first-of-type) {
margin-top: 20px;
}
.index {
height: 60px;
line-height: 60px;
a {
font-size: 32px;
}
}
}
.index-list {
... ... @@ -209,7 +209,7 @@
.pagination-inner {
left: auto;
right: 0.75rem;
right: 30px;
-webkit-transform: none;
transform: none;
position: absolute;
... ...
.blk-cate-all {
font-size: 15PX;
/* margin-bottom: 100px;*/
.category-nav {
height: 70px;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
box-sizing: border-box;
float: left;
height: 100%;
padding: 20px 0;
width: 50%;
text-align: center;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
&.bytouch {
background: #eee;
}
}
span {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 15PX;
border-right: 1px solid #e6e6e6;
}
li:last-child span {
border-right: 0;
}
}
.content {
/*background: #f8f8f8;*/
overflow: hidden;
position: relative;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 45%;
> li {
height: 89px;
line-height: 89px;
padding: 0 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid #e6e6e6;
&.focus {
background-color: #fff;
}
&.highlight {
background-color: #eee;
}
}
}
.trilanglefont {
font-family: "iconfont" !important;
font-size: 0.75rem;
font-style: normal;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
color: #f4f4f4;
}
.primary-level-trilangle {
float: right;
background-image: url(sprite.index.product.png);
background-position: -3.4rem 0px;
background-size: 3.9rem 2.7rem;
margin-top: 0.55rem;
width: 0.5rem;
height: 1.15rem;
position: relative;
right: -32px;
}
.sub-level-container {
float: left;
overflow-x: auto;
box-sizing: border-box;
background: #fff;
width: 55%;
height: 100%;
background: #f4f4f4;
}
.sub-level {
width: 100%;
height: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 79px;
line-height: 79px;
border-bottom: 1px solid #e6e6e6;
padding-left: 20px;
&.highlight {
background: #eee;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #afafaf;
}
}
.blk-cate-all {
font-size: 15PX;
.category-nav {
height: 70px;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
box-sizing: border-box;
float: left;
height: 100%;
padding: 20px 0;
width: 50%;
text-align: center;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
&.bytouch {
background: #eee;
}
}
span {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 15PX;
border-right: 1px solid #e6e6e6;
}
li:last-child span {
border-right: 0;
}
}
.content {
overflow: hidden;
position: relative;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 45%;
> li {
height: 89px;
line-height: 89px;
padding: 0 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid #e6e6e6;
&.focus {
background-color: #fff;
}
&.highlight {
background-color: #eee;
}
}
}
.trilanglefont {
font-family: "iconfont" !important;
font-size: 30px;
font-style: normal;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
color: #f4f4f4;
}
.primary-level-trilangle {
float: right;
background-image: url(/product/arrow.png) no-repeat;
margin-top: 22px;
width: 20px;
height: 46px;
position: relative;
right: -32px;
}
.sub-level-container {
float: left;
overflow-x: auto;
box-sizing: border-box;
background: #fff;
width: 55%;
height: 100%;
background: #f4f4f4;
}
.sub-level {
width: 100%;
height: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 79px;
line-height: 79px;
border-bottom: 1px solid #e6e6e6;
padding-left: 20px;
&.highlight {
background: #eee;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #afafaf;
}
}
}
... ...