Requerimientos
Fernando
parent
8681fd255b
commit
a24e3f2600
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<header id="header">
|
||||
<div class="contenedor">
|
||||
<header>
|
||||
<div>
|
||||
<div id="tituloP" class="center">
|
||||
<router-link to="/"><h1 class="titulo--link">L'Assiette</h1></router-link>
|
||||
<div id="tituloP--descripcion">
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||
<a href="" id="botonRegistro" class="boton">
|
||||
<router-link to="/iniciar-sesion/" id="botonRegistro" class="boton">
|
||||
Registrarse
|
||||
</a>
|
||||
<a href="" id="botonInicioSesion" class="boton">
|
||||
</router-link>
|
||||
<router-link to="/iniciar-sesion/" id="botonInicioSesion" class="boton">
|
||||
Iniciar Sesion
|
||||
</a>
|
||||
</router-link>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<header id="header">
|
||||
<div class="contenedor">
|
||||
<div>
|
||||
<div id="tituloP" class="center tituloP--mini">
|
||||
<router-link to="/" class="titulo--link">L'Assiette</router-link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +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 class="container row mi-footer transparent">
|
||||
<div class="col l6 m6">
|
||||
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>
|
||||
<div class="col l6 m6">
|
||||
<div class="hide-on-med-and-up"><hr></div>
|
||||
Contacto: <br>
|
||||
<br>
|
||||
<i class="material-icons white-text">local_phone</i> 999 - 888 - 777 <br>
|
||||
<i class="material-icons white-text">email</i> soporte@l-assiete.com
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<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="/mi-cuenta/">Mi cuenta</router-link></li>
|
||||
<li><router-link to="/carrito/">Carrito</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavBar'
|
||||
name: 'HeaderMini'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
11
src/main.js
11
src/main.js
|
|
@ -9,7 +9,16 @@ require('@/sass/base.sass');
|
|||
require('@/material-icons/material-icons.css');
|
||||
require('@/materialize/js/materialize.min.js');
|
||||
|
||||
(() => { window.carritoUsuario = [] })();
|
||||
(() => {
|
||||
window.carritoUsuario = [];
|
||||
window.usuarioActual = [
|
||||
{
|
||||
nombre: 'Usuario',
|
||||
email: 'ejemplo@l-assiete.com',
|
||||
historial: {}
|
||||
}
|
||||
];
|
||||
})();
|
||||
|
||||
new Vue({
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -2,29 +2,39 @@ import Vue from 'vue'
|
|||
import Router from 'vue-router'
|
||||
import Home from './views/Home.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
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')
|
||||
}
|
||||
]
|
||||
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')
|
||||
},
|
||||
{
|
||||
path: '/iniciar-sesion/',
|
||||
name: 'IniciarSesion',
|
||||
component: () => import('./views/Login-Registro')
|
||||
},
|
||||
{
|
||||
path: '/mi-cuenta/',
|
||||
name: 'MiCuenta',
|
||||
component: () => import('./views/MiCuenta')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -36,11 +36,13 @@ footer
|
|||
padding: 40px
|
||||
|
||||
.container
|
||||
background-color: white
|
||||
margin-top: 10px
|
||||
margin-bottom: 10px
|
||||
padding: 10px
|
||||
|
||||
.fondoBlanco
|
||||
background-color: white
|
||||
|
||||
#tituloP
|
||||
padding: 30px
|
||||
color: white
|
||||
|
|
@ -114,7 +116,7 @@ footer
|
|||
.descripcionComida
|
||||
padding: 0 30px
|
||||
text-align: center
|
||||
font-size: x-large
|
||||
font-size: large
|
||||
|
||||
.inicio_registro
|
||||
color: white
|
||||
|
|
@ -391,5 +393,5 @@ input
|
|||
color: $colorPrincipalOscuro
|
||||
|
||||
.img-inicio
|
||||
height: 130px
|
||||
height: 90px
|
||||
margin: 0 20px
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div>
|
||||
<header>
|
||||
<div>
|
||||
<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 class="container">
|
||||
<div class="row login">
|
||||
<div class="col l6 m6 s12 login--descripcion center-align">
|
||||
Inicia sesión <br>
|
||||
<br>
|
||||
<button class="login--boton login--botonGoogle hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/281/281764.svg" width="20" height="20"
|
||||
alt="Google">
|
||||
|
||||
Google
|
||||
</button><br>
|
||||
<br>
|
||||
<button class="login--boton login--botonFacebook hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/145/145802.svg" width="20" height="20"
|
||||
alt="Facebook">
|
||||
|
||||
Facebook
|
||||
</button><br>
|
||||
<br>
|
||||
O con tu email: <br>
|
||||
<br>
|
||||
<div class="center">
|
||||
<form class="login--form">
|
||||
<label class="login--form--label">Email:</label>
|
||||
<input class="login--form--input" type="email" placeholder="Tu email" required><br>
|
||||
<br>
|
||||
<label for="" class="login--form--label">Contraseña</label>
|
||||
<input class="login--form--input" type="password" placeholder="Contraseña" required><br>
|
||||
<br>
|
||||
<router-link to="/platos/" class="btn waves-effect waves-light" type="submit" name="action">Inicia Sesión
|
||||
</router-link>
|
||||
</form>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col l6 m6 s12 login--registro center-align" id="bordeIzq">
|
||||
Regístrate <br>
|
||||
<br>
|
||||
<button class="login--boton login--botonGoogle hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/281/281764.svg" width="20" height="20"
|
||||
alt="Google">
|
||||
|
||||
Google
|
||||
</button><br>
|
||||
<br>
|
||||
<button class="login--boton login--botonFacebook hoverable">
|
||||
<img src="https://image.flaticon.com/icons/svg/145/145802.svg" width="20" height="20"
|
||||
alt="Facebook">
|
||||
|
||||
Facebook
|
||||
</button><br>
|
||||
<br>
|
||||
O con tu email: <br>
|
||||
<br>
|
||||
<div class="center">
|
||||
<form action="" class="login--form">
|
||||
<label for="" class="login--form--label">Nombre</label>
|
||||
<input class="login--form--input" type="text" placeholder="Tu nombre" required><br>
|
||||
<br>
|
||||
<label class="login--form--label">Email:</label>
|
||||
<input class="login--form--input" type="email" placeholder="Tu email" required><br>
|
||||
<br>
|
||||
<label for="" class="login--form--label">Contraseña</label>
|
||||
<input class="login--form--input" type="password" placeholder="Contraseña" required><br>
|
||||
<br>
|
||||
<router-link to="/platos/" class="btn waves-effect waves-light" type="submit" name="action">Regístrame
|
||||
</router-link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<img src="https://publicholidays.fr/wp-content/uploads/2012/12/France_1920_800_homepage.jpg"
|
||||
alt="Imagen-paris" class="responsive-image" style="opacity: 0.8;"><br>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MiFooter from '@/components/mi-footer.vue'
|
||||
|
||||
export default {
|
||||
name: 'IniciarSesion',
|
||||
components: {
|
||||
'mi-footer': MiFooter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
#bordeIzq
|
||||
border-left: solid 1px white
|
||||
|
||||
.login
|
||||
color: white
|
||||
|
||||
.login--boton
|
||||
border: none
|
||||
padding: 10px 50px
|
||||
cursor: pointer
|
||||
border-radius: 3px
|
||||
|
||||
.login--botonGoogle
|
||||
background-color: white
|
||||
|
||||
.login--botonFacebook
|
||||
background-color: #3b5998
|
||||
color: white
|
||||
|
||||
.login--form
|
||||
width: 80%
|
||||
display: inline-block
|
||||
|
||||
.login--form--input
|
||||
color: white
|
||||
font-size: large !important
|
||||
text-shadow: 1px 1px 2px black
|
||||
|
||||
.login--form--label
|
||||
color: white
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<header-mini></header-mini>
|
||||
<nav-bar></nav-bar>
|
||||
<section>
|
||||
<div class="container fondoBlanco">
|
||||
<h2 class="tienda--titulo">Mi cuenta</h2>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col l6 m6">
|
||||
{{ usuario[0].nombre }}<br>
|
||||
{{ usuario[0].email }}<br>
|
||||
|
||||
</div>
|
||||
<div class="col l6 m6">
|
||||
Historial de Compras <br>
|
||||
<br>
|
||||
<template v-for="(plato, key) in usuario[0].historial">
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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: "MiCuenta",
|
||||
components: {
|
||||
'header-mini': HeaderMini,
|
||||
'nav-bar': NavBar,
|
||||
'mi-footer': MiFooter
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
usuario: window.usuarioActual
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
historialVacio: function () {
|
||||
for (i in this.usuario[0].historial) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -4,12 +4,9 @@
|
|||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section class="tienda container mySeccion" data-collapsed="false">
|
||||
<section class="tienda container mySeccion fondoBlanco" 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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue