fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit dae151323c94df933d067fbeb998624c29f0e822 1 parent c732bac1

会员日游戏 静态页 完成

Inline Side-by-side
Showing 30 changed files with 109 additions and 35 deletions
... ... @@ -16,7 +16,7 @@ exports.crazyWheel = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/crazy_wheel', {
pageStyle: 'vip-day vip-game-wheel',
pageStyle: 'vip-day',
isWheel: true,
});
};
... ... @@ -27,7 +27,7 @@ exports.crazyLuck = (req, res, next) => {
res.locals.width750 = true;
res.render('vip_day/crazy_luck', {
pageStyle: 'vip-day vip-game-luck',
pageStyle: 'vip-day',
isLuck: true
});
};
... ...
crazy_wheel
\ No newline at end of file
<div class="vipday-game game-wheel">
{{> vip_day/game-header}}
{{> vip_day/game-main}}
{{> vip_day/game-footer}}
</div>
\ No newline at end of file
... ...
{{#if isWheel}}
<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 class="info-item">
已有<span class="game-val game-rect">29870</span>人参与抽奖
</div>
</div>
<div class="explain">
<div class="explain-txt">
<h6 class="explain-title">留言板细则:</h6>
<ul class="explain-rules">
<li>每位用户限写一条留言，完成提交后获得一次抽奖机会。可随机获得10元现金券、20元现金券、50元现金券、100元现金券</li>
<li>您的想法有可能会在后面的会员日实现哦~<br>本次活动解释权归有货所有</li>
</ul>
</div>
</div>
{{else if isLuck}}
<div class="info">
<div class="info-item my-icon">
<div class="my-icon-label">
<i class="small-icon"></i><span>我的有货币</span>
</div>
<div class="info-item player-num">
<div>
已有:<span id="player-num" class="player-num-val">12345</span>人
</div>
<span>参加抽奖</span>
<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>
{{/if}}
<span>参加抽奖</span>
</div>
</div>
<div class="explain">
<div class="explain-txt">
<h6>有货币抽奖规则:</h6>
<ul>
<h6 class="explain-title">有货币抽奖规则:</h6>
<ul class="explain-rules">
<li>1、 每次投入20有货币,用户账内有货币需大于20;每位用户不限参与次数</li>
<li>2、 奖品为20、50、100、200、1000、2000、5000有货币，抽中对应奖品即可获得；如未中奖则告知“很遗憾您没有中奖，继续加油哦~~”！</li>
</ul>
</div>
</div>
\ No newline at end of file
</div>
{{/if}}
\ 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-award is-active"></div>
<div class="game-item game-award"></div>
<div class="game-item game-award"></div>
<div class="game-item game-award"></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 class="game-item game-award"></div>
<div class="game-item game-award"></div>
<div class="game-item game-award"></div>
<div class="game-item game-award"></div>
</div>
</div>
\ No newline at end of file
... ...

14.1 KB | W: | H:

29.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -25,6 +25,8 @@ $border-radius: 8px;
font-size: 38px;
display: inline-block;
padding: 5px 20px;
margin-left: 20px;
margin-right: 20px;
}
.game-btn {
... ... @@ -58,7 +60,14 @@ $border-radius: 8px;
width: 162px;
height: 124px;
margin: 11px 25px 7px 15px;
background: url("/activity/vip_day/chit@2x.png");
}
&.game-luck .header-banner {
background: url("/activity/vip_day/chit.png");
}
&.game-wheel .header-banner {
background: url("/activity/vip_day/coin.png");
}
.game-notify {
... ... @@ -71,15 +80,50 @@ $border-radius: 8px;
line-height: calc(79 - 3 * 2px);
}
/* ---------------------------------------------------- *\
main area
\* ---------------------------------------------------- */
.game {
position: relative;
height: 536px;
background: resolve("activity/vip_day/stage@2x.png");
background-size: 750px 536px;
}
/* ---------------------------------------------------- *\
main area
\* ---------------------------------------------------- */
.game-stage {
position: absolute;
top: 60px;
right: 82px;
left: 82px;
width: 586px;
height: 406px;
background-size: contain;
}
.game-item {
float: left;
width: calc((586-4) / 3px);
height: calc((406-4) / 3px);
margin-right: 2px;
margin-bottom: 2px;
/* background-color:rgba(255,255,255,0.8); */
&:nth-child(3n) {
margin-right: 0;
}
}
.game-award.is-active {
background: url("/activity/vip_day/cursor.png");
}
&.game-luck .game-stage {
background-image: resolve("activity/vip_day/luck-stage.png");
}
&.game-wheel .game-stage {
background-image: resolve("activity/vip_day/chit-stage.png");
}
/* ---------------------------------------------------- *\
footer area
... ... @@ -160,7 +204,19 @@ $border-radius: 8px;
right: 0;
content: "";
height: 27px;
background: linear-gradient(to bottom, rgba(171,171,171, 0.8), transparent);
background: linear-gradient(to bottom, rgba(171, 171, 171, 0.8), transparent);
}
}
.explain-title {
font-size: 26px;
font-weight: bold;
margin-bottom: 10px;
}
.explain-rules {
li {
margin-bottom: 10px;
}
}
}
... ...