fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit c732bac120f0ae9eedc1e56ca7f7448e86960c9c 1 parent e112c519

save

Inline Side-by-side
Showing 8 changed files with 167 additions and 21 deletions
... ... @@ -16,7 +16,8 @@ exports.crazyWheel = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/crazy_wheel', {
pageStyle: 'vip-day'
pageStyle: 'vip-day vip-game-wheel',
isWheel: true,
});
};
... ... @@ -26,6 +27,7 @@ exports.crazyLuck = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/crazy_luck', {
pageStyle: 'vip-day'
pageStyle: 'vip-day vip-game-luck',
isLuck: true
});
};
... ...
... ... @@ -62,9 +62,9 @@ router.get('/invite/getwxinfo', invite.getwxinfo);
router.get('/invite/shareover', invite.shareover);
router.get('/invite/over', invite.over);
router.get('/vip_day', vipDay.index);
router.get('/vip_day/crazy_wheel', vipDay.crazyWheel);
router.get('/vip_day/crazy_luck', vipDay.crazyLuck);
router.get('/vip-day', vipDay.index);
router.get('/vip-day/crazy-wheel', vipDay.crazyWheel);
router.get('/vip-day/crazy-luck', vipDay.crazyLuck);
module.exports = router;
... ...
<div class="info">
{{#if isWheel}}
{{else if isLuck}}
<div class="info-item my-icon">
<div class="my-icon-label">
<i class="small-icon"></i><span>我的有货币</span>
</div>
<span id="my-icon" class="game-val game-rect">29870</span>
</div>
<div class="info-item">
<button id="my-award" class="game-btn my-award" type="button">我的奖品</button>
</div>
<div class="info-item player-num">
<div>
已有:<span id="player-num" class="player-num-val">12345</span>人
</div>
<span>参加抽奖</span>
</div>
{{/if}}
</div>
<div class="explain">
<div class="explain-txt">
... ...
<div class="header">
<div class="header-banner"></div>
<div class="game-notify game-rect">
<p>花20有货币就能获得一次抽奖机会哦!</p>
</div>
</div>
\ No newline at end of file
... ...
<div class="game">
<div class="game-stage">
<div class="game-item game-award-1"></div>
<div class="game-item game-award-2"></div>
<div class="game-item game-award-3"></div>
<div class="game-item game-award-4"></div>
<div class="game-item game-boot"></div>
<div class="game-item game-award-5"></div>
<div class="game-item game-award-6"></div>
<div class="game-item game-award-7"></div>
<div class="game-item game-award-8"></div>
</div>
</div>
\ No newline at end of file
... ...

8.28 KB | W: | H:

10.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

13.7 KB | W: | H:

14.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
$color1: #c03729;
$color1: #c03729; /* red */
$color2: #ffea5f; /* yellow */
$color3: #952c20; /* shadow */
$border-radius: 8px;
.vip-day {
background-color: #27272b;
}
.vipday-game {
font-size: 24px;
width: 750px;
border-top: 1PX solid #27272b;
.game-rect {
border: 3px solid #001;
background-color: #342327;
box-shadow: 0 0 0 3px #ee5646;
border-radius: 8px;
color: $color2;
}
.game-val {
font-size: 38px;
display: inline-block;
padding: 5px 20px;
}
.game-btn {
height: 100px;
line-height: 100px;
border: none;
outline: none;
border-radius: 8PX;
box-shadow: 0 8px $color3;
background-color: $color2;
font-size: 32px;
padding: 0 40px;
}
.my-award {
color: #5e4412;
}
/* ---------------------------------------------------- *\
header area
\* ---------------------------------------------------- */
.header {
height: 142px;
background-color: $color1;
overflow: hidden;
}
.header-banner {
float: left;
width: 162px;
height: 124px;
margin: 11px 25px 7px 15px;
background: url("/activity/vip_day/chit@2x.png");
}
.game-notify {
width: 510px;
height: 79px;
margin-top: 32px;
overflow: hidden;
text-align: center;
font-size: 28px;
line-height: calc(79 - 3 * 2px);
}
.game {
height: 536px;
background: resolve('activity/vip_day/stage@2x.png');
background: resolve("activity/vip_day/stage@2x.png");
background-size: 750px 536px;
}
/* ---------------------------------------------------- *\
main area
\* ---------------------------------------------------- */
/* ---------------------------------------------------- *\
footer area
\* ---------------------------------------------------- */
.small-icon {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 5px;
vertical-align: middle;
background: url("/activity/vip_day/coin-lite@2x.png");
}
.info {
display: table;
width: 100%;
position: relative;
padding-bottom: 40px;
padding-top: 15px;
padding-bottom: 60px;
background-color: $color1;
color: #ffedbf;
}
.my-icon-label {
margin-bottom: 15px;
span {
vertical-align: middle;
}
}
.player-num {
font-size: 22px;
}
.player-num-val {
font-size: 32px;
}
.info-item {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.explain {
position: relative;
width: 708px;
margin-left: auto;
margin-right: auto;
margin-top: -43px;
&:before {
display: block;
content: '';
height: 40px;
background: url('/activity/vip_day/sprite2.png');
background-size: cover;
}
&:after {
content: "";
height: 27px;
border: 5px solid #ffedbf;
border-radius: 12px;
background-color: #32212c;
}
}
.explain-txt {
position: relative;
z-index: 1;
width: 679px;
height: 297px;
padding: 0 40px 13px;
margin: 0 auto;
background: white resolve('activity/vip_day/sprite1.png') repeat-x left bottom;
padding: 27px 40px 13px;
margin: -13px auto 0;
background: white resolve("activity/vip_day/sprite1.png") repeat-x left bottom;
background-size: 13px;
}
}
\ No newline at end of file
&:before {
position: absolute;
top: 0;
left: 0;
right: 0;
content: "";
height: 27px;
background: linear-gradient(to bottom, rgba(171,171,171, 0.8), transparent);
}
}
}
... ...