Alterações layout

thauska · Sep 5, 2020 · 6bb5e87 · 6bb5e87
1 parent f90ab32
commit 6bb5e87
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 60 deletions.
diff --git a/src/components/SignUpFirst.vue b/src/components/SignUpFirst.vue
@@ -1,28 +1,32 @@
 <template>
-  <div class="row justify-center col-12" v-if="show">
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Nome Completo </span>
-      <q-input dense dark bg-color="secondary" class="borda-arredondada col-12"/>
+  <div class="row justify-center col-12 q-gutter-y-xs">
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> Nome Completo </span>
+      <q-input v-model="fullName" color="white" bg-color="secondary" class="full-width" dark filled dense />
     </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> E-mail </span>
-      <q-input dense dark bg-color="secondary" class="borda-arredondada col-12"/>
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> E-mail </span>
+       <q-input v-model="email" color="white" bg-color="secondary" class="full-width" dark filled dense />
     </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Senha </span>
-      <q-input dense dark bg-color="secondary" class="col-12"/>
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> Senha </span>
+       <q-input v-model="password" color="white" bg-color="secondary" :type=" isPwd ? 'password' : 'text'" class="full-width" dark filled dense>
+        <template v-slot:append>
+          <q-icon
+            :name="isPwd ? 'visibility_off' : 'visibility'"
+            class="cursor-pointer"
+            @click="showPwd"
+          />
+        </template>
+       </q-input>
     </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Insira novamente sua senha </span>
-      <q-input dense dark bg-color="secondary" class="borda-arredondada col-12"/>
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> CPF </span>
+       <q-input v-model="cpf" color="white" bg-color="secondary" class="full-width" dark filled dense />
     </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> CPF </span>
-      <q-input dense dark bg-color="secondary" class="borda-arredondada col-12"/>
-    </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> RG </span>
-      <q-input dense dark bg-color="secondary" class="borda-arredondada col-12"/>
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> RG </span>
+       <q-input v-model="rg" color="white" bg-color="secondary" class="full-width" dark filled dense />
     </div>
   </div>
 </template>
@@ -31,15 +35,17 @@
 export default {
   data () {
     return {
-      show: true
+      isPwd: true,
+      password: '',
+      email: '',
+      fullName: '',
+      cpf: '',
+      rg: ''
     }
   },
   methods: {
-    showComponent () {
-      this.show = true
-    },
-    hideComponent () {
-      this.show = false
+    showPwd () {
+      this.isPwd = !this.isPwd
     }
   }
 }

diff --git a/src/components/SignUpSecond.vue b/src/components/SignUpSecond.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="row justify-center col-12" v-if="show">
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Gênero </span>
-      <q-radio dense color="secondary" label="Feminino" class="col-12 text-secondary"/>
-      <q-radio dense color="secondary" label="Outros" class="col-6 text-secondary"/>
-      <q-input class="col-6 q-mb-md" color="secondary" dense label="Qual"/>
+  <div class="row justify-center col-12 q-gutter-y-xs">
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium q-mb-xs"> Gênero </span>
+      <q-radio v-model="gender" dense color="secondary" label="Feminino" class="col-12 text-secondary"/>
+      <q-radio dense v-model="gender" color="secondary" label="Outros" class="col-auto q-pt-none text-secondary"/>
+      <q-input class="col full-width q-pl-sm" filled color="secondary" dense label="Qual?"/>
     </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Data de nascimento </span>
-      <q-input dense dark bg-color="secondary" class="col-12"/>
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> Data de nascimento </span>
+      <q-input color="white" bg-color="secondary" mask="##/##/####" class="full-width" dark filled dense />
     </div>
-    <div class="row col-8 justify-center">
-      <span class="col-12 text-secondary"> Celular </span>
-      <q-input dense dark bg-color="secondary" class="col-12"/>
+    <div class="row col-9 justify-center">
+      <span class="col-12 text-secondary text-weight-medium"> Celular </span>
+      <q-input color="white" bg-color="secondary" mask="(##) #####-####" unmasked-value class="full-width" dark filled dense />
     </div>
-    <div class="row col-8 justify-center">
+    <div class="row col-9 justify-center text-weight-medium">
       <span class="col-12 text-secondary"> Telefone </span>
-      <q-input dense dark bg-color="secondary" class="col-12"/>
+      <q-input color="white" bg-color="secondary" mask="(##) ####-####" class="full-width" dark filled dense />
     </div>
-    <div class="row col-8 justify-center q-pt-sm">
-      <q-radio dense color="secondary" label="Li e concordo com os termos de uso e políticas de privacidade." class="col-12"/>
+    <div class="row col-9 justify-center q-pt-sm">
+      <q-radio dense color="secondary" size="xs" class="full-width">
+      <span class="text-caption">Li e concordo com os termos de uso e políticas de privacidade</span>
+      </q-radio>
     </div>
   </div>
 </template>
@@ -28,7 +30,8 @@
 export default {
   data () {
     return {
-      show: false
+      show: false,
+      gender: {}
     }
   },
   methods: {

diff --git a/src/css/app.sass b/src/css/app.sass
@@ -4,4 +4,4 @@
     border-radius: 0 0 50% 50%
 
 .q-toolbar
-    min-height: 80px
+    min-height: 55px
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -1,15 +1,15 @@
 <template>
-  <q-layout view="hhh lpR fFf">
+  <q-layout view="hhh lpR fff">
     <q-header reveal bordered class="purplebg text-white">
       <q-toolbar>
-        <q-toolbar-title>
-        </q-toolbar-title>
       </q-toolbar>
     </q-header>
-
     <q-page-container>
       <router-view />
     </q-page-container>
+    <q-footer class="text-center bg-transparent q-pa-sm">
+       <img src="../../public/banco-bmg-logo.png" height="30px"/>
+    </q-footer>
   </q-layout>
 </template>
 

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -0,0 +1,24 @@
+<template>
+    <q-page class="row justify-center">
+      <q-card flat bordered class="col-10 q-mt-md">
+        <q-card-section>
+            <div class="text-body1">Our Changing Planet</div>
+        </q-card-section>
+          <q-separator inset />
+        <q-card-section>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </q-card-section>
+    </q-card>
+    <div class="col-10 row q-mt-md">
+        <q-btn color="secondary" size="sm" icon="payment" stack label="Pagamento" class="col-4 q-pa-none"></q-btn>
+        <q-btn color="secondary" size="sm" icon="swap_horizontal_circle" stack label="Transferência" class="col-4"></q-btn>
+        <q-btn color="secondary" size="sm" icon="account_balance" stack label="Depósito" class="col-4"></q-btn>
+        <q-btn color="secondary" size="sm" icon="stay_primary_portrait" stack label="Recarga" class="col-4"></q-btn>
+    </div>
+    </q-page>
+</template>
+<script>
+export default {
+}
+</script>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
@@ -11,9 +11,6 @@
         <q-btn class="q-px-xl btn login" color="secondary" label="Entrar" no-caps dense @click="goLogin()"/>
       </div>
     </div>
-    <div class="row col-12 justify-center container-logo-bmg">
-      <img src="../../public/banco-bmg-logo.png" height="35px"/>
-    </div>
   </q-page>
 </template>
 

diff --git a/src/pages/SignUp.vue b/src/pages/SignUp.vue
@@ -1,12 +1,14 @@
 <template>
   <q-page class="row justify-center">
-    <div class="row justify-center col-12">
+    <div class="row justify-center col-12 q-mt-md q-mb-md">
       <span class="text-h6 text-secondary"> ABRA SUA CONTA </span>
     </div>
-    <sign-up-first ref="SignUpFirst"/>
-    <sign-up-second ref="SignUpSecond"/>
-    <div class="row col-8 borda justify-center q-pt-lg">
-      <q-btn :label="labelButton" color="secondary" dense class="q-px-lg btn" @click="next()"/>
+    <keep-alive>
+      <component :is="component"></component>
+    </keep-alive>
+    <div class="row col-9 justify-center q-pt-lg q-mb-lg">
+      <q-btn :label="labelBackButton" color="grey-8" outline dense class="col q-mr-xs" @click="previous()"/>
+      <q-btn :label="labelButton" color="secondary" dense class="col q-ml-xs" @click="next()"/>
     </div>
   </q-page>
 </template>
@@ -21,14 +23,21 @@ export default {
   },
   data () {
     return {
-      labelButton: 'Avançar'
+      labelButton: 'Avançar',
+      labelBackButton: 'Cancelar',
+      component: 'SignUpFirst'
     }
   },
   methods: {
     next () {
-      this.$refs.SignUpFirst.hideComponent()
-      this.$refs.SignUpSecond.showComponent()
+      this.component = 'SignUpSecond'
       this.labelButton = 'Criar conta'
+      this.labelBackButton = 'Voltar'
+    },
+    previous () {
+      this.component = 'SignUpFirst'
+      this.labelButton = 'Avançar'
+      this.labelBackButton = 'Cancelar'
     }
   }
 }

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -6,7 +6,8 @@ const routes = [
     children: [
       { path: '', component: () => import('pages/Index.vue') },
       { path: 'cadastrar', component: () => import('pages/SignUp.vue') },
-      { path: 'login', component: () => import('pages/Login.vue') }
+      { path: 'login', component: () => import('pages/Login.vue') },
+      { path: 'home', component: () => import('pages/Home.vue') }
     ]
   },