会员日游戏 静态页 完成

@@ -16,7 +16,7 @@ exports.crazyWheel = (req, res, next) => {
     res.locals.width750 = true;
     res.locals.width750 = true;
 
 
     res.render('vip_day/crazy_wheel', {
     res.render('vip_day/crazy_wheel', {
-        pageStyle: 'vip-day vip-game-wheel',
+        pageStyle: 'vip-day',
         isWheel: true,
         isWheel: true,
     });
     });
 };
 };
@@ -27,7 +27,7 @@ exports.crazyLuck = (req, res, next) => {
     res.locals.width750 = true;
     res.locals.width750 = true;
 
 
     res.render('vip_day/crazy_luck', {
     res.render('vip_day/crazy_luck', {
-        pageStyle: 'vip-day vip-game-luck',
+        pageStyle: 'vip-day',
         isLuck: true
         isLuck: true
     });
     });
 };
 };

-crazy_wheel
+<div class="vipday-game game-wheel">
+    {{> vip_day/game-header}}
+    {{> vip_day/game-main}}
+    {{> vip_day/game-footer}}
+</div>

+{{#if isWheel}}
 <div class="info">
 <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>
-        <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>
         </div>
-    {{/if}}
+        <span>参加抽奖</span>
+    </div>
 </div>
 </div>
 <div class="explain">
 <div class="explain">
     <div class="explain-txt">
     <div class="explain-txt">
-        <h6>有货币抽奖规则:</h6>
-        <ul>
+        <h6 class="explain-title">有货币抽奖规则:</h6>
+        <ul class="explain-rules">
             <li>1、 每次投入20有货币,用户账内有货币需大于20;每位用户不限参与次数</li>
             <li>1、 每次投入20有货币,用户账内有货币需大于20;每位用户不限参与次数</li>
             <li>2、 奖品为20、50、100、200、1000、2000、5000有货币，抽中对应奖品即可获得；如未中奖则告知“很遗憾您没有中奖，继续加油哦~~”！</li>
             <li>2、 奖品为20、50、100、200、1000、2000、5000有货币，抽中对应奖品即可获得；如未中奖则告知“很遗憾您没有中奖，继续加油哦~~”！</li>
         </ul>
         </ul>
     </div>
     </div>
-</div>
+</div>
+{{/if}}

 <div class="game">
 <div class="game">
     <div class="game-stage">
     <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-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>
 </div>
 </div>

@@ -25,6 +25,8 @@ $border-radius: 8px;
         font-size: 38px;
         font-size: 38px;
         display: inline-block;
         display: inline-block;
         padding: 5px 20px;
         padding: 5px 20px;
+        margin-left: 20px;
+        margin-right: 20px;
     }
     }
 
 
     .game-btn {
     .game-btn {
@@ -58,7 +60,14 @@ $border-radius: 8px;
         width: 162px;
         width: 162px;
         height: 124px;
         height: 124px;
         margin: 11px 25px 7px 15px;
         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 {
     .game-notify {
@@ -71,15 +80,50 @@ $border-radius: 8px;
         line-height: calc(79 - 3 * 2px);
         line-height: calc(79 - 3 * 2px);
     }
     }
 
 
+    /* ---------------------------------------------------- *\
+                    main area
+    \* ---------------------------------------------------- */
     .game {
     .game {
+        position: relative;
         height: 536px;
         height: 536px;
         background: resolve("activity/vip_day/stage@2x.png");
         background: resolve("activity/vip_day/stage@2x.png");
         background-size: 750px 536px;
         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
                     footer area
@@ -160,7 +204,19 @@ $border-radius: 8px;
             right: 0;
             right: 0;
             content: "";
             content: "";
             height: 27px;
             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;
         }
         }
     }
     }
 }
 }