fe / YOHOOD · Commits

Go to a project

Authored by microTT
Commit a9c0719317538e2da4c8adf8c3d5c656d929bee7 1 parent c67027e0

首页banner导航Bug修复，参展品牌页面完善

Inline Side-by-side
Showing 9 changed files with 99 additions and 42 deletions
... ... @@ -196,7 +196,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -204,7 +204,7 @@
<h2>About DUSTY</h2>
<div class="brand-info clearfix">
<div class="pic">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<div class="text">
<p>早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前早在25年前</p>
... ... @@ -264,12 +264,13 @@
<!-- 单个资讯碎片 end -->
</div>
</div>
<span class="close-tag iconfont">&#xe606;</span>
</div>
</li>
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -277,7 +278,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -285,7 +286,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -293,7 +294,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -301,7 +302,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -309,7 +310,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -317,7 +318,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ... @@ -325,7 +326,7 @@
<li>
<a href="javascript:;" target="_blank">
<div class="img-box">
<img src="../../res/images/yohood/cooperation/brand-img.png" alt="">
<img class="grey-brand-logo" src="../../res/images/yohood/brand-logo.png" alt="">
</div>
<p>004</p>
</a>
... ...
... ... @@ -371,7 +371,7 @@
<a class="current" p="1">1</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">2</a>
<a href="http://www.yohood.cn/default/index/page/3" class="link2" p="3">3</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2 page-fold" p="4">····</a>
<a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a>
<a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">NEXT ></a>
... ...
... ... @@ -336,17 +336,19 @@
</div>
<!-- 单个资讯碎片 end -->
</div>
<!-- 分页 start -->
<div id="pageContent" style="text-align: center;" class="pagination">
<div class="pagination-inner" id="img_page" model="default" rel="">
<a class="current" p="1">1</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">2</a>
<a href="http://www.yohood.cn/default/index/page/3" class="link2" p="3">3</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2 page-fold" p="4">····</a>
<a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a>
<a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">NEXT ></a>
</div>
</div>
<!-- 分页 end -->
</div>
<!-- 单个资讯类别 end -->
</div>
... ...
... ... @@ -248,17 +248,19 @@
</div>
</div>
</div>
<!-- 分页 start -->
<div id="pageContent" style="text-align: center;" class="pagination">
<div class="pagination-inner" id="img_page" model="default" rel="">
<a class="current" p="1">1</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">2</a>
<a href="http://www.yohood.cn/default/index/page/3" class="link2" p="3">3</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2 page-fold" p="4">····</a>
<a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a>
<a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">NEXT ></a>
</div>
</div>
<!-- 分页 end -->
</div>
</div>
<!-- 页面主体 end -->
... ...
... ... @@ -334,17 +334,19 @@
</div>
<!-- 单个视频碎片 end -->
</div>
<!-- 分页 start -->
<div id="pageContent" style="text-align: center;" class="pagination">
<div class="pagination-inner" id="img_page" model="default" rel="">
<a class="current" p="1">1</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">2</a>
<a href="http://www.yohood.cn/default/index/page/3" class="link2" p="3">3</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2" p="4">4</a>
<a href="http://www.yohood.cn/default/index/page/4" class="link2 page-fold" p="4">····</a>
<a href="http://www.yohood.cn/default/index/page/5" class="link2" p="5">5</a>
<a href="http://www.yohood.cn/default/index/page/6" class="link2" p="6">6</a>
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">NEXT ></a>
</div>
</div>
<!-- 分页 end -->
</div>
<!-- 视频页面主体 end -->
</div>
... ...
... ... @@ -94,11 +94,11 @@ define('channel', function(require, exports) {
wrapperClass: 'slide-wrap',
slideClass: 'box',
slidesPerView: 'auto',
callback: function(index) {
if (index >= $('.dib a').size()) {
index = index - $('.dib a').size();
}
$('.dib a').removeClass('on').eq(index).addClass('on');
onSlideChangeEnd: function(swiper) {
var activeIndex = swiper.activeIndex,
len = $('.dib a').size(),
pos = (activeIndex - 1) % len;
$('.dib a').removeClass('on').eq(pos).addClass('on');
}
}),
... ... @@ -403,16 +403,49 @@ define('channel', function(require, exports) {
};
//品牌
exports.brand = function() {
$('.brand-list').on('click', 'li', function() {
if ($(this).find('.brand-introduction').size() > 0) {
$(this).find('.brand-introduction').show();
$('.overlay').show();
/**
* 关于品牌点击弹窗事件
*/
({
init: function() {
// 点击品牌图标、弹窗显示品牌信息
$('.brand-list').on('click', 'li', function() {
if ($(this).find('.brand-introduction').size() > 0) {
$(this).find('.brand-introduction').show();
$('.overlay').show();
}
});
// 点击遮罩层、关闭modal窗
$('.overlay').on('click', function() {
$(this).hide();
$('.brand-introduction').hide();
});
// 点击关闭按钮、关闭modal窗
$('.brand-introduction .close-tag').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$('.overlay').hide();
$('.brand-introduction').hide();
});
}
});
$('.overlay').on('click', function() {
$(this).hide();
$('.brand-introduction').hide();
});
}).init();
/**
* 鼠标移入显示彩色logo 移出显示灰色logo
*/
({
init: function() {
$(".brand-list").on("mouseenter", "li > a", function(event) {
var $img = $(this).find("img");
$img.removeClass("grey-brand-logo");
}).on("mouseleave", "li > a", function() {
var $img = $(this).find("img");
$img.addClass("grey-brand-logo");
})
}
}).init();
};
//资讯
exports.news = function() {
... ...
... ... @@ -53,6 +53,28 @@
.brand-list {
li {
float: left;
position: relative;
.close-tag {
position: absolute;
font-size: 25px;
top: 32px;
right: 32px;
}
.img-box {
position: relative;
img {
max-width: 160px;
max-height: 100px;
}
.grey-brand-logo {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
}
}
}
... ... @@ -105,6 +127,7 @@
width: 94px;
height: 33px;
margin-top: 15px;
margin-left: 20px;
padding-left: 34px;
line-height: 35px;
border: 1px solid #000;
... ...
... ... @@ -440,6 +440,9 @@ $pageMainWidth: 1180px;
outline: none;
}
}
.page-fold {
border: 0;
}
a:last-child {
width: 85px;
}
... ... @@ -456,7 +459,7 @@ $pageMainWidth: 1180px;
margin: 12px 0 0 0;
li {
float: left;
margin: 0 (1180px - 174px * 5) / 4 27px 0;
margin: 0 (1180px - 200px * 5) / 4 27px 0;
a {
display: block;
&:focus {
... ... @@ -464,16 +467,13 @@ $pageMainWidth: 1180px;
}
}
.img-box {
width: 172px;
height: 116px;
width: 200px;
height: 120px;
overflow: hidden;
border: 1px solid #e0e0e0;
display: table-cell;
vertical-align: middle;
text-align: center;
&:hover {
border: 1px solid #000;
}
&:hover {}
}
p {
margin: 16px 0 0 0;
... ... @@ -483,9 +483,7 @@ $pageMainWidth: 1180px;
}
}
li.current {
.img-box {
border: 1px solid #000;
}
.img-box {}
}
li:nth-child(5n) {
margin-right: 0;
... ... @@ -504,7 +502,6 @@ $pageMainWidth: 1180px;
// background: url("../images/yohood/limited-line.png") no-repeat center center;
// }
// }
// .limited-slide-box {
// position: relative;
// width: 944px;
... ... @@ -520,7 +517,6 @@ $pageMainWidth: 1180px;
// float: left;
// }
// }
// .goods-list {
// float: left;
// width: 992px;
... ... @@ -572,7 +568,6 @@ $pageMainWidth: 1180px;
// }
// }
// }
// .limited-slide-control {
// position: absolute;
// height: 200px;
... ... @@ -601,7 +596,6 @@ $pageMainWidth: 1180px;
// cursor: default;
// }
// }
.return-top {
position: fixed;
bottom: 440px;
... ...