save

@@ -6,7 +6,7 @@ exports.index = (req, res, next) => {
     res.locals.width750 = true;
     res.locals.width750 = true;
 
 
     res.render('vip_day/index', {
     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.locals.width750 = true;
 
 
     res.render('vip_day/crazy_wheel', {
     res.render('vip_day/crazy_wheel', {
-        pageStyle: 'vip-day',
+        pageStyle: 'vip-day game',
         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',
+        pageStyle: 'vip-day game',
         isLuck: true
         isLuck: true
     });
     });
 };
 };

-index
+{{! 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>

+.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;
 $border-radius: 8px;
 
 
-.vip-day {
+.vip-day.game {
     background-color: #27272b;
     background-color: #27272b;
 }
 }
 
 

+@import "entry";
 @import "game";
 @import "game";

@@ -40,6 +40,11 @@ a {
     text-decoration: none;
     text-decoration: none;
 }
 }
 
 
+button {
+    border: 0;
+    outline: 0;
+}
+
 *:focus {
 *:focus {
     outline: none;
     outline: none;
 }
 }