Commit 4aa4e681b51b16c2c2252136c99c82c215f7520a
1 parent
2c2acf99d0
Exists in
develop
vista indicaciones pago tarje, pantalla completa
Showing
10 changed files
with
198 additions
and
0 deletions
Show diff stats
src/app/app-routing.module.ts
| ... | ... | @@ -14,6 +14,10 @@ const routes: Routes = [ |
| 14 | 14 | loadChildren: () => import('./modules/info-formas-pago/info-formas-pago.module').then(m => m.InfoFormasPagoModule) |
| 15 | 15 | }, |
| 16 | 16 | { |
| 17 | + path: 'indicaciones-pago-tarjeta', | |
| 18 | + loadChildren: () => import('./modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module').then(m => m.indicacionesPagoTarjetaModule) | |
| 19 | + }, | |
| 20 | + { | |
| 17 | 21 | path: 'opcion-pedido', |
| 18 | 22 | loadChildren: () => import('./modules/opcion-pedido/opcion-pedido.module').then(m => m.OpcionPedidoModule) |
| 19 | 23 | }, |
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta-routing.module.ts
| ... | ... | @@ -0,0 +1,13 @@ |
| 1 | +import { NgModule } from '@angular/core'; | |
| 2 | +import { Routes, RouterModule } from '@angular/router'; | |
| 3 | +import { IndicacionesPagoTarjetaComponent } from './indicaciones-pago-tarjeta.component'; | |
| 4 | + | |
| 5 | +const routes: Routes = [ | |
| 6 | + { path: '', component: IndicacionesPagoTarjetaComponent } | |
| 7 | +]; | |
| 8 | + | |
| 9 | +@NgModule({ | |
| 10 | + imports: [RouterModule.forChild(routes)], | |
| 11 | + exports: [RouterModule] | |
| 12 | +}) | |
| 13 | +export class indicacionesPagoTarjetaRoutingModule { } |
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
| ... | ... | @@ -0,0 +1,125 @@ |
| 1 | +<div class="h-92 bg-white fade-in-left"> | |
| 2 | + <div class="row mx-0 h-15"> | |
| 3 | + <div class="col-12 px-0 h-80 my-auto"> | |
| 4 | + <img | |
| 5 | + draggable="false" | |
| 6 | + ondragstart="return false;" | |
| 7 | + (contextmenu)="(false)" | |
| 8 | + class="d-block mx-auto h-100" | |
| 9 | + src="assets/img/logo-spot.svg"/> | |
| 10 | + </div> | |
| 11 | + </div> | |
| 12 | + <div class="h-85"> | |
| 13 | + <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> | |
| 14 | + <div | |
| 15 | + class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center | |
| 16 | + btn-effect border border-primary rounded reduce-card-2"> | |
| 17 | + <div class="row h-auto"> | |
| 18 | + <div class="col-12 col-md-4"> | |
| 19 | + <img | |
| 20 | + draggable="false" | |
| 21 | + ondragstart="return false;" | |
| 22 | + (contextmenu)="(false)" | |
| 23 | + class="w-100 h-auto bg-white" | |
| 24 | + src="assets/img/tarjeta-banda.jpg"/> | |
| 25 | + </div> | |
| 26 | + <div class="col-12 col-md-8 h-auto"> | |
| 27 | + <p class="h2 m-0 text-primary">Banda Magnética</p> | |
| 28 | + <small class=" m-0"> | |
| 29 | + DESLIZÁ LA TARJETA POR LA RANURA<br> | |
| 30 | + CUANDO LA PANTALLA LO INDIQUE | |
| 31 | + </small> | |
| 32 | + <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto"> | |
| 33 | + <div class="row mx-0 bg-primary badge-pill h-auto"> | |
| 34 | + <div class="col-10 align-self-center text-center text-white"> | |
| 35 | + Continuar | |
| 36 | + </div> | |
| 37 | + <div class="col-2 align-self-center p-0"> | |
| 38 | + <img | |
| 39 | + draggable="false" | |
| 40 | + ondragstart="return false;" | |
| 41 | + (contextmenu)="(false)" | |
| 42 | + class="p-1 icon-50" | |
| 43 | + src="assets/img/ir.svg"/> | |
| 44 | + </div> | |
| 45 | + </div> | |
| 46 | + </div> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | + </div> | |
| 50 | + <div | |
| 51 | + class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center | |
| 52 | + btn-effect border border-primary rounded reduce-card-2"> | |
| 53 | + <div class="row h-auto"> | |
| 54 | + <div class="col-12 col-md-4"> | |
| 55 | + <img | |
| 56 | + draggable="false" | |
| 57 | + ondragstart="return false;" | |
| 58 | + (contextmenu)="(false)" | |
| 59 | + class="w-100 h-auto bg-white" | |
| 60 | + src="assets/img/tarjeta-chip.jpg"/> | |
| 61 | + </div> | |
| 62 | + <div class="col-12 col-md-8 h-auto"> | |
| 63 | + <p class="h2 m-0 text-primary">Chip</p> | |
| 64 | + <small class=" m-0"> | |
| 65 | + INTRODUCÍ TU TARJETA POR LA<br> | |
| 66 | + PARTE INFERIOR DE LECTOR <br> | |
| 67 | + CUANDO LA PANTALLA LO INDIQUE | |
| 68 | + </small> | |
| 69 | + <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto"> | |
| 70 | + <div class="row mx-0 bg-primary badge-pill h-auto"> | |
| 71 | + <div class="col-10 align-self-center text-center text-white"> | |
| 72 | + Continuar | |
| 73 | + </div> | |
| 74 | + <div class="col-2 align-self-center p-0"> | |
| 75 | + <img | |
| 76 | + draggable="false" | |
| 77 | + ondragstart="return false;" | |
| 78 | + (contextmenu)="(false)" | |
| 79 | + class="p-1 icon-50" | |
| 80 | + src="assets/img/ir.svg"/> | |
| 81 | + </div> | |
| 82 | + </div> | |
| 83 | + </div> | |
| 84 | + </div> | |
| 85 | + </div> | |
| 86 | + </div> | |
| 87 | + <div | |
| 88 | + class="col-12 col-sm-10 col-md-7 p-5 m-5 h-auto align-self-center | |
| 89 | + btn-effect border border-primary rounded reduce-card-2"> | |
| 90 | + <div class="row h-auto"> | |
| 91 | + <div class="col-12 col-md-4"> | |
| 92 | + <img | |
| 93 | + draggable="false" | |
| 94 | + ondragstart="return false;" | |
| 95 | + (contextmenu)="(false)" | |
| 96 | + class="w-100 h-auto bg-white" | |
| 97 | + src="assets/img/tarjeta-contact-less.jpg"/> | |
| 98 | + </div> | |
| 99 | + <div class="col-12 col-md-8 h-auto"> | |
| 100 | + <p class="h2 m-0 text-primary">Contact-less</p> | |
| 101 | + <small class=" m-0"> | |
| 102 | + ACERCÁ LA TARJETA AL POSNET<br> | |
| 103 | + CUANDO LA PANTALLA LO INDIQUE | |
| 104 | + </small> | |
| 105 | + <div class="btn-effect col-10 px-0 bg-white mt-4 mx-auto"> | |
| 106 | + <div class="row mx-0 bg-primary badge-pill h-auto"> | |
| 107 | + <div class="col-10 align-self-center text-center text-white"> | |
| 108 | + Continuar | |
| 109 | + </div> | |
| 110 | + <div class="col-2 align-self-center p-0"> | |
| 111 | + <img | |
| 112 | + draggable="false" | |
| 113 | + ondragstart="return false;" | |
| 114 | + (contextmenu)="(false)" | |
| 115 | + class="p-1 icon-50" | |
| 116 | + src="assets/img/ir.svg"/> | |
| 117 | + </div> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + </div> | |
| 121 | + </div> | |
| 122 | + </div> | |
| 123 | + </div> | |
| 124 | + </div> | |
| 125 | +</div> |
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.scss
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.spec.ts
| ... | ... | @@ -0,0 +1,25 @@ |
| 1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
| 2 | + | |
| 3 | +import { IndicacionesPagoTarjetaComponent } from './indicaciones-pago-tarjeta.component'; | |
| 4 | + | |
| 5 | +describe('IndicacionesPagoTarjetaComponent', () => { | |
| 6 | + let component: IndicacionesPagoTarjetaComponent; | |
| 7 | + let fixture: ComponentFixture<IndicacionesPagoTarjetaComponent>; | |
| 8 | + | |
| 9 | + beforeEach(async(() => { | |
| 10 | + TestBed.configureTestingModule({ | |
| 11 | + declarations: [ IndicacionesPagoTarjetaComponent ] | |
| 12 | + }) | |
| 13 | + .compileComponents(); | |
| 14 | + })); | |
| 15 | + | |
| 16 | + beforeEach(() => { | |
| 17 | + fixture = TestBed.createComponent(IndicacionesPagoTarjetaComponent); | |
| 18 | + component = fixture.componentInstance; | |
| 19 | + fixture.detectChanges(); | |
| 20 | + }); | |
| 21 | + | |
| 22 | + it('should create', () => { | |
| 23 | + expect(component).toBeTruthy(); | |
| 24 | + }); | |
| 25 | +}); |
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.ts
| ... | ... | @@ -0,0 +1,16 @@ |
| 1 | +import { Component, OnInit, OnChanges } from '@angular/core'; | |
| 2 | + | |
| 3 | +@Component({ | |
| 4 | + selector: 'app-indicaciones-pago-tarjeta', | |
| 5 | + templateUrl: './indicaciones-pago-tarjeta.component.html', | |
| 6 | + styleUrls: ['./indicaciones-pago-tarjeta.component.scss'] | |
| 7 | +}) | |
| 8 | +export class IndicacionesPagoTarjetaComponent implements OnInit { | |
| 9 | + mediaPantalla:boolean; | |
| 10 | + constructor() { } | |
| 11 | + | |
| 12 | + ngOnInit() {} | |
| 13 | + | |
| 14 | + ngOnChanges() { | |
| 15 | + } | |
| 16 | +} |
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.module.ts
| ... | ... | @@ -0,0 +1,15 @@ |
| 1 | +import { NgModule } from '@angular/core'; | |
| 2 | +import { CommonModule } from '@angular/common'; | |
| 3 | + | |
| 4 | +import { indicacionesPagoTarjetaRoutingModule } from './indicaciones-pago-tarjeta-routing.module'; | |
| 5 | +import { IndicacionesPagoTarjetaComponent } from './indicaciones-pago-tarjeta.component'; | |
| 6 | + | |
| 7 | + | |
| 8 | +@NgModule({ | |
| 9 | + declarations: [IndicacionesPagoTarjetaComponent], | |
| 10 | + imports: [ | |
| 11 | + CommonModule, | |
| 12 | + indicacionesPagoTarjetaRoutingModule | |
| 13 | + ] | |
| 14 | +}) | |
| 15 | +export class indicacionesPagoTarjetaModule { } |
src/assets/img/tarjeta-banda.jpg
115 KB
src/assets/img/tarjeta-chip.jpg
117 KB
src/assets/img/tarjeta-contact-less.jpg
102 KB