From 598c6327f130d43df9784a608b6b0c13e235fc5e Mon Sep 17 00:00:00 2001
From: Andres2908 <saavedratrejo24@gmail.com>
Date: Thu, 17 Mar 2022 15:56:09 -0600
Subject: [PATCH] Estilos

---
 nuxt.config.js           |   2 +-
 pages/registro/index.vue | 347 ++++++++++++++++++++++++---------------
 2 files changed, 218 insertions(+), 131 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index 6808126..dd18c48 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,6 +1,6 @@
 export default {
   ssr: false,
-  server: { port: 3131 },
+  server: { port: 3136 },
   target: 'static',
   head: {
     title: 'Inscripciones CEDETEC',
diff --git a/pages/registro/index.vue b/pages/registro/index.vue
index a0319a5..3475c7f 100644
--- a/pages/registro/index.vue
+++ b/pages/registro/index.vue
@@ -1,156 +1,239 @@
 <template>
   <div class="container px-2">
-    <p class="title is-2 has-text-centered">
-      Servicios que brinda el Departamento de Servicios de Cómputo (DSC)
-    </p>
+    <section>
+      <p class="title is-2 has-text-centered">
+        Servicios que brinda el Departamento de Servicios de Cómputo (DSC)
+      </p>
 
-    <p class="subtitle is-2 pt-4">
-      <b>Los servicios que ofrece CeDeTec son</b>
-    </p>
-    <ul>
-      <li class="pl-3">a) Préstamo de equipo de cómputo</li>
-      <li class="pl-3">b) Préstamo de mesas para dispositivos móviles</li>
-      <li class="pl-3">c) Impresión</li>
-      <li class="pl-3">d) Ploteo</li>
-      <li class="pl-3">e) Escaneo</li>
-    </ul>
+      <p class="subtitle is-2 pt-4">
+        <b>Los servicios que ofrece CeDeTec son</b>
+      </p>
+      <ul class="pb-5">
+        <li class="pl-3">a) Préstamo de equipo de cómputo</li>
+        <li class="pl-3">b) Préstamo de mesas para dispositivos móviles</li>
+        <li class="pl-3">c) Impresión</li>
+        <li class="pl-3">d) Ploteo</li>
+        <li class="pl-3">e) Escaneo</li>
+      </ul>
 
-    <p class="pt-4">
-      A continuación te indicaremos detalles de cada uno de ellos
-    </p>
-
-    <p class="subtitle is-2">
-      Servicios que requieren inscripción y confirmación
-    </p>
-
-    <ul>
-      <li class="pl-3">
-        1. <b>Préstamo de equipos de cómputo:</b> Con Sistemas Operativos
-        Windows, MacOS y Linux Más software sugerido por la licenciatura
-      </li>
-
-      <li class="pl-3">
-        2. <b>Mesas para trabajar con dispositivos móviles:</b> Los dispositivos
-        deberán estar configurados a la red de PCPUMA
-      </li>
-    </ul>
-
-    <p class="pt-5"><b>Estos servicios es necesario realizar dos pasos:</b></p>
-
-    <p class="pt-5"><b>Paso 1: Registro</b></p>
-
-    <p>
-      Solo podran ingresar alumnos vigentes de licenciatura al sitio
-      <a href="https://inscripcion-cedetec.acatlan.unam.mx/">
-        https://inscripcion-cedetec.acatlan.unam.mx/</a
+      <b-collapse
+        class="card"
+        animation="slide"
+        :open="isOpen == 0"
+        @open="isOpen = index1"
+        :aria-id="'contentIdForA11y5-' + index1"
       >
-      con su numero de cuenta y NIP de escolares para:
-    </p>
+        <template #trigger="props">
+          <div
+            class="card-header"
+            role="button"
+            :aria-controls="'contentIdForA11y5-' + index1"
+            :aria-expanded="props.open"
+          >
+            <p class="card-header-title">
+              Servicios que requieren inscripción y confirmación
+            </p>
+            <a class="card-header-icon">
+              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
+            </a>
+          </div>
+        </template>
+        <div class="card-content">
+          <div class="content">
+            <ul>
+              <li class="pl-3">
+                1. <b>Préstamo de equipos de cómputo:</b> Con Sistemas
+                Operativos Windows, MacOS y Linux Más software sugerido por la
+                licenciatura
+              </li>
 
-    <ul>
-      <li class="pl-3">
-        a) Elegir área (PCPNET, Macintosh o Linux) según la carrera y el
-        semestre
-      </li>
-      <li class="pl-3">
-        b) Agregar datos (monto, fecha, número de ticket de la aportación
-        voluntaria del ticket que recibiste en cajas.
-      </li>
-    </ul>
+              <li class="pl-3">
+                2. <b>Mesas para trabajar con dispositivos móviles:</b> Los
+                dispositivos deberán estar configurados a la red de PCPUMA
+              </li>
+            </ul>
 
-    <p class="pt-5"><b>Paso 2 Confirmación</b></p>
+            <p class="pt-5">
+              <b>Estos servicios es necesario realizar dos pasos:</b>
+            </p>
 
-    <p>
-      Es indispensable ingresar al sitio
-      <a href=" https://kalinga.acatlan.unam.mx/cedetec/" target="_blanc">
-        https://kalinga.acatlan.unam.mx/cedetec/
-      </a>
-      para conocer:
-    </p>
+            <p class="pt-5"><b>Paso 1: Registro</b></p>
 
-    <ul>
-      <li class="pl-3">a) La forma de usar los servicios</li>
-      <li class="pl-3">b) Lineamientos y sanciones</li>
-    </ul>
+            <p>
+              Solo podran ingresar alumnos vigentes de licenciatura al sitio
+              <a href="https://inscripcion-cedetec.acatlan.unam.mx/">
+                https://inscripcion-cedetec.acatlan.unam.mx/</a
+              >
+              con su numero de cuenta y NIP de escolares para:
+            </p>
 
-    <p class="pt-5">
-      Después de haber visto los videos y leído los lineamientos y sanciones,
-      tendrás que aceptar que has leído y entendido los puntos anteriores al
-      ingresar tu número de cuenta y correo.
-    </p>
+            <ul>
+              <li class="pl-3">
+                a) Elegir área (PCPNET, Macintosh o Linux) según la carrera y el
+                semestre
+              </li>
+              <li class="pl-3">
+                b) Agregar datos (monto, fecha, número de ticket de la
+                aportación voluntaria del ticket que recibiste en cajas.
+              </li>
+            </ul>
 
-    <p class="pt-5"><b>Notas:</b></p>
+            <p class="pt-5"><b>Paso 2 Confirmación</b></p>
 
-    <ul class="pt-5">
-      <li class="pl-3">a) Cupo limitado</li>
-      <li class="pl-3">
-        b) El aforo dependerá del color del semáforo de riesgo epidémico.
-      </li>
-      <li class="pl-3">
-        c) Solo podrás hacer uso de los servicios si realizas la confirmación
-      </li>
-      <li class="pl-3">
-        d) La inscripción te habilita 60 hrs. para ambos servicios, que podrás
-        hacer uso de lunes a viernes en el horario de 9:30 a 19:45 En caso de
-        terminarse las horas asignadas, podrás renovarse realizando una
-        aportación voluntaria e ingresar al sitio:
-        <a href="https://inscripcion-cedetec.acatlan.unam.mx"
-          >https://inscripcion-cedetec.acatlan.unam.mx</a
-        >
-      </li>
-    </ul>
+            <p>
+              Es indispensable ingresar al sitio
+              <a
+                href=" https://kalinga.acatlan.unam.mx/cedetec/"
+                target="_blanc"
+              >
+                https://kalinga.acatlan.unam.mx/cedetec/
+              </a>
+              para conocer:
+            </p>
 
-    <p class="subtitle is-2 pt-5">Ingreso al CeDeTec:</p>
+            <ul>
+              <li class="pl-3">a) La forma de usar los servicios</li>
+              <li class="pl-3">b) Lineamientos y sanciones</li>
+            </ul>
 
-    <ul>
-      <li class="pl-3">
-        1. Revisar la <b>disponibilidad</b> de equipos de cómputo y mesas para
-        dispositivos, <b>en la pantalla ubicada en la entrada principal.</b> Es
-        importante este punto para evitar aglomeraciones y respetar el aforo.
-      </li>
+            <p class="pt-5">
+              Después de haber visto los videos y leído los lineamientos y
+              sanciones, tendrás que aceptar que has leído y entendido los
+              puntos anteriores al ingresar tu número de cuenta y correo.
+            </p>
 
-      <li class="pl-3">
-        2. Dirigirse a los equipos de asignación de tiempo para hacer la
-        solicitud de equipo o mesa para dispositivos móviles.
-      </li>
-    </ul>
+            <p class="pt-5"><b>Notas:</b></p>
 
-    <p class="subtitle is-2 pt-5">Servicios que NO requieren Inscripción</p>
-    <p><b>Observaciones</b></p>
+            <ul class="pt-5">
+              <li class="pl-3">a) Cupo limitado</li>
+              <li class="pl-3">
+                b) El aforo dependerá del color del semáforo de riesgo
+                epidémico.
+              </li>
+              <li class="pl-3">
+                c) Solo podrás hacer uso de los servicios si realizas la
+                confirmación
+              </li>
+              <li class="pl-3">
+                d) La inscripción te habilita 60 hrs. para ambos servicios, que
+                podrás hacer uso de lunes a viernes en el horario de 9:30 a
+                19:45 En caso de terminarse las horas asignadas, podrás
+                renovarse realizando una aportación voluntaria e ingresar al
+                sitio:
+                <a href="https://inscripcion-cedetec.acatlan.unam.mx"
+                  >https://inscripcion-cedetec.acatlan.unam.mx</a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </b-collapse>
 
