Cambio a Vue Cli
Fernando
parent
ab5793e322
commit
8681fd255b
|
|
@ -0,0 +1,21 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
# ihc-router
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Run your tests
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "ihc-router",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.5",
|
||||
"@vue/cli-service": "^3.0.5",
|
||||
"node-sass": "^4.9.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"vue-template-compiler": "^2.5.17"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>L'Assiete</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>Ups. La página de L'Assiete no se puede mostrar si tienes el JavaScript desactivado :c <br>
|
||||
Actívalo y recarga la página.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-min></header-min>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
|
||||
<div class="row contenido">
|
||||
<div class="col-5">
|
||||
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||||
alt="Plato Francés"/>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="descripcionComida">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-7 center">
|
||||
<div class="descripcionComida">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||||
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||||
gravida
|
||||
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||||
sagittis.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||||
alt="Plato Francés" class="image">
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
</section>
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderMin from './headerMin'
|
||||
import NavBar from './navBar'
|
||||
import MiFooter from './mi-footer'
|
||||
|
||||
export default {
|
||||
name: 'Inicio',
|
||||
components: {
|
||||
'header-min': HeaderMin,
|
||||
'nav-bar': NavBar,
|
||||
'mi-footer': MiFooter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<header id="header">
|
||||
<div class="contenedor">
|
||||
<div id="tituloP" class="center">
|
||||
<router-link to="/"><h1 class="titulo--link">L'Assiette</h1></router-link>
|
||||
<div id="tituloP--descripcion">
|
||||
Descubre un nuevo sabor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||
<a href="" id="botonRegistro" class="boton">
|
||||
Registrarse
|
||||
</a>
|
||||
<a href="" id="botonInicioSesion" class="boton">
|
||||
Iniciar Sesion
|
||||
</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
|
||||
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderMin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<header id="header">
|
||||
<div class="contenedor">
|
||||
<div id="tituloP" class="center tituloP--mini">
|
||||
<router-link to="/" class="titulo--link">L'Assiette</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderMini'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<footer id="footer">
|
||||
<div class="container mi-footer transparent">
|
||||
Cocina Francesa.<br/>
|
||||
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
|
||||
Con lo último en tecnología: Vue.js, BEM, Sass, TypeScript, y nodejs.<br>
|
||||
<br/>
|
||||
Desarrollado por Fernando Araoz, 20173373.
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MiFooter'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<nav id="navBar" class="mySeccion" data-collapsed="true">
|
||||
<ul class="linksNavBar">
|
||||
<li><router-link to="/">Inicio</router-link></li>
|
||||
<li><router-link to="/platos/">Platos</router-link></li>
|
||||
<li><router-link to="/usuarios/mi-cuenta">Mi cuenta</router-link></li>
|
||||
<li><router-link to="/carrito/">Carrito</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavBar'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
require('@/materialize/css/materialize.min.css');
|
||||
require('@/sass/base.sass');
|
||||
require('@/material-icons/material-icons.css');
|
||||
require('@/materialize/js/materialize.min.js');
|
||||
|
||||
(() => { window.carritoUsuario = [] })();
|
||||
|
||||
new Vue({
|
||||
data: {
|
||||
carritoUsuario: []
|
||||
},
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,36 @@
|
|||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(MaterialIcons-Regular.woff) format('woff'),
|
||||
url(MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Home from './views/Home.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/platos/',
|
||||
name: 'Platos',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ './views/Platos.vue')
|
||||
},
|
||||
{
|
||||
path: '/carrito/',
|
||||
name: 'Carrito',
|
||||
component: () => import('./views/carrito.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
@ -0,0 +1,395 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
|
||||
|
||||
$fuenteTitulos: 'Muli'
|
||||
$fuentePrincipal: 'Open Sans'
|
||||
|
||||
$colorPrincipalOscuro: #3d3d7c
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
html, body
|
||||
margin: 0
|
||||
padding: 0
|
||||
background-color: #F5F5F5
|
||||
font:
|
||||
family: $fuentePrincipal, sans-serif
|
||||
size: large
|
||||
|
||||
header
|
||||
background-color: #44A
|
||||
box-shadow: 0 5px 5px #999999
|
||||
|
||||
nav
|
||||
background-color: #3d3d7c
|
||||
color: white
|
||||
|
||||
section
|
||||
overflow: hidden
|
||||
transition: height 150ms ease-out
|
||||
height: auto
|
||||
|
||||
footer
|
||||
background-color: #333
|
||||
color: #EEE
|
||||
box-shadow: inset 0 5px 5px #999999
|
||||
padding: 40px
|
||||
|
||||
.container
|
||||
background-color: white
|
||||
margin-top: 10px
|
||||
margin-bottom: 10px
|
||||
padding: 10px
|
||||
|
||||
#tituloP
|
||||
padding: 30px
|
||||
color: white
|
||||
font:
|
||||
size: 50px
|
||||
family: $fuenteTitulos
|
||||
|
||||
#tituloP--descripcion
|
||||
padding: 10px
|
||||
font:
|
||||
size: large
|
||||
family: $fuentePrincipal
|
||||
|
||||
.tituloP--mini
|
||||
padding: 10px !important
|
||||
font:
|
||||
size: 40px !important
|
||||
|
||||
.titulo--link
|
||||
color: white
|
||||
text-decoration: none
|
||||
font-size: 50px
|
||||
margin: 0
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
.boton
|
||||
display: inline-block
|
||||
margin: 20px
|
||||
border-radius: 3px
|
||||
box-shadow: 1px 1px 3px #090909
|
||||
padding: 10px 30px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
.mySeccion
|
||||
overflow: hidden
|
||||
transition: height 150ms ease-out
|
||||
height: auto
|
||||
|
||||
#botonRegistro
|
||||
background-color: green
|
||||
color: white
|
||||
font-size: large
|
||||
transition: transform 200ms, box-shadow 200ms
|
||||
|
||||
#botonRegistro:hover
|
||||
transform: translate(-1px, -1px)
|
||||
box-shadow: 2px 2px 7px #050505
|
||||
|
||||
#botonInicioSesion
|
||||
background-color: white
|
||||
transition: transform 200ms, box-shadow 200ms
|
||||
|
||||
#botonInicioSesion:hover
|
||||
transform: translate(-1px, -1px)
|
||||
box-shadow: 2px 2px 7px #050505
|
||||
|
||||
#botonInicioSesion:visited
|
||||
color: black
|
||||
|
||||
.contenido
|
||||
margin: 40px 0
|
||||
|
||||
.image
|
||||
padding: 0 20px
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
.descripcionComida
|
||||
padding: 0 30px
|
||||
text-align: center
|
||||
font-size: x-large
|
||||
|
||||
.inicio_registro
|
||||
color: white
|
||||
|
||||
input
|
||||
min-width: 80%
|
||||
min-height: 40px
|
||||
padding: 10px
|
||||
color: #44A
|
||||
font-size: large
|
||||
|
||||
.botonEnviarForm
|
||||
background-color: white
|
||||
box-shadow: 1px 1px 2px gray
|
||||
cursor: pointer
|
||||
border: none
|
||||
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms
|
||||
|
||||
.botonEnviarForm:hover
|
||||
background-color: #4949e2
|
||||
color: white
|
||||
transform: translate(-1px, -1px)
|
||||
box-shadow: 2px 2px 2px gray
|
||||
|
||||
.google-button
|
||||
height: 40px
|
||||
border-width: 0
|
||||
background: white
|
||||
color: #737373
|
||||
border-radius: 5px
|
||||
white-space: nowrap
|
||||
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
|
||||
transition-property: background-color, box-shadow
|
||||
transition-duration: 150ms
|
||||
transition-timing-function: ease-in-out
|
||||
padding: 0
|
||||
cursor: pointer
|
||||
|
||||
.google-button:focus, .google-button:hover
|
||||
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)
|
||||
|
||||
.google-button:active
|
||||
background-color: #e5e5e5
|
||||
box-shadow: none
|
||||
transition-duration: 10ms
|
||||
|
||||
.google-button__icon
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
margin: 8px 0 8px 8px
|
||||
width: 18px
|
||||
height: 18px
|
||||
box-sizing: border-box
|
||||
|
||||
.google-button__text
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
padding: 0 24px
|
||||
font-size: 14px
|
||||
font-weight: bold
|
||||
font-family: 'Roboto', arial, sans-serif
|
||||
|
||||
.unseen
|
||||
visibility: hidden
|
||||
|
||||
.botonAddCart
|
||||
background-color: white
|
||||
padding: 5px
|
||||
color: #4444aa
|
||||
box-shadow: 0.1px 0.1px grey
|
||||
border-radius: 2px
|
||||
cursor: pointer
|
||||
font-size: large
|
||||
transition: background-color 250ms, color 250ms
|
||||
user-select: none
|
||||
|
||||
.botonAddCart:hover
|
||||
background-color: #4444AA
|
||||
color: white
|
||||
|
||||
.caja
|
||||
border-radius: 4px
|
||||
box-shadow: 1px 1px 2px gray
|
||||
padding: 15px
|
||||
|
||||
.botonPayPal
|
||||
background-color: #0070ba
|
||||
color: white
|
||||
font-size: large
|
||||
padding: 10px
|
||||
border: none
|
||||
border-radius: 5px
|
||||
cursor: pointer
|
||||
margin: 0 5px
|
||||
|
||||
.botonVisa
|
||||
@extend .botonPayPal
|
||||
background-color: #1a1f5e
|
||||
|
||||
.linksNavBar
|
||||
margin: 0
|
||||
li
|
||||
list-style: none
|
||||
float: left
|
||||
transition: background-color 250ms
|
||||
line-height: 50px
|
||||
a
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
padding: 0 15px
|
||||
color: white
|
||||
text-decoration: none
|
||||
&:after
|
||||
clear: both
|
||||
&:hover
|
||||
background-color: #35356a
|
||||
|
||||
.plato--Titulo
|
||||
font:
|
||||
size: x-large
|
||||
weight: bold
|
||||
family: $fuenteTitulos
|
||||
color: #3d3d7c
|
||||
|
||||
.plato--Descripcion
|
||||
font:
|
||||
size: large
|
||||
color: #333333
|
||||
|
||||
.plato--Precio
|
||||
font-size: large
|
||||
&:before
|
||||
color: green
|
||||
content: "Precio unitario: "
|
||||
&:after
|
||||
content: " S/."
|
||||
|
||||
.plato--Cantidad
|
||||
font:
|
||||
size: large
|
||||
weight: bold
|
||||
display: inline-table
|
||||
padding: 15px
|
||||
|
||||
.plato--Cantidad--Icon
|
||||
display: table-cell
|
||||
vertical-align: top
|
||||
cursor: pointer
|
||||
transition: color 250ms
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
&:hover
|
||||
color: #4444aa
|
||||
|
||||
.carrito
|
||||
text-align: left
|
||||
|
||||
#carrito--elementos, #carrito--precio
|
||||
padding: 0 10px
|
||||
|
||||
.carritoElem
|
||||
&:after
|
||||
clear: both
|
||||
|
||||
.carritoElem--img
|
||||
float: left
|
||||
margin: 10px 20px
|
||||
width: 200px
|
||||
|
||||
.carrito--subTotal
|
||||
text-align: right
|
||||
font:
|
||||
weight: bold
|
||||
family: $fuenteTitulos, sans-serif
|
||||
size: x-large
|
||||
&:before
|
||||
content: "Subtotal: "
|
||||
&:after
|
||||
content: " S/."
|
||||
|
||||
.carrito--precio--contenido--titulo
|
||||
text-align: center
|
||||
font:
|
||||
family: $fuenteTitulos, sans-serif
|
||||
size: x-large
|
||||
weight: 900
|
||||
|
||||
.carrito--precio--contenido--botonPagar
|
||||
display: inline-block
|
||||
width: 100%
|
||||
text-align: center
|
||||
padding: 10px
|
||||
background-color: #4444aa
|
||||
color: white
|
||||
border-radius: 3px
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: #3d3d7c
|
||||
|
||||
#carrito--boton--seguircomprando
|
||||
margin: 10px 0
|
||||
padding: 10px 20px
|
||||
background-color: green
|
||||
color: white
|
||||
text-decoration: none
|
||||
border-radius: 4px
|
||||
&:visited
|
||||
color: white
|
||||
|
||||
#carrito--tituloprincipal
|
||||
text-align: center
|
||||
font:
|
||||
size: xx-large
|
||||
family: $fuenteTitulos, sans-serif
|
||||
weight: 900
|
||||
margin: 10px 0
|
||||
|
||||
.responsive-image
|
||||
padding: 0 20px
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
|
||||
.tienda--titulo
|
||||
text-align: center
|
||||
font:
|
||||
family: $fuenteTitulos, sans-serif
|
||||
size: xx-large
|
||||
weight: 900
|
||||
margin: 10px 0
|
||||
|
||||
.tienda--tarjeta
|
||||
padding: 10px
|
||||
margin: 20px 5px
|
||||
border-radius: 3px
|
||||
|
||||
.tienda--tarjeta--titulo
|
||||
font:
|
||||
size: x-large
|
||||
family: $fuenteTitulos, sans-serif
|
||||
color: $colorPrincipalOscuro
|
||||
|
||||
.tienda--tarjeta--descripcion
|
||||
|
||||
.tienda--tarjeta--precio
|
||||
&:before
|
||||
content: "Precio unitario: "
|
||||
color: green
|
||||
&:after
|
||||
content: " S/."
|
||||
|
||||
.tienda--tarjeta--cantidad
|
||||
&:before
|
||||
content: "Cantidad "
|
||||
|
||||
.tienda--tarjeta--botonComprar
|
||||
background-color: white
|
||||
color: $colorPrincipalOscuro
|
||||
padding: 10px
|
||||
cursor: pointer
|
||||
border-radius: 3px
|
||||
transition: color 100ms, background-color 100ms
|
||||
font:
|
||||
size: large
|
||||
weight: bold
|
||||
family: $fuenteTitulos
|
||||
&:hover
|
||||
background-color: $colorPrincipalOscuro
|
||||
color: white
|
||||
&:focus
|
||||
background-color: white
|
||||
color: $colorPrincipalOscuro
|
||||
|
||||
.img-inicio
|
||||
height: 130px
|
||||
margin: 0 20px
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
class Anuma {
|
||||
anuma: number;
|
||||
constructor () {
|
||||
this.anuma = 80;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-min></header-min>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section id="sectionP" class="container mySeccion" data-collapsed="false">
|
||||
<div class="row contenido">
|
||||
<div class="col l5">
|
||||
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||||
alt="Plato Francés"/>
|
||||
</div>
|
||||
<div class="col l7">
|
||||
<div class="descripcionComida">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col l7 center">
|
||||
<div class="descripcionComida">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||||
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||||
gravida
|
||||
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||||
sagittis.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col l5">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||||
alt="Plato Francés" class="image">
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
Implementado con lo último en tecnología <br>
|
||||
<br>
|
||||
<br>
|
||||
<div style="text-align: center">
|
||||
<a href="https://vuejs.org/" title="Vuejs" target="_blank">
|
||||
<img src="https://vuejs.org/images/logo.png" alt="vuejs" class="img-inicio hoverable">
|
||||
</a>
|
||||
<a href="http://getbem.com/" title="BEM" target="_blank">
|
||||
<img src="http://getbem.com/assets/b_.svg" alt="bem" class="img-inicio hoverable" style="background-color: black">
|
||||
</a>
|
||||
<a href="https://sass-lang.com/" title="Sass" target="_blank">
|
||||
<img src="https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" class="img-inicio hoverable" alt="sass">
|
||||
</a>
|
||||
<a href="https://www.typescriptlang.org/" title="TypeScript" target="_blank">
|
||||
<img src="https://cdn-images-1.medium.com/max/1187/1*JsyV8lXMuTbRVLQ2FPYWAg.png" class="img-inicio hoverable" alt="typescript">
|
||||
</a>
|
||||
<a href="https://nodejs.org/es/" title="nodejs" target="_blank">
|
||||
<img src="https://pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d.png" alt="nodejs" class="img-inicio hoverable">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderMin from '@/components/headerMin'
|
||||
import NavBar from '@/components/navBar'
|
||||
import MiFooter from '@/components/mi-footer'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
'header-min': HeaderMin,
|
||||
'nav-bar': NavBar,
|
||||
'mi-footer': MiFooter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-mini></header-mini>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section class="tienda container mySeccion" data-collapsed="false">
|
||||
<h2 class="tienda--titulo">Platos</h2>
|
||||
<br>
|
||||
Ver mi cuenta | Ver mi carrito
|
||||
<br>
|
||||
<br>
|
||||
<template v-for="(item,key) in platos">
|
||||
<div v-bind:key="key" class="row tienda--tarjeta hoverable">
|
||||
<div class="col l4">
|
||||
<img class="responsive-image" :src="item.imgUrl"/>
|
||||
</div>
|
||||
<div class="col l8">
|
||||
<div class="tienda--tarjeta--titulo">
|
||||
{{ item.nombre }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="tienda--tarjeta--descripcion">
|
||||
{{ item.descripcion }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="tienda--tarjeta--precio">
|
||||
{{ item.precio }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="tienda--tarjeta--cantidad">
|
||||
<i class='material-icons plato--Cantidad--Icon' v-on:click="disminuirCantidad('itemNum' + key)">
|
||||
remove
|
||||
</i>
|
||||
<span :id=" 'itemNum' + key ">1</span>
|
||||
<i class='material-icons plato--Cantidad--Icon' v-on:click="aumentarCantidad('itemNum' + key)">
|
||||
add
|
||||
</i>
|
||||
</div>
|
||||
<br/>
|
||||
<button class="tienda--tarjeta--botonComprar" v-on:click="addAlCarro(item, 'itemNum' + key)">
|
||||
<i class='material-icons'>add_shopping_cart</i> Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</section>
|
||||
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MiFooter from "../components/mi-footer.vue";
|
||||
import HeaderMini from '../components/headerMini.vue';
|
||||
import NavBar from '../components/navBar.vue';
|
||||
|
||||
export default {
|
||||
name: 'Platos',
|
||||
components: {
|
||||
'mi-footer': MiFooter,
|
||||
'header-mini': HeaderMini,
|
||||
'nav-bar': NavBar
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
platos: [
|
||||
{
|
||||
"nombre": "Soupe à l'oignon",
|
||||
"descripcion": "Sopa tradicional hecha con cebolla y carne.",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
|
||||
"precio": 20
|
||||
},
|
||||
{
|
||||
"nombre": "Coq au vin",
|
||||
"descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
|
||||
"precio": 50
|
||||
},
|
||||
{
|
||||
"nombre": "Beef bourguignon",
|
||||
"descripcion": "Filete cocinado en vino, sasonado con especias",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
|
||||
"precio": 30
|
||||
},
|
||||
{
|
||||
"nombre": "Cassoulet",
|
||||
"descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
|
||||
"precio": 22
|
||||
},
|
||||
{
|
||||
"nombre": "Fondue de queso",
|
||||
"descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
|
||||
"precio": 5
|
||||
},
|
||||
{
|
||||
"nombre": "Ratatouille",
|
||||
"descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
|
||||
"precio": 35
|
||||
},
|
||||
{
|
||||
"nombre": "Magret de canard",
|
||||
"descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
|
||||
"precio": 17
|
||||
},
|
||||
{
|
||||
"nombre": "Merluza al beurre blanc",
|
||||
"descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
|
||||
"precio": 22
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addAlCarro: function (plato, id) {
|
||||
const cantidad = parseInt(document.getElementById(id).innerText);
|
||||
const obj = JSON.parse(JSON.stringify(plato));
|
||||
obj["cantidad"] = cantidad;
|
||||
carritoUsuario.push(obj);
|
||||
M.toast({html: 'Añadido al carrito'})
|
||||
},
|
||||
aumentarCantidad: function (id) {
|
||||
const elem = document.getElementById(id);
|
||||
const valorActual = parseInt(elem.innerText);
|
||||
if (valorActual > 0) {
|
||||
elem.innerText = valorActual + 1;
|
||||
} else {
|
||||
elem.innerText = 1;
|
||||
}
|
||||
},
|
||||
disminuirCantidad: function (id) {
|
||||
const elem = document.getElementById(id);
|
||||
const valorActual = parseInt(elem.innerText);
|
||||
if (valorActual > 1) {
|
||||
elem.innerText = valorActual - 1;
|
||||
} else {
|
||||
elem.innerText = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-mini></header-mini>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section id="sectionCarrito" class="container mySeccion">
|
||||
<div class="center">
|
||||
<div id="carrito--tituloprincipal">
|
||||
Carrito de compras
|
||||
</div>
|
||||
<br/>
|
||||
<router-link id="carrito--boton--seguircomprando" to="/tienda/" class="hoverable">Seguir comprando</router-link>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="carrito" class="row carrito">
|
||||
|
||||
<div id="carrito--elementos" class="col l8">
|
||||
<div id="carrito--elementos--contenido" class="caja">
|
||||
<template v-if="noEstaVacio">
|
||||
<template v-for="(producto,key) in carrito">
|
||||
<div v-bind:key="key" class="carritoElem">
|
||||
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||||
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||||
<br>
|
||||
<div class="plato--Precio">{{ producto.precio }}</div>
|
||||
<div class="plato--Cantidad">Cantidad:
|
||||
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||||
<span>{{ producto.cantidad }}</span>
|
||||
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||||
<hr>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
No hay nada en tu carrito de compras :c
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="carrito--precio" class="col l4">
|
||||
|
||||
<div id="carrito--precio--contenido" class="caja">
|
||||
<template v-if="noEstaVacio">
|
||||
<div id="pagos">
|
||||
<div style="display: inline-block;">
|
||||
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||||
</div>
|
||||
<div style="display: inline-block; float: right; clear: both">
|
||||
{{ subTotal }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: inline-block;">
|
||||
Descuentos:
|
||||
</div>
|
||||
<div style="display: inline-block; float: right; clear: both">
|
||||
{{ descuento }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||||
Total:
|
||||
</div>
|
||||
<div class="carrito--precio--contenido--titulo"
|
||||
style="display: inline-block; float: right; clear: both">
|
||||
{{ total }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<a class="carrito--precio--contenido--botonPagar">
|
||||
Completar Transaccion
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
No hay nada en tu carrito de compras :c
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
</section>
|
||||
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderMini from '@/components/headerMini'
|
||||
import NavBar from '@/components/navBar'
|
||||
import MiFooter from '@/components/mi-footer'
|
||||
|
||||
export default {
|
||||
name: 'Carrito',
|
||||
components: {
|
||||
'header-mini': HeaderMini,
|
||||
'nav-bar': NavBar,
|
||||
'mi-footer': MiFooter
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
carrito: window.carritoUsuario,
|
||||
descuento: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cantidadItems: function () {
|
||||
let items = 0;
|
||||
for (const i in this.item)
|
||||
items++;
|
||||
return items;
|
||||
},
|
||||
subTotal: function () {
|
||||
let subT = 0;
|
||||
for (const itemI in this.carrito ) {
|
||||
if (this.carrito.hasOwnProperty(itemI)){
|
||||
const item = this.carrito[itemI];
|
||||
subT += (item["precio"] * item["cantidad"]);
|
||||
}
|
||||
}
|
||||
return subT;
|
||||
},
|
||||
total: function () {
|
||||
return this.subTotal - this.descuento;
|
||||
},
|
||||
noEstaVacio: function () {
|
||||
for (const i in this.carrito) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
restarCantidad: function (elem) {
|
||||
const cantidad = parseInt(elem.cantidad);
|
||||
if (cantidad > 0)
|
||||
elem.cantidad = cantidad -1;
|
||||
},
|
||||
aumentarCantidad: function (elem) {
|
||||
const cantidad = parseInt(elem.cantidad);
|
||||
if (cantidad >= 0)
|
||||
elem.cantidad = cantidad+1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
// this aligns with Vue's browser support
|
||||
"target": "es5",
|
||||
// this enables stricter inference for data properties on `this`
|
||||
"strict": true,
|
||||
// if using webpack 2+ or rollup, to leverage tree shaking:
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue