PortaFront/src/view/puntos.vue

<template>
  <div>
    <Header></Header>
    <Nav></Nav>
    <Nav2 />

    <div>
      <div class="row">
        <div class="col-10 offset-1 mb-5">
          <h1 class="my-4">Puntos de Venta</h1>

          <p class="mb-4">
            La venta y difusión de las publicaciones de Ediciones Acatlán se
            llevan a cabo a partir de cuatro maneras. En caso de que desee
            adquirir alguna de las publicaciones emanadas de esta entidad
            multidisciplinaria, podría hacer a través de los puntos que se
            enlistan continuación:
          </p>
        </div>
      </div>

      <Title title="Compra presencial" />
      <div class=" row marcos">
        <div class="col-12 offset-0 mb-5 d-flex">
          <div
            class="col-12 offset-0 d-flex flex-wrap justify-content-center align-items-center px-0"
          >
            <Enlace
              class="enlaces w-auto my-3"
              v-for="link in Links"
              :key="link.id"
              v-show="link.mode == 'presencial'"
              :linkW="link.linkW"
              :linkD="link.linkD"
              :img="link.img"
              :text="link.text"
              :title="link.title"
            />
          </div>
        </div>
      </div>

      <Title title="Compra en Linea" />
      <div class=" row marcos">
        <div class="col-12 offset-0 mb-5 d-flex">
          <div
            class="col-12 offset-0 d-flex flex-wrap justify-content-center align-items-center px-0"
          >
            <Enlace
              class="enlaces w-auto my-3"
              v-for="link in Links"
              :key="link.id"
              v-show="link.mode == 'linea'"
              :linkW="link.linkW"
              :linkD="link.linkD"
              :img="link.img"
              :text="link.text"
              :title="link.title"
            />
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./../components/header.vue";
import Nav from "./../components/nav.vue";
import Nav2 from "./../components/nav2.vue";
import Footer from "./../components/footer.vue";
import Enlace from "./../components/enlace.vue";
import Title from "../components/titulo.vue";

export default {
  components: {
    Header,
    Nav,
    Nav2,
    Footer,
    Enlace,
    Title
  },
  data() {
    return {
      Links: [
        {
          id: 0,
          title: "Librería Universitaria",
          text:
            "Ubicada en las instalaciones de la FES Acatlán, para la adquisición de publicaciones impresas, tanto de nuestro sello como de otras editoriales.",
          img: "assets/puntos/LIBRERÍA-ACATLÁN.png",
          linkW: "",
          linkD: "",
          mode: "presencial"
        },
        {
          id: 1,
          title: "Tienda Virtual Acatlán",
          text:
            "Plataforma que soporta ventas en línea (obras impresas), de reciente habilitación.",
          img: "assets/puntos/logotienda.png",
          linkW: "https://tienda.acatlan.unam.mx/",
          linkD: "",
          mode: "linea"
        },
        {
          id: 2,
          title: "Librería Ambulante",
          text:
            "Extensión de la Librería Universitaria que, de manera presencial, acude a los eventos institucionales con publicaciones de temas afines a éstos.",
          img: "assets/puntos/LIBRERÍA-ACATLÁN-ambulante.png",
          linkW: "",
          linkD: "",
          mode: "presencial"
        },
        {
          id: 3,
          title: "Libros UNAM",
          text:
            "Plataforma en línea de la Universidad Nacional Autónoma de México, mediante la cual se pueden adquirir todas las publicaciones (impresas y electrónicas) de todas las dependencias editoras.",
          img: "assets/puntos/libros-unam.png",
          linkW: "http://www.libros.unam.mx/",
          linkD: "",
          mode: "linea"
        }
      ]
    };
  }
};
</script>
<style scoped>
.lugares li {
  margin: 1rem 0;
}
.marcos div p {
  text-align: left;
}
.marcos div a {
  text-decoration: none;

  text-align: left;
  margin: 0.5rem 0;
}
.marcos div {
  display: flex;
  flex-direction: column;
}
</style>