-    <ul>
-      <li class="pl-3">
-        a) Los servicios de impresión, escaneo y ploteo
-        <b>requieren de un pago que se realiza en cajas</b> (planta baja
-        edificio A4).
-      </li>
-      <li class="pl-3">
-        b) Al realizar el pago en cajas indicar pago a CEDETEC y monto
-      </li>
-      <li class="pl-3">c) Solo se permiten ticket cuyo concepto se CEDETEC</li>
-      <li class="pl-3">
-        d) El ticket debe ser del mes en que se realiza la impresión
-      </li>
-    </ul>
+      <b-collapse
+        class="card"
+        animation="slide"
+        :open="isOpen == 1"
+        @open="isOpen = index1"
+        :aria-id="'contentIdForA11y5-' + index1"
+      >
+        <template #trigger="props">
+          <div
+            class="card-header"
+            role="button"
+            :aria-controls="'contentIdForA11y5-' + index1"
+            :aria-expanded="props.open"
+          >
+            <p class="card-header-title">Ingreso al CeDeTec:</p>
+            <a class="card-header-icon">
+              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
+            </a>
+          </div>
+        </template>
+        <div class="card-content">
+          <div class="content">
+            <p><b>Observaciones</b></p>
 
-    <p class="subtitle is-2 pt-5">Impresión</p>
-    <p>De acuerdo al tamaño y color se tienen los siguientes costos</p>
+            <ul>
+              <li class="pl-3">
+                1. Revisar la <b>disponibilidad</b> de equipos de cómputo y
+                mesas para dispositivos,
+                <b>en la pantalla ubicada en la entrada principal.</b> Es
+                importante este punto para evitar aglomeraciones y respetar el
+                aforo.
+              </li>
 
-    <Tabla :data="dataImpresion" />
+              <li class="pl-3">
+                2. Dirigirse a los equipos de asignación de tiempo para hacer la
+                solicitud de equipo o mesa para dispositivos móviles.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </b-collapse>
 
-    <p class="subtitle is-2">Ploteo</p>
-    <p>De acuerdo al tamaño y color se tienen los siguientes costos</p>
+      <b-collapse
+        class="card"
+        animation="slide"
+        :open="isOpen == 1"
+        @open="isOpen = index1"
+        :aria-id="'contentIdForA11y5-' + index1"
+      >
+        <template #trigger="props">
+          <div
+            class="card-header"
+            role="button"
+            :aria-controls="'contentIdForA11y5-' + index1"
+            :aria-expanded="props.open"
+          >
+            <p class="card-header-title">
+              Servicios que NO requieren inscripción y confirmación
+            </p>
+            <a class="card-header-icon">
+              <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"> </b-icon>
+            </a>
+          </div>
+        </template>
+        <div class="card-content">
+          <div class="content">
+            <ul>
+              <li class="pl-3">
+                a) Los servicios de impresión, escaneo y ploteo
+                <b>requieren de un pago que se realiza en cajas</b> (planta baja
+                edificio A4).
+              </li>
+              <li class="pl-3">
+                b) Al realizar el pago en cajas indicar pago a CEDETEC y monto
+              </li>
+              <li class="pl-3">
+                c) Solo se permiten ticket cuyo concepto se CEDETEC
+              </li>
+              <li class="pl-3">
+                d) El ticket debe ser del mes en que se realiza la impresión
+              </li>
+            </ul>
 
-    <Tabla :data="dataPloteo" />
+            <p class="subtitle is-2 pt-5">Impresión</p>
+            <p>De acuerdo al tamaño y color se tienen los siguientes costos</p>
 
-    <p class="subtitle is-2">Escaneo:</p>
-    <p>Precio por tamaño:</p>
+            <Tabla :data="dataImpresion" />
 
-    <ul class="pb-5">
-      <li class="pl-3">a) Carta y oficio <b>$ 1.00</b></li>
-      <li class="pl-3">b) Doble Carta <b>$ 2.00</b></li>
-      <li class="pl-3">c) 60 x 45 cms. ó 90 x 60 cms. <b>$ 5.00</b></li>
-    </ul>
+            <p class="subtitle is-2">Ploteo</p>
+            <p>De acuerdo al tamaño y color se tienen los siguientes costos</p>
+
+            <Tabla :data="dataPloteo" />
+
+            <p class="subtitle is-2">Escaneo:</p>
+            <p>Precio por tamaño:</p>
+
+            <ul class="pb-5">
+              <li class="pl-3">a) Carta y oficio <b>$ 1.00</b></li>
+              <li class="pl-3">b) Doble Carta <b>$ 2.00</b></li>
+              <li class="pl-3">c) 60 x 45 cms. ó 90 x 60 cms. <b>$ 5.00</b></li>
+            </ul>
+          </div>
+        </div>
+      </b-collapse>
+    </section>
 
     <p class="subtitle is-2 has-text-centered">
       ¿Desear continuar con la inscripción ?
@@ -170,6 +253,10 @@ export default {
   },
   data() {
     return {
+      isOpen: 0,
+      index1: 0,
+      index2: 1,
+      index3: 2,
       dataImpresion: [
         {
           color: 'Negro',