fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit 9099254cdf60a54a7cddf529d3ca838b120d6360 1 parent fd233e92

红人馆 优惠券

Inline Side-by-side
Showing 9 changed files with 426 additions and 3 deletions
... ... @@ -299,6 +299,19 @@ const shop = {
_noLazy: true
});
}).catch(next);
},
/**
* 红人店铺
*/
redShop(req, res, next) {
res.render('newshop/shop-reds', {
width750: true,
localCss: true,
module: 'product',
page: 'reds-shop',
time3: [0, 1, 2]
});
}
};
... ...
... ... @@ -142,6 +142,8 @@ 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);
// end- 店铺重构
// 店铺介绍
... ...
{{!--
desc: 红人店铺
--}}
<div class="reds-shop">
{{!--shop-header--}}
<div class="shop-header">
<img class="banner" src="//img13.static.yhbimg.com/yhb-img02/2016/10/17/13/0293f85c7e6ddeab19791d44765f240b34.jpg?imageView2/2/interlace/1/q/60" alt="banner">
<div class="shop-info">
<img class="logo" src="//img10.static.yhbimg.com/yhb-img01/2016/03/24/15/01ef24d3ec4caabd8c416901cdf4739917.jpg?imageMogr2/thumbnail/500x500/extent/500x500/background/d2hpdGU=/position/center/quality/60" alt="logo">
<div class="shop-info-base">
<h1 class="shopname">vans</h1>
<div class="favs">粉丝数: 534 <i class="iconfont favs-btn like">&#xe605;</i></div>
</div>
<div class="shop-intro">
<div class="line-clamp-2">这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍这里是介绍</div>
<div class="shop-intro-folder">
<i class="iconfont">&#xe616;</i>
</div>
</div>
</div>
</div>
{{!--shop-tab-nav: 红人首页 | 全部商品--}}
<div>
</div>
{{!--shop-tab: 红人首页--}}
<div class="">
<div class="shop-coupon coupon-content">
{{#each time3}}
<div class="coupon-small">
<div class="coupon-left">
<span class="coupon-left-price">
<span class="coupon-sign">¥</span>
<span class="coupon-price">88</span>
</span>
<span class="coupon-left-name">
VANS圣诞礼券：满588减88
</span>
</div>
<div class="coupon-right receive-btn">
立即领取
</div>
</div>
{{/each}}
</div>
<div class="shop-swiper">
</div>
{{!--视屏--}}
<div class="shop-video shop-section">
<header>
<i class="section-more iconfont">&#xe606;</i>
<h4 class="section-title">视屏直播</h4>
</header>
<div class="video-player">
<div class="video-poster"></div>
</div>
<div class="video-intro">
<h6 class="video-title">这是视屏标题</h6>
<p class="text-line-2">这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容这是视屏内容</p>
</div>
</div>
{{!--人气单品--}}
<div class="shop-hot shop-section">
<header>
{{!--<i class="section-more iconfont">&#xe606;</i>--}}
<h4 class="section-title">人气单品</h4>
</header>
<div class="section-content">
<div class="items-s1">
{{> item}}
</div>
<div class="items-s2">
{{> item}}
</div>
{{!--风格： 3图2列， 大图 在左--}}
<div class="items-3-2 items-3-2-left">
{{#each time3}}
{{> item}}
{{/each}}
</div>
</div>
{{!--风格： 3图2列， 大图 在右--}}
<div class="items-3-2 items-3-2-right">
{{#each time3}}
{{> item}}
{{/each}}
</div>
<div class="shop-item-div"></div>
<div class="items-s1">
{{> item}}
</div>
{{!--风格： 3图 3列--}}
<div class="items-3-3">
{{#each time3}}
{{> item}}
{{/each}}
</div>
<div class="items-c2">
{{#each time3}}
{{> item}}
{{/each}}
</div>
{{!--风格： 3图 3列--}}
<div class="items-3-3 items-small">
{{#each time3}}
{{> item}}
{{/each}}
{{#each time3}}
{{> item}}
{{/each}}
</div>
</div>
</div>
{{!--shop-tab: 全部商品--}}
<div></div>
</div>
{{#*inline 'item'}}
<div class="item">
<img class="item-pic" src="http://img1.gamersky.com/image2016/12/20161224_zl_91_3/gamersky_02origin_03_201612241718D33.jpg" alt="">
<div class="item-info">
<div class="">
ABCDEFG ABCDEFG
</div>
<div>
<span class="new-price">¥ 199.00</span>
<span class="price">¥ 299.00</span>
</div>
</div>
</div>
{{/inline}}
\ No newline at end of file
... ...
<div class="item">
<img class="item-pic" src="http://img1.gamersky.com/image2016/12/20161224_zl_91_3/gamersky_02origin_03_201612241718D33.jpg" alt="">
<div class="item-info">
<div class="">
ABCDEFG ABCDEFG
</div>
<div>
<span class="new-price">¥ 199.00</span>
<span class="price">¥ 299.00</span>
</div>
</div>
</div>
\ No newline at end of file
... ...
require('product/shop/redshop.page.css');
... ...
.relative {
position: relative;
}
.text-left {
text-align: left;
}
... ... @@ -41,20 +45,20 @@
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical
-webkit-box-orient: vertical;
}
.vh-center {
text-align: center;
> *,
> *,
&:before {
display: inline-block;
vertical-align: middle;
}
&:before {
content: '';
content: "";
width: 0;
height: 100%;
line-height: 100%;
... ...
.shop-header {
.banner {
height: 234px;
}
}
.shop-info {
position: relative;
padding-right: 30px;
padding-left: 30px;
.logo {
position: absolute;
top: -40px;
width: 120px;
height: 120px;
box-shadow: 0 0 2px 1px #dedede;
}
.shopname {
font-size: 32px;
color: #444;
margin-left: 180px;
}
.favs-btn {
margin-left: 30px;
&.like {
color: #e33333;
}
}
}
.shop-info-base {
display: flex;
justify-content: space-between;
line-height: 1;
padding-top: 38px;
padding-bottom: 35px;
}
.shop-intro {
font-size: 28px;
color: #444;
}
.shop-intro-folder {
margin-top: 26px;
margin-bottom: 24px;
text-align: center;
font-size: 18px;
line-height: 1;
}
... ...
/*
红人首页
*/
.shop-section {
header {
font-size: 32px;
font-weight: bold;
color: #444;
line-height: 80px;
padding-right: 30px;
padding-left: 30px;
background-color: #f0f0f0;
}
.section-title {
text-align: center;
}
.section-more {
font-size: 40px;
color: #a9a9a9;
float: right;
}
}
.shop-coupon {
padding-right: 30px;
background-color: #f0f0f0;
white-space: nowrap;
overflow-x: auto;
.coupon-small {
float: none;
display: inline-block !important;
white-space: normal;
}
}
.shop-swiper {
height: 234px;
}
.shop-video {
.video-player {
height: 363px;
}
.video-intro {
padding: 30px;
}
.video-title {
font-size: 36px;
color: #444;
margin-bottom: 30px;
}
.video-desc {
font-size: 28px;
color: #444;
}
}
.shop-hot {
.item {
position: relative;
}
.item-pic {
width: 100%;
height: 100%;
}
.item-info {
position: absolute;
bottom: 0;
width: 100%;
padding-left: 20px;
padding-right: 20px;
color: #fff;
}
.items-s1 {
position: relative;
background-color: #fff;
margin: 30px;
.item-info {
font-size: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.items-s2 {
font-size: 24px;
position: relative;
.item {
height: 234px;
}
.item-info {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
}
.items-3-2 {
font-size: 18px;
overflow: hidden;
.item {
width: 50%;
height: 234px;
}
.item:first-child {
height: 468px;
}
.item-info {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.items-3-2-left .item { float: left; }
.items-3-2-right .item { float: right; }
/* 风格： 3图 3列 */
.items-3-3 {
overflow: hidden;
font-size: 18px;
.item {
float: left;
width: 33.3333333333%;
height: 333px;
}
.item-info {
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
}
.items-small {
.item {
height: 250px;
}
.item-info {
height: 48px;
}
}
.items-c2 {
overflow: hidden;
font-size: 20px;
.item {
float: left;
width: 50%;
height: 375px;
}
.item-info {
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
}
}
.shop-item-div {
height: 30px;
background-color: #f0f0f0;
}
... ...
@charset "utf-8";
@import "shop-index-coupon";
@import "reds-shop/header";
@import "reds-shop/section";
\ No newline at end of file
... ...