@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-probables-lineup.vue CHANGED
@@ -1,1044 +1,1050 @@
1
- <template>
2
- <div :class="$style.headerSeccionAlineaciones">
3
- <div :class="$style.headerSeccionAlineaciones1" id="header-desktop">
4
- <div :class="$style.groupsLeagueParent">
5
- <div :class="$style.groupsLeague">
6
- <span>Las alineaciones de este partido </span>
7
- <span :class="$style.anNoEstn">aún no están disponibles</span>
8
- <span>. Por lo pronto puedes ver alineaciones: </span>
9
- </div>
10
- <div :class="$style.switchStatesBig" id="switch-lineup">
11
- <GscSwitchComponent
12
- :buttons="['Historicos', 'Recientes', 'Probables']"
13
- :selectedOption="optionSelected"
14
- :type="1"
15
- :arrow="false"
16
- borderRadius="32px"
17
- height="28px"
18
- fontSize="11px;"
19
- fontFamily="Poppins-Regular"
20
- border-width="1px"
21
- border-width-container="0px"
22
- backgroundOptionDisable="#162533"
23
- width="600px"
24
- backgroundOptionActive="transparent"
25
- @input="clickOnSelectOption" />
26
- </div>
27
- </div>
28
- <div :class="$style.matchContainer" id="match-container">
29
- <div :class="$style.homeTeamContainer">
30
- <div :class="$style.teamContainer">
31
- <div :class="$style.imgHomeTeamWrapper">
32
- <img
33
- :class="$style.imgHomeTeamIcon"
34
- alt=""
35
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
36
- />
37
- </div>
38
- </div>
39
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
40
-
41
- <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
42
- <template #default="data">
43
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
44
- </template>
45
- <template #availableItem="{item}">
46
- <div>{{item.name}}</div>
47
- </template>
48
- </GSCDropdown>
49
- <div :class="$style.team">
50
- <div :class="$style.manchesterUnited">vs</div>
51
- <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
52
- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
53
- </div>
54
- </div>
55
- <div :class="$style.scoreContainerWrapper">
56
- <div :class="$style.scoreContainer">
57
- <div :class="$style.div1">2</div>
58
- <div :class="$style.div1">-</div>
59
- <div :class="$style.div1">2</div>
60
- </div>
61
- </div>
62
- <div :class="$style.awayTeamContainer">
63
- <div :class="$style.team1">
64
- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
65
- <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
66
- <div :class="$style.manchesterUnited">vs</div>
67
- </div>
68
- <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
69
- <template #default="data">
70
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
71
- </template>
72
- <template #availableItem="{item}">
73
- <div>{{item.name}}</div>
74
- </template>
75
- </GSCDropdown>
76
- <div :class="$style.name1">{{ gameInfo.away_team_abbreviation }}</div>
77
- <div :class="$style.teamContainer1">
78
- <div :class="$style.imgHomeTeamWrapper">
79
- <img
80
- :class="$style.imgHomeTeamIcon"
81
- alt=""
82
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
83
- />
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
-
89
- </div>
90
- <div :class="$style.headerSeccionAlineaciones2" id="header-desktop">
91
- <div :class="$style.groupsLeagueParent">
92
- <div :class="$style.groupsLeague">
93
- <span>Las alineaciones de este partido </span>
94
- <span :class="$style.anNoEstn">aún no están disponibles</span>
95
- <span>. Por lo pronto puedes ver alineaciones:</span>
96
- </div>
97
- <div :class="$style.switchStatesBig" id="switch-lineup">
98
- <GscSwitchComponent
99
- :buttons="['Historicos', 'Recientes', 'Probables']"
100
- :selectedOption="optionSelected"
101
- :type="1"
102
- :arrow="false"
103
- borderRadius="32px"
104
- height="28px"
105
- fontSize="11px;"
106
- fontFamily="Poppins-Regular"
107
- border-width="1px"
108
- border-width-container="0px"
109
- backgroundOptionDisable="#162533"
110
- width="600px"
111
- backgroundOptionActive="transparent"
112
- @input="clickOnSelectOption" />
113
- </div>
114
- </div>
115
- <div :class="$style.matchContainer" id="match-container">
116
- <div :class="$style.homeTeamContainer1">
117
- <div :class="$style.teamContainer">
118
- <div :class="$style.imgHomeTeamWrapper">
119
- <img
120
- :class="$style.imgHomeTeamIcon"
121
- alt=""
122
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
123
- />
124
- </div>
125
- </div>
126
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
127
- <div :class="$style.frameParent">
128
- <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
129
- <template #default="data">
130
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
131
- </template>
132
- <template #availableItem="{item}">
133
- <div>{{item.name}}</div>
134
- </template>
135
- </GSCDropdown>
136
- </div>
137
- <div :class="$style.team">
138
- <div :class="$style.manchesterUnited">vs</div>
139
- <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
140
- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
141
- </div>
142
- </div>
143
- <div :class="$style.awayTeamContainer1">
144
-
145
-
146
- <div :class="$style.team">
147
- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
148
- <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
149
- <div :class="$style.manchesterUnited">vs</div>
150
- </div>
151
- <div :class="$style.frameParent">
152
- <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
153
- <template #default="data">
154
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
155
- </template>
156
- <template #availableItem="{item}">
157
- <div>{{item.name}}</div>
158
- </template>
159
- </GSCDropdown>
160
- </div>
161
- <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
162
- <div :class="$style.teamContainer1">
163
- <div :class="$style.imgHomeTeamWrapper">
164
- <img
165
- :class="$style.imgHomeTeamIcon"
166
- alt=""
167
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
168
- />
169
- </div>
170
- </div>
171
- </div>
172
- </div>
173
- </div>
174
- <div :class="$style.headerSeccionAlineaciones3" id="header-mobile">
175
- <div :class="$style.switchStatesBig2" id="switch-lineup">
176
- <GscSwitchComponent
177
- :buttons="['Historicos', 'Recientes', 'Probables']"
178
- :selectedOption="optionSelected"
179
- :type="1"
180
- :arrow="false"
181
- borderRadius="32px"
182
- height="28px"
183
- fontSize="11px;"
184
- fontFamily="Poppins-Regular"
185
- border-width="1px"
186
- border-width-container="0px"
187
- backgroundOptionDisable="#162533"
188
- width="600px"
189
- backgroundOptionActive="transparent"
190
- @input="clickOnSelectOption" />
191
- </div>
192
- <div :class="$style.containerData">
193
- <div :class="$style.manchesterUnited28">Alineación utilizada en:</div>
194
- <div :class="$style.matchContainer2" id="match-container">
195
- <div :class="$style.homeTeamContainer2">
196
- <div :class="$style.teamContainer">
197
- <div :class="$style.imgHomeTeamWrapper">
198
- <img
199
- :class="$style.imgHomeTeamIcon"
200
- alt=""
201
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png'"
202
- />
203
- </div>
204
- </div>
205
- <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
206
- </div>
207
- <div :class="$style.homeTeamContainer2">
208
- <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
209
- <div :class="$style.teamContainer1">
210
- <div :class="$style.imgHomeTeamWrapper">
211
- <img
212
- :class="$style.imgHomeTeamIcon"
213
- alt=""
214
- :src="'https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png'"
215
- />
216
- </div>
217
- </div>
218
- </div>
219
- </div>
220
-
221
- <div :class="$style.filtersContainer">
222
- <div :class="$style.filterMatchdayParent">
223
- <div :class="$style.filterMatchday">
224
- <div :class="$style.filterMatchday1">
225
- <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
226
- <template #default="data">
227
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
228
- </template>
229
- <template #availableItem="{item}">
230
- <div>{{item.name}}</div>
231
- </template>
232
- </GSCDropdown>
233
- </div>
234
- </div>
235
- <div :class="$style.team4">
236
- <div :class="$style.manchesterUnited1">vs</div>
237
- <img
238
- :class="$style.necaxaIcon4"
239
- alt=""
240
- :src="rivalHomeImg"
241
- />
242
- <!-- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div> -->
243
- </div>
244
- </div>
245
- <div :class="$style.teamParent">
246
- <div :class="$style.team1">
247
- <!-- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div> -->
248
- <img
249
- :class="$style.necaxaIcon4"
250
- alt=""
251
- :src="rivalVisitImg"
252
- />
253
- <div :class="$style.manchesterUnited1">vs</div>
254
- </div>
255
- <div :class="$style.filterMatchday1">
256
- <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
257
- <template #default="data">
258
- <div class="selector-tournaments">{{data.selectedItem.name}}</div>
259
- </template>
260
- <template #availableItem="{item}">
261
- <div>{{item.name}}</div>
262
- </template>
263
- </GSCDropdown>
264
- </div>
265
- </div>
266
- </div>
267
- </div>
268
- </div>
269
- </div>
270
- </template>
271
-
272
-
273
- <script>
274
- import {
275
- GSCDropdown
276
- } from '@golstats/gsc-dropdown';
277
- import '@@/@golstats/gsc-dropdown/dist/style.css'
278
- import { GscSwitchComponent } from '@golstats/gsc-switch-component'
279
- import '@@/@golstats/gsc-switch-component/dist/style.css'
280
- export default {
281
- components: { GSCDropdown, GscSwitchComponent},
282
- props: {
283
- optionSelected: {
284
- type: String,
285
- default: 'Historicos',
286
- },
287
- gameInfo: {
288
- type: Object,
289
- default: () => {},
290
- },
291
- gameRecientes: {
292
- type: Array,
293
- default: () => [],
294
- },
295
- matchdaysDefault: {
296
- type: Array,
297
- default: () => [],
298
- },
299
- },
300
- data() {
301
- return {
302
- rivalHomeImg: '',
303
- rivalVisitImg: '',
304
- rivalHomeAbrev: '',
305
- rivalVisitAbrev: '',
306
- auxVal: 0,
307
-
308
- }
309
- },
310
- watch: {
311
- gameInfo: {
312
- immediate: true,
313
- handler: async function (newValue) {
314
- try {
315
- this.$emit('input',newValue);
316
- } catch (e) {
317
- throw new Error(e);
318
- }
319
- },
320
- },
321
- },
322
- methods: {
323
- clickOnSelectOption(val){
324
- this.$emit('clickOnSelectOption', val);
325
- },
326
- changeDropdownVisit(val){
327
- const indexGame = this.gameRecientes[this.gameInfo.away_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
328
- this.rivalVisitAbrev = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team_abbreviation : this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation;
329
- this.rivalVisitImg = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team+'.png';
330
-
331
- this.$emit('changeaway',this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame]);
332
-
333
- },
334
- changeDropdownLocal(val){
335
- const indexGame = this.gameRecientes[this.gameInfo.home_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
336
- this.rivalHomeAbrev = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team_abbreviation : this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation;
337
- this.rivalHomeImg = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team+'.png' : 'https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team+'.png';
338
-
339
- this.$emit('changehome',this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame]);
340
-
341
- }
342
- }
343
- };
344
- </script>
345
-
346
-
347
- <style module>
348
- @import '/css/fonts.css';
349
- @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
350
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
351
- body {
352
- margin: 0;
353
- line-height: normal;
354
- }
355
- :root {
356
- /* fonts */
357
- --font-poppinspro: Poppins;
358
- --font-interpro: Inter;
359
-
360
- /* font sizes */
361
- --font-size-3xspro: 10px;
362
- --font-size-xspro: 12px;
363
- --font-size-smpro: 14px;
364
- --font-size-2xspro: 11px;
365
- --font-size-4xspro: 9px;
366
- --font-size-base-2pro: 15.2px;
367
-
368
- /* Colors */
369
- --color-gray-100pro: #172632;
370
- --color-gray-200pro: #172531;
371
- --color-gray-300pro: rgba(255, 255, 255, 0.7);
372
- --color-gray-400pro: rgba(255, 255, 255, 0.3);
373
- --color-whitepro: #fff;
374
- --color-yellowgreen-100pro: #cbee6b;
375
- --color-yellowgreen-200pro: #cbed6e;
376
- --color-whitesmokepro: #f4f4f4;
377
- --color-darkbluepro: #0234c5;
378
- --color-darkslategraypro: #1e2b36;
379
- --color-goldenrodpro: #f7c330;
380
- --color-redpro: #ff0000;
381
- --color-slategraypro: #56637b;
382
-
383
- /* Spacing */
384
- --sizes-round-corner-round-corner-32pro: 32px;
385
- --sizes-spacing-space-24pro: 24px;
386
-
387
- /* Gaps */
388
- --gap-basepro: 16px;
389
- --gap-3xspro: 10px;
390
- --gap-7xspro: 6px;
391
- --gap-11xspro: 2px;
392
- --gap-8xspro: 5px;
393
- --gap-40xlpro: 59px;
394
- --gap-4xspro: 9px;
395
- --gap-11xlpro: 30px;
396
-
397
- /* Paddings */
398
- --padding-basepro: 16px;
399
- --padding-5xlpro: 24px;
400
- --padding-xspro: 12px;
401
- --padding-7xspro: 6px;
402
- --padding-11xspro: 2px;
403
- --padding-3xspro: 10px;
404
- --padding-29xlpro: 48px;
405
- --padding-xlpro: 20px;
406
- --padding-5xspro: 8px;
407
-
408
- /* Border radiuses */
409
- --br-9xspro: 4px;
410
- --br-2xs-2pro: 10.2px;
411
- --br-31xlpro: 50px;
412
- --br-13xlpro: 32px;
413
- --br-12xspro: 1px;
414
- }
415
-
416
- .anNoEstn {
417
- font-weight: 500;
418
- }
419
- .groupsLeague {
420
- position: relative;
421
- line-height: 20px;
422
- }
423
- .historicas {
424
- position: relative;
425
- line-height: 20px;
426
- opacity: 0.6;
427
- }
428
- .switchOption {
429
- border-radius: var(--br-13xlpro);
430
- width: 109px;
431
- display: flex;
432
- flex-direction: row;
433
- align-items: center;
434
- justify-content: center;
435
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
436
- box-sizing: border-box;
437
- }
438
- .switchOption1 {
439
- border-radius: var(--br-13xlpro);
440
- width: 107px;
441
- display: flex;
442
- flex-direction: row;
443
- align-items: center;
444
- justify-content: center;
445
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
446
- box-sizing: border-box;
447
- }
448
- .probables {
449
- position: relative;
450
- line-height: 20px;
451
- font-weight: 600;
452
- }
453
- .switchOption2 {
454
- border-radius: var(--br-13xlpro);
455
- background-color: var(--color-darkslategraypro);
456
- border: 0.8px solid var(--color-yellowgreen-100pro);
457
- box-sizing: border-box;
458
- width: 109.8px;
459
- display: flex;
460
- flex-direction: row;
461
- align-items: center;
462
- justify-content: center;
463
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
464
- }
465
- .switchStatesBig {
466
- border-radius: var(--sizes-round-corner-round-corner-32pro);
467
- background-color: var(--color-gray-100pro);
468
- border: 1px solid var(--color-gray-400pro);
469
- display: inline-block;
470
- width: 320px;
471
- font-size: var(--font-size-xspro);
472
- color: var(--color-whitepro);
473
- }
474
- .groupsLeagueParent {
475
- align-self: stretch;
476
- display: flex;
477
- flex-direction: column;
478
- align-items: center;
479
- justify-content: flex-start;
480
- gap: var(--gap-11xlpro);
481
- text-align: center;
482
- }
483
- .imgHomeTeamIcon {
484
- position: relative;
485
- width: 28px;
486
- height: 28px;
487
- object-fit: cover;
488
- }
489
- .imgHomeTeamWrapper {
490
- border-radius: var(--br-31xlpro);
491
- background-color: var(--color-gray-200pro);
492
- width: 40px;
493
- height: 40px;
494
- display: flex;
495
- flex-direction: column;
496
- align-items: center;
497
- justify-content: center;
498
- padding: var(--padding-3xspro);
499
- box-sizing: border-box;
500
- }
501
- .teamContainer {
502
- border-radius: var(--br-31xlpro);
503
- border: 1px solid var(--color-darkbluepro);
504
- box-sizing: border-box;
505
- width: 48px;
506
- height: 48px;
507
- display: flex;
508
- flex-direction: row;
509
- align-items: center;
510
- justify-content: center;
511
- padding: var(--padding-3xspro);
512
- }
513
- .name {
514
- position: relative;
515
- letter-spacing: 0.31px;
516
- line-height: 30.87px;
517
- font-weight: 500;
518
- }
519
- .jor {
520
- position: relative;
521
- line-height: 9px;
522
- font-weight: 600;
523
- opacity: 0.6;
524
- }
525
- .jorParent {
526
- flex: 1;
527
- display: flex;
528
- flex-direction: row;
529
- align-items: center;
530
- justify-content: flex-start;
531
- gap: var(--gap-7xspro);
532
- }
533
- .shapeIcon {
534
- position: relative;
535
- width: 8px;
536
- height: 4px;
537
- }
538
- .frameParent {
539
- cursor: pointer;
540
- width: auto;
541
- border: 1px solid var(--color-gray-400pro);
542
- background-color: rgba(255, 255, 255, 0.05);
543
- border-radius: var(--br-5xsre);
544
- box-sizing: border-box;
545
- height: 32px;
546
- display: flex;
547
- font-size: 10px;
548
- flex-direction: row;
549
- align-items: center;
550
- justify-content: flex-start;
551
- gap: var(--gap-3xspro);
552
- }
553
- .manchesterUnited {
554
- position: relative;
555
- letter-spacing: -0.01em;
556
- line-height: 20.07px;
557
- font-weight: 500;
558
- display: flex;
559
- align-items: center;
560
- width: 16px;
561
- height: 29px;
562
- flex-shrink: 0;
563
- }
564
- .necaxaIcon {
565
- position: relative;
566
- width: 29px;
567
- height: 29px;
568
- object-fit: cover;
569
- }
570
- .manchesterUnited1 {
571
- position: relative;
572
- letter-spacing: -0.01em;
573
- line-height: 20.07px;
574
- font-weight: 500;
575
- }
576
- .team {
577
- display: flex;
578
- flex-direction: row;
579
- align-items: center;
580
- justify-content: flex-start;
581
- gap: var(--gap-8xspro);
582
- color: var(--color-gray-300pro);
583
- }
584
- .homeTeamContainer {
585
- flex: 1;
586
- border-bottom: 1px solid var(--color-slategraypro);
587
- display: flex;
588
- flex-direction: row;
589
- align-items: center;
590
- justify-content: flex-start;
591
- padding: 0px 0px var(--padding-xlpro);
592
- gap: var(--gap-3xspro);
593
- }
594
- .div1 {
595
- position: relative;
596
- font-weight: 600;
597
- }
598
- .scoreContainer {
599
- border-radius: 17.4px;
600
- background-color: rgba(255, 255, 255, 0.1);
601
- display: flex;
602
- flex-direction: row;
603
- align-items: center;
604
- justify-content: center;
605
- padding: 6.524074554443359px 17.397533416748047px;
606
- gap: 8.7px;
607
- opacity: 0;
608
- }
609
- .scoreContainerWrapper {
610
- align-self: stretch;
611
- width: 323px;
612
- display: flex;
613
- flex-direction: column;
614
- align-items: center;
615
- justify-content: space-between;
616
- text-align: center;
617
- font-size: 15.22px;
618
- color: var(--color-whitepro);
619
- font-family: var(--font-interpro);
620
- }
621
- .team1 {
622
- display: flex;
623
- flex-direction: row;
624
- align-items: center;
625
- justify-content: flex-start;
626
- gap: var(--gap-8xspro);
627
- }
628
- .name1 {
629
- position: relative;
630
- letter-spacing: 0.31px;
631
- line-height: 30.87px;
632
- font-weight: 500;
633
- color: var(--color-whitesmokepro);
634
- }
635
- .teamContainer1 {
636
- border-radius: var(--br-31xlpro);
637
- border: 1px solid var(--color-yellowgreen-200pro);
638
- box-sizing: border-box;
639
- width: 48px;
640
- height: 48px;
641
- display: flex;
642
- flex-direction: row;
643
- align-items: center;
644
- justify-content: center;
645
- padding: var(--padding-3xspro);
646
- }
647
- .awayTeamContainer {
648
- flex: 1;
649
- border-bottom: 1px solid var(--color-slategraypro);
650
- display: flex;
651
- flex-direction: row;
652
- align-items: center;
653
- justify-content: flex-end;
654
- padding: 0px 0px var(--padding-xlpro);
655
- gap: var(--gap-3xspro);
656
- color: var(--color-gray-300pro);
657
- }
658
- .matchContainer {
659
- align-self: stretch;
660
- display: flex;
661
- flex-direction: row;
662
- align-items: center;
663
- justify-content: space-between;
664
- padding: 0px 0px var(--padding-xspro);
665
- color: var(--color-whitesmokepro);
666
- }
667
- .goalChild {
668
- position: relative;
669
- width: 8.03px;
670
- height: 8.03px;
671
- }
672
- .goal {
673
- width: 9px;
674
- height: 9px;
675
- display: flex;
676
- flex-direction: row;
677
- align-items: center;
678
- justify-content: center;
679
- }
680
- .manchesterUnited4 {
681
- position: relative;
682
- letter-spacing: -0.01em;
683
- line-height: 19.5px;
684
- text-transform: capitalize;
685
- font-weight: 500;
686
- }
687
- .minuteEvent {
688
- display: flex;
689
- flex-direction: row;
690
- align-items: center;
691
- justify-content: flex-start;
692
- gap: var(--gap-4xspro);
693
- }
694
- .yellowCard {
695
- position: relative;
696
- border-radius: var(--br-12xspro);
697
- background-color: var(--color-goldenrodpro);
698
- width: 4px;
699
- height: 6px;
700
- }
701
- .awayTeamEvents {
702
- display: flex;
703
- flex-direction: column;
704
- align-items: flex-start;
705
- justify-content: flex-start;
706
- gap: var(--gap-3xspro);
707
- }
708
- .rectangle {
709
- position: relative;
710
- border-radius: var(--br-12xspro);
711
- background-color: var(--color-redpro);
712
- width: 4px;
713
- height: 6px;
714
- }
715
- .homeTeamEvents {
716
- display: flex;
717
- flex-direction: column;
718
- align-items: flex-end;
719
- justify-content: flex-start;
720
- gap: var(--gap-3xspro);
721
- text-align: right;
722
- }
723
- .totalEvents {
724
- display: none;
725
- flex-direction: row;
726
- align-items: center;
727
- justify-content: flex-start;
728
- gap: var(--gap-40xlpro);
729
- font-size: var(--font-size-4xspro);
730
- }
731
- .headerSeccionAlineaciones1 {
732
- align-self: stretch;
733
- background-color: var(--color-gray-200pro);
734
- display: flex;
735
- flex-direction: column;
736
- align-items: center;
737
- justify-content: flex-start;
738
- padding: 0px var(--padding-29xlpro);
739
- gap: var(--gap-basepro);
740
- }
741
- .homeTeamContainer1 {
742
- border-bottom: 1px solid var(--color-slategraypro);
743
- box-sizing: border-box;
744
- width: 45%;
745
- display: flex;
746
- flex-direction: row;
747
- flex-wrap: wrap;
748
- align-items: center;
749
- justify-content: flex-start;
750
- padding: 0px 0px var(--padding-xlpro);
751
- gap: var(--gap-3xspro);
752
- }
753
- .awayTeamContainer1 {
754
- border-bottom: 1px solid var(--color-slategraypro);
755
- box-sizing: border-box;
756
- width: 45%;
757
- display: flex;
758
- flex-direction: row;
759
- flex-wrap: wrap;
760
- align-items: center;
761
- justify-content: flex-end;
762
- padding: 0px 0px var(--padding-xlpro);
763
- gap: var(--gap-3xspro);
764
- }
765
- .headerSeccionAlineaciones2 {
766
- align-self: stretch;
767
- background-color: var(--color-gray-200pro);
768
- display: none;
769
- flex-direction: column;
770
- align-items: center;
771
- justify-content: flex-start;
772
- padding: 0px var(--padding-29xlpro);
773
- gap: var(--gap-basepro);
774
- }
775
- .jugadores {
776
- position: relative;
777
- line-height: 20px;
778
- font-weight: 600;
779
- opacity: 0.6;
780
- }
781
- .switchOption6 {
782
- border-radius: var(--sizes-round-corner-round-corner-32pro);
783
- width: 74px;
784
- display: flex;
785
- flex-direction: row;
786
- align-items: center;
787
- justify-content: center;
788
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
789
- box-sizing: border-box;
790
- }
791
- .switchOption8 {
792
- border-radius: var(--sizes-round-corner-round-corner-32pro);
793
- background-color: var(--color-darkslategraypro);
794
- border: 0.8px solid var(--color-yellowgreen-100pro);
795
- box-sizing: border-box;
796
- width: 74.8px;
797
- display: flex;
798
- flex-direction: row;
799
- align-items: center;
800
- justify-content: center;
801
- padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
802
- }
803
- .switchStatesBig2 {
804
- border-radius: var(--sizes-round-corner-round-corner-32pro);
805
- background-color: var(--color-gray-100pro);
806
- border: 1px solid var(--color-gray-400pro);
807
- display: inline-block;
808
- width: 280px;
809
- }
810
- .manchesterUnited28 {
811
- position: relative;
812
- font-weight: 500;
813
- }
814
- .homeTeamContainer2 {
815
- display: flex;
816
- flex-direction: row;
817
- align-items: center;
818
- justify-content: flex-start;
819
- gap: var(--gap-3xspro);
820
- }
821
- .matchContainer2 {
822
- align-self: stretch;
823
- display: flex;
824
- flex-direction: row;
825
- align-items: center;
826
- justify-content: space-between;
827
- padding: 0px 0px var(--padding-xspro);
828
- text-align: left;
829
- font-size: var(--font-size-smpro);
830
- color: var(--color-whitesmokepro);
831
- }
832
- .manchesterUnited29 {
833
- position: relative;
834
- letter-spacing: -0.01em;
835
- line-height: 20.07px;
836
- font-weight: 500;
837
- z-index: 0;
838
- }
839
- .sliderMatchesChild {
840
- position: absolute;
841
- margin: 0 !important;
842
- top: 14.31px;
843
- left: 261.07px;
844
- border-radius: 10.21px;
845
- width: 14.31px;
846
- height: 6.41px;
847
- z-index: 1;
848
- }
849
- .sliderMatchesItem {
850
- position: absolute;
851
- margin: 0 !important;
852
- top: 0.31px;
853
- left: 6.41px;
854
- border-radius: 10.21px;
855
- width: 14.31px;
856
- height: 6.41px;
857
- z-index: 2;
858
- }
859
- .sliderMatches {
860
- display: none;
861
- flex-direction: row;
862
- align-items: flex-start;
863
- justify-content: flex-start;
864
- padding: var(--padding-11xspro) var(--padding-basepro);
865
- position: relative;
866
- gap: var(--gap-3xspro);
867
- font-size: var(--font-size-smpro);
868
- }
869
- .jorParent2 {
870
- display: flex;
871
- flex-direction: row;
872
- align-items: center;
873
- justify-content: center;
874
- gap: var(--gap-11xspro);
875
- }
876
- .filterMatchday {
877
- border-radius: var(--br-9xspro);
878
- border: 1px solid var(--color-gray-400pro);
879
- box-sizing: border-box;
880
- height: 25px;
881
- display: flex;
882
- flex-direction: row;
883
- align-items: center;
884
- justify-content: flex-start;
885
- gap: var(--gap-7xspro);
886
- }
887
- .necaxaIcon4 {
888
- position: relative;
889
- width: 18px;
890
- height: 18px;
891
- object-fit: cover;
892
- }
893
- .team4 {
894
- display: flex;
895
- flex-direction: row;
896
- align-items: center;
897
- justify-content: flex-start;
898
- gap: var(--gap-8xspro);
899
- text-align: left;
900
- font-size: var(--font-size-xspro);
901
- color: var(--color-gray-300pro);
902
- }
903
- .filterMatchdayParent {
904
- display: flex;
905
- flex-direction: row;
906
- align-items: center;
907
- justify-content: center;
908
- gap: var(--gap-3xspro);
909
- }
910
- .filterMatchday1 {
911
- border-radius: var(--br-9xspro);
912
- border: 1px solid var(--color-gray-400pro);
913
- box-sizing: border-box;
914
- height: 25px;
915
- display: flex;
916
- flex-direction: row;
917
- align-items: center;
918
- justify-content: flex-start;
919
- padding: var(--padding-11xspro) var(--padding-7xspro);
920
- gap: var(--gap-7xspro);
921
- text-align: center;
922
- font-size: var(--font-size-3xspro);
923
- color: var(--color-whitepro);
924
- }
925
- .teamParent {
926
- display: flex;
927
- flex-direction: row;
928
- align-items: center;
929
- justify-content: center;
930
- gap: var(--gap-3xspro);
931
- text-align: left;
932
- font-size: var(--font-size-xspro);
933
- color: var(--color-gray-300pro);
934
- }
935
- .filtersContainer {
936
- align-self: stretch;
937
- display: flex;
938
- flex-direction: row;
939
- align-items: center;
940
- justify-content: space-between;
941
- padding: 0px 0px var(--padding-7xspro);
942
- color: var(--color-whitepro);
943
- }
944
- .containerData {
945
- align-self: stretch;
946
- border-radius: 9px;
947
- background-color: #192632;
948
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
949
- display: flex;
950
- flex-direction: column;
951
- align-items: center;
952
- justify-content: flex-start;
953
- padding: var(--padding-basepro) var(--padding-5xlpro) 32px;
954
- gap: 12px;
955
- font-size: var(--font-size-3xspro);
956
- color: var(--color-gray-300pro);
957
- }
958
- .headerSeccionAlineaciones3 {
959
- align-self: stretch;
960
- display: none;
961
- flex-direction: column;
962
- align-items: center;
963
- justify-content: flex-start;
964
- gap: var(--gap-basepro);
965
- text-align: center;
966
- font-size: var(--font-size-2xspro);
967
- color: var(--color-whitepro);
968
- }
969
- .headerSeccionAlineaciones {
970
- position: relative;
971
- width: 100%;
972
- display: flex;
973
- flex-direction: column;
974
- align-items: flex-start;
975
- justify-content: flex-start;
976
- gap: 132px;
977
- text-align: left;
978
- font-size: var(--font-size-smpro);
979
- color: var(--color-gray-300pro);
980
- font-family: var(--font-poppinspro);
981
- }
982
-
983
- @media screen and (max-width: 1200px) {
984
- .headerSeccionAlineaciones1 {
985
- align-self: stretch;
986
- width: auto;
987
- max-width: 1089px;
988
- }
989
-
990
- .headerSeccionAlineaciones2 {
991
- display: none;
992
- align-self: stretch;
993
- width: auto;
994
- max-width: 1089px;
995
- }
996
-
997
- .headerSeccionAlineaciones3 {
998
- display: none;
999
- max-width: 540px;
1000
- }
1001
- }
1002
- @media screen and (max-width: 420px) {
1003
- .headerSeccionAlineaciones1 {
1004
- display: none;
1005
- }
1006
-
1007
- .headerSeccionAlineaciones2 {
1008
- display: none;
1009
- }
1010
-
1011
- .headerSeccionAlineaciones3 {
1012
- display: flex;
1013
- }
1014
- }
1015
- @media screen and (max-width: 880px) {
1016
- .headerSeccionAlineaciones1 {
1017
- display: none;
1018
- }
1019
-
1020
- .headerSeccionAlineaciones2 {
1021
- display: flex;
1022
- }
1023
-
1024
- .headerSeccionAlineaciones3 {
1025
- display: none;
1026
- }
1027
- }
1028
- @media screen and (max-width: 540px) {
1029
- .headerSeccionAlineaciones2 {
1030
- display: none;
1031
- }
1032
-
1033
- .containerData {
1034
- padding-left: var(--padding-xspro);
1035
- padding-right: var(--padding-xspro);
1036
- box-sizing: border-box;
1037
- }
1038
-
1039
- .headerSeccionAlineaciones3 {
1040
- display: flex;
1041
- min-width: 300px;
1042
- }
1043
- }
1044
- </style>
1
+ <template>
2
+ <div :class="$style.headerSeccionAlineaciones">
3
+ <div :class="$style.headerSeccionAlineaciones1" id="header-desktop">
4
+ <div :class="$style.groupsLeagueParent">
5
+ <div :class="$style.groupsLeague">
6
+ <span>Las alineaciones de este partido </span>
7
+ <span :class="$style.anNoEstn">aún no están disponibles</span>
8
+ <span>. Por lo pronto puedes ver alineaciones: </span>
9
+ </div>
10
+ <div :class="$style.switchStatesBig" id="switch-lineup">
11
+ <GscSwitchComponent
12
+ :buttons="['Historicos', 'Recientes', 'Probables']"
13
+ :selectedOption="optionSelected"
14
+ :type="1"
15
+ :arrow="false"
16
+ borderRadius="32px"
17
+ height="28px"
18
+ fontSize="11px;"
19
+ fontFamily="Poppins-Regular"
20
+ border-width="1px"
21
+ border-width-container="0px"
22
+ backgroundOptionDisable="#162533"
23
+ width="600px"
24
+ backgroundOptionActive="transparent"
25
+ @input="clickOnSelectOption" />
26
+ </div>
27
+ </div>
28
+ <div :class="$style.matchContainer" id="match-container">
29
+ <div :class="$style.homeTeamContainer">
30
+ <div :class="$style.teamContainer">
31
+ <div :class="$style.imgHomeTeamWrapper">
32
+ <img
33
+ :class="$style.imgHomeTeamIcon"
34
+ alt=""
35
+ :src="getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png', provider)"
36
+ />
37
+ </div>
38
+ </div>
39
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
40
+
41
+ <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
42
+ <template #default="data">
43
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
44
+ </template>
45
+ <template #availableItem="{item}">
46
+ <div>{{item.name}}</div>
47
+ </template>
48
+ </GSCDropdown>
49
+ <div :class="$style.team">
50
+ <div :class="$style.manchesterUnited">vs</div>
51
+ <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
52
+ <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
53
+ </div>
54
+ </div>
55
+ <div :class="$style.scoreContainerWrapper">
56
+ <div :class="$style.scoreContainer">
57
+ <div :class="$style.div1">2</div>
58
+ <div :class="$style.div1">-</div>
59
+ <div :class="$style.div1">2</div>
60
+ </div>
61
+ </div>
62
+ <div :class="$style.awayTeamContainer">
63
+ <div :class="$style.team1">
64
+ <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
65
+ <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
66
+ <div :class="$style.manchesterUnited">vs</div>
67
+ </div>
68
+ <GSCDropdown :class="$style.frameParent" :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
69
+ <template #default="data">
70
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
71
+ </template>
72
+ <template #availableItem="{item}">
73
+ <div>{{item.name}}</div>
74
+ </template>
75
+ </GSCDropdown>
76
+ <div :class="$style.name1">{{ gameInfo.away_team_abbreviation }}</div>
77
+ <div :class="$style.teamContainer1">
78
+ <div :class="$style.imgHomeTeamWrapper">
79
+ <img
80
+ :class="$style.imgHomeTeamIcon"
81
+ alt=""
82
+ :src="getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png', provider)"
83
+ />
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ </div>
90
+ <div :class="$style.headerSeccionAlineaciones2" id="header-desktop">
91
+ <div :class="$style.groupsLeagueParent">
92
+ <div :class="$style.groupsLeague">
93
+ <span>Las alineaciones de este partido </span>
94
+ <span :class="$style.anNoEstn">aún no están disponibles</span>
95
+ <span>. Por lo pronto puedes ver alineaciones:</span>
96
+ </div>
97
+ <div :class="$style.switchStatesBig" id="switch-lineup">
98
+ <GscSwitchComponent
99
+ :buttons="['Historicos', 'Recientes', 'Probables']"
100
+ :selectedOption="optionSelected"
101
+ :type="1"
102
+ :arrow="false"
103
+ borderRadius="32px"
104
+ height="28px"
105
+ fontSize="11px;"
106
+ fontFamily="Poppins-Regular"
107
+ border-width="1px"
108
+ border-width-container="0px"
109
+ backgroundOptionDisable="#162533"
110
+ width="600px"
111
+ backgroundOptionActive="transparent"
112
+ @input="clickOnSelectOption" />
113
+ </div>
114
+ </div>
115
+ <div :class="$style.matchContainer" id="match-container">
116
+ <div :class="$style.homeTeamContainer1">
117
+ <div :class="$style.teamContainer">
118
+ <div :class="$style.imgHomeTeamWrapper">
119
+ <img
120
+ :class="$style.imgHomeTeamIcon"
121
+ alt=""
122
+ :src="getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png', provider)"
123
+ />
124
+ </div>
125
+ </div>
126
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
127
+ <div :class="$style.frameParent">
128
+ <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
129
+ <template #default="data">
130
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
131
+ </template>
132
+ <template #availableItem="{item}">
133
+ <div>{{item.name}}</div>
134
+ </template>
135
+ </GSCDropdown>
136
+ </div>
137
+ <div :class="$style.team">
138
+ <div :class="$style.manchesterUnited">vs</div>
139
+ <img :class="$style.necaxaIcon" alt="" :src="rivalHomeImg" />
140
+ <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div>
141
+ </div>
142
+ </div>
143
+ <div :class="$style.awayTeamContainer1">
144
+
145
+
146
+ <div :class="$style.team">
147
+ <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div>
148
+ <img :class="$style.necaxaIcon" alt="" :src="rivalVisitImg" />
149
+ <div :class="$style.manchesterUnited">vs</div>
150
+ </div>
151
+ <div :class="$style.frameParent">
152
+ <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" width="92px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="1" borderColor="rgba(255, 255, 255, 0.2)" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
153
+ <template #default="data">
154
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
155
+ </template>
156
+ <template #availableItem="{item}">
157
+ <div>{{item.name}}</div>
158
+ </template>
159
+ </GSCDropdown>
160
+ </div>
161
+ <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
162
+ <div :class="$style.teamContainer1">
163
+ <div :class="$style.imgHomeTeamWrapper">
164
+ <img
165
+ :class="$style.imgHomeTeamIcon"
166
+ alt=""
167
+ :src="getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png', provider)"
168
+ />
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ <div :class="$style.headerSeccionAlineaciones3" id="header-mobile">
175
+ <div :class="$style.switchStatesBig2" id="switch-lineup">
176
+ <GscSwitchComponent
177
+ :buttons="['Historicos', 'Recientes', 'Probables']"
178
+ :selectedOption="optionSelected"
179
+ :type="1"
180
+ :arrow="false"
181
+ borderRadius="32px"
182
+ height="28px"
183
+ fontSize="11px;"
184
+ fontFamily="Poppins-Regular"
185
+ border-width="1px"
186
+ border-width-container="0px"
187
+ backgroundOptionDisable="#162533"
188
+ width="600px"
189
+ backgroundOptionActive="transparent"
190
+ @input="clickOnSelectOption" />
191
+ </div>
192
+ <div :class="$style.containerData">
193
+ <div :class="$style.manchesterUnited28">Alineación utilizada en:</div>
194
+ <div :class="$style.matchContainer2" id="match-container">
195
+ <div :class="$style.homeTeamContainer2">
196
+ <div :class="$style.teamContainer">
197
+ <div :class="$style.imgHomeTeamWrapper">
198
+ <img
199
+ :class="$style.imgHomeTeamIcon"
200
+ alt=""
201
+ :src="getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.home_team+'.png', provider)"
202
+ />
203
+ </div>
204
+ </div>
205
+ <div :class="$style.name">{{ gameInfo.home_team_abbreviation }}</div>
206
+ </div>
207
+ <div :class="$style.homeTeamContainer2">
208
+ <div :class="$style.name">{{ gameInfo.away_team_abbreviation }}</div>
209
+ <div :class="$style.teamContainer1">
210
+ <div :class="$style.imgHomeTeamWrapper">
211
+ <img
212
+ :class="$style.imgHomeTeamIcon"
213
+ alt=""
214
+ :src="getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+gameInfo.away_team+'.png', provider)"
215
+ />
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <div :class="$style.filtersContainer">
222
+ <div :class="$style.filterMatchdayParent">
223
+ <div :class="$style.filterMatchday">
224
+ <div :class="$style.filterMatchday1">
225
+ <GSCDropdown :items="matchdaysDefault[gameInfo.home_team_abbreviation]" @input="changeDropdownLocal" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
226
+ <template #default="data">
227
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
228
+ </template>
229
+ <template #availableItem="{item}">
230
+ <div>{{item.name}}</div>
231
+ </template>
232
+ </GSCDropdown>
233
+ </div>
234
+ </div>
235
+ <div :class="$style.team4">
236
+ <div :class="$style.manchesterUnited1">vs</div>
237
+ <img
238
+ :class="$style.necaxaIcon4"
239
+ alt=""
240
+ :src="rivalHomeImg"
241
+ />
242
+ <!-- <div :class="$style.manchesterUnited1">{{ rivalHomeAbrev }}</div> -->
243
+ </div>
244
+ </div>
245
+ <div :class="$style.teamParent">
246
+ <div :class="$style.team1">
247
+ <!-- <div :class="$style.manchesterUnited1">{{ rivalVisitAbrev }}</div> -->
248
+ <img
249
+ :class="$style.necaxaIcon4"
250
+ alt=""
251
+ :src="rivalVisitImg"
252
+ />
253
+ <div :class="$style.manchesterUnited1">vs</div>
254
+ </div>
255
+ <div :class="$style.filterMatchday1">
256
+ <GSCDropdown :items="matchdaysDefault[gameInfo.away_team_abbreviation]" @input="changeDropdownVisit" style="align-items: baseline; z-index: 2;" height="32px" background-color="rgba(255, 255, 255, 0.05);" color="white" border-width="0" borderColor="none" border-radius="0px" fontSize="10px" arrowHeight="16" :arrowWidth="16" listHeight="300px" listBackgroundColor="#243a4c" hoverBackgroundColor="#0d1d2a" listItemColor="#FFFFFF" listItemSelectedBackgroundColor="#0d1d2a" listItemSelectedColor="#c3e569" listItemPadding="8px 7px" listBorderColor="rgba(255, 255, 255, 0.1)" listBorderRadius="2px">
257
+ <template #default="data">
258
+ <div class="selector-tournaments">{{data.selectedItem.name}}</div>
259
+ </template>
260
+ <template #availableItem="{item}">
261
+ <div>{{item.name}}</div>
262
+ </template>
263
+ </GSCDropdown>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </template>
271
+
272
+
273
+ <script>
274
+ import {
275
+ GSCDropdown
276
+ } from '@golstats/gsc-dropdown';
277
+ import '@@/@golstats/gsc-dropdown/dist/style.css'
278
+ import { GscSwitchComponent } from '@golstats/gsc-switch-component'
279
+ import '@@/@golstats/gsc-switch-component/dist/style.css'
280
+ import { getImageUrl } from '@/utils/imageUrl'
281
+ export default {
282
+ components: { GSCDropdown, GscSwitchComponent},
283
+ props: {
284
+ provider: {
285
+ type: Number,
286
+ default: 1,
287
+ },
288
+ optionSelected: {
289
+ type: String,
290
+ default: 'Historicos',
291
+ },
292
+ gameInfo: {
293
+ type: Object,
294
+ default: () => {},
295
+ },
296
+ gameRecientes: {
297
+ type: Array,
298
+ default: () => [],
299
+ },
300
+ matchdaysDefault: {
301
+ type: Array,
302
+ default: () => [],
303
+ },
304
+ },
305
+ data() {
306
+ return {
307
+ rivalHomeImg: '',
308
+ rivalVisitImg: '',
309
+ rivalHomeAbrev: '',
310
+ rivalVisitAbrev: '',
311
+ auxVal: 0,
312
+
313
+ }
314
+ },
315
+ watch: {
316
+ gameInfo: {
317
+ immediate: true,
318
+ handler: async function (newValue) {
319
+ try {
320
+ this.$emit('input',newValue);
321
+ } catch (e) {
322
+ throw new Error(e);
323
+ }
324
+ },
325
+ },
326
+ },
327
+ methods: {
328
+ getImageUrl,
329
+ clickOnSelectOption(val){
330
+ this.$emit('clickOnSelectOption', val);
331
+ },
332
+ changeDropdownVisit(val){
333
+ const indexGame = this.gameRecientes[this.gameInfo.away_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
334
+ this.rivalVisitAbrev = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team_abbreviation : this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation;
335
+ this.rivalVisitImg = this.gameInfo.away_team_abbreviation == this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team_abbreviation ? getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].away_team+'.png', this.provider) : getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame].home_team+'.png', this.provider);
336
+
337
+ this.$emit('changeaway',this.gameRecientes[this.gameInfo.away_team_abbreviation][indexGame]);
338
+
339
+ },
340
+ changeDropdownLocal(val){
341
+ const indexGame = this.gameRecientes[this.gameInfo.home_team_abbreviation].findIndex(x => x.matchday_id ===val.id);
342
+ this.rivalHomeAbrev = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team_abbreviation : this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation;
343
+ this.rivalHomeImg = this.gameInfo.home_team_abbreviation == this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team_abbreviation ? getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].home_team+'.png', this.provider) : getImageUrl('https://golstatsimages.blob.core.windows.net/teams-80/'+this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame].away_team+'.png', this.provider);
344
+
345
+ this.$emit('changehome',this.gameRecientes[this.gameInfo.home_team_abbreviation][indexGame]);
346
+
347
+ }
348
+ }
349
+ };
350
+ </script>
351
+
352
+
353
+ <style module>
354
+ @import '/css/fonts.css';
355
+ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
356
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap");
357
+ body {
358
+ margin: 0;
359
+ line-height: normal;
360
+ }
361
+ :root {
362
+ /* fonts */
363
+ --font-poppinspro: Poppins;
364
+ --font-interpro: Inter;
365
+
366
+ /* font sizes */
367
+ --font-size-3xspro: 10px;
368
+ --font-size-xspro: 12px;
369
+ --font-size-smpro: 14px;
370
+ --font-size-2xspro: 11px;
371
+ --font-size-4xspro: 9px;
372
+ --font-size-base-2pro: 15.2px;
373
+
374
+ /* Colors */
375
+ --color-gray-100pro: #172632;
376
+ --color-gray-200pro: #172531;
377
+ --color-gray-300pro: rgba(255, 255, 255, 0.7);
378
+ --color-gray-400pro: rgba(255, 255, 255, 0.3);
379
+ --color-whitepro: #fff;
380
+ --color-yellowgreen-100pro: #cbee6b;
381
+ --color-yellowgreen-200pro: #cbed6e;
382
+ --color-whitesmokepro: #f4f4f4;
383
+ --color-darkbluepro: #0234c5;
384
+ --color-darkslategraypro: #1e2b36;
385
+ --color-goldenrodpro: #f7c330;
386
+ --color-redpro: #ff0000;
387
+ --color-slategraypro: #56637b;
388
+
389
+ /* Spacing */
390
+ --sizes-round-corner-round-corner-32pro: 32px;
391
+ --sizes-spacing-space-24pro: 24px;
392
+
393
+ /* Gaps */
394
+ --gap-basepro: 16px;
395
+ --gap-3xspro: 10px;
396
+ --gap-7xspro: 6px;
397
+ --gap-11xspro: 2px;
398
+ --gap-8xspro: 5px;
399
+ --gap-40xlpro: 59px;
400
+ --gap-4xspro: 9px;
401
+ --gap-11xlpro: 30px;
402
+
403
+ /* Paddings */
404
+ --padding-basepro: 16px;
405
+ --padding-5xlpro: 24px;
406
+ --padding-xspro: 12px;
407
+ --padding-7xspro: 6px;
408
+ --padding-11xspro: 2px;
409
+ --padding-3xspro: 10px;
410
+ --padding-29xlpro: 48px;
411
+ --padding-xlpro: 20px;
412
+ --padding-5xspro: 8px;
413
+
414
+ /* Border radiuses */
415
+ --br-9xspro: 4px;
416
+ --br-2xs-2pro: 10.2px;
417
+ --br-31xlpro: 50px;
418
+ --br-13xlpro: 32px;
419
+ --br-12xspro: 1px;
420
+ }
421
+
422
+ .anNoEstn {
423
+ font-weight: 500;
424
+ }
425
+ .groupsLeague {
426
+ position: relative;
427
+ line-height: 20px;
428
+ }
429
+ .historicas {
430
+ position: relative;
431
+ line-height: 20px;
432
+ opacity: 0.6;
433
+ }
434
+ .switchOption {
435
+ border-radius: var(--br-13xlpro);
436
+ width: 109px;
437
+ display: flex;
438
+ flex-direction: row;
439
+ align-items: center;
440
+ justify-content: center;
441
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
442
+ box-sizing: border-box;
443
+ }
444
+ .switchOption1 {
445
+ border-radius: var(--br-13xlpro);
446
+ width: 107px;
447
+ display: flex;
448
+ flex-direction: row;
449
+ align-items: center;
450
+ justify-content: center;
451
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
452
+ box-sizing: border-box;
453
+ }
454
+ .probables {
455
+ position: relative;
456
+ line-height: 20px;
457
+ font-weight: 600;
458
+ }
459
+ .switchOption2 {
460
+ border-radius: var(--br-13xlpro);
461
+ background-color: var(--color-darkslategraypro);
462
+ border: 0.8px solid var(--color-yellowgreen-100pro);
463
+ box-sizing: border-box;
464
+ width: 109.8px;
465
+ display: flex;
466
+ flex-direction: row;
467
+ align-items: center;
468
+ justify-content: center;
469
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
470
+ }
471
+ .switchStatesBig {
472
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
473
+ background-color: var(--color-gray-100pro);
474
+ border: 1px solid var(--color-gray-400pro);
475
+ display: inline-block;
476
+ width: 320px;
477
+ font-size: var(--font-size-xspro);
478
+ color: var(--color-whitepro);
479
+ }
480
+ .groupsLeagueParent {
481
+ align-self: stretch;
482
+ display: flex;
483
+ flex-direction: column;
484
+ align-items: center;
485
+ justify-content: flex-start;
486
+ gap: var(--gap-11xlpro);
487
+ text-align: center;
488
+ }
489
+ .imgHomeTeamIcon {
490
+ position: relative;
491
+ width: 28px;
492
+ height: 28px;
493
+ object-fit: cover;
494
+ }
495
+ .imgHomeTeamWrapper {
496
+ border-radius: var(--br-31xlpro);
497
+ background-color: var(--color-gray-200pro);
498
+ width: 40px;
499
+ height: 40px;
500
+ display: flex;
501
+ flex-direction: column;
502
+ align-items: center;
503
+ justify-content: center;
504
+ padding: var(--padding-3xspro);
505
+ box-sizing: border-box;
506
+ }
507
+ .teamContainer {
508
+ border-radius: var(--br-31xlpro);
509
+ border: 1px solid var(--color-darkbluepro);
510
+ box-sizing: border-box;
511
+ width: 48px;
512
+ height: 48px;
513
+ display: flex;
514
+ flex-direction: row;
515
+ align-items: center;
516
+ justify-content: center;
517
+ padding: var(--padding-3xspro);
518
+ }
519
+ .name {
520
+ position: relative;
521
+ letter-spacing: 0.31px;
522
+ line-height: 30.87px;
523
+ font-weight: 500;
524
+ }
525
+ .jor {
526
+ position: relative;
527
+ line-height: 9px;
528
+ font-weight: 600;
529
+ opacity: 0.6;
530
+ }
531
+ .jorParent {
532
+ flex: 1;
533
+ display: flex;
534
+ flex-direction: row;
535
+ align-items: center;
536
+ justify-content: flex-start;
537
+ gap: var(--gap-7xspro);
538
+ }
539
+ .shapeIcon {
540
+ position: relative;
541
+ width: 8px;
542
+ height: 4px;
543
+ }
544
+ .frameParent {
545
+ cursor: pointer;
546
+ width: auto;
547
+ border: 1px solid var(--color-gray-400pro);
548
+ background-color: rgba(255, 255, 255, 0.05);
549
+ border-radius: var(--br-5xsre);
550
+ box-sizing: border-box;
551
+ height: 32px;
552
+ display: flex;
553
+ font-size: 10px;
554
+ flex-direction: row;
555
+ align-items: center;
556
+ justify-content: flex-start;
557
+ gap: var(--gap-3xspro);
558
+ }
559
+ .manchesterUnited {
560
+ position: relative;
561
+ letter-spacing: -0.01em;
562
+ line-height: 20.07px;
563
+ font-weight: 500;
564
+ display: flex;
565
+ align-items: center;
566
+ width: 16px;
567
+ height: 29px;
568
+ flex-shrink: 0;
569
+ }
570
+ .necaxaIcon {
571
+ position: relative;
572
+ width: 29px;
573
+ height: 29px;
574
+ object-fit: cover;
575
+ }
576
+ .manchesterUnited1 {
577
+ position: relative;
578
+ letter-spacing: -0.01em;
579
+ line-height: 20.07px;
580
+ font-weight: 500;
581
+ }
582
+ .team {
583
+ display: flex;
584
+ flex-direction: row;
585
+ align-items: center;
586
+ justify-content: flex-start;
587
+ gap: var(--gap-8xspro);
588
+ color: var(--color-gray-300pro);
589
+ }
590
+ .homeTeamContainer {
591
+ flex: 1;
592
+ border-bottom: 1px solid var(--color-slategraypro);
593
+ display: flex;
594
+ flex-direction: row;
595
+ align-items: center;
596
+ justify-content: flex-start;
597
+ padding: 0px 0px var(--padding-xlpro);
598
+ gap: var(--gap-3xspro);
599
+ }
600
+ .div1 {
601
+ position: relative;
602
+ font-weight: 600;
603
+ }
604
+ .scoreContainer {
605
+ border-radius: 17.4px;
606
+ background-color: rgba(255, 255, 255, 0.1);
607
+ display: flex;
608
+ flex-direction: row;
609
+ align-items: center;
610
+ justify-content: center;
611
+ padding: 6.524074554443359px 17.397533416748047px;
612
+ gap: 8.7px;
613
+ opacity: 0;
614
+ }
615
+ .scoreContainerWrapper {
616
+ align-self: stretch;
617
+ width: 323px;
618
+ display: flex;
619
+ flex-direction: column;
620
+ align-items: center;
621
+ justify-content: space-between;
622
+ text-align: center;
623
+ font-size: 15.22px;
624
+ color: var(--color-whitepro);
625
+ font-family: var(--font-interpro);
626
+ }
627
+ .team1 {
628
+ display: flex;
629
+ flex-direction: row;
630
+ align-items: center;
631
+ justify-content: flex-start;
632
+ gap: var(--gap-8xspro);
633
+ }
634
+ .name1 {
635
+ position: relative;
636
+ letter-spacing: 0.31px;
637
+ line-height: 30.87px;
638
+ font-weight: 500;
639
+ color: var(--color-whitesmokepro);
640
+ }
641
+ .teamContainer1 {
642
+ border-radius: var(--br-31xlpro);
643
+ border: 1px solid var(--color-yellowgreen-200pro);
644
+ box-sizing: border-box;
645
+ width: 48px;
646
+ height: 48px;
647
+ display: flex;
648
+ flex-direction: row;
649
+ align-items: center;
650
+ justify-content: center;
651
+ padding: var(--padding-3xspro);
652
+ }
653
+ .awayTeamContainer {
654
+ flex: 1;
655
+ border-bottom: 1px solid var(--color-slategraypro);
656
+ display: flex;
657
+ flex-direction: row;
658
+ align-items: center;
659
+ justify-content: flex-end;
660
+ padding: 0px 0px var(--padding-xlpro);
661
+ gap: var(--gap-3xspro);
662
+ color: var(--color-gray-300pro);
663
+ }
664
+ .matchContainer {
665
+ align-self: stretch;
666
+ display: flex;
667
+ flex-direction: row;
668
+ align-items: center;
669
+ justify-content: space-between;
670
+ padding: 0px 0px var(--padding-xspro);
671
+ color: var(--color-whitesmokepro);
672
+ }
673
+ .goalChild {
674
+ position: relative;
675
+ width: 8.03px;
676
+ height: 8.03px;
677
+ }
678
+ .goal {
679
+ width: 9px;
680
+ height: 9px;
681
+ display: flex;
682
+ flex-direction: row;
683
+ align-items: center;
684
+ justify-content: center;
685
+ }
686
+ .manchesterUnited4 {
687
+ position: relative;
688
+ letter-spacing: -0.01em;
689
+ line-height: 19.5px;
690
+ text-transform: capitalize;
691
+ font-weight: 500;
692
+ }
693
+ .minuteEvent {
694
+ display: flex;
695
+ flex-direction: row;
696
+ align-items: center;
697
+ justify-content: flex-start;
698
+ gap: var(--gap-4xspro);
699
+ }
700
+ .yellowCard {
701
+ position: relative;
702
+ border-radius: var(--br-12xspro);
703
+ background-color: var(--color-goldenrodpro);
704
+ width: 4px;
705
+ height: 6px;
706
+ }
707
+ .awayTeamEvents {
708
+ display: flex;
709
+ flex-direction: column;
710
+ align-items: flex-start;
711
+ justify-content: flex-start;
712
+ gap: var(--gap-3xspro);
713
+ }
714
+ .rectangle {
715
+ position: relative;
716
+ border-radius: var(--br-12xspro);
717
+ background-color: var(--color-redpro);
718
+ width: 4px;
719
+ height: 6px;
720
+ }
721
+ .homeTeamEvents {
722
+ display: flex;
723
+ flex-direction: column;
724
+ align-items: flex-end;
725
+ justify-content: flex-start;
726
+ gap: var(--gap-3xspro);
727
+ text-align: right;
728
+ }
729
+ .totalEvents {
730
+ display: none;
731
+ flex-direction: row;
732
+ align-items: center;
733
+ justify-content: flex-start;
734
+ gap: var(--gap-40xlpro);
735
+ font-size: var(--font-size-4xspro);
736
+ }
737
+ .headerSeccionAlineaciones1 {
738
+ align-self: stretch;
739
+ background-color: var(--color-gray-200pro);
740
+ display: flex;
741
+ flex-direction: column;
742
+ align-items: center;
743
+ justify-content: flex-start;
744
+ padding: 0px var(--padding-29xlpro);
745
+ gap: var(--gap-basepro);
746
+ }
747
+ .homeTeamContainer1 {
748
+ border-bottom: 1px solid var(--color-slategraypro);
749
+ box-sizing: border-box;
750
+ width: 45%;
751
+ display: flex;
752
+ flex-direction: row;
753
+ flex-wrap: wrap;
754
+ align-items: center;
755
+ justify-content: flex-start;
756
+ padding: 0px 0px var(--padding-xlpro);
757
+ gap: var(--gap-3xspro);
758
+ }
759
+ .awayTeamContainer1 {
760
+ border-bottom: 1px solid var(--color-slategraypro);
761
+ box-sizing: border-box;
762
+ width: 45%;
763
+ display: flex;
764
+ flex-direction: row;
765
+ flex-wrap: wrap;
766
+ align-items: center;
767
+ justify-content: flex-end;
768
+ padding: 0px 0px var(--padding-xlpro);
769
+ gap: var(--gap-3xspro);
770
+ }
771
+ .headerSeccionAlineaciones2 {
772
+ align-self: stretch;
773
+ background-color: var(--color-gray-200pro);
774
+ display: none;
775
+ flex-direction: column;
776
+ align-items: center;
777
+ justify-content: flex-start;
778
+ padding: 0px var(--padding-29xlpro);
779
+ gap: var(--gap-basepro);
780
+ }
781
+ .jugadores {
782
+ position: relative;
783
+ line-height: 20px;
784
+ font-weight: 600;
785
+ opacity: 0.6;
786
+ }
787
+ .switchOption6 {
788
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
789
+ width: 74px;
790
+ display: flex;
791
+ flex-direction: row;
792
+ align-items: center;
793
+ justify-content: center;
794
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
795
+ box-sizing: border-box;
796
+ }
797
+ .switchOption8 {
798
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
799
+ background-color: var(--color-darkslategraypro);
800
+ border: 0.8px solid var(--color-yellowgreen-100pro);
801
+ box-sizing: border-box;
802
+ width: 74.8px;
803
+ display: flex;
804
+ flex-direction: row;
805
+ align-items: center;
806
+ justify-content: center;
807
+ padding: var(--padding-3xspro) var(--sizes-spacing-space-24pro);
808
+ }
809
+ .switchStatesBig2 {
810
+ border-radius: var(--sizes-round-corner-round-corner-32pro);
811
+ background-color: var(--color-gray-100pro);
812
+ border: 1px solid var(--color-gray-400pro);
813
+ display: inline-block;
814
+ width: 280px;
815
+ }
816
+ .manchesterUnited28 {
817
+ position: relative;
818
+ font-weight: 500;
819
+ }
820
+ .homeTeamContainer2 {
821
+ display: flex;
822
+ flex-direction: row;
823
+ align-items: center;
824
+ justify-content: flex-start;
825
+ gap: var(--gap-3xspro);
826
+ }
827
+ .matchContainer2 {
828
+ align-self: stretch;
829
+ display: flex;
830
+ flex-direction: row;
831
+ align-items: center;
832
+ justify-content: space-between;
833
+ padding: 0px 0px var(--padding-xspro);
834
+ text-align: left;
835
+ font-size: var(--font-size-smpro);
836
+ color: var(--color-whitesmokepro);
837
+ }
838
+ .manchesterUnited29 {
839
+ position: relative;
840
+ letter-spacing: -0.01em;
841
+ line-height: 20.07px;
842
+ font-weight: 500;
843
+ z-index: 0;
844
+ }
845
+ .sliderMatchesChild {
846
+ position: absolute;
847
+ margin: 0 !important;
848
+ top: 14.31px;
849
+ left: 261.07px;
850
+ border-radius: 10.21px;
851
+ width: 14.31px;
852
+ height: 6.41px;
853
+ z-index: 1;
854
+ }
855
+ .sliderMatchesItem {
856
+ position: absolute;
857
+ margin: 0 !important;
858
+ top: 0.31px;
859
+ left: 6.41px;
860
+ border-radius: 10.21px;
861
+ width: 14.31px;
862
+ height: 6.41px;
863
+ z-index: 2;
864
+ }
865
+ .sliderMatches {
866
+ display: none;
867
+ flex-direction: row;
868
+ align-items: flex-start;
869
+ justify-content: flex-start;
870
+ padding: var(--padding-11xspro) var(--padding-basepro);
871
+ position: relative;
872
+ gap: var(--gap-3xspro);
873
+ font-size: var(--font-size-smpro);
874
+ }
875
+ .jorParent2 {
876
+ display: flex;
877
+ flex-direction: row;
878
+ align-items: center;
879
+ justify-content: center;
880
+ gap: var(--gap-11xspro);
881
+ }
882
+ .filterMatchday {
883
+ border-radius: var(--br-9xspro);
884
+ border: 1px solid var(--color-gray-400pro);
885
+ box-sizing: border-box;
886
+ height: 25px;
887
+ display: flex;
888
+ flex-direction: row;
889
+ align-items: center;
890
+ justify-content: flex-start;
891
+ gap: var(--gap-7xspro);
892
+ }
893
+ .necaxaIcon4 {
894
+ position: relative;
895
+ width: 18px;
896
+ height: 18px;
897
+ object-fit: cover;
898
+ }
899
+ .team4 {
900
+ display: flex;
901
+ flex-direction: row;
902
+ align-items: center;
903
+ justify-content: flex-start;
904
+ gap: var(--gap-8xspro);
905
+ text-align: left;
906
+ font-size: var(--font-size-xspro);
907
+ color: var(--color-gray-300pro);
908
+ }
909
+ .filterMatchdayParent {
910
+ display: flex;
911
+ flex-direction: row;
912
+ align-items: center;
913
+ justify-content: center;
914
+ gap: var(--gap-3xspro);
915
+ }
916
+ .filterMatchday1 {
917
+ border-radius: var(--br-9xspro);
918
+ border: 1px solid var(--color-gray-400pro);
919
+ box-sizing: border-box;
920
+ height: 25px;
921
+ display: flex;
922
+ flex-direction: row;
923
+ align-items: center;
924
+ justify-content: flex-start;
925
+ padding: var(--padding-11xspro) var(--padding-7xspro);
926
+ gap: var(--gap-7xspro);
927
+ text-align: center;
928
+ font-size: var(--font-size-3xspro);
929
+ color: var(--color-whitepro);
930
+ }
931
+ .teamParent {
932
+ display: flex;
933
+ flex-direction: row;
934
+ align-items: center;
935
+ justify-content: center;
936
+ gap: var(--gap-3xspro);
937
+ text-align: left;
938
+ font-size: var(--font-size-xspro);
939
+ color: var(--color-gray-300pro);
940
+ }
941
+ .filtersContainer {
942
+ align-self: stretch;
943
+ display: flex;
944
+ flex-direction: row;
945
+ align-items: center;
946
+ justify-content: space-between;
947
+ padding: 0px 0px var(--padding-7xspro);
948
+ color: var(--color-whitepro);
949
+ }
950
+ .containerData {
951
+ align-self: stretch;
952
+ border-radius: 9px;
953
+ background-color: #192632;
954
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
955
+ display: flex;
956
+ flex-direction: column;
957
+ align-items: center;
958
+ justify-content: flex-start;
959
+ padding: var(--padding-basepro) var(--padding-5xlpro) 32px;
960
+ gap: 12px;
961
+ font-size: var(--font-size-3xspro);
962
+ color: var(--color-gray-300pro);
963
+ }
964
+ .headerSeccionAlineaciones3 {
965
+ align-self: stretch;
966
+ display: none;
967
+ flex-direction: column;
968
+ align-items: center;
969
+ justify-content: flex-start;
970
+ gap: var(--gap-basepro);
971
+ text-align: center;
972
+ font-size: var(--font-size-2xspro);
973
+ color: var(--color-whitepro);
974
+ }
975
+ .headerSeccionAlineaciones {
976
+ position: relative;
977
+ width: 100%;
978
+ display: flex;
979
+ flex-direction: column;
980
+ align-items: flex-start;
981
+ justify-content: flex-start;
982
+ gap: 132px;
983
+ text-align: left;
984
+ font-size: var(--font-size-smpro);
985
+ color: var(--color-gray-300pro);
986
+ font-family: var(--font-poppinspro);
987
+ }
988
+
989
+ @media screen and (max-width: 1200px) {
990
+ .headerSeccionAlineaciones1 {
991
+ align-self: stretch;
992
+ width: auto;
993
+ max-width: 1089px;
994
+ }
995
+
996
+ .headerSeccionAlineaciones2 {
997
+ display: none;
998
+ align-self: stretch;
999
+ width: auto;
1000
+ max-width: 1089px;
1001
+ }
1002
+
1003
+ .headerSeccionAlineaciones3 {
1004
+ display: none;
1005
+ max-width: 540px;
1006
+ }
1007
+ }
1008
+ @media screen and (max-width: 420px) {
1009
+ .headerSeccionAlineaciones1 {
1010
+ display: none;
1011
+ }
1012
+
1013
+ .headerSeccionAlineaciones2 {
1014
+ display: none;
1015
+ }
1016
+
1017
+ .headerSeccionAlineaciones3 {
1018
+ display: flex;
1019
+ }
1020
+ }
1021
+ @media screen and (max-width: 880px) {
1022
+ .headerSeccionAlineaciones1 {
1023
+ display: none;
1024
+ }
1025
+
1026
+ .headerSeccionAlineaciones2 {
1027
+ display: flex;
1028
+ }
1029
+
1030
+ .headerSeccionAlineaciones3 {
1031
+ display: none;
1032
+ }
1033
+ }
1034
+ @media screen and (max-width: 540px) {
1035
+ .headerSeccionAlineaciones2 {
1036
+ display: none;
1037
+ }
1038
+
1039
+ .containerData {
1040
+ padding-left: var(--padding-xspro);
1041
+ padding-right: var(--padding-xspro);
1042
+ box-sizing: border-box;
1043
+ }
1044
+
1045
+ .headerSeccionAlineaciones3 {
1046
+ display: flex;
1047
+ min-width: 300px;
1048
+ }
1049
+ }
1050
+ </style>