@golstats/gsc-lineups-reports 1.0.9 → 1.1.1

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