Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/thauska/desafio-BMG into …
Browse files Browse the repository at this point in the history
…Beatriz/dev
  • Loading branch information
beatriz-alcantara committed Sep 5, 2020
2 parents 8984642 + 6bb5e87 commit af172ff
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 25 deletions.
58 changes: 58 additions & 0 deletions src/components/SignUpFirst.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<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-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-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-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-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>

<script>
export default {
data () {
return {
isPwd: true,
password: '',
email: '',
fullName: '',
cpf: '',
rg: ''
}
},
methods: {
showPwd () {
this.isPwd = !this.isPwd
}
}
}
</script>

<style>
.btn {
height: 35px
}
</style>
37 changes: 20 additions & 17 deletions src/components/SignUpSecond.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -28,7 +30,8 @@
export default {
data () {
return {
show: false
show: false,
gender: {}
}
},
methods: {
Expand Down
2 changes: 1 addition & 1 deletion src/css/app.sass
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
border-radius: 0 0 50% 50%

.q-toolbar
min-height: 80px
min-height: 55px

.logo-ada
position: relative
Expand Down
8 changes: 4 additions & 4 deletions src/layouts/MainLayout.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
24 changes: 24 additions & 0 deletions src/pages/Home.vue
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 0 additions & 3 deletions src/pages/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
48 changes: 48 additions & 0 deletions src/pages/SignUp.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<template>
<q-page class="row justify-center">
<div class="row justify-center col-12 q-mt-md q-mb-md">
<span class="text-h6 text-secondary"> ABRA SUA CONTA </span>
</div>
<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>

<script>
import SignUpFirst from '../components/SignUpFirst'
import SignUpSecond from '../components/SignUpSecond'
export default {
components: {
SignUpFirst,
SignUpSecond
},
data () {
return {
labelButton: 'Avançar',
labelBackButton: 'Cancelar',
component: 'SignUpFirst'
}
},
methods: {
next () {
this.component = 'SignUpSecond'
this.labelButton = 'Criar conta'
this.labelBackButton = 'Voltar'
},
previous () {
this.component = 'SignUpFirst'
this.labelButton = 'Avançar'
this.labelBackButton = 'Cancelar'
}
}
}
</script>

<style>
</style>

0 comments on commit af172ff

Please sign in to comment.