SearchResultsPage agregado #4
Generated
+76
@@ -10968,6 +10968,36 @@
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<<<<<<< HEAD
|
||||
"version": "npm:vue-loader@16.0.0-beta.7",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
|
||||
"integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"@types/mini-css-extract-plugin": "^0.9.1",
|
||||
"chalk": "^3.0.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
"merge-source-map": "^1.1.0",
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
|
||||
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"@types/color-name": "^1.1.1",
|
||||
=======
|
||||
>>>>>>> origin
|
||||
=======
|
||||
>>>>>>> origin
|
||||
"version": "npm:vue-loader@16.0.0-beta.8",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
|
||||
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
|
||||
@@ -10986,13 +11016,38 @@
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> origin
|
||||
>>>>>>> origin
|
||||
=======
|
||||
>>>>>>> origin
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
=======
|
||||
<<<<<<< HEAD
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
|
||||
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
|
||||
=======
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
>>>>>>> origin
|
||||
>>>>>>> origin
|
||||
=======
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
>>>>>>> origin
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@@ -11024,6 +11079,20 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
<<<<<<< HEAD
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
=======
|
||||
>>>>>>> origin
|
||||
=======
|
||||
>>>>>>> origin
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
|
||||
@@ -11035,6 +11104,13 @@
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> origin
|
||||
>>>>>>> origin
|
||||
=======
|
||||
>>>>>>> origin
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="container my-5">
|
||||
<h4><b>Resultados para "{{productResult[0].searchText}}"</b></h4>
|
||||
<p>Hay {{productResult[0].numberFound}} productos</p>
|
||||
<div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
|
||||
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
|
||||
<img v-bind:src="productResult[0].img" class="card-img-top" style="height:250px" alt="...">
|
||||
<div class="card-body text-center" maxlength="5">
|
||||
<p class="card-text">{{productResult[0].description}}</p>
|
||||
<span><b>${{productResult[0].price}}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
|
||||
<img v-bind:src="productResult[1].img" class="card-img-top" style="height:250px" alt="...">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">{{productResult[1].description}}</p>
|
||||
<span><b>${{productResult[1].price}}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
|
||||
<img v-bind:src="productResult[2].img" class="card-img-top" style="height:250px" alt="...">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">{{productResult[2].description}}</p>
|
||||
<span><b>${{productResult[2].price}}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p>Mostrando {{productResult[0].numberFound}} de {{productResult[0].totalBookCategory}} artículo(s)</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
productResult: [
|
||||
{
|
||||
searchText: "Lorem ipsum",
|
||||
numberFound: 3,
|
||||
description: "Some quick example text to build on the card title and...",
|
||||
price: 180,
|
||||
totalBookCategory: 28,
|
||||
img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg'
|
||||
},
|
||||
{
|
||||
searchText: "Lorem ipsum",
|
||||
numberFound: 3,
|
||||
description: "2 Some quick example text to build on the card title and...",
|
||||
price: 190,
|
||||
totalBookCategory: 28,
|
||||
img: 'https://m.media-amazon.com/images/I/51HdyT9COEL.jpg'
|
||||
},
|
||||
{
|
||||
searchText: "Lorem ipsum",
|
||||
numberFound: 3,
|
||||
description: "3 Some quick example text to build on the card title and...",
|
||||
price: 200,
|
||||
totalBookCategory: 28,
|
||||
img: 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Lenin_book_1902.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.g-card-sty {
|
||||
-webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
|
||||
box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
|
||||
}
|
||||
p {
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
+6
-5
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<div class="container my-5">
|
||||
<h1 class="text-center">Home</h1>
|
||||
</div>
|
||||
|
||||
<SearchResultsPage></SearchResultsPage>
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -11,13 +11,14 @@
|
||||
<script>
|
||||
|
||||
import Header from '../components/Header'
|
||||
import SearchResultsPage from '../components/SearchResultsPage'
|
||||
import Footer from '../components/Footer'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Footer,
|
||||
|
||||
SearchResultsPage,
|
||||
Footer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user