fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit 3cf64425dcb9a0676abda4e22aab3cc75425c1d9 1 parent 81455097

save

Inline Side-by-side
Showing 15 changed files with 330 additions and 5 deletions
... ... @@ -6,7 +6,7 @@ exports.index = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/index', {
pageStyle: 'vip-day'
pageStyle: 'vip-day entry'
});
};
... ... @@ -16,7 +16,7 @@ exports.crazyWheel = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/crazy_wheel', {
pageStyle: 'vip-day',
pageStyle: 'vip-day game',
isWheel: true,
});
};
... ... @@ -27,7 +27,7 @@ exports.crazyLuck = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/crazy_luck', {
pageStyle: 'vip-day',
pageStyle: 'vip-day game',
isLuck: true
});
};
... ...
index
\ No newline at end of file
{{! header }}
<header class="vip-day-header"></header>
<h4 class="vip-day-slogan">每月28日 尽情釋放</h4>
<section class="vip-day-sec qiangjuan">
<ul class="chits">
<li class="chit chit10"></li>
<li class="chit chit30"></li>
<li class="chit chit60"></li>
</ul>
<button class="qiangjuan-foucs">立刻关注抢优惠券</button>
</section>
{{! section: 玩转有货币 }}
<section class="vip-day-sec play-coin">
<header class="header">
<h5 class="title">[ 玩转有货币 ]</h5>
</header>
<ul class="clearfix">
<li class="item item-1 pull-left">
<img class="play-icon-flag" src="{{imgSrc '/img/activity/vip_day/play-icon-1.png'}}" alt="签到福利">
</li>
<li class="item item-2 pull-right">
<img class="play-icon-flag" src="{{imgSrc '/img/activity/vip_day/play-icon-2.png'}}" alt="拼手气">
</li>
</ul>
</section>
{{! section: vip等级加速 }}
<section class="vip-day-sec vip-rocket">
<header class="header">
<h5 class="title">[ VIP等级加速 ]</h5>
</header>
<div class="content text-center">
<p>会员日当天消费的会员将获得<strong>翻倍</strong>VIP积分奖励</p>
<button type="button" class="vip-rocket-privilege">VIP 专享权</button><br>
<button type="button" class="vip-rocket-buynow">立即买</button>
</div>
</section>
{{! section: 会员日专享商品 }}
<section class="vip-day-sec vip-goods">
<header class="header">
<h5 class="title">[ 会员日专享商品 ]</h5>
</header>
<div class="content">
<div class="vip-goods-sec">
<h5 class="vip-goods-sec-label">潮牌尖嘴</h5>
<ul class="vip-goods-list">
<li class="vip-good">
<img class="vip-good-show" src="" alt="">
<div class="vip-good-price">
<div>
<sup>¥</sup><span>539</span>
</div>
<div>
<span class="disable-price">¥539</span>
</div>
</div>
<div class="vip-good-bottom">
<h6 class="vip-good-name">The Hundreds</h6>
<button class="vip-good-fav" type="button">马上收藏</button>
</div>
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
{{! section: 欢乐福利加倍区 }}
<section id="" class="vip-day-sec">
<header class="header">
<h5 class="title">[ 欢乐福利加倍区 ]</h5>
</header>
</section>
{{! footer }}
<footer class="vip-day-footer">
</footer>
\ No newline at end of file
... ...

29.5 KB | W: | H:

72.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
.vip-day.entry {
background-color: #f2613c;
}
.vip-day-header {
background: resolve('activity/vip_day/activity.png');
background-size: cover;
height: 362px;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.28);
}
.vip-day-slogan {
width: 310px;
margin: 30px auto 28px;
border: 2PX solid #fff;
font-size: 28px;
line-height: 45px;
color: #fff;
font-weight: bold;
text-align: center;
}
.vip-day-sec {
margin-left: 17px;
margin-right: 17px;
.header {
position: relative;
height: 80px;
line-height: 80px;
background-color: #000;
text-align: center;
&:after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 680px;
height: 1PX;
margin-left: -340px;
background-color: #fff;
}
}
.title {
position: relative;
z-index: 1;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
font-size: 42px;
color: #fff;
background-color: #000;
}
.content {
background-color: #fff;
overflow: hidden;
}
}
.vip-day {
/* 福利: 抢券 */
.qiangjuan {
padding-top: 35px;
margin-bottom: 65px;
text-align: center;
background-color: #fff;
.chits {
margin-bottom: 25px;
overflow: hidden;
}
.chit {
display: inline-block;
width: 212px;
height: 89px;
margin-right: 7px;
}
.chit:last-of-type {
margin-right: 0;
}
.chit10 { background-image: url('/activity/vip_day/chit10.png');}
.chit30 { background-image: url('/activity/vip_day/chit30.png');}
.chit60 { background-image: url('/activity/vip_day/chit60.png');}
}
.qiangjuan-foucs {
width: 382px;
height: 64px;
font-size: 34px;
background-color: #000;
color: #fff;
box-shadow: 4px 4px #f2613c;
margin-bottom: 40px;
}
/* 福利: 玩转有货币 */
.play-coin {
margin-bottom: 60px;
.item {
width: 355px;
padding-top: 20px;
padding-bottom: 25px;
text-align: center;
background-color: #fff;
}
}
.play-icon-flag {
width: 204px;
height: 190px;
}
/* VIP 等级加速 */
.vip-rocket {
margin-bottom: 30px;
p {
font-size: 24px;
font-weight: bold;
margin-top: 25px;
margin-bottom: 30px;
}
strong {
font-size: 48px;
}
button {
width: 190px;
height: 54px;
}
}
.vip-rocket-privilege {
margin-bottom: 20px;
background-color: #000;
color: #fff;
}
.vip-rocket-buynow {
margin-bottom: 40px;
border: 2PX solid #000;
background-color: #fff;
}
/* 福利 会员日专享商品 */
.vip-goods {
}
.vip-goods-sec {
overflow: hidden;
}
.vip-goods-sec-label {
width: 200px;
height: 57px;
line-height: 57px;
margin: 50px auto 25px;
background-color: #e95d3f;
font-size: 40px;
color: #fff;
text-align: center;
letter-spacing: 2PX;
}
.vip-good {
width: 225px;
border: 1PX solid #000;
margin-right: 8px;
}
.vip-good-show {
width: 220px;
height: 155px;
}
.vip-good-price {
position: relative;
text-align: center;
font-size: 20px;
padding-bottom: 14px;
overflow: hidden;
sup {
font-size: 10px;
vertical-align: text-top;
}
.disable-price {
margin-left: 5px;
text-decoration: line-through;
color: #5b5b5b;
}
&:after {
position: absolute;
left: 50%;
bottom: 0;
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 9px solid #000;
transform: translate3d(-50%, 0, 0);
// border: 5px solid #e95d3f;
}
}
.vip-good-bottom {
height: 69px;
background-color: #000;
text-align: center;
}
.vip-good-name {
font-size: 20px;
color: #fff;
}
.vip-good-fav {
line-height: 25px;
font-size: 16px;
background-color: #fff;
color: #000;
}
}
... ...
... ... @@ -4,7 +4,7 @@ $color3: #952c20; /* shadow */
$border-radius: 8px;
.vip-day {
.vip-day.game {
background-color: #27272b;
}
... ...
@import "entry";
@import "game";
\ No newline at end of file
... ...
... ... @@ -40,6 +40,11 @@ a {
text-decoration: none;
}
button {
border: 0;
outline: 0;
}
*:focus {
outline: none;
}
... ...