parent
7a12e6d4f7
commit
186351984f
@ -15,7 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-container__content">
|
<div class="card-container__content">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div *ngIf="accountData" class="row">
|
<div *ngIf="accountData" class="info__row">
|
||||||
<span class="key">Имя</span>
|
<span class="key">Имя</span>
|
||||||
<span class="value" *ngIf="userName.length">{{
|
<span class="value" *ngIf="userName.length">{{
|
||||||
userName
|
userName
|
||||||
@ -24,7 +24,7 @@
|
|||||||
>Не задано</span
|
>Не задано</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="accountData" class="row">
|
<div *ngIf="accountData" class="info__row">
|
||||||
<span class="key">Баланс карты</span>
|
<span class="key">Баланс карты</span>
|
||||||
<span class="value">{{ accountData.Bonuses }}</span>
|
<span class="value">{{ accountData.Bonuses }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -25,7 +25,6 @@
|
|||||||
background: #09467f;
|
background: #09467f;
|
||||||
box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
|
box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
height: 466px;
|
|
||||||
margin-top: 11px;
|
margin-top: 11px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
@ -56,7 +55,6 @@
|
|||||||
&__decorative-pattern {
|
&__decorative-pattern {
|
||||||
height: 122px;
|
height: 122px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
// padding-top: 9px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -64,11 +62,6 @@
|
|||||||
img {
|
img {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .imgs-row {
|
|
||||||
// background: url("./assets/card-decorative-pattern.png") repeat-x;
|
|
||||||
// height: 32%;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
@ -76,15 +69,15 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
height: 79px;
|
|
||||||
border-bottom: solid #fff 1px;
|
border-bottom: solid #fff 1px;
|
||||||
padding: 14px 18px;
|
padding: 14px 18px;
|
||||||
|
|
||||||
.row {
|
&__row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 7px;
|
margin-bottom: 7px;
|
||||||
|
gap: 90px;
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -145,11 +138,6 @@
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
// &__front {
|
|
||||||
// transform: rotateY(0deg);
|
|
||||||
// background-image: url(./assets/background.svg);
|
|
||||||
// }
|
|
||||||
|
|
||||||
&__back {
|
&__back {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
24
angular/src/app/pages/info/info.component.html
Normal file
24
angular/src/app/pages/info/info.component.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<p>info works!</p>
|
||||||
|
<mdb-carousel [controls]="true" [indicators]="true" [animation]="'fade'">
|
||||||
|
<mdb-carousel-item>
|
||||||
|
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp" class="d-block w-100" alt="..." />
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>First slide label</h5>
|
||||||
|
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||||
|
</div>
|
||||||
|
</mdb-carousel-item>
|
||||||
|
<mdb-carousel-item>
|
||||||
|
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp" class="d-block w-100" alt="..." />
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Second slide label</h5>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||||
|
</div>
|
||||||
|
</mdb-carousel-item>
|
||||||
|
<mdb-carousel-item>
|
||||||
|
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp" class="d-block w-100" alt="..." />
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5>Third slide label</h5>
|
||||||
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||||
|
</div>
|
||||||
|
</mdb-carousel-item>
|
||||||
|
</mdb-carousel>
|
||||||
0
angular/src/app/pages/info/info.component.scss
Normal file
0
angular/src/app/pages/info/info.component.scss
Normal file
23
angular/src/app/pages/info/info.component.spec.ts
Normal file
23
angular/src/app/pages/info/info.component.spec.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { InfoComponent } from './info.component';
|
||||||
|
|
||||||
|
describe('InfoComponent', () => {
|
||||||
|
let component: InfoComponent;
|
||||||
|
let fixture: ComponentFixture<InfoComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ InfoComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(InfoComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
39
angular/src/app/pages/info/info.component.ts
Normal file
39
angular/src/app/pages/info/info.component.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-info',
|
||||||
|
templateUrl: './info.component.html',
|
||||||
|
styleUrls: ['./info.component.scss']
|
||||||
|
})
|
||||||
|
export class InfoComponent implements OnInit {
|
||||||
|
public imageObject = [{
|
||||||
|
image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
|
||||||
|
thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
|
||||||
|
title: 'Hummingbirds are amazing creatures'
|
||||||
|
}, {
|
||||||
|
image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg',
|
||||||
|
thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg'
|
||||||
|
}, {
|
||||||
|
image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
|
||||||
|
thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
|
||||||
|
title: 'Example with title.'
|
||||||
|
}, {
|
||||||
|
image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/7.jpg',
|
||||||
|
thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/7.jpg',
|
||||||
|
title: 'Hummingbirds are amazing creatures'
|
||||||
|
}, {
|
||||||
|
image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/1.jpg',
|
||||||
|
thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/1.jpg'
|
||||||
|
}, {
|
||||||
|
image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/2.jpg',
|
||||||
|
thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/2.jpg',
|
||||||
|
title: 'Example two with title.'
|
||||||
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user