样式 文案修改

 'use strict';
 
-const freeMailModel = require('../models/free-mail');
+const freeMailModel = require('../models/free-mail'),
+    headerModel = require('../../../doraemon/models/header');
+
 
 exports.freeMailIndex = (req, res) => {
 
     res.render('free-mail/index', {
         page: 'free-mail-index',
-        localCss: true
+        localCss: true,
+        title: '免邮权益',
+        pageHeader: headerModel.setNav({
+            navTitle: '免邮权益'
+        })
     });
 };
 
@@ -17,6 +23,10 @@ exports.freeMailList = (req, res, next) => {
         res.render('free-mail/list', {
             page: 'free-mail-list',
             localCss: true,
+            title: '免邮权益',
+            pageHeader: headerModel.setNav({
+                navTitle: '免邮权益'
+            }),
             listData: result
         });
     }).catch(next);

@@ -11,7 +11,7 @@
                     <span class="item-title">领取时间</span>
                 </div>
                 <div class="item-right">
-                    <span><b class="color">每月均可领取，</b>领取之日起至当月月底有效，过期不补偿，领取后请尽快使用</span>
+                    <span><b class="color">每月均可领取，</b>领取之日起至当月月底有效，过期不补偿，领取后请尽快使用！每月仅可领取一次</span>
                 </div>
             </div>
 
@@ -33,13 +33,17 @@
                 </div>
                 <div class="item-right">
                     <span>
-                        运费券下单时账户自动扣减相应金额运费，<b class="color">可与优惠券叠加使用，</b>如后期产生退货，运费券不退回。
+                        下单时默认选择使用账户内运费券扣减相应金额运费，<b class="color">可与优惠券叠加使用，</b>如订单提交后产生拒收、取消（商品出库后）、退款、退货等行为，使用的运费券不予返还。
                     </span>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="pop-up">
+    <div class="tip-up">
+        <div class="back-g"></div>
+        <span class="close">×</span>
+        <div class="pop-up">
+        </div>
     </div>
 </div>
\ No newline at end of file

@@ -8,7 +8,7 @@
         <div class="coupon-item">
             <div class="item-left">
                 <span class="name">{{couponName}}</span>
-                <span class="time">{{startTime}}-{{endTime}}</span>
+                <span class="time">有效期：{{startTime}}-{{endTime}}</span>
             </div>
             <div class="item-right">
                 <span class="amount">{{amount}}</span>

@@ -37,10 +37,13 @@ class FreeMailIndexController extends Controller {
                 }
             } else if (result.code === 419) {
                 $('.pop-up').html('<div class="details"><span></span>' + result.message + '</div>').show();
+                $('.tip-up').show();
             } else if (result.code === 418) {
-                $('.pop-up').html('<div class="big">本月已领取过<br>下月再来哦~</div>').show();
+                $('.pop-up').html('<div class="big">本月已领取过<br>下月再来哦~</div>');
+                $('.tip-up').show();
             } else {
                 $('.pop-up').html(result.message).show();
+                $('.tip-up').show();
             }
 
             this.receiveView.popHide();

