carrusel y vista home
This commit is contained in:
casnet1
@@ -27,6 +27,9 @@ export default {
|
||||
.row {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.VueCarousel-wrapper{
|
||||
overflow:inherit !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="divMaster row ">
|
||||
<div
|
||||
id="carouselExampleControls"
|
||||
class="carousel slide col-12 mx-auto"
|
||||
data-ride="carousel"
|
||||
>
|
||||
<div class="carousel-inner">
|
||||
<div
|
||||
class="carousel-item"
|
||||
v-bind:key="img.id"
|
||||
v-for="(img, idx) in imgs"
|
||||
:class="{ active: idx == 0 }"
|
||||
>
|
||||
<img :src="img" class="d-block w-100 img-fluid" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="carousel-control-prev"
|
||||
href="#carouselExampleControls"
|
||||
role="button"
|
||||
data-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a
|
||||
class="carousel-control-next"
|
||||
href="#carouselExampleControls"
|
||||
role="button"
|
||||
data-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgs: [
|
||||
'https://www.acatlan.unam.mx/images/1410.jpg',
|
||||
'https://www.acatlan.unam.mx/images/1402.jpg',
|
||||
'https://www.acatlan.unam.mx/images/1421.jpg',
|
||||
'https://www.acatlan.unam.mx/images/1330.jpg'
|
||||
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.divMaster {
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
+2
-6
@@ -2,11 +2,8 @@ import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import Home from './view/Home.vue'
|
||||
<<<<<<< HEAD
|
||||
import PersonalData from './view/PersonalData.vue'
|
||||
=======
|
||||
import Cart from './view/Cart.vue'
|
||||
>>>>>>> origin
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@@ -20,15 +17,14 @@ const routes = [
|
||||
name: 'home'
|
||||
},
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
path: '/datosPersonales',
|
||||
component: PersonalData,
|
||||
name: 'personalData'
|
||||
=======
|
||||
},
|
||||
{
|
||||
path: '/cart',
|
||||
component: Cart,
|
||||
name: 'cart'
|
||||
>>>>>>> origin
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
+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