fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit 74072dffc6d20b1dea575e97c4010ad855b8abe3 1 parent 1c132e6d

save new-arrival

Inline Side-by-side
Showing 28 changed files with 668 additions and 2 deletions
... ... @@ -60,6 +60,30 @@ const newGoods = (req, res, next) => {
}).catch(next);
};
const _newGoods = (req, res, next) => {
res.render('new/index', {
module: 'product',
page: 'new-arrival',
width750: true,
localCss: true,
pageHeader: headerModel.setNav({
navTitle: '新品到着'
}),
});
};
const brands = (req, res, next) => {
res.render('new/brands', {
module: 'product',
page: 'new-brands',
width750: true,
localCss: true,
pageHeader: headerModel.setNav({
navTitle: '为您推荐'
}),
});
};
const selectNewSale = (req, res, next) => {
let params = _.assign({}, req.query);
... ... @@ -98,6 +122,8 @@ let filter = (req, res, next) => {
module.exports = {
blkNewGoods,
newGoods,
_newGoods,
brands,
selectNewSale,
filter
};
... ...
... ... @@ -142,7 +142,7 @@ router.get('/index/baseShopFav', newShop.baseShopFav);
router.get('/index/brandFav', newShop.brandFav);
router.get('/new/shop/hotlist', newShop.shopHotList);
router.get('/red_shop', newShop.redShop);
router.get('/red_shop', newShop.redShop); // TODO,TODO,TODO,TODO
// end- 店铺重构
... ... @@ -158,6 +158,9 @@ router.get('/list/new', news.newGoods); // 兼容 PC 的链接
router.get('/new/selectNewSale', news.selectNewSale);
router.get('/new/filter', news.filter);
router.get('/newnew', news._newGoods);
router.get('/new/brands', news.brands);
// 新品到着(blk)
router.get('/blknew', news.blkNewGoods);
... ...
<div class="new-brands">
{{!--浏览过的品牌--}}
{{> new/recommend-brands
title="浏览过的品牌"
}}
{{!--热门品牌--}}
{{> new/recommend-brands title="热门品牌"}}
{{!--新入驻品牌--}}
{{> new/recommend-brands title="新入驻品牌"}}
</div>
\ No newline at end of file
... ...
{{!--新品到着--}}
<div>
{{!--top banner--}}
<div class="banner-top">
<div class="banner-swiper swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<a href="">
<img class="banner-top-pic" src="//img12.static.yhbimg.com/yhb-img01/2016/03/21/05/02c8856b64157f6fe018e76d1d5dbe6a92.jpg?imageView2/2/w/640/h/240/q/60" alt="">
</a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
{{!--为您推荐--}}
{{> 'new/recommend-brands'
style="new-recommend "
title="为您推荐"
more='/product/new/brands'
}}
{{!--精选抢先看--}}
{{> 'new/handpick'}}
{{!--最新上架--}}
{{> 'new/goods'}}
</div>
\ No newline at end of file
... ...
<div class="good-info">
<div class="guang-article">
<div class="cate tip">潮品</div>
<img src="//img13.static.yhbimg.com/article/2016/12/28/09/024949cb26c998cb9fccd2e0819e1a9e43.jpg?imageView2/2/w/640/h/640/q/60" alt="">
<div class="footer">
<p class="digest">Supreme这个牌子有什么超魔力为什么玩潮女生都爱穿它？</p>
<div class="meta clearfix">
<div class="pull-left">
<i class="iconfont">&#xe603;</i>&nbsp;<span>12月27日 13:05</span>
</div>
<div class="pull-right">
<i class="iconfont">&#xe602;</i>&nbsp;<span>26789</span>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="good-info brand-recommend">
<img src="" alt="">
<div class="footer">
<div class="brand-name">品牌名</div>
<h5 class="good-name">这是商品名称</h5>
<div class="price">
<span class="sale-price">¥ 799.00</span>
</div>
</div>
</div>
\ No newline at end of file
... ...
{{!-- 商品列表中的 品牌上新--}}
<div class="good-info brand-info">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5 class="bname">这是一个品牌</h5>
<p class="summary">上新<span class="red">11</span>件&nbsp;&nbsp;<span class="red">1111</span>人收藏</p>
<a href="#" class="entry">进入店铺</a>
</div>
\ No newline at end of file
... ...
{{!-- 新品到着： 最新上架--}}
<div>
<div>
{{> common/filter-nav}}
</div>
<div class="goods-container">
{{# goods}}
{{> common/goods}}
{{/ goods}}
{{> new/tags}}
{{> new/brand}}
{{> new/brand-recommend}}
{{> new/article}}
{{> common/filter}}
</div>
{{> common/query-param}}
</div>
\ No newline at end of file
... ...
{{!-- 新品到着: 精选 --}}
<div id="handpick" class="panel handpick">
<header class="panel-header">
<h4>精选抢先看</h4>
<a href="#javascript" class="panel-header-r more">
<i class="iconfont">&#xe606;</i>
</a>
</header>
<main class="panel-body">
<!-- Slider main container -->
<div class="handpick-swiper swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
</main>
</div>
\ No newline at end of file
... ...
{{!-- 新品到着： 为您推荐--}}
<div id="new-recommend" class="{{style}} panel">
<header class="panel-header">
<h3>{{title}}</h3>
{{#more}}
<a href="{{.}}" class="panel-header-r more">
<i class="iconfont more">&#xe606;</i>
</a>
{{/more}}
</header>
<div class="panel-body">
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
<div class="brand-news-count">
<div class="brand-logo">
<img src="//img11.static.yhbimg.com/brandLogo/2016/08/16/16/01cfd27979a572e6d26018eebfcb6d3583.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/80" alt="">
<h5>品牌品牌</h5>
</div>
<div class="count">上新10款<i class="iconfont">&#xe604;</i></div>
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="good-info good-tags season-tags ">
<div>
<ul class="good-tags-list">
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
<li><a href="#" class="good-tag">夹克</a></li>
</ul>
</div>
</div>
\ No newline at end of file
... ...
<ul id="list-nav" class="list-nav clearfix">
<ul id="list-nav" class="list-nav filter-nav clearfix">
<li class="new active">
<a href="javascript:void(0);">
<span class="span-test">最新</span>
... ...
require('product/new-arrival.page.css');
let Swiper = require('yoho-swiper');
var mySwiper = new Swiper('.handpick-swiper', {
// Optional parameters
loop: true,
// If we need pagination
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
pagination: '.swiper-pagination',
});
... ...
/**
* 新品到着---品牌推荐
*/
require('product/new-brands.page.css');
... ...
.filter-nav {
background-color: #fff;
border-top: 2px solid #fff;
border-bottom: 1px solid #e6e6e6;
> li {
float: left;
width: 25%;
height: 66px;
line-height: 66px;
text-align: center;
font-size: 28px;
color: #999;
}
.bytouch {
background: #eee;
}
a {
display: inline-block;
box-sizing: border-box;
width: auto;
height: 100%;
color: #999;
}
.active > a {
color: #000;
box-sizing: border-box;
}
.active > .iconfont {
color: #000;
&.cur {
color: #000;
}
}
.filter .iconfont {
font-size: 24px;
transition: transform 0.1 ease-in;
}
.filter.active .iconfont {
transform: rotate(-180deg);
}
}
.filter-mask,
.filter-body {
position: absolute;
... ...
... ... @@ -224,4 +224,5 @@
padding-top: 8px;
padding-left: 15px;
min-height: 880px;
background-color: #fff;
}
... ...
.panel {
margin-bottom: 25px;
background-color: #fff;
}
.panel-body {
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1PX solid #dededf;
}
.panel-header {
position: relative;
height: 84px;
line-height: 84px;
font-size: 34px;
font-weight: bold;
text-align: center;
color: #444;
border-top: 1PX solid #dededf;
border-bottom: 1PX solid #dededf;
.more {
color: #b0b0b0;
}
}
.panel-header-r {
position: absolute;
top: 0;
right: 30px;
}
\ No newline at end of file
... ...
/* 新品到着 css */
@import '../layout/panel';
@import '../layout/swiper';
@import '../common/filter';
@import '../common/good';
@import 'new/recommend';
@import 'new/handlepick';
@import 'new/good-tags';
@import 'new/brand-info';
@import 'new/brand-recommend';
@import 'new/article';
body {
background-color: #f0f0f0;
}
.goods-container {
overflow: hidden;
}
.good-info {
width: 325px;
height: 550px;
}
.new-recommend,
.handpick {
.panel-header {
border-bottom: none;
}
}
.filter-nav {
border-top: 1PX solid #dededf;
border-bottom: 1PX solid #dededf;
}
.banner-top {
border-bottom: 1PX solid #dededf;
margin-bottom: 30px;
}
.banner-top-pic {
height: 234px;
}
.brand-news-count h5 {
display: none;
}
\ No newline at end of file
... ...
@import '../layout/panel';
@import 'new/recommend';
.main-wrap {
background-color: #f0f0f0;
}
.new-brands {
.panel-header {
border-bottom: none;
}
.panel-body {
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.brand-news-count {
margin-top: 20px;
width: 32%;
img {
height: auto;
}
}
}
\ No newline at end of file
... ...
.guang-article {
position: relative;
.cate {
position: absolute;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
padding-left: 20px;
padding-right: 50px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-repeat: no-repeat;
background-position: top right;
background-size: 40px 40px;
font-size: 18px;
background-color: #000;
color: #fff;
&.collocation {
background-image: resolve('guang/info/collocation.png');
}
&.fashion-good {
background-image: resolve('guang/info/fashion-good.png');
}
&.fashion-man {
background-image: resolve('guang/info/fashion-man.png');
}
&.tip,
&.special-topic {
background-image: resolve('guang/info/tip.png');
}
&.topic {
background-image: resolve('guang/info/topic.png');
}
}
img {
width: 100%;
height: 215px;
}
.footer {
padding: 15px 20px 20px;
color: #fff;
background-color: #444;
}
.digest {
font-size: 23px;
}
.meta {
margin-top: 40px;
font-size: 17px;
.iconfont {
vertical-align: middle;
}
span {
vertical-align: middle;
}
}
}
\ No newline at end of file
... ...
.brand-info {
padding-top: 55px;
padding-bottom: 55px;
background-color: #f5f5f5;
text-align: center;
img {
width: 141px;
height: 66px;
}
.bname {
font-size: 18px;
color: #b0b0b0;
margin-top: 40px;
margin-bottom: 70px;
}
.summary {
font-size: 25px;
margin-bottom: 50px;
.red {
color: #e27b88;
}
}
.entry {
display: inline-block;
height: 50px;
padding-left: 19px;
padding-right: 19px;
line-height: 46px;
color: #444;
border: 2px solid #444;
border-radius: 5px;
}
}
... ...
.brand-recommend {
img {
height: 426px;
background-color: gray;
}
.footer {
position: relative;
height: 122px;
line-height: 1;
border-top: 1px solid transparent;
color: #fff;
background-color: #ff4333;
text-align: center;
}
.brand-name {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
min-width: 150px;
max-width: 60%;
height: 50px;
line-height: 50px;
padding-left: 20px;
padding-right: 20px;
background-color: #000;
color: #fff;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.good-name {
font-size: 20px;
margin-top: 40px;
margin-bottom: 15px;
}
.sale-price {
font-size: 20px;
}
}
\ No newline at end of file
... ...
.good-tags {
padding-top: 159px;
background-repeat: no-repeat;
background-size: 100% 159px;
&.season-tags {
background-image: url('/product/new/season-hot.jpg');
}
&.search-tags {
background-image: url('/product/new/hot-search.jpg');
}
&.brand-tags {
background-image: url('/product/new/brand-rec.jpg');
}
}
.good-tags-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-between;
height: 395px;
padding: 55px 0;
background-color: #f0f0f0;
li {
width: 50%;
text-align: center;
}
.good-tag {
display: inline-block;
height: 50px;
line-height: 50px;
width: 130px;
padding-left: 20px;
padding-right: 20px;
border-radius: 8px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: #fff;
font-size: 24px;
color: #808080;
}
}
\ No newline at end of file
... ...
.handpick {
.swiper-wrapper {
align-items: center;
}
.swiper-container {
height: 194px;
}
.swiper-slide {
width: 335px;
height: 176px;
background-color: #444;
border-radius: 8px;
}
.swiper-slide-active {
height: 194px;
}
}
\ No newline at end of file
... ...
.new-recommend {
.panel-body {
white-space: nowrap;
overflow: auto;
}
}
.brand-news-count {
display: inline-block;
color: #fff;
text-align: center;
width: 166px;
img {
max-width: 100%;
height: 68px;
margin-bottom: 25px;
}
.brand-logo {
margin-bottom: 25px;
h5 {
color: #b8b8b8;
}
}
.count {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
height: 30px;
line-height: 30px;
font-size: 18px;
border-radius: 32px;
background-color: #999;
.iconfont {
font-size: inherit;
}
}
}
\ No newline at end of file
... ...