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>— 活动规则 —</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>
效果图: