nosotras page

assets/css/main.css

@@ -283,4 +283,11 @@ h5 {
   var(--Background--bg-light, #F9F4F2);
   background-repeat: no-repeat;
   background-size: cover;
+}
+
+.bg-gradient-conic-green {
+  background: conic-gradient(from 107deg at -2.61% 53.75%, var(--Color-base--color-certifica-base, rgba(202, 240, 63, 0.10)) 53.653846979141235deg, var(--Color-base--color-consumo-base, rgba(242, 140, 140, 0.10)) 155.76923489570618deg, var(--Color-base--color-aula-base, rgba(92, 170, 204, 0.10)) 233.65383625030518deg, rgba(57, 182, 137, 0.10) 304.61538791656494deg), 
+  var(--Background--bg-light, #F9F4F2);
+  background-repeat: no-repeat;
+  background-size: cover;
 }

components/CardCompany.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="flex flex-col gap-4 rounded-3xl border-4 border-white min-h-64">
+    <div class="flex flex-col gap-4 p-8 items-center w-full">
+      <div v-if="image" class=" h-15 w-fit grayscale">
+        <img 
+          :src="`/img/${image.src}`"
+          :alt="image.alt"
+          class="w-full h-full object-cover"
+        />
+        <!-- <img v-else src="" alt="imagen-error"> -->
+        <!-- TODO: Add a fallback image -->
+      </div>
+      <div class="flex flex-col gap-4 items-center text-center">
+        <p class="text-center text-base" v-html="description"></p>
+          <NuxtLink v-if="link" :to="link.url">
+            <p class="text-button hover:text-button-hover">{{ link.label }}</p>
+          </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+        type: String,
+        default: ''
+    },
+    image: {
+        type: Object,
+        default: null,
+    },
+    link: {
+        type: String,
+        default: null
+    },
+  },
+  computed: {
+    langcode() {
+      return this.$store.getters.langcode;
+    },
+  },
+}
+</script>

components/HeroPages.vue

@@ -3,6 +3,7 @@
     :id="id"
     class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center overflow-hidden rounded-3xl"
     :class="{
+        'bg-gradient-conic-hero': bgColor === 'gradient',
         'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo',
         'bg-iguales-base bg-linear-to-t from-iguales-base to-iguales-extra-light': bgColor === 'iguales',
         'bg-aula-base bg-linear-to-t from-aula-base to-aula-extra-light': bgColor === 'aula',

components/SectionWithCards.vue

@@ -4,6 +4,7 @@
   class="flex flex-col gap-8  rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
   :class="{
     'bg-gradient-conic-cards': bgColor === 'gradient-conic',
+    'bg-gradient-conic-green': bgColor === 'gradient-conic-green',
     'bg-linear-to-t from-consumo-extra-light to-background-light': bgColor === 'consumo',
     'bg-linear-to-t from-iguales-extra-light to-background-light': bgColor === 'iguales',
     'bg-linear-to-t from-aula-extra-light to-background-light': bgColor === 'aula',
@@ -12,6 +13,7 @@
     'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
   }">
     <div 
+    class="mx-auto max-w-2xl"
     :class="{
       'flex flex-col justify-center items-center w-full': titlePosition === 'center',
       'flex flex-col items-start w-full': titlePosition === 'left',
@@ -45,6 +47,12 @@
           :title="item.title"
           :description="item.description"
         />
+        <CardCompany
+          v-if="cardsType === 'company'"
+          :description="item.description"
+          :image="item.image"
+          :link="item.link"
+        />
       </li>
     </ul>
     <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">

components/TextWithImage.vue

@@ -9,25 +9,37 @@
       class="flex justify-between"
       :class="{
         'flex-col lg:flex-row gap-4': position === 'left',
-        'flex-col lg:flex-row-reverse': position === 'right',
+        'flex-col lg:flex-row-reverse gap-4': position === 'right' && !imageCTA,
-        'items-center gap-12': image.display === 'circle',
+        'flex-col-reverse lg:flex-row-reverse gap-4': position === 'right' && imageCTA,
+        'items-center gap-12': image.display === 'circle'
       }">
 
       <div 
-        v-if="image"
+      :class="{
-        :class="{
+        'flex flex-col gap-4': imageCTA
-          'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
-          'h-fit w-full lg:w-auto': image.display === 'normal'
         }">
-        <img 
+        <div 
-          :src="`/img/${image.src}`"
+          v-if="image"
-          :alt="image.alt"
-          class="w-full h-full"
           :class="{
-            'object-cover': image.display === 'circle',
+            'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
-            'object-contain': image.display === 'normal'
+            'h-fit w-full lg:w-auto': image.display === 'normal'
-          }"
+          }">
-        />
+          <img 
+            :src="`/img/${image.src}`"
+            :alt="image.alt"
+            class="w-full h-full"
+            :class="{
+              'object-cover': image.display === 'circle',
+              'object-contain': image.display === 'normal'
+            }"
+          />
+        </div>
+        <div v-if="imageCTA" class="flex flex-col items-end">
+          <p v-if="imageCTA.description" class="text-lg mt-2">{{ imageCTA.description }}</p>
+          <NuxtLink v-if="imageCTA.button" :to="imageCTA.button.url">
+            <ButtonCTA size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
+          </NuxtLink>
+        </div>
       </div>
 
       <div 
@@ -42,16 +54,20 @@
             <p class="text-lg" v-html="paragraph"></p>
           </li>
         </ul>
-        <ul v-if="list" class="flex flex-col gap-4">
+        <div v-for="(list, index) in lists" :key="`list-${index}-${index}`" class="">
-          <li
+          <p v-if="list.description" class="text-lg mb-4">{{ list.description }}</p>
-            v-for="(item, index) in list" 
+          <ul v-if="list.items" class="flex flex-col gap-4">
-            :key="`item-list-${id}-${index}`"
+            <li
-            :class="{
+              v-for="(item, index) in list.items" 
-              'list-disc ml-6': hasBullets,
+              :key="`item-list-${id}-${index}`"
-            }">
+              :class="{
-            <p class="text-lg" v-html="item"></p>
+                'list-disc ml-6': hasBullets,
-          </li>
+              }">
-        </ul>
+              <p class="text-lg" v-html="item"></p>
+            </li>
+          </ul>
+        </div>
+        <p class="text-lg" v-html="finalParagraph"></p>
       </div>
     </div>
   </section>
@@ -72,10 +88,14 @@ export default {
       type: Array,
       default: () => []
     },
-    list: {
+    lists: {
       type: Array,
       default: () => []
     },
+    finalParagraph: {
+      type: String,
+      default: ''
+    },
     hasBullets: {
       type: Boolean,
       default: false
@@ -90,11 +110,11 @@ export default {
     },
     image: {
       type: Object,
-      default: () => ({
+      default: null
-        src: '',
+    },
-        alt: '',
+    imageCTA: {
-        display: ''
+      type: Object,
-      })
+      default: null
     }
   }
 }

data/es/certifica-t.json

