常规活动页面制作

2019独角兽企业重金招聘Python工程师标准>>>

超过一屏的活动页制作

常见活动页制作：页面超过一屏，自适应;使用layer插件；

方法一：直接给body添加整张背景图片，老大说太大，让我做成两部分，见方法二；

方法二：分为两部分，上部分为banner,下半部分添加为body的背景图，占据一定的位置；图片自适应，并且不会被压缩。

<div class="container" id="container">
    <div class="top_img">
        <img src="/Public/mobile/images/cuxiao/sendcoupon/coupon_top.png">
        <div class="receive_coupon" id="receive_coupon">
            <!-- 领取样式 -->
            <empty name="overdue">
                <if condition="$qualifying">
                    <div id="has-send">
                        <span>200元现金券</span>
                        <a id="receive_btn">立即领取</a>
                    </div>
                    <else/>
                    <p>已经领取</p>
                </if>
                <else/>
                <p>活动已结束</p>
            </empty>
        </div>
    </div>

    <div class="am-margin-horizontal-sm info" id="info">
        <h3>—&nbsp;&nbsp;活动规则&nbsp;&nbsp;—</h3>
        <p><span>1.</span>此优惠券除鼠标和电脑包外，全场通用，不开发票，不找零，不兑现,不可叠加使用。支付订单时可使用。</p>
        <p><span>2.</span>此优惠券有效使用期限从2018年2月1日起截止至2018年2月28日，过期将作废。</p>
        <p><span>3.</span>此优惠券只能使用一次，取消订单优惠券不返还。</p>
        <p><span>4.</span>订单成交以订单实际审核状态为准，如下单审核没有通过，则订单不能成交。</p>
        <p><span>5.</span>通过订单信息判断为刷单等不正常交易行为，快租365有权不予发货。</p>
        <p><span>6.</span>快租365在法律允许范围内对活动拥有最终解释权。</p>
    </div>
</div>
<!-- 领取成功 -->
<div id="receive_success" class="kz-hide" style="color: #fff;">
    <div class="am-text-center" style="padding:15px 0 10px;">
        <img src="__MOBILE__images/cuxiao/sendcoupon/success.png" alt="" width="28px">
    </div>
    <div class="am-text-center am-text-sm">恭喜您，领取成功!</div>
</div>

<script>
$(function () {
    // 设置内容位置
    var btnTop = ($(window).width() * 414/640);
    $('#receive_coupon').css({'top':btnTop+'px','opacity':1})

    // 领取优惠券
    $("#receive_btn").click(function(){

        $.post('/home/user/receiveCoupon',{},function (data) {
            if(data.status){
                layer.open({
                    type: 1,
                    shade: false,
                    area: ['140px', '90px'],  // 大小
                    title: false,
                    skin:'addcasrt',  //自定义样式类
                    closeBtn: false,
                    time:3000,   //关闭按钮
                    content: $('#receive_success')   //提示框的内容
                });
            }else{
                if(data.code=='200001'){
                    layer.msg(data.msg)
                    location.href = '/home/user/login?retUrl=/home/cuxiao/sendcoupon'
                }else{
                    layer.msg(data.msg)
                }
            }
        },'json')
    })
})
</script>

<style>
    #dragable{ display: none;}
    body{
        background:#141d34 url(/Public/mobile/images/cuxiao/sendcoupon/coupon_bg.jpg) no-repeat bottom center ;background-size:100% auto;
    }

    .top_img{ width: 100%; height: auto;}
    .top_img img{ width: 100%; height: auto;}
    /* 领取红包输入框 */

    .receive_coupon { position: absolute; left:50%;transform:translateX(-50%); width: 313px; height: 60px; background:url("/Public/mobile/images/cuxiao/sendcoupon/receive_coupon.png");background-size: 100% 100%; opacity: 0;}
    .receive_coupon span { position: absolute;left:45px; font-size: 20px; line-height:60px; color: #fff;font-weight: bold; }
    .receive_coupon a { position: absolute; top: 16px; right: 45px; width: 66px;height: 27px;border-radius: 3px; font-size: 12px; background-color: #fff; line-height: 27px; color: #df0b17; text-align: center;}
    .receive_coupon p {font-size: 20px; line-height:60px; color: #fff;font-weight: bold; text-align: center; }

    /* 文案信息 */
    .info { color: #fff; padding: 50px 0 20px;}
    .info h3 { margin-bottom:15px;font-size: 16px; text-align: center; }
    .info p{ margin:5px 0;padding: 0;display: flex;font-size: 12px;}
    .info span { display: inline-block;}

    /* 弹窗样式 */
    #receive_success {width: 140px;height: 90px;border-radius: 4px;}
    .addcasrt { background: rgba(0, 0, 0, 0.8)!important;}
</style>

效果图：

转载于:https://my.oschina.net/shuaihong/blog/1614903