fe / YOHOOD · Commits

Go to a project

Authored by tmq
Commit 16d8483238452c5f342007a25156d854cfaec5d0 2 parents 1e9bddb4 1bf3d203 master ... develop release_v4 test

Merge branch 'develop' of git.dev.yoho.cn:web/yohood into develop

Inline Side-by-side
Showing 19 changed files with 1091 additions and 869 deletions
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>detail</title>
<link rel="stylesheet" href="../../res/css/index.css"/>
<link rel="stylesheet" href="../../res/css/index.css" />
</head>
<body>
<!-- 主站导航 start -->
<div class="yoho-nav clearfix">
<ul class="clearfix">
<li>
... ... @@ -35,50 +38,124 @@
</ul>
<a class="contact-btn" href="javascript:;">contact</a>
</div>
<!-- 主站导航 end -->
<!-- 页眉 start -->
<div class="header">
<h1 class="logo"></h1>
<!-- 页首 logo start -->
<h1 class="logo">
<img src="../../res/images/yohood/logo3.0.png">
</h1>
<!-- 页首 logo end -->
<!-- yohood 导航 start -->
<div class="nav">
<ul class="clearfix">
<li>
<a href="javascript:;">HOME</a>
<span>首页</span>
</li>
<li>
<a href="javascript:;">ACTIVITY</a>
<span>活动详情</span>
<!-- 单个菜单标签 start -->
<li class="current">
<a href="javascript:;">
<em>HOME</em>
<span>首页</span>
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">COUNSEL</a>
<span>最新资讯</span>
<a href="javascript:;">
<em>ACTIVITY</em>
<span>活动资讯</span>
<i></i>
</a>
<!-- 二级菜单 start -->
<div class="second-menu">
<a href="javascript:;">
<em>品牌咨询</em>
<i></i>
</a>
<a href="javascript:;">
<em>活动介绍</em>
<i></i>
</a>
<a href="javascript:;">
<em>活动介绍</em>
<i></i>
</a>
<a href="javascript:;">
<em>亮点活动</em>
<i></i>
</a>
<a href="javascript:;">
<em>限量商品</em>
<i></i>
</a>
</div>
<!-- 二级菜单 end -->
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">BRAND</a>
<span>参展品牌</span>
<a href="javascript:;">
<em>BRAND</em>
<span>参展品牌</span>
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">VIDEO</a>
<span>热点视频</span>
<a href="javascript:;">
<em>VIDEO</em>
<span>热点视频</span>
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">RECOMMEND</a>
<span>限量推荐</span>
<a href="javascript:;">
<em>REGISTRATION</em>
<span>在线登记</span>
<i></i>
</a>
<!-- 二级菜单 start -->
<div class="second-menu">
<a href="javascript:;">
<em>参展商登记</em>
<i></i>
</a>
<a href="javascript:;">
<em>媒体登记</em>
<i></i>
</a>
<a href="javascript:;">
<em>赞助商登记</em>
<i></i>
</a>
</div>
<!-- 二级菜单 end -->
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">SCENE</a>
<span>现场活动</span>
</li>
<li class="current">
<a href="javascript:;">SHOW</a>
<span>潮流分享</span>
<a href="javascript:;">
<em>SHOW</em>
<span>潮流分享</span>
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
</ul>
</div>
<!-- yohood 导航 end -->
</div>
<!-- 页眉 end -->
<div class="bd">
<div class="detail-wrap clearfix">
<div class="detail-title">
<h2>MACxYO'HOOD 独家揭秘大秀后台</h2>
<h3>潮流嘉年华</h3>
<div class="item-info">
<a class="fluid-tag item-tag brand-info" href="javascript:;">品牌资讯</a>
<span class="item-time">November 11, 2016</span>
</div>
</div>
<div class="detail-body">
<div class="detail-slide">
... ... @@ -173,8 +250,12 @@
<div class="detail-side">
<div class="detail-ad">
<ul>
<li><a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a></li>
<li>
<a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="http://img01.yohoboys.com/ezineimg/2015/05/05/09/015390c327b8c67dca48be4dc024f04bb1.jpg?imageMogr2/thumbnail/!0340x0426r/crop/0340x0426" alt=""></a>
</li>
</ul>
</div>
<div class="app-download clearfix">
... ... @@ -287,90 +368,110 @@
<div class="slide-wrap clearfix">
<div class="box">
<ul class="goods-list clearfix">
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 1</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 2</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 3</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 4</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 5</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 1</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 2</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 3</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 4</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 5</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
</ul>
</div>
<div class="box">
<ul class="goods-list clearfix">
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 1</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 2</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 3</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 4</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li><a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 5</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a></li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 1</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 2</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span class="red">TOP 3</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 4</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="http://img11.static.yhbimg.com/goodsimg/2014/01/22/05/0159a2768841aff6715fb6df15353de841.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90" alt="">
<span>TOP 5</span>
</div>
<p class="goods-name">MACROPUS 暗夜系列双肩背包</p>
<p class="price">￥339.00</p>
</a>
</li>
</ul>
</div>
</div>
... ... @@ -381,27 +482,32 @@
</div>
</div>
</div>
<div class="share" data-link="http://newgirls.test.yoho.cn/channel/detail/index/id/2315" cover-url="http://cmsimg01.qiniudn.com/contentimg/2015/05/12/13/0147a071d80901d152ce04dc4341905d26.jpg">
<div style="display: none" class="share" data-link="http://newgirls.test.yoho.cn/channel/detail/index/id/2315" cover-url="http://cmsimg01.qiniudn.com/contentimg/2015/05/12/13/0147a071d80901d152ce04dc4341905d26.jpg">
<h4>share</h4>
<ul>
<li class="yohoo-share-button-sina"><a href="javascript:;"><img src="../../res/images/yohood/share-sina-btn.png" alt="Share to sina"></a></li>
<li class="yohoo-share-button-sina">
<a href="javascript:;"><img src="../../res/images/yohood/share-sina-btn.png" alt="Share to sina"></a>
</li>
<li class="yohoo-share-button-wx">
<a href="javascript:;">
<img src="../../res/images/yohood/share-wx-btn.png" alt="Share to weixin">
</a>
<div class="wx-qrcode-dialog">
<div class="wx-popup-hd">
<span>分享到微信朋友圈</span>
<span>分享到微信朋友圈</span>
</div>
<div class="wx-popup-bd">
<img src="">
</div>
<div class="wx-popup-ft">点击底部的“发现”，使用<br>“扫一扫”即可分享。</div>
<div class="wx-popup-ft">点击底部的“发现”，使用
<br>“扫一扫”即可分享。</div>
</div>
</li>
<li class="yohoo-share-button-qq"><a href="javascript:;">
<img src="../../res/images/yohood/share-qq-btn.png" alt="Share to qZone">
</a></li>
<li class="yohoo-share-button-qq">
<a href="javascript:;">
<img src="../../res/images/yohood/share-qq-btn.png" alt="Share to qZone">
</a>
</li>
<li class="yohoo-share-button-facebook">
<a href="javascript:;">
<img src="../../res/images/yohood/share-fb-btn.png" alt="Share to facebook">
... ... @@ -411,16 +517,16 @@
</div>
<div class="return-top">
<a href="javascript:void(0);" id="toTop" class="ifont" style="display: inline;">
<span class="iconfont">&#xe605;</span>
TOP
<span class="iconfont">&#xe605;</span> TOP
</a>
</div>
</body>
<script type="text/javascript" src="../../res/js/lib/seajs.js"></script>
<script type="text/javascript">
seajs.use(['jquery','channel'],function($,channel){
channel.common();
channel.detail();
})
seajs.use(['jquery', 'channel'], function($, channel) {
channel.common();
channel.detail();
})
</script>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -42,11 +42,14 @@
<!-- 页眉 start -->
<div class="header">
<!-- 页首 logo start -->
<h1 class="logo"></h1>
<h1 class="logo">
<img src="../../res/images/yohood/logo3.0.png">
</h1>
<!-- 页首 logo end -->
<!-- yohood 导航 start -->
<div class="nav">
<ul class="clearfix">
<!-- 单个菜单标签 start -->
<li class="current">
<a href="javascript:;">
<em>HOME</em>
... ... @@ -54,13 +57,41 @@
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">
<em>ACTIVITY</em>
<span>活动资讯</span>
<i></i>
</a>
<!-- 二级菜单 start -->
<div class="second-menu">
<a href="javascript:;">
<em>品牌咨询</em>
<i></i>
</a>
<a href="javascript:;">
<em>活动介绍</em>
<i></i>
</a>
<a href="javascript:;">
<em>活动介绍</em>
<i></i>
</a>
<a href="javascript:;">
<em>亮点活动</em>
<i></i>
</a>
<a href="javascript:;">
<em>限量商品</em>
<i></i>
</a>
</div>
<!-- 二级菜单 end -->
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">
<em>BRAND</em>
... ... @@ -68,6 +99,8 @@
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">
<em>VIDEO</em>
... ... @@ -75,13 +108,33 @@
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">
<em>REGISTRATION</em>
<span>在线登记</span>
<i></i>
</a>
<!-- 二级菜单 start -->
<div class="second-menu">
<a href="javascript:;">
<em>参展商登记</em>
<i></i>
</a>
<a href="javascript:;">
<em>媒体登记</em>
<i></i>
</a>
<a href="javascript:;">
<em>赞助商登记</em>
<i></i>
</a>
</div>
<!-- 二级菜单 end -->
</li>
<!-- 单个菜单标签 end -->
<!-- 单个菜单标签 start -->
<li>
<a href="javascript:;">
<em>SHOW</em>
... ... @@ -89,6 +142,7 @@
<i></i>
</a>
</li>
<!-- 单个菜单标签 end -->
</ul>
</div>
<!-- yohood 导航 end -->
... ... @@ -96,39 +150,54 @@
<!-- 页眉 end -->
<!-- 页面主体 start -->
<div class="bd">
<div class="slide-main">
<div class="slide-box">
<div class="slide-wrap clearfix">
<div class="box">
<a href="javascript:;"><img src="http://img03.res.yoho.cn/blogimg/2014/09/23/13/0179e17640e29e62b52439902484a8fa50.gif?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80" alt="" /></a>
</div>
<div class="box">
<a href="javascript:;"><img src="http://img03.res.yoho.cn/blogimg/2014/09/23/13/01f0a56c52203da48881a64b336b41091b.jpg?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80" alt="" /></a>
<!-- 页面主体头部轮播广告栏 start -->
<div class="slide-main clearfix">
<div class="slide-bar-left"></div>
<div class="slide-box-warp">
<div class="slide-box">
<div class="slide-wrap clearfix">
<!-- 单个banner start -->
<div class="box">
<a href="javascript:;"><img src="../../res/images/yohood/banner.png" alt="" /></a>
</div>
<!-- 单个banner end -->
<!-- 单个banner start -->
<div class="box">
<a href="javascript:;"><img src="../../res/images/yohood/banner.png" alt="" /></a>
</div>
<!-- 单个banner end -->
<!-- 单个banner start -->
<div class="box">
<a href="javascript:;"><img src="../../res/images/yohood/banner.png" alt="" /></a>
</div>
<!-- 单个banner end -->
</div>
<div class="box">
<a href="javascript:;"><img src="http://img04.res.yoho.cn/blogimg/2014/11/17/11/025aadd704383ed18365f15a5e1cde9e5d.jpg?imageMogr2/thumbnail/!0968x0468r/crop/0968x0468/strip/quality/80" alt="" /></a>
</div>
<div class="slide-navigator">
<div class="dib clearfix">
<a href="javascript:;" class="on"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</div>
<div class="slide-navigator">
<div class="dib clearfix">
<a href="javascript:;" class="on"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<div class="slide-control">
<a class="slide-prev iconfont" href="javascript:void(0);">&#xe601;</a>
<a class="slide-next iconfont" href="javascript:void(0);">&#xe603;</a>
</div>
</div>
<div class="slide-control">
<a class="slide-prev iconfont" href="javascript:void(0);">&#xe601;</a>
<a class="slide-next iconfont" href="javascript:void(0);">&#xe603;</a>
</div>
<div class="slide-bar-right"></div>
</div>
<!-- 页面主体头部轮播广告栏 end -->
<!-- 页面资讯内容 start -->
<div class="content-wrap clearfix">
<div class="fluid-list">
<div class="fluid-list-inner main-layout clearfix">
<!-- 资讯碎片瀑布流 start -->
<div id="content" class="fluid-list-inner main-layout clearfix">
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
<img src="../../res/images/yohood/center-1-1.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -142,15 +211,17 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img02.res.yoho.cn/blogimg/2014/10/23/17/020aba6cb71b6620e4e8dd50658a1daf03.jpg" alt="">
<img src="../../res/images/yohood/center-1-2.png" alt="">
</a>
<span class="play-icon"></span>
</div>
<div class="item-info">
<a class="fluid-tag item-tag activity-intro" href="javascript:;">活动介绍</a>
<a class="fluid-tag item-tag brand-info" href="javascript:;">活动介绍</a>
<span class="item-time">November 11, 2016</span>
</div>
<div class="content">
... ... @@ -160,10 +231,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/015a858eda76bac64d84a0dbcea87dbd3a.gif" alt="">
<img src="../../res/images/yohood/center-1-3.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -177,10 +250,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img02.res.yoho.cn/blogimg/2014/10/17/14/02e26b4e08c06766b619b3bf40e31cfc14.jpg" alt="">
<img src="../../res/images/yohood/center-2-1.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -194,10 +269,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
<img src="../../res/images/yohood/center-2-2.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -211,10 +288,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img02.res.yoho.cn/blogimg/2014/10/23/17/020aba6cb71b6620e4e8dd50658a1daf03.jpg" alt="">
<img src="../../res/images/yohood/center-2-3.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -228,10 +307,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/015a858eda76bac64d84a0dbcea87dbd3a.gif" alt="">
<img src="../../res/images/yohood/center-3-1.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -245,10 +326,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img02.res.yoho.cn/blogimg/2014/10/17/14/02e26b4e08c06766b619b3bf40e31cfc14.jpg" alt="">
<img src="../../res/images/yohood/center-3-2.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -262,10 +345,12 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
<!-- 单个资讯碎片 start -->
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/01a9b77ff892507e57a4e334634598bad0.gif" alt="">
<img src="../../res/images/yohood/center-3-3.png" alt="">
</a>
</div>
<div class="item-info">
... ... @@ -279,58 +364,10 @@
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img02.res.yoho.cn/blogimg/2014/10/23/17/020aba6cb71b6620e4e8dd50658a1daf03.jpg" alt="">
</a>
</div>
<div class="item-info">
<a class="fluid-tag item-tag activity-intro" href="javascript:;">活动介绍</a>
<span class="item-time">November 11, 2016</span>
</div>
<div class="content">
<h2 class="volupia">
<a href="/news/detail/id/169">test test test test test test test test </a>
</h2>
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img01.res.yoho.cn/blogimg/2014/10/22/17/015a858eda76bac64d84a0dbcea87dbd3a.gif" alt="">
</a>
</div>
<div class="item-info">
<a class="fluid-tag item-tag spotlight-activity" href="javascript:;">亮点活动</a>
<span class="item-time">November 11, 2016</span>
</div>
<div class="content">
<h2 class="volupia">
<a href="/news/detail/id/169">test test test test test test test test </a>
</h2>
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<div class="fluid-item layout-item tiled">
<div class="image-box">
<a href="javascript:;">
<img src="http://img02.res.yoho.cn/blogimg/2014/10/17/14/02e26b4e08c06766b619b3bf40e31cfc14.jpg" alt="">
</a>
</div>
<div class="item-info">
<a class="fluid-tag item-tag limited-edition" href="javascript:;">限量商品</a>
<span class="item-time">November 11, 2016</span>
</div>
<div class="content">
<h2 class="volupia">
<a href="/news/detail/id/169">test test test test test test test test </a>
</h2>
<p class="text-content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
<!-- 单个资讯碎片 end -->
</div>
<!-- 资讯碎片瀑布流 end -->
<!-- 分页 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>
... ... @@ -342,8 +379,10 @@
<a href="http://www.yohood.cn/default/index/page/2" class="link2" p="2">>></a>
</div>
</div>
<!-- 分页 end -->
</div>
</div>
<!-- 页面资讯内容 end -->
<!-- 合作商等信息滑动条 start -->
<div class="cooperation clearfix">
<div class="cooperation-slide-warp">
... ... @@ -464,20 +503,22 @@
<!-- 合作商等信息滑动条 end -->
</div>
<!-- 页面主体 end -->
<!-- <div id="right_banner" style="display:none;" num="3">
<div class="fluid-item layout-item tiled">
<div class="image-box" style="padding-bottom: 30px;">
<a href="http://www.baidu.com" target="_blank" style="height:411px;width:308px;overflow:hidden;">
<img disopen="1" src="http://img02.res.yoho.cn/blogimg/2015/06/08/14/026c31deccfe7da5bc41ff716cc0fe086f.jpg" style="height:411px;width:308px;">
<!-- 资讯内容右侧固定banner start -->
<div id="right_banner_warp" class="right-banner-warp" num="2">
<div class="right-banner fluid-item layout-item tiled">
<div class="image-box">
<a href="http://www.baidu.com" target="_blank">
<img disopen="1" src="http://img02.res.yoho.cn/blogimg/2015/06/08/14/026c31deccfe7da5bc41ff716cc0fe086f.jpg">
</a>
</div>
<div class="image-box" style="padding-bottom: 30px;">
<a href="http://www.sina.com" target="_blank" style="height:462px;width:308px;overflow:hidden;">
<img disopen="1" src="http://img02.res.yoho.cn/blogimg/2015/06/08/14/0235c5157911a0a2a6fe094fcad2697ef4.jpg" style="height:462px;width:308px;">
<div class="image-box">
<a href="http://www.sina.com" target="_blank">
<img disopen="1" src="http://img02.res.yoho.cn/blogimg/2015/06/08/14/0235c5157911a0a2a6fe094fcad2697ef4.jpg">
</a>
</div>
</div>
</div> -->
</div>
<!-- 资讯内容右侧固定banner end -->
<div class="ft">
<p class="copyright">
CopyRight © 2007-2016 南京新与力文化传播有限公司苏ICP备09011225号-11
... ...
define('channel', function(require, exports) {
var swipe = require("plugins/swipe"),
swiper = require("plugins/idangerous.swiper"),
$ = require("jquery"),
freetile = require("lib/ui/jquery.freetile"),
share = require('plugins/share');
require("plugins/pagination");
require("plugins/imgZoom");
require("plugins/slider");
require("lib/jquery.validate");
function setLayout() {
$('.fluid-list-inner').freetile({
animate: false,
elementDelay: 0
});
};
function getTopProduct(gender) {
$.ajax({
type: "post",
url: '/default/getTopProduct',
data: {
gender: gender
},
dataType: "json",
success: function(data) {
if (data.code == 200) {
var html = '';
var pos = 1;
var number_class = '';
var number = '';
$.each(data.data, function(key, val) {
if (pos == 1) {
number_class = 'number_1';
number = '';
} else {
number = pos;
number_class = 'number_2';
}
html += '<li><div class="goods-image">' +
'<img src="' + val.product_img + '" alt=""/>' +
'<span class="' + number_class + '">' + number + '</span></div>' +
'<h3><a target="_blank" href="' + val.product_url + '">' + val.product_name + '</a></h3><p>人气: ' + val.sale_sum + '</p></li>';
pos++;
});
$(".show-goods-list").html('<ul>' + html + '</ul>');
}
}
});
};
exports.common = function() {
var goodsSwiper,
limitedPrev,
limitedNext,
swiperLen,
shareUrl,
shareCover,
detailTitle,
detailSubtitle;
// 弹窗关闭
$(document).click(function () {
$('.dialog-w').hide();
});
$('.dia-content').click(function (e) {
e.stopPropagation();
});
//导航动画效果
$('.nav').on('click', 'li', function() {
$(this).addClass('current');
});
if (navigator.userAgent.indexOf('iPad') === -1) {
$('.nav').on('mouseover', 'li', function() {
if (!$(this).hasClass('current')) {
$(this).addClass('animate')
}
}).on('mouseout', 'li', function() {
$('.nav').find('li').removeClass('animate');
});
}
//大banner滑动
swipe.init({
slideBox: '.slide-box',
prev: '.slide-prev',
next: '.slide-next',
auto: 3000,
continuous: true,
callback: function(index) {
if (index >= $('.dib a').size()) {
index = index - $('.dib a').size();
}
$('.dib a').removeClass('on').eq(index).addClass('on');
}
});
//限量商品滑动
limitedPrev = $('.limited-slide-prev');
limitedNext = $('.limited-slide-next');
swiperLen = $('.limited-slide-box').find('.box').size();
goodsSwiper = swipe.init({
slideBox: '.limited-slide-box',
prev: '.limited-slide-prev',
next: '.limited-slide-next',
auto: false,
callback: function(index, element) {
limitedPrev.removeClass('disable');
limitedNext.removeClass('disable');
console.log(index);
console.log(swiperLen);
if (index === swiperLen - 1) {
limitedNext.addClass('disable');
};
if (index === 0) {
limitedPrev.addClass('disable');
};
}
});
//tab
$('.content-tab').on('click', 'li', function() {
var nowIndex = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.content-main').hide().eq(nowIndex).show();
});
//回到顶部
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".return-top").fadeIn(500);
} else {
$(".return-top").fadeOut(500);
}
});
$(".return-top").click(function() {
$('body, html').animate({
scrollTop: 0
}, 500);
return false;
});
//使用瀑布流布局
setLayout();
if ($('.share').size() > 0) {
//微信分享鼠标事件
$('.yohoo-share-button-wx').on('mouseover', function() {
$('.wx-qrcode-dialog').show();
}).on('mouseout', function() {
$('.wx-qrcode-dialog').hide();
});
shareUrl = $(".share").attr("data-link");
shareCover = $(".share").attr("cover-url");
detailTitle = $('.detail-title').find('h2');
detailSubtitle = $('.detail-title').find('h3');
//分享
share.init({
shareUrl: shareUrl,
img: shareCover,
sinaText: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text() + '@YOHO潮流志',
fbTextFunction: function() {
return {
des: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
name: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
caption: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
url: location.href
}
},
tweetText: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
qqText: '【YOHOOD 2015】' + detailTitle.text() + ' ' + detailSubtitle.text() + '#YOHOOD 2015'
});
}
// 表单验证
if ($('#index-form').length > 0) {
$('#index-form').validate({
focusInvalid: false,
onkeyup: false,
rules: {
indexName: {
required: true
}
},
messages: {
indexName: {
required: '必填'
}
},
submitHandler: function(form){
form.submit();
}
});
}
};
//yohood展会页面
exports.exhibition = function() {
swipe.init({
slideBox: '.slide-box-exhibition',
prev: '.slide-prev-exhibition',
next: '.slide-next-exhibition',
pagination: '.dib a',
activeClass: 'on',
auto: 3000,
continuous: true
});
};
//首页
exports.index = function() {
var sortPos = 0;
var productGenders = [];
var currentGenderPos = 0;
var productListNames = [];
var cooperateSwiper,
cooperatePrev,
cooperateNext,
swiperLen,
changeCooperationClass;
if ($(".show-goods").size() > 0) {
productGenders = $(".show-goods").attr("product_genders").split(',');
currentGenderPos = $(".show-goods").attr("current_gender_pos");
productListNames = $(".show-goods").attr("product_list_names").split(',');
getTopProduct(productGenders[currentGenderPos]);
}
changeSlidesPerView = function(swiper) {
// var activeIndex = swiper.activeIndex,
// slides = swiper.slides,
// nextSlide = slide[activeIndex + 1];
// if ("big-size".test(nextSlide.calssName)) {
// swiper.params
// }
}
cooperateSwiper = new swiper('.cooperation-slide-box', {
wrapperClass: 'slide-wrap',
loop: true,
slideClass: 'box',
slidesPerView: 'auto',
// loopedSlides: 4,
onSlideChangeStart: function() {
var swiperLen = $('.cooperation-slide-box').find('.box').size();
// $('.cooperation-slide-prev,.cooperation-slide-next').removeClass('disable');
// if (cooperateSwiper.activeIndex === swiperLen - 1) {
// $('.cooperation-slide-next').addClass('disable');
// } else if (cooperateSwiper.activeIndex === 0) {
// $('.cooperation-slide-prev').addClass('disable');
// }
}
});
$('.cooperation-slide-prev').on('click', function(e) {
e.preventDefault();
changeSlidesPerView(cooperateSwiper);
cooperateSwiper.swipePrev();
});
$('.cooperation-slide-next').on('click', function(e) {
e.preventDefault();
changeSlidesPerView(cooperateSwiper);
cooperateSwiper.swipeNext();
});
$(".goods_prev, .goods_next").bind("click", function() {
currentGenderPos = parseInt($(".show-goods").attr("current_gender_pos"));
if ($(this).attr("class") == 'goods_prev') {
genderPos = parseInt(currentGenderPos - 1 >= 0 ? currentGenderPos - 1 : 0);
} else {
genderPos = parseInt(currentGenderPos + 1 < productGenders.length ? currentGenderPos + 1 : currentGenderPos);
}
if (genderPos != currentGenderPos) {
$(".show-goods").attr("current_gender_pos", genderPos);
getTopProduct(productGenders[genderPos]);
$(".show-goods").find("span").remove();
$(".show-goods").find("h2").prepend("<span>" + productListNames[genderPos] + "</span>");
}
});
};
//品牌
exports.brand = function() {
$('.brand-list').on('click', 'li', function() {
if ($(this).find('.brand-introduction').size() > 0) {
$(this).find('.brand-introduction').show();
$('.overlay').show();
}
});
$('.overlay').on('click', function() {
$(this).hide();
$('.brand-introduction').hide();
});
};
//资讯
exports.news = function() {
setLayout();
};
//detail页面
exports.detail = function() {
var timer,
nowIndex,
detailSwiper;
var relatedTop,
relatedPost,
relatedH,
maxH;
//详情页图片滚动
if ($('.detail-slide').size() > 0) {
//slide大图上的左右箭头显示
$('.slide-shadow').on('mouseover', 'a', function() {
if ($(this).hasClass('slide-shadow-prev')) {
$('.slide-big-ctrl-prev').show();
} else {
$('.slide-big-ctrl-next').show();
}
}).on('mouseout', 'a', function() {
$('.slide-big-ctrl-prev, .slide-big-ctrl-next').hide();
});
$('.detail-slide-body').on('mouseout', function() {
$('.slide-big-ctrl-prev, .slide-big-ctrl-next').hide();
});
$('.detail-slide-big-ctrl').on('mouseenter', 'a', function() {
$(this).show();
});
detailSwiper = new swiper('.detail-slide-body', {
wrapperClass: 'detail-slide-piclist',
slideClass: 'box',
loop: true,
slidesPerView: 'auto',
slideElement: 'li'
});
$('.slide-big-ctrl-prev').bind('click', function(e) {
e.preventDefault();
detailSwiper.swipePrev();
});
$('.slide-big-ctrl-next').bind('click', function(e) {
e.preventDefault();
detailSwiper.swipeNext();
});
$('.detail-slide-ctrl-tabs').slider();
$('.detail-slide-big-ctrl').on('click', 'a', function() {
$('.detail-slide-ctrl-tabs').slider('slideTo', detailSwiper.activeLoopIndex);
});
$('.detail-slide-ctrl-tabs').on('click', 'li', function() {
detailSwiper.swipeTo($(this).index());
});
};
//侧栏推荐切换
clearInterval(timer);
function postSwitch() {
$('.side-related-tab').find('a').each(function(i) {
if ($(this).hasClass('current')) {
$(this).removeClass('current');
} else {
$(this).addClass('current');
$('.side-related-list').hide().eq(i).show();
}
});
}
timer = setInterval(function() {
postSwitch();
}, 5000);
$('.side-related-post').on('mouseenter', function() {
clearInterval(timer);
}).on('mouseleave', function() {
timer = setInterval(function() {
postSwitch();
}, 5000);
})
$('.side-related-tab').on('click', 'a', function() {
nowIndex = $(this).index();
if ($(this).hasClass('current')) return;
$(this).addClass('current').siblings().removeClass('current');
$('.side-related-list').hide().eq(nowIndex).show();
});
//右侧相关文章定位
relatedPost = $('.side-related-post');
relatedTop = relatedPost.offset().top;
relatedH = relatedPost.outerHeight();
maxH = $('.limited-goods').offset().top;
$(window).on('scroll', function() {
if ($('.detail-body').outerHeight() > $('.detail-side').outerHeight() && navigator.userAgent.indexOf('iPad') === -1) {
relatedH = relatedPost.outerHeight();
maxH = $('.limited-goods').offset().top;
if ($(this).scrollTop() >= relatedTop) {
relatedPost.addClass('fix');
if (relatedPost.offset().top + relatedH >= maxH && relatedPost.hasClass('fix')) {
relatedPost.css({
'position': 'absolute',
'top': maxH - relatedH - 10
})
}
if ($(this).scrollTop() <= maxH - relatedH) {
relatedPost.css({
'position': 'fixed',
'top': 0
});
}
} else {
relatedPost.removeClass('fix').removeAttr('style');
}
}
});
//分享按钮位置
var shareOffsetTop = $(".share").offset().top;
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
maxH = $('.limited-goods').offset().top;
if (shareOffsetTop - scrollTop <= 0) {
$(".share").css({
"position": "fixed",
"top": 10
});
} else {
$(".share").css({
"position": "absolute",
"top": shareOffsetTop
});
}
console.log($(".share").offset().top + $('.share').outerHeight());
console.log($('.limited-goods').offset().top);
if($(".share").offset().top + $('.share').outerHeight() > maxH){;
$(".share").css({
'position': 'absolute',
'top': maxH - $('.share').outerHeight() - 10
});
}
});
};
exports.siteActivity = function() {
$('.site-activity-content').find('.layout-item').each(function() {
$(this).imgZoom({
imgTag: 'pic-tip'
});
});
//活动日期定位
var tabTop = $('.site-activity-tab').offset().top - 10,
oTab = $('.site-activity-tab'),
mainBodyOffsetTop,
mainBodyHeight,
tabOffsetHeightTop,
distance,
eleTop,
tabPositionTop;
$(window).on('scroll', function() {
if (tabTop <= $(this).scrollTop()) {
$('.site-activity-tab').css({
"position": "fixed",
"top": "0",
"left": "50%",
"width": "134px",
"marginLeft": "356px",
"marginTop": "10px"
})
mainBodyOffsetTop = $('.bd').offset().top;
mainBodyHeight = $('.bd').outerHeight();
tabOffsetHeightTop = oTab.offset().top + oTab.outerHeight();
distance = mainBodyHeight + mainBodyOffsetTop;
eleTop = distance - oTab.outerHeight();
tabPositionTop = 10;
if (tabOffsetHeightTop >= distance) {
oTab.css({
'position': 'absolute',
'top': eleTop - tabPositionTop - 10
});
}
if (oTab.offset().top - $(window).scrollTop() > tabPositionTop) {
oTab.css({
'position': 'fixed',
'top': tabPositionTop
});
}
} else {
$('.site-activity-tab').removeAttr('style');
};
});
};
//show页面
exports.show = function() {
$(".look_big_image").bind("click", function(event) {
var divName = '#mask';
var sourceImage = $(this).attr("source");
var imageWidth = parseInt($(divName).children().attr("width"));
var imageHeight = parseInt($(divName).children().attr("height"));
$(divName).html('<img src="' + sourceImage + '" width="' + imageWidth + '" height="' + imageHeight + '" />').attr("current_class", $(this).parent().attr("class"));
var top = ($(window).height() - imageHeight) / 2;
var left = ($(window).width() - imageWidth) / 2;
var scrollTop = 0; //$(document).scrollTop();
var scrollLeft = 0; //$(document).scrollLeft();
$(divName).css({
position: 'absolute',
'top': top + scrollTop,
left: left + scrollLeft
});
$(".model").show();
if (left - 75 > 10) {
$(".image-prev").css("left", left - 75);
$(".image-next").css("right", left - 75);
}
$.each($(this).parents("span").children("span"), function(index, dom) {
var style_top = parseInt($(dom).attr("x")) / 10000 * imageHeight;
var style_left = parseInt($(dom).attr("y")) / 10000 * imageWidth;
$(divName).append('<a class="pic-tip" style="left:' + style_left + 'px;top:' + style_top + 'px;">' + $(dom).attr("label") + '</a>')
});
event.stopPropagation();
});
$(".ui-dialog-close").bind("click", function(event) {
$(".model").hide();
event.stopPropagation();
});
$('.show-wrap').find('.layout-item').each(function() {
$(this).imgZoom({
imgTag: 'pic-tip'
});
});
}
});
\ No newline at end of file
var swipe = require("plugins/swipe"),
swiper = require("plugins/idangerous.swiper"),
$ = require("jquery"),
freetile = require("lib/ui/jquery.freetile"),
share = require('plugins/share');
require("plugins/pagination");
require("plugins/imgZoom");
require("plugins/slider");
require("lib/jquery.validate");
function setLayout() {
$('.fluid-list-inner').freetile({
animate: false,
elementDelay: 0
});
};
function getTopProduct(gender) {
$.ajax({
type: "post",
url: '/default/getTopProduct',
data: {
gender: gender
},
dataType: "json",
success: function(data) {
if (data.code == 200) {
var html = '';
var pos = 1;
var number_class = '';
var number = '';
$.each(data.data, function(key, val) {
if (pos == 1) {
number_class = 'number_1';
number = '';
} else {
number = pos;
number_class = 'number_2';
}
html += '<li><div class="goods-image">' +
'<img src="' + val.product_img + '" alt=""/>' +
'<span class="' + number_class + '">' + number + '</span></div>' +
'<h3><a target="_blank" href="' + val.product_url + '">' + val.product_name + '</a></h3><p>人气: ' + val.sale_sum + '</p></li>';
pos++;
});
$(".show-goods-list").html('<ul>' + html + '</ul>');
}
}
});
};
exports.common = function() {
var goodsSwiper,
limitedPrev,
limitedNext,
swiperLen,
shareUrl,
shareCover,
detailTitle,
detailSubtitle;
// 弹窗关闭
$(document).click(function() {
$('.dialog-w').hide();
});
$('.dia-content').click(function(e) {
e.stopPropagation();
});
//导航动画效果
$('.nav').on('click', 'li', function() {
$(this).addClass('current');
});
if (navigator.userAgent.indexOf('iPad') === -1) {
$('.nav').on('mouseenter', 'li', function() {
$(this).addClass('animate');
}).on('mouseleave', 'li', function() {
$('.nav').find('li').removeClass('animate');
});
}
//大banner滑动
swipe.init({
slideBox: '.slide-box',
prev: '.slide-prev',
next: '.slide-next',
auto: 3000,
continuous: true,
callback: function(index) {
if (index >= $('.dib a').size()) {
index = index - $('.dib a').size();
}
$('.dib a').removeClass('on').eq(index).addClass('on');
}
});
//限量商品滑动
limitedPrev = $('.limited-slide-prev');
limitedNext = $('.limited-slide-next');
swiperLen = $('.limited-slide-box').find('.box').size();
goodsSwiper = swipe.init({
slideBox: '.limited-slide-box',
prev: '.limited-slide-prev',
next: '.limited-slide-next',
auto: false,
callback: function(index, element) {
limitedPrev.removeClass('disable');
limitedNext.removeClass('disable');
console.log(index);
console.log(swiperLen);
if (index === swiperLen - 1) {
limitedNext.addClass('disable');
};
if (index === 0) {
limitedPrev.addClass('disable');
};
}
});
//tab
$('.content-tab').on('click', 'li', function() {
var nowIndex = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.content-main').hide().eq(nowIndex).show();
});
//回到顶部
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".return-top").fadeIn(500);
} else {
$(".return-top").fadeOut(500);
}
});
$(".return-top").click(function() {
$('body, html').animate({
scrollTop: 0
}, 500);
return false;
});
//使用瀑布流布局
setLayout();
if ($('.share').size() > 0) {
//微信分享鼠标事件
$('.yohoo-share-button-wx').on('mouseover', function() {
$('.wx-qrcode-dialog').show();
}).on('mouseout', function() {
$('.wx-qrcode-dialog').hide();
});
shareUrl = $(".share").attr("data-link");
shareCover = $(".share").attr("cover-url");
detailTitle = $('.detail-title').find('h2');
detailSubtitle = $('.detail-title').find('h3');
//分享
share.init({
shareUrl: shareUrl,
img: shareCover,
sinaText: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text() + '@YOHO潮流志',
fbTextFunction: function() {
return {
des: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
name: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
caption: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
url: location.href
}
},
tweetText: '【YOHOOD 2015】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
qqText: '【YOHOOD 2015】' + detailTitle.text() + ' ' + detailSubtitle.text() + '#YOHOOD 2015'
});
}
// 表单验证
if ($('#index-form').length > 0) {
$('#index-form').validate({
focusInvalid: false,
onkeyup: false,
rules: {
indexName: {
required: true
}
},
messages: {
indexName: {
required: '必填'
}
},
submitHandler: function(form) {
form.submit();
}
});
}
};
//yohood展会页面
exports.exhibition = function() {
swipe.init({
slideBox: '.slide-box-exhibition',
prev: '.slide-prev-exhibition',
next: '.slide-next-exhibition',
pagination: '.dib a',
activeClass: 'on',
auto: 3000,
continuous: true
});
};
//首页
exports.index = function() {
var sortPos = 0;
var productGenders = [];
var currentGenderPos = 0;
var productListNames = [];
var cooperateSwiper,
cooperatePrev,
cooperateNext,
swiperLen,
changeCooperationClass;
var pageRightBanner = null;
pageRightBanner = function() {
var rightBanner = $("#right_banner_warp .right-banner")[0],
$banners = $(rightBanner).find(".image-box"),
len = $banners.length,
$pageContent = $("#content"),
$layoutItems = $pageContent.find(".layout-item"),
placeholderItems = "";
if (len <= 0) {
return;
}
if ($layoutItems.length < 2) {
placeholderItems = "<div class='fluid-item layout-item tiled'></div>";
placeholderItems += placeholderItems;
$pageContent.prepend($(placeholderItems));
$layoutItems = $pageContent.find(".layout-item");
}
$(rightBanner).insertAfter($layoutItems[1]);
//插入新元素、重新瀑布流布局
setLayout();
}
pageRightBanner();
if ($(".show-goods").size() > 0) {
productGenders = $(".show-goods").attr("product_genders").split(',');
currentGenderPos = $(".show-goods").attr("current_gender_pos");
productListNames = $(".show-goods").attr("product_list_names").split(',');
getTopProduct(productGenders[currentGenderPos]);
}
cooperateSwiper = new swiper('.cooperation-slide-box', {
wrapperClass: 'slide-wrap',
loop: true,
slideClass: 'box',
slidesPerView: 'auto',
loopedSlides: 4,
onSlideChangeStart: function() {
var swiperLen = $('.cooperation-slide-box').find('.box').size();
// $('.cooperation-slide-prev,.cooperation-slide-next').removeClass('disable');
// if (cooperateSwiper.activeIndex === swiperLen - 1) {
// $('.cooperation-slide-next').addClass('disable');
// } else if (cooperateSwiper.activeIndex === 0) {
// $('.cooperation-slide-prev').addClass('disable');
// }
}
});
/**
* 若下一个滑动块的下一个有"big-size" 类名 则滑动后只显示下一个滑动块
* @param {Swiper} swiper 滑动块对象
*/
({
init: function(swiper) {
}
}).init(cooperateSwiper);
function nextChagneSileSize(swiper) {
var activeIndex = swiper.activeIndex,
slides = swiper.slides,
activeSlide = slides[activeIndex],
nextSlide = slides[activeIndex + 1],
nextNextSlide = slides[activeIndex + 2];
if (/big\-size/.test(nextNextSlide.className)) {
nextSlide.style.width = "1180px";
}
activeSlide.style = null;
}
function prevChangeSlideSize(swiper) {
var activeIndex = swiper.activeIndex,
slides = swiper.slides,
activeSlide = slides[activeIndex],
prevSlide = slides[activeIndex - 1];
if (/big\-size/.test(activeSlide.className)) {
prevSlide.style.width = "1180px";
}
}
$('.cooperation-slide-prev').on('click', function(e) {
e.preventDefault();
prevChangeSlideSize(cooperateSwiper);
cooperateSwiper.swipePrev();
});
$('.cooperation-slide-next').on('click', function(e) {
e.preventDefault();
nextChagneSileSize(cooperateSwiper);
cooperateSwiper.swipeNext();
});
$(".goods_prev, .goods_next").bind("click", function() {
currentGenderPos = parseInt($(".show-goods").attr("current_gender_pos"));
if ($(this).attr("class") == 'goods_prev') {
genderPos = parseInt(currentGenderPos - 1 >= 0 ? currentGenderPos - 1 : 0);
} else {
genderPos = parseInt(currentGenderPos + 1 < productGenders.length ? currentGenderPos + 1 : currentGenderPos);
}
if (genderPos != currentGenderPos) {
$(".show-goods").attr("current_gender_pos", genderPos);
getTopProduct(productGenders[genderPos]);
$(".show-goods").find("span").remove();
$(".show-goods").find("h2").prepend("<span>" + productListNames[genderPos] + "</span>");
}
});
};
//品牌
exports.brand = function() {
$('.brand-list').on('click', 'li', function() {
if ($(this).find('.brand-introduction').size() > 0) {
$(this).find('.brand-introduction').show();
$('.overlay').show();
}
});
$('.overlay').on('click', function() {
$(this).hide();
$('.brand-introduction').hide();
});
};
//资讯
exports.news = function() {
setLayout();
};
//detail页面
exports.detail = function() {
var timer,
nowIndex,
detailSwiper;
var relatedTop,
relatedPost,
relatedH,
maxH;
//详情页图片滚动
if ($('.detail-slide').size() > 0) {
//slide大图上的左右箭头显示
$('.slide-shadow').on('mouseover', 'a', function() {
if ($(this).hasClass('slide-shadow-prev')) {
$('.slide-big-ctrl-prev').show();
} else {
$('.slide-big-ctrl-next').show();
}
}).on('mouseout', 'a', function() {
$('.slide-big-ctrl-prev, .slide-big-ctrl-next').hide();
});
$('.detail-slide-body').on('mouseout', function() {
$('.slide-big-ctrl-prev, .slide-big-ctrl-next').hide();
});
$('.detail-slide-big-ctrl').on('mouseenter', 'a', function() {
$(this).show();
});
detailSwiper = new swiper('.detail-slide-body', {
wrapperClass: 'detail-slide-piclist',
slideClass: 'box',
loop: true,
slidesPerView: 'auto',
slideElement: 'li'
});
$('.slide-big-ctrl-prev').bind('click', function(e) {
e.preventDefault();
detailSwiper.swipePrev();
});
$('.slide-big-ctrl-next').bind('click', function(e) {
e.preventDefault();
detailSwiper.swipeNext();
});
$('.detail-slide-ctrl-tabs').slider();
$('.detail-slide-big-ctrl').on('click', 'a', function() {
$('.detail-slide-ctrl-tabs').slider('slideTo', detailSwiper.activeLoopIndex);
});
$('.detail-slide-ctrl-tabs').on('click', 'li', function() {
detailSwiper.swipeTo($(this).index());
});
};
//侧栏推荐切换
clearInterval(timer);
function postSwitch() {
$('.side-related-tab').find('a').each(function(i) {
if ($(this).hasClass('current')) {
$(this).removeClass('current');
} else {
$(this).addClass('current');
$('.side-related-list').hide().eq(i).show();
}
});
}
timer = setInterval(function() {
postSwitch();
}, 5000);
$('.side-related-post').on('mouseenter', function() {
clearInterval(timer);
}).on('mouseleave', function() {
timer = setInterval(function() {
postSwitch();
}, 5000);
})
$('.side-related-tab').on('click', 'a', function() {
nowIndex = $(this).index();
if ($(this).hasClass('current')) return;
$(this).addClass('current').siblings().removeClass('current');
$('.side-related-list').hide().eq(nowIndex).show();
});
//右侧相关文章定位
relatedPost = $('.side-related-post');
relatedTop = relatedPost.offset().top;
relatedH = relatedPost.outerHeight();
maxH = $('.limited-goods').offset().top;
$(window).on('scroll', function() {
if ($('.detail-body').outerHeight() > $('.detail-side').outerHeight() && navigator.userAgent.indexOf('iPad') === -1) {
relatedH = relatedPost.outerHeight();
maxH = $('.limited-goods').offset().top;
if ($(this).scrollTop() >= relatedTop) {
relatedPost.addClass('fix');
if (relatedPost.offset().top + relatedH >= maxH && relatedPost.hasClass('fix')) {
relatedPost.css({
'position': 'absolute',
'top': maxH - relatedH - 10
})
}
if ($(this).scrollTop() <= maxH - relatedH) {
relatedPost.css({
'position': 'fixed',
'top': 0
});
}
} else {
relatedPost.removeClass('fix').removeAttr('style');
}
}
});
//分享按钮位置
var shareOffsetTop = $(".share").offset().top;
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
maxH = $('.limited-goods').offset().top;
if (shareOffsetTop - scrollTop <= 0) {
$(".share").css({
"position": "fixed",
"top": 10
});
} else {
$(".share").css({
"position": "absolute",
"top": shareOffsetTop
});
}
console.log($(".share").offset().top + $('.share').outerHeight());
console.log($('.limited-goods').offset().top);
if ($(".share").offset().top + $('.share').outerHeight() > maxH) {;
$(".share").css({
'position': 'absolute',
'top': maxH - $('.share').outerHeight() - 10
});
}
});
};
exports.siteActivity = function() {
$('.site-activity-content').find('.layout-item').each(function() {
$(this).imgZoom({
imgTag: 'pic-tip'
});
});
//活动日期定位
var tabTop = $('.site-activity-tab').offset().top - 10,
oTab = $('.site-activity-tab'),
mainBodyOffsetTop,
mainBodyHeight,
tabOffsetHeightTop,
distance,
eleTop,
tabPositionTop;
$(window).on('scroll', function() {
if (tabTop <= $(this).scrollTop()) {
$('.site-activity-tab').css({
"position": "fixed",
"top": "0",
"left": "50%",
"width": "134px",
"marginLeft": "356px",
"marginTop": "10px"
})
mainBodyOffsetTop = $('.bd').offset().top;
mainBodyHeight = $('.bd').outerHeight();
tabOffsetHeightTop = oTab.offset().top + oTab.outerHeight();
distance = mainBodyHeight + mainBodyOffsetTop;
eleTop = distance - oTab.outerHeight();
tabPositionTop = 10;
if (tabOffsetHeightTop >= distance) {
oTab.css({
'position': 'absolute',
'top': eleTop - tabPositionTop - 10
});
}
if (oTab.offset().top - $(window).scrollTop() > tabPositionTop) {
oTab.css({
'position': 'fixed',
'top': tabPositionTop
});
}
} else {
$('.site-activity-tab').removeAttr('style');
};
});
};
//show页面
exports.show = function() {
$(".look_big_image").bind("click", function(event) {
var divName = '#mask';
var sourceImage = $(this).attr("source");
var imageWidth = parseInt($(divName).children().attr("width"));
var imageHeight = parseInt($(divName).children().attr("height"));
$(divName).html('<img src="' + sourceImage + '" width="' + imageWidth + '" height="' + imageHeight + '" />').attr("current_class", $(this).parent().attr("class"));
var top = ($(window).height() - imageHeight) / 2;
var left = ($(window).width() - imageWidth) / 2;
var scrollTop = 0; //$(document).scrollTop();
var scrollLeft = 0; //$(document).scrollLeft();
$(divName).css({
position: 'absolute',
'top': top + scrollTop,
left: left + scrollLeft
});
$(".model").show();
if (left - 75 > 10) {
$(".image-prev").css("left", left - 75);
$(".image-next").css("right", left - 75);
}
$.each($(this).parents("span").children("span"), function(index, dom) {
var style_top = parseInt($(dom).attr("x")) / 10000 * imageHeight;
var style_left = parseInt($(dom).attr("y")) / 10000 * imageWidth;
$(divName).append('<a class="pic-tip" style="left:' + style_left + 'px;top:' + style_top + 'px;">' + $(dom).attr("label") + '</a>')
});
event.stopPropagation();
});
$(".ui-dialog-close").bind("click", function(event) {
$(".model").hide();
event.stopPropagation();
});
$('.show-wrap').find('.layout-item').each(function() {
$(this).imgZoom({
imgTag: 'pic-tip'
});
});
}
});
... ...
$pageMainWidth: 1180px;
.yoho-nav {
width: 100%;
min-width: $pageMainWidth;
height: 34px;
line-height: 34px;
background: #f4f4f4;
... ... @@ -57,21 +58,20 @@ $pageMainWidth: 1180px;
.header {
width: 100%;
padding: 14px 0 0 0;
min-width: $pageMainWidth;
}
.logo {
margin: 0 0 21px 0;
height: 88px;
background: url("../images/yohood/logo.png") no-repeat center center;
img {
width: 100%;
}
}
@keyframes rainbow {
@mixin rainbow() {
90% {
border-radius: 50%;
border-radius: 10%/50%;
width: $pageMainWidth / 6;
height: 144px;
margin: -50px 0 0 -16px;
height: 44px;
}
100% {
border-radius: 0;
... ... @@ -83,78 +83,29 @@ $pageMainWidth: 1180px;
}
}
@keyframes rainbow {
@include rainbow;
}
@-webkit-keyframes rainbow {
90% {
border-radius: 50%;
width: $pageMainWidth / 6;
height: 144px;
margin: -50px 0 0 -16px;
}
100% {
border-radius: 0;
width: $pageMainWidth / 6;
height: 44px;
top: 0;
left: 0;
margin: 0;
}
@include rainbow;
}
@-moz-keyframes rainbow {
90% {
border-radius: 50%;
width: $pageMainWidth / 6;
height: 144px;
margin: -50px 0 0 -16px;
}
100% {
border-radius: 0;
width: $pageMainWidth / 6;
height: 44px;
top: 0;
left: 0;
margin: 0;
}
@include rainbow;
}
@-ms-keyframes rainbow {
90% {
border-radius: 50%;
width: $pageMainWidth / 6;
height: 144px;
margin: -50px 0 0 -16px;
}
100% {
border-radius: 0;
width: $pageMainWidth / 6;
height: 44px;
top: 0;
left: 0;
margin: 0;
}
@include rainbow;
}
@keyframes rainbow {
90% {
border-radius: 50%;
width: $pageMainWidth / 6;
height: 144px;
margin: -50px 0 0 -16px;
}
100% {
border-radius: 0;
width: $pageMainWidth / 6;
height: 44px;
top: 0;
left: 0;
margin: 0;
}
@include rainbow;
}
.nav {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
ul {
width: $pageMainWidth;
$navItemWidth: $pageMainWidth / 6;
... ... @@ -197,10 +148,7 @@ $pageMainWidth: 1180px;
background: #000;
z-index: 9;
}
}
li.animate,
li.current {
span {
.sub-menu {
display: none;
}
}
... ... @@ -210,14 +158,32 @@ $pageMainWidth: 1180px;
background: #000;
text-align: center;
}
span {
display: none;
}
i {
display: none;
}
.second-menu {
display: none;
}
}
li.animate em {
display: block;
text-align: center;
margin: 0 auto;
li.animate {
em {
display: block;
text-align: center;
margin: 0 auto;
}
span {
display: none;
}
.second-menu {
display: block;
em {
color: #000;
background: #fff;
}
}
}
li.animate i {
display: block;
... ... @@ -238,9 +204,35 @@ $pageMainWidth: 1180px;
}
.slide-main {
width: $pageMainWidth;
margin: 0 auto;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
min-width: $pageMainWidth;
.slide-box-warp,
.slide-bar-left,
.slide-bar-right {
display: inline-block;
float: left;
}
.slide-box-warp {
width: $pageMainWidth;
height: 100%;
margin: 0 auto;
position: relative;
}
.slide-bar-left {
width: calc((100% - #{$pageMainWidth}) / 2);
height: 100%;
background: url("../images/yohood/slide-bar-left.png") no-repeat center center;
background-size: cover;
}
.slide-bar-right {
width: calc((100% - #{$pageMainWidth}) / 2);
height: 100%;
background: url("../images/yohood/slide-bar-right.png") no-repeat center center;
background-size: cover;
}
}
.slide-box {
... ... @@ -248,7 +240,6 @@ $pageMainWidth: 1180px;
margin: 0;
overflow: hidden;
.slide-wrap {
height: 468px;
overflow: hidden;
position: relative;
.box {
... ... @@ -720,6 +711,7 @@ $pageMainWidth: 1180px;
.ft {
margin: 30px 0;
width: 100%;
min-width: $pageMainWidth;
.copyright {
color: #444;
width: $pageMainWidth;
... ... @@ -727,4 +719,3 @@ $pageMainWidth: 1180px;
margin: 0 auto;
}
}
... ...
.detail-wrap {
width: 1180px;
margin: 0 auto;
}
.detail-title {
margin: 48px 0 28px;
width: 644px;
font-size: 28px;
h2, h3 {
h2 {
line-height: 40px;
font-weight: bold;
}
.time {
.item-info {
$itemInfoHeight: 20px;
height: $itemInfoHeight;
line-height: $itemInfoHeight;
margin: 26px 0 0;
font-size: 12px;
color: #b2b2b2;
line-height: 24px;
.item-tag {
display: inline-block;
width: auto;
height: auto;
padding: 0 11px;
background: #000;
line-height: $itemInfoHeight;
color: #fff;
}
.brand-info {
background: #1a72ff;
}
.activity-intro {
background-color: #ffc000;
}
.spotlight-activity {
background-color: #ff365c;
}
.limited-edition {
background-color: #21dbcc;
}
.item-time {
margin: 0 0 0 20px;
color: #b2b2b2;
font-size: 12px;
background: #fff;
}
}
}
... ... @@ -95,7 +129,8 @@
height: 65px;
overflow: hidden;
position: relative;
.detail-slide-ctrl-prev, .detail-slide-ctrl-next {
.detail-slide-ctrl-prev,
.detail-slide-ctrl-next {
display: none;
position: absolute;
top: 15px;
... ... @@ -107,7 +142,7 @@
text-align: center;
color: #000;
background: #fff\9;
filter: alpha(opacity = 90);
filter: alpha(opacity=90);
}
.detail-slide-ctrl-prev {
left: 0;
... ... @@ -134,12 +169,14 @@
li:first-child {
padding: 0;
}
li:first-child.current, li:first-child.swiper-slide-active {
li:first-child.current,
li:first-child.swiper-slide-active {
.border {
left: 0px;
}
}
li.current, li.swiper-slide-active {
li.current,
li.swiper-slide-active {
.border {
position: absolute;
left: 7px;
... ... @@ -294,4 +331,4 @@
}
}
}
}
\ No newline at end of file
}
... ...
$pageMainWidth: 1180px;
.bd {
// width: 1180px;
margin: 0 auto;
min-width: $pageMainWidth;
}
.wrapper {
... ... @@ -9,26 +9,6 @@ $pageMainWidth: 1180px;
margin: 0 auto;
}
// .slide-main {
// width: 1180px;
// margin: 0 auto;
// position: relative;
// }
// .slide-control {
// a {
// position: absolute;
// top: 50%;
// margin: -28px 0 0 0;
// font-size: 48px;
// color: #000;
// }
// .slide-prev {
// left: -70px;
// }
// .slide-next {
// right: -70px;
// }
// }
.content-wrap {
width: 1180px;
margin: 50px auto 30px;
... ... @@ -112,4 +92,16 @@ $pageMainWidth: 1180px;
width: $pageMainWidth - $boxInterval;
}
}
}
.right-banner-warp {
display: none;
}
.right-banner.layout-item {
height: 420px * 2 + 26px;
.image-box {
height: 420px;
margin-bottom: 26px;
}
}
\ No newline at end of file
... ...