@golstats/gsc-lineups-reports 1.0.3 → 1.0.4

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