@@ -84,14 +84,16 @@
     "id": "a-quien-va-dirigido-certifica-t",
     "props": {
       "title": "¿A quién va dirigido?",
-      "paragraphs": [
+      "lists": [
-        "Certifica-T está pensada para entidades de economía social que quieren visibilizar su compromiso con la sostenibilidad:"
+        {
-      ],
+          "description": "Certifica-T está pensada para entidades de economía social que quieren visibilizar su compromiso con la sostenibilidad:",
-      "list": [
+          "items": [
-        "<strong>Cooperativas, asociaciones y fundaciones</strong> que deseen revisar sus prácticas desde una perspectiva sostenible y avanzar en mejorar su compromiso.",
+            "<strong>Cooperativas, asociaciones y fundaciones</strong> que deseen revisar sus prácticas desde una perspectiva sostenible y avanzar en mejorar su compromiso.",
-        "<strong>Equipos técnicos y responsables de igualdad</strong> que necesitan una herramienta ágil para identificar qué certificados son adecuados para su proyecto y cómo alcanzarlos.",
+            "<strong>Equipos técnicos y responsables de igualdad</strong> que necesitan una herramienta ágil para identificar qué certificados son adecuados para su proyecto y cómo alcanzarlos.",
-        "<strong>Organizaciones</strong> que cumplen o deben cumplir normativa en materia de sostenibilidad y buscan información sobre cuáles son las mejores herramientas.",
+            "<strong>Organizaciones</strong> que cumplen o deben cumplir normativa en materia de sostenibilidad y buscan información sobre cuáles son las mejores herramientas.",
-        "<strong>Entidades con interés en formarse y mejorar</strong> a partir de propuestas concretas, ajustadas a su contexto y capacidades."
+            "<strong>Entidades con interés en formarse y mejorar</strong> a partir de propuestas concretas, ajustadas a su contexto y capacidades."
+          ]
+        }
       ],
       "position": "left",
       "bgColor": "light",

data/es/consumo-cuidado.json

@@ -84,10 +84,15 @@
       "paragraphs": [
         "Consumo Cuidado está pensado para quienes quieren transformar su forma de consumir y producir. Personas, entidades y redes que apuestan por la economía social como motor de cambio."
       ],
-      "list": [
+      "lists": [
-        "<strong>Personas consumidoras</strong> que buscan productos y servicios alineados con el cuidado del entorno y la comunidad.",
+        {
-        "<strong>Entidades de economía social</strong> que quieren visibilizar su proyecto y vender sin perder autonomía ni asumir intermediarios.",
+          "description": null,
-        "<strong>Administraciones y redes territoriales</strong> que promueven el comercio justo, la digitalización local y la cooperación entre iniciativas."
+          "items": [
+            "<strong>Personas consumidoras</strong> que buscan productos y servicios alineados con el cuidado del entorno y la comunidad.",
+            "<strong>Entidades de economía social</strong> que quieren visibilizar su proyecto y vender sin perder autonomía ni asumir intermediarios.",
+            "<strong>Administraciones y redes territoriales</strong> que promueven el comercio justo, la digitalización local y la cooperación entre iniciativas."
+          ]
+        }
       ],
       "position": "left",
       "bgColor": "light",

data/es/iguales.json

@@ -96,11 +96,16 @@
       "paragraphs": [
         "“Iguales” está pensada para entidades de economía social que quieren pasar del compromiso a la acción en materia de igualdad:"
       ],
-      "list": [
+      "lists": [
-        "<strong>Cooperativas, asociaciones y fundaciones</strong> que deseen revisar sus prácticas desde una perspectiva igualitaria.",
+        {
-        "<strong>Equipos técnicos y responsables de igualdad</strong> que necesitan una herramienta ágil para detectar puntos débiles y planificar mejoras.",
+          "description": null,
-        "<strong>Organizaciones que cumplen o deben cumplir normativa</strong> y buscan claridad sobre sus obligaciones reales y cómo abordarlas.",
+          "items": [
-        "<strong>Entidades con interés en formarse y mejorar</strong> a partir de propuestas concretas, ajustadas a su contexto y capacidades."
+            "<strong>Cooperativas, asociaciones y fundaciones</strong> que deseen revisar sus prácticas desde una perspectiva igualitaria.",
+            "<strong>Equipos técnicos y responsables de igualdad</strong> que necesitan una herramienta ágil para detectar puntos débiles y planificar mejoras.",
+            "<strong>Organizaciones que cumplen o deben cumplir normativa</strong> y buscan claridad sobre sus obligaciones reales y cómo abordarlas.",
+            "<strong>Entidades con interés en formarse y mejorar</strong> a partir de propuestas concretas, ajustadas a su contexto y capacidades."
+          ]
+        }
       ],
       "position": "left",
       "bgColor": "light",

data/es/nosotras.json

@@ -0,0 +1,142 @@
+[
+  {
+    "component": "HeroPages",
+    "props": {
+      "id": "hero-pages-nosotras",
+      "title": "Impulsamos el cambio desde lo colectivo",
+      "subtitle": "Detrás de kit-ECO.social hay personas, territorios y organizaciones que creemos en una economía social más sostenible, justa e interconectada.",
+      "bgColor": "gradient",
+      "bgImage": {
+        "src": "hero-nosotras-formas.png",
+        "alt": "Nosotras Imagenes Fondo"
+      },
+      "button": null
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "quienes-somos-nosotras",
+    "props": {
+      "title": "El proyecto",
+      "paragraphs": [
+        "<strong>kit-ECO.social es una iniciativa digital y territorial dirigida a las entidades de economía social que quieren avanzar en sostenibilidad, igualdad, certificación y cooperación.</strong></br>Está dirigido especialmente a cooperativas, asociaciones, redes locales, mujeres y jóvenes del medio rural que buscan herramientas para mejorar su impacto.",
+        "Surge como respuesta a una realidad: muchas organizaciones —especialmente en entornos rurales— carecen de recursos accesibles para digitalizarse, formarse o demostrar su impacto."
+       
+      ],
+      "lists": [
+        {
+          "description":  "Este proyecto pone a disposición de cooperativas, asociaciones, empresas sociales, redes locales y entidades sin ánimo de lucro una serie de herramientas prácticas y gratuitas para:",
+          "items": [
+            "<strong>Evaluar y mejorar su sostenibilidad e igualdad</strong>",
+            "<strong>Avanzar en procesos de certificación (ambiental y social)</strong>",
+            "<strong>Vender productos y servicios a través de un marketplace cooperativo</strong>",
+            "<strong>Acceder a formación online (MOOC)</strong>",
+            "<strong>Compartir buenas prácticas en un foro de intercooperación</strong>"
+          ]
+        },
+        {
+          "description": "El kit se despliega a través de:",
+          "items": [
+            "<strong>Una plataforma digital abierta</strong>",
+            "<strong>Un programa de 30 encuentros públicos en 15 municipios rurales</strong>",
+            "<strong>Una campaña de difusión nacional que conecta personas y territorios</strong>"
+          ]
+        }
+      ],
+      "finalParagraph": "En un momento en el que la economía social es clave para el futuro sostenible de nuestros territorios, kit-ECO.social nace como un recurso colectivo para crecer con consciencia, desde la colaboración y el cuidado.",
+      "hasBullets": true,
+      "position": "right",
+      "bgColor": "light",
+      "image": {
+        "src": "papeles-comerciales.png",
+        "alt": "Papeles comerciales sobre mesa",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "quienes-impulsamos-kit-eco-social",
+      "title": "¿Quiénes impulsamos kit-ECO.social?",
+      "description": "Este proyecto es fruto de la colaboración entre tres entidades con trayectorias complementarias.</br><strong>Juntas unimos tecnología, sostenibilidad y comunicación</strong> para acompañar a las entidades de economía social en su camino hacia la transformación. Lo hacemos desde el cooperativismo, el compromiso con el territorio y la inteligencia colectiva.",
+      "display": "col-3-transparent",
+      "bgColor": "gradient-conic-green",
+      "cardsType": "company",
+      "cards": [
+        {
+          "image": {
+            "src": "logo-enreda.png",
+            "alt": "Logo de Enreda"
+          },
+          "description": "Cooperativa tecnológica con más de 15 años creando soluciones digitales con impacto social. Desde Enreda coordinamos el desarrollo de la plataforma y sus herramientas.",
+          "link": {
+            "url": "https://enreda.coop",
+            "label": "Ir a la web"
+          }
+        },
+        {
+          "image": {
+            "src": "logo-ecored.png",
+            "alt": "Logo de Ecored"
+          },
+          "description": "Asociación comprometida con la sostenibilidad y la ecología aplicada a procesos sociales.</br>Diseñamos contenidos formativos y coordinamos los encuentros en el territorio.",
+          "link": {
+            "url": "https://ecored.org.do/",
+            "label": "Ir a la web"
+          }
+        },
+        {
+          "image": {
+            "src": "logo-nortes.png",
+            "alt": "Logo de Nortes"
+          },
+          "description": "Proyecto cultural y medio de comunicación con enfoque feminista y crítico.</br>Nos encargamos de la comunicación y el relato del proyecto.",
+          "link": {
+            "url": "https://www.nortes.me/",
+            "label": "Ir a la web"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "quienes-somos-nosotras",
+    "props": {
+      "title": "Desde lo digital hasta el territorio: encuentros públicos.",
+      "paragraphs": [
+        "<strong>kit-ECO.SOCIAL</strong> no se queda en la pantalla.</br>A lo largo del proyecto, <strong>organizamos 30 encuentros presenciales en 15 municipios rurales</strong> de cinco comunidades autónomas para compartir herramientas, formar a entidades y fortalecer la red de la economía social en el territorio.",
+        "Estos encuentros son <strong>espacios de aprendizaje, colaboración y visibilización</strong>, diseñados especialmente para <strong>cooperativas, asociaciones, mujeres, jóvenes</strong> y redes locales comprometidas con la sostenibilidad y la igualdad."
+      ],
+      "lists": [
+        {
+          "description": "Cada municipio acoge dos sesiones formativas de 4 horas. En ellas, se trabajan de forma práctica las herramientas del kit, como:",
+          "items": [
+            "<strong>Cómo avanzar hacia la certificación en sostenibilidad (Certifica-T)</strong>",
+            "<strong>Cómo participar en el marketplace Consumo Cuidado</strong>",
+            "<strong>Cómo aplicar los ODS con OpenODS</strong>",
+            "<strong>Cómo usar el autodiagnóstico de igualdad</strong>",
+            "<strong>Cómo intercooperar con otras entidades</strong>"
+          ]
+        }
+      ],
+      "finalParagraph": "Además, cerraremos el ciclo de encuentros con un gran evento estatal online, abierto a todas las entidades interesadas en conocer el kit y sumarse a la comunidad.",
+      "hasBullets": true,
+      "position": "right",
+      "bgColor": "light",
+      "image": {
+        "src": "spain-map.png",
+        "alt": "Mapa de España",
+        "display": "normal"
+      },
+      "imageCTA": {
+        "description": "¿Quieres participar o acoger un encuentro en tu municipio?",
+        "button": {
+          "label": "Contáctanos",
+          "url": ""
+        }
+      }
+    }
+  }
+]

data/es/ods.json

@@ -42,17 +42,21 @@
     "props": {
       "title": "¿Para qué sirve?",
       "paragraphs": [
-        "Esta herramienta te permite mostrar de forma clara y accesible lo que tu entidad ya está haciendo por un desarrollo más justo y sostenible.
Con una metodología común, puedes generar datos públicos, actualizables y con enfoque territorial.",
+        "Esta herramienta te permite mostrar de forma clara y accesible lo que tu entidad ya está haciendo por un desarrollo más justo y sostenible.
Con una metodología común, puedes generar datos públicos, actualizables y con enfoque territorial."
-        "Con esta herramienta puedes:"
       ],
-      "list": [
+      "lists": [
-        "<strong>Autoevaluar</strong> tu compromiso con los Objetivos de Desarrollo Sostenible.",
+        {
-        "<strong>Registrar y organizar</strong> tus acciones, planes y programas vinculados a los ODS.",
+          "description": "Con esta herramienta puedes:",
-        "<strong>Publicar un perfil abierto</strong> que muestra tu compromiso y evolución.",
+          "items": [
-        "<strong>Geolocalizar</strong> tus iniciativas y situarlas en un mapa colectivo.",
+            "<strong>Autoevaluar</strong> tu compromiso con los Objetivos de Desarrollo Sostenible.",
-        "<strong>Incorporar información flexible</strong>, desde acciones puntuales hasta planes plurianuales.",
+            "<strong>Registrar y organizar</strong> tus acciones, planes y programas vinculados a los ODS.",
-        "<strong>Aplicar una metodología compartida</strong>, validada por el <strong>PNUD</strong> y adaptada por <strong>COCETA</strong>.",
+            "<strong>Publicar un perfil abierto</strong> que muestra tu compromiso y evolución.",
-        "Contribuir a una red sectorial de <strong>conocimiento y transparencia.</strong>"
+            "<strong>Geolocalizar</strong> tus iniciativas y situarlas en un mapa colectivo.",
+            "<strong>Incorporar información flexible</strong>, desde acciones puntuales hasta planes plurianuales.",
+            "<strong>Aplicar una metodología compartida</strong>, validada por el <strong>PNUD</strong> y adaptada por <strong>COCETA</strong>.",
+            "Contribuir a una red sectorial de <strong>conocimiento y transparencia.</strong>"
+          ]
+        }
       ],
       "hasBullets": true,
       "position": "left",

layouts/default.vue

@@ -6,6 +6,11 @@
 
     <main class="min-h-dvh">
       <slot />
+      <div class="fixed bottom-0 right-0 z-50 p-2">
+        <ButtonCTA @click="changeLang" >
+          Cambiar Idioma
+        </ButtonCTA>
+      </div> 
     </main>
 
     <footer>
@@ -13,3 +18,21 @@
     </footer>
   </div>
 </template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters(['langcode']),
+  },
+  methods: {
+    ...mapActions(['setLangcode']),
+    changeLang() {
+      const newLang = this.langcode === 'es' ? 'cat' : 'es';
+      this.setLangcode(newLang);
+      this.$router.push({ path: `/${newLang}` });
+    }
+  }
+}
+</script>

pages/[langcode]/index.vue

@@ -6,16 +6,12 @@
         v-if="component" 
         v-bind="component.props" />
     </template>
-    <!-- <div class="fixed bottom-0 right-0 z-50 p-2">
+    
-      <ButtonCTA @click="changeLang" >
-        Cambiar Idioma
-      </ButtonCTA>
-    </div> -->
   </main>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapGetters } from 'vuex';
 import HeroHome from '~/components/HeroHome.vue';
 import WhatIs from '../../components/WhatIs.vue';
 import SectionWithCards from '../../components/SectionWithCards.vue';
@@ -54,14 +50,6 @@ export default {
         },
       ];
     }
-  },
+  }
-  // methods: {
-  //   ...mapActions(['setLangcode']),
-  //   changeLang() {
-  //     const newLang = this.langcode === 'es' ? 'cat' : 'es';
-  //     this.setLangcode(newLang);
-  //     this.$router.push({ path: `/${newLang}` });
-  //   }
-  // }
 }
 </script>

pages/[langcode]/nosotras.vue

@@ -1,16 +1,48 @@
 <template>
-  <div>
+  <main v-if="consumoComponents" class="min-h-screen relative mx-8">
-    <h1>Nosotras</h1>
+    <template v-for="(component, index) in consumoComponents" :key="`consumo-component-${component.component}-${index}`">
-    <p>Contenido sobre nosotras.</p>
+      <component 
-  </div>
+        :is="component.component" 
+        v-if="component" 
+        v-bind="component.props" />
+    </template>
+  </main>
 </template>
 
 <script>
-  export default {
+import HeroPages from '~/components/HeroPages.vue';
-    
+import TextWithImage from '../../components/TextWithImage.vue';
+import SectionWithCards from '../../components/SectionWithCards.vue';
+import TextWithIconAndButtons from '../../components/TextWithIconAndButtons.vue';
+
+export default {
+  components: {
+    HeroPages,
+    TextWithImage,
+    TextWithIconAndButtons,
+    SectionWithCards
+  },
+  data() {
+    return {
+      consumoComponents: []
+    };
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/nosotras.json`);
+      this.consumoComponents = res.default;
+    } catch (err) {
+      console.error('Error al cargar contenido:', err);
+      this.consumoComponents = [
+        {
+          component: 'ErrorComponent',
+          props: {
+            message: 'Contenido no disponible',
+          },
+        },
+      ];
+    }
   }
-</script>
+}
-
+</script>
-<style lang="scss" scoped>
-
-</style>