Create wechat
Browse files
wechat
ADDED
@@ -0,0 +1,345 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<meta charset="utf-8">
|
5 |
+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1, user-scalable=no">
|
6 |
+
<script type="text/javascript" src="static/js/jquery.min.js"></script>
|
7 |
+
<script type="text/javascript" src="static/js/base64.min.js"></script>
|
8 |
+
<style>
|
9 |
+
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 {
|
10 |
+
margin: 0;
|
11 |
+
padding: 0
|
12 |
+
}
|
13 |
+
|
14 |
+
ol, ul {
|
15 |
+
list-style-type: none;
|
16 |
+
list-style-image: none
|
17 |
+
}
|
18 |
+
|
19 |
+
body, button, input, select, textarea {
|
20 |
+
-ms-text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis;
|
21 |
+
text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis
|
22 |
+
}
|
23 |
+
|
24 |
+
h1, h2, h3, h4, h5, h6 {
|
25 |
+
font-weight: 400
|
26 |
+
}
|
27 |
+
|
28 |
+
* {
|
29 |
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
30 |
+
}
|
31 |
+
|
32 |
+
body {
|
33 |
+
background: #F6F5F7;
|
34 |
+
}
|
35 |
+
|
36 |
+
.beatHeader {
|
37 |
+
background: #494A4D;
|
38 |
+
height: 50px;
|
39 |
+
width: 100%;
|
40 |
+
position: relative;
|
41 |
+
z-index: 1;
|
42 |
+
overflow: hidden;
|
43 |
+
}
|
44 |
+
|
45 |
+
.beatMain {
|
46 |
+
position: relative;
|
47 |
+
/*z-index: 2;
|
48 |
+
padding: 0 16px;*/
|
49 |
+
margin: 14px;
|
50 |
+
margin-top: 20px;
|
51 |
+
}
|
52 |
+
|
53 |
+
.beatMain .imgContainer {
|
54 |
+
padding: 0 16px;
|
55 |
+
margin-top: 14px;
|
56 |
+
margin-bottom: 14px;
|
57 |
+
}
|
58 |
+
|
59 |
+
.beatMain .imgContainer img {
|
60 |
+
width: 100%;
|
61 |
+
height: auto;
|
62 |
+
box-shadow: 0px 3px 12px rgba(21, 0, 71, 0.16);
|
63 |
+
}
|
64 |
+
|
65 |
+
.beatMain .moonTitleContainer {
|
66 |
+
font-size: 14px;
|
67 |
+
color: rgba(0, 0, 0, 0.4);
|
68 |
+
margin-bottom: 16px;
|
69 |
+
}
|
70 |
+
|
71 |
+
.beatMain .moonTitleContainer span {
|
72 |
+
color: #FF5500;
|
73 |
+
margin-right: 16px;
|
74 |
+
}
|
75 |
+
|
76 |
+
.beatMain .itemContent {
|
77 |
+
font-size: 14px;
|
78 |
+
color: rgba(0, 0, 0, 0.80);
|
79 |
+
line-height: 21px;
|
80 |
+
text-align: left;
|
81 |
+
margin-bottom: 10px;
|
82 |
+
}
|
83 |
+
|
84 |
+
.beatMain .itemPrice {
|
85 |
+
font-family: STHeitiSC-Light;
|
86 |
+
font-size: 16px;
|
87 |
+
color: #FF5500;
|
88 |
+
line-height: 16.5px;
|
89 |
+
text-align: right;
|
90 |
+
margin-bottom: 10px;
|
91 |
+
}
|
92 |
+
|
93 |
+
.beatMain .itemTips {
|
94 |
+
font-size: 12px;
|
95 |
+
color: rgba(0,0,0,.4);
|
96 |
+
text-align: center;
|
97 |
+
}
|
98 |
+
|
99 |
+
.beatWord {
|
100 |
+
text-align: center;
|
101 |
+
}
|
102 |
+
|
103 |
+
.beatWord fieldset {
|
104 |
+
padding: 0.5rem;
|
105 |
+
border: 1px dashed #f54d23;
|
106 |
+
background: #fff;
|
107 |
+
border-radius: 5px;
|
108 |
+
}
|
109 |
+
|
110 |
+
.beatWord fieldset legend {
|
111 |
+
background: #f54d23;
|
112 |
+
border: none;
|
113 |
+
font-size: 0.8rem;
|
114 |
+
line-height: 20px;
|
115 |
+
color: #fff;
|
116 |
+
padding: 0 4px;
|
117 |
+
}
|
118 |
+
|
119 |
+
.itemCopy {
|
120 |
+
border-radius: 5px;
|
121 |
+
color: white;
|
122 |
+
font-size: 14px;
|
123 |
+
margin: 2px auto;
|
124 |
+
padding: 10px;
|
125 |
+
margin-bottom: 2px;
|
126 |
+
border: none;
|
127 |
+
background-color: #fb6a65;
|
128 |
+
width: 100%;
|
129 |
+
}
|
130 |
+
.copy-tip {
|
131 |
+
display: flex;
|
132 |
+
justify-content: space-around;
|
133 |
+
align-items: center;
|
134 |
+
background: linear-gradient(to right, #f9c492, #fb6a65);
|
135 |
+
color: white;
|
136 |
+
font-size: 12px;
|
137 |
+
height: 24px;
|
138 |
+
border-radius: 5px;
|
139 |
+
}
|
140 |
+
.jtone {
|
141 |
+
position: relative;
|
142 |
+
width: 0;
|
143 |
+
height: 0;
|
144 |
+
border-top: 12px solid transparent;
|
145 |
+
border-left: 10px solid white;
|
146 |
+
border-bottom: 12px solid transparent;
|
147 |
+
}
|
148 |
+
.jtone::before {
|
149 |
+
content: "";
|
150 |
+
position: absolute;
|
151 |
+
top: -12px;
|
152 |
+
left: -13px;
|
153 |
+
width: 0;
|
154 |
+
height: 0;
|
155 |
+
border-top: 12px solid transparent;
|
156 |
+
border-left: 10px solid #fab189;
|
157 |
+
border-bottom: 12px solid transparent;
|
158 |
+
}
|
159 |
+
.jttwo {
|
160 |
+
position: relative;
|
161 |
+
width: 0;
|
162 |
+
height: 0;
|
163 |
+
border-top: 12px solid transparent;
|
164 |
+
border-left: 10px solid white;
|
165 |
+
border-bottom: 12px solid transparent;
|
166 |
+
}
|
167 |
+
.jttwo::before {
|
168 |
+
content: "";
|
169 |
+
position: absolute;
|
170 |
+
top: -12px;
|
171 |
+
left: -13px;
|
172 |
+
width: 0;
|
173 |
+
height: 0;
|
174 |
+
border-top: 12px solid transparent;
|
175 |
+
border-left: 10px solid #fa9b7e;
|
176 |
+
border-bottom: 12px solid transparent;
|
177 |
+
}
|
178 |
+
.jtthree {
|
179 |
+
position: relative;
|
180 |
+
width: 0;
|
181 |
+
height: 0;
|
182 |
+
border-top: 12px solid transparent;
|
183 |
+
border-left: 10px solid white;
|
184 |
+
border-bottom: 12px solid transparent;
|
185 |
+
}
|
186 |
+
.jtthree::before {
|
187 |
+
content: "";
|
188 |
+
position: absolute;
|
189 |
+
top: -12px;
|
190 |
+
left: -13px;
|
191 |
+
width: 0;
|
192 |
+
height: 0;
|
193 |
+
border-top: 12px solid transparent;
|
194 |
+
border-left: 10px solid #fa8673;
|
195 |
+
border-bottom: 12px solid transparent;
|
196 |
+
}
|
197 |
+
.loader-container {
|
198 |
+
display: inline-block;
|
199 |
+
height: 250px;
|
200 |
+
width: 100%;
|
201 |
+
}
|
202 |
+
.loader {
|
203 |
+
position: relative;
|
204 |
+
margin: 0 auto;
|
205 |
+
margin-top: 100px;
|
206 |
+
}
|
207 |
+
.eight {
|
208 |
+
width: 100px;
|
209 |
+
height: 100px;
|
210 |
+
border-radius: 50%;
|
211 |
+
animation: loader8Animation 1.5s linear infinite;
|
212 |
+
margin-top: 25px;
|
213 |
+
margin-left: auto;
|
214 |
+
margin-right: auto;
|
215 |
+
}
|
216 |
+
.eight:before {
|
217 |
+
width: 20px;
|
218 |
+
height: 20px;
|
219 |
+
content: "";
|
220 |
+
position: absolute;
|
221 |
+
background-color: transparent;
|
222 |
+
top: 40px;
|
223 |
+
left: 40px;
|
224 |
+
border-radius: 50%;
|
225 |
+
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%);
|
226 |
+
}
|
227 |
+
@keyframes loader8Animation {
|
228 |
+
0% {
|
229 |
+
transform: rotate(0deg)
|
230 |
+
}
|
231 |
+
|
232 |
+
100% {
|
233 |
+
transform: rotate(360deg)
|
234 |
+
}
|
235 |
+
}
|
236 |
+
|
237 |
+
</style>
|
238 |
+
</head>
|
239 |
+
<body>
|
240 |
+
|
241 |
+
<div style="border: 1px ; max-width: 600px; margin: 0 auto;">
|
242 |
+
<div class="beatMain">
|
243 |
+
<div id="loader8" class="loader-container">
|
244 |
+
<div class="loader eight"></div>
|
245 |
+
</div>
|
246 |
+
<div class="imgContainer">
|
247 |
+
<img id="img" src="" alt="">
|
248 |
+
</div>
|
249 |
+
|
250 |
+
<div class="beatWord">
|
251 |
+
<fieldset>
|
252 |
+
|
253 |
+
<p id="itemWord" class="itemWord"><span id="taokey"></span></p>
|
254 |
+
</fieldset>
|
255 |
+
<button id="copy" type="button" data-clipboard-text="" class="itemCopy">一键复制</button>
|
256 |
+
</div>
|
257 |
+
<div id="copy-tip" class="copy-tip">
|
258 |
+
<span>长按框内</span>
|
259 |
+
<span class="jtone"></span>
|
260 |
+
<span>全选</span>
|
261 |
+
<span class="jttwo"></span>
|
262 |
+
<span>复制</span>
|
263 |
+
<span class="jtthree"></span>
|
264 |
+
<span><img src="https://weixin.qq.com/zh_CN/htmledition/images/wechat_logo_109.2x219536.png" style="width: 18px;vertical-align: middle;">粘贴到微信聊天</span>
|
265 |
+
</div>
|
266 |
+
</div>
|
267 |
+
</div>
|
268 |
+
|
269 |
+
<script type="text/javascript" src="static/js/clipboard.min.js"></script>
|
270 |
+
|
271 |
+
<script>
|
272 |
+
|
273 |
+
function rnd() {
|
274 |
+
// var random = Math.floor(Math.random() * (m - n + 1) + n);
|
275 |
+
var num = Math.ceil(Math.random()*10) - 1;
|
276 |
+
return num;
|
277 |
+
}
|
278 |
+
|
279 |
+
function getParams(paras){
|
280 |
+
var url = decodeURI(location.href);
|
281 |
+
// var url = location.href;
|
282 |
+
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
|
283 |
+
var returnValue;
|
284 |
+
for (i = 0; i < paraString.length; i++) {
|
285 |
+
var tempParas = paraString[i].split('=')[0];
|
286 |
+
var parasValue = paraString[i].split('=')[1];
|
287 |
+
if (tempParas === paras)
|
288 |
+
returnValue = parasValue;
|
289 |
+
}
|
290 |
+
if (typeof(returnValue) == "undefined") {
|
291 |
+
return "";
|
292 |
+
} else {
|
293 |
+
return returnValue;
|
294 |
+
}
|
295 |
+
}
|
296 |
+
|
297 |
+
$(function(){
|
298 |
+
var taowords = decodeURIComponent(getParams('taowords'));
|
299 |
+
var url = decodeURIComponent(getParams('url'));
|
300 |
+
var image = Base64.decode(decodeURIComponent(getParams('image')));
|
301 |
+
var taowords = ''
|
302 |
+
$('#img').attr('src', image);
|
303 |
+
$('#coupons').attr('href',url);
|
304 |
+
$('#copy').attr('data-clipboard-text', taowords);
|
305 |
+
$('#taokey').text(taowords);
|
306 |
+
if(image != ''){
|
307 |
+
img.onload = function () {
|
308 |
+
$('#loader8').hide();
|
309 |
+
}
|
310 |
+
}else{
|
311 |
+
$('#loader8').hide();
|
312 |
+
}
|
313 |
+
})
|
314 |
+
|
315 |
+
|
316 |
+
//复制文本
|
317 |
+
var clipboard = new Clipboard('.itemCopy');
|
318 |
+
clipboard.on('success',
|
319 |
+
function(e) {
|
320 |
+
if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
|
321 |
+
e.trigger.innerHTML = "已复制,粘贴到微信聊天打开";
|
322 |
+
e.trigger.style.backgroundColor = "#9ED29E";
|
323 |
+
e.trigger.style.borderColor = "#9ED29E";
|
324 |
+
//e.clearSelection();
|
325 |
+
e.trigger.disabled = true;
|
326 |
+
//2秒后按钮恢复原状
|
327 |
+
setTimeout(function() {
|
328 |
+
e.trigger.innerHTML = "一键复制";
|
329 |
+
e.trigger.style.backgroundColor = "#f54d23";
|
330 |
+
e.trigger.style.borderColor = "#f54d23";
|
331 |
+
e.trigger.disabled = false;
|
332 |
+
},
|
333 |
+
2000);
|
334 |
+
}
|
335 |
+
});
|
336 |
+
|
337 |
+
clipboard.on('error',
|
338 |
+
function(e) {
|
339 |
+
e.trigger.innerHTML = "复制失败";
|
340 |
+
e.trigger.style.backgroundColor = "#8f8f8f";
|
341 |
+
e.trigger.style.borderColor = "#8f8f8f";
|
342 |
+
});
|
343 |
+
</script>
|
344 |
+
</body>
|
345 |
+
</html>
|