Andrey
/
NIR-QR-code-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

routing complete

master
Boris Voropaev 2024-05-24 12:44:10 +03:00
parent 0f319c1651
commit fbedda1c51
11 changed files with 331 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/_services/seo.service.ts
View File

@ -1,6 +1,6 @@
import {Injectable} from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';
import { environment } from '../../environments/environment';
import { Router } from '@angular/router';
import { filter } from "rxjs/operators";
@ -16,7 +16,7 @@ export class SEOService {
)
.subscribe(
(event)=>{
console.log(event.routerEvent.url);
console.log('Seo', event.routerEvent.url);
let data = this.seoData[event.routerEvent.url]
if(data){
this.updateTitle(data.title);

82
src/app/about/about.component.html Normal file
View File

@ -0,0 +1,82 @@
<div class="row jumb">
<div class="col-6">
<h1>О нас</h1>
<h5 class="jumb-slogan">
&#8203;
</h5>
<request>
<button class="btn primary">Напишите нам</button>
</request>
</div>
<div class="col-6">
<img class="jumb-card" src="assets/img/about.jpg" alt="">
</div>
</div>
<div class="row bg-light">
<div class="col-4">
<h2>Кто мы</h2>
</div>
<div class="col-8">
ООО «НИР» — российская ИТ-компания, специализирующаяся на разработке импортонезависимого ПО и автоматизации сложных процессов. С 2016 года мы беремся за самые амбициозные проекты и выполняем их точно в срок.
</div>
</div>
<div class="row mission">
<div class="col-6 mission-left"></div>
<div class="col-6 mission-right">
<h2>Наша миссия</h2>
<div>Мы хотим сделать жизнь людей проще. Для этого мы упрощаем их работу, передавая рутинные и трудоемкие задачи компьютерам, освобождая время для более важных дел.</div>
</div>
</div>
<div class="row bg-light">
<div class="col-12 center">
<h2>Факты о нас</h2>
</div>
<div class="col-12 card bg-white facts">
<div>
<h2 class="primary">8 лет</h2>
на рынке
</div>
<div>
<h2 class="primary">100+</h2>
реализованных проектов
</div>
<div>
<h2 class="primary">500+</h2>
на рынке
</div>
<div>
<h2 class="primary">№&nbsp;12571</h2>
Аккредитация в Минцифры
</div>
</div>
</div>
<div class="row howork">
<div class="col-6 howork-left">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="col-6 howork-right">
<h2>Как мы работаем</h2>
<div class="howork-item" *ngFor="let item of menu" (click)="select(item.number)">
<h5 class="howork-number">{{item.number}}</h5>
<div class="howork-caption">
<h5>{{item.header}}</h5>
<div [hidden]="hide(item.number)">{{item.caption}}</div>
<div [hidden]="hide(item.number)" class="timing">{{item.timing}}</div>
</div>
</div>
</div>
</div>
<div class="row bg-light">
<reviews></reviews>
</div>

127
src/app/about/about.component.scss Normal file
View File

@ -0,0 +1,127 @@
.facts{
margin-top: 30px;
}
// .card-sm{
// margin-top: 30px;
// }
// .facts-logo div{
// display: flex;
// align-items: center;
// }
.mission{
.mission-left{
border-radius: 16px;
background-size: cover;
background-position: center;
background-image: url("/assets/img/about-mission.jpg");
aspect-ratio: 2.1;
}
.mission-right{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 30px;
}
}
.howork{
.howork-left{
border-radius: 16px;
background-size: cover;
background-position: center;
background-image: url("/assets/img/about-howork.jpg");
aspect-ratio: 582 / 642;
height: 642px;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
gap: 30px;
>div{
width: calc(50% - 15px);
box-shadow: 0 0 0 30px #FFF;
border-radius: 16px;
aspect-ratio: 1;
&:first-child, &:last-child{
width: auto;
margin-bottom: auto;
background-color: #FFF;
aspect-ratio: none;
flex-grow: 1;
flex-shrink: 1;
}
}
}
.howork-right{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 60px;
.howork-item{
display: flex;
flex-direction: row;
gap: 30px;
cursor: pointer;
.howork-caption{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
.timing{
color: var(--Primary-1D45F0, #1D45F0);
font-size: 20px;
font-weight: 600;
line-height: 28px;
}
}
}
}
}
@media screen and (max-width: 1240px){
.jumb-slogan{
margin-block: 0;
}
.facts{
margin-top: 10px;
}
.howork{
.howork-left{
height: 105vw;
width: 100%;
}
.howork-right{
gap: 30px;
.howork-item{
display: flex;
flex-direction: row;
gap: 30px;
cursor: pointer;
h5{
margin: 0;
}
}
}
}
.howork{
.howork-left{
height: 135%;
width: 100%;
}
.howork-right{
gap: 30px;
h5{
margin-block: 10px;
}
}
}
}

23
src/app/about/about.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutComponent } from './about.component';
describe('AboutComponent', () => {
let component: AboutComponent;
let fixture: ComponentFixture<AboutComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AboutComponent]
})
.compileComponents();
fixture = TestBed.createComponent(AboutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

65
src/app/about/about.component.ts Normal file
View File

@ -0,0 +1,65 @@
import { Component } from '@angular/core';
import { SEOService } from '../_services/seo.service';
import { RequestComponent } from '../request/request.component';
import { ReviewsComponent } from '../reviews/reviews.component';
import { NgFor } from '@angular/common';
@Component({
selector: 'about',
standalone: true,
imports: [NgFor, RequestComponent, ReviewsComponent],
templateUrl: './about.component.html',
styleUrl: './about.component.scss'
})
export class AboutComponent {
constructor(private seo:SEOService){}
public act: number = 1;
public menu = [
{
number: 1,
header:'Знакомство',
caption:'Мы встречаемся с Вами, обсуждаем задачи, визуализируем процессы и готовим КП',
timing:'2 недели'
},
{
number: 2,
header:'Погружение в детали',
caption:'Составление ТЗ и договора, согласование и подписание',
timing:'1–2 недели'
},
{
number: 3,
header:'Внутренние работы',
caption:'Нашу работу не видно. Проектирование и создание архитектуры системы, оцифровка процессов, создание технического интерфейса.',
timing:'4–10 недель'
},
{
number: 4,
header:'Внешние работы',
caption:'Нашу работу уже можно посмотреть. Создание пользовательского интерфейса, предоставление системы для тестирования, внесение правок после теста.',
timing:'2–5 недель'
},
{
number: 5,
header:'Завершение работ',
caption:'Сдаем готовый продукт, помогаем с его вводом в эксплуатацию, отвечаем на возникающие вопросы',
timing:'до 2 недель'
},
]
select(i:number){
if (i==this.act) {
this.act = 0
} else {
this.act = i
}
}
hide(i:number){
return i!=this.act
}
}

4
src/app/app.component.html
View File

@ -2,11 +2,11 @@
<div class="header-shadow" [hidden]="!navShow" (click)="navShow = false"></div>
<nav>
<a href="" class="top-logo">
<a href class="top-logo" routerLink="/">
<img src="assets/img/nir_logo_top.svg">
</a>
<div class="nav-items" [class.nav-hide]="!navShow">
<a href routerLink="about" routerLinkActive="active" (click)="navShow = false">О нас</a>
<a href routerLink="/about" routerLinkActive="active" (click)="navShow = false">О нас</a>
<a href routerLink="automatization" routerLinkActive="active" (click)="navShow = false">Автоматизация</a>
<a href routerLink="sites" routerLinkActive="active" (click)="navShow = false">Сайты</a>
<a href routerLink="development" routerLinkActive="active" (click)="navShow = false">Разработка</a>

6
src/app/app.component.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core';
import { DatePipe, ViewportScroller } from '@angular/common';
import { RouterOutlet, NavigationEnd, Router } from '@angular/router';
import { CommonModule, DatePipe, ViewportScroller } from '@angular/common';
import { RouterOutlet, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, DatePipe],
imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, DatePipe],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})

