feat: add carousels

Author: swliu920322

src/app/components/components.module.ts

@@ -15,11 +15,13 @@ import { Exception404Component } from './exception/404.component';
 import { Exception500Component } from './exception/500.component';
 import { HomePageComponent } from '@components/homepage/home-page.component';
 import { ExcellentProjectComponent } from '@components/homepage/excellent-project/excellent-project.component';
+import { HomeCarouselComponent } from '@components/homepage/home-carousel/home-carousel.component';
 
 const COMPONENTS = [
   DashboardComponent,
   HomePageComponent,
   ExcellentProjectComponent,
+  HomeCarouselComponent,
   // passport pages
   UserLoginComponent,
   UserRegisterComponent,

src/app/components/homepage/home-carousel/home-carousel.component.html

@@ -0,0 +1,13 @@
+<nz-carousel nzAutoPlay>
+	<div nz-carousel-content *ngFor="let item of carousels" class="home-item">
+		<img [src]="item.url" class="home-item-img">
+		<div class="home-item-show">
+			<span class="home-item-show__first">近23万优秀开发者</span>
+			<span class="home-item-show__second">您的专属云端开发团队</span>
+			<div>
+				<span class="button-create" (click)="create()">新建项目</span>
+				<span class="button-group" (click)="joinGroup()">快速组队</span>
+			</div>
+		</div>
+	</div>
+</nz-carousel>`

src/app/components/homepage/home-carousel/home-carousel.component.less

@@ -0,0 +1,54 @@
+/deep/ .carousel {
+  display: block;
+  margin-bottom: 50px;
+}
+
+.home-item {
+  position: relative;
+
+  &-img {
+    max-width: 100%;
+  }
+
+  &-show {
+    position: absolute;
+    left: 5px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &__first {
+      color: #4688f1;
+      font-size: 35px;
+    }
+
+    &__second {
+      font-size: 35px;
+      color: #18262a;
+      margin: 16px 0 30px 0;
+    }
+
+    .button-common {
+      padding: 10px 20px;
+      cursor: pointer;
+    }
+
+    .button-create {
+      .button-common;
+      color: black;
+      border: 1px solid black;
+    }
+
+    .button-group {
+      .button-common;
+      color: #40aea8;
+      border: 1px solid #40aea8;
+      margin-left: 20px;
+    }
+  }
+
+  //max-height: 459px;
+}

src/app/components/homepage/home-carousel/home-carousel.component.ts

@@ -0,0 +1,40 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'page-home-carousel',
+  templateUrl: './home-carousel.component.html',
+  styleUrls: ['./home-carousel.component.less']
+})
+export class HomeCarouselComponent {
+  @HostBinding('class.carousel') car = true;
+
+  constructor(private router: Router) {}
+
+  @Input() carousels: Array<object> = [
+    {
+      path: '',
+      url:
+        'http://img17.3lian.com/d/file/201702/20/d5d692b492df805ad8a4cb61fd1c73d3.jpg'
+    },
+    {
+      path: '',
+      url:
+        'http://img17.3lian.com/d/file/201702/20/7d3079c4ca0d11a0126116100d1ca3dd.jpg'
+    },
+    {
+      path: '',
+      url:
+        'http://img17.3lian.com/d/file/201702/20/ec4acb80b76b3e84fe58f48b558908d3.jpg'
+    },
+    {
+      path: '',
+      url:
+        'http://img17.3lian.com/d/file/201702/20/a7c84a0702d14a073f76dda56f71dec0.jpg'
+    }
+  ];
+
+  create = () => {};
+
+  joinGroup = () => {};
+}

src/app/components/homepage/home-page.component.html

@@ -1 +1,2 @@
+<page-home-carousel></page-home-carousel>
 <page-excellent-project></page-excellent-project>

src/app/components/homepage/home-page.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'page-home-page',
   templateUrl: './home-page.component.html'
 })
-export class HomePageComponent {}
+export class HomePageComponent {
+  @HostBinding('style.display') dis = 'block';
+}