@@ -4,11 +4,13 @@ import {
 
 class IndexView extends View {
     constructor() {
-        super('.top-banner');
+        super('.free-mail-index-page');
 
         this.receiveBtn = $('.receive-btn');
+        this.tipClose = $('.close');
 
-        this.on('touchend touchcancel', 'span', this.btnClick.bind(this));
+        this.on('touchend touchcancel', '.receive-btn', this.btnClick.bind(this));
+        this.on('touchend touchcancel', '.close', this.tipClickHide.bind(this));
     }
 
     /**
@@ -23,11 +25,15 @@ class IndexView extends View {
      */
     popHide() {
         setTimeout(function() {
-            if ($('.pop-up').css('display') === 'block') {
-                $('.pop-up').hide();
+            if ($('.tip-up').css('display') === 'block') {
+                $('.tip-up').hide();
             }
         }, 2000);
     }
+
+    tipClickHide() {
+        $('.tip-up').hide();
+    }
 }
 
 module.exports = {

@@ -19,7 +19,7 @@
     .instructions {
         background: #c70e0e;
         width: 100%;
-        padding: 30px 25px 40px;
+        padding: 35px 25px 40px;
         font-family: "SourceHanSansCN";
 
         .instructions-detail {
@@ -27,7 +27,7 @@
             height: 100%;
             background: #fff;
             border-radius: 15px;
-            padding: 32px 45px 0;
+            padding: 34px 45px 0;
         }
 
         .title {
@@ -36,7 +36,7 @@
             background-image: resolve("activity/free-mail/title.png");
             background-size: 100%;
             background-repeat: no-repeat;
-            margin: 0 133px 35px;
+            margin: 0 134px 35px;
         }
 
         .color {
@@ -46,7 +46,7 @@
 
     .detail-item {
         width: 100%;
-        margin-bottom: 30px;
+        margin-bottom: 40px;
         font-weight: 700;
         position: relative;
 
@@ -56,7 +56,7 @@
             position: absolute;
             top: 50%;
             transform: translate(-50%, -50%);
-            margin-left: 20px;
+            margin-left: 30px;
 
             .item-title {
                 font-size: 15px;
@@ -68,7 +68,7 @@
         .item-right {
             font-size: 20px;
             line-height: 36px;
-            margin-left: 85px;
+            margin-left: 95px;
 
             a {
                 border-bottom: 2px solid #c70e0e;
@@ -107,6 +107,38 @@
         }
     }
 
+    .tip-up {
+        display: none;
+    }
+
+    .back-g {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: #000;
+        opacity: 0.65;
+    }
+
+    .close {
+        display: block;
+        float: right;
+        width: 30px;
+        height: 30px;
+        border-radius: 30px;
+        background-color: #373b3a;
+        color: #fff;
+        position: fixed;
+        text-align: center;
+        top: 344px;
+        left: 75%;
+        z-index: 101;
+        line-height: 30px;
+    }
+
     .pop-up {
         position: fixed;
         text-align: center;
@@ -123,7 +155,6 @@
         z-index: 100;
         box-sizing: border-box;
         border-radius: 42px;
-        display: none;
 
         .details {
             padding-top: 5px;

 .free-mail-list-page {
     .top-banner {
         width: 100%;
-        height: 245px;
+        height: 350px;
         background-image: resolve("activity/free-mail/list-banner.png");
         background-repeat: no-repeat;
         background-size: 100%;
-        margin-bottom: 15px;
+        margin-bottom: 25px;
 
         .coupon-name {
             display: inline-block;
@@ -15,22 +15,21 @@
             transform: rotate(-9.5deg);
             margin: 40px 0 0 186px;
             font-weight: 700;
+            padding-top: 50px;
         }
     }
 
     .coupon-list {
-        padding: 0 35px;
+        padding: 0 25px 150px;
         color: #fff;
-        max-height: 452px;
-        overflow-y: scroll;
 
         .coupon-item {
-            width: 570px;
-            height: 135px;
+            width: 597px;
+            height: 142px;
             background-image: resolve("activity/free-mail/coupon.png");
             background-size: 100%;
             background-repeat: no-repeat;
-            margin-bottom: 10px;
+            margin-bottom: 14px;
         }
 
         .item-left {
@@ -49,6 +48,8 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+            padding-top: 10px;
+            width: 100%;
         }
 
         .time {
@@ -66,10 +67,12 @@
     }
 
     .receive-btn {
-        height: 116px;
+        height: 158px;
         width: 100%;
         background-image: resolve("activity/free-mail/list-btn.png");
         background-size: 100%;
         background-repeat: no-repeat;
+        position: fixed;
+        bottom: 0;
     }
 }