@sjtdev/koishi-plugin-dota2tracker 1.0.3

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,1027 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Document</title>
7
+ <style>
8
+ html,
9
+ body {
10
+ background-color: black;
11
+ color: white;
12
+ width: 800px;
13
+ }
14
+
15
+ img {
16
+ vertical-align: middle;
17
+ }
18
+
19
+ p {
20
+ margin: 0;
21
+ }
22
+
23
+ .wrapper {
24
+ width: 800px;
25
+ height: auto;
26
+ /* border: 10px solid white; */
27
+ border-radius: 10px;
28
+ overflow: hidden;
29
+ }
30
+
31
+ .wrapper > div:not(.players) {
32
+ border-radius: 5px;
33
+ box-shadow: 0 0 5px #fff;
34
+ /* border: 5px solid #6cf; */
35
+ overflow: auto;
36
+ margin: 5px;
37
+ display: flex;
38
+ }
39
+
40
+ .players > div {
41
+ height: 1646px;
42
+ }
43
+
44
+ .match_info {
45
+ display: flex;
46
+ justify-content: space-around;
47
+ flex-wrap: wrap;
48
+ flex-direction: row;
49
+ position: relative;
50
+ }
51
+
52
+ .match_info .flag {
53
+ width: 100px;
54
+ height: 100px;
55
+ border-radius: 5px;
56
+ /* z-index: -1; */
57
+ }
58
+
59
+ .match_info .flag:not(.won) {
60
+ filter: grayscale(100%);
61
+ }
62
+
63
+ .match_info .rank,
64
+ .match_info .star {
65
+ position: absolute;
66
+ width: 64px;
67
+ bottom: 16px;
68
+ }
69
+
70
+ .match_info > p.won {
71
+ position: absolute;
72
+ width: 100px;
73
+ bottom: 0;
74
+ text-align: center;
75
+ left: 690px;
76
+ z-index: 1;
77
+ }
78
+
79
+ .match_info > p.won.radiant {
80
+ left: 0;
81
+ }
82
+
83
+ .match_info .details {
84
+ width: 590px;
85
+ display: flex;
86
+ flex-wrap: wrap;
87
+ justify-content: space-around;
88
+ align-content: space-between;
89
+ }
90
+
91
+ .match_info div.score {
92
+ display: flex;
93
+ width: 590px;
94
+ flex-direction: row;
95
+ align-items: baseline;
96
+ }
97
+
98
+ .match_info div.score .score {
99
+ /* width: 280px; */
100
+ flex-grow: 1;
101
+ text-align: center;
102
+ vertical-align: bottom;
103
+ font-size: 32px;
104
+ }
105
+
106
+ .match_info div.score .time {
107
+ line-height: 1;
108
+ vertical-align: bottom;
109
+ }
110
+
111
+ .players {
112
+ display: flex;
113
+ /* flex-direction: row; */
114
+ }
115
+
116
+ .players > div {
117
+ width: 400px;
118
+ display: flex;
119
+ flex-direction: column;
120
+ }
121
+
122
+ .player {
123
+ width: 390px;
124
+ border-radius: 5px;
125
+ box-shadow: 0 0 5px #fff;
126
+ /* border: 5px solid #6cf; */
127
+ overflow: hidden;
128
+ margin: 5px;
129
+ /* display: flex; */
130
+ flex-grow: 1;
131
+ }
132
+
133
+ .player > div {
134
+ /* border: 5px solid #6cf; */
135
+ display: flex;
136
+ flex-direction: row;
137
+ line-height: 24px;
138
+ }
139
+
140
+ .hero {
141
+ margin-bottom: 4px;
142
+ }
143
+
144
+ .hero .player_avatar {
145
+ width: 112px;
146
+ height: 63px;
147
+ position: relative;
148
+ border-radius: 4px;
149
+ overflow: hidden;
150
+ flex-grow: 0;
151
+ }
152
+
153
+ .player.giveup .hero .player_avatar::before {
154
+ content: "";
155
+ position: absolute;
156
+ top: 0;
157
+ right: 0;
158
+ bottom: 0;
159
+ left: 0;
160
+ width: 100%;
161
+ height: 100%;
162
+ background-size: contain;
163
+ background-position: center;
164
+ background-repeat: no-repeat;
165
+ background-image: url("data:image/png;base64,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");
166
+ }
167
+
168
+ .hero .player_avatar p {
169
+ position: absolute;
170
+ /* width: 86px; */
171
+ /* line-height: 0; */
172
+ line-height: 1.5;
173
+ font-size: 10px;
174
+ margin: 0;
175
+ }
176
+
177
+ .hero .player_avatar .party_line {
178
+ height: 2px;
179
+ top: 0;
180
+ width: 100%;
181
+ }
182
+
183
+ .hero .player_avatar .party_mark {
184
+ line-height: 1.5;
185
+ text-align: center;
186
+ width: 16px;
187
+ font-size: 10px;
188
+ top: 3px;
189
+ left: 2px;
190
+ background-color: rgba(0, 0, 0, 0.8);
191
+ }
192
+
193
+ .hero .player_avatar .party_line.party_I {
194
+ background-color: #caffe5;
195
+ }
196
+
197
+ .hero .player_avatar .party_mark.party_I {
198
+ color: #caffe5;
199
+ }
200
+
201
+ .hero .player_avatar .party_mark.party_I::after {
202
+ content: "I";
203
+ }
204
+
205
+ .hero .player_avatar .party_line.party_II {
206
+ background-color: #ffe484;
207
+ }
208
+
209
+ .hero .player_avatar .party_mark.party_II {
210
+ color: #ffe484;
211
+ }
212
+
213
+ .hero .player_avatar .party_mark.party_II::after {
214
+ content: "II";
215
+ }
216
+
217
+ .hero .player_avatar .party_line.party_III {
218
+ background-color: #e19be2;
219
+ }
220
+
221
+ .hero .player_avatar .party_mark.party_III {
222
+ color: #e19be2;
223
+ }
224
+
225
+ .hero .player_avatar .party_mark.party_III::after {
226
+ content: "III";
227
+ }
228
+
229
+ .hero .player_avatar .party_line.party_IV {
230
+ background-color: #ccdaf4;
231
+ }
232
+
233
+ .hero .player_avatar .party_mark.party_IV {
234
+ color: #ccdaf4;
235
+ }
236
+
237
+ .hero .player_avatar .party_mark.party_IV::after {
238
+ content: "IV";
239
+ }
240
+
241
+ .hero .player_avatar img {
242
+ width: 100%;
243
+ height: 100%;
244
+ flex-grow: 0;
245
+ }
246
+
247
+ .hero .player_avatar .position {
248
+ /* width: auto; */
249
+ text-align: right;
250
+ bottom: 1px;
251
+ right: 0;
252
+ color: #cccccc;
253
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5); /* 描边效果 */
254
+ }
255
+
256
+ .hero .player_avatar .position.p1::first-line {
257
+ color: red;
258
+ }
259
+
260
+ .hero .player_avatar .position.p2::first-line {
261
+ color: yellow;
262
+ }
263
+
264
+ .hero .player_avatar .position.p3::first-line {
265
+ color: green;
266
+ }
267
+
268
+ .hero .player_avatar .level {
269
+ left: 2px;
270
+ bottom: 1px;
271
+ right: auto;
272
+ font-size: 12px;
273
+ color: rgba(255, 255, 255, 1);
274
+ /* color: #cccccc; */
275
+ text-shadow: 0 0 4px black;
276
+ }
277
+
278
+ .hero .player_info {
279
+ /* width: 210px; */
280
+ text-align: center;
281
+ margin: 0 18px;
282
+ flex-grow: 0;
283
+ height: 63px;
284
+ font-size: 15px;
285
+ line-height: 1.5;
286
+ width: 144px;
287
+ }
288
+
289
+ .hero .player_info .player_name {
290
+ max-width: 100%;
291
+ overflow: hidden;
292
+ text-overflow: ellipsis;
293
+ white-space: nowrap;
294
+ }
295
+
296
+ .hero .player_info .player_performance {
297
+ text-wrap: nowrap;
298
+ }
299
+
300
+ .hero .player_info .networth {
301
+ color: rgb(203, 176, 42);
302
+ }
303
+
304
+ .hero .player_lane {
305
+ margin-top: 6px;
306
+ width: 44px;
307
+ height: 100%;
308
+ text-align: center;
309
+ display: flex;
310
+ flex-direction: column;
311
+ }
312
+
313
+ .hero .player_lane svg {
314
+ width: 44px;
315
+ height: 44px;
316
+ }
317
+
318
+ .hero .player_lane svg path {
319
+ /* fill: red; */
320
+ }
321
+
322
+ .hero .player_lane::after {
323
+ width: 100%;
324
+ font-size: 10px;
325
+ line-height: 1;
326
+ }
327
+
328
+ .hero .player_lane.victory::after {
329
+ content: "对线优势";
330
+ }
331
+
332
+ .hero .player_lane.stomp::after {
333
+ content: "对线碾压";
334
+ }
335
+
336
+ .hero .player_lane.tie::after {
337
+ content: "对线平手";
338
+ }
339
+
340
+ .hero .player_lane.fail::after {
341
+ content: "对线劣势";
342
+ }
343
+
344
+ .hero .player_lane.stomped::after {
345
+ content: "对线被碾";
346
+ }
347
+
348
+ .hero .player_lane.victory svg path {
349
+ fill: lightgreen;
350
+ }
351
+
352
+ .hero .player_lane.stomp svg path {
353
+ fill: green;
354
+ }
355
+
356
+ .hero .player_lane.stomped svg path {
357
+ fill: red;
358
+ }
359
+
360
+ .hero .player_rank {
361
+ flex-grow: 1;
362
+ position: relative;
363
+ }
364
+
365
+ .hero .player_rank .rank .medal {
366
+ z-index: 1;
367
+ }
368
+
369
+ .hero .player_rank .rank .star {
370
+ z-index: 2;
371
+ }
372
+
373
+ .hero .player_rank .rank p {
374
+ z-index: 3;
375
+ }
376
+
377
+ .hero .player_rank div {
378
+ height: 36px;
379
+ width: 36px;
380
+ top: 0;
381
+ right: 0;
382
+ position: absolute;
383
+ }
384
+
385
+ .hero .player_rank img {
386
+ top: 0;
387
+ right: 0;
388
+ position: absolute;
389
+ height: 36px;
390
+ }
391
+
392
+ .hero .player_rank .dotaPlusLevel {
393
+ background-size: 100%;
394
+ position: absolute;
395
+ top: auto;
396
+ bottom: 0;
397
+ }
398
+
399
+ .hero .player_rank p {
400
+ font-size: 10px;
401
+ line-height: 1;
402
+ position: absolute;
403
+ text-align: center;
404
+ width: 36px;
405
+ bottom: 0;
406
+ /* background-color: #222; */
407
+ /* border: black 1px solid; */
408
+ box-sizing: border-box;
409
+ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* 描边效果 */
410
+ }
411
+
412
+ .titles {
413
+ display: block;
414
+ margin-bottom: 4px;
415
+ padding-left: 4px;
416
+ height: 24px;
417
+ /* text-shadow: -1px -1px 2px #aaa, 1px -1px 2px #aaa, -1px 1px 2px #aaa, 1px 1px 2px #aaa; */ /*描边效果 */
418
+ }
419
+
420
+ .items {
421
+ margin-bottom: 2px;
422
+ position: relative;
423
+ }
424
+
425
+ .items > * {
426
+ /* margin-bottom: 14px; */
427
+ /* flex-basis: content; */
428
+ width: 0;
429
+ }
430
+
431
+ .items .item {
432
+ position: relative;
433
+ /* margin-bottom: 8px; */
434
+ width: 100%;
435
+ /* width: 54px; */
436
+ flex-grow: 1;
437
+ }
438
+
439
+ .item img {
440
+ width: 100%;
441
+ }
442
+
443
+ .item.recipe {
444
+ background-image: url("https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/recipe.png");
445
+ background-size: 100%;
446
+ }
447
+
448
+ .item.recipe img {
449
+ opacity: 0.75;
450
+ /* width: 50%; */
451
+ transform: scale(0.6);
452
+ transform-origin: top right;
453
+ }
454
+
455
+ .item .time {
456
+ text-align: center;
457
+ width: 100%;
458
+ margin: 0;
459
+ font-size: 12px;
460
+ line-height: 1;
461
+ position: absolute;
462
+ /* bottom: -8px; */
463
+ bottom: 0;
464
+ color: #ccc;
465
+ background-color: rgba(100, 100, 100, 0.75);
466
+ }
467
+
468
+ .items .items_normal {
469
+ flex-grow: 9;
470
+ display: flex;
471
+ flex-wrap: wrap;
472
+ }
473
+
474
+ .items .items_normal .item {
475
+ /* flex-grow: 2; */
476
+ width: 33.33%;
477
+ }
478
+
479
+ .items .items_backpack {
480
+ flex-grow: 2;
481
+ display: flex;
482
+ flex-direction: column;
483
+ }
484
+
485
+ .items .item.back {
486
+ filter: grayscale(100%);
487
+ }
488
+
489
+ .items .item.neutral {
490
+ flex-grow: 3;
491
+ width: 0;
492
+ background-repeat: no-repeat;
493
+ background-size: 100%;
494
+ background-position: center;
495
+ }
496
+
497
+ /* kkk */
498
+ .player.bear .items_buffs {
499
+ height: 73.78px;
500
+ /* margin-bottom: 4px; */
501
+ display: flex;
502
+ flex-direction: row;
503
+ }
504
+
505
+ .player.bear .items_buffs:nth-child(3) {
506
+ margin-bottom: 4.04px;
507
+ }
508
+
509
+ .player.bear .items {
510
+ display: flex;
511
+ height: 100%;
512
+ flex-wrap: wrap;
513
+ width: 250.74px;
514
+ margin-right: 4px;
515
+ }
516
+
517
+ .player.bear .items .item {
518
+ flex-grow: 0;
519
+ width: 41.79px;
520
+ position: relative;
521
+ }
522
+
523
+ .player.bear .ibs .item img {
524
+ width: 100%;
525
+ }
526
+
527
+ .player.bear .items .item.neutral {
528
+ margin-left: auto;
529
+ }
530
+
531
+ .player.bear .buffs,
532
+ .player.bear .support_items {
533
+ display: flex;
534
+ margin-left: auto;
535
+ width: 0;
536
+ flex-grow: 1;
537
+ flex-direction: row;
538
+ justify-content: flex-end;
539
+ }
540
+
541
+ .buffs_supportItems.slave {
542
+ width: 0;
543
+ flex-grow: 1;
544
+ display: flex;
545
+ flex-direction: column;
546
+ justify-content: space-between;
547
+ }
548
+
549
+ .buffs_supportItems.slave > .support_items,
550
+ .buffs_supportItems.slave > .buffs {
551
+ flex-grow: 0;
552
+ width: auto;
553
+ height: 24px;
554
+ display: flex;
555
+ flex-direction: row;
556
+ }
557
+
558
+ .buffs {
559
+ margin-bottom: 4px;
560
+ height: 24px;
561
+ }
562
+
563
+ .buffs section {
564
+ text-align: center;
565
+ }
566
+
567
+ .buff img,
568
+ .support_item img {
569
+ height: 24px;
570
+ }
571
+
572
+ .buffs .buff,
573
+ .support_item {
574
+ /* display: inline; */
575
+ position: relative;
576
+ }
577
+
578
+ .buff p,
579
+ .support_item p {
580
+ text-align: center;
581
+ width: 100%;
582
+ margin: 0;
583
+ font-size: 12px;
584
+ line-height: 1;
585
+ position: absolute;
586
+ bottom: 0;
587
+ color: #aaa;
588
+ background-color: rgba(100, 100, 100, 0.5);
589
+ }
590
+
591
+ .buffs section {
592
+ display: flex;
593
+ }
594
+
595
+ .player .details,
596
+ .buffs {
597
+ font-size: 13px;
598
+ flex-wrap: wrap;
599
+ /* height: 400px; */
600
+ align-content: space-between;
601
+ justify-content: space-between;
602
+ flex-direction: row;
603
+ /* justify-content: space-around; */
604
+ }
605
+
606
+ .player .details {
607
+ margin-bottom: 0;
608
+ }
609
+
610
+ .player .details section {
611
+ flex-grow: 1;
612
+ text-align: center;
613
+ margin: 0 4px;
614
+ }
615
+
616
+ .ban_list {
617
+ flex-wrap: wrap;
618
+ flex-direction: row;
619
+ }
620
+
621
+ .ban_list div {
622
+ width: 79px;
623
+ height: 44px;
624
+ background-repeat: no-repeat;
625
+ background-size: 100%;
626
+ position: relative;
627
+ }
628
+
629
+ .ban_list div img {
630
+ filter: grayscale(100%);
631
+ width: 100%;
632
+ vertical-align: middle;
633
+ }
634
+
635
+ .ban_list div::before {
636
+ filter: none;
637
+ position: absolute;
638
+ display: block;
639
+ /* width: 40px; */
640
+ width: 100%;
641
+ height: 100%;
642
+ /* background-color: red; */
643
+ content: "";
644
+ z-index: 1;
645
+ background: linear-gradient(to bottom left, transparent calc(50% - 1px), red calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px));
646
+ }
647
+ /* --------------------------------------- */
648
+ </style>
649
+ <script>
650
+ window.onload = function () {
651
+ // 查找所有具有指定类名的img元素
652
+ var images = document.querySelectorAll(".item img");
653
+ // 为每个元素添加onerror处理器
654
+ images.forEach(function (image) {
655
+ image.onerror = function () {
656
+ this.onerror = null; // 防止无限循环
657
+ this.classList.add("unload"); // 添加类
658
+ this.src = "backup-image.jpg"; // 设置备用图片
659
+ };
660
+ });
661
+ };
662
+ </script>
663
+ </head>
664
+ <body>
665
+ <div class="wrapper">
666
+ <div class="match_info">
667
+ <img src="../images/flag_radiant.png" alt="" class="flag radiant won" style="order: 1" />
668
+ <img src="../images/flag_dire.png" alt="" class="flag dire" style="order: 3" />
669
+ <p class="won radiant">获胜</p>
670
+ <div class="details" style="order: 2">
671
+ <p>比赛编号:<span class="mode">1234567890</span></p>
672
+ <p>模式:<span class="mode">全英雄选择</span></p>
673
+ <p>服务器:<span class="server">电信(上海)</span></p>
674
+ <p>起始时间:<span class="start_time">24/04/04 11:11:11</span></p>
675
+ <img src="../images/star_5.png" alt="" class="rank" />
676
+ <img src="../images/medal_8.png" alt="" class="rank" />
677
+ <p>结束时间:<span class="end_time">24/04/04 11:11:11</span></p>
678
+ <div class="score">
679
+ <p class="score radiant">22</p>
680
+ <p class="time">22:22</p>
681
+ <p class="score dire">33</p>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ <div class="players">
686
+ <div class="radiant_players">
687
+ <div class="player giveup">
688
+ <div class="hero">
689
+ <div class="player_avatar">
690
+ <img alt="" src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" />
691
+ <p class="party_line party_IV"></p>
692
+ <p class="party_mark party_IV"></p>
693
+ <p class="position p1">第1手<br />优势路</p>
694
+ <p class="level">30</p>
695
+ </div>
696
+ <div class="player_info">
697
+ <summary class="player_name">xxxxxxxxxxxxxxxxxxxxxx</summary>
698
+ <summary class="player_performance"><span class="kda">10/10/10</span>&nbsp;&nbsp;<span class="kc">10%</span>&nbsp;&nbsp;<span class="dc">10%</span></summary>
699
+ <summary class="player_net"><span class="networth">22222</span>&emsp;<span class="score">1.00</span></summary>
700
+ </div>
701
+ <div class="player_lane radiant victory"></div>
702
+ <div class="player_rank">
703
+ <div class="immortal"></div>
704
+ <div class="rank">
705
+ <img class="medal" src="../images/medal_8.png" alt="" />
706
+ <img class="star" src="../images/star_5.png" alt="" />
707
+ <p>1</p>
708
+ </div>
709
+ <div class="dotaPlusLevel">
710
+ <img src="../images/hero_badge_1.png" alt="" class="badge" />
711
+ <p class="level">1</p>
712
+ </div>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="titles">
717
+ <span style="color: #a00">破</span>
718
+ </div>
719
+
720
+ <div class="items">
721
+ <div class="items_normal">
722
+ <div class="item">
723
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/blink.png" alt="" />
724
+ <p class="time">33:33</p>
725
+ </div>
726
+ <div class="item">
727
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
728
+ <p class="time">33:33</p>
729
+ </div>
730
+ <div class="item">
731
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
732
+ <p class="time">33:33</p>
733
+ </div>
734
+ <div class="item">
735
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
736
+ <p class="time">33:33</p>
737
+ </div>
738
+ <div class="item">
739
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
740
+ <p class="time">33:33</p>
741
+ </div>
742
+ <div class="item">
743
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
744
+ <p class="time">33:33</p>
745
+ </div>
746
+ </div>
747
+ <div class="items_backpack">
748
+ <div class="item back recipe">
749
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
750
+ <p class="time">33:33</p>
751
+ </div>
752
+ <div class="item back">
753
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
754
+ <p class="time">33:33</p>
755
+ </div>
756
+ <div class="item back">
757
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
758
+ <p class="time">33:33</p>
759
+ </div>
760
+ </div>
761
+ <div class="item neutral" style="background-image: url(https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/nemesis_curse.png)"></div>
762
+ </div>
763
+ <div class="buffs">
764
+ <section>
765
+ <div class="buff">
766
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/aghanims_shard.png" alt="" />
767
+ <p></p>
768
+ </div>
769
+ <div class="buff">
770
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ultimate_scepter_2.png" alt="" />
771
+ <p></p>
772
+ </div>
773
+ <div class="buff">
774
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
775
+ <p>20</p>
776
+ </div>
777
+ </section>
778
+ <section>
779
+ <div class="support_item">
780
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/gem.png" alt="" />
781
+ <p>1</p>
782
+ </div>
783
+ <div class="support_item">
784
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ward_observer.png" alt="" />
785
+ <p>10</p>
786
+ </div>
787
+ <div class="support_item">
788
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ward_sentry.png" alt="" />
789
+ <p>12</p>
790
+ </div>
791
+ <div class="support_item">
792
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/smoke_of_deceit.png" alt="" />
793
+ <p>1</p>
794
+ </div>
795
+ </section>
796
+ </div>
797
+ <div class="details">
798
+ <section>英雄伤害:<span class="hero_damage">12345</span></section>
799
+ <section>建筑伤害:<span class="building_damage">21453</span></section>
800
+ <section>受到伤害(减免后):<span class="tak">55555</span></section>
801
+ <section>补刀:<span class="lh">500</span>/<span class="dn">50</span></section>
802
+ <section>GPM/XPM:<span class="gpm">500</span>/<span class="xpm">500</span></section>
803
+ <section>治疗量:<span class="heal">5000</span></section>
804
+ <section>控制时间:<span class="building_damage">15(5)</span>s</section>
805
+ </div>
806
+ </div>
807
+ </div>
808
+ <div class="dire_players">
809
+ <div class="player bear">
810
+ <div class="hero">
811
+ <div class="player_avatar">
812
+ <img alt="" src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" />
813
+ <p class="party_line party_IV"></p>
814
+ <p class="party_mark party_IV"></p>
815
+ <p class="position">第1手<br />优势路</p>
816
+ <p class="level">30</p>
817
+ </div>
818
+ <div class="player_info">
819
+ <summary class="player_name">xxxxxxxxxxxxxxxxxxxxxx</summary>
820
+ <summary class="player_performance"><span class="kda">10/10/10</span>&nbsp;&nbsp;<span class="kc">10%</span>&nbsp;&nbsp;<span class="dc">10%</span></summary>
821
+ <summary class="player_net"><span class="networth">22222</span>&emsp;<span class="score">1.00</span></summary>
822
+ </div>
823
+ <div class="player_rank">
824
+ <div class="immortal"></div>
825
+ <div class="other">
826
+ <img class="stars" src="../images/medal_7.png" alt="" />
827
+ <img class="rand" src="../images/star_5.png" alt="" />
828
+ </div>
829
+ </div>
830
+ </div>
831
+
832
+ <div class="items_buffs master">
833
+ <div class="items master">
834
+ <div class="item">
835
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/blink.png" alt="" />
836
+ <p class="time">33:33</p>
837
+ </div>
838
+ <div class="item">
839
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
840
+ <p class="time">33:33</p>
841
+ </div>
842
+ <div class="item">
843
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
844
+ <p class="time">33:33</p>
845
+ </div>
846
+ <div class="item">
847
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
848
+ <p class="time">33:33</p>
849
+ </div>
850
+ <div class="item">
851
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
852
+ <p class="time">33:33</p>
853
+ </div>
854
+ <div class="item">
855
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
856
+ <p class="time">33:33</p>
857
+ </div>
858
+ <div class="item back">
859
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
860
+ <p class="time">33:33</p>
861
+ </div>
862
+ <div class="item back">
863
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
864
+ <p class="time">33:33</p>
865
+ </div>
866
+ <div class="item back">
867
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
868
+ <p class="time">33:33</p>
869
+ </div>
870
+ <div class="item neutral">
871
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/nemesis_curse.png" alt="" />
872
+ </div>
873
+ </div>
874
+ <div class="buffs master">
875
+ <div class="buff">
876
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/aghanims_shard.png" alt="" />
877
+ <p></p>
878
+ </div>
879
+ <div class="buff">
880
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ultimate_scepter_2.png" alt="" />
881
+ <p></p>
882
+ </div>
883
+ <div class="buff">
884
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
885
+ <p>20</p>
886
+ </div>
887
+ <div class="buff">
888
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
889
+ <p>20</p>
890
+ </div>
891
+ <div class="buff">
892
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
893
+ <p>20</p>
894
+ </div>
895
+ <div class="buff">
896
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
897
+ <p>20</p>
898
+ </div>
899
+ </div>
900
+ </div>
901
+ <div class="items_buffs slave">
902
+ <div class="items slave">
903
+ <div class="item">
904
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/blink.png" alt="" />
905
+ <p class="time">33:33</p>
906
+ </div>
907
+ <div class="item">
908
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
909
+ <p class="time">33:33</p>
910
+ </div>
911
+ <div class="item">
912
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
913
+ <p class="time">33:33</p>
914
+ </div>
915
+ <div class="item">
916
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
917
+ <p class="time">33:33</p>
918
+ </div>
919
+ <div class="item">
920
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
921
+ <p class="time">33:33</p>
922
+ </div>
923
+ <div class="item">
924
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
925
+ <p class="time">33:33</p>
926
+ </div>
927
+ <div class="item back">
928
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
929
+ <p class="time">33:33</p>
930
+ </div>
931
+ <div class="item back">
932
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
933
+ <p class="time">33:33</p>
934
+ </div>
935
+ <div class="item back">
936
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/phase_boots.png" alt="" />
937
+ <p class="time">33:33</p>
938
+ </div>
939
+ <div class="item neutral">
940
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/nemesis_curse.png" alt="" />
941
+ </div>
942
+ </div>
943
+ <div class="buffs_supportItems slave">
944
+ <div class="buffs">
945
+ <div class="buff">
946
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/aghanims_shard.png" alt="" />
947
+ <p></p>
948
+ </div>
949
+ <div class="buff">
950
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ultimate_scepter_2.png" alt="" />
951
+ <p></p>
952
+ </div>
953
+ <div class="buff">
954
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
955
+ <p>20</p>
956
+ </div>
957
+ <div class="buff">
958
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
959
+ <p>20</p>
960
+ </div>
961
+ <div class="buff">
962
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
963
+ <p>20</p>
964
+ </div>
965
+ <div class="buff">
966
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/abilities/pudge_flesh_heap.png" alt="" />
967
+ <p>20</p>
968
+ </div>
969
+ </div>
970
+ <div class="support_items">
971
+ <div class="support_item">
972
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/gem.png" alt="" />
973
+ <p>1</p>
974
+ </div>
975
+ <div class="support_item">
976
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ward_observer.png" alt="" />
977
+ <p>10</p>
978
+ </div>
979
+ <div class="support_item">
980
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/ward_sentry.png" alt="" />
981
+ <p>12</p>
982
+ </div>
983
+ <div class="support_item">
984
+ <img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/items/smoke_of_deceit.png" alt="" />
985
+ <p>1</p>
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <div class="details">
992
+ <section>英雄伤害:<span class="hero_damage">12345</span></section>
993
+ <section>建筑伤害:<span class="building_damage">21453</span></section>
994
+ <section>受到伤害(减免后):<span class="tak">55555</span></section>
995
+ <section>补刀:<span class="lh">500</span>/<span class="dn">50</span></section>
996
+ <section>GPM/XPM:<span class="gpm">500</span>/<span class="xpm">500</span></section>
997
+ <section>治疗量:<span class="heal">5000</span></section>
998
+ <section>控制时间:<span class="building_damage">15(5)</span>s</section>
999
+ </div>
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+ <div class="ban_list">
1004
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1005
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1006
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1007
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1008
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1009
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1010
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1011
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1012
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1013
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1014
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1015
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1016
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1017
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1018
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1019
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1020
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1021
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1022
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1023
+ <div class="ban_hero"><img src="https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/hoodwink.png" alt="" /></div>
1024
+ </div>
1025
+ </div>
1026
+ </body>
1027
+ </html>