carrusel y vista home
This commit is contained in:
casnet1
+157
-8
@@ -1,22 +1,171 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<div class="container my-5">
|
||||
<h1 class="text-center">Home</h1>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
<div class="body">
|
||||
<Header></Header>
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-12 col-md-10 col-lg-10 col-xl-10 mx-auto">
|
||||
<CarruselImg />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- lo mas vendido -->
|
||||
<div class="row ">
|
||||
<div class="col-12 smx-auto">
|
||||
<div class="my-5">
|
||||
<h5 class="text-center font-weight-bold">Lo más vendido</h5>
|
||||
<carousel
|
||||
:autoplay="true"
|
||||
:perPage=2
|
||||
:perPageCustom="[[480, 3],[900, 4]]"
|
||||
:resistanceCoef=20
|
||||
:autoplayHoverPause=true
|
||||
:minSwipeDistance=200
|
||||
>
|
||||
<slide class="carousel-items card mx-2 shadow"
|
||||
v-bind:key="item.id"
|
||||
v-for="(item, idx) in items"
|
||||
:class="{ active: idx == 0 }">
|
||||
|
||||
<img :src="item.img" class="card-img-top" alt="img" />
|
||||
<div class="card-body">
|
||||
<h5 class="text-center"> <b >${{item.precio}}</b></h5>
|
||||
<p class="card-text overflow-clip">{{item.descripcion}}</p>
|
||||
</div>
|
||||
|
||||
</slide>
|
||||
<slide class="carousel-items card mx-2 shadow"></slide>
|
||||
</carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- lo mas reciente -->
|
||||
<div class="row ">
|
||||
<div class="col-12 smx-auto">
|
||||
<div class="my-5">
|
||||
<h5 class="text-center font-weight-bold">Lo más reciente</h5>
|
||||
<carousel
|
||||
:autoplay="true"
|
||||
:perPage=2
|
||||
:perPageCustom="[[480, 3],[900, 4]]"
|
||||
:resistanceCoef=20
|
||||
:autoplayHoverPause=true
|
||||
:minSwipeDistance=200
|
||||
>
|
||||
<slide class="carousel-items card mx-2 shadow"
|
||||
v-bind:key="item.id"
|
||||
v-for="(item, idx) in items"
|
||||
:class="{ active: idx == 0 }">
|
||||
|
||||
<img :src="item.img" class="card-img-top" alt="img" />
|
||||
<div class="card-body">
|
||||
<h5 class="text-center"> <b >${{item.precio}}</b></h5>
|
||||
<p class="card-text overflow-clip">{{item.descripcion}}</p>
|
||||
</div>
|
||||
|
||||
</slide>
|
||||
<slide class="carousel-items card mx-2 shadow"></slide>
|
||||
</carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '../components/Header'
|
||||
import Footer from '../components/Footer'
|
||||
|
||||
import { Carousel, Slide } from 'vue-carousel'
|
||||
import CarruselImg from '../components/Carrousel'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
Footer,
|
||||
Carousel,
|
||||
CarruselImg,
|
||||
|
||||
Slide
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
items:[
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/361-home_default/las-pasiones-en-la-prensa-mexicana-siglos-xix-xxi.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/362-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-1-livello.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/363-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/364-home_default/herramientas-tic-guia-de-inicio.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/365-home_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
} ,
|
||||
{
|
||||
img:'https://tienda.acatlan.unam.mx/366-home_default/espacio-semico-ambiental.jpg',
|
||||
precio:199.00,
|
||||
descripcion:'esta es la descripcion del articulo'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.overflow-clip {
|
||||
white-space: nowrap;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.VueCarousel-dot:active{
|
||||
border: none;
|
||||
|
||||
}
|
||||
.body{
|
||||
/* background-color: #E5E5E5; */
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
.VueCarousel-wrapper{
|
||||
overflow-x:inherit ;
|
||||
overflow-y:inherit ;
|
||||
}
|
||||
.shadow{
|
||||
-webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
|
||||
box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user