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