@golstats/gsc-reports 1.0.53 → 1.0.54

package/src/components/thumbnails-reports/AnalisisPrematchType1.vue

@@ -1,232 +1,232 @@
-<template>
-  <div class="prematch-bg">
-    <!-- Escudos de fondo -->
-    <div class="background-shields">
-      <div class="shield-left">
-        <img
-          :src="
-            'https://golstatsimages.blob.core.windows.net/teams-150/' +
-            props.report.game.home_team +
-            '.png'
-          "
-          alt="Escudo local"
-        />
-      </div>
-      <div class="shield-right">
-        <img
-          :src="
-            'https://golstatsimages.blob.core.windows.net/teams-150/' +
-            props.report.game.visiting_team +
-            '.png'
-          "
-          alt="Escudo visitante"
-        />
-      </div>
-    </div>
-
-    <div class="title">Análisis <span class="highlight">Prematch</span></div>
-    <div class="subtitle">
-      <span class="jornada">{{ traducirJornada(props.report.game.matchday_name) }}</span>
-      <span class="fecha"> - {{ formatDate(props.report.game.date_time_utc) }}</span>
-    </div>
-    <div class="teams-row">
-      <div class="team team-local">
-        <span class="escudo-svg">
-          <img
-            width="55px"
-            :src="
-              'https://golstatsimages.blob.core.windows.net/teams-80/' +
-              props.report.game.home_team +
-              '.png'
-            "
-          />
-        </span>
-        <span class="team-name">{{ props.report.game.home_team_acronym }}</span>
-      </div>
-      <div class="team team-visitor">
-        <span class="escudo-svg">
-          <img
-            width="55px"
-            :src="
-              'https://golstatsimages.blob.core.windows.net/teams-80/' +
-              props.report.game.visiting_team +
-              '.png'
-            "
-          />
-        </span>
-        <span class="team-name">{{ props.report.game.visiting_team_acronym }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { formatDate } from '../../utils/dateUtils.js'
-
-function traducirJornada(jornada) {
-  if (!jornada) return ''
-  return jornada
-    .replace('Matchday', 'J')
-    .replace('de Final', '')
-    .replace('Playoffs 1', 'CFI')
-    .replace('Playoffs 2', 'CFV')
-    .replace('Playoffs 3', 'SI')
-    .replace('Playoffs 4', 'SV')
-    .replace('Playoffs 5', 'FI')
-    .replace('Playoffs 6', 'FV')
-}
-
-// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
-const props = defineProps({
-  report: {
-    type: Object,
-    default: () => ({}),
-  },
-})
-</script>
-
-<style scoped>
-.prematch-bg {
-  width: 100%;
-  height: 222px;
-  /* height: 100vh; */
-  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
-  background-size: cover;
-  background-repeat: no-repeat;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.background-shields {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.shield-left {
-  position: absolute;
-  left: -80px;
-  top: 50%;
-  transform: translateY(-50%);
-  opacity: 0.09;
-}
-
-.shield-left img {
-  width: 170px;
-  object-fit: contain;
-}
-
-.shield-right {
-  position: absolute;
-  right: -80px;
-  top: 50%;
-  transform: translateY(-50%);
-  opacity: 0.09;
-}
-
-.shield-right img {
-  width: 170px;
-  object-fit: contain;
-}
-
-.header {
-  padding: 24px 32px;
-}
-
-.logo {
-  height: 40px;
-}
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* Elimina el margin-top para centrar verticalmente */
-}
-
-.title {
-  font-size: 0.8rem;
-  color: #fff;
-  margin-top: -10px;
-  font-family: Poppins-Regular;
-  position: relative;
-  z-index: 2;
-}
-
-.highlight {
-  font-family: Poppins-Bold;
-  color: #fff;
-}
-
-.subtitle {
-  font-family: Poppins-Regular;
-  margin-top: -8px;
-  font-size: 1.1rem;
-  color: #e0e0e0;
-  position: relative;
-  z-index: 2;
-}
-
-.jornada {
-  font-family: Poppins-Medium;
-  color: #fff;
-  font-size: 0.4rem;
-  line-height: 2.2;
-  letter-spacing: 0.2px;
-  opacity: 0.8;
-}
-
-.fecha {
-  font-family: Poppins-Regular;
-  color: #e0e0e0;
-  opacity: 0.8;
-  line-height: 2.2;
-  letter-spacing: 0.2px;
-  font-size: 0.4rem;
-}
-
-.teams-row {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 30px;
-  margin-top: 20px;
-  position: relative;
-  z-index: 2;
-}
-
-.team {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12px;
-}
-
-.team-visitor {
-  flex-direction: row-reverse;
-}
-
-.escudo-svg {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 55px;
-  height: 55px;
-}
-
-.team-name {
-  font-size: 1rem;
-  font-family: Poppins-bold;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 2px;
-}
-</style>
+<template>
+  <div class="prematch-bg">
+    <!-- Escudos de fondo -->
+    <div class="background-shields">
+      <div class="shield-left">
+        <img
+          :src="
+            'https://golstatsimages.blob.core.windows.net/teams-150/' +
+            props.report.game.home_team +
+            '.png'
+          "
+          alt="Escudo local"
+        />
+      </div>
+      <div class="shield-right">
+        <img
+          :src="
+            'https://golstatsimages.blob.core.windows.net/teams-150/' +
+            props.report.game.visiting_team +
+            '.png'
+          "
+          alt="Escudo visitante"
+        />
+      </div>
+    </div>
+
+    <div class="title">Análisis <span class="highlight">Prematch</span></div>
+    <div class="subtitle">
+      <span class="jornada">{{ traducirJornada(props.report.game.matchday_name) }}</span>
+      <span class="fecha"> - {{ formatDate(props.report.game.date_time_utc) }}</span>
+    </div>
+    <div class="teams-row">
+      <div class="team team-local">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.home_team +
+              '.png'
+            "
+          />
+        </span>
+        <span class="team-name">{{ props.report.game.home_team_acronym }}</span>
+      </div>
+      <div class="team team-visitor">
+        <span class="escudo-svg">
+          <img
+            width="55px"
+            :src="
+              'https://golstatsimages.blob.core.windows.net/teams-80/' +
+              props.report.game.visiting_team +
+              '.png'
+            "
+          />
+        </span>
+        <span class="team-name">{{ props.report.game.visiting_team_acronym }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from '../../utils/dateUtils.js'
+
+function traducirJornada(jornada) {
+  if (!jornada) return ''
+  return jornada
+    .replace('Matchday', 'J')
+    .replace('de Final', '')
+    .replace('Playoffs 1', 'CFI')
+    .replace('Playoffs 2', 'CFV')
+    .replace('Playoffs 3', 'SI')
+    .replace('Playoffs 4', 'SV')
+    .replace('Playoffs 5', 'FI')
+    .replace('Playoffs 6', 'FV')
+}
+
+// Aquí puedes agregar props si quieres que los nombres de equipos y jornada sean dinámicos
+const props = defineProps({
+  report: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>
+
+<style scoped>
+.prematch-bg {
+  width: 100%;
+  height: 222px;
+  /* height: 100vh; */
+  background: url('https://golstatsimages.blob.core.windows.net/reports-images/background-postmatch-template-01.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-shields {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.shield-left {
+  position: absolute;
+  left: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.09;
+}
+
+.shield-left img {
+  width: 170px;
+  object-fit: contain;
+}
+
+.shield-right {
+  position: absolute;
+  right: -80px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.09;
+}
+
+.shield-right img {
+  width: 170px;
+  object-fit: contain;
+}
+
+.header {
+  padding: 24px 32px;
+}
+
+.logo {
+  height: 40px;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Elimina el margin-top para centrar verticalmente */
+}
+
+.title {
+  font-size: 0.8rem;
+  color: #fff;
+  margin-top: -10px;
+  font-family: Poppins-Regular;
+  position: relative;
+  z-index: 2;
+}
+
+.highlight {
+  font-family: Poppins-Bold;
+  color: #fff;
+}
+
+.subtitle {
+  font-family: Poppins-Regular;
+  margin-top: -8px;
+  font-size: 1.1rem;
+  color: #e0e0e0;
+  position: relative;
+  z-index: 2;
+}
+
+.jornada {
+  font-family: Poppins-Medium;
+  color: #fff;
+  font-size: 0.4rem;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  opacity: 0.8;
+}
+
+.fecha {
+  font-family: Poppins-Regular;
+  color: #e0e0e0;
+  opacity: 0.8;
+  line-height: 2.2;
+  letter-spacing: 0.2px;
+  font-size: 0.4rem;
+}
+
+.teams-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  margin-top: 20px;
+  position: relative;
+  z-index: 2;
+}
+
+.team {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.team-visitor {
+  flex-direction: row-reverse;
+}
+
+.escudo-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+}
+
+.team-name {
+  font-size: 1rem;
+  font-family: Poppins-bold;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 2px;
+}
+</style>