diff --git a/demo/yohood3.0/brand.html b/demo/yohood3.0/brand.html
index 7f510dc..fc54bd1 100644
--- a/demo/yohood3.0/brand.html
+++ b/demo/yohood3.0/brand.html
@@ -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"></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>
diff --git a/demo/yohood3.0/index.html b/demo/yohood3.0/index.html
index bff2f28..9610d59 100644
--- a/demo/yohood3.0/index.html
+++ b/demo/yohood3.0/index.html
@@ -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>
diff --git a/demo/yohood3.0/news.html b/demo/yohood3.0/news.html
index 03fb8e8..e9ae23d 100644
--- a/demo/yohood3.0/news.html
+++ b/demo/yohood3.0/news.html
@@ -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>
diff --git a/demo/yohood3.0/show.html b/demo/yohood3.0/show.html
index cabc049..db3a2ad 100644
--- a/demo/yohood3.0/show.html
+++ b/demo/yohood3.0/show.html
@@ -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 -->
diff --git a/demo/yohood3.0/video.html b/demo/yohood3.0/video.html
index 2bea8e4..ce23fb7 100644
--- a/demo/yohood3.0/video.html
+++ b/demo/yohood3.0/video.html
@@ -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>
diff --git a/res/images/yohood/brand-logo.png b/res/images/yohood/brand-logo.png
new file mode 100644
index 0000000..edb7ae5
Binary files /dev/null and b/res/images/yohood/brand-logo.png differ
diff --git a/res/js/channel.js b/res/js/channel.js
index 9e93476..665008e 100644
--- a/res/js/channel.js
+++ b/res/js/channel.js
@@ -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() {
diff --git a/res/sass/style/_brand.scss b/res/sass/style/_brand.scss
index d830440..5902c80 100644
--- a/res/sass/style/_brand.scss
+++ b/res/sass/style/_brand.scss
@@ -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;
diff --git a/res/sass/style/_common.scss b/res/sass/style/_common.scss
index cb125bf..927c4c0 100644
--- a/res/sass/style/_common.scss
+++ b/res/sass/style/_common.scss
@@ -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;