@golstats/gsc-top-player 1.0.0 → 1.0.2

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.
Files changed (21) hide show
  1. package/dist/{FilterConditions-55d68355-Dpbg-_AB.js → FilterConditions-55d68355-C5NIJbY6.js} +1 -1
  2. package/dist/{FilterField-59a73e38-j9kmr0oF.js → FilterField-59a73e38-DO8nYLqs.js} +1 -1
  3. package/dist/{FilterSubcategories-a9b32cc9-DwhgmIwf.js → FilterSubcategories-a9b32cc9-DlkHni1L.js} +1 -1
  4. package/dist/gsc-top-player.css +1 -1
  5. package/dist/gsc-top-player.es.js +1 -1
  6. package/dist/gsc-top-player.umd.js +11 -15
  7. package/dist/images/events/logo-fusionado.svg +38 -0
  8. package/dist/{index-oO1T2oQg.js → index-DfxUh38Q.js} +4115 -5038
  9. package/dist/logo-team@2x.png +0 -0
  10. package/dist/player-shadow-02@2x.png +0 -0
  11. package/dist/player-shadow@2x.png +0 -0
  12. package/dist/styles.css +906 -921
  13. package/package.json +1 -1
  14. package/src/App.vue +7 -12
  15. package/src/components/comparative/dummy-top-players.js +122 -0
  16. package/src/components/comparative/gsc-button.vue +8 -19
  17. package/src/components/comparative/gsc-header-tops.vue +1 -4
  18. package/src/components/comparative/gsc-row.vue +1624 -1810
  19. package/src/components/comparative/gsc-top.vue +162 -166
  20. package/src/components/comparative/gsc-tops-full.vue +11 -1
  21. package/src/components/gsc-top-player.vue +16 -2
