| <!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> |
