Commit 07cbce8bc25a4a81d1714f2e78be480aca1f498e
1 parent
a8811cc942
Exists in
develop
reducir botones en pantalla completa
Showing
1 changed file
with
9 additions
and
3 deletions
Show diff stats
src/app/modules/indicaciones-pago-tarjeta/indicaciones-pago-tarjeta.component.html
| 1 | <div class="h-92 bg-white fade-in-left"> | 1 | <div class="h-92 bg-white fade-in-left"> |
| 2 | <div class="row mx-0 h-15"> | 2 | <div class="row mx-0 h-15"> |
| 3 | <div class="col-12 px-0 h-80 my-auto"> | 3 | <div class="col-12 px-0 h-80 my-auto"> |
| 4 | <img | 4 | <img |
| 5 | draggable="false" | 5 | draggable="false" |
| 6 | ondragstart="return false;" | 6 | ondragstart="return false;" |
| 7 | (contextmenu)="(false)" | 7 | (contextmenu)="(false)" |
| 8 | class="d-block mx-auto h-100" | 8 | class="d-block mx-auto h-100" |
| 9 | src="assets/img/logo-spot.svg"/> | 9 | src="assets/img/logo-spot.svg"/> |
| 10 | </div> | 10 | </div> |
| 11 | </div> | 11 | </div> |
| 12 | <div class="h-85"> | 12 | <div class="h-85"> |
| 13 | <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> | 13 | <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> |
| 14 | <div | 14 | <div |
| 15 | #card | 15 | #card |
| 16 | class="p-5 mx-auto mt-4 h-30 align-self-center | 16 | class="p-5 mx-auto mt-4 h-30 align-self-center |
| 17 | btn-effect border border-primary rounded reduce-card-1" | 17 | btn-effect border border-primary rounded reduce-card-1" |
| 18 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" | 18 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" |
| 19 | [routerLink]="['/pago-tarjeta']"> | 19 | [routerLink]="['/pago-tarjeta']"> |
| 20 | <div class="row h-auto"> | 20 | <div class="row h-auto"> |
| 21 | <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> | 21 | <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> |
| 22 | <img | 22 | <img |
| 23 | draggable="false" | 23 | draggable="false" |
| 24 | ondragstart="return false;" | 24 | ondragstart="return false;" |
| 25 | (contextmenu)="(false)" | 25 | (contextmenu)="(false)" |
| 26 | class="w-100 h-auto bg-white" | 26 | class="w-100 h-auto bg-white" |
| 27 | src="assets/img/tarjeta-banda.jpg"/> | 27 | src="assets/img/tarjeta-banda.jpg"/> |
| 28 | </div> | 28 | </div> |
| 29 | <div class="h-auto" | 29 | <div class="h-auto" |
| 30 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> | 30 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> |
| 31 | <p class="h2 m-0 text-primary">Banda Magnética</p> | 31 | <p class="h2 m-0 text-primary">Banda Magnética</p> |
| 32 | <small class=" m-0"> | 32 | <small class=" m-0"> |
| 33 | DESLIZÁ LA TARJETA POR LA RANURA<br> | 33 | DESLIZÁ LA TARJETA POR LA RANURA<br> |
| 34 | CUANDO LA PANTALLA LO INDIQUE | 34 | CUANDO LA PANTALLA LO INDIQUE |
| 35 | </small> | 35 | </small> |
| 36 | <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> | 36 | <div |
| 37 | class="btn-effect px-0 bg-white mt-4 mx-auto" | ||
| 38 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'"> | ||
| 37 | <div class="row mx-0 bg-primary badge-pill h-auto"> | 39 | <div class="row mx-0 bg-primary badge-pill h-auto"> |
| 38 | <div class="col-10 align-self-center text-center text-white"> | 40 | <div class="col-10 align-self-center text-center text-white"> |
| 39 | Continuar | 41 | Continuar |
| 40 | </div> | 42 | </div> |
| 41 | <div class="col-2 align-self-center p-0"> | 43 | <div class="col-2 align-self-center p-0"> |
| 42 | <img | 44 | <img |
| 43 | draggable="false" | 45 | draggable="false" |
| 44 | ondragstart="return false;" | 46 | ondragstart="return false;" |
| 45 | (contextmenu)="(false)" | 47 | (contextmenu)="(false)" |
| 46 | class="p-1 icon-50" | 48 | class="p-1 icon-50" |
| 47 | src="assets/img/ir.svg"/> | 49 | src="assets/img/ir.svg"/> |
| 48 | </div> | 50 | </div> |
| 49 | </div> | 51 | </div> |
| 50 | </div> | 52 | </div> |
| 51 | </div> | 53 | </div> |
| 52 | </div> | 54 | </div> |
| 53 | </div> | 55 | </div> |
| 54 | <div | 56 | <div |
| 55 | class="p-5 mx-auto mt-6 h-auto align-self-center | 57 | class="p-5 mx-auto mt-6 h-auto align-self-center |
| 56 | btn-effect border border-primary rounded reduce-card-1" | 58 | btn-effect border border-primary rounded reduce-card-1" |
| 57 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" | 59 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" |
| 58 | [routerLink]="['/pago-tarjeta']"> | 60 | [routerLink]="['/pago-tarjeta']"> |
| 59 | <div class="row h-auto"> | 61 | <div class="row h-auto"> |
| 60 | <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> | 62 | <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> |
| 61 | <img | 63 | <img |
| 62 | draggable="false" | 64 | draggable="false" |
| 63 | ondragstart="return false;" | 65 | ondragstart="return false;" |
| 64 | (contextmenu)="(false)" | 66 | (contextmenu)="(false)" |
| 65 | class="w-100 h-auto bg-white" | 67 | class="w-100 h-auto bg-white" |
| 66 | src="assets/img/tarjeta-chip.jpg"/> | 68 | src="assets/img/tarjeta-chip.jpg"/> |
| 67 | </div> | 69 | </div> |
| 68 | <div | 70 | <div |
| 69 | class="h-auto" | 71 | class="h-auto" |
| 70 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> | 72 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> |
| 71 | <p class="h2 m-0 text-primary">Chip</p> | 73 | <p class="h2 m-0 text-primary">Chip</p> |
| 72 | <small class=" m-0"> | 74 | <small class=" m-0"> |
| 73 | INTRODUCÍ TU TARJETA POR LA<br> | 75 | INTRODUCÍ TU TARJETA POR LA<br> |
| 74 | PARTE INFERIOR DE LECTOR <br> | 76 | PARTE INFERIOR DE LECTOR <br> |
| 75 | CUANDO LA PANTALLA LO INDIQUE | 77 | CUANDO LA PANTALLA LO INDIQUE |
| 76 | </small> | 78 | </small> |
| 77 | <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> | 79 | <div |
| 80 | class="btn-effect px-0 bg-white mt-4 mx-auto" | ||
| 81 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'"> | ||
| 78 | <div class="row mx-0 bg-primary badge-pill h-auto"> | 82 | <div class="row mx-0 bg-primary badge-pill h-auto"> |
| 79 | <div | 83 | <div |
| 80 | class="col-10 align-self-center text-center text-white"> | 84 | class="col-10 align-self-center text-center text-white"> |
| 81 | Continuar | 85 | Continuar |
| 82 | </div> | 86 | </div> |
| 83 | <div class="col-2 align-self-center p-0"> | 87 | <div class="col-2 align-self-center p-0"> |
| 84 | <img | 88 | <img |
| 85 | draggable="false" | 89 | draggable="false" |
| 86 | ondragstart="return false;" | 90 | ondragstart="return false;" |
| 87 | (contextmenu)="(false)" | 91 | (contextmenu)="(false)" |
| 88 | class="p-1 icon-50" | 92 | class="p-1 icon-50" |
| 89 | src="assets/img/ir.svg"/> | 93 | src="assets/img/ir.svg"/> |
| 90 | </div> | 94 | </div> |
| 91 | </div> | 95 | </div> |
| 92 | </div> | 96 | </div> |
| 93 | </div> | 97 | </div> |
| 94 | </div> | 98 | </div> |
| 95 | </div> | 99 | </div> |
| 96 | <div | 100 | <div |
| 97 | class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center | 101 | class="col-sm-10 col-md-4 p-5 mx-auto mt-6 align-self-center |
| 98 | btn-effect border border-primary rounded reduce-card-1" | 102 | btn-effect border border-primary rounded reduce-card-1" |
| 99 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" | 103 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-md-4' : 'col-md-8'" |
| 100 | [routerLink]="['/pago-tarjeta']"> | 104 | [routerLink]="['/pago-tarjeta']"> |
| 101 | <div class="row h-auto"> | 105 | <div class="row h-auto"> |
| 102 | <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> | 106 | <div [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-4'"> |
| 103 | <img | 107 | <img |
| 104 | draggable="false" | 108 | draggable="false" |
| 105 | ondragstart="return false;" | 109 | ondragstart="return false;" |
| 106 | (contextmenu)="(false)" | 110 | (contextmenu)="(false)" |
| 107 | class="w-100 h-auto bg-white" | 111 | class="w-100 h-auto bg-white" |
| 108 | src="assets/img/tarjeta-contact-less.jpg"/> | 112 | src="assets/img/tarjeta-contact-less.jpg"/> |
| 109 | </div> | 113 | </div> |
| 110 | <div | 114 | <div |
| 111 | class="h-auto" | 115 | class="h-auto" |
| 112 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> | 116 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-8'"> |
| 113 | <p class="h2 m-0 text-primary">Contact-less</p> | 117 | <p class="h2 m-0 text-primary">Contact-less</p> |
| 114 | <small class=" m-0"> | 118 | <small class=" m-0"> |
| 115 | ACERCÁ LA TARJETA AL POSNET<br> | 119 | ACERCÁ LA TARJETA AL POSNET<br> |
| 116 | CUANDO LA PANTALLA LO INDIQUE | 120 | CUANDO LA PANTALLA LO INDIQUE |
| 117 | </small> | 121 | </small> |
| 118 | <div class="btn-effect col-12 px-0 bg-white mt-4 mx-auto"> | 122 | <div |
| 123 | class="btn-effect px-0 bg-white mt-4 mx-auto" | ||
| 124 | [ngClass]="card.classList.contains('media-pantalla') ? 'col-12' : 'col-7'"> | ||
| 119 | <div class="row mx-0 bg-primary badge-pill h-auto"> | 125 | <div class="row mx-0 bg-primary badge-pill h-auto"> |
| 120 | <div | 126 | <div |
| 121 | class="col-10 align-self-center text-center text-white"> | 127 | class="col-10 align-self-center text-center text-white"> |
| 122 | <small>Continuar</small> | 128 | <small>Continuar</small> |
| 123 | </div> | 129 | </div> |
| 124 | <div class="col-2 align-self-center p-0"> | 130 | <div class="col-2 align-self-center p-0"> |
| 125 | <img | 131 | <img |
| 126 | draggable="false" | 132 | draggable="false" |
| 127 | ondragstart="return false;" | 133 | ondragstart="return false;" |
| 128 | (contextmenu)="(false)" | 134 | (contextmenu)="(false)" |
| 129 | class="p-1 icon-50" | 135 | class="p-1 icon-50" |
| 130 | src="assets/img/ir.svg"/> | 136 | src="assets/img/ir.svg"/> |
| 131 | </div> | 137 | </div> |
| 132 | </div> | 138 | </div> |
| 133 | </div> | 139 | </div> |
| 134 | </div> | 140 | </div> |
| 135 | </div> | 141 | </div> |
| 136 | </div> | 142 | </div> |
| 137 | </div> | 143 | </div> |
| 138 | </div> | 144 | </div> |
| 139 | </div> | 145 | </div> |
| 140 | 146 |