@golstats/gsc-lineups-reports 1.0.8 → 1.1.0

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 (48) hide show
  1. package/README.md +2 -2
  2. package/dist/css/fonts.css +91 -91
  3. package/dist/gsc-lineups-reports.css +1 -1
  4. package/dist/gsc-lineups-reports.es.js +3135 -2751
  5. package/dist/gsc-lineups-reports.umd.js +10 -7
  6. package/dist/images/canchaRPH.svg +30 -30
  7. package/dist/images/events/atajada.svg +56 -56
  8. package/dist/images/events/fin-del-partido.svg +43 -43
  9. package/dist/images/events/fuera-de-lugar.svg +57 -57
  10. package/dist/images/events/gol.svg +48 -48
  11. package/dist/images/events/icn-cambio.svg +6 -6
  12. package/dist/images/events/icn-falta.svg +4 -4
  13. package/dist/images/events/icn-play.svg +3 -3
  14. package/dist/images/events/icn-tarjeta-amarilla.svg +3 -3
  15. package/dist/images/events/icn-tarjeta-roja.svg +3 -3
  16. package/dist/images/events/icn-tiro-a-porteria.svg +36 -36
  17. package/dist/images/events/icn-tiros-de-esquina.svg +18 -18
  18. package/dist/images/events/inicia-el-partido.svg +45 -45
  19. package/dist/images/events/jugada-peligrosa.svg +90 -90
  20. package/dist/images/events/penal-fallado.svg +194 -194
  21. package/dist/images/events/penal-marcado.svg +189 -189
  22. package/dist/images/events/tiempo-agregado.svg +74 -74
  23. package/dist/images/events/tiro-a-porteria.svg +80 -80
  24. package/dist/images/events/var.svg +30 -30
  25. package/package.json +7 -3
  26. package/src/components/Lineup2D/CheckBox.vue +42 -42
  27. package/src/components/Lineup2D/FilterEmpty.vue +48 -48
  28. package/src/components/Lineup2D/Icons.vue +29 -29
  29. package/src/components/Lineup2D/LineupField.vue +274 -274
  30. package/src/components/Lineup2D/LineupFilter.vue +285 -285
  31. package/src/components/Lineup2D/LineupMainHeader.vue +222 -222
  32. package/src/components/Lineup2D/LineupRecentItem.vue +110 -110
  33. package/src/components/Lineup2D/MatchDetails.vue +66 -66
  34. package/src/components/gsc-filter.vue +286 -286
  35. package/src/components/gsc-header-historico-lineup.vue +1064 -1064
  36. package/src/components/gsc-header-postmatch-lineup.vue +1017 -1017
  37. package/src/components/gsc-header-probables-lineup.vue +1044 -1044
  38. package/src/components/gsc-header-recientes-lineup.vue +2337 -2337
  39. package/src/components/gsc-lineup-dosd.vue +3777 -3752
  40. package/src/components/gsc-lineup-main.vue +81 -65
  41. package/src/components/gsc-lineups-reports.vue +10 -1
  42. package/src/components/gsc-lineups.vue +229 -37
  43. package/src/components/gsc-player-card.vue +166 -166
  44. package/src/index.js +4 -4
  45. package/src/main-test.js +42 -0
  46. package/src/types.d.ts +45 -45
  47. package/src/utils/apiUrl.js +33 -0
  48. package/src/utils/socketConnection.js +29 -29