package/src/components/comparative/gsc-row.vue CHANGED
@@ -1,1810 +1,1624 @@
1
- <template>
2
- <div
3
- ref="myDivRef2"
4
- style="
5
- border-left: rgba(13, 29, 41, 0.7) 1px solid;
6
- border-right: rgba(13, 29, 41, 0.7) 1px solid;
7
- "
8
- >
9
- <div v-if="type == 0" :class="rowwPlayerClass" id="container-row-player">
10
- <!-- jugador -->
11
- <div :class="containerLeftClass" id="container-left">
12
- <div :class="positionContainerClass">
13
- <div :class="$style.numberPosition">{{ data.position }}</div>
14
- </div>
15
- <div :class="playerContainerClass">
16
- <img :class="imgPlayerIconClass" :src="data.player_photo" />
17
- <div :class="manchesterUnitedClass">
18
- <template v-if="elementSize.width <= 420">{{ data.player_short }}</template>
19
- <template v-else>{{ data.player_name }}</template>
20
- </div>
21
- <img
22
- :class="$style.chivasIcon"
23
- v-if="elementSize.width <= 420"
24
- alt=""
25
- :src="data.team_logo"
26
- />
27
- </div>
28
- </div>
29
- <div :class="containerRightClass" id="container-right">
30
- <div :class="$style.block01">
31
- <div :class="$style.nameTeamGames" v-if="elementSize.width > 420">
32
- <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
33
- <div :class="$style.teamName" v-if="elementSize.width > 540">{{ data.team_abrev }}</div>
34
- </div>
35
- <div :class="$style.position" v-if="elementSize.width > 730">
36
- <span :class="$style.dfC">{{ data.player_position }}</span>
37
- </div>
38
- <div :class="$style.age" v-if="elementSize.width > 960">{{ data.player_age }}</div>
39
- <div :class="$style.country" v-if="elementSize.width > 960">
40
- <img :class="$style.manchesterUnitedIcon" alt="" :src="data.player_country_flag" />
41
- </div>
42
- <div :class="$style.playedGames" v-if="elementSize.width > 540">
43
- {{ data.player_games }}
44
- </div>
45
- <div :class="$style.playedMinutes" v-if="elementSize.width > 635">
46
- {{ data.player_min }}
47
- </div>
48
- </div>
49
- <div :class="block02Class">
50
- <div :class="$style.containesOptions">
51
- <div :class="$style.leagueName" v-if="elementSize.width > 960">{{ data.total }}</div>
52
- <div :class="containerBtnVideosClass">
53
- <template
54
- v-if="canPlayVideos || (game.awayTeam.team_id == teamWidget && typeData != 1)"
55
- >
56
- <GSCButton
57
- :icon="iconVideos"
58
- :icon-size="iconSize"
59
- :icon-position="iconPosition"
60
- :width="buttonWidth"
61
- :height="buttonHeight"
62
- :border-radius="buttonRadius"
63
- :border-width="buttonBorderWidth"
64
- :background-color="buttonBackground"
65
- :font-family="buttonfontFamily"
66
- :border-color="buttonBorderColor"
67
- :text-value="buttonTextValue"
68
- :font-size="buttonFontSize"
69
- @click="emitEventMedia(data)"
70
- v-if="elementSize.width > 635"
71
- />
72
- <GSCButton
73
- :mini="true"
74
- :icon="iconVideos"
75
- :icon-size="iconSizeMini"
76
- :icon-position="iconPosition"
77
- :width="buttonWidthMini"
78
- :height="buttonHeightMini"
79
- :border-radius="buttonRadius"
80
- :border-width="buttonBorderWidth"
81
- :background-color="buttonBackground"
82
- :font-family="buttonfontFamily"
83
- :border-color="buttonBorderColor"
84
- :font-size="buttonFontSize"
85
- @click="emitEventMedia(data)"
86
- v-else
87
- />
88
- </template>
89
- <div :class="numberOfVideosClass" v-if="elementSize.width <= 635">
90
- {{ data.total }}
91
- </div>
92
- </div>
93
- </div>
94
- <svg
95
- v-if="arrow"
96
- :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
97
- width="12"
98
- height="8"
99
- viewBox="0 0 12 8"
100
- :fill="colorArrow"
101
- xmlns="http://www.w3.org/2000/svg"
102
- @click="clickExpand(data.id)"
103
- >
104
- <path
105
- fill-rule="evenodd"
106
- clip-rule="evenodd"
107
- d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
108
- :fill="colorArrow"
109
- />
110
- </svg>
111
- </div>
112
- </div>
113
- </div>
114
-
115
- <div
116
- v-if="type == 1"
117
- :class="rowTeamClass"
118
- :style="elementSize.width > 540 ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)' : ''"
119
- id="container-row-player"
120
- >
121
- <!-- equipo -->
122
- <div :class="containerLeftType1Class" id="container-left">
123
- <div :class="positionContainertype1Class">
124
- <div :class="$style.numberPositionType1">{{ data.position }}</div>
125
- <div :class="iconFavoritesType1Class">
126
- <img :class="$style.shapeIconType1" alt="" :src="data.team_logo" />
127
- </div>
128
- </div>
129
- <div :class="playerContainerType1Class">
130
- <div :class="typeView == 0 ? $style.tijuanaWrapperType1 : $style.tijuanaWrapperType1NoBg">
131
- <img :class="$style.tijuanaIconType1" alt="" :src="data.team_logo" />
132
- </div>
133
- <div :class="manchesterUnitedType1Class">{{ data.team_abrev }}</div>
134
- </div>
135
- </div>
136
- <div :class="containerRightType1Class" id="container-right">
137
- <div :class="$style.block01TitlesType1">
138
- <div :class="teamNameWrapperType1Class" v-if="elementSize.width > 540">
139
- <div :class="$style.teamNameType1">
140
- C/{{ data.frequency }} <template v-if="data.category != 2">min</template
141
- ><template v-else>segs</template>
142
- </div>
143
- </div>
144
- <div :class="ageWrapperType1Class" v-if="elementSize.width > 960">
145
- <div :class="ageType1Class">{{ data.promthistournament }}</div>
146
- </div>
147
- <div :class="playedGamesWrapperType1Class" v-if="elementSize.width > 1086">
148
- <div :class="playedGamesType1Class">{{ data.promlasttournament }}</div>
149
- </div>
150
- <div :class="playedMinutesWrapperType1Class" v-if="elementSize.width > 770">
151
- <div :class="playedMinutesType1Class">{{ data.team_games }}</div>
152
- </div>
153
- </div>
154
- <div :class="block02Type1Class">
155
- <div :class="$style.containesOptionsType1Games">
156
- <div :class="leagueNameWrapperType1Class">
157
- <div :class="leagueNameType1Class">{{ data.total }}</div>
158
- </div>
159
- <div :class="$style.containerBtnVideosType1Games">
160
- <GSCButton
161
- :icon="iconVideos"
162
- :icon-size="iconSize"
163
- :icon-position="iconPosition"
164
- :width="buttonWidth"
165
- :height="buttonHeight"
166
- :border-radius="buttonRadius"
167
- :border-width="buttonBorderWidth"
168
- :background-color="buttonBackground"
169
- :font-family="buttonfontFamily"
170
- :border-color="buttonBorderColor"
171
- :text-value="buttonTextValue"
172
- :font-size="buttonFontSize"
173
- @click="emitEventMedia(data)"
174
- v-if="elementSize.width > 679 && canPlayVideos"
175
- />
176
- <GSCButton
177
- :mini="true"
178
- :icon="iconVideos"
179
- :icon-size="iconSizeMini"
180
- :icon-position="iconPosition"
181
- :width="buttonWidthMini"
182
- :height="buttonHeightMini"
183
- :border-radius="buttonRadius"
184
- :border-width="buttonBorderWidth"
185
- :background-color="buttonBackground"
186
- :font-family="buttonfontFamily"
187
- :border-color="buttonBorderColor"
188
- :font-size="buttonFontSize"
189
- @click="emitEventMedia(data)"
190
- v-else
191
- />
192
- <div :class="numberOfVideosType1Class">{{ data.total }}</div>
193
- </div>
194
- </div>
195
- <svg
196
- v-if="arrow"
197
- :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
198
- width="12"
199
- height="8"
200
- viewBox="0 0 12 8"
201
- :fill="colorArrow"
202
- xmlns="http://www.w3.org/2000/svg"
203
- @click="clickExpand(data.id)"
204
- >
205
- <path
206
- fill-rule="evenodd"
207
- clip-rule="evenodd"
208
- d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
209
- :fill="colorArrow"
210
- />
211
- </svg>
212
- </div>
213
- </div>
214
- </div>
215
- <div v-if="type == 2" :class="rowwPlayerClass" id="container-row-player">
216
- <!-- scouting -->
217
- <div :class="containerLeftClass" id="container-left">
218
- <div :class="positionContainerClass">
219
- <div :class="$style.numberPosition">{{ data.position }}</div>
220
- </div>
221
- <div :class="playerContainerClass">
222
- <img :class="imgPlayerIconClass" :src="data.player_photo" />
223
- <div :class="manchesterUnitedClass">
224
- {{ data.player_name }}
225
- </div>
226
- <img
227
- :class="$style.chivasIcon"
228
- v-if="elementSize.width <= 420"
229
- alt=""
230
- :src="data.team_logo"
231
- />
232
- </div>
233
- </div>
234
- <div :class="containerRightClass" id="container-right">
235
- <div :class="$style.block01">
236
- <div :class="$style.nameTeamGames" v-if="elementSize.width > 420">
237
- <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
238
- <div :class="$style.teamName" v-if="elementSize.width > 540">{{ data.team_abrev }}</div>
239
- </div>
240
- <div :class="$style.position" v-if="elementSize.width > 730">
241
- <span :class="$style.dfC">{{ data.player_position }}</span>
242
- </div>
243
- <div :class="$style.age" v-if="elementSize.width > 960">{{ data.player_age }}</div>
244
- <div :class="$style.country" v-if="elementSize.width > 960">
245
- <img :class="$style.manchesterUnitedIcon" alt="" :src="data.player_country_flag" />
246
- </div>
247
- <div :class="$style.playedGames" v-if="elementSize.width > 540">
248
- {{ data.player_games }}
249
- </div>
250
- <div :class="$style.playedMinutes" v-if="elementSize.width > 635">
251
- {{ data.player_min }}
252
- </div>
253
- <div :class="$style.playedMinutes" v-if="elementSize.width > 635">
254
- {{ data.league_name }}
255
- </div>
256
- </div>
257
- <div :class="block02Class">
258
- <div :class="$style.containesOptions">
259
- <div :class="containerBtnVideosClass">
260
- <GSCButton
261
- v-if="canPlayVideos"
262
- :icon="iconVideos"
263
- :icon-size="iconSize"
264
- :icon-position="iconPosition"
265
- :width="elementSize.width <= 680 ? '83px' : buttonWidth"
266
- :height="buttonHeight"
267
- :border-radius="buttonRadius"
268
- :border-width="buttonBorderWidth"
269
- :background-color="buttonBackground"
270
- :font-family="buttonfontFamily"
271
- :border-color="buttonBorderColor"
272
- :text-value="buttonTextValue"
273
- :font-size="buttonFontSize"
274
- @click="emitEventMedia(data)"
275
- :style="
276
- elementSize.width <= 680
277
- ? elementSize.width <= 420
278
- ? 'margin-right: 35px;'
279
- : 'margin-right: 0px;'
280
- : ''
281
- "
282
- />
283
- <!-- <GSCButton
284
- :mini="true"
285
- :icon="iconVideos"
286
- :icon-size="iconSizeMini"
287
- :icon-position="iconPosition"
288
- :width="buttonWidthMini"
289
- :height="buttonHeightMini"
290
- :border-radius="buttonRadius"
291
- :border-width="buttonBorderWidth"
292
- :background-color="buttonBackground"
293
- :font-family="buttonfontFamily"
294
- :border-color="buttonBorderColor"
295
- :font-size="buttonFontSize"
296
- :style="
297
- elementSize.width <= 680
298
- ? elementSize.width <= 420
299
- ? 'margin-left: 15px;'
300
- : 'margin-left: 35px;'
301
- : ''
302
- "
303
- @click="emitEventMedia(data)"
304
- v-else
305
- />-->
306
- </div>
307
- </div>
308
- <svg
309
- :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
310
- width="12"
311
- height="8"
312
- viewBox="0 0 12 8"
313
- :fill="colorArrow"
314
- xmlns="http://www.w3.org/2000/svg"
315
- @click="clickExpand(data.id)"
316
- >
317
- <path
318
- fill-rule="evenodd"
319
- clip-rule="evenodd"
320
- d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
321
- :fill="colorArrow"
322
- />
323
- </svg>
324
- </div>
325
- </div>
326
- </div>
327
- </div>
328
- </template>
329
- <script>
330
- import GSCButton from './gsc-button.vue'
331
- import { ref } from 'vue'
332
- import useElementSize from './useElementSize'
333
- export default {
334
- components: {
335
- GSCButton,
336
- },
337
- computed: {
338
- manchesterUnitedType1Class() {
339
- const width = this.elementSize.width
340
- if (width <= 320) {
341
- return this.$style.manchesterUnitedType1320
342
- } else if (width <= 460) {
343
- return this.$style.manchesterUnitedType1460
344
- } else {
345
- return this.$style.manchesterUnitedType1
346
- }
347
- },
348
- containerRightType1Class() {
349
- const width = this.elementSize.width
350
- if (width <= 320) {
351
- return this.$style.containerRightType1320Games
352
- } else if (width <= 420) {
353
- return this.$style.containerRightType1420Games
354
- } else {
355
- return this.$style.containerRightType1Games
356
- }
357
- },
358
- teamNameWrapperType1Class() {
359
- const width = this.elementSize.width
360
- if (width <= 960) {
361
- return this.$style.teamNameWrapperType1960
362
- } else if (width <= 1086) {
363
- return this.$style.teamNameWrapperType11086
364
- } else {
365
- return this.$style.teamNameWrapperType1
366
- }
367
- },
368
- ageWrapperType1Class() {
369
- const width = this.elementSize.width
370
- if (width <= 680) {
371
- return this.$style.ageWrapperType1680
372
- } else if (width <= 1086) {
373
- return this.$style.ageWrapperType11086
374
- } else {
375
- return this.$style.ageWrapperType1
376
- }
377
- },
378
- ageType1Class() {
379
- const width = this.elementSize.width
380
- if (width <= 960) {
381
- return this.$style.ageType1960
382
- } else {
383
- return this.$style.ageType1
384
- }
385
- },
386
- playedGamesWrapperType1Class() {
387
- const width = this.elementSize.width
388
- if (width <= 680) {
389
- return this.$style.playedGamesWrapperType1680
390
- } else if (width <= 960) {
391
- return this.$style.playedGamesWrapperType1960
392
- } else {
393
- return this.$style.playedGamesWrapperType1
394
- }
395
- },
396
- playedGamesType1Class() {
397
- const width = this.elementSize.width
398
- if (width <= 540) {
399
- return this.$style.playedGamesType1540
400
- } else if (width <= 960) {
401
- return this.$style.playedGamesType1960
402
- } else if (width <= 1086) {
403
- return this.$style.playedGamesType11086
404
- } else {
405
- return this.$style.playedGamesType1
406
- }
407
- },
408
- playedMinutesWrapperType1Class() {
409
- const width = this.elementSize.width
410
- if (width <= 1086) {
411
- return this.$style.playedMinutesWrapperType11086
412
- } else {
413
- return this.$style.playedMinutesWrapperType1
414
- }
415
- },
416
- playedMinutesType1Class() {
417
- const width = this.elementSize.width
418
- if (width <= 680) {
419
- return this.$style.playedMinutesType1680
420
- } else {
421
- return this.$style.playedMinutesType1
422
- }
423
- },
424
- block02Type1Class() {
425
- const width = this.elementSize.width
426
- if (width <= 320) {
427
- return this.$style.block02Type1320Games
428
- } else if (width <= 350) {
429
- return this.$style.block02Type1350Games
430
- } else if (width <= 680) {
431
- return this.$style.block02Type1680Games
432
- } else {
433
- return this.$style.block02Type1Games
434
- }
435
- },
436
- leagueNameWrapperType1Class() {
437
- const width = this.elementSize.width
438
- if (width <= 680) {
439
- return this.$style.leagueNameWrapperType1680
440
- } else if (width <= 960) {
441
- return this.$style.leagueNameWrapperType1960
442
- } else {
443
- return this.$style.leagueNameWrapperType1
444
- }
445
- },
446
- leagueNameType1Class() {
447
- const width = this.elementSize.width
448
- if (width <= 960) {
449
- return this.$style.leagueNameType1960
450
- } else {
451
- return this.$style.leagueNameType1
452
- }
453
- },
454
- numberOfVideosType1Class() {
455
- const width = this.elementSize.width
456
- if (width <= 680) {
457
- return this.$style.numberOfVideosType1680
458
- } else if (width <= 1232) {
459
- return this.$style.numberOfVideosType11232
460
- } else {
461
- return this.$style.numberOfVideosType1
462
- }
463
- },
464
- containerLeftType1Class() {
465
- const width = this.elementSize.width
466
- if (width <= 320) {
467
- return this.$style.containerLeftType1320
468
- } else if (width <= 350) {
469
- return this.$style.containerLeftType1350
470
- } else if (width <= 680) {
471
- return this.$style.containerLeftType1680
472
- } else {
473
- return this.$style.containerLeftType1
474
- }
475
- },
476
- positionContainertype1Class() {
477
- const width = this.elementSize.width
478
- if (width <= 380) {
479
- return this.$style.positionContainertype1380
480
- } else if (width <= 420) {
481
- return this.$style.positionContainertype1420
482
- } else if (width <= 680) {
483
- return this.$style.positionContainertype1680
484
- } else {
485
- return this.$style.positionContainertype1
486
- }
487
- },
488
- rowTeamClass() {
489
- const width = this.elementSize.width
490
- if (width <= 320) {
491
- return this.$style.rowTeam320
492
- } else if (width <= 350) {
493
- return this.$style.rowTeam350
494
- } else if (width <= 420) {
495
- return this.$style.rowTeam420
496
- } else if (width <= 460) {
497
- return this.$style.rowTeam460
498
- } else {
499
- return this.$style.rowTeam
500
- }
501
- },
502
- containerBtnVideosClass() {
503
- return this.$style.containerBtnVideosGames
504
- },
505
- numberOfVideosClass() {
506
- const width = this.elementSize.width
507
- if (width <= 620) {
508
- return this.$style.numberOfVideos620
509
- } else {
510
- return this.$style.numberOfVideos
511
- }
512
- },
513
- block02Class() {
514
- const width = this.elementSize.width
515
- if (width <= 420) {
516
- return this.$style.block02420Games
517
- } else if (width <= 620) {
518
- return this.$style.block02620Games
519
- } else if (width <= 960) {
520
- return this.$style.block02960Games
521
- } else {
522
- return this.$style.block02Games
523
- }
524
- },
525
- imgPlayerIconClass() {
526
- const width = this.elementSize.width
527
- if (width <= 420) {
528
- return this.$style.imgPlayerIcon420
529
- } else if (width <= 460) {
530
- return this.$style.imgPlayerIcon460
531
- } else {
532
- return this.$style.imgPlayerIcon
533
- }
534
- },
535
- manchesterUnitedClass() {
536
- const width = this.elementSize.width
537
- if (width <= 360) {
538
- return this.$style.manchesterUnited360Games
539
- } else if (width <= 420) {
540
- return this.$style.manchesterUnited420Games
541
- } else if (width <= 460) {
542
- return this.$style.manchesterUnited460Games
543
- } else {
544
- return this.$style.manchesterUnitedGames
545
- }
546
- },
547
- containerRightClass() {
548
- const width = this.elementSize.width
549
- if (width <= 420) {
550
- return this.$style.containerRight420Games
551
- } else if (width <= 960) {
552
- return this.$style.containerRight960Games
553
- } else {
554
- return this.$style.containerRightGames
555
- }
556
- },
557
- playerContainerType1Class() {
558
- const width = this.elementSize.width
559
- if (width <= 320) {
560
- return this.$style.playerContainerType1320Games
561
- } else if (width <= 460) {
562
- return this.$style.playerContainerType1460Games
563
- } else {
564
- return this.$style.playerContainerType1Games
565
- }
566
- },
567
- playerContainerClass() {
568
- const width = this.elementSize.width
569
- if (width <= 420) {
570
- return this.$style.playerContainer420Games
571
- } else if (width <= 460) {
572
- return this.$style.playerContainer460Games
573
- } else {
574
- return this.$style.playerContainerGames
575
- }
576
- },
577
- iconFavoritesClass() {
578
- const width = this.elementSize.width
579
- if (width <= 420) {
580
- return this.$style.iconFavorites420
581
- } else {
582
- return this.$style.iconFavorites
583
- }
584
- },
585
- iconFavoritesType1Class() {
586
- const width = this.elementSize.width
587
- if (width <= 320) {
588
- return this.$style.iconFavoritesType1320
589
- } else {
590
- return this.$style.iconFavoritesType1
591
- }
592
- },
593
- containerLeftClass() {
594
- const width = this.elementSize.width
595
- if (width <= 420) {
596
- return this.$style.containerLeft420Games
597
- } else if (width <= 620) {
598
- return this.$style.containerLeft620Games
599
- } else {
600
- return this.$style.containerLeftGames
601
- }
602
- },
603
- positionContainerClass() {
604
- const width = this.elementSize.width
605
- if (width <= 620) {
606
- return this.$style.positionContainer620
607
- } else {
608
- return this.$style.positionContainer
609
- }
610
- },
611
- rowwPlayerClass() {
612
- const width = this.elementSize.width
613
- if (width <= 420) {
614
- return this.$style.rowwPlayer420Games
615
- } else if (width <= 460) {
616
- return this.$style.rowwPlayer460Games
617
- } else if (width <= 960) {
618
- return this.$style.rowwPlayer960Games
619
- } else {
620
- return this.$style.rowwPlayerGames
621
- }
622
- },
623
- },
624
- setup() {
625
- const myDivRef2 = ref('myDivRef2')
626
- const { elementSize } = useElementSize(myDivRef2)
627
- return {
628
- myDivRef2,
629
- elementSize,
630
- }
631
- },
632
- props: {
633
- typeData: {
634
- type: Number,
635
- default: 1,
636
- },
637
- canPlayVideos: {
638
- type: Boolean,
639
- default: false,
640
- },
641
- arrow: {
642
- type: Boolean,
643
- default: false,
644
- },
645
- teamWidget: {
646
- type: Number,
647
- default: 0,
648
- },
649
- type: { type: Number, default: 0 },
650
- typeView: { type: Number, default: 0 },
651
- isExpanded: { type: Boolean, default: false },
652
- background: { type: String, default: '#172531' },
653
- height: { type: String, default: '35px' },
654
- fontColor: { type: String, default: '#F4F4F4' },
655
- fontSize: { type: String, default: '12px' },
656
- fontFamily: { type: String, default: 'Poppins-Regular' },
657
- data: { type: Object, default: () => {} },
658
- game: { type: Object, default: () => {} },
659
- colorArrow: { type: String, default: '#D9D9D9' },
660
- buttonTextValue: { type: String, default: 'Ver videos' },
661
- iconVideos: {
662
- type: String,
663
- default: 'https://golstatsimages.blob.core.windows.net/images-library/arrow-btn.png',
664
- },
665
- iconSize: { type: String, default: '13px' },
666
- iconSizeMini: { type: String, default: '13px' },
667
- iconPosition: { type: String, default: 'left' },
668
- buttonWidth: { type: String, default: '93px' },
669
- buttonWidthMini: { type: String, default: '24px' },
670
- buttonHeightMini: { type: String, default: '24px' },
671
- buttonHeight: { type: String, default: '30px' },
672
- buttonRadius: { type: String, default: '30px' },
673
- buttonBorderWidth: { type: Number, default: 1 },
674
- buttonBackground: { type: String, default: '#ffffff1a' },
675
- buttonfontFamily: { type: String, default: 'Poppins-Regular' },
676
- buttonBorderColor: { type: String, default: '#55636e' },
677
- buttonFontSize: { type: String, default: '10px' },
678
- },
679
- data: () => ({
680
- expand: false,
681
- }),
682
- methods: {
683
- clickExpand(id_player) {
684
- // this.expand = !this.expand
685
- this.$emit('expand', { expand: !this.isExpanded, id: id_player })
686
- },
687
- emitEventMedia(data) {
688
- this.$emit('mediadata', data)
689
- },
690
- },
691
- }
692
- </script>
693
- <style module>
694
- @import '/css/fonts.css';
695
- .rotate {
696
- transform: rotate(180deg);
697
- }
698
- :root {
699
- /* fonts */
700
-
701
- /* font sizes */
702
- --font-size-3xsrow: 14px;
703
- --font-size-xsrow: 12px;
704
- --font-size-2xsrow: 11px;
705
- --color-darkslategray-100row: #183143;
706
-
707
- /* Colors */
708
- --color-gray-100row: #172531;
709
- --color-gray-200row: rgba(255, 255, 255, 0.16);
710
- --color-gray-300row: rgba(255, 255, 255, 0.08);
711
-
712
- --color-whitesmokerow: #f4f4f4;
713
- --color-darkslategrayrow: #183143;
714
-
715
- /* Gaps */
716
- --gap-13xlrow: 32px;
717
- --gap-0row: 0px;
718
- --gap-5xlrow: 24px;
719
- --gap-baserow: 16px;
720
- --gap-19xlrow: 38px;
721
- --gap-3xsrow: 10px;
722
- --gap-6xsrow: 7px;
723
- --gap-9xlrow: 28px;
724
- --gap-xsrow: 12px;
725
- --gap-midrow: 17px;
726
-
727
- /* Paddings */
728
- --padding-xlrow: 0px;
729
- --padding-lgrow: 18px;
730
- --padding-9xlrow: 28px;
731
- --padding-xsrow: 12px;
732
- --padding-9xsrow: 4px;
733
- --padding-4xsrow: 9px;
734
- --padding-baserow: 16px;
735
-
736
- /* Border radiuses */
737
- --br-45xlrow: 64px;
738
- }
739
- /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
740
- /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
741
- /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
742
- .positionContainer {
743
- display: flex;
744
- flex-direction: row;
745
- align-items: center;
746
- justify-content: flex-start;
747
- gap: var(--gap-baserow);
748
- }
749
- .positionContainer620 {
750
- display: flex;
751
- flex-direction: row;
752
- align-items: center;
753
- justify-content: flex-start;
754
- gap: var(--gap-xsrow);
755
- }
756
- .rowwPlayerGames {
757
- align-self: stretch;
758
- display: flex;
759
- height: v-bind(height) !important;
760
- flex-direction: row;
761
- padding: var(--padding-xlrow) var(--padding-lgrow) var(--padding-xlrow) var(--padding-lgrow);
762
- align-items: center;
763
- justify-content: flex-start;
764
- gap: var(--gap-13xlrow);
765
- text-align: right;
766
- background-color: v-bind(background);
767
- font-size: v-bind(fontSize);
768
- color: v-bind(fontColor);
769
- font-family: v-bind(fontFamily);
770
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
771
- }
772
- .rowwPlayer960Games {
773
- align-self: stretch;
774
- display: flex;
775
- height: v-bind(height) !important;
776
- flex-direction: row;
777
- padding: var(--padding-xlrow) var(--padding-lgrow) var(--padding-xlrow) var(--padding-9xlrow);
778
- align-items: center;
779
- justify-content: flex-start;
780
- text-align: right;
781
- background-color: v-bind(background);
782
- font-size: v-bind(fontSize);
783
- color: v-bind(fontColor);
784
- font-family: v-bind(fontFamily);
785
- gap: var(--gap-0row);
786
- }
787
- .rowwPlayer420Games {
788
- align-self: stretch;
789
- display: flex;
790
- height: v-bind(height) !important;
791
- flex-direction: row;
792
- align-items: center;
793
- justify-content: flex-start;
794
- text-align: right;
795
- background-color: v-bind(background);
796
- font-size: v-bind(fontSize);
797
- color: v-bind(fontColor);
798
- font-family: v-bind(fontFamily);
799
- gap: var(--gap-0row);
800
- padding: 0 13px;
801
- box-sizing: border-box;
802
- }
803
- .rowwPlayer460Games {
804
- align-self: stretch;
805
- display: flex;
806
- height: v-bind(height) !important;
807
- flex-direction: row;
808
- align-items: center;
809
- justify-content: flex-start;
810
- text-align: right;
811
- background-color: v-bind(background);
812
- font-size: v-bind(fontSize);
813
- color: v-bind(fontColor);
814
- font-family: v-bind(fontFamily);
815
- gap: var(--gap-0row);
816
- padding-left: var(--padding-xsrow);
817
- padding-right: var(--padding-xsrow);
818
- box-sizing: border-box;
819
- }
820
- .containerLeftGames {
821
- display: flex;
822
- flex-direction: row;
823
- align-items: center;
824
- justify-content: center;
825
- gap: 15px;
826
- width: 272px;
827
- }
828
- .containerLeft420Games {
829
- width: 130px;
830
- display: flex;
831
- flex-direction: row;
832
- align-items: center;
833
- justify-content: flex-start;
834
- gap: 14px;
835
- }
836
- .containerLeft620Games {
837
- display: flex;
838
- flex-direction: row;
839
- align-items: center;
840
- justify-content: flex-start;
841
- gap: var(--gap-baserow);
842
- }
843
- .iconFavoritesType1 {
844
- width: 20px;
845
- height: 20px;
846
- display: none;
847
- flex-direction: column;
848
- align-items: center;
849
- justify-content: center;
850
- }
851
- .iconFavoritesType1320 {
852
- display: none;
853
- flex-direction: column;
854
- align-items: center;
855
- justify-content: center;
856
- width: 16px;
857
- height: 16px;
858
- }
859
- .iconFavorites {
860
- width: 20px;
861
- height: 20px;
862
- display: flex;
863
- flex-direction: column;
864
- align-items: center;
865
- justify-content: center;
866
- }
867
- .iconFavorites420 {
868
- width: 16px;
869
- height: 16px;
870
- display: flex;
871
- flex-direction: column;
872
- align-items: center;
873
- justify-content: center;
874
- }
875
- .playerContainerGames {
876
- position: relative;
877
- width: 233px;
878
- display: flex;
879
- flex-direction: row;
880
- align-items: center;
881
- justify-content: flex-start;
882
- gap: var(--gap-midrow);
883
- text-align: left;
884
- margin-left: 0px;
885
- font-family: v-bind(fontFamily);
886
- }
887
- .playerContainer420Games {
888
- position: relative;
889
- width: 189px;
890
- display: flex;
891
- flex-direction: row;
892
- align-items: center;
893
- justify-content: flex-start;
894
- text-align: left;
895
- margin-left: 14px;
896
- font-family: v-bind(fontFamily);
897
- gap: var(--gap-xsrow);
898
- }
899
- .playerContainer460Games {
900
- position: relative;
901
- width: 180px;
902
- display: flex;
903
- flex-direction: row;
904
- align-items: center;
905
- justify-content: flex-start;
906
- text-align: left;
907
- margin-left: 25px;
908
- font-family: v-bind(fontFamily);
909
- gap: var(--gap-xsrow);
910
- }
911
- .playerContainerType1Games {
912
- width: 200px;
913
- display: flex;
914
- flex-direction: row;
915
- align-items: center;
916
- justify-content: flex-start;
917
- gap: 17px;
918
- text-align: left;
919
- font-family: var(--font-poppins);
920
- }
921
- .playerContainerType1320Games {
922
- width: 80px;
923
- display: flex;
924
- flex-direction: row;
925
- align-items: center;
926
- justify-content: flex-start;
927
- text-align: left;
928
- font-family: var(--font-poppins);
929
- gap: var(--gap-xsrow);
930
- }
931
- .playerContainerType1460Games {
932
- width: 169px;
933
- display: flex;
934
- flex-direction: row;
935
- align-items: center;
936
- justify-content: flex-start;
937
- text-align: left;
938
- font-family: var(--font-poppins);
939
- gap: var(--gap-xsrow);
940
- }
941
- .imgPlayerIcon {
942
- position: absolute;
943
- height: 32px;
944
- width: 32px;
945
- margin-left: 7px;
946
- object-fit: cover;
947
- border-radius: 60px;
948
- object-position: top;
949
- background: #ffffff;
950
- }
951
- .imgPlayerIcon460 {
952
- position: absolute;
953
- width: 30px;
954
- object-fit: cover;
955
- border-radius: 60px;
956
- height: 30px;
957
- margin-left: 0px;
958
- object-position: top;
959
- background: #ffffff;
960
- }
961
- .imgPlayerIcon420 {
962
- position: absolute;
963
- width: 24px;
964
- object-fit: cover;
965
- border-radius: 60px;
966
- height: 24px;
967
- margin-left: 0px;
968
- object-position: top;
969
- background: #ffffff;
970
- }
971
- .manchesterUnitedGames {
972
- position: relative;
973
- letter-spacing: 0.2px;
974
- line-height: 20px;
975
- font-weight: 500;
976
- left: 60px;
977
- text-overflow: ellipsis;
978
- overflow: hidden;
979
- width: 130px;
980
- white-space: nowrap;
981
- }
982
- .manchesterUnited360Games {
983
- position: relative;
984
- letter-spacing: 0.2px;
985
- text-overflow: ellipsis;
986
- overflow: hidden;
987
- white-space: nowrap;
988
- line-height: 20px;
989
- font-weight: 500;
990
- left: 47px;
991
- width: 120px;
992
- }
993
- .manchesterUnited420Games {
994
- position: relative;
995
- letter-spacing: 0.2px;
996
- text-overflow: ellipsis;
997
- overflow: hidden;
998
- white-space: nowrap;
999
- line-height: 20px;
1000
- font-weight: 500;
1001
- left: 47px;
1002
- width: 120px;
1003
- }
1004
- .manchesterUnited460Games {
1005
- position: relative;
1006
- letter-spacing: 0.2px;
1007
- line-height: 20px;
1008
- text-overflow: ellipsis;
1009
- overflow: hidden;
1010
- width: 130px;
1011
- white-space: nowrap;
1012
- left: 40px;
1013
- font-size: var(--font-size-2xsrow);
1014
- }
1015
- .containerRightGames {
1016
- flex: 1;
1017
- display: flex;
1018
- flex-direction: row;
1019
- align-items: center;
1020
- justify-content: flex-start;
1021
- text-align: center;
1022
- font-family: var(--font-poppins);
1023
- }
1024
- .containerRight960Games {
1025
- flex: 1;
1026
- display: flex;
1027
- flex-direction: row;
1028
- align-items: center;
1029
- justify-content: flex-start;
1030
- text-align: center;
1031
- font-family: var(--font-poppins);
1032
- gap: var(--gap-0row);
1033
- }
1034
- .containerRight420Games {
1035
- flex: 1;
1036
- display: flex;
1037
- flex-direction: row;
1038
- align-items: center;
1039
- justify-content: flex-start;
1040
- text-align: center;
1041
- font-family: var(--font-poppins);
1042
- width: auto;
1043
- align-self: unset;
1044
- }
1045
- .numberOfVideos {
1046
- position: relative;
1047
- letter-spacing: -0.03em;
1048
- line-height: 120%;
1049
- font-weight: 500;
1050
- }
1051
- .numberOfVideos620 {
1052
- letter-spacing: -0.03em;
1053
- line-height: 120%;
1054
- font-weight: 500;
1055
- display: flex;
1056
- }
1057
- .block02Games {
1058
- display: flex;
1059
- flex-direction: row;
1060
- align-items: center;
1061
- justify-content: flex-end;
1062
- gap: var(--gap-5xlrow);
1063
- text-align: left;
1064
- width: 190px;
1065
- }
1066
-
1067
- .block02960Games {
1068
- display: flex;
1069
- flex-direction: row;
1070
- align-items: center;
1071
- justify-content: flex-end;
1072
- gap: var(--gap-5xlrow);
1073
- text-align: left;
1074
- }
1075
-
1076
- .block02620Games {
1077
- display: flex;
1078
- flex-direction: row;
1079
- align-items: center;
1080
- text-align: left;
1081
- gap: var(--gap-baserow);
1082
- }
1083
- .block02420Games {
1084
- display: flex;
1085
- flex-direction: row;
1086
- align-items: center;
1087
- text-align: left;
1088
- justify-content: flex-end;
1089
- gap: var(--gap-0row);
1090
- }
1091
- .verVideos {
1092
- position: relative;
1093
- letter-spacing: -0.03em;
1094
- line-height: 120%;
1095
- font-weight: 500;
1096
- }
1097
- .verVideos620 {
1098
- display: none;
1099
- }
1100
- .numberPosition {
1101
- position: relative;
1102
- letter-spacing: 0.2px;
1103
- line-height: 20px;
1104
- font-weight: 600;
1105
- }
1106
- .shapeIcon {
1107
- position: relative;
1108
- width: 17px;
1109
- height: 16.46px;
1110
- }
1111
- .chivasIcon {
1112
- position: absolute;
1113
- margin: 0 !important;
1114
- top: 8px;
1115
- left: 17px;
1116
- width: 17px;
1117
- height: 17px;
1118
- object-fit: cover;
1119
- z-index: 2;
1120
- }
1121
-
1122
- .imgTeamIcon {
1123
- position: relative;
1124
- height: 28px;
1125
- object-fit: cover;
1126
- }
1127
- .teamName {
1128
- position: relative;
1129
- letter-spacing: 0.2px;
1130
- line-height: 20px;
1131
- font-weight: 500;
1132
- }
1133
- .nameTeamGames {
1134
- flex: 1;
1135
- display: flex;
1136
- flex-direction: row;
1137
- align-items: center;
1138
- justify-content: flex-start;
1139
- gap: var(--gap-3xsrow);
1140
- text-align: left;
1141
- }
1142
- .dfC {
1143
- text-decoration: underline;
1144
- }
1145
- .position {
1146
- flex: 1;
1147
- position: relative;
1148
- letter-spacing: 0.2px;
1149
- line-height: 20px;
1150
- font-weight: 500;
1151
- }
1152
- .age {
1153
- flex: 1;
1154
- position: relative;
1155
- text-decoration: underline;
1156
- letter-spacing: 0.2px;
1157
- line-height: 20px;
1158
- font-weight: 500;
1159
- }
1160
- .manchesterUnitedIcon {
1161
- position: relative;
1162
- width: 21px;
1163
- height: 21px;
1164
- object-fit: cover;
1165
- border-radius: 50%;
1166
- }
1167
- .country {
1168
- flex: 1;
1169
- display: flex;
1170
- flex-direction: row;
1171
- align-items: center;
1172
- justify-content: center;
1173
- }
1174
- .playedGames {
1175
- flex: 1;
1176
- position: relative;
1177
- letter-spacing: 0.2px;
1178
- line-height: 20px;
1179
- font-weight: 500;
1180
- }
1181
- .playedMinutes {
1182
- flex: 1;
1183
- position: relative;
1184
- letter-spacing: 0.2px;
1185
- line-height: 20px;
1186
- font-weight: 500;
1187
- }
1188
- .block01 {
1189
- flex: 1;
1190
- display: flex;
1191
- flex-direction: row;
1192
- align-items: center;
1193
- justify-content: flex-start;
1194
- }
1195
- .leagueName {
1196
- position: relative;
1197
- letter-spacing: 0.2px;
1198
- line-height: 20px;
1199
- font-weight: 500;
1200
- }
1201
- .roleCharacterIcon {
1202
- position: relative;
1203
- width: 12px;
1204
- height: 12px;
1205
- overflow: hidden;
1206
- flex-shrink: 0;
1207
- }
1208
-
1209
- .btnVideosGames {
1210
- border-radius: var(--br-45xlrow);
1211
- background-color: var(--color-gray-300row);
1212
- backdrop-filter: blur(16px);
1213
- border: 1px solid var(--color-gray-200row);
1214
- box-sizing: border-box;
1215
- height: 30px;
1216
- display: flex;
1217
- flex-direction: row;
1218
- padding: var(--padding-9xsrow) var(--padding-4xsrow);
1219
- align-items: center;
1220
- justify-content: center;
1221
- gap: var(--gap-6xsrow);
1222
- }
1223
-
1224
- .containerBtnVideosGames {
1225
- width: 90px;
1226
- display: flex;
1227
- flex-direction: row;
1228
- align-items: center;
1229
- justify-content: center;
1230
- gap: var(--gap-3xsrow);
1231
- font-size: var(--font-size-3xsrow);
1232
- color: v-bind(fontColor);
1233
- }
1234
- .containerBtnVideos620Games {
1235
- width: 40px;
1236
- display: flex;
1237
- flex-direction: row;
1238
- align-items: center;
1239
- justify-content: center;
1240
- font-size: var(--font-size-3xsrow);
1241
- color: v-bind(fontColor);
1242
- }
1243
- .containesOptions {
1244
- display: flex;
1245
- flex-direction: row;
1246
- align-items: center;
1247
- justify-content: flex-start;
1248
- gap: var(--gap-19xlrow);
1249
- }
1250
- .arrowExpandIcon {
1251
- position: relative;
1252
- width: 12px;
1253
- height: 8px;
1254
- }
1255
- .arrowExpandIcon:hover {
1256
- opacity: 0.5;
1257
- cursor: pointer;
1258
- }
1259
- .rowTeam {
1260
- align-self: stretch;
1261
- height: 72px;
1262
- display: flex;
1263
- flex-direction: row;
1264
- padding: 0px var(--padding-lgrow) 0px var(--padding-9xlrow);
1265
- box-sizing: border-box;
1266
- align-items: center;
1267
- justify-content: flex-start;
1268
- gap: var(--gap-xl);
1269
- z-index: 1;
1270
- text-align: right;
1271
- background-color: v-bind(background);
1272
- font-size: v-bind(fontSize);
1273
- color: v-bind(fontColor);
1274
- font-family: v-bind(fontFamily);
1275
- /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
1276
- }
1277
- .rowTeam420 {
1278
- align-self: stretch;
1279
- height: 72px;
1280
- display: flex;
1281
- flex-direction: row;
1282
- padding: 0px var(--padding-lgrow) 0px var(--padding-9xlrow);
1283
- box-sizing: border-box;
1284
- align-items: center;
1285
- justify-content: flex-start;
1286
-
1287
- z-index: 1;
1288
- text-align: right;
1289
- background-color: v-bind(background);
1290
- font-size: v-bind(fontSize);
1291
- color: v-bind(fontColor);
1292
- font-family: v-bind(fontFamily);
1293
- gap: var(--gap-0row);
1294
- }
1295
- .rowTeam320 {
1296
- align-self: stretch;
1297
- height: 72px;
1298
- display: flex;
1299
- flex-direction: row;
1300
- align-items: center;
1301
- justify-content: flex-start;
1302
- z-index: 1;
1303
- text-align: right;
1304
- background-color: v-bind(background);
1305
- font-size: v-bind(fontSize);
1306
- color: v-bind(fontColor);
1307
- font-family: v-bind(fontFamily);
1308
-
1309
- padding-left: var(--padding-xsrow);
1310
- padding-right: var(--padding-xsrow);
1311
- box-sizing: border-box;
1312
- gap: var(--gap-0row);
1313
- }
1314
- .rowTeam460 {
1315
- align-self: stretch;
1316
- height: 72px;
1317
- display: flex;
1318
- flex-direction: row;
1319
- align-items: center;
1320
- justify-content: flex-start;
1321
- z-index: 1;
1322
- text-align: right;
1323
- background-color: v-bind(background);
1324
- font-size: v-bind(fontSize);
1325
- color: v-bind(fontColor);
1326
- font-family: v-bind(fontFamily);
1327
-
1328
- padding-left: var(--padding-xsrow);
1329
- padding-right: var(--padding-xsrow);
1330
- box-sizing: border-box;
1331
- gap: var(--gap-0row);
1332
- }
1333
- .rowTeam350 {
1334
- align-self: stretch;
1335
- height: 72px;
1336
- display: flex;
1337
- flex-direction: row;
1338
- align-items: center;
1339
- justify-content: flex-start;
1340
- z-index: 1;
1341
- text-align: right;
1342
- background-color: v-bind(background);
1343
- font-size: v-bind(fontSize);
1344
- color: v-bind(fontColor);
1345
- font-family: v-bind(fontFamily);
1346
- gap: var(--gap-0row);
1347
- padding-left: var(--padding-xsrow);
1348
- padding-right: var(--padding-xsrow);
1349
- box-sizing: border-box;
1350
- }
1351
- .containerLeftType1 {
1352
- display: flex;
1353
- flex-direction: row;
1354
- align-items: center;
1355
- justify-content: flex-start;
1356
- }
1357
- .containerLeftType1680 {
1358
- display: flex;
1359
- flex-direction: row;
1360
- align-items: center;
1361
- justify-content: flex-start;
1362
- gap: var(--gap-baserow);
1363
- }
1364
- .containerLeftType1320 {
1365
- display: flex;
1366
- flex-direction: row;
1367
- align-items: center;
1368
- justify-content: flex-start;
1369
- width: 130px;
1370
- gap: var(--gap-baserow);
1371
- }
1372
- .containerLeftType1350 {
1373
- gap: var(--gap-xsrow);
1374
- display: flex;
1375
- flex-direction: row;
1376
- align-items: center;
1377
- justify-content: flex-start;
1378
- }
1379
- .positionContainertype1 {
1380
- width: 34px;
1381
- display: flex;
1382
- flex-direction: row;
1383
- align-items: center;
1384
- justify-content: flex-start;
1385
- gap: var(--gap-baserow);
1386
- }
1387
- .positionContainertype1380 {
1388
- width: 10px;
1389
- display: flex;
1390
- flex-direction: row;
1391
- align-items: center;
1392
- justify-content: flex-start;
1393
- gap: var(--gap-baserow);
1394
- }
1395
- .positionContainertype1680 {
1396
- width: 34px;
1397
- display: flex;
1398
- flex-direction: row;
1399
- align-items: center;
1400
- justify-content: flex-start;
1401
- gap: var(--gap-xsrow);
1402
- }
1403
- .positionContainertype1420 {
1404
- width: 20px;
1405
- display: flex;
1406
- flex-direction: row;
1407
- align-items: center;
1408
- justify-content: flex-start;
1409
- gap: var(--gap-baserow);
1410
- }
1411
- .manchesterUnitedType1 {
1412
- position: relative;
1413
- letter-spacing: 0.2px;
1414
- line-height: 20px;
1415
- font-weight: 500;
1416
- }
1417
- .manchesterUnitedType1460 {
1418
- position: relative;
1419
- letter-spacing: 0.2px;
1420
- line-height: 20px;
1421
- font-weight: 500;
1422
- font-size: var(--font-size-2xsrow);
1423
- }
1424
- .manchesterUnitedType1320 {
1425
- position: relative;
1426
- letter-spacing: 0.2px;
1427
- line-height: 20px;
1428
- font-weight: 500;
1429
- width: 30px;
1430
- }
1431
- .containerRightType1Games {
1432
- align-self: stretch;
1433
- flex: 1;
1434
- display: flex;
1435
- flex-direction: row;
1436
- align-items: center;
1437
- justify-content: flex-start;
1438
- gap: 0px;
1439
- text-align: center;
1440
- font-family: var(--font-poppins);
1441
- }
1442
- .containerRightType1420Games {
1443
- align-self: stretch;
1444
- flex: 1;
1445
- display: flex;
1446
- flex-direction: row;
1447
- align-items: center;
1448
- justify-content: flex-start;
1449
- text-align: center;
1450
- font-family: var(--font-poppins);
1451
- gap: var(--gap-0row);
1452
- }
1453
- .containerRightType1320Games {
1454
- flex: 1;
1455
- display: flex;
1456
- flex-direction: row;
1457
- align-items: center;
1458
- justify-content: flex-start;
1459
- text-align: center;
1460
- font-family: var(--font-poppins);
1461
- width: auto;
1462
- align-self: unset;
1463
- }
1464
- .teamNameWrapperType1 {
1465
- flex: 1;
1466
- display: flex;
1467
- flex-direction: row;
1468
- align-items: center;
1469
- justify-content: flex-start;
1470
- }
1471
- .teamNameWrapperType1960 {
1472
- flex: 1;
1473
- display: flex;
1474
- flex-direction: row;
1475
- align-items: center;
1476
- justify-content: flex-start;
1477
- }
1478
- .teamNameWrapperType11086 {
1479
- flex: 1;
1480
- display: flex;
1481
- flex-direction: row;
1482
- align-items: center;
1483
- justify-content: flex-start;
1484
- }
1485
- .ageWrapperType1 {
1486
- flex: 1;
1487
- display: flex;
1488
- flex-direction: row;
1489
- align-items: center;
1490
- justify-content: flex-start;
1491
- }
1492
- .ageWrapperType1680 {
1493
- flex: 1;
1494
- display: flex;
1495
- flex-direction: row;
1496
- align-items: center;
1497
- justify-content: flex-start;
1498
- display: none;
1499
- }
1500
- .ageWrapperType11086 {
1501
- flex: 1;
1502
- flex: 1;
1503
- display: flex;
1504
- flex-direction: row;
1505
- align-items: center;
1506
- justify-content: flex-start;
1507
- }
1508
- .ageType1 {
1509
- flex: 1;
1510
- position: relative;
1511
- text-decoration: underline;
1512
- letter-spacing: 0.2px;
1513
- line-height: 20px;
1514
- font-weight: 500;
1515
- }
1516
- .ageType1960 {
1517
- display: none;
1518
- }
1519
- .playedGamesWrapperType1 {
1520
- flex: 1;
1521
- display: flex;
1522
- flex-direction: row;
1523
- align-items: center;
1524
- justify-content: flex-start;
1525
- }
1526
- .playedGamesWrapperType1680 {
1527
- display: none;
1528
- }
1529
- .playedGamesWrapperType1960 {
1530
- display: none;
1531
- }
1532
- .playedGamesType1 {
1533
- flex: 1;
1534
- position: relative;
1535
- letter-spacing: 0.2px;
1536
- line-height: 20px;
1537
- font-weight: 500;
1538
- }
1539
- .playedGamesType1540 {
1540
- text-align: center;
1541
- display: none;
1542
- }
1543
- .playedGamesType1960 {
1544
- display: none;
1545
- }
1546
- .playedGamesType11086 {
1547
- display: none;
1548
- }
1549
- .playedMinutesWrapperType1 {
1550
- flex: 1;
1551
- display: flex;
1552
- flex-direction: row;
1553
- align-items: center;
1554
- justify-content: flex-start;
1555
- }
1556
- .playedMinutesWrapperType11086 {
1557
- display: flex;
1558
- flex-direction: row;
1559
- align-items: center;
1560
- justify-content: flex-start;
1561
- flex: 1;
1562
- }
1563
- .playedMinutesType1 {
1564
- flex: 1;
1565
- position: relative;
1566
- letter-spacing: 0.2px;
1567
- line-height: 20px;
1568
- font-weight: 500;
1569
- }
1570
- .playedMinutesType1680 {
1571
- display: none;
1572
- }
1573
- .block02Type1Games {
1574
- align-self: stretch;
1575
- display: flex;
1576
- flex-direction: row;
1577
- align-items: center;
1578
- justify-content: flex-end;
1579
- gap: var(--gap-5xlrow);
1580
- }
1581
- .block02Type1680Games {
1582
- align-self: stretch;
1583
- display: flex;
1584
- flex-direction: row;
1585
- align-items: center;
1586
- justify-content: flex-end;
1587
- gap: var(--gap-0row);
1588
- }
1589
- .block02Type1320Games {
1590
- align-self: stretch;
1591
- display: flex;
1592
- flex-direction: row;
1593
- align-items: center;
1594
- justify-content: flex-end;
1595
- gap: var(--gap-0row);
1596
- }
1597
-
1598
- .block02Type1350Games {
1599
- align-self: stretch;
1600
- display: flex;
1601
- flex-direction: row;
1602
- align-items: center;
1603
- justify-content: flex-end;
1604
- gap: var(--gap-0row);
1605
- }
1606
- .leagueNameWrapperType1 {
1607
- align-self: stretch;
1608
- background-color: var(--color-darkslategray-100row);
1609
- display: flex;
1610
- flex-direction: row;
1611
- align-items: center;
1612
- justify-content: center;
1613
- }
1614
- .leagueNameWrapperType1680 {
1615
- display: none;
1616
- }
1617
- .leagueNameWrapperType1960 {
1618
- align-self: stretch;
1619
- background-color: var(--color-darkslategray-100row);
1620
- display: flex;
1621
- flex-direction: row;
1622
- align-items: center;
1623
- justify-content: center;
1624
- }
1625
- .leagueNameType1 {
1626
- position: relative;
1627
- letter-spacing: 0.2px;
1628
- line-height: 20px;
1629
- font-weight: 500;
1630
- display: inline-block;
1631
- width: 64px;
1632
- flex-shrink: 0;
1633
- }
1634
-
1635
- .leagueNameType1960 {
1636
- display: flex;
1637
- position: relative;
1638
- letter-spacing: 0.2px;
1639
- justify-content: center;
1640
- line-height: 20px;
1641
- font-weight: 500;
1642
- width: 64px;
1643
- flex-shrink: 0;
1644
- }
1645
- .numberOfVideosType1 {
1646
- position: relative;
1647
- letter-spacing: -0.03em;
1648
- line-height: 120%;
1649
- font-weight: 500;
1650
- display: none;
1651
- }
1652
- .numberOfVideosType1680 {
1653
- position: relative;
1654
- letter-spacing: -0.03em;
1655
- line-height: 120%;
1656
- font-weight: 500;
1657
- display: flex;
1658
- }
1659
- .numberOfVideosType11232 {
1660
- position: relative;
1661
- letter-spacing: -0.03em;
1662
- line-height: 120%;
1663
- font-weight: 500;
1664
- display: none;
1665
- }
1666
- .vectorIconType1 {
1667
- position: absolute;
1668
- margin: 0 !important;
1669
- height: 12.57%;
1670
- width: 1.1%;
1671
- top: 71.71%;
1672
- right: 92.27%;
1673
- bottom: 15.71%;
1674
- left: 6.62%;
1675
- max-width: 100%;
1676
- overflow: hidden;
1677
- max-height: 100%;
1678
- display: none;
1679
- opacity: 0.3;
1680
- z-index: 2;
1681
- }
1682
-
1683
- .block01TitlesType1 {
1684
- flex: 1;
1685
- display: flex;
1686
- flex-direction: row;
1687
- align-items: center;
1688
- justify-content: flex-start;
1689
- }
1690
- .numberPositionType1 {
1691
- position: relative;
1692
- letter-spacing: 0.2px;
1693
- line-height: 20px;
1694
- font-weight: 600;
1695
- }
1696
- .shapeIconType1 {
1697
- position: relative;
1698
- width: 17px;
1699
- height: 16.46px;
1700
- }
1701
-
1702
- .tijuanaIconType1 {
1703
- position: relative;
1704
- width: 26px;
1705
- height: 26px;
1706
- object-fit: cover;
1707
- }
1708
- .tijuanaWrapperType1 {
1709
- width: 32px;
1710
- height: 32px;
1711
- background: #ffffff;
1712
- border-radius: 50%;
1713
- display: flex;
1714
- flex-direction: row;
1715
- align-items: center;
1716
- justify-content: center;
1717
- }
1718
-
1719
- .tijuanaWrapperType1NoBg {
1720
- width: 32px;
1721
- height: 32px;
1722
- display: flex;
1723
- flex-direction: row;
1724
- align-items: center;
1725
- justify-content: center;
1726
- }
1727
- .teamNameType1 {
1728
- flex: 1;
1729
- position: relative;
1730
- letter-spacing: 0.2px;
1731
- line-height: 20px;
1732
- font-weight: 500;
1733
- }
1734
- .roleCharacterIconType1 {
1735
- position: relative;
1736
- width: 12px;
1737
- height: 12px;
1738
- overflow: hidden;
1739
- flex-shrink: 0;
1740
- }
1741
- .verVideosType1 {
1742
- position: relative;
1743
- letter-spacing: -0.03em;
1744
- line-height: 120%;
1745
- font-weight: 500;
1746
- }
1747
- .btnVideosType1Games {
1748
- border-radius: 64px;
1749
- background-color: rgba(255, 255, 255, 0.08);
1750
- backdrop-filter: blur(16px);
1751
- border: 1px solid rgba(255, 255, 255, 0.16);
1752
- box-sizing: border-box;
1753
- height: 30px;
1754
- display: flex;
1755
- flex-direction: row;
1756
- padding: 4px 9px;
1757
- align-items: center;
1758
- justify-content: center;
1759
- gap: 7px;
1760
- }
1761
-
1762
- .containerBtnVideosType1Games {
1763
- width: 90px;
1764
- display: flex;
1765
- flex-direction: row;
1766
- align-items: center;
1767
- justify-content: center;
1768
- gap: 10px;
1769
- text-align: left;
1770
- font-size: var(--font-size-3xsrow);
1771
- color: var(--color-white);
1772
- }
1773
- .containesOptionsType1Games {
1774
- align-self: stretch;
1775
- display: flex;
1776
- flex-direction: row;
1777
- align-items: center;
1778
- justify-content: flex-start;
1779
- gap: var(--gap-19xlrow);
1780
- }
1781
- .arrowExpandIconType1 {
1782
- position: relative;
1783
- width: 10px;
1784
- height: 5px;
1785
- }
1786
-
1787
- .templateTablaProductividadType1 {
1788
- position: relative;
1789
- width: 100%;
1790
- display: flex;
1791
- flex-direction: column;
1792
- align-items: flex-start;
1793
- justify-content: flex-start;
1794
- text-align: left;
1795
- font-size: var(--font-size-xsrow);
1796
- color: var(--color-white);
1797
- font-family: var(--font-poppins);
1798
- }
1799
- .verVideosType11232 {
1800
- display: flex;
1801
- }
1802
-
1803
- .templateTablaProductividadType1320 {
1804
- min-width: 320px;
1805
- }
1806
-
1807
- .verVideosType1680 {
1808
- display: none;
1809
- }
1810
- </style>
1
+ <template>
2
+ <div
3
+ ref="myDivRef2"
4
+ style="
5
+ border-left: rgba(13, 29, 41, 0.7) 1px solid;
6
+ border-right: rgba(13, 29, 41, 0.7) 1px solid;
7
+ "
8
+ >
9
+ <div v-if="type == 0" :class="rowwPlayerClass" id="container-row-player">
10
+ <!-- jugador -->
11
+ <div :class="containerLeftClass" id="container-left">
12
+ <div :class="positionContainerClass">
13
+ <div :class="$style.numberPosition">{{ data.position }}</div>
14
+ </div>
15
+ <div :class="playerContainerClass">
16
+ <img :class="imgPlayerIconClass" :src="data.player_photo" />
17
+ <div :class="manchesterUnitedClass">
18
+ <template v-if="elementSize.width <= 420">{{ data.player_short }}</template>
19
+ <template v-else>{{ data.player_name }}</template>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ <div :class="containerRightClass" id="container-right">
24
+ <div :class="block02Class">
25
+ <div :class="$style.containesOptions">
26
+ <div :class="containerBtnVideosClass">
27
+ <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
28
+ <div :class="numberOfVideosClass">
29
+ {{ data.total }}
30
+ </div>
31
+ </div>
32
+ </div>
33
+ <svg
34
+ v-if="arrow"
35
+ :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
36
+ width="12"
37
+ height="8"
38
+ viewBox="0 0 12 8"
39
+ :fill="colorArrow"
40
+ xmlns="http://www.w3.org/2000/svg"
41
+ @click="clickExpand(data.id)"
42
+ >
43
+ <path
44
+ fill-rule="evenodd"
45
+ clip-rule="evenodd"
46
+ d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
47
+ :fill="colorArrow"
48
+ />
49
+ </svg>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <div
55
+ v-if="type == 1"
56
+ :class="rowTeamClass"
57
+ :style="elementSize.width > 540 ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)' : ''"
58
+ id="container-row-player"
59
+ >
60
+ <!-- equipo -->
61
+ <div :class="containerLeftType1Class" id="container-left">
62
+ <div :class="positionContainertype1Class">
63
+ <div :class="$style.numberPositionType1">{{ data.position }}</div>
64
+ </div>
65
+ <div :class="playerContainerType1Class">
66
+ <div :class="manchesterUnitedType1Class">{{ data.team_abrev }}</div>
67
+ </div>
68
+ </div>
69
+ <div :class="containerRightType1Class" id="container-right">
70
+ <div :class="block02Type1Class">
71
+ <div :class="$style.containesOptionsType1Games">
72
+ <div :class="$style.containerBtnVideosType1Games">
73
+ <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
74
+ <div :class="numberOfVideosType1Class">{{ data.total }}</div>
75
+ </div>
76
+ </div>
77
+ <svg
78
+ v-if="arrow"
79
+ :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
80
+ width="12"
81
+ height="8"
82
+ viewBox="0 0 12 8"
83
+ :fill="colorArrow"
84
+ xmlns="http://www.w3.org/2000/svg"
85
+ @click="clickExpand(data.id)"
86
+ >
87
+ <path
88
+ fill-rule="evenodd"
89
+ clip-rule="evenodd"
90
+ d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
91
+ :fill="colorArrow"
92
+ />
93
+ </svg>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div v-if="type == 2" :class="rowwPlayerClass" id="container-row-player">
98
+ <!-- scouting -->
99
+ <div :class="containerLeftClass" id="container-left">
100
+ <div :class="positionContainerClass">
101
+ <div :class="$style.numberPosition">{{ data.position }}</div>
102
+ </div>
103
+ <div :class="playerContainerClass">
104
+ <img :class="imgPlayerIconClass" :src="data.player_photo" />
105
+ <div :class="manchesterUnitedClass">
106
+ {{ data.player_name }}
107
+ </div>
108
+ <img
109
+ :class="$style.chivasIcon"
110
+ v-if="elementSize.width <= 420"
111
+ alt=""
112
+ :src="data.team_logo"
113
+ />
114
+ </div>
115
+ </div>
116
+ <div :class="containerRightClass" id="container-right">
117
+ <div :class="block02Class">
118
+ <div :class="$style.containesOptions">
119
+ <div :class="containerBtnVideosClass">
120
+ <img :class="$style.imgTeamIcon" alt="" :src="data.team_logo" />
121
+ <div :class="numberOfVideosClass">
122
+ {{ data.total }}
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <svg
127
+ :class="[$style.arrowExpandIcon, isExpanded ? $style.rotate : '']"
128
+ width="12"
129
+ height="8"
130
+ viewBox="0 0 12 8"
131
+ :fill="colorArrow"
132
+ xmlns="http://www.w3.org/2000/svg"
133
+ @click="clickExpand(data.id)"
134
+ >
135
+ <path
136
+ fill-rule="evenodd"
137
+ clip-rule="evenodd"
138
+ d="M6 4.93631L10.2929 1.23496C10.6834 0.898244 11.3166 0.898244 11.7071 1.23496C12.0976 1.57167 12.0976 2.11759 11.7071 2.4543L6.70711 6.76532C6.31658 7.10203 5.68342 7.10203 5.29289 6.76532L0.292893 2.4543C-0.0976311 2.11759 -0.0976311 1.57167 0.292893 1.23496C0.683418 0.898244 1.31658 0.898244 1.70711 1.23496L6 4.93631Z"
139
+ :fill="colorArrow"
140
+ />
141
+ </svg>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </template>
147
+ <script>
148
+ import { ref } from 'vue'
149
+ import useElementSize from './useElementSize'
150
+ export default {
151
+ components: {},
152
+ computed: {
153
+ manchesterUnitedType1Class() {
154
+ const width = this.elementSize.width
155
+ if (width <= 320) {
156
+ return this.$style.manchesterUnitedType1320
157
+ } else if (width <= 460) {
158
+ return this.$style.manchesterUnitedType1460
159
+ } else {
160
+ return this.$style.manchesterUnitedType1
161
+ }
162
+ },
163
+ containerRightType1Class() {
164
+ const width = this.elementSize.width
165
+ if (width <= 320) {
166
+ return this.$style.containerRightType1320Games
167
+ } else if (width <= 420) {
168
+ return this.$style.containerRightType1420Games
169
+ } else {
170
+ return this.$style.containerRightType1Games
171
+ }
172
+ },
173
+ teamNameWrapperType1Class() {
174
+ const width = this.elementSize.width
175
+ if (width <= 960) {
176
+ return this.$style.teamNameWrapperType1960
177
+ } else if (width <= 1086) {
178
+ return this.$style.teamNameWrapperType11086
179
+ } else {
180
+ return this.$style.teamNameWrapperType1
181
+ }
182
+ },
183
+ ageWrapperType1Class() {
184
+ const width = this.elementSize.width
185
+ if (width <= 680) {
186
+ return this.$style.ageWrapperType1680
187
+ } else if (width <= 1086) {
188
+ return this.$style.ageWrapperType11086
189
+ } else {
190
+ return this.$style.ageWrapperType1
191
+ }
192
+ },
193
+ ageType1Class() {
194
+ const width = this.elementSize.width
195
+ if (width <= 960) {
196
+ return this.$style.ageType1960
197
+ } else {
198
+ return this.$style.ageType1
199
+ }
200
+ },
201
+ playedGamesWrapperType1Class() {
202
+ const width = this.elementSize.width
203
+ if (width <= 680) {
204
+ return this.$style.playedGamesWrapperType1680
205
+ } else if (width <= 960) {
206
+ return this.$style.playedGamesWrapperType1960
207
+ } else {
208
+ return this.$style.playedGamesWrapperType1
209
+ }
210
+ },
211
+ playedGamesType1Class() {
212
+ const width = this.elementSize.width
213
+ if (width <= 540) {
214
+ return this.$style.playedGamesType1540
215
+ } else if (width <= 960) {
216
+ return this.$style.playedGamesType1960
217
+ } else if (width <= 1086) {
218
+ return this.$style.playedGamesType11086
219
+ } else {
220
+ return this.$style.playedGamesType1
221
+ }
222
+ },
223
+ playedMinutesWrapperType1Class() {
224
+ const width = this.elementSize.width
225
+ if (width <= 1086) {
226
+ return this.$style.playedMinutesWrapperType11086
227
+ } else {
228
+ return this.$style.playedMinutesWrapperType1
229
+ }
230
+ },
231
+ playedMinutesType1Class() {
232
+ const width = this.elementSize.width
233
+ if (width <= 680) {
234
+ return this.$style.playedMinutesType1680
235
+ } else {
236
+ return this.$style.playedMinutesType1
237
+ }
238
+ },
239
+ block02Type1Class() {
240
+ const width = this.elementSize.width
241
+ if (width <= 320) {
242
+ return this.$style.block02Type1320Games
243
+ } else if (width <= 350) {
244
+ return this.$style.block02Type1350Games
245
+ } else if (width <= 680) {
246
+ return this.$style.block02Type1680Games
247
+ } else {
248
+ return this.$style.block02Type1Games
249
+ }
250
+ },
251
+ leagueNameWrapperType1Class() {
252
+ const width = this.elementSize.width
253
+ if (width <= 680) {
254
+ return this.$style.leagueNameWrapperType1680
255
+ } else if (width <= 960) {
256
+ return this.$style.leagueNameWrapperType1960
257
+ } else {
258
+ return this.$style.leagueNameWrapperType1
259
+ }
260
+ },
261
+ leagueNameType1Class() {
262
+ const width = this.elementSize.width
263
+ if (width <= 960) {
264
+ return this.$style.leagueNameType1960
265
+ } else {
266
+ return this.$style.leagueNameType1
267
+ }
268
+ },
269
+ numberOfVideosType1Class() {
270
+ const width = this.elementSize.width
271
+ if (width <= 680) {
272
+ return this.$style.numberOfVideosType1680
273
+ } else if (width <= 1232) {
274
+ return this.$style.numberOfVideosType11232
275
+ } else {
276
+ return this.$style.numberOfVideosType1
277
+ }
278
+ },
279
+ containerLeftType1Class() {
280
+ const width = this.elementSize.width
281
+ if (width <= 320) {
282
+ return this.$style.containerLeftType1320
283
+ } else if (width <= 350) {
284
+ return this.$style.containerLeftType1350
285
+ } else if (width <= 680) {
286
+ return this.$style.containerLeftType1680
287
+ } else {
288
+ return this.$style.containerLeftType1
289
+ }
290
+ },
291
+ positionContainertype1Class() {
292
+ const width = this.elementSize.width
293
+ if (width <= 380) {
294
+ return this.$style.positionContainertype1380
295
+ } else if (width <= 420) {
296
+ return this.$style.positionContainertype1420
297
+ } else if (width <= 680) {
298
+ return this.$style.positionContainertype1680
299
+ } else {
300
+ return this.$style.positionContainertype1
301
+ }
302
+ },
303
+ rowTeamClass() {
304
+ const width = this.elementSize.width
305
+ if (width <= 320) {
306
+ return this.$style.rowTeam320
307
+ } else if (width <= 350) {
308
+ return this.$style.rowTeam350
309
+ } else if (width <= 420) {
310
+ return this.$style.rowTeam420
311
+ } else if (width <= 460) {
312
+ return this.$style.rowTeam460
313
+ } else {
314
+ return this.$style.rowTeam
315
+ }
316
+ },
317
+ containerBtnVideosClass() {
318
+ return this.$style.containerBtnVideosGames
319
+ },
320
+ numberOfVideosClass() {
321
+ const width = this.elementSize.width
322
+ if (width <= 620) {
323
+ return this.$style.numberOfVideos620
324
+ } else {
325
+ return this.$style.numberOfVideos
326
+ }
327
+ },
328
+ block02Class() {
329
+ const width = this.elementSize.width
330
+ if (width <= 420) {
331
+ return this.$style.block02420Games
332
+ } else if (width <= 620) {
333
+ return this.$style.block02620Games
334
+ } else if (width <= 960) {
335
+ return this.$style.block02960Games
336
+ } else {
337
+ return this.$style.block02Games
338
+ }
339
+ },
340
+ imgPlayerIconClass() {
341
+ const width = this.elementSize.width
342
+ if (width <= 420) {
343
+ return this.$style.imgPlayerIcon420
344
+ } else if (width <= 460) {
345
+ return this.$style.imgPlayerIcon460
346
+ } else {
347
+ return this.$style.imgPlayerIcon
348
+ }
349
+ },
350
+ manchesterUnitedClass() {
351
+ const width = this.elementSize.width
352
+ if (width <= 360) {
353
+ return this.$style.manchesterUnited360Games
354
+ } else if (width <= 420) {
355
+ return this.$style.manchesterUnited420Games
356
+ } else if (width <= 460) {
357
+ return this.$style.manchesterUnited460Games
358
+ } else {
359
+ return this.$style.manchesterUnitedGames
360
+ }
361
+ },
362
+ containerRightClass() {
363
+ const width = this.elementSize.width
364
+ if (width <= 420) {
365
+ return this.$style.containerRight420Games
366
+ } else if (width <= 960) {
367
+ return this.$style.containerRight960Games
368
+ } else {
369
+ return this.$style.containerRightGames
370
+ }
371
+ },
372
+ playerContainerType1Class() {
373
+ const width = this.elementSize.width
374
+ if (width <= 320) {
375
+ return this.$style.playerContainerType1320Games
376
+ } else if (width <= 460) {
377
+ return this.$style.playerContainerType1460Games
378
+ } else {
379
+ return this.$style.playerContainerType1Games
380
+ }
381
+ },
382
+ playerContainerClass() {
383
+ const width = this.elementSize.width
384
+ if (width <= 420) {
385
+ return this.$style.playerContainer420Games
386
+ } else if (width <= 460) {
387
+ return this.$style.playerContainer460Games
388
+ } else {
389
+ return this.$style.playerContainerGames
390
+ }
391
+ },
392
+ iconFavoritesClass() {
393
+ const width = this.elementSize.width
394
+ if (width <= 420) {
395
+ return this.$style.iconFavorites420
396
+ } else {
397
+ return this.$style.iconFavorites
398
+ }
399
+ },
400
+ iconFavoritesType1Class() {
401
+ const width = this.elementSize.width
402
+ if (width <= 320) {
403
+ return this.$style.iconFavoritesType1320
404
+ } else {
405
+ return this.$style.iconFavoritesType1
406
+ }
407
+ },
408
+ containerLeftClass() {
409
+ const width = this.elementSize.width
410
+ if (width <= 420) {
411
+ return this.$style.containerLeft420Games
412
+ } else if (width <= 620) {
413
+ return this.$style.containerLeft620Games
414
+ } else {
415
+ return this.$style.containerLeftGames
416
+ }
417
+ },
418
+ positionContainerClass() {
419
+ const width = this.elementSize.width
420
+ if (width <= 620) {
421
+ return this.$style.positionContainer620
422
+ } else {
423
+ return this.$style.positionContainer
424
+ }
425
+ },
426
+ rowwPlayerClass() {
427
+ const width = this.elementSize.width
428
+ if (width <= 420) {
429
+ return this.$style.rowwPlayer420Games
430
+ } else if (width <= 460) {
431
+ return this.$style.rowwPlayer460Games
432
+ } else if (width <= 960) {
433
+ return this.$style.rowwPlayer960Games
434
+ } else {
435
+ return this.$style.rowwPlayerGames
436
+ }
437
+ },
438
+ },
439
+ setup() {
440
+ const myDivRef2 = ref('myDivRef2')
441
+ const { elementSize } = useElementSize(myDivRef2)
442
+ return {
443
+ myDivRef2,
444
+ elementSize,
445
+ }
446
+ },
447
+ props: {
448
+ typeData: {
449
+ type: Number,
450
+ default: 1,
451
+ },
452
+ canPlayVideos: {
453
+ type: Boolean,
454
+ default: false,
455
+ },
456
+ arrow: {
457
+ type: Boolean,
458
+ default: false,
459
+ },
460
+ teamWidget: {
461
+ type: Number,
462
+ default: 0,
463
+ },
464
+ type: { type: Number, default: 0 },
465
+ typeView: { type: Number, default: 0 },
466
+ isExpanded: { type: Boolean, default: false },
467
+ background: { type: String, default: '#172531' },
468
+ height: { type: String, default: '35px' },
469
+ fontColor: { type: String, default: '#F4F4F4' },
470
+ fontSize: { type: String, default: '12px' },
471
+ fontFamily: { type: String, default: 'Poppins-Regular' },
472
+ data: { type: Object, default: () => {} },
473
+ game: { type: Object, default: () => {} },
474
+ colorArrow: { type: String, default: '#D9D9D9' },
475
+ buttonTextValue: { type: String, default: 'Ver videos' },
476
+
477
+ iconSize: { type: String, default: '13px' },
478
+ iconSizeMini: { type: String, default: '13px' },
479
+ iconPosition: { type: String, default: 'left' },
480
+ buttonWidth: { type: String, default: '93px' },
481
+ buttonWidthMini: { type: String, default: '24px' },
482
+ buttonHeightMini: { type: String, default: '24px' },
483
+ buttonHeight: { type: String, default: '30px' },
484
+ buttonRadius: { type: String, default: '30px' },
485
+ buttonBorderWidth: { type: Number, default: 1 },
486
+ buttonBackground: { type: String, default: '#ffffff1a' },
487
+ buttonfontFamily: { type: String, default: 'Poppins-Regular' },
488
+ buttonBorderColor: { type: String, default: '#55636e' },
489
+ buttonFontSize: { type: String, default: '10px' },
490
+ },
491
+ data: () => ({
492
+ expand: false,
493
+ }),
494
+ methods: {
495
+ clickExpand(id_player) {
496
+ // this.expand = !this.expand
497
+ this.$emit('expand', { expand: !this.isExpanded, id: id_player })
498
+ },
499
+ emitEventMedia(data) {
500
+ this.$emit('mediadata', data)
501
+ },
502
+ },
503
+ }
504
+ </script>
505
+ <style module>
506
+ @import '/css/fonts.css';
507
+ .rotate {
508
+ transform: rotate(180deg);
509
+ }
510
+ :root {
511
+ /* fonts */
512
+
513
+ /* font sizes */
514
+ --font-size-3xsrow: 14px;
515
+ --font-size-xsrow: 12px;
516
+ --font-size-2xsrow: 11px;
517
+ --color-darkslategray-100row: #183143;
518
+
519
+ /* Colors */
520
+ --color-gray-100row: #172531;
521
+ --color-gray-200row: rgba(255, 255, 255, 0.16);
522
+ --color-gray-300row: rgba(255, 255, 255, 0.08);
523
+
524
+ --color-whitesmokerow: #f4f4f4;
525
+ --color-darkslategrayrow: #183143;
526
+
527
+ /* Gaps */
528
+ --gap-13xlrow: 32px;
529
+ --gap-0row: 0px;
530
+ --gap-5xlrow: 24px;
531
+ --gap-baserow: 16px;
532
+ --gap-19xlrow: 38px;
533
+ --gap-3xsrow: 10px;
534
+ --gap-6xsrow: 7px;
535
+ --gap-9xlrow: 28px;
536
+ --gap-xsrow: 12px;
537
+ --gap-midrow: 17px;
538
+
539
+ /* Paddings */
540
+ --padding-xlrow: 0px;
541
+ --padding-lgrow: 18px;
542
+ --padding-9xlrow: 28px;
543
+ --padding-xsrow: 12px;
544
+ --padding-9xsrow: 4px;
545
+ --padding-4xsrow: 9px;
546
+ --padding-baserow: 16px;
547
+
548
+ /* Border radiuses */
549
+ --br-45xlrow: 64px;
550
+ }
551
+ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
552
+ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
553
+ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */ /* CCSS NUEVO LIMPIO */
554
+ .positionContainer {
555
+ display: flex;
556
+ flex-direction: row;
557
+ align-items: center;
558
+ justify-content: flex-start;
559
+ gap: var(--gap-baserow);
560
+ }
561
+ .positionContainer620 {
562
+ display: flex;
563
+ flex-direction: row;
564
+ align-items: center;
565
+ justify-content: flex-start;
566
+ gap: var(--gap-xsrow);
567
+ }
568
+ .rowwPlayerGames {
569
+ align-self: stretch;
570
+ display: flex;
571
+ height: v-bind(height) !important;
572
+ flex-direction: row;
573
+ padding: var(--padding-xlrow) 0px var(--padding-xlrow) var(--padding-lgrow);
574
+ align-items: center;
575
+ justify-content: flex-start;
576
+ gap: var(--gap-13xlrow);
577
+ text-align: right;
578
+ background-color: v-bind(background);
579
+ font-size: v-bind(fontSize);
580
+ color: v-bind(fontColor);
581
+ font-family: v-bind(fontFamily);
582
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
583
+ }
584
+ .rowwPlayer960Games {
585
+ align-self: stretch;
586
+ display: flex;
587
+ height: v-bind(height) !important;
588
+ flex-direction: row;
589
+ padding: var(--padding-xlrow) 0px var(--padding-xlrow) var(--padding-9xlrow);
590
+ align-items: center;
591
+ justify-content: flex-start;
592
+ text-align: right;
593
+ background-color: v-bind(background);
594
+ font-size: v-bind(fontSize);
595
+ color: v-bind(fontColor);
596
+ font-family: v-bind(fontFamily);
597
+ gap: var(--gap-0row);
598
+ }
599
+ .rowwPlayer420Games {
600
+ align-self: stretch;
601
+ display: flex;
602
+ height: v-bind(height) !important;
603
+ flex-direction: row;
604
+ align-items: center;
605
+ justify-content: flex-start;
606
+ text-align: right;
607
+ background-color: v-bind(background);
608
+ font-size: v-bind(fontSize);
609
+ color: v-bind(fontColor);
610
+ font-family: v-bind(fontFamily);
611
+ gap: var(--gap-0row);
612
+ padding: 0 13px;
613
+ box-sizing: border-box;
614
+ }
615
+ .rowwPlayer460Games {
616
+ align-self: stretch;
617
+ display: flex;
618
+ height: v-bind(height) !important;
619
+ flex-direction: row;
620
+ align-items: center;
621
+ justify-content: flex-start;
622
+ text-align: right;
623
+ background-color: v-bind(background);
624
+ font-size: v-bind(fontSize);
625
+ color: v-bind(fontColor);
626
+ font-family: v-bind(fontFamily);
627
+ gap: var(--gap-0row);
628
+ padding-left: var(--padding-xsrow);
629
+ padding-right: var(--padding-xsrow);
630
+ box-sizing: border-box;
631
+ }
632
+ .containerLeftGames {
633
+ display: flex;
634
+ flex-direction: row;
635
+ align-items: center;
636
+ justify-content: center;
637
+ gap: 15px;
638
+ width: 272px;
639
+ }
640
+ .containerLeft420Games {
641
+ width: 130px;
642
+ display: flex;
643
+ flex-direction: row;
644
+ align-items: center;
645
+ justify-content: flex-start;
646
+ gap: 14px;
647
+ }
648
+ .containerLeft620Games {
649
+ display: flex;
650
+ flex-direction: row;
651
+ align-items: center;
652
+ justify-content: flex-start;
653
+ gap: var(--gap-baserow);
654
+ }
655
+ .iconFavoritesType1 {
656
+ width: 20px;
657
+ height: 20px;
658
+ display: none;
659
+ flex-direction: column;
660
+ align-items: center;
661
+ justify-content: center;
662
+ }
663
+ .iconFavoritesType1320 {
664
+ display: none;
665
+ flex-direction: column;
666
+ align-items: center;
667
+ justify-content: center;
668
+ width: 16px;
669
+ height: 16px;
670
+ }
671
+ .iconFavorites {
672
+ width: 20px;
673
+ height: 20px;
674
+ display: flex;
675
+ flex-direction: column;
676
+ align-items: center;
677
+ justify-content: center;
678
+ }
679
+ .iconFavorites420 {
680
+ width: 16px;
681
+ height: 16px;
682
+ display: flex;
683
+ flex-direction: column;
684
+ align-items: center;
685
+ justify-content: center;
686
+ }
687
+ .playerContainerGames {
688
+ position: relative;
689
+ width: 233px;
690
+ display: flex;
691
+ flex-direction: row;
692
+ align-items: center;
693
+ justify-content: flex-start;
694
+ gap: var(--gap-midrow);
695
+ text-align: left;
696
+ margin-left: 0px;
697
+ font-family: v-bind(fontFamily);
698
+ }
699
+ .playerContainer420Games {
700
+ position: relative;
701
+ width: 189px;
702
+ display: flex;
703
+ flex-direction: row;
704
+ align-items: center;
705
+ justify-content: flex-start;
706
+ text-align: left;
707
+ margin-left: 14px;
708
+ font-family: v-bind(fontFamily);
709
+ gap: var(--gap-xsrow);
710
+ }
711
+ .playerContainer460Games {
712
+ position: relative;
713
+ width: 180px;
714
+ display: flex;
715
+ flex-direction: row;
716
+ align-items: center;
717
+ justify-content: flex-start;
718
+ text-align: left;
719
+ margin-left: 25px;
720
+ font-family: v-bind(fontFamily);
721
+ gap: var(--gap-xsrow);
722
+ }
723
+ .playerContainerType1Games {
724
+ width: 200px;
725
+ display: flex;
726
+ flex-direction: row;
727
+ align-items: center;
728
+ justify-content: flex-start;
729
+ gap: 17px;
730
+ text-align: left;
731
+ font-family: var(--font-poppins);
732
+ }
733
+ .playerContainerType1320Games {
734
+ width: 80px;
735
+ display: flex;
736
+ flex-direction: row;
737
+ align-items: center;
738
+ justify-content: flex-start;
739
+ text-align: left;
740
+ font-family: var(--font-poppins);
741
+ gap: var(--gap-xsrow);
742
+ }
743
+ .playerContainerType1460Games {
744
+ width: 169px;
745
+ display: flex;
746
+ flex-direction: row;
747
+ align-items: center;
748
+ justify-content: flex-start;
749
+ text-align: left;
750
+ font-family: var(--font-poppins);
751
+ gap: var(--gap-xsrow);
752
+ }
753
+ .imgPlayerIcon {
754
+ position: absolute;
755
+ height: 32px;
756
+ width: 32px;
757
+ margin-left: 7px;
758
+ object-fit: cover;
759
+ border-radius: 60px;
760
+ object-position: top;
761
+ background: #ffffff;
762
+ }
763
+ .imgPlayerIcon460 {
764
+ position: absolute;
765
+ width: 30px;
766
+ object-fit: cover;
767
+ border-radius: 60px;
768
+ height: 30px;
769
+ margin-left: 0px;
770
+ object-position: top;
771
+ background: #ffffff;
772
+ }
773
+ .imgPlayerIcon420 {
774
+ position: absolute;
775
+ width: 24px;
776
+ object-fit: cover;
777
+ border-radius: 60px;
778
+ height: 24px;
779
+ margin-left: 0px;
780
+ object-position: top;
781
+ background: #ffffff;
782
+ }
783
+ .manchesterUnitedGames {
784
+ position: relative;
785
+ letter-spacing: 0.2px;
786
+ line-height: 20px;
787
+ font-weight: 500;
788
+ left: 60px;
789
+ text-overflow: ellipsis;
790
+ overflow: hidden;
791
+ width: 160px;
792
+ white-space: nowrap;
793
+ }
794
+ .manchesterUnited360Games {
795
+ position: relative;
796
+ letter-spacing: 0.2px;
797
+ text-overflow: ellipsis;
798
+ overflow: hidden;
799
+ white-space: nowrap;
800
+ line-height: 20px;
801
+ font-weight: 500;
802
+ left: 47px;
803
+ width: 150px;
804
+ }
805
+ .manchesterUnited420Games {
806
+ position: relative;
807
+ letter-spacing: 0.2px;
808
+ text-overflow: ellipsis;
809
+ overflow: hidden;
810
+ white-space: nowrap;
811
+ line-height: 20px;
812
+ font-weight: 500;
813
+ left: 47px;
814
+ width: 150px;
815
+ }
816
+ .manchesterUnited460Games {
817
+ position: relative;
818
+ letter-spacing: 0.2px;
819
+ line-height: 20px;
820
+ text-overflow: ellipsis;
821
+ overflow: hidden;
822
+ width: 160px;
823
+ white-space: nowrap;
824
+ left: 40px;
825
+ font-size: var(--font-size-2xsrow);
826
+ }
827
+ .containerRightGames {
828
+ flex: 1;
829
+ display: flex;
830
+ flex-direction: row;
831
+ align-items: center;
832
+ justify-content: flex-end;
833
+ text-align: center;
834
+ font-family: var(--font-poppins);
835
+ }
836
+ .containerRight960Games {
837
+ flex: 1;
838
+ display: flex;
839
+ flex-direction: row;
840
+ align-items: center;
841
+ justify-content: flex-end;
842
+ text-align: center;
843
+ font-family: var(--font-poppins);
844
+ gap: var(--gap-0row);
845
+ }
846
+ .containerRight420Games {
847
+ flex: 1;
848
+ display: flex;
849
+ flex-direction: row;
850
+ align-items: center;
851
+ justify-content: flex-end;
852
+ text-align: center;
853
+ font-family: var(--font-poppins);
854
+ width: auto;
855
+ align-self: unset;
856
+ }
857
+ .numberOfVideos {
858
+ position: relative;
859
+ letter-spacing: -0.03em;
860
+ line-height: 120%;
861
+ font-weight: 500;
862
+ }
863
+ .numberOfVideos620 {
864
+ letter-spacing: -0.03em;
865
+ line-height: 120%;
866
+ font-weight: 500;
867
+ display: flex;
868
+ }
869
+ .block02Games {
870
+ display: flex;
871
+ flex-direction: row;
872
+ align-items: center;
873
+ justify-content: flex-end;
874
+ gap: var(--gap-5xlrow);
875
+ text-align: left;
876
+ width: 190px;
877
+ }
878
+
879
+ .block02960Games {
880
+ display: flex;
881
+ flex-direction: row;
882
+ align-items: center;
883
+ justify-content: flex-end;
884
+ gap: var(--gap-5xlrow);
885
+ text-align: left;
886
+ }
887
+
888
+ .block02620Games {
889
+ display: flex;
890
+ flex-direction: row;
891
+ align-items: center;
892
+ text-align: left;
893
+ gap: var(--gap-baserow);
894
+ }
895
+ .block02420Games {
896
+ display: flex;
897
+ flex-direction: row;
898
+ align-items: center;
899
+ text-align: left;
900
+ justify-content: flex-end;
901
+ gap: var(--gap-0row);
902
+ }
903
+ .verVideos {
904
+ position: relative;
905
+ letter-spacing: -0.03em;
906
+ line-height: 120%;
907
+ font-weight: 500;
908
+ }
909
+ .verVideos620 {
910
+ display: none;
911
+ }
912
+ .numberPosition {
913
+ position: relative;
914
+ letter-spacing: 0.2px;
915
+ line-height: 20px;
916
+ font-weight: 600;
917
+ }
918
+ .shapeIcon {
919
+ position: relative;
920
+ width: 17px;
921
+ height: 16.46px;
922
+ }
923
+ .chivasIcon {
924
+ position: absolute;
925
+ margin: 0 !important;
926
+ top: 8px;
927
+ left: 17px;
928
+ width: 17px;
929
+ height: 17px;
930
+ object-fit: cover;
931
+ z-index: 2;
932
+ }
933
+
934
+ .imgTeamIcon {
935
+ position: relative;
936
+ height: 28px;
937
+ object-fit: cover;
938
+ }
939
+ .teamName {
940
+ position: relative;
941
+ letter-spacing: 0.2px;
942
+ line-height: 20px;
943
+ font-weight: 500;
944
+ }
945
+ .nameTeamGames {
946
+ flex: 1;
947
+ display: flex;
948
+ flex-direction: row;
949
+ align-items: center;
950
+ justify-content: flex-start;
951
+ gap: var(--gap-3xsrow);
952
+ text-align: left;
953
+ }
954
+ .dfC {
955
+ text-decoration: underline;
956
+ }
957
+ .position {
958
+ flex: 1;
959
+ position: relative;
960
+ letter-spacing: 0.2px;
961
+ line-height: 20px;
962
+ font-weight: 500;
963
+ }
964
+ .age {
965
+ flex: 1;
966
+ position: relative;
967
+ text-decoration: underline;
968
+ letter-spacing: 0.2px;
969
+ line-height: 20px;
970
+ font-weight: 500;
971
+ }
972
+ .manchesterUnitedIcon {
973
+ position: relative;
974
+ width: 21px;
975
+ height: 21px;
976
+ object-fit: cover;
977
+ border-radius: 50%;
978
+ }
979
+ .country {
980
+ flex: 1;
981
+ display: flex;
982
+ flex-direction: row;
983
+ align-items: center;
984
+ justify-content: center;
985
+ }
986
+ .playedGames {
987
+ flex: 1;
988
+ position: relative;
989
+ letter-spacing: 0.2px;
990
+ line-height: 20px;
991
+ font-weight: 500;
992
+ }
993
+ .playedMinutes {
994
+ flex: 1;
995
+ position: relative;
996
+ letter-spacing: 0.2px;
997
+ line-height: 20px;
998
+ font-weight: 500;
999
+ }
1000
+ .block01 {
1001
+ flex: 1;
1002
+ display: flex;
1003
+ flex-direction: row;
1004
+ align-items: center;
1005
+ justify-content: flex-start;
1006
+ }
1007
+ .leagueName {
1008
+ position: relative;
1009
+ letter-spacing: 0.2px;
1010
+ line-height: 20px;
1011
+ font-weight: 500;
1012
+ }
1013
+ .roleCharacterIcon {
1014
+ position: relative;
1015
+ width: 12px;
1016
+ height: 12px;
1017
+ overflow: hidden;
1018
+ flex-shrink: 0;
1019
+ }
1020
+
1021
+ .btnVideosGames {
1022
+ border-radius: var(--br-45xlrow);
1023
+ background-color: var(--color-gray-300row);
1024
+ backdrop-filter: blur(16px);
1025
+ border: 1px solid var(--color-gray-200row);
1026
+ box-sizing: border-box;
1027
+ height: 30px;
1028
+ display: flex;
1029
+ flex-direction: row;
1030
+ padding: var(--padding-9xsrow) var(--padding-4xsrow);
1031
+ align-items: center;
1032
+ justify-content: center;
1033
+ gap: var(--gap-6xsrow);
1034
+ }
1035
+
1036
+ .containerBtnVideosGames {
1037
+ width: 90px;
1038
+ display: flex;
1039
+ flex-direction: row;
1040
+ align-items: center;
1041
+ justify-content: center;
1042
+ gap: var(--gap-3xsrow);
1043
+ font-size: var(--font-size-3xsrow);
1044
+ color: v-bind(fontColor);
1045
+ }
1046
+ .containerBtnVideos620Games {
1047
+ width: 40px;
1048
+ display: flex;
1049
+ flex-direction: row;
1050
+ align-items: center;
1051
+ justify-content: center;
1052
+ font-size: var(--font-size-3xsrow);
1053
+ color: v-bind(fontColor);
1054
+ }
1055
+ .containesOptions {
1056
+ display: flex;
1057
+ flex-direction: row;
1058
+ align-items: center;
1059
+ justify-content: flex-end;
1060
+ gap: var(--gap-19xlrow);
1061
+ width: 100%;
1062
+ }
1063
+ .arrowExpandIcon {
1064
+ position: relative;
1065
+ width: 12px;
1066
+ height: 8px;
1067
+ }
1068
+ .arrowExpandIcon:hover {
1069
+ opacity: 0.5;
1070
+ cursor: pointer;
1071
+ }
1072
+ .rowTeam {
1073
+ align-self: stretch;
1074
+ height: 72px;
1075
+ display: flex;
1076
+ flex-direction: row;
1077
+ padding: 0px var(--padding-lgrow) 0px var(--padding-9xlrow);
1078
+ box-sizing: border-box;
1079
+ align-items: center;
1080
+ justify-content: flex-start;
1081
+ gap: var(--gap-xl);
1082
+ z-index: 1;
1083
+ text-align: right;
1084
+ background-color: v-bind(background);
1085
+ font-size: v-bind(fontSize);
1086
+ color: v-bind(fontColor);
1087
+ font-family: v-bind(fontFamily);
1088
+ /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
1089
+ }
1090
+ .rowTeam420 {
1091
+ align-self: stretch;
1092
+ height: 72px;
1093
+ display: flex;
1094
+ flex-direction: row;
1095
+ padding: 0px var(--padding-lgrow) 0px var(--padding-9xlrow);
1096
+ box-sizing: border-box;
1097
+ align-items: center;
1098
+ justify-content: flex-start;
1099
+
1100
+ z-index: 1;
1101
+ text-align: right;
1102
+ background-color: v-bind(background);
1103
+ font-size: v-bind(fontSize);
1104
+ color: v-bind(fontColor);
1105
+ font-family: v-bind(fontFamily);
1106
+ gap: var(--gap-0row);
1107
+ }
1108
+ .rowTeam320 {
1109
+ align-self: stretch;
1110
+ height: 72px;
1111
+ display: flex;
1112
+ flex-direction: row;
1113
+ align-items: center;
1114
+ justify-content: flex-start;
1115
+ z-index: 1;
1116
+ text-align: right;
1117
+ background-color: v-bind(background);
1118
+ font-size: v-bind(fontSize);
1119
+ color: v-bind(fontColor);
1120
+ font-family: v-bind(fontFamily);
1121
+
1122
+ padding-left: var(--padding-xsrow);
1123
+ padding-right: var(--padding-xsrow);
1124
+ box-sizing: border-box;
1125
+ gap: var(--gap-0row);
1126
+ }
1127
+ .rowTeam460 {
1128
+ align-self: stretch;
1129
+ height: 72px;
1130
+ display: flex;
1131
+ flex-direction: row;
1132
+ align-items: center;
1133
+ justify-content: flex-start;
1134
+ z-index: 1;
1135
+ text-align: right;
1136
+ background-color: v-bind(background);
1137
+ font-size: v-bind(fontSize);
1138
+ color: v-bind(fontColor);
1139
+ font-family: v-bind(fontFamily);
1140
+
1141
+ padding-left: var(--padding-xsrow);
1142
+ padding-right: var(--padding-xsrow);
1143
+ box-sizing: border-box;
1144
+ gap: var(--gap-0row);
1145
+ }
1146
+ .rowTeam350 {
1147
+ align-self: stretch;
1148
+ height: 72px;
1149
+ display: flex;
1150
+ flex-direction: row;
1151
+ align-items: center;
1152
+ justify-content: flex-start;
1153
+ z-index: 1;
1154
+ text-align: right;
1155
+ background-color: v-bind(background);
1156
+ font-size: v-bind(fontSize);
1157
+ color: v-bind(fontColor);
1158
+ font-family: v-bind(fontFamily);
1159
+ gap: var(--gap-0row);
1160
+ padding-left: var(--padding-xsrow);
1161
+ padding-right: var(--padding-xsrow);
1162
+ box-sizing: border-box;
1163
+ }
1164
+ .containerLeftType1 {
1165
+ display: flex;
1166
+ flex-direction: row;
1167
+ align-items: center;
1168
+ justify-content: flex-start;
1169
+ }
1170
+ .containerLeftType1680 {
1171
+ display: flex;
1172
+ flex-direction: row;
1173
+ align-items: center;
1174
+ justify-content: flex-start;
1175
+ gap: var(--gap-baserow);
1176
+ }
1177
+ .containerLeftType1320 {
1178
+ display: flex;
1179
+ flex-direction: row;
1180
+ align-items: center;
1181
+ justify-content: flex-start;
1182
+ width: 130px;
1183
+ gap: var(--gap-baserow);
1184
+ }
1185
+ .containerLeftType1350 {
1186
+ gap: var(--gap-xsrow);
1187
+ display: flex;
1188
+ flex-direction: row;
1189
+ align-items: center;
1190
+ justify-content: flex-start;
1191
+ }
1192
+ .positionContainertype1 {
1193
+ width: 34px;
1194
+ display: flex;
1195
+ flex-direction: row;
1196
+ align-items: center;
1197
+ justify-content: flex-start;
1198
+ gap: var(--gap-baserow);
1199
+ }
1200
+ .positionContainertype1380 {
1201
+ width: 10px;
1202
+ display: flex;
1203
+ flex-direction: row;
1204
+ align-items: center;
1205
+ justify-content: flex-start;
1206
+ gap: var(--gap-baserow);
1207
+ }
1208
+ .positionContainertype1680 {
1209
+ width: 34px;
1210
+ display: flex;
1211
+ flex-direction: row;
1212
+ align-items: center;
1213
+ justify-content: flex-start;
1214
+ gap: var(--gap-xsrow);
1215
+ }
1216
+ .positionContainertype1420 {
1217
+ width: 20px;
1218
+ display: flex;
1219
+ flex-direction: row;
1220
+ align-items: center;
1221
+ justify-content: flex-start;
1222
+ gap: var(--gap-baserow);
1223
+ }
1224
+ .manchesterUnitedType1 {
1225
+ position: relative;
1226
+ letter-spacing: 0.2px;
1227
+ line-height: 20px;
1228
+ font-weight: 500;
1229
+ }
1230
+ .manchesterUnitedType1460 {
1231
+ position: relative;
1232
+ letter-spacing: 0.2px;
1233
+ line-height: 20px;
1234
+ font-weight: 500;
1235
+ font-size: var(--font-size-2xsrow);
1236
+ }
1237
+ .manchesterUnitedType1320 {
1238
+ position: relative;
1239
+ letter-spacing: 0.2px;
1240
+ line-height: 20px;
1241
+ font-weight: 500;
1242
+ width: 60px;
1243
+ }
1244
+ .containerRightType1Games {
1245
+ align-self: stretch;
1246
+ flex: 1;
1247
+ display: flex;
1248
+ flex-direction: row;
1249
+ align-items: center;
1250
+ justify-content: flex-end;
1251
+ gap: 0px;
1252
+ text-align: center;
1253
+ font-family: var(--font-poppins);
1254
+ }
1255
+ .containerRightType1420Games {
1256
+ align-self: stretch;
1257
+ flex: 1;
1258
+ display: flex;
1259
+ flex-direction: row;
1260
+ align-items: center;
1261
+ justify-content: flex-end;
1262
+ text-align: center;
1263
+ font-family: var(--font-poppins);
1264
+ gap: var(--gap-0row);
1265
+ }
1266
+ .containerRightType1320Games {
1267
+ flex: 1;
1268
+ display: flex;
1269
+ flex-direction: row;
1270
+ align-items: center;
1271
+ justify-content: flex-end;
1272
+ text-align: center;
1273
+ font-family: var(--font-poppins);
1274
+ width: auto;
1275
+ align-self: unset;
1276
+ }
1277
+ .teamNameWrapperType1 {
1278
+ flex: 1;
1279
+ display: flex;
1280
+ flex-direction: row;
1281
+ align-items: center;
1282
+ justify-content: flex-start;
1283
+ }
1284
+ .teamNameWrapperType1960 {
1285
+ flex: 1;
1286
+ display: flex;
1287
+ flex-direction: row;
1288
+ align-items: center;
1289
+ justify-content: flex-start;
1290
+ }
1291
+ .teamNameWrapperType11086 {
1292
+ flex: 1;
1293
+ display: flex;
1294
+ flex-direction: row;
1295
+ align-items: center;
1296
+ justify-content: flex-start;
1297
+ }
1298
+ .ageWrapperType1 {
1299
+ flex: 1;
1300
+ display: flex;
1301
+ flex-direction: row;
1302
+ align-items: center;
1303
+ justify-content: flex-start;
1304
+ }
1305
+ .ageWrapperType1680 {
1306
+ flex: 1;
1307
+ display: flex;
1308
+ flex-direction: row;
1309
+ align-items: center;
1310
+ justify-content: flex-start;
1311
+ display: none;
1312
+ }
1313
+ .ageWrapperType11086 {
1314
+ flex: 1;
1315
+ flex: 1;
1316
+ display: flex;
1317
+ flex-direction: row;
1318
+ align-items: center;
1319
+ justify-content: flex-start;
1320
+ }
1321
+ .ageType1 {
1322
+ flex: 1;
1323
+ position: relative;
1324
+ text-decoration: underline;
1325
+ letter-spacing: 0.2px;
1326
+ line-height: 20px;
1327
+ font-weight: 500;
1328
+ }
1329
+ .ageType1960 {
1330
+ display: none;
1331
+ }
1332
+ .playedGamesWrapperType1 {
1333
+ flex: 1;
1334
+ display: flex;
1335
+ flex-direction: row;
1336
+ align-items: center;
1337
+ justify-content: flex-start;
1338
+ }
1339
+ .playedGamesWrapperType1680 {
1340
+ display: none;
1341
+ }
1342
+ .playedGamesWrapperType1960 {
1343
+ display: none;
1344
+ }
1345
+ .playedGamesType1 {
1346
+ flex: 1;
1347
+ position: relative;
1348
+ letter-spacing: 0.2px;
1349
+ line-height: 20px;
1350
+ font-weight: 500;
1351
+ }
1352
+ .playedGamesType1540 {
1353
+ text-align: center;
1354
+ display: none;
1355
+ }
1356
+ .playedGamesType1960 {
1357
+ display: none;
1358
+ }
1359
+ .playedGamesType11086 {
1360
+ display: none;
1361
+ }
1362
+ .playedMinutesWrapperType1 {
1363
+ flex: 1;
1364
+ display: flex;
1365
+ flex-direction: row;
1366
+ align-items: center;
1367
+ justify-content: flex-start;
1368
+ }
1369
+ .playedMinutesWrapperType11086 {
1370
+ display: flex;
1371
+ flex-direction: row;
1372
+ align-items: center;
1373
+ justify-content: flex-start;
1374
+ flex: 1;
1375
+ }
1376
+ .playedMinutesType1 {
1377
+ flex: 1;
1378
+ position: relative;
1379
+ letter-spacing: 0.2px;
1380
+ line-height: 20px;
1381
+ font-weight: 500;
1382
+ }
1383
+ .playedMinutesType1680 {
1384
+ display: none;
1385
+ }
1386
+ .block02Type1Games {
1387
+ align-self: stretch;
1388
+ display: flex;
1389
+ flex-direction: row;
1390
+ align-items: center;
1391
+ justify-content: flex-end;
1392
+ gap: var(--gap-5xlrow);
1393
+ }
1394
+ .block02Type1680Games {
1395
+ align-self: stretch;
1396
+ display: flex;
1397
+ flex-direction: row;
1398
+ align-items: center;
1399
+ justify-content: flex-end;
1400
+ gap: var(--gap-0row);
1401
+ }
1402
+ .block02Type1320Games {
1403
+ align-self: stretch;
1404
+ display: flex;
1405
+ flex-direction: row;
1406
+ align-items: center;
1407
+ justify-content: flex-end;
1408
+ gap: var(--gap-0row);
1409
+ }
1410
+
1411
+ .block02Type1350Games {
1412
+ align-self: stretch;
1413
+ display: flex;
1414
+ flex-direction: row;
1415
+ align-items: center;
1416
+ justify-content: flex-end;
1417
+ gap: var(--gap-0row);
1418
+ }
1419
+ .leagueNameWrapperType1 {
1420
+ align-self: stretch;
1421
+ background-color: var(--color-darkslategray-100row);
1422
+ display: flex;
1423
+ flex-direction: row;
1424
+ align-items: center;
1425
+ justify-content: center;
1426
+ }
1427
+ .leagueNameWrapperType1680 {
1428
+ display: none;
1429
+ }
1430
+ .leagueNameWrapperType1960 {
1431
+ align-self: stretch;
1432
+ background-color: var(--color-darkslategray-100row);
1433
+ display: flex;
1434
+ flex-direction: row;
1435
+ align-items: center;
1436
+ justify-content: center;
1437
+ }
1438
+ .leagueNameType1 {
1439
+ position: relative;
1440
+ letter-spacing: 0.2px;
1441
+ line-height: 20px;
1442
+ font-weight: 500;
1443
+ display: inline-block;
1444
+ width: 64px;
1445
+ flex-shrink: 0;
1446
+ }
1447
+
1448
+ .leagueNameType1960 {
1449
+ display: flex;
1450
+ position: relative;
1451
+ letter-spacing: 0.2px;
1452
+ justify-content: center;
1453
+ line-height: 20px;
1454
+ font-weight: 500;
1455
+ width: 64px;
1456
+ flex-shrink: 0;
1457
+ }
1458
+ .numberOfVideosType1 {
1459
+ position: relative;
1460
+ letter-spacing: -0.03em;
1461
+ line-height: 120%;
1462
+ font-weight: 500;
1463
+ display: none;
1464
+ }
1465
+ .numberOfVideosType1680 {
1466
+ position: relative;
1467
+ letter-spacing: -0.03em;
1468
+ line-height: 120%;
1469
+ font-weight: 500;
1470
+ display: flex;
1471
+ }
1472
+ .numberOfVideosType11232 {
1473
+ position: relative;
1474
+ letter-spacing: -0.03em;
1475
+ line-height: 120%;
1476
+ font-weight: 500;
1477
+ display: none;
1478
+ }
1479
+ .vectorIconType1 {
1480
+ position: absolute;
1481
+ margin: 0 !important;
1482
+ height: 12.57%;
1483
+ width: 1.1%;
1484
+ top: 71.71%;
1485
+ right: 92.27%;
1486
+ bottom: 15.71%;
1487
+ left: 6.62%;
1488
+ max-width: 100%;
1489
+ overflow: hidden;
1490
+ max-height: 100%;
1491
+ display: none;
1492
+ opacity: 0.3;
1493
+ z-index: 2;
1494
+ }
1495
+
1496
+ .block01TitlesType1 {
1497
+ flex: 1;
1498
+ display: flex;
1499
+ flex-direction: row;
1500
+ align-items: center;
1501
+ justify-content: flex-start;
1502
+ }
1503
+ .numberPositionType1 {
1504
+ position: relative;
1505
+ letter-spacing: 0.2px;
1506
+ line-height: 20px;
1507
+ font-weight: 600;
1508
+ }
1509
+ .shapeIconType1 {
1510
+ position: relative;
1511
+ width: 17px;
1512
+ height: 16.46px;
1513
+ }
1514
+
1515
+ .tijuanaIconType1 {
1516
+ position: relative;
1517
+ width: 26px;
1518
+ height: 26px;
1519
+ object-fit: cover;
1520
+ }
1521
+ .tijuanaWrapperType1 {
1522
+ width: 32px;
1523
+ height: 32px;
1524
+ background: #ffffff;
1525
+ border-radius: 50%;
1526
+ display: flex;
1527
+ flex-direction: row;
1528
+ align-items: center;
1529
+ justify-content: center;
1530
+ }
1531
+
1532
+ .tijuanaWrapperType1NoBg {
1533
+ width: 32px;
1534
+ height: 32px;
1535
+ display: flex;
1536
+ flex-direction: row;
1537
+ align-items: center;
1538
+ justify-content: center;
1539
+ }
1540
+ .teamNameType1 {
1541
+ flex: 1;
1542
+ position: relative;
1543
+ letter-spacing: 0.2px;
1544
+ line-height: 20px;
1545
+ font-weight: 500;
1546
+ }
1547
+ .roleCharacterIconType1 {
1548
+ position: relative;
1549
+ width: 12px;
1550
+ height: 12px;
1551
+ overflow: hidden;
1552
+ flex-shrink: 0;
1553
+ }
1554
+ .verVideosType1 {
1555
+ position: relative;
1556
+ letter-spacing: -0.03em;
1557
+ line-height: 120%;
1558
+ font-weight: 500;
1559
+ }
1560
+ .btnVideosType1Games {
1561
+ border-radius: 64px;
1562
+ background-color: rgba(255, 255, 255, 0.08);
1563
+ backdrop-filter: blur(16px);
1564
+ border: 1px solid rgba(255, 255, 255, 0.16);
1565
+ box-sizing: border-box;
1566
+ height: 30px;
1567
+ display: flex;
1568
+ flex-direction: row;
1569
+ padding: 4px 9px;
1570
+ align-items: center;
1571
+ justify-content: center;
1572
+ gap: 7px;
1573
+ }
1574
+
1575
+ .containerBtnVideosType1Games {
1576
+ width: 90px;
1577
+ display: flex;
1578
+ flex-direction: row;
1579
+ align-items: center;
1580
+ justify-content: center;
1581
+ gap: 10px;
1582
+ text-align: left;
1583
+ font-size: var(--font-size-3xsrow);
1584
+ color: var(--color-white);
1585
+ }
1586
+ .containesOptionsType1Games {
1587
+ align-self: stretch;
1588
+ display: flex;
1589
+ flex-direction: row;
1590
+ align-items: center;
1591
+ justify-content: flex-end;
1592
+ gap: var(--gap-19xlrow);
1593
+ width: 100%;
1594
+ }
1595
+ .arrowExpandIconType1 {
1596
+ position: relative;
1597
+ width: 10px;
1598
+ height: 5px;
1599
+ }
1600
+
1601
+ .templateTablaProductividadType1 {
1602
+ position: relative;
1603
+ width: 100%;
1604
+ display: flex;
1605
+ flex-direction: column;
1606
+ align-items: flex-start;
1607
+ justify-content: flex-start;
1608
+ text-align: left;
1609
+ font-size: var(--font-size-xsrow);
1610
+ color: var(--color-white);
1611
+ font-family: var(--font-poppins);
1612
+ }
1613
+ .verVideosType11232 {
1614
+ display: flex;
1615
+ }
1616
+
1617
+ .templateTablaProductividadType1320 {
1618
+ min-width: 320px;
1619
+ }
1620
+
1621
+ .verVideosType1680 {
1622
+ display: none;
1623
+ }
1624
+ </style>