| | <!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 taowords = decodeURIComponent(getParams('taowords')); |
| | var url = decodeURIComponent(getParams('url')); |
| | var image = Base64.decode(decodeURIComponent(getParams('image'))); |
| | var taowords = '' |
| | $('#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> |
