datex.js 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,462 @@
1
+ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h3,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}
2
+ html{
3
+ height:100%;
4
+ }
5
+ body{
6
+ height: 100%;
7
+ font-size: 14px;
8
+ font-family: Arial,Helvetica,"Microsoft Yahei";
9
+ color: rgb(110, 119, 129);
10
+ }
11
+ button, input {
12
+ font-family: Arial,Helvetica,"Microsoft Yahei";
13
+ }
14
+ img{
15
+ vertical-align: middle;
16
+ }
17
+ a{
18
+ text-decoration: none;
19
+ color: rgb(110, 119, 129);
20
+ }
21
+ a:hover{
22
+ text-decoration: underline;
23
+ }
24
+
25
+ .wrapper{
26
+ background: url('../image/word_map.png') center 10px no-repeat,url('../image/bg.svg') center top repeat-x;
27
+ }
28
+ .header{
29
+ margin-bottom: 15px;
30
+ }
31
+ .container{
32
+ padding-bottom: 30px;
33
+ }
34
+ .inner{
35
+ max-width: 1000px;
36
+ padding: 0 10px;
37
+ margin: 0 auto;
38
+ }
39
+
40
+ .mod-head .bd{
41
+ height: 36px;
42
+ padding: 10px 0;
43
+ text-align: right;
44
+ }
45
+ .mod-head .btn{
46
+ position: relative;
47
+ display: inline-block;
48
+ min-width: 56px;
49
+ height: 34px;
50
+ padding: 0 12px;
51
+ background: rgba(255,255,255,0.3);
52
+ border: 1px solid rgba(0,0,0,0.05);
53
+ border-radius: 6px;
54
+ line-height: 34px;
55
+ text-decoration: none;
56
+ text-align: center;
57
+ font-size: 14px;
58
+ color: #333;
59
+ overflow: hidden;
60
+ transition: color .2s,opacity .2s;
61
+ font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
62
+ outline: none;
63
+ -webkit-appearance: none;
64
+ }
65
+ .mod-head .btn:after {
66
+ content: " ";
67
+ position: absolute;
68
+ width: 100%;
69
+ height: 100%;
70
+ background: #000;
71
+ left: 0;
72
+ top: 0;
73
+ opacity: 0;
74
+ transition: opacity .2s;
75
+ border-radius: 6px;
76
+ overflow: hidden;
77
+ pointer-events: none;
78
+ }
79
+ .mod-head .btn span,.mod-head .btn svg{
80
+ vertical-align: middle;
81
+ }
82
+ .mod-head .btn svg,.mod-head .btn svg+span{
83
+ position: relative;
84
+ top: -1px;
85
+ }
86
+ .mod-head .btn:hover {
87
+ color: #000;
88
+ opacity: 1;
89
+ }
90
+ .mod-head .btn:hover:after {
91
+ opacity: .02;
92
+ }
93
+
94
+ .mod-panel{
95
+ margin-bottom: 75px;
96
+ }
97
+ .mod-panel .hd{
98
+ padding: 40px 0 30px;
99
+ line-height: 22px;
100
+ }
101
+ .mod-panel .hd h1{
102
+ margin-bottom: 30px;
103
+ line-height: 48px;
104
+ font-weight: bold;
105
+ font-size: 36px;
106
+ color:#1a2b3b;
107
+ }
108
+ .mod-panel .hd h1 span.tag{
109
+ display: inline-block;
110
+ padding: 0 8px;
111
+ margin: 0 5px;
112
+ background: rgba(255, 255, 255,0.8);
113
+ line-height: 26px;
114
+ vertical-align: middle;
115
+ font-size: 13px;
116
+ color: rgb(110, 119, 129);
117
+ border-radius: 4px;
118
+ box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
119
+ }
120
+ .mod-panel .hd p{
121
+ line-height: 64px;
122
+ text-align: right;
123
+ font-size: 16px;
124
+ }
125
+ .mod-panel .hd p .name{
126
+ margin: 0 10px;
127
+ }
128
+ .mod-panel .hd p .value{
129
+ font-size: 60px;
130
+ font-weight: bold;
131
+ font-family: emoji;
132
+ }
133
+ .mod-panel .bd ul{
134
+ margin-bottom: 50px;
135
+ overflow: hidden;
136
+ }
137
+ .mod-panel .bd li{
138
+ float: left;
139
+ width: 20%;
140
+ }
141
+ .mod-panel .bd .item{
142
+ padding: 10px 15px;
143
+ margin: 0 8px;
144
+ background: rgba(0 0 0 / 0.1);
145
+ border-radius: 6px;
146
+ }
147
+ .mod-panel .bd .item .name{
148
+ font-size: 16px;
149
+ font-weight: bold;
150
+ }
151
+ .mod-panel .bd h3{
152
+ line-height: 30px;
153
+ text-align: center;
154
+ font-size: 18px;
155
+ font-weight: bold;
156
+ }
157
+ .mod-panel .bd table{
158
+ width: 100%;
159
+ table-layout: fixed;
160
+ }
161
+ .mod-panel .bd caption{
162
+ line-height: 30px;
163
+ font-size: 15px;
164
+ font-weight: bold;
165
+ }
166
+ .mod-panel .bd th,.mod-panel .bd td{
167
+ padding: 6px 12px;
168
+ border: 1px solid #e2e2e2;
169
+ line-height: 22px;
170
+ }
171
+ .mod-panel .bd td.th{
172
+ background: #f5f5f5;
173
+ }
174
+ .mod-panel .bd thead{
175
+ background: #f5f5f5;
176
+ }
177
+ .mod-panel .bd .btn {
178
+ height: 34px;
179
+ min-width: 80px;
180
+ background: #2095f2;
181
+ border: medium none;
182
+ line-height: 34px;
183
+ vertical-align: middle;
184
+ font-size: 15px;
185
+ color: #fff;
186
+ cursor: pointer;
187
+ outline: none;
188
+ border-radius: 4px;
189
+ }
190
+ .mod-panel .bd .btn:hover{
191
+ background: #1b85da;
192
+ }
193
+ .mod-panel .bd .btn-green{
194
+ background: #4bae4f;
195
+ color: #fff;
196
+ }
197
+ .mod-panel .bd .btn-green:hover{
198
+ background: #47a04b;
199
+ }
200
+ .mod-panel .bd .btn-red{
201
+ background: #f56954;
202
+ color: #fff;
203
+ }
204
+ .mod-panel .bd .btn-red:hover{
205
+ background: #f4543c;;
206
+ }
207
+ .mod-panel .bd .btn-orange{
208
+ background: #ff9000;
209
+ color: #fff;
210
+ }
211
+ .mod-panel .bd .btn-orange:hover{
212
+ background: #e18309;
213
+ }
214
+ .mod-panel .bd .btn-small{
215
+ min-width: 36px;
216
+ margin-right: -1px;
217
+ cursor: pointer;
218
+ }
219
+ .mod-panel .bd .btn[disabled]{
220
+ background: #f0f0f0;
221
+ color: #aaa;
222
+ }
223
+ .mod-panel .bd textarea{
224
+ display: block;
225
+ width: 100%;
226
+ height: 120px;
227
+ padding:5px 10px;
228
+ background: #fafafa;
229
+ border: 1px solid #ebebeb;
230
+ box-sizing: border-box;
231
+ border-radius: 5px;
232
+ resize: none;
233
+ outline: none;
234
+ }
235
+ .mod-panel .bd p{
236
+ line-height: 22px;
237
+ }
238
+ .mod-panel .bd p span{
239
+ margin-right: 4px;
240
+ }
241
+ .mod-panel .bd .text-green{
242
+ color: #4bae4f;
243
+ }
244
+ .mod-panel .bd .text-red{
245
+ color:#f56954;
246
+ }
247
+ .mod-panel .bd .table-outer{
248
+ padding: 20px;
249
+ margin-bottom: 20px;
250
+ background: #fff;
251
+ border: 1px solid #f0f0f0;
252
+ box-shadow: 1px 1px 5px rgba(0,0,0,0.05);
253
+ border-radius: 8px;
254
+ }
255
+
256
+ .mod-article{
257
+ margin-bottom: 65px;
258
+ }
259
+ .mod-article .bd{
260
+ position: relative;
261
+ padding: 30px 0;
262
+ }
263
+ .mod-article .bd::before{
264
+ position: absolute;
265
+ top: 0;
266
+ left: 0;
267
+ content: '“';
268
+ font-size: 60px;
269
+ border-radius: 6px;
270
+ }
271
+ .mod-article .bd::after{
272
+ position: absolute;
273
+ bottom: -10px;
274
+ right: 0;
275
+ content: '”';
276
+ font-size: 60px;
277
+ border-radius: 6px;
278
+ }
279
+ .mod-article .bd p{
280
+ margin-bottom: 12px;
281
+ line-height: 28px;
282
+ font-size: 15px;
283
+ text-indent: 2em;
284
+ }
285
+
286
+ .mod-copy{
287
+ margin-bottom: 65px;
288
+ padding: 35px 0;
289
+ background: rgb(246, 248, 250);
290
+ }
291
+ .mod-copy .hd{
292
+ margin: 0 5px 5px;
293
+ line-height: 30px;
294
+ }
295
+ .mod-copy .hd span{
296
+ font-size: 18px;
297
+ font-weight: bold;
298
+ color: #646464;
299
+ }
300
+ .mod-copy .bd{
301
+ margin:0 5px;
302
+ }
303
+ .mod-copy .bd p{
304
+ line-height: 26px;
305
+ text-indent: 2em;
306
+ font-size: 15px;
307
+ }
308
+ .mod-copy .bd .buttons{
309
+ margin: 15px 0;
310
+ }
311
+ .mod-copy .bd .text-red{
312
+ font-weight: bold;
313
+ color: #fd7474;
314
+ }
315
+ .mod-copy .bd code{
316
+ display: block;
317
+ margin-bottom: 15px;
318
+ padding: 8px 15px;
319
+ line-height: 20px;
320
+ background: #fff;
321
+ border: 1px solid rgba(27,31,36,.15);
322
+ border-radius: 5px;
323
+ word-break: break-word;
324
+ }
325
+
326
+
327
+ .mod-foot .bd{
328
+ padding: 10px 0;
329
+ margin-bottom: 15px;
330
+ text-align: center;
331
+ }
332
+ .mod-foot .bd p{
333
+ line-height: 22px;
334
+ }
335
+ .mod-foot .bd p a,.mod-foot .bd p span{
336
+ vertical-align: middle;
337
+ }
338
+ .mod-foot .bd p.buttons{
339
+ margin: 10px 0 5px;
340
+ }
341
+ .mod-foot .box{
342
+ width: 200px;
343
+ height: 180px;
344
+ margin: 0 auto 20px;
345
+ line-height: 30px;
346
+ text-align: center;
347
+ overflow: hidden;
348
+ }
349
+ .mod-foot p{
350
+ line-height: 30px;
351
+ }
352
+
353
+ @media screen and (max-width: 1020px) {
354
+ .header{
355
+ margin-bottom: 10px;
356
+ }
357
+ .inner{
358
+ max-width: 640px;
359
+ }
360
+
361
+ .mod-head .hd span.tag{
362
+ padding: 5px 8px;
363
+ }
364
+ .mod-head .bd .btn{
365
+ padding: 0 6px;
366
+ font-size: 13px;
367
+ }
368
+
369
+ .mod-panel{
370
+ margin-bottom: 25px;
371
+ }
372
+ .mod-panel .hd{
373
+ float: none;
374
+ padding-top: 0;
375
+ width: auto;
376
+ }
377
+ .mod-panel .hd h1{
378
+ margin-bottom: 15px;
379
+ line-height: 26px;
380
+ font-size: 20px;
381
+ }
382
+ .mod-panel .hd p{
383
+ line-height: 22px;
384
+ font-size: 13px;
385
+ overflow: hidden;
386
+ }
387
+ .mod-panel .hd p .name{
388
+ margin: 0 5px;
389
+ }
390
+ .mod-panel .hd p .value{
391
+ font-size: 24px;
392
+ }
393
+ .mod-panel .bd ul{
394
+ margin-bottom: 30px;
395
+ }
396
+ .mod-panel .bd li{
397
+ width: 50%;
398
+ }
399
+ .mod-panel .bd .item{
400
+ margin:0 3px 6px;
401
+ }
402
+ .mod-panel .bd .table-outer{
403
+ padding: 20px 10px;
404
+ }
405
+ .mod-panel .bd .table-inner{
406
+ overflow-x: auto;
407
+ }
408
+ .mod-panel .bd table{
409
+ table-layout: auto;
410
+ }
411
+ .mod-panel .bd table td{
412
+ white-space: nowrap;
413
+ }
414
+ .mod-panel .bd table th:nth-child(1),.mod-panel .bd table td.country{
415
+ display: none;
416
+ }
417
+ .mod-panel .bd table th:nth-child(3),.mod-panel .bd table td.code{
418
+ display: none;
419
+ }
420
+
421
+ .mod-article{
422
+ margin-bottom: 25px;
423
+ }
424
+ .mod-article .bd{
425
+ padding: 15px 0;
426
+ }
427
+ .mod-article .bd::before{
428
+ font-size: 48px;
429
+ }
430
+ .mod-article .bd::after{
431
+ font-size: 48px;
432
+ }
433
+ .mod-article .bd p{
434
+ margin-bottom: 7px;
435
+ line-height: 22px;
436
+ font-size: 14px;
437
+ }
438
+
439
+ .mod-copy{
440
+ padding: 15px 0 25px;
441
+ margin-bottom: 25px;
442
+ }
443
+ .mod-copy .bd p{
444
+ line-height: 22px;
445
+ font-size: 14px;
446
+ }
447
+ }
448
+
449
+ @media screen and (max-width: 640px) {
450
+ .mod-panel .inner{
451
+ padding: 10px;
452
+ }
453
+ .mod-panel .bd .c-bd{
454
+ padding: 15px 10px;
455
+ }
456
+ .mod-panel .bd input[type="text"]{
457
+ width: 200px;
458
+ }
459
+ .mod-panel .bd .btn{
460
+ min-width: 64px;
461
+ }
462
+ }