fe / yohobuy-mobile · Commits

Go to a project

Authored by 2586703@qq.com
Commit 325c1dd64122fe8bf2f05fd21d5bba1a87cda027 1 parent 04d513a9

女生首页html css js

Inline Side-by-side
Showing 26 changed files with 472 additions and 19 deletions
... ... @@ -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{
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}}
... ...
{{# 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
... ...