女生首页html css js

@@ -37,6 +37,9 @@
         base: 'http://localhost:8000/'
     })
 </script>
+<script>
+    seajs.use('public/js/public');
+</script>
 {{# module}}
     <script type="text/javascript">
         seajs.use('public/js/{{../module}}');

@@ -13,11 +13,9 @@
         "main": "index.js",
         "dependencies": {
             "jquery": "1.8.3",
-            "mlellipsis": "0.0.6",
             "lazyload": "1.9.6",
-            "iscroll": "5.1.2",
             "mustache": "2.0.0",
-            "underscore": "1.6.0"
+            "yoho-idangerous.swiper": "0.0.3"
         },
         "devDependencies": {
             "expect.js": "0.3.1"

@@ -9,6 +9,7 @@ module.exports = {
         textCn: '男生',
         textEn: 'Boys',
         url: false,
+        current: true,
         subNav: {
             list: [{
                 textCn: '男生',

+/**
+ * 女首页数据结构
+ * @author: liuyue(yue.liu@yoho.cn)
+ * @date: 2015/7/13
+ */
+
+module.exports = {
+    sideNav: [{
+        textCn: '男生',
+        textEn: 'Boys',
+        url: false,
+        subNav: {
+            list: [{
+                textCn: '男生',
+                textEn: 'Boys',
+                img: '',
+                url: false
+            }, {
+                textCn: '首页',
+                img: 'http://res.yohoboys.com/res/new/boys/images/about/thirdbtn-sina.png',
+                url: ''
+            }, {
+                textCn: '新品到着',
+                img: '',
+                url: ''
+            }]
+        }
+    }, {
+        textCn: '女生',
+        textEn: 'Girls',
+        current: true,
+        url: false,
+        subNav: {
+            list: [{
+                textCn: '女生',
+                textEn: 'Girls',
+                img: '',
+                url: false
+            }, {
+                textCn: '首页',
+                img: '',
+                url: ''
+            }, {
+                textCn: '新品到着',
+                img: '',
+                url: ''
+            }, {
+                textCn: '上衣',
+                img: '',
+                url: ''
+            }, {
+                textCn: '鞋靴',
+                img: '',
+                url: ''
+            }, {
+                textCn: '裤装',
+                img: '',
+                url: ''
+            }, {
+                textCn: '品牌一览',
+                img: '',
+                url: ''
+            }]
+        }
+    }, {
+        textCn: '潮童',
+        textEn: 'Kids'
+    }, {
+        textCn: '家居',
+        textEn: 'Life Style'
+    }],
+    bannerTop: {
+        list: [{
+            url: '',
+            img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
+        }, {
+            url: '',
+            img: 'http://img02.yohoboys.com/staticimg/2015/07/08/10/02096990afbb3c1f327dd7e180aee02604.jpg'
+        }, {
+            url: '',
+            img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg'
+        }]
+    },
+    hotCategory: {
+        img: 'http://img13.static.yhbimg.com/adpic/2015/05/07/15/020cfde7eb630474916655cc0e290c68e2.jpg?imageView/2/w/640/h/480',
+        list: [{
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: '打底衫',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }]
+    },
+    hotBrands: {
+        name: '热门品牌',
+        list: [{
+            textCn: 'Moussy',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: 'Moussy',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: 'Moussy',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: 'Moussy',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }, {
+            textCn: 'Moussy',
+            img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
+            url: ''
+        }]
+    },
+    bannerBottom: {
+        img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg',
+        url: ''
+    }
+}
\ No newline at end of file

+var $ = require('jquery'),
+    swiper = require('yoho-idangerous.swiper');
+
+var bannerSwiper,
+    hotBrandsSwiper;
+
+//热门品牌轮播
+hotBrandsSwiper = new swiper('.brands-swiper', {
+    grabCursor: true,
+    slidesPerView: 'auto',
+    wrapperClass: 'brands-list',
+    slideElement: 'li'
+});
\ No newline at end of file

+var $ = require('jquery'),
+    swiper = require('yoho-idangerous.swiper'),
+    bannerSwiper;
+
+//点击首页汉堡menu图标，滑出侧栏导航
+$('.nav-btn').on('click', function(event) {
+    if (!$(this).hasClass('menu-open')) {
+        $('.mobile-wrap').addClass('menu-open');
+        $('.overlay').addClass('show');
+        //设置boy高度，页面不能上下滑动
+        $('body').css({
+            height: $(window).height(),
+            overflow: 'hidden'
+        });
+    }
+    event.stopPropagation();
+});
+
+//点击页面主体，收起侧栏导航及二级导航
+$('.mobile-wrap').on('click', function() {
+    if ($(this).hasClass('menu-open')) {
+        $('.mobile-wrap').removeClass('menu-open');
+        $('.overlay').removeClass('show');
+        $('.sub-nav').removeClass('show');
+        $('body').css({
+            height: 'auto',
+            overflow: 'auto'
+        })
+    }
+});
+
+//点击一级导航，弹出二级导航
+$('.side-nav').on('click', 'li', function() {
+    if ($(this).find('.sub-nav').size() > 0) {
+        $('.sub-nav').removeClass('show');
+        $(this).find('.sub-nav').addClass('show');
+    }
+});
+
+//返回一级导航，收起二级导航
+$('.sub-nav').each(function() {
+    $(this).find('li').eq(0).on('click', function() {
+        $('.sub-nav').removeClass('show');
+        event.stopPropagation();
+    });
+});
+
+//头部banner轮播
+if ($('.banner-swiper').find('li').size() > 1) {
+    bannerSwiper = new swiper('.banner-swiper', {
+        loop: true,
+        autoplay: 5000,
+        autoplayDisableOnInteraction: false,
+        paginationClickable: true,
+        slideElement: 'li',
+        pagination: '.banner-top .pagination-inner'
+    });
+}
\ No newline at end of file

+.banner-bottom {
+    margin: (30rem / $pxConvertRem) 0 0;
+    height: 160rem / $pxConvertRem;
+    overflow: hidden;
+    img {
+        display: block;
+        width: 100%;
+    }
+}
\ No newline at end of file

-.banner-top{
+.banner-top {
+    position: relative;
+    .swiper-pagination {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 20rem / $pxConvertRem;
+        text-align: center;
+        .pagination-inner {
+            display: inline-block;
+            span {
+                display: inline-block;
+                width: 14rem / $pxConvertRem;
+                height: 14rem / $pxConvertRem;
+                background: #fff;
+                opacity: 0.5;
+                margin: 0 (9rem / $pxConvertRem);
+                border-radius: 50%;
+            }
+            span.swiper-active-switch {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.banner-swiper {
     height: 309rem / $pxConvertRem;
     overflow: hidden;
-    img{
-        width: 100%;
+    ul {
+        position: relative;
         height: 100%;
+        li {
+            float: left;
+            height: 100%;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
     }
 }
\ No newline at end of file

@@ -2,6 +2,8 @@
     height: 87rem / $pxConvertRem;
     line-height: 87rem / $pxConvertRem;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
+    background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
+    background-image: gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(1, #414141));
     position: relative;
     .iconfont {
         color: #fff; 
@@ -29,3 +31,6 @@
         bottom: 0;
     }
 }
+.girls-wrap .header{
+    background: #fd307f;
+}

@@ -40,7 +40,7 @@
             font-weight: bold;
         }
     }
-    li:hover{
+    li.current{
         .nav-point{
             color: #444;
         }
@@ -59,11 +59,14 @@
     transition: transform .3s ease-out;
     li{
         a{
+            display: flex;
+            display: -webkit-flex;
             margin: 0 30rem / $pxConvertRem 0 112rem / $pxConvertRem;
             padding-left: 0;
             border-bottom: 1px solid #e0e0e0;
+            align-items: center;
         }
-        img{
+        /* img{
             position: absolute;
             max-width: 50rem / $pxConvertRem;
             max-height: 50rem / $pxConvertRem;
@@ -71,6 +74,12 @@
             top: 50%;
             margin-top: -25rem / $pxConvertRem;
             border: none;
+        } */
+        img{
+            max-width: 50rem / $pxConvertRem;
+            max-height: 50rem / $pxConvertRem;
+            margin-left: -70rem / $pxConvertRem;
+            margin-right: 16rem / $pxConvertRem;
         }
         em{
             font-weight: normal;
@@ -82,6 +91,7 @@
         background: #3e3e3e;
         a{
             color: #fff;
+            border-bottom: none;
         }
     }
 }

+.brands-swiper{
+    background: #fff;
+    width: 100%;
+    height: 140rem / $pxConvertRem;
+    overflow: hidden;
+    .brands-list{
+        position: relative;
+        padding-bottom: 29rem / $pxConvertRem;
+        border-bottom: 1px solid #e0e0e0;
+        li{
+            position: relative;
+            float: left;
+            padding-left: 30rem / $pxConvertRem;
+            width: 140rem / $pxConvertRem;
+            height: 140rem / $pxConvertRem;
+            img{
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+            .brands-title{
+                position: absolute;
+                left: 8rem / $pxConvertRem;
+                right: 8rem / $pxConvertRem;
+                bottom: 8rem / $pxConvertRem;
+                height: 28rem / $pxConvertRem;
+                line-height: 28rem / $pxConvertRem;
+                text-align: center;
+                font-size: 18rem / $pxConvertRem;
+                color: #444;
+                background: rgba(255, 255, 255, 0.5);
+            }
+        }
+    }
+}
\ No newline at end of file

+.hot-category{
+    margin: 30rem / $pxConvertRem 0 0;
+    border-top: 1px solid #e0e0e0;
+    .category-banner{
+        height: 198rem / $pxConvertRem;
+        img{
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .category-list{
+        background: #fff;
+        border-top: 1px solid #e0e0e0;
+        li{
+            float: left;
+            width: 158rem / $pxConvertRem;
+            height: 174rem / $pxConvertRem;
+            border-bottom: 1px solid #e0e0e0;
+            border-left: 1px solid #e0e0e0;
+            .img-box{
+                width: 100%;
+                height: 138rem / $pxConvertRem;
+                text-align: center;
+                vertical-align: middle;
+                img{
+                    max-width: 100%;
+                    max-height: 100%;
+                    vertical-align: middle;
+                }
+            }
+            .category-title{
+                line-height: 22rem / $pxConvertRem;
+                color: #aaa;
+                font-size: 18rem / $pxConvertRem;
+                text-align: center;
+            }
+        }
+    }
+}

 $pxConvertRem : 40;
-@import "compass", "compass/reset", "pages/boys";
+
+@import "compass", "compass/reset";
+@import "common/side-nav", "common/header", "common/floor-header", "common/banner-top", "common/banner-bottom";
+@import "pages/boys", "pages/girls";
 
 body {
     font-family: helvetica,Arial,"黑体";

-@import "common/side-nav", "common/header", "common/floor-header", "common/banner-top";
-
-.mobile-wrap{
+.mobile-wrap {
     position: relative;
     z-index: 2;
     background: #f0f0f0;
     transform: translate3d(0, 0, 0);
     transition: transform .3s ease-out;
 }
-.mobile-wrap.menu-open{
+
+.mobile-wrap.menu-open {
     -webkit-transform: translate3d(540rem / $pxConvertRem, 0, 0);
     transform: translate3d(540rem / $pxConvertRem, 0, 0);
     transition: transform .3s ease-out;
 }
 
-.overlay{
+.overlay {
     display: none;
     position: absolute;
     top: 0;
@@ -25,6 +24,6 @@
     z-index: 99;
 }
 
-.overlay.show{
+.overlay.show {
     display: block;
 }
\ No newline at end of file

+@import "girls/hot-category";
+
+@import "girls/hot-brands";
\ No newline at end of file

@@ -3,8 +3,10 @@
  * @author: liuyue(yue.liu@yoho.cn)
  * @date: 2015/7/13
  */
-var boys = require('./views/controller/boys');
+var boys = require('./views/controller/boys'),
+    girls = require('./views/controller/girls');
 
 module.exports = function(app) {
     app.get('/boys', boys.index); //boys首页
+    app.get('/girls', girls.index); //boys首页
 };
\ No newline at end of file

+/**
+ * 女首页控制器
+ * @author: liuyue(yue.liu@yoho.cn)
+ * @date: 2015/7/13
+ */
+var data = require('../../public/js/data/girls'),
+    layoutPath = '../layouts/layout';
+
+// 首页 
+exports.index = function(req, res) {
+    res.render('pages/girls', {
+        data: data,
+        layout: layoutPath,
+        module: 'girls'
+    });
+};
\ No newline at end of file

+{{# data}}
+<div class="mobile-wrap girls-wrap">
+    {{> header}}
+    {{> common/banner_top}}
+    {{> girls/hot_category}}
+    {{> girls/hot_brands}}
+    {{> common/banner_bottom}}
+    <div class="overlay"></div>
+</div>
+{{> common/side_nav}}
+{{/ data}}
\ No newline at end of file

+{{# bannerBottom}}
+<div class="banner-bottom">
+    <a href="{{url}}">
+        <img src="{{img}}" alt="">
+    </a>
+</div>
+{{/ bannerBottom}}
\ No newline at end of file

 {{# bannerTop}}
 <div class="banner-top">
-    <div class="swiper-container">
+    <div class="banner-swiper swiper-container">
         <ul class="swiper-wrapper">
             {{# list}}
-            <li>
+            <li class="swiper-slide">
                 <a href="{{url}}">
                     <img class="lazy" data-original="{{img}}" src="{{img}}" alt="">
                 </a>
@@ -11,6 +11,9 @@
             {{/ list}}
         </ul>
     </div>
-    <div class="swiper-pagination"></div>
+    <div class="swiper-pagination">
+        <div class="pagination-inner">
+        </div>
+    </div>
 </div>
 {{/ bannerTop}}
\ No newline at end of file

 <div class="side-nav">
     <ul>
         {{# sideNav}}
-        <li>
+        <li {{# current}}class="current"{{/ current}}>
             {{# url}}
             <a href="{{.}}">
             {{/ url}}
@@ -32,4 +32,4 @@
         </li>
         {{/ sideNav}}
     </ul>
-</div>
+</div>
\ No newline at end of file

+{{# hotBrands}}
+<div class="hot-brands">
+    {{> common/floor_header_more}}
+    <div class="brands-swiper">
+        <ul class="brands-list clearfix">
+            {{# list}}
+            <li class="swiper-slide">
+                <a href="{{url}}">
+                    <img src="{{img}}" alt="">
+                    <span class="brands-title">{{textCn}}</span>
+                </a>
+            </li>
+            {{/ list}}
+        </ul>
+    </div>
+</div>
+{{/ hotBrands}}
\ No newline at end of file

+{{# hotCategory}}
+<div class="hot-category">
+    <div class="category-banner">
+        <img src="{{img}}" alt="">
+    </div>
+    <ul class="category-list clearfix">
+        {{# list}}
+        <li>
+            <a href="{{url}}">
+                <div class="img-box">
+                    <img src="{{img}}" alt="">
+                </div>
+                <p class="category-title">{{textCn}}</p>
+            </a>
+        </li>
+        {{/ list}}
+    </ul>
+</div>
+{{/ hotCategory}}
\ No newline at end of file

+{{# hotCategory}}
+<div class="hot-category">
+    <div class="category-banner">
+        <img src="{{img}}" alt="">
+    </div>
+    <ul class="category-list clearfix">
+        {{# list}}
+        <li>
+            <a href="{{url}}">
+                <div class="img-box">
+                    <img src="{{img}}" alt="">
+                </div>
+                <p class="category-title">{{textCn}}</p>
+            </a>
+        </li>
+        {{/ list}}
+    </ul>
+</div>
+{{/ hotCategory}}
\ No newline at end of file