preview.html
3.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>礼包效果预览</title>
<link rel="stylesheet" href="css/nanshen.css"/>
<style>
.msg {height:2.25rem; line-height:2.25rem; font-size:0.75rem; color:#323232; position:absolute; top:16.625rem; z-index:5; width:80%; left:10%; right:10%; text-align:center}
.layoutscene {margin:1rem auto 0 auto; width:80%; min-height:18.75rem; background:#FFF; border-radius:1.25rem; -webkit-border-radius:1.25rem; box-shadow:0 0 2.5rem rgba(0,0,0,0.10); -webkit-box-shadow:0 0 2.5rem rgba(0,0,0,0.10); overflow:hidden}
.layout_gift > div {margin:15px 4% 0 4%; text-align:center; line-height:1.75rem; font-size:0.875rem; width:92%}
.layout_gift > div > h3 {margin:0;padding:0;font-size:0.9375rem; font-weight:bold}
.btn_b {display:block; position:fixed; bottom:0; width:100%; height:66px; background:#EEE; text-align:center}
.btn_b.donation {height:auto; position:static; background:#FFF; margin:0 22%; box-sizing:border-box; -webkit-box-sizing:border-box; width:auto}
.btn_b.donation:after {content:""; display:block; clear:both}
.prompt{color:#afafaf; font-size:0.6875rem; text-align:center; line-height:30px; padding:10px 0;}
.prompt:before {content:""; display:inline-block; width:16px; height:16px; margin-right:5px; vertical-align:middle; background:url(images/horn-icon.png) no-repeat center center; background-size:cover}
.btn_b a {margin-top: 0.9375rem; display: block; width: 100%; background: #f33b2f; background-size: 5.28125rem auto; text-align: center; height: 2.6875rem; line-height: 2.6875rem; font-size:0.875rem; font-weight:bold; color:#fff; -webkit-border-radius: 25px; border-radius: 25px; box-sizing:border-box; -webkit-box-sizing:border-box; box-shadow: 0 0 1.25rem rgba(255,69,67,0.50); text-decoration:none}
.button a{display:inline-block; font-size:1rem; color:#fff; border-radius:5px; -webkit-border-radius:5px; width:70%; text-align:center; line-height:46px; height:46px; margin-top:20px; background:#f60}
.btn_b.donation a:nth-child(2) {background:#FFF; border:1px solid #ff3f32; color:#ff3f32; box-shadow:none; -webkit-box-shadow:none}
</style>
</head>
<body>
<div class="msg">一点心意，希望你喜欢！</div>
<div class="layoutscene">
<!--头图start!-->
<div class="nanshen">
<div class="fireworks"></div>
<div class="fireworks2"></div>
<div class="fireworks3"></div>
<div class="fireworks4"></div>
<div class="eye"></div>
</div>
<!--头图end!-->
</div>
<div class="layout_gift">
<div>
<h3>您的好友赠送您</h3>
<div>（此处将显示您购买的礼品）</div>
</div>
</div>
<div class="btn_b donation">
<a class="btn" href="javascript:;">立即领取</a>
<a class="btn" href="javascript:;">转赠他人</a>
</div>
<div class="prompt">为保障隐私，收礼人地址信息不会透露给送礼人。</div>
</body>
</html>