package/src/components/gsc-header-postmatch-lineup.vue CHANGED
@@ -1,1017 +1,1017 @@
1
- <template>
2
- <div :class="$style.gscheaderlineup">
3
- <div :class="$style.headerSeccionAlineaciones">
4
- <div :class="headerSeccionAlineaciones1Class" id="header-desktop">
5
- <!-- alineaciones switch -->
6
- <div :class="$style.groupsLeagueParent">
7
- <div :class="$style.groupsLeague">
8
- <span>Las alineaciones de este partido </span>
9
- <span :class="$style.anNoEstn">aún no están disponibles</span>
10
- <span>. Por lo pronto puedes ver alineaciones:</span>
11
- </div>
12
- <div :class="$style.switchStatesBig" id="switch-lineup"></div>
13
- </div>
14
- <!-- alineaciones switch -->
15
- <div :class="$style.matchContainer" id="match-container">
16
- <div :class="$style.homeTeamContainer">
17
- <div :class="$style.teamContainer">
18
- <div :class="$style.imgHomeTeamWrapper">
19
- <img
20
- :class="$style.imgHomeTeamIcon"
21
- alt=""
22
- :src="
23
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
24
- gameInfo.home_team +
25
- '.png'
26
- "
27
- />
28
- </div>
29
- </div>
30
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
31
- </div>
32
- <div :class="$style.scoreContainerWrapper">
33
- <div :class="$style.scoreContainer" v-if="!isLive">
34
- <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
35
- {{ gameInfo.score[0] }}
36
- </div>
37
- <div :class="$style.div">-</div>
38
- <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
39
- {{ gameInfo.score[1] }}
40
- </div>
41
- </div>
42
- <div :class="$style.titleSession">
43
- {{
44
- gameInfo.season_name !== undefined
45
- ? gameInfo.season_name +
46
- '&nbsp; | &nbsp;' +
47
- remplazarMxJor(gameInfo.matchday_abbreviation) +
48
- '&nbsp; | &nbsp;' +
49
- gameInfo.home_team_abbreviation +
50
- ' - ' +
51
- gameInfo.away_team_abbreviation
52
- : ''
53
- }}
54
- </div>
55
- </div>
56
- <div :class="$style.awayTeamContainer">
57
- <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
58
- <div :class="$style.teamContainer1">
59
- <div :class="$style.imgHomeTeamWrapper">
60
- <img
61
- :class="$style.imgHomeTeamIcon"
62
- alt=""
63
- :src="
64
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
65
- gameInfo.away_team +
66
- '.png'
67
- "
68
- />
69
- </div>
70
- </div>
71
- </div>
72
- </div>
73
- <div :class="$style.sliderMatches"></div>
74
- <div :class="$style.matchContainer1">
75
- <div :class="$style.btnFilterParent">
76
- <button :class="$style.btnFilter" id="btn-filters">
77
- <div :class="$style.sortParent">
78
- <img
79
- :class="$style.sortIcon"
80
- alt=""
81
- src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter.svg"
82
- />
83
- <div :class="$style.filtros">Filtros</div>
84
- </div>
85
- <img
86
- :class="$style.shapeIcon"
87
- alt=""
88
- src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow.svg"
89
- />
90
- </button>
91
- <button :class="$style.btnFilter1" id="btn-filters">
92
- <div :class="$style.sortParent">
93
- <div :class="$style.filtros">Jornada</div>
94
- <div :class="$style.filtros">2</div>
95
- </div>
96
- <img
97
- :class="$style.shapeIcon"
98
- alt=""
99
- src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow.svg"
100
- />
101
- </button>
102
- </div>
103
- <div :class="$style.match">
104
- <div :class="$style.homeTeam">
105
- <img
106
- :class="$style.backArrowIcon"
107
- alt=""
108
- src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/backarrow.svg"
109
- />
110
- <div :class="$style.teamContainer2">
111
- <div :class="$style.manchesterUnited">{{ gameInfo.home_team_abbreviation }}</div>
112
- <img
113
- :class="$style.imgHomeTeamIcon"
114
- alt=""
115
- :src="
116
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
117
- gameInfo.home_team +
118
- '.png'
119
- "
120
- />
121
- </div>
122
- </div>
123
- <div :class="$style.scoreContainer1">
124
- <div :class="$style.finalScore" v-if="!isLive">
125
- <div :class="$style.div4" v-if="Object.keys(gameInfo).length > 0">
126
- {{ gameInfo.score[0] }}
127
- </div>
128
- <div :class="$style.div4">-</div>
129
- <div :class="$style.div4" v-if="Object.keys(gameInfo).length > 0">
130
- {{ gameInfo.score[1] }}
131
- </div>
132
- </div>
133
- <div :class="$style.manchesterUnited1">
134
- <template v-if="teamActive == 'home'">
135
- <template v-if="Object.home_match_result == 1"> Ganado </template>
136
- <template v-if="Object.home_match_result == 2"> Perdido </template>
137
- <template v-if="Object.home_match_result == 3"> Empatado </template>
138
- </template>
139
- <template v-else>
140
- <template v-if="Object.visiting_match_result == 1"> Ganado </template>
141
- <template v-if="Object.visiting_match_result == 2"> Perdido </template>
142
- <template v-if="Object.visiting_match_result == 3"> Empatado </template>
143
- </template>
144
- </div>
145
- </div>
146
- <div :class="$style.homeTeam">
147
- <div :class="$style.teamContainer2">
148
- <img
149
- :class="$style.imgHomeTeamIcon"
150
- alt=""
151
- :src="
152
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
153
- gameInfo.away_team +
154
- '.png'
155
- "
156
- />
157
- <div :class="$style.manchesterUnited">{{ gameInfo.away_team_abbreviation }}</div>
158
- </div>
159
- <img
160
- :class="$style.backArrowIcon"
161
- alt=""
162
- src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/nextarrow.svg"
163
- />
164
- </div>
165
- </div>
166
- <div :class="$style.btnDetails">
167
- <div :class="$style.manchesterUnited2">Ver detalles</div>
168
- </div>
169
- </div>
170
- </div>
171
- <div :class="headerSeccionAlineaciones2Class" id="header-mobile">
172
- <div :class="$style.switchStatesBig1" id="switch-lineup"></div>
173
- <div :class="$style.containerData">
174
- <div :class="$style.manchesterUnited13">Alineación utilizada en:</div>
175
- <div :class="$style.matchContainer2" id="match-container">
176
- <div :class="$style.homeTeamContainer1">
177
- <div :class="$style.teamContainer">
178
- <div :class="$style.imgHomeTeamWrapper">
179
- <img
180
- :class="$style.imgHomeTeamIcon"
181
- alt=""
182
- :src="
183
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
184
- gameInfo.home_team +
185
- '.png'
186
- "
187
- />
188
- </div>
189
- </div>
190
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
191
- </div>
192
- <div :class="$style.scoreContainer2" v-if="!isLive">
193
- <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
194
- {{ gameInfo.score[0] }}
195
- </div>
196
- <div :class="$style.div">-</div>
197
- <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
198
- {{ gameInfo.score[1] }}
199
- </div>
200
- </div>
201
- <div :class="$style.homeTeamContainer1">
202
- <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
203
- <div :class="$style.teamContainer1">
204
- <div :class="$style.imgHomeTeamWrapper">
205
- <img
206
- :class="$style.imgHomeTeamIcon"
207
- alt=""
208
- :src="
209
- 'https://golstatsimages.blob.core.windows.net/teams-80/' +
210
- gameInfo.away_team +
211
- '.png'
212
- "
213
- />
214
- </div>
215
- </div>
216
- </div>
217
- </div>
218
- <div :class="$style.sliderMatches1"></div>
219
- </div>
220
- </div>
221
- </div>
222
- </div>
223
- </template>
224
-
225
- <script>
226
- import '@@/@golstats/gsc-carousel/dist/style.css'
227
- import { GSCCarousel } from '@golstats/gsc-carousel'
228
- import { GscSwitchComponent } from '@golstats/gsc-switch-component'
229
- import '@@/@golstats/gsc-switch-component/dist/style.css'
230
- export default {
231
- components: { GSCCarousel, GscSwitchComponent },
232
- props: {
233
- optionSelected: {
234
- type: String,
235
- default: 'Historicos',
236
- },
237
- widthSize: {
238
- type: Number,
239
- default: 0,
240
- },
241
- isLive: {
242
- type: Boolean,
243
- default: false,
244
- },
245
- gameInfo: {
246
- type: Object,
247
- default: () => {},
248
- },
249
- teamActive: {
250
- type: String,
251
- default: 'home',
252
- },
253
- gameHistoric: {
254
- type: Array,
255
- default: () => [],
256
- },
257
- },
258
- watch: {
259
- gameInfo: {
260
- immediate: true,
261
- handler: async function (newValue) {
262
- try {
263
- this.$emit('input', { season_id: newValue.season_id, game_id: newValue.id })
264
- } catch (e) {
265
- throw new Error(e)
266
- }
267
- },
268
- },
269
- },
270
- data() {
271
- return {
272
- selectedOption: 0,
273
- updateIndex: 0,
274
- test: [
275
- { description: `Clausura 2018 I JOR 5 I CHI - ATL 12 '`, icon: 'goal' },
276
- { description: `Clausura 2018 I JOR 5 I CHI - ATL 73'`, icon: 'goal' },
277
- { description: `Clausura 2018 I JOR 5 I CHI - ATL 53'`, icon: 'red-card' },
278
- { description: `Clausura 2018 I JOR 5 I CHI - ATL 123'`, icon: 'yellow-card' },
279
- ],
280
- }
281
- },
282
- computed: {
283
- headerSeccionAlineaciones2Class() {
284
- const width = this.widthSize
285
- if (width <= 540) {
286
- return this.$style.headerSeccionAlineaciones2540
287
- } else if (width <= 1200) {
288
- return this.$style.headerSeccionAlineaciones21200
289
- } else {
290
- return this.$style.headerSeccionAlineaciones2
291
- }
292
- },
293
- headerSeccionAlineaciones1Class() {
294
- const width = this.widthSize
295
- if (width <= 540) {
296
- return this.$style.headerSeccionAlineaciones1540
297
- } else {
298
- return this.$style.headerSeccionAlineaciones1
299
- }
300
- },
301
- },
302
- methods: {
303
- remplazarMxJor(val) {
304
- return val.replace('M', 'JOR ')
305
- },
306
- changeCarouselItem(val) {
307
- this.$emit('input', {
308
- season_id: val.selectedItem.season,
309
- game_id: val.selectedItem.game,
310
- ht_abrev: val.selectedItem.home_team_abbreviation,
311
- at_abrev: val.selectedItem.away_team_abbreviation,
312
- })
313
- this.selectedOption = val.selectedItemIndex
314
- this.updateIndex += 1
315
- },
316
- clickOnSelectOption(val) {
317
- this.$emit('clickOnSelectOption', val)
318
- },
319
- },
320
- }
321
- </script>
322
-
323
- <style module>
324
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
325
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
326
- body {
327
- margin: 0;
328
- line-height: normal;
329
- }
330
- :root {
331
- /* fonts */
332
- --font-poppinshi: Poppins;
333
- --font-interhi: Inter;
334
-
335
- /* font sizes */
336
- --font-size-3xshi: 10px;
337
- --font-size-xshi: 12px;
338
- --font-size-smhi: 14px;
339
- --font-size-2xshi: 11px;
340
- --font-size-4xshi: 9px;
341
- --font-size-base-2hi: 15.2px;
342
-
343
- /* Colors */
344
- --color-gray-100hi: #172632;
345
- --color-gray-200hi: #172531;
346
- --color-gray-300hi: rgba(255, 255, 255, 0.7);
347
- --color-gray-400hi: rgba(255, 255, 255, 0.3);
348
- --color-white: #fff;
349
- --color-yellowgreen-100hi: #cbee6b;
350
- --color-yellowgreen-200hi: #cbed6e;
351
- --color-whitesmokehi: #f4f4f4;
352
- --color-darkbluehi: #0234c5;
353
- --color-darkslategrayhi: #1e2b36;
354
- --color-goldenrodhi: #f7c330;
355
- --color-redhi: #ff0000;
356
- --color-slategrayhi: #56637b;
357
- --color-gray-700hi: rgba(255, 255, 255, 0.7);
358
- --color-gray-100re: #172632;
359
- --color-gray-200re: #172531;
360
- --color-gray-300re: rgba(255, 255, 255, 0.05);
361
- --color-gray-400re: rgba(255, 255, 255, 0.2);
362
- --color-gray-500: rgba(255, 255, 255, 0.3);
363
- --color-gray-600: rgba(255, 255, 255, 0.1);
364
- --color-gray-700re: rgba(255, 255, 255, 0.7);
365
- --color-goldenrodre: #f7c330;
366
- --color-redre: #ff0000;
367
- --color-yellowgreen-100re: #cbed6e;
368
- --color-yellowgreen-200re: #cbee6b;
369
- --color-darkbluere: #0234c5;
370
- --color-darkslategrayre: #1e2b36;
371
- --color-slategrayre: #56637b;
372
-
373
- /* Spacing */
374
- --sizes-round-corner-round-corner-32hi: 32px;
375
- --sizes-spacing-space-24hi: 24px;
376
-
377
- /* Gaps */
378
- --gap-basehi: 16px;
379
- --gap-3xshi: 10px;
380
- --gap-7xshi: 6px;
381
- --gap-11xshi: 2px;
382
- --gap-8xshi: 5px;
383
- --gap-40xlhi: 59px;
384
- --gap-4xshi: 9px;
385
- --gap-11xlhi: 30px;
386
-
387
- /* Paddings */
388
- --padding-basehi: 16px;
389
- --padding-5xlhi: 24px;
390
- --padding-xshi: 12px;
391
- --padding-7xshi: 6px;
392
- --padding-11xshi: 2px;
393
- --padding-3xshi: 10px;
394
- --padding-29xlhi: 48px;
395
- --padding-xlhi: 20px;
396
- --padding-5xshi: 8px;
397
-
398
- /* Border radiuses */
399
- --br-9xshi: 4px;
400
- --br-2xs-2hi: 10.2px;
401
- --br-31xlhi: 50px;
402
- --br-13xlhi: 32px;
403
- --br-12xshi: 1px;
404
- --br-12xsre: 1px;
405
- --br-2xs-2re: 10.2px;
406
- --br-mid-4: 17.4px;
407
- --br-5xsre: 8px;
408
- --br-31xlre: 50px;
409
- --br-13xlre: 32px;
410
- --br-3xs-6re: 9.6px;
411
- }
412
- .selectoritem {
413
- width: 100%;
414
- color: rgba(255, 255, 255, 0.7);
415
- text-align: center;
416
- font-family: Poppins, sans-serif;
417
- font-size: 14px;
418
- font-weight: 500;
419
- line-height: 143.322%;
420
- letter-spacing: -0.14px;
421
- }
422
- .selectoritem2 {
423
- width: 100%;
424
- color: rgba(255, 255, 255, 0.7);
425
- text-align: center;
426
- font-family: Poppins, sans-serif;
427
- font-size: 11px;
428
- font-weight: 500;
429
- line-height: 143.322%;
430
- letter-spacing: -0.14px;
431
- }
432
- .gscheaderlineup {
433
- width: 100%;
434
- height: auto;
435
- display: inline-block;
436
- margin-bottom: 40px;
437
- }
438
-
439
- .anNoEstn {
440
- font-weight: 500;
441
- }
442
- .groupsLeague {
443
- position: relative;
444
- line-height: 20px;
445
- display: none;
446
- }
447
- .jugadores {
448
- position: relative;
449
- line-height: 20px;
450
- font-weight: 600;
451
- }
452
- .switchOption {
453
- border-radius: var(--sizes-round-corner-round-corner-32hi);
454
- background-color: var(--color-darkslategrayhi);
455
- border: 0.8px solid var(--color-yellowgreen-100hi);
456
- display: flex;
457
- flex-direction: row;
458
- align-items: center;
459
- justify-content: center;
460
- padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
461
- }
462
- .jugadores1 {
463
- position: relative;
464
- line-height: 20px;
465
- opacity: 0.6;
466
- }
467
- .switchOption1 {
468
- border-radius: var(--sizes-round-corner-round-corner-32hi);
469
- display: flex;
470
- flex-direction: row;
471
- align-items: center;
472
- justify-content: center;
473
- padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
474
- }
475
- .switchStatesBig {
476
- border-radius: var(--sizes-round-corner-round-corner-32hi);
477
- background-color: var(--color-gray-100hi);
478
- border: 1px solid var(--color-gray-500);
479
- display: none;
480
- width: 320px;
481
- font-size: var(--font-size-xshi);
482
- color: var(--color-white);
483
- }
484
- .groupsLeagueParent {
485
- align-self: stretch;
486
- display: flex;
487
- flex-direction: column;
488
- align-items: center;
489
- justify-content: flex-start;
490
- gap: 30px;
491
- text-align: center;
492
- }
493
- .imgHomeTeamIcon {
494
- position: relative;
495
- width: 28px;
496
- height: 28px;
497
- object-fit: cover;
498
- }
499
- .imgHomeTeamWrapper {
500
- border-radius: var(--br-31xlhi);
501
- background-color: var(--color-gray-200hi);
502
- width: 40px;
503
- height: 40px;
504
- display: flex;
505
- flex-direction: column;
506
- align-items: center;
507
- justify-content: center;
508
- padding: var(--padding-3xshi);
509
- box-sizing: border-box;
510
- }
511
- .teamContainer {
512
- border-radius: var(--br-31xlhi);
513
- border: 1px solid var(--color-darkbluehi);
514
- box-sizing: border-box;
515
- width: 48px;
516
- height: 48px;
517
- display: flex;
518
- flex-direction: row;
519
- align-items: center;
520
- justify-content: center;
521
- padding: var(--padding-3xshi);
522
- }
523
- .name {
524
- position: relative;
525
- letter-spacing: 0.31px;
526
- line-height: 30.87px;
527
- font-weight: 500;
528
- }
529
- .homeTeamContainer {
530
- flex: 1;
531
- border-bottom: 1px solid var(--color-slategrayhi);
532
- display: flex;
533
- flex-direction: row;
534
- align-items: center;
535
- justify-content: flex-start;
536
- padding: 0px 0px var(--padding-5xshi);
537
- gap: var(--gap-3xshi);
538
- }
539
- .div {
540
- position: relative;
541
- font-weight: 600;
542
- }
543
- .titleSession {
544
- font-family: var(--font-poppinshi);
545
- font-size: 13px;
546
- font-stretch: normal;
547
- font-style: normal;
548
- letter-spacing: -0.14px;
549
- text-align: center;
550
- color: rgba(255, 255, 255, 0.7);
551
- margin-top: 30px;
552
- }
553
- .scoreContainer {
554
- border-radius: var(--br-mid-4);
555
- background-color: var(--color-gray-600);
556
- display: flex;
557
- flex-direction: row;
558
- align-items: center;
559
- justify-content: center;
560
- padding: 6.524074554443359px 17.397533416748047px;
561
- gap: var(--gap-8xshi);
562
- }
563
- .scoreContainerWrapper {
564
- align-self: stretch;
565
- width: 323px;
566
- display: flex;
567
- flex-direction: column;
568
- align-items: center;
569
- justify-content: space-between;
570
- text-align: center;
571
- font-size: 14px;
572
- color: var(--color-white);
573
- font-family: var(--font-interhi);
574
- }
575
- .teamContainer1 {
576
- border-radius: var(--br-31xlhi);
577
- border: 1px solid var(--color-yellowgreen-200hi);
578
- box-sizing: border-box;
579
- width: 48px;
580
- height: 48px;
581
- display: flex;
582
- flex-direction: row;
583
- align-items: center;
584
- justify-content: center;
585
- padding: var(--padding-3xshi);
586
- }
587
- .awayTeamContainer {
588
- flex: 1;
589
- border-bottom: 1px solid var(--color-slategrayhi);
590
- display: flex;
591
- flex-direction: row;
592
- align-items: center;
593
- justify-content: flex-end;
594
- padding: 0px 0px var(--padding-5xshi);
595
- gap: var(--gap-3xshi);
596
- }
597
- .matchContainer {
598
- align-self: stretch;
599
- display: flex;
600
- flex-direction: row;
601
- align-items: center;
602
- justify-content: space-between;
603
- padding: 0px 0px var(--padding-xshi);
604
- color: var(--color-whitesmokehi);
605
- }
606
- .sliderMatchesChild {
607
- position: relative;
608
- border-radius: 9.55px;
609
- width: 7.02px;
610
- height: 14.23px;
611
- }
612
- .manchesterUnited {
613
- position: relative;
614
- letter-spacing: -0.01em;
615
- line-height: 20.07px;
616
- font-weight: 500;
617
- }
618
- .sliderMatchesItem {
619
- position: relative;
620
- border-radius: 9.55px;
621
- width: 7.02px;
622
- height: 14.24px;
623
- }
624
- .sliderMatches {
625
- align-self: stretch;
626
- display: flex;
627
- flex-direction: row;
628
- align-items: center;
629
- justify-content: center;
630
- padding: var(--padding-11xshi) var(--padding-basehi);
631
- gap: var(--gap-3xshi);
632
- text-align: center;
633
- width: 350px;
634
- margin: 0 auto;
635
- }
636
- .sortIcon {
637
- position: relative;
638
- width: 18px;
639
- height: 18px;
640
- overflow: hidden;
641
- flex-shrink: 0;
642
- }
643
- .filtros {
644
- position: relative;
645
- font-size: var(--font-size-smhi);
646
- line-height: 24px;
647
- font-family: var(--font-poppinshi);
648
- color: var(--color-white);
649
- text-align: left;
650
- }
651
- .sortParent {
652
- display: flex;
653
- flex-direction: row;
654
- align-items: center;
655
- justify-content: center;
656
- gap: var(--gap-8xshi);
657
- }
658
- .shapeIcon {
659
- position: relative;
660
- width: 8px;
661
- height: 4px;
662
- }
663
- .btnFilter {
664
- cursor: pointer;
665
- border: 1px solid var(--color-gray-400hi);
666
- padding: var(--padding-5xshi) var(--padding-3xshi);
667
- background-color: var(--color-gray-300hi);
668
- border-radius: var(--br-5xs);
669
- box-sizing: border-box;
670
- width: 102px;
671
- height: 32px;
672
- display: flex;
673
- flex-direction: row;
674
- align-items: center;
675
- justify-content: space-between;
676
- }
677
- .btnFilter1 {
678
- cursor: pointer;
679
- border: 1px solid var(--color-gray-400hi);
680
- padding: var(--padding-5xshi) var(--padding-3xshi);
681
- background-color: var(--color-gray-300hi);
682
- border-radius: var(--br-5xs);
683
- box-sizing: border-box;
684
- height: 32px;
685
- display: flex;
686
- flex-direction: row;
687
- align-items: center;
688
- justify-content: flex-start;
689
- gap: var(--gap-3xshi);
690
- }
691
- .btnFilterParent {
692
- width: 225px;
693
- display: flex;
694
- flex-direction: row;
695
- align-items: flex-start;
696
- justify-content: flex-start;
697
- gap: var(--gap-xs);
698
- }
699
- .backArrowIcon {
700
- position: relative;
701
- border-radius: 10.21px;
702
- width: 14.31px;
703
- height: 6.41px;
704
- }
705
- .teamContainer2 {
706
- display: flex;
707
- flex-direction: row;
708
- align-items: center;
709
- justify-content: flex-start;
710
- gap: var(--gap-8xshi);
711
- }
712
- .homeTeam {
713
- display: flex;
714
- flex-direction: row;
715
- align-items: center;
716
- justify-content: flex-start;
717
- gap: var(--gap-mini);
718
- }
719
- .div4 {
720
- flex: 1;
721
- position: relative;
722
- font-weight: 600;
723
- }
724
- .finalScore {
725
- border-radius: var(--br-mid-4);
726
- background-color: var(--color-gray-600);
727
- border: 0.5px solid var(--color-yellowgreen-100hi);
728
- box-sizing: border-box;
729
- width: 70.73px;
730
- display: flex;
731
- flex-direction: row;
732
- align-items: center;
733
- justify-content: center;
734
- padding: 6.524074554443359px 17.397533416748047px;
735
- gap: var(--gap-4xshi);
736
- }
737
- .manchesterUnited1 {
738
- position: relative;
739
- font-size: var(--font-size-xshi);
740
- font-weight: 500;
741
- font-family: var(--font-poppinshi);
742
- color: var(--color-gray-700hi);
743
- }
744
- .scoreContainer1 {
745
- display: flex;
746
- flex-direction: column;
747
- align-items: center;
748
- justify-content: center;
749
- gap: var(--gap-4xshi);
750
- text-align: center;
751
- font-size: 15.22px;
752
- color: var(--color-white);
753
- font-family: var(--font-interhi);
754
- }
755
- .match {
756
- display: flex;
757
- flex-direction: row;
758
- align-items: flex-start;
759
- justify-content: center;
760
- gap: 17px;
761
- }
762
- .manchesterUnited2 {
763
- position: relative;
764
- text-decoration: underline;
765
- font-weight: 500;
766
- }
767
- .btnDetails {
768
- width: 225px;
769
- height: 28px;
770
- display: flex;
771
- flex-direction: row;
772
- align-items: center;
773
- justify-content: flex-end;
774
- text-align: right;
775
- font-size: var(--font-size-xshi);
776
- }
777
- .matchContainer1 {
778
- align-self: stretch;
779
- display: none;
780
- flex-direction: row;
781
- align-items: flex-start;
782
- justify-content: space-between;
783
- padding: 4px 0px 0px;
784
- }
785
- .goalChild {
786
- position: relative;
787
- width: 8.03px;
788
- height: 8.03px;
789
- }
790
- .goal {
791
- width: 9px;
792
- height: 9px;
793
- display: flex;
794
- flex-direction: row;
795
- align-items: center;
796
- justify-content: center;
797
- }
798
- .manchesterUnited3 {
799
- position: relative;
800
- letter-spacing: -0.01em;
801
- line-height: 19.5px;
802
- text-transform: capitalize;
803
- font-weight: 500;
804
- }
805
- .minuteEvent {
806
- display: flex;
807
- flex-direction: row;
808
- align-items: center;
809
- justify-content: flex-start;
810
- gap: var(--gap-4xshi);
811
- }
812
- .yellowCard {
813
- position: relative;
814
- border-radius: var(--br-12xshi);
815
- background-color: var(--color-goldenrodhi);
816
- width: 4px;
817
- height: 6px;
818
- }
819
- .awayTeamEvents {
820
- display: flex;
821
- flex-direction: column;
822
- align-items: flex-start;
823
- justify-content: flex-start;
824
- gap: var(--gap-3xshi);
825
- }
826
- .rectangle {
827
- position: relative;
828
- border-radius: var(--br-12xshi);
829
- background-color: #ff0000;
830
- width: 4px;
831
- height: 6px;
832
- }
833
- .homeTeamEvents {
834
- display: flex;
835
- flex-direction: column;
836
- align-items: flex-end;
837
- justify-content: flex-start;
838
- gap: var(--gap-3xshi);
839
- text-align: right;
840
- }
841
- .totalEvents {
842
- display: none;
843
- flex-direction: row;
844
- align-items: center;
845
- justify-content: flex-start;
846
- gap: 59px;
847
- font-size: var(--font-size-4xshi);
848
- }
849
- .headerSeccionAlineaciones1 {
850
- background-color: var(--color-gray-200hi);
851
- width: 100%;
852
- display: flex;
853
- flex-direction: column;
854
- align-items: center;
855
- justify-content: flex-start;
856
- padding: 0px 48px;
857
- box-sizing: border-box;
858
- gap: var(--gap-basehi);
859
- }
860
- .switchOption3 {
861
- border-radius: var(--sizes-round-corner-round-corner-32hi);
862
- background-color: var(--color-darkslategrayhi);
863
- border: 0.8px solid var(--color-yellowgreen-100hi);
864
- box-sizing: border-box;
865
- width: 74.8px;
866
- display: flex;
867
- flex-direction: row;
868
- align-items: center;
869
- justify-content: center;
870
- padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
871
- }
872
- .switchOption4 {
873
- border-radius: var(--sizes-round-corner-round-corner-32hi);
874
- width: 74px;
875
- display: flex;
876
- flex-direction: row;
877
- align-items: center;
878
- justify-content: center;
879
- padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
880
- box-sizing: border-box;
881
- }
882
- .switchStatesBig1 {
883
- border-radius: var(--sizes-round-corner-round-corner-32hi);
884
- background-color: var(--color-gray-100hi);
885
- border: 1px solid var(--color-gray-500);
886
- display: inline-block;
887
- width: 280px;
888
- }
889
- .manchesterUnited13 {
890
- position: relative;
891
- font-size: 10px;
892
- font-weight: 500;
893
- }
894
- .homeTeamContainer1 {
895
- display: flex;
896
- flex-direction: row;
897
- align-items: center;
898
- justify-content: flex-start;
899
- gap: var(--gap-3xshi);
900
- }
901
- .scoreContainer2 {
902
- border-radius: var(--br-mid-4);
903
- background-color: var(--color-gray-600);
904
- display: flex;
905
- flex-direction: row;
906
- align-items: center;
907
- justify-content: center;
908
- padding: 6.524074554443359px 17.397533416748047px;
909
- gap: var(--gap-4xshi);
910
- text-align: center;
911
- font-size: 15.22px;
912
- color: var(--color-white);
913
- font-family: var(--font-interhi);
914
- }
915
- .matchContainer2 {
916
- align-self: stretch;
917
- display: flex;
918
- flex-direction: row;
919
- align-items: center;
920
- justify-content: space-between;
921
- padding: 0px 0px var(--padding-xshi);
922
- text-align: left;
923
- color: var(--color-whitesmokehi);
924
- }
925
- .manchesterUnited14 {
926
- position: relative;
927
- letter-spacing: -0.01em;
928
- line-height: 20.07px;
929
- font-weight: 500;
930
- z-index: 0;
931
- }
932
- .sliderMatchesInner {
933
- position: absolute;
934
- margin: 0 !important;
935
- top: 14.31px;
936
- left: 261.07px;
937
- border-radius: 10.21px;
938
- width: 14.31px;
939
- height: 6.41px;
940
- z-index: 1;
941
- }
942
- .rectangleIcon {
943
- position: absolute;
944
- margin: 0 !important;
945
- top: 0.31px;
946
- left: 6.41px;
947
- border-radius: 10.21px;
948
- width: 14.31px;
949
- height: 6.41px;
950
- z-index: 2;
951
- }
952
- .sliderMatches1 {
953
- display: inline-block;
954
- padding: 0px !important;
955
- position: relative;
956
- gap: 0px !important;
957
- width: 280px;
958
- margin: 0 auto;
959
- }
960
- .containerData {
961
- align-self: stretch;
962
- border-radius: 9px;
963
- background-color: #192632;
964
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
965
- display: flex;
966
- flex-direction: column;
967
- align-items: center;
968
- justify-content: flex-start;
969
- padding: var(--padding-basehi) var(--padding-5xlhi) 32px;
970
- gap: var(--gap-xs);
971
- font-size: var(--font-size-smhi);
972
- color: var(--color-gray-700hi);
973
- }
974
- .headerSeccionAlineaciones2 {
975
- align-self: stretch;
976
- display: none;
977
- flex-direction: column;
978
- align-items: center;
979
- justify-content: flex-start;
980
- gap: var(--gap-basehi);
981
- text-align: center;
982
- font-size: var(--font-size-2xshi);
983
- color: var(--color-white);
984
- }
985
- .headerSeccionAlineaciones {
986
- position: relative;
987
- width: 100%;
988
- display: flex;
989
- flex-direction: column;
990
- align-items: flex-start;
991
- justify-content: flex-start;
992
- gap: 132px;
993
- text-align: left;
994
- font-size: var(--font-size-smhi);
995
- color: var(--color-gray-700hi);
996
- font-family: var(--font-poppinshi);
997
- }
998
- .headerSeccionAlineaciones21200 {
999
- display: none;
1000
- }
1001
- .headerSeccionAlineaciones1540 {
1002
- display: none;
1003
- }
1004
-
1005
- .headerSeccionAlineaciones2540 {
1006
- display: flex;
1007
- min-width: 300px;
1008
- align-self: stretch;
1009
- flex-direction: column;
1010
- align-items: center;
1011
- justify-content: flex-start;
1012
- gap: var(--gap-basehi);
1013
- text-align: center;
1014
- font-size: var(--font-size-2xshi);
1015
- color: var(--color-white);
1016
- }
1017
- </style>
1
+ <template>
2
+ <div :class="$style.gscheaderlineup">
3
+ <div :class="$style.headerSeccionAlineaciones">
4
+ <div :class="headerSeccionAlineaciones1Class" id="header-desktop">
5
+ <!-- alineaciones switch -->
6
+ <div :class="$style.groupsLeagueParent">
7
+ <div :class="$style.groupsLeague">
8
+ <span>Las alineaciones de este partido </span>
9
+ <span :class="$style.anNoEstn">aún no están disponibles</span>
10
+ <span>. Por lo pronto puedes ver alineaciones:</span>
11
+ </div>
12
+ <div :class="$style.switchStatesBig" id="switch-lineup"></div>
13
+ </div>
14
+ <!-- alineaciones switch -->
15
+ <div :class="$style.matchContainer" id="match-container">
16
+ <div :class="$style.homeTeamContainer">
17
+ <div :class="$style.teamContainer">
18
+ <div :class="$style.imgHomeTeamWrapper">
19
+ <img
20
+ :class="$style.imgHomeTeamIcon"
21
+ alt=""
22
+ :src="
23
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
24
+ gameInfo.home_team +
25
+ '.png'
26
+ "
27
+ />
28
+ </div>
29
+ </div>
30
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
31
+ </div>
32
+ <div :class="$style.scoreContainerWrapper">
33
+ <div :class="$style.scoreContainer" v-if="!isLive">
34
+ <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
35
+ {{ gameInfo.score[0] }}
36
+ </div>
37
+ <div :class="$style.div">-</div>
38
+ <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
39
+ {{ gameInfo.score[1] }}
40
+ </div>
41
+ </div>
42
+ <div :class="$style.titleSession">
43
+ {{
44
+ gameInfo.season_name !== undefined
45
+ ? gameInfo.season_name +
46
+ '&nbsp; | &nbsp;' +
47
+ remplazarMxJor(gameInfo.matchday_abbreviation) +
48
+ '&nbsp; | &nbsp;' +
49
+ gameInfo.home_team_abbreviation +
50
+ ' - ' +
51
+ gameInfo.away_team_abbreviation
52
+ : ''
53
+ }}
54
+ </div>
55
+ </div>
56
+ <div :class="$style.awayTeamContainer">
57
+ <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
58
+ <div :class="$style.teamContainer1">
59
+ <div :class="$style.imgHomeTeamWrapper">
60
+ <img
61
+ :class="$style.imgHomeTeamIcon"
62
+ alt=""
63
+ :src="
64
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
65
+ gameInfo.away_team +
66
+ '.png'
67
+ "
68
+ />
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <div :class="$style.sliderMatches"></div>
74
+ <div :class="$style.matchContainer1">
75
+ <div :class="$style.btnFilterParent">
76
+ <button :class="$style.btnFilter" id="btn-filters">
77
+ <div :class="$style.sortParent">
78
+ <img
79
+ :class="$style.sortIcon"
80
+ alt=""
81
+ src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-filter.svg"
82
+ />
83
+ <div :class="$style.filtros">Filtros</div>
84
+ </div>
85
+ <img
86
+ :class="$style.shapeIcon"
87
+ alt=""
88
+ src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow.svg"
89
+ />
90
+ </button>
91
+ <button :class="$style.btnFilter1" id="btn-filters">
92
+ <div :class="$style.sortParent">
93
+ <div :class="$style.filtros">Jornada</div>
94
+ <div :class="$style.filtros">2</div>
95
+ </div>
96
+ <img
97
+ :class="$style.shapeIcon"
98
+ alt=""
99
+ src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/icn-expand-arrow.svg"
100
+ />
101
+ </button>
102
+ </div>
103
+ <div :class="$style.match">
104
+ <div :class="$style.homeTeam">
105
+ <img
106
+ :class="$style.backArrowIcon"
107
+ alt=""
108
+ src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/backarrow.svg"
109
+ />
110
+ <div :class="$style.teamContainer2">
111
+ <div :class="$style.manchesterUnited">{{ gameInfo.home_team_abbreviation }}</div>
112
+ <img
113
+ :class="$style.imgHomeTeamIcon"
114
+ alt=""
115
+ :src="
116
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
117
+ gameInfo.home_team +
118
+ '.png'
119
+ "
120
+ />
121
+ </div>
122
+ </div>
123
+ <div :class="$style.scoreContainer1">
124
+ <div :class="$style.finalScore" v-if="!isLive">
125
+ <div :class="$style.div4" v-if="Object.keys(gameInfo).length > 0">
126
+ {{ gameInfo.score[0] }}
127
+ </div>
128
+ <div :class="$style.div4">-</div>
129
+ <div :class="$style.div4" v-if="Object.keys(gameInfo).length > 0">
130
+ {{ gameInfo.score[1] }}
131
+ </div>
132
+ </div>
133
+ <div :class="$style.manchesterUnited1">
134
+ <template v-if="teamActive == 'home'">
135
+ <template v-if="Object.home_match_result == 1"> Ganado </template>
136
+ <template v-if="Object.home_match_result == 2"> Perdido </template>
137
+ <template v-if="Object.home_match_result == 3"> Empatado </template>
138
+ </template>
139
+ <template v-else>
140
+ <template v-if="Object.visiting_match_result == 1"> Ganado </template>
141
+ <template v-if="Object.visiting_match_result == 2"> Perdido </template>
142
+ <template v-if="Object.visiting_match_result == 3"> Empatado </template>
143
+ </template>
144
+ </div>
145
+ </div>
146
+ <div :class="$style.homeTeam">
147
+ <div :class="$style.teamContainer2">
148
+ <img
149
+ :class="$style.imgHomeTeamIcon"
150
+ alt=""
151
+ :src="
152
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
153
+ gameInfo.away_team +
154
+ '.png'
155
+ "
156
+ />
157
+ <div :class="$style.manchesterUnited">{{ gameInfo.away_team_abbreviation }}</div>
158
+ </div>
159
+ <img
160
+ :class="$style.backArrowIcon"
161
+ alt=""
162
+ src="https://golstatsimages.blob.core.windows.net/todoelfut/lineups/nextarrow.svg"
163
+ />
164
+ </div>
165
+ </div>
166
+ <div :class="$style.btnDetails">
167
+ <div :class="$style.manchesterUnited2">Ver detalles</div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ <div :class="headerSeccionAlineaciones2Class" id="header-mobile">
172
+ <div :class="$style.switchStatesBig1" id="switch-lineup"></div>
173
+ <div :class="$style.containerData">
174
+ <div :class="$style.manchesterUnited13">Alineación utilizada en:</div>
175
+ <div :class="$style.matchContainer2" id="match-container">
176
+ <div :class="$style.homeTeamContainer1">
177
+ <div :class="$style.teamContainer">
178
+ <div :class="$style.imgHomeTeamWrapper">
179
+ <img
180
+ :class="$style.imgHomeTeamIcon"
181
+ alt=""
182
+ :src="
183
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
184
+ gameInfo.home_team +
185
+ '.png'
186
+ "
187
+ />
188
+ </div>
189
+ </div>
190
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
191
+ </div>
192
+ <div :class="$style.scoreContainer2" v-if="!isLive">
193
+ <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
194
+ {{ gameInfo.score[0] }}
195
+ </div>
196
+ <div :class="$style.div">-</div>
197
+ <div :class="$style.div" v-if="Object.keys(gameInfo).length > 0">
198
+ {{ gameInfo.score[1] }}
199
+ </div>
200
+ </div>
201
+ <div :class="$style.homeTeamContainer1">
202
+ <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
203
+ <div :class="$style.teamContainer1">
204
+ <div :class="$style.imgHomeTeamWrapper">
205
+ <img
206
+ :class="$style.imgHomeTeamIcon"
207
+ alt=""
208
+ :src="
209
+ 'https://golstatsimages.blob.core.windows.net/teams-80/' +
210
+ gameInfo.away_team +
211
+ '.png'
212
+ "
213
+ />
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ <div :class="$style.sliderMatches1"></div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </template>
224
+
225
+ <script>
226
+ import '@@/@golstats/gsc-carousel/dist/style.css'
227
+ import { GSCCarousel } from '@golstats/gsc-carousel'
228
+ import { GscSwitchComponent } from '@golstats/gsc-switch-component'
229
+ import '@@/@golstats/gsc-switch-component/dist/style.css'
230
+ export default {
231
+ components: { GSCCarousel, GscSwitchComponent },
232
+ props: {
233
+ optionSelected: {
234
+ type: String,
235
+ default: 'Historicos',
236
+ },
237
+ widthSize: {
238
+ type: Number,
239
+ default: 0,
240
+ },
241
+ isLive: {
242
+ type: Boolean,
243
+ default: false,
244
+ },
245
+ gameInfo: {
246
+ type: Object,
247
+ default: () => {},
248
+ },
249
+ teamActive: {
250
+ type: String,
251
+ default: 'home',
252
+ },
253
+ gameHistoric: {
254
+ type: Array,
255
+ default: () => [],
256
+ },
257
+ },
258
+ watch: {
259
+ gameInfo: {
260
+ immediate: true,
261
+ handler: async function (newValue) {
262
+ try {
263
+ this.$emit('input', { season_id: newValue.season_id, game_id: newValue.id })
264
+ } catch (e) {
265
+ throw new Error(e)
266
+ }
267
+ },
268
+ },
269
+ },
270
+ data() {
271
+ return {
272
+ selectedOption: 0,
273
+ updateIndex: 0,
274
+ test: [
275
+ { description: `Clausura 2018 I JOR 5 I CHI - ATL 12 '`, icon: 'goal' },
276
+ { description: `Clausura 2018 I JOR 5 I CHI - ATL 73'`, icon: 'goal' },
277
+ { description: `Clausura 2018 I JOR 5 I CHI - ATL 53'`, icon: 'red-card' },
278
+ { description: `Clausura 2018 I JOR 5 I CHI - ATL 123'`, icon: 'yellow-card' },
279
+ ],
280
+ }
281
+ },
282
+ computed: {
283
+ headerSeccionAlineaciones2Class() {
284
+ const width = this.widthSize
285
+ if (width <= 540) {
286
+ return this.$style.headerSeccionAlineaciones2540
287
+ } else if (width <= 1200) {
288
+ return this.$style.headerSeccionAlineaciones21200
289
+ } else {
290
+ return this.$style.headerSeccionAlineaciones2
291
+ }
292
+ },
293
+ headerSeccionAlineaciones1Class() {
294
+ const width = this.widthSize
295
+ if (width <= 540) {
296
+ return this.$style.headerSeccionAlineaciones1540
297
+ } else {
298
+ return this.$style.headerSeccionAlineaciones1
299
+ }
300
+ },
301
+ },
302
+ methods: {
303
+ remplazarMxJor(val) {
304
+ return val.replace('M', 'JOR ')
305
+ },
306
+ changeCarouselItem(val) {
307
+ this.$emit('input', {
308
+ season_id: val.selectedItem.season,
309
+ game_id: val.selectedItem.game,
310
+ ht_abrev: val.selectedItem.home_team_abbreviation,
311
+ at_abrev: val.selectedItem.away_team_abbreviation,
312
+ })
313
+ this.selectedOption = val.selectedItemIndex
314
+ this.updateIndex += 1
315
+ },
316
+ clickOnSelectOption(val) {
317
+ this.$emit('clickOnSelectOption', val)
318
+ },
319
+ },
320
+ }
321
+ </script>
322
+
323
+ <style module>
324
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
325
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
326
+ body {
327
+ margin: 0;
328
+ line-height: normal;
329
+ }
330
+ :root {
331
+ /* fonts */
332
+ --font-poppinshi: Poppins;
333
+ --font-interhi: Inter;
334
+
335
+ /* font sizes */
336
+ --font-size-3xshi: 10px;
337
+ --font-size-xshi: 12px;
338
+ --font-size-smhi: 14px;
339
+ --font-size-2xshi: 11px;
340
+ --font-size-4xshi: 9px;
341
+ --font-size-base-2hi: 15.2px;
342
+
343
+ /* Colors */
344
+ --color-gray-100hi: #172632;
345
+ --color-gray-200hi: #172531;
346
+ --color-gray-300hi: rgba(255, 255, 255, 0.7);
347
+ --color-gray-400hi: rgba(255, 255, 255, 0.3);
348
+ --color-white: #fff;
349
+ --color-yellowgreen-100hi: #cbee6b;
350
+ --color-yellowgreen-200hi: #cbed6e;
351
+ --color-whitesmokehi: #f4f4f4;
352
+ --color-darkbluehi: #0234c5;
353
+ --color-darkslategrayhi: #1e2b36;
354
+ --color-goldenrodhi: #f7c330;
355
+ --color-redhi: #ff0000;
356
+ --color-slategrayhi: #56637b;
357
+ --color-gray-700hi: rgba(255, 255, 255, 0.7);
358
+ --color-gray-100re: #172632;
359
+ --color-gray-200re: #172531;
360
+ --color-gray-300re: rgba(255, 255, 255, 0.05);
361
+ --color-gray-400re: rgba(255, 255, 255, 0.2);
362
+ --color-gray-500: rgba(255, 255, 255, 0.3);
363
+ --color-gray-600: rgba(255, 255, 255, 0.1);
364
+ --color-gray-700re: rgba(255, 255, 255, 0.7);
365
+ --color-goldenrodre: #f7c330;
366
+ --color-redre: #ff0000;
367
+ --color-yellowgreen-100re: #cbed6e;
368
+ --color-yellowgreen-200re: #cbee6b;
369
+ --color-darkbluere: #0234c5;
370
+ --color-darkslategrayre: #1e2b36;
371
+ --color-slategrayre: #56637b;
372
+
373
+ /* Spacing */
374
+ --sizes-round-corner-round-corner-32hi: 32px;
375
+ --sizes-spacing-space-24hi: 24px;
376
+
377
+ /* Gaps */
378
+ --gap-basehi: 16px;
379
+ --gap-3xshi: 10px;
380
+ --gap-7xshi: 6px;
381
+ --gap-11xshi: 2px;
382
+ --gap-8xshi: 5px;
383
+ --gap-40xlhi: 59px;
384
+ --gap-4xshi: 9px;
385
+ --gap-11xlhi: 30px;
386
+
387
+ /* Paddings */
388
+ --padding-basehi: 16px;
389
+ --padding-5xlhi: 24px;
390
+ --padding-xshi: 12px;
391
+ --padding-7xshi: 6px;
392
+ --padding-11xshi: 2px;
393
+ --padding-3xshi: 10px;
394
+ --padding-29xlhi: 48px;
395
+ --padding-xlhi: 20px;
396
+ --padding-5xshi: 8px;
397
+
398
+ /* Border radiuses */
399
+ --br-9xshi: 4px;
400
+ --br-2xs-2hi: 10.2px;
401
+ --br-31xlhi: 50px;
402
+ --br-13xlhi: 32px;
403
+ --br-12xshi: 1px;
404
+ --br-12xsre: 1px;
405
+ --br-2xs-2re: 10.2px;
406
+ --br-mid-4: 17.4px;
407
+ --br-5xsre: 8px;
408
+ --br-31xlre: 50px;
409
+ --br-13xlre: 32px;
410
+ --br-3xs-6re: 9.6px;
411
+ }
412
+ .selectoritem {
413
+ width: 100%;
414
+ color: rgba(255, 255, 255, 0.7);
415
+ text-align: center;
416
+ font-family: Poppins, sans-serif;
417
+ font-size: 14px;
418
+ font-weight: 500;
419
+ line-height: 143.322%;
420
+ letter-spacing: -0.14px;
421
+ }
422
+ .selectoritem2 {
423
+ width: 100%;
424
+ color: rgba(255, 255, 255, 0.7);
425
+ text-align: center;
426
+ font-family: Poppins, sans-serif;
427
+ font-size: 11px;
428
+ font-weight: 500;
429
+ line-height: 143.322%;
430
+ letter-spacing: -0.14px;
431
+ }
432
+ .gscheaderlineup {
433
+ width: 100%;
434
+ height: auto;
435
+ display: inline-block;
436
+ margin-bottom: 40px;
437
+ }
438
+
439
+ .anNoEstn {
440
+ font-weight: 500;
441
+ }
442
+ .groupsLeague {
443
+ position: relative;
444
+ line-height: 20px;
445
+ display: none;
446
+ }
447
+ .jugadores {
448
+ position: relative;
449
+ line-height: 20px;
450
+ font-weight: 600;
451
+ }
452
+ .switchOption {
453
+ border-radius: var(--sizes-round-corner-round-corner-32hi);
454
+ background-color: var(--color-darkslategrayhi);
455
+ border: 0.8px solid var(--color-yellowgreen-100hi);
456
+ display: flex;
457
+ flex-direction: row;
458
+ align-items: center;
459
+ justify-content: center;
460
+ padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
461
+ }
462
+ .jugadores1 {
463
+ position: relative;
464
+ line-height: 20px;
465
+ opacity: 0.6;
466
+ }
467
+ .switchOption1 {
468
+ border-radius: var(--sizes-round-corner-round-corner-32hi);
469
+ display: flex;
470
+ flex-direction: row;
471
+ align-items: center;
472
+ justify-content: center;
473
+ padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
474
+ }
475
+ .switchStatesBig {
476
+ border-radius: var(--sizes-round-corner-round-corner-32hi);
477
+ background-color: var(--color-gray-100hi);
478
+ border: 1px solid var(--color-gray-500);
479
+ display: none;
480
+ width: 320px;
481
+ font-size: var(--font-size-xshi);
482
+ color: var(--color-white);
483
+ }
484
+ .groupsLeagueParent {
485
+ align-self: stretch;
486
+ display: flex;
487
+ flex-direction: column;
488
+ align-items: center;
489
+ justify-content: flex-start;
490
+ gap: 30px;
491
+ text-align: center;
492
+ }
493
+ .imgHomeTeamIcon {
494
+ position: relative;
495
+ width: 28px;
496
+ height: 28px;
497
+ object-fit: cover;
498
+ }
499
+ .imgHomeTeamWrapper {
500
+ border-radius: var(--br-31xlhi);
501
+ background-color: var(--color-gray-200hi);
502
+ width: 40px;
503
+ height: 40px;
504
+ display: flex;
505
+ flex-direction: column;
506
+ align-items: center;
507
+ justify-content: center;
508
+ padding: var(--padding-3xshi);
509
+ box-sizing: border-box;
510
+ }
511
+ .teamContainer {
512
+ border-radius: var(--br-31xlhi);
513
+ border: 1px solid var(--color-darkbluehi);
514
+ box-sizing: border-box;
515
+ width: 48px;
516
+ height: 48px;
517
+ display: flex;
518
+ flex-direction: row;
519
+ align-items: center;
520
+ justify-content: center;
521
+ padding: var(--padding-3xshi);
522
+ }
523
+ .name {
524
+ position: relative;
525
+ letter-spacing: 0.31px;
526
+ line-height: 30.87px;
527
+ font-weight: 500;
528
+ }
529
+ .homeTeamContainer {
530
+ flex: 1;
531
+ border-bottom: 1px solid var(--color-slategrayhi);
532
+ display: flex;
533
+ flex-direction: row;
534
+ align-items: center;
535
+ justify-content: flex-start;
536
+ padding: 0px 0px var(--padding-5xshi);
537
+ gap: var(--gap-3xshi);
538
+ }
539
+ .div {
540
+ position: relative;
541
+ font-weight: 600;
542
+ }
543
+ .titleSession {
544
+ font-family: var(--font-poppinshi);
545
+ font-size: 13px;
546
+ font-stretch: normal;
547
+ font-style: normal;
548
+ letter-spacing: -0.14px;
549
+ text-align: center;
550
+ color: rgba(255, 255, 255, 0.7);
551
+ margin-top: 30px;
552
+ }
553
+ .scoreContainer {
554
+ border-radius: var(--br-mid-4);
555
+ background-color: var(--color-gray-600);
556
+ display: flex;
557
+ flex-direction: row;
558
+ align-items: center;
559
+ justify-content: center;
560
+ padding: 6.524074554443359px 17.397533416748047px;
561
+ gap: var(--gap-8xshi);
562
+ }
563
+ .scoreContainerWrapper {
564
+ align-self: stretch;
565
+ width: 323px;
566
+ display: flex;
567
+ flex-direction: column;
568
+ align-items: center;
569
+ justify-content: space-between;
570
+ text-align: center;
571
+ font-size: 14px;
572
+ color: var(--color-white);
573
+ font-family: var(--font-interhi);
574
+ }
575
+ .teamContainer1 {
576
+ border-radius: var(--br-31xlhi);
577
+ border: 1px solid var(--color-yellowgreen-200hi);
578
+ box-sizing: border-box;
579
+ width: 48px;
580
+ height: 48px;
581
+ display: flex;
582
+ flex-direction: row;
583
+ align-items: center;
584
+ justify-content: center;
585
+ padding: var(--padding-3xshi);
586
+ }
587
+ .awayTeamContainer {
588
+ flex: 1;
589
+ border-bottom: 1px solid var(--color-slategrayhi);
590
+ display: flex;
591
+ flex-direction: row;
592
+ align-items: center;
593
+ justify-content: flex-end;
594
+ padding: 0px 0px var(--padding-5xshi);
595
+ gap: var(--gap-3xshi);
596
+ }
597
+ .matchContainer {
598
+ align-self: stretch;
599
+ display: flex;
600
+ flex-direction: row;
601
+ align-items: center;
602
+ justify-content: space-between;
603
+ padding: 0px 0px var(--padding-xshi);
604
+ color: var(--color-whitesmokehi);
605
+ }
606
+ .sliderMatchesChild {
607
+ position: relative;
608
+ border-radius: 9.55px;
609
+ width: 7.02px;
610
+ height: 14.23px;
611
+ }
612
+ .manchesterUnited {
613
+ position: relative;
614
+ letter-spacing: -0.01em;
615
+ line-height: 20.07px;
616
+ font-weight: 500;
617
+ }
618
+ .sliderMatchesItem {
619
+ position: relative;
620
+ border-radius: 9.55px;
621
+ width: 7.02px;
622
+ height: 14.24px;
623
+ }
624
+ .sliderMatches {
625
+ align-self: stretch;
626
+ display: flex;
627
+ flex-direction: row;
628
+ align-items: center;
629
+ justify-content: center;
630
+ padding: var(--padding-11xshi) var(--padding-basehi);
631
+ gap: var(--gap-3xshi);
632
+ text-align: center;
633
+ width: 350px;
634
+ margin: 0 auto;
635
+ }
636
+ .sortIcon {
637
+ position: relative;
638
+ width: 18px;
639
+ height: 18px;
640
+ overflow: hidden;
641
+ flex-shrink: 0;
642
+ }
643
+ .filtros {
644
+ position: relative;
645
+ font-size: var(--font-size-smhi);
646
+ line-height: 24px;
647
+ font-family: var(--font-poppinshi);
648
+ color: var(--color-white);
649
+ text-align: left;
650
+ }
651
+ .sortParent {
652
+ display: flex;
653
+ flex-direction: row;
654
+ align-items: center;
655
+ justify-content: center;
656
+ gap: var(--gap-8xshi);
657
+ }
658
+ .shapeIcon {
659
+ position: relative;
660
+ width: 8px;
661
+ height: 4px;
662
+ }
663
+ .btnFilter {
664
+ cursor: pointer;
665
+ border: 1px solid var(--color-gray-400hi);
666
+ padding: var(--padding-5xshi) var(--padding-3xshi);
667
+ background-color: var(--color-gray-300hi);
668
+ border-radius: var(--br-5xs);
669
+ box-sizing: border-box;
670
+ width: 102px;
671
+ height: 32px;
672
+ display: flex;
673
+ flex-direction: row;
674
+ align-items: center;
675
+ justify-content: space-between;
676
+ }
677
+ .btnFilter1 {
678
+ cursor: pointer;
679
+ border: 1px solid var(--color-gray-400hi);
680
+ padding: var(--padding-5xshi) var(--padding-3xshi);
681
+ background-color: var(--color-gray-300hi);
682
+ border-radius: var(--br-5xs);
683
+ box-sizing: border-box;
684
+ height: 32px;
685
+ display: flex;
686
+ flex-direction: row;
687
+ align-items: center;
688
+ justify-content: flex-start;
689
+ gap: var(--gap-3xshi);
690
+ }
691
+ .btnFilterParent {
692
+ width: 225px;
693
+ display: flex;
694
+ flex-direction: row;
695
+ align-items: flex-start;
696
+ justify-content: flex-start;
697
+ gap: var(--gap-xs);
698
+ }
699
+ .backArrowIcon {
700
+ position: relative;
701
+ border-radius: 10.21px;
702
+ width: 14.31px;
703
+ height: 6.41px;
704
+ }
705
+ .teamContainer2 {
706
+ display: flex;
707
+ flex-direction: row;
708
+ align-items: center;
709
+ justify-content: flex-start;
710
+ gap: var(--gap-8xshi);
711
+ }
712
+ .homeTeam {
713
+ display: flex;
714
+ flex-direction: row;
715
+ align-items: center;
716
+ justify-content: flex-start;
717
+ gap: var(--gap-mini);
718
+ }
719
+ .div4 {
720
+ flex: 1;
721
+ position: relative;
722
+ font-weight: 600;
723
+ }
724
+ .finalScore {
725
+ border-radius: var(--br-mid-4);
726
+ background-color: var(--color-gray-600);
727
+ border: 0.5px solid var(--color-yellowgreen-100hi);
728
+ box-sizing: border-box;
729
+ width: 70.73px;
730
+ display: flex;
731
+ flex-direction: row;
732
+ align-items: center;
733
+ justify-content: center;
734
+ padding: 6.524074554443359px 17.397533416748047px;
735
+ gap: var(--gap-4xshi);
736
+ }
737
+ .manchesterUnited1 {
738
+ position: relative;
739
+ font-size: var(--font-size-xshi);
740
+ font-weight: 500;
741
+ font-family: var(--font-poppinshi);
742
+ color: var(--color-gray-700hi);
743
+ }
744
+ .scoreContainer1 {
745
+ display: flex;
746
+ flex-direction: column;
747
+ align-items: center;
748
+ justify-content: center;
749
+ gap: var(--gap-4xshi);
750
+ text-align: center;
751
+ font-size: 15.22px;
752
+ color: var(--color-white);
753
+ font-family: var(--font-interhi);
754
+ }
755
+ .match {
756
+ display: flex;
757
+ flex-direction: row;
758
+ align-items: flex-start;
759
+ justify-content: center;
760
+ gap: 17px;
761
+ }
762
+ .manchesterUnited2 {
763
+ position: relative;
764
+ text-decoration: underline;
765
+ font-weight: 500;
766
+ }
767
+ .btnDetails {
768
+ width: 225px;
769
+ height: 28px;
770
+ display: flex;
771
+ flex-direction: row;
772
+ align-items: center;
773
+ justify-content: flex-end;
774
+ text-align: right;
775
+ font-size: var(--font-size-xshi);
776
+ }
777
+ .matchContainer1 {
778
+ align-self: stretch;
779
+ display: none;
780
+ flex-direction: row;
781
+ align-items: flex-start;
782
+ justify-content: space-between;
783
+ padding: 4px 0px 0px;
784
+ }
785
+ .goalChild {
786
+ position: relative;
787
+ width: 8.03px;
788
+ height: 8.03px;
789
+ }
790
+ .goal {
791
+ width: 9px;
792
+ height: 9px;
793
+ display: flex;
794
+ flex-direction: row;
795
+ align-items: center;
796
+ justify-content: center;
797
+ }
798
+ .manchesterUnited3 {
799
+ position: relative;
800
+ letter-spacing: -0.01em;
801
+ line-height: 19.5px;
802
+ text-transform: capitalize;
803
+ font-weight: 500;
804
+ }
805
+ .minuteEvent {
806
+ display: flex;
807
+ flex-direction: row;
808
+ align-items: center;
809
+ justify-content: flex-start;
810
+ gap: var(--gap-4xshi);
811
+ }
812
+ .yellowCard {
813
+ position: relative;
814
+ border-radius: var(--br-12xshi);
815
+ background-color: var(--color-goldenrodhi);
816
+ width: 4px;
817
+ height: 6px;
818
+ }
819
+ .awayTeamEvents {
820
+ display: flex;
821
+ flex-direction: column;
822
+ align-items: flex-start;
823
+ justify-content: flex-start;
824
+ gap: var(--gap-3xshi);
825
+ }
826
+ .rectangle {
827
+ position: relative;
828
+ border-radius: var(--br-12xshi);
829
+ background-color: #ff0000;
830
+ width: 4px;
831
+ height: 6px;
832
+ }
833
+ .homeTeamEvents {
834
+ display: flex;
835
+ flex-direction: column;
836
+ align-items: flex-end;
837
+ justify-content: flex-start;
838
+ gap: var(--gap-3xshi);
839
+ text-align: right;
840
+ }
841
+ .totalEvents {
842
+ display: none;
843
+ flex-direction: row;
844
+ align-items: center;
845
+ justify-content: flex-start;
846
+ gap: 59px;
847
+ font-size: var(--font-size-4xshi);
848
+ }
849
+ .headerSeccionAlineaciones1 {
850
+ background-color: var(--color-gray-200hi);
851
+ width: 100%;
852
+ display: flex;
853
+ flex-direction: column;
854
+ align-items: center;
855
+ justify-content: flex-start;
856
+ padding: 0px 48px;
857
+ box-sizing: border-box;
858
+ gap: var(--gap-basehi);
859
+ }
860
+ .switchOption3 {
861
+ border-radius: var(--sizes-round-corner-round-corner-32hi);
862
+ background-color: var(--color-darkslategrayhi);
863
+ border: 0.8px solid var(--color-yellowgreen-100hi);
864
+ box-sizing: border-box;
865
+ width: 74.8px;
866
+ display: flex;
867
+ flex-direction: row;
868
+ align-items: center;
869
+ justify-content: center;
870
+ padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
871
+ }
872
+ .switchOption4 {
873
+ border-radius: var(--sizes-round-corner-round-corner-32hi);
874
+ width: 74px;
875
+ display: flex;
876
+ flex-direction: row;
877
+ align-items: center;
878
+ justify-content: center;
879
+ padding: var(--padding-3xshi) var(--sizes-spacing-space-24hi);
880
+ box-sizing: border-box;
881
+ }
882
+ .switchStatesBig1 {
883
+ border-radius: var(--sizes-round-corner-round-corner-32hi);
884
+ background-color: var(--color-gray-100hi);
885
+ border: 1px solid var(--color-gray-500);
886
+ display: inline-block;
887
+ width: 280px;
888
+ }
889
+ .manchesterUnited13 {
890
+ position: relative;
891
+ font-size: 10px;
892
+ font-weight: 500;
893
+ }
894
+ .homeTeamContainer1 {
895
+ display: flex;
896
+ flex-direction: row;
897
+ align-items: center;
898
+ justify-content: flex-start;
899
+ gap: var(--gap-3xshi);
900
+ }
901
+ .scoreContainer2 {
902
+ border-radius: var(--br-mid-4);
903
+ background-color: var(--color-gray-600);
904
+ display: flex;
905
+ flex-direction: row;
906
+ align-items: center;
907
+ justify-content: center;
908
+ padding: 6.524074554443359px 17.397533416748047px;
909
+ gap: var(--gap-4xshi);
910
+ text-align: center;
911
+ font-size: 15.22px;
912
+ color: var(--color-white);
913
+ font-family: var(--font-interhi);
914
+ }
915
+ .matchContainer2 {
916
+ align-self: stretch;
917
+ display: flex;
918
+ flex-direction: row;
919
+ align-items: center;
920
+ justify-content: space-between;
921
+ padding: 0px 0px var(--padding-xshi);
922
+ text-align: left;
923
+ color: var(--color-whitesmokehi);
924
+ }
925
+ .manchesterUnited14 {
926
+ position: relative;
927
+ letter-spacing: -0.01em;
928
+ line-height: 20.07px;
929
+ font-weight: 500;
930
+ z-index: 0;
931
+ }
932
+ .sliderMatchesInner {
933
+ position: absolute;
934
+ margin: 0 !important;
935
+ top: 14.31px;
936
+ left: 261.07px;
937
+ border-radius: 10.21px;
938
+ width: 14.31px;
939
+ height: 6.41px;
940
+ z-index: 1;
941
+ }
942
+ .rectangleIcon {
943
+ position: absolute;
944
+ margin: 0 !important;
945
+ top: 0.31px;
946
+ left: 6.41px;
947
+ border-radius: 10.21px;
948
+ width: 14.31px;
949
+ height: 6.41px;
950
+ z-index: 2;
951
+ }
952
+ .sliderMatches1 {
953
+ display: inline-block;
954
+ padding: 0px !important;
955
+ position: relative;
956
+ gap: 0px !important;
957
+ width: 280px;
958
+ margin: 0 auto;
959
+ }
960
+ .containerData {
961
+ align-self: stretch;
962
+ border-radius: 9px;
963
+ background-color: #192632;
964
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
965
+ display: flex;
966
+ flex-direction: column;
967
+ align-items: center;
968
+ justify-content: flex-start;
969
+ padding: var(--padding-basehi) var(--padding-5xlhi) 32px;
970
+ gap: var(--gap-xs);
971
+ font-size: var(--font-size-smhi);
972
+ color: var(--color-gray-700hi);
973
+ }
974
+ .headerSeccionAlineaciones2 {
975
+ align-self: stretch;
976
+ display: none;
977
+ flex-direction: column;
978
+ align-items: center;
979
+ justify-content: flex-start;
980
+ gap: var(--gap-basehi);
981
+ text-align: center;
982
+ font-size: var(--font-size-2xshi);
983
+ color: var(--color-white);
984
+ }
985
+ .headerSeccionAlineaciones {
986
+ position: relative;
987
+ width: 100%;
988
+ display: flex;
989
+ flex-direction: column;
990
+ align-items: flex-start;
991
+ justify-content: flex-start;
992
+ gap: 132px;
993
+ text-align: left;
994
+ font-size: var(--font-size-smhi);
995
+ color: var(--color-gray-700hi);
996
+ font-family: var(--font-poppinshi);
997
+ }
998
+ .headerSeccionAlineaciones21200 {
999
+ display: none;
1000
+ }
1001
+ .headerSeccionAlineaciones1540 {
1002
+ display: none;
1003
+ }
1004
+
1005
+ .headerSeccionAlineaciones2540 {
1006
+ display: flex;
1007
+ min-width: 300px;
1008
+ align-self: stretch;
1009
+ flex-direction: column;
1010
+ align-items: center;
1011
+ justify-content: flex-start;
1012
+ gap: var(--gap-basehi);
1013
+ text-align: center;
1014
+ font-size: var(--font-size-2xshi);
1015
+ color: var(--color-white);
1016
+ }
1017
+ </style>