24
src/app/app.routes.ts
View File

@ -1,6 +1,30 @@
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
// import { AutomatizationComponent } from './automatization/automatization.component';
// import { DevelopmentComponent } from './development/development.component';
// import { SitesComponent } from './sites/sites.component';
// import { ProjectsComponent } from './projects/projects.component';
// import { ContactsComponent } from './contacts/contacts.component';
// import { VniigazComponent } from './projects/vniigaz/vniigaz.component';
// import { FaufcsComponent } from './projects/faufcs/faufcs.component';
// import { Tk023Component } from './projects/tk023/tk023.component';
// import { Tk465Component } from './projects/tk465/tk465.component';
// import { ScvgComponent } from './projects/scvg/scvg.component';
// import { IntergazComponent } from './projects/intergaz/intergaz.app.routescomponent';
export const routes: Routes = [
{path: "", component: HomeComponent},
{path: "about", component: AboutComponent},
// {path: "automatization", component: AutomatizationComponent},
// {path: "development", component: DevelopmentComponent},
// {path: "contacts", component: ContactsComponent},
// {path: "sites", component: SitesComponent},
// {path: "projects", component: ProjectsComponent},
// {path:'projects/vniigaz', component: VniigazComponent},
// {path:'projects/faufcs', component: FaufcsComponent},
// {path:'projects/tk023', component: Tk023Component},
// {path:'projects/tk465', component: Tk465Component},
// {path:'projects/scvg', component: ScvgComponent},
// {path:'projects/intergaz', component: IntergazComponent}
];

10
src/app/home/home.component.html
View File

@ -121,15 +121,5 @@
<div class="row">
<!-- <div class="container">
<h1>Swiper Elements</h1>
<swiper-container>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
</swiper-container>
</div> -->
<reviews></reviews>
</div>

4
src/app/home/home.component.ts
View File

@ -2,6 +2,7 @@ import { NgFor } from '@angular/common';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RequestComponent } from '../request/request.component';
import { ReviewsComponent } from '../reviews/reviews.component';
import { SEOService } from '../_services/seo.service';
@Component({
selector: 'home',
@ -12,7 +13,8 @@ import { ReviewsComponent } from '../reviews/reviews.component';
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomeComponent {
// constructor(private seo:SEOService){}
constructor(private seo:SEOService){}
public act: number = 1;

13
src/app/reviews/reviews.component.ts
View File

@ -63,19 +63,6 @@ export class ReviewsComponent {
},
};
event(event){
console.log('swiper',event)
}
ngAfterViewInit(){
console.log(this.desktopSwiper.nativeElement.swiper)
console.log(this.config)
// this.desktopSwiper.nativeElement.swiperParams=Object.assign(
// this.desktopSwiper.nativeElement.swiperParams,
// this.config
// )
}
onSwiperInit(){
this.mobileText?.swiperRef?.slideTo(1);
this.init = true