|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1, user-scalable=no"> |
|
<script type="text/javascript" src="static/js/jquery.min.js"></script> |
|
<script type="text/javascript" src="static/js/base64.min.js"></script> |
|
<style> |
|
blockquote, body, dd, dir, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, input, legend, menu, ol, optgroup, p, pre, tbody, td, textarea, tfoot, th, thead, ul { |
|
margin: 0; |
|
padding: 0 |
|
} |
|
|
|
ol, ul { |
|
list-style-type: none; |
|
list-style-image: none |
|
} |
|
|
|
body, button, input, select, textarea { |
|
-ms-text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis; |
|
text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-weight: 400 |
|
} |
|
|
|
* { |
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|
} |
|
|
|
body { |
|
background: #F6F5F7; |
|
} |
|
|
|
.beatHeader { |
|
background: #494A4D; |
|
height: 50px; |
|
width: 100%; |
|
position: relative; |
|
z-index: 1; |
|
overflow: hidden; |
|
} |
|
|
|
.beatMain { |
|
position: relative; |
|
|
|
|
|
margin: 14px; |
|
margin-top: 20px; |
|
} |
|
|
|
.beatMain .imgContainer { |
|
padding: 0 16px; |
|
margin-top: 14px; |
|
margin-bottom: 14px; |
|
} |
|
|
|
.beatMain .imgContainer img { |
|
width: 100%; |
|
height: auto; |
|
box-shadow: 0px 3px 12px rgba(21, 0, 71, 0.16); |
|
} |
|
|
|
.beatMain .moonTitleContainer { |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.4); |
|
margin-bottom: 16px; |
|
} |
|
|
|
.beatMain .moonTitleContainer span { |
|
color: #FF5500; |
|
margin-right: 16px; |
|
} |
|
|
|
.beatMain .itemContent { |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.80); |
|
line-height: 21px; |
|
text-align: left; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.beatMain .itemPrice { |
|
font-family: STHeitiSC-Light; |
|
font-size: 16px; |
|
color: #FF5500; |
|
line-height: 16.5px; |
|
text-align: right; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.beatMain .itemTips { |
|
font-size: 12px; |
|
color: rgba(0,0,0,.4); |
|
text-align: center; |
|
} |
|
|
|
.beatWord { |
|
text-align: center; |
|
} |
|
|
|
.beatWord fieldset { |
|
padding: 0.5rem; |
|
border: 1px dashed #f54d23; |
|
background: #fff; |
|
border-radius: 5px; |
|
} |
|
|
|
.beatWord fieldset legend { |
|
background: #f54d23; |
|
border: none; |
|
font-size: 0.8rem; |
|
line-height: 20px; |
|
color: #fff; |
|
padding: 0 4px; |
|
} |
|
|
|
.itemCopy { |
|
border-radius: 5px; |
|
color: white; |
|
font-size: 14px; |
|
margin: 2px auto; |
|
padding: 10px; |
|
margin-bottom: 2px; |
|
border: none; |
|
background-color: #fb6a65; |
|
width: 100%; |
|
} |
|
.copy-tip { |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
background: linear-gradient(to right, #f9c492, #fb6a65); |
|
color: white; |
|
font-size: 12px; |
|
height: 24px; |
|
border-radius: 5px; |
|
} |
|
.jtone { |
|
position: relative; |
|
width: 0; |
|
height: 0; |
|
border-top: 12px solid transparent; |
|
border-left: 10px solid white; |
|
border-bottom: 12px solid transparent; |
|
} |
|
.jtone::before { |
|
content: ""; |
|
position: absolute; |
|
top: -12px; |
|
left: -13px; |
|
width: 0; |
|
height: 0; |
|
border-top: 12px solid transparent; |
|
border-left: 10px solid #fab189; |
|
border-bottom: 12px solid transparent; |
|
} |
|
.jttwo { |
|
position: relative; |
|
width: 0; |
|
height: 0; |
|
border-top: 12px solid transparent; |
|
border-left: 10px solid white; |
|
border-bottom: 12px solid transparent; |
|
} |
|
.jttwo::before { |
|
content: ""; |
|
position: absolute; |
|
top: -12px; |
|
left: -13px; |
|
width: 0; |
|
height: 0; |
|
border-top: 12px solid transparent; |
|
border-left: 10px solid #fa9b7e; |
|
border-bottom: 12px solid transparent; |
|
} |
|
.jtthree { |
|
position: relative; |
|
width: 0; |
|
height: 0; |
|
border-top: 12px solid transparent; |
|
border-left: 10px solid white; |
|
border-bottom: 12px solid transparent; |
|
} |
|
.jtthree::before { |
|
content: ""; |
|
position: absolute; |
|
top: -12px; |
|
left: -13px; |
|
width: 0; |
|
height: 0; |
|
border-top: 12px solid transparent; |
|
border-left: 10px solid #fa8673; |
|
border-bottom: 12px solid transparent; |
|
} |
|
.loader-container { |
|
display: inline-block; |
|
height: 250px; |
|
width: 100%; |
|
} |
|
.loader { |
|
position: relative; |
|
margin: 0 auto; |
|
margin-top: 100px; |
|
} |
|
.eight { |
|
width: 100px; |
|
height: 100px; |
|
border-radius: 50%; |
|
animation: loader8Animation 1.5s linear infinite; |
|
margin-top: 25px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
.eight:before { |
|
width: 20px; |
|
height: 20px; |
|
content: ""; |
|
position: absolute; |
|
background-color: transparent; |
|
top: 40px; |
|
left: 40px; |
|
border-radius: 50%; |
|
box-shadow: 0px -50px 0px 0px rgb(159 236 136), -36px -36px 0px -1px rgb(159 236 136 / 88%), -50px 0px 0px -2px rgb(159 236 136 / 75%), -36px 36px 0px -3px rgb(159 236 136 / 63%), 0px 50px 0px -4px rgb(159 236 136 / 50%), 36px 36px 0px -5px rgb(159 236 136 / 38%), 50px 0px 0px -6px rgb(159 236 136 / 25%), 36px -36px 0px -7px rgb(159 236 136 / 13%); |
|
} |
|
@keyframes loader8Animation { |
|
0% { |
|
transform: rotate(0deg) |
|
} |
|
|
|
100% { |
|
transform: rotate(360deg) |
|
} |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div style="border: 1px ; max-width: 600px; margin: 0 auto;"> |
|
<div class="beatMain"> |
|
<div id="loader8" class="loader-container"> |
|
<div class="loader eight"></div> |
|
</div> |
|
<div class="imgContainer"> |
|
<img id="img" src="" alt=""> |
|
</div> |
|
|
|
<div class="beatWord"> |
|
<fieldset> |
|
|
|
<p id="itemWord" class="itemWord"><span id="taokey"></span></p> |
|
</fieldset> |
|
<button id="copy" type="button" data-clipboard-text="" class="itemCopy">一键复制</button> |
|
</div> |
|
<div id="copy-tip" class="copy-tip"> |
|
<span>长按框内</span> |
|
<span class="jtone"></span> |
|
<span>全选</span> |
|
<span class="jttwo"></span> |
|
<span>复制</span> |
|
<span class="jtthree"></span> |
|
<span><img src="https://weixin.qq.com/zh_CN/htmledition/images/wechat_logo_109.2x219536.png" style="width: 18px;vertical-align: middle;">粘贴到微信聊天</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script type="text/javascript" src="static/js/clipboard.min.js"></script> |
|
|
|
<script> |
|
|
|
function rnd() { |
|
|
|
var num = Math.ceil(Math.random()*10) - 1; |
|
return num; |
|
} |
|
|
|
function getParams(paras){ |
|
var url = decodeURI(location.href); |
|
|
|
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); |
|
var returnValue; |
|
for (i = 0; i < paraString.length; i++) { |
|
var tempParas = paraString[i].split('=')[0]; |
|
var parasValue = paraString[i].split('=')[1]; |
|
if (tempParas === paras) |
|
returnValue = parasValue; |
|
} |
|
if (typeof(returnValue) == "undefined") { |
|
return ""; |
|
} else { |
|
return returnValue; |
|
} |
|
} |
|
|
|
$(function(){ |
|
var url = decodeURIComponent(getParams('url')); |
|
var image = Base64.decode(decodeURIComponent(getParams('image'))); |
|
var words = Base64.decode(decodeURIComponent(getParams('words'))); |
|
$('#img').attr('src', image); |
|
$('#coupons').attr('href',url); |
|
$('#copy').attr('data-clipboard-text', taowords); |
|
$('#taokey').text(taowords); |
|
if(image != ''){ |
|
img.onload = function () { |
|
$('#loader8').hide(); |
|
} |
|
}else{ |
|
$('#loader8').hide(); |
|
} |
|
}) |
|
|
|
|
|
|
|
var clipboard = new Clipboard('.itemCopy'); |
|
clipboard.on('success', |
|
function(e) { |
|
if (e.trigger.disabled == false || e.trigger.disabled == undefined) { |
|
e.trigger.innerHTML = "已复制，粘贴到微信聊天打开"; |
|
e.trigger.style.backgroundColor = "#9ED29E"; |
|
e.trigger.style.borderColor = "#9ED29E"; |
|
|
|
e.trigger.disabled = true; |
|
|
|
setTimeout(function() { |
|
e.trigger.innerHTML = "一键复制"; |
|
e.trigger.style.backgroundColor = "#f54d23"; |
|
e.trigger.style.borderColor = "#f54d23"; |
|
e.trigger.disabled = false; |
|
}, |
|
2000); |
|
} |
|
}); |
|
|
|
clipboard.on('error', |
|
function(e) { |
|
e.trigger.innerHTML = "复制失败"; |
|
e.trigger.style.backgroundColor = "#8f8f8f"; |
|
e.trigger.style.borderColor = "#8f8f8f"; |
|
}); |
|
</script> |
|
</body> |
|
</html> |
