65.9K
CodeProject 正在变化。 阅读更多。
Home

MEAN Stack专业应用程序开发——第2部分

Yaseer Mumtaz
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2018年3月16日

CPOL

7分钟阅读

viewsIcon

12959

设置好基本的开发环境后，让我们来创建主布局和首页。

Content

引言

希望大家已经阅读了第一部分，并设置好了基本的开发环境。在这一部分，让我们来创建主布局和首页。根据文章长度，我会看看是否能在这里添加更多页面开发步骤。

开始吧

  1. 阅读第一部分并按照步骤创建基本项目布局和添加必要的库包。
    1. 在本部分，我们将使用两个第三方控件，一个是 Angular Google Map，我们将用它来显示公司地址。第二个是 ngx-carousel 控件，我们将用它来展示首页的顶部横幅和客户作品集。
    2. 让我们继续，安装这两个包并将它们的引用添加到 AppModule 中，拖动底部面板，然后进入 TERMINAL 选项卡，运行命令 cd mazharncoweb 进入 Angular 项目文件夹，然后运行以下命令：
      1. 运行命令：npm install @agm/core --save
      2. 运行命令：npm install ngx-carousel --save
    3. 这些包成功安装后，编辑 src -> app.module.ts 文件并添加如下引用：
      import { AgmCoreModule } from '@agm/core';
import { NgxCarouselModule } from 'ngx-carousel';

// In Import section
// API Keys is a Google Map key, you can go and generate your own. 
//Feel free to use this on if it works.

@NgModule({

  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyCKHGctDoGx1_YdAbRsPlJYQqlQeC6kR2E'
    }),
    NgxCarouselModule
 
//Rest of the code
  2. 在本部分，我们将开发主布局页面，也就是 Angular 中的 AppComponent，并创建一个首页。所以，基本上，我们将创建所有的 HTML、CSS 和一些 TypeScript 来支持 UI。本部分将不涉及任何服务器端编码。最后，您应该会看到以下页面：

  3. 让我们进入 src -> app -> app.component.html，删除其中的所有内容。让我们添加一些吸引人的东西。我们将创建一个带有 Logo、社交媒体链接的顶部，中间带有轮播控件，轮播下方将是我们的菜单、搜索栏、页脚等。
  4. 将以下 HTML 粘贴到 app.component.html 中，让我们来理解它：
    <div class="main_div">
  <mat-grid-list cols="10" rowHeight="2:1">
    <div>
      <mat-grid-tile>
        <div style="padding-left: 5px;">
          <img src='assets/images/logo1.png' class="mnc-logo" />
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]=8>
        <div class="socail_btn_padding">
          <img src="assets/images/fb_btn1.jpg" class="socail_btn image" />
          <img src="assets/images/skype_btn1.jpg" class="socail_btn image" />
          <img src="assets/images/twtr_btn1.jpg" class="socail_btn image" />
          <img src="assets/images/lkdin_btn1.jpg" class="socail_btn image" />
        </div>
      </mat-grid-tile>
      <mat-grid-tile [colspan]=1>
        <div style="text-align: left">
          <img src="assets/images/login_btn.png" class="lgn_btn image" />
        </div>
      </mat-grid-tile>
    </div>
    <mat-grid-tile [colspan]=10 [rowspan]=3>
      <ngx-carousel [inputs]="carouselBanner" [moveToSlide]="1">
        <ngx-item NgxCarouselItem>
          <div><img src='assets/images/banner_1.jpg' width="100%" /></div>
        </ngx-item>

        <ngx-item NgxCarouselItem>
          <div><img src='assets/images/banner_2.jpg' width="100%" /></div>
        </ngx-item>
        <button NgxCarouselPrev>&lt;</button>
        <button NgxCarouselNext>&gt;</button>
      </ngx-carousel>
    </mat-grid-tile>
  </mat-grid-list>
  <div>
    <nav class="navbar navbar-default navbar_shadow">
      <div class="container-fluid">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
               role="button" aria-haspopup="true" aria-expanded="false">Services 
               <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Management Consulting</a></li>
                <li><a href="#">Information Technology Solutions</a></li>
                <li><a href="#">Tax Compilance</a></li>
                <li><a href="#">Corporate Compilance</a></li>
                <li><a href="#">ISO Quality Services</a></li>
                <li><a href="#">Pre-Job Training</a></li>
                <li><a href="#">On-Job Training</a></li>
                <li><a href="#">Audit</a></li>
                <li><a href="#">Application Management</a></li>
              </ul>
            </li>
            <li><a href="#">Our Clients</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
              role="button" aria-haspopup="true" aria-expanded="false">About Us 
              <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Team</a></li>
              </ul>
            </li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
  <div class="clearfix" style="padding-top:10px; padding-bottom: 10px">
    <router-outlet></router-outlet>
  </div>

  <div style="padding-top: 30px">
    <mat-card>
      <mat-card-header class="header">
        <div mat-card-avatar class="vst_img"></div>
        <mat-card-title class="header_title">Visit Us</mat-card-title>
      </mat-card-header>
      <mat-card-content class="address_card_content">
        <div class="address_card_content_div">
          <div class="col-md-6">
            <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" 
                [disableDefaultUI]="false" [zoomControl]="false">
              <agm-marker *ngFor="let m of markers; let i = index"  
               [latitude]="m.lat" [longitude]="m.lng"
                [label]="m.label">
                <agm-info-window>
                  <strong>Mazhar & Co. Office # 19, First Floor, Mall Plaza, Mall Road
                  Rawalpindi, Pakistan  </strong>
                </agm-info-window>
              </agm-marker>
            </agm-map>
          </div>
          <div class="col-md-1"></div>
          <div class="col-md-5 address">
            Email:<a href="mailto:mazhar_rawalpindi@yahoo.com"> mazhar_rawalpindi@yahoo.com</a>
            <br>Website: <a href="http://www.mazharnco.com"> www.mazharnco.com</a>
            <br> Skype: <a href="skype:plug-shop?mazharmahmood786"> mazharmahmood786</a> 
            <br> Cell: <a href="tel:+92 333 5104584"> +92 333 5104584</a>
            <br> Tel: <a href="tel:+92 51 5680138"> +92 51 5680138</a> & 
                      <a href="tel:+92 51 2291858"> +92 51 2291858</a> <br>
            <hr><b> Head Office:</b> 
            <br> Office # 19, First Floor, Mall Plaza, Mall Road 
            <br> Rawalpindi, Pakistan 
            <br> Tel & Fax:
            <a href="tel:+92 51 5562241"> +92 51 5562241 </a><br>
            <hr><b> Branch office: </b>
            <br> H # 24, St # 54, F-11/3
            <br> Islamabad, Pakistan 
            <br> Tel: <a href="tel:+92 51 2291858"> +92 51 2291858</a><br>
          </div>
        </div>
      </mat-card-content>
      <mat-card-actions class="main_footer">
        <div>
          <div>
             © 2018 Mazhar & Co. All Rights Reserved.
            <button mat-button>Privacy Policy</button>
            <button mat-button>Contact Us</button>
          </div>
          <div class="main_footer_cred">
            Designed and Developed by <a style="color:#bfc4cc" 
              href="https://fullstackhub.io" target="_blank"> Fullstack Hub</a>
          </div>
        </div>
      </mat-card-actions>
    </mat-card>
  </div>
  <br>
</div>
  5. 如果您运行命令 ng serve -o 在浏览器中查看，您只会看到一堆乱码，因为还有很多 CSS 类我们还没有添加。
  6. 您可以看到顶部，我们将所有 HTML 放在一个主 div 中，并应用了一个 CSS 类 main_div，这只是为了添加一些内边距并避免水平滚动条，您会在稍后的步骤中看到所有 CSS 类，当我们更新 app.component.css 文件时。
  7. 下一行，我们正在使用 Angular Material 的 mat-grid-list 组件。它与 Bootstrap 的网格系统几乎相同，但我个人觉得它更难管理，尽管您可以定义列数、行跨度和更多属性。我只是用它来演示它的工作原理，您可以随意将其更改为 Bootstrap 网格系统。此部分包含我们的 Logo、社交媒体链接、登录按钮和轮播控件。随意探索 ngx-carousel 控件，它非常棒。
  8. 下一部分是 Bootstrap 的 Navbar 控件，只需定义菜单项，我们将在后续部分添加链接，最终所有菜单项都将从数据库加载。
  9. 在 navbar 控件下方，我们有一个 router-outlet Angular 指令，用于加载我们所有的其他组件。
  10. 下一部分是页脚。我们正在使用另一个第三方控件 agm-map 来显示 Google 地图。虽然我只用它来在地图上显示地址，但这是一个非常全面的控件，如果您需要在 Angular 应用程序中使用更多 Google 地图功能，可以去查看一下。其余部分都比较容易理解。
  11. 所以，我们已经在 app.component.html 中添加了 HTML，现在是时候用 CSS 来美化它了。编辑 app -> app.component.css 文件，并将其内容（如果有）替换为以下内容：
    .main_div{
  overflow-x: hidden;
  overflow-y: hidden;
  padding-left: 5px;
  padding-right: 5px; 
}
.mnc-logo{
  width: 100%;
  max-width: 350px;
  height: auto;
}
.socail_btn_padding{
   padding-top:0px; 
}
.socail_btn{
  width: 100%;
  max-width: 40px;
  height: auto;
  cursor: pointer;
}
.image {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

.image:hover {
  opacity: 0.4;
}

.navbar_shadow{
  box-shadow: 5px 5px 8px #bfc4cc
}
.map_div{
    padding-top: 10px;
}
.vst_img{
    width: 48px;
    height: 48px;
    background-image: url("../assets/images/visitus.png");
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-size: cover;
  }
.header{
background: #45484d;
border-bottom: 5px solid #393B3E;
height: 50px;
padding-left: 5px;
}
.header_title{
    vertical-align:baseline;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #A1A9AF;
}
mat-card{
  margin: 0px;
  padding: 0px;
}
mat-card-content{
  margin: 0px;
  padding: 0px;
}
agm-map {
    height: 335px;
  }
.map_div{
    width: 100%;
    max-width: 500px;
    height: auto;
  }
.lgn_btn
  {
    width: 100%;
    max-width: 150px;
    height: auto;
    cursor: pointer;
  }
.bannerStyle h1 {
    background-color: #ccc;
    min-height: 300px;
    text-align: center;
    line-height: 300px;
}
.address{
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", 
               "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
  font-weight: 500;
  color: #393B3E;
}
.address_card_content{
  padding-top: 10px; 
  padding-bottom: 10px;
}

.address_card_content_div{
  height: 350px;
  padding-top: 10px;
  padding-bottom: 10px;
}

a {
  color: #425D84;
  text-decoration: none;
}
.main_footer{
    color: #B4BAC3;
    vertical-align: bottom;
    background-color: #575A5C;
    height: 55px;
    text-align: center;
    background-clip: content-box;
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}  
.main_footer_cred{
    color: #ffffff;
    vertical-align: bottom;
    background-color: #535658;
    height: 55px;
    text-align: center;
    background-clip: content-box;  
}
  12. 这些是我们正在 app.component.html 中使用的所有 CSS 类。您可以仔细查看并在 HTML 中找到它们的应用位置。我喜欢为每个组件保留一个单独的 CSS 文件以提高灵活性，如果您想将相同的 CSS 类合并到一个全局样式表中，请将其添加到 src -> style.css 文件中。（在此应用程序中我没有使用它，只是为了保留项目。）
  13. 由于我们在应用程序中还使用 Bootstrap 的 CSS/JS，并且有一些图片，例如 Logo、社交网站图标、横幅等，现在是时候将它们添加到我们的项目中了。
  14. 浏览 src -> assets 文件夹，并在其中创建三个文件夹：
    1. 图像
    2. js
    3. css
  15. 点击 此链接，下载其中的图片、js 和 css。请随意更改图片或获取最新版本的 Bootstrap。
  16. 添加 Bootstrap 的 CSS 和 JS 文件后，我们需要将其引用添加到我们的应用程序中。编辑 src -> index.html 并添加 Bootstrap 的 CSS 和 JavaScript 的引用，您的最终 index.html 文件应如下所示：
    <code><!doctype html>
<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
  <script src="/assets/js/jquery.min.js"></script>
  <script src="/assets/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Mazhar and Co</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html></code>
  17. 我们还添加了 jQuery 引用，因为 Bootstrap 依赖于它。我们不使用它的任何其他功能。
  18. 对于 Angular Google Map 和 ngx-carousel 控件，有一些属性我们需要设置，我们将在 app.component.ts 中进行。您可以在这些组件的 GitHub 页面中轻松找到这些设置。进入 app -> app.component.ts 并将其内容替换为以下内容：
    import { Component, OnInit } from '@angular/core';
import { NgxCarousel, NgxCarouselStore } from 'ngx-carousel';
import { MouseEvent } from '@agm/core';

interface marker {
  lat: number;
  lng: number;
  label?: string;
  draggable: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  public carouselBanner: NgxCarousel;
  title = 'app';

  zoom: number = 8;
  lat: number = 33.593742;
  lng: number = 73.050849;

  markers: marker[] = [
    {
      lat: 33.593742,
      lng: 73.050849,
      label: 'A',
      draggable: false
    }
  ];

  ngOnInit() {
    this.carouselBanner = {
      grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
      slide: 2,
      speed: 400,
      interval: 4000,
      point: {
        visible: true,
        pointStyles: `
          .ngxcarouselPoint {
            list-style-type: none;
            text-align: center;
            padding: 12px;
            margin: 0;
            white-space: nowrap;
            overflow: auto;
            position: absolute;
            width: 100%;
            bottom: 20px;
            left: 0;
            box-sizing: border-box;
          }
          .ngxcarouselPoint li {
            display: inline-block;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.55);
            padding: 5px;
            margin: 0 3px;
            transition: .4s ease all;
          }
          .ngxcarouselPoint li.active {
              background: white;
              width: 10px;
          }
        `
      },
      load: 2,
      loop: true,
      touch: true
    }
  }
}
  19. 对于 Angular Google Map，我们指定了要显示在地图上的位置的 latitude 和 longitude（我通过 Google Map 获取的）以及图钉标签。
  20. 对于轮播，我们采用 GitHub 页面上给出的设置，只是将幻灯片数量更改为 2。欢迎您随意修改这些属性。
  21. 这就是我们的主布局 AppComponent 的全部内容了，继续运行命令 ng serve -o 在浏览器中打开页面，您应该能够看到带有页眉和页脚的页面。如果您遇到任何问题，请告诉我。
  22. 接下来，让我们创建一个首页，其中将包含介绍文字、新闻和精选客户列表。进入 TERMINAL 并运行命令：ng g c client/home 来创建一个新组件，并将其引用添加到 AppModule 中。（在 ng 命令中，g 是 generate 的缩写，c 是 component 的缩写，使用此快捷方式可以节省您宝贵时间中的几毫秒。）
  23. 编辑 app -> client -> home.component.html 并将其内容替换为以下内容：
    <div class="row">
  <div class="col-sm-8">
    <mat-card class="card_size mat-card-noshadow">
      <mat-card-header class="header">
        <mat-card-title class="header_title">
        <i class="material-icons" style="vertical-align: middle">turned_in
        </i> Welcome to Mazhar & C0.</mat-card-title>
      </mat-card-header>
      <mat-card-content class="card_cntnt">
        <div>
          <p>CONNECTING YOUR BUSINESS TO THE TECHNOLOGY RESOURCES YOU NEED</p>
          <p>
            MMC, a firm of Cost & Management Accountants, provides quality services 
            in the areas of Cost & Financial Accounting, Audit,
            Tax & Corporate Compliance, Management Consulting, 
            Business Management, Quality Management, Research & Development,
            performance audit, feasibility reports, PPRA rules, 
            Information Technology Solutions, Website development, anti
            dumping / antitrust, bridging the gap between investor and businessman, 
            HR policy and any kind of business solution
            as per requirement of clients.
          </p>
        </div>
        <div>
          <div class="col-sm-4">
            <mat-card>
              <mat-card-header class="subheader">
                <mat-card-title class="subheader_title">
                <i class="material-icons icon">visibility</i> Vision</mat-card-title>
              </mat-card-header>
              <mat-card-content style="height: 160px" class="card_cntnt">
                To add the value in the business to make it competent both at 
                national and international level.
              </mat-card-content>
            </mat-card>
          </div>
          <div class="col-sm-4">
            <mat-card>
              <mat-card-header class="subheader">
                <mat-card-title class="subheader_title">
                <i class="material-icons icon">brightness_auto</i> Values</mat-card-title>
              </mat-card-header>
              <mat-card-content style="height: 160px" class="card_cntnt">
                Respect, honesty, customer satisfaction and team work at 
                both within and out side the organization is our core value.
              </mat-card-content>
            </mat-card>
          </div>
          <div class="col-sm-4">
            <mat-card>
              <mat-card-header class="subheader">
                <mat-card-title class="subheader_title">
                <i class="material-icons icon">my_location</i> Mission</mat-card-title>
              </mat-card-header>
              <mat-card-content style="height: 160px" class="card_cntnt">
                To induce the business community to adopt the culture of using the 
                IT based Financial and Accounting information for enhancing
                their capabilities regarding economy, efficiently & effectiveness.
              </mat-card-content>
            </mat-card>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="col-sm-4">
    <div>
      <mat-card>
        <mat-card-header class="header">
          <mat-card-title class="header_title">
          <i class="material-icons">&#xE0E5;</i> Latest News</mat-card-title>
        </mat-card-header>
        <mat-card-content class="card_cntnt card_cntnt_scoll" >
          <div>
            <ul>
              <li>Download Community Entrepreneurship Economic Model (CEEM)
              <a href="http://www.mazharnco.com/Executive_Summary.pdf"> 
              <i style="vertical-align: bottom" class="material-icons">file_download</i>
              </a>
              <li>Check Client Work Status (coming soon)
              <li>Download Community Entrepreneurship Economic Model (CEEM)
              <a href="http://www.mazharnco.com/Executive_Summary.pdf"> 
              <i style="vertical-align: bottom" class="material-icons">file_download</i>
              </a>
            </ul>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
    <div style="padding-top: 35px;">
      <mat-card>
        <mat-card-header class="header">
          <mat-card-title class="header_title"><i 
          class="material-icons">rate_review</i> Clients Reviews</mat-card-title>
        </mat-card-header>
        <mat-card-content style="height: 165px">
          <div class="slider">
            <input type="radio" name="slider" 
            title="slide1" checked="checked" class="slider__nav" />
            <input type="radio" name="slider" 
            title="slide2" class="slider__nav" />
            <input type="radio" name="slider" 
            title="slide3" class="slider__nav" />
            <input type="radio" name="slider" 
            title="slide4" class="slider__nav" />
            <div class="slider__inner">
              <div class="slider__contents">
                <h2 class="slider__caption">codepen</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, 
                consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
              <div class="slider__contents">
                <h2 class="slider__caption">newspaper-o</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, 
                consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
              <div class="slider__contents">
                <h2 class="slider__caption">television</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, 
                consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
              <div class="slider__contents">
                <h2 class="slider__caption">diamond</h2>
                <p class="slider__txt">Lorem ipsum dolor sit amet, 
                consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis
                  minima!
                </p>
              </div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
<div class="clearfix" style="padding-bottom: 30px"></div>
<div>
  <mat-card>
    <mat-card-header class="header">
      <div mat-card-avatar class="clnt_img"></div>
      <mat-card-title class="header_title">Our Client</mat-card-title>
    </mat-card-header>
    <ngx-carousel [inputs]="carouselTile">
      <ngx-tile NgxCarouselItem *ngFor="let Tile of carouselTileItems" 
       style="text-align: center;">
        <img [src]='Tile.url' class="carsoul_img" />
        <div class="clients_slider"><a target="_blank" 
        href='{{Tile.web}}'><i style="vertical-align: bottom" 
        class="material-icons">&#xE80B;</i></a>          
        {{Tile.name}}</div>
        <div class="clients_slider">Service: <b> {{Tile.work}}</b></div>
      </ngx-tile>
      <span NgxCarouselPrev></span>
      <span NgxCarouselNext></span>
    </ngx-carousel>
  </mat-card>
</div>
  24. 所以在这个页面中，我们使用了 Angular Material 组件库中的几个我喜欢的 mt-card 组件。这里，我使用了 Bootstrap 网格系统，它看起来更易于使用。几乎所有的代码都容易理解，但在接近底部的地方，您会看到 div class="slider"。这实际上是客户评价控件，我从一个 codepen 页面 复制过来的。这是一个非常简单的纯 CSS 控件。最后，我们使用了 ngx-carousel，但这次它显示的是我们通过 Angular ngFor 循环动态生成的图块式图片。
  25. 接下来，让我们为首页添加 CSS。编辑 app -> client -> home.component.css 并将其内容替换为以下内容：
    mat-card
{
  margin: 0px;
  padding: 0px;
}

mat-card-noshadow{ 
    background: #ECECF4;
    box-shadow: none !important;
}

mat-card-content{
  margin: 0px;
  padding: 0px;
}

.header
{
background: #45484d;
border-bottom: 5px solid #393B3E;
height: 50px;
padding-left: 5px;
}

.subheader
{
height: 40px;
background: #5B5C60;
}

.subheader_title{
    vertical-align:baseline;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 13pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #C8CCD2;
}

.header_title{
    vertical-align:baseline;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5px;
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #A1A9AF;
}

.card_cntnt
{
    padding: 15px;
    padding-bottom: 15px;
}

.card_cntnt_scoll
{
    padding-top:5px;
    padding-bottom: 5px;
    height: 150px;
    overflow-y: auto;
}

.card_size{
    height:450px;
}
.sub_card_size
{
    height: 60px;
}
.icon
{
    vertical-align:bottom; 
    text-shadow: 1px 1px 2px #928B8B, 0 0 25px #46464A, 0 0 5px #BFBFCA;
}

  .leftRs {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      box-shadow: 1px 2px 10px -1px rgba(22, 3, 3, 0.30);
      border-radius: 999px;
      left: 0;
  }

  .rightRs {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      box-shadow: 1px 2px 10px -1px rgba(38, 5, 5, 0.30);
      border-radius: 999px;
      right: 0;
  }

  .carsoul_img{
    max-width: 150px;;
    height: 130px;
    text-align: center;
  }

  .clients_slider
  {
      background-color: rgb(51, 53, 57);
      color: #D1D1DB;
      text-decoration:none;
  }

  .clnt_img
  {
    width: 48px;
    height: 48px;
    background-image: url("../../../assets/images/clients-icon.png");
    background-size: cover;
  }


  *, *:before, *:after {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    color: #444;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .slider {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .slider__nav {
    width: 12px;
    height: 12px;
    margin: 2rem 12px;
    border-radius: 50%;
    z-index: 10;
    outline: 6px solid #ccc;
    outline-offset: -6px;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .slider__nav:checked {
    -webkit-animation: check 0.4s linear forwards;
            animation: check 0.4s linear forwards;
  }
  .slider__nav:checked:nth-of-type(1) ~ .slider__inner {
    left: 0%;
  }
  .slider__nav:checked:nth-of-type(2) ~ .slider__inner {
    left: -100%;
  }
  .slider__nav:checked:nth-of-type(3) ~ .slider__inner {
    left: -200%;
  }
  .slider__nav:checked:nth-of-type(4) ~ .slider__inner {
    left: -300%;
  }
  .slider__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 100%;
    -webkit-transition: left 0.4s;
    transition: left 0.4s;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
  }
  .slider__contents {
    height: 100%;
    padding: 2rem;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .slider__image {
    font-size: 2.7rem;
        color: #2196F3;
  }
  .slider__caption {
    font-weight: 500;
    margin: 2rem 0 1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
  }
  .slider__txt {
    color: #999;
    margin-bottom: 3rem;
    max-width: 300px;
  }
  
  @-webkit-keyframes check {
    50% {
      outline-color: #333;
      box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
    }
    100% {
      outline-color: #333;
      box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    }
  }
  
  @keyframes check {
    50% {
      outline-color: #333;
      box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
    }
    100% {
      outline-color: #333;
      box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
    }
  }
  26. 同样，我将 CSS 保持在组件范围内，但您可以随时将其放入 app -> style.css 文件中进行全局使用。所有滑块 CSS 类都用于 codepen 评价控件，所以您不必完全理解它，其余部分都比较容易理解。
  27. 现在，我们需要更新 home.component.ts 来包含具有客户名称、网站和提供的服务的客户图块。编辑 app -> client -> home.component.ts 并将其内容替换为以下内容：
    import { Component, OnInit } from '@angular/core';
import { NgxCarousel } from "ngx-carousel";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public carouselTileItems: Array<any>;
  public carouselTile: NgxCarousel;

  ngOnInit() {
    this.carouselTileItems =
      [{
        "url": "../../assets/images/mnp_logo.png", "work": "Internal & forensic Audit",
        "name": "Muller & Phipps Pakistan", "web": "http://mulphico.pk"
      },
      {
        "url": "../../assets/images/bisp_logo.jpg", "work": "Service Rules",
        "name": "Benizeer Income Support", "web": "http://www.bisp.gov.pk"
      },
      {
        "url": "../../assets/images/icma_logo.png", "work": "Articles on Economy",
        "name": "ICMA Pakistan. ", "web": "http://www.icmap.com.pk"
      },
      {
        "url": "../../assets/images/nr_logo.gif", "work": "Corporate Compliance",
        "name": "NR Soft (Pvt) Ltd.", "web": "http://www.nrsoft.com"
      },
      {
        "url": "../../assets/images/smda_logo.jpg", "work": "Pre-feasibility studies",
        "name": "SMEDA", "web": "http://www.smeda.org"
      },
      {
        "url": "../../assets/images/askri_logo.jpg", "work": "Rebate & Tax - refund",
        "name": "Askari Cement (Pvt) Ltd.", "web": "http://www.askaricement.com.pk"
      }];

    this.carouselTile = {
      grid: { xs: 2, sm: 3, md: 3, lg: 5, all: 0 },
      slide: 6,
      speed: 400,
      animation: 'lazy',
      point: {
        visible: true,
        pointStyles: `
          .ngxcarouselPoint {
            list-style-type: none;
            text-align: center;
            padding: 5px;
            margin: 0;
            white-space: nowrap;
            overflow: auto;
            box-sizing: border-box;
          }
          .ngxcarouselPoint li {
            display: inline-block;
            border-radius: 50%;
            border: 2px solid rgba(0, 0, 0, 0.55);
            padding: 4px;
            margin: 0 3px;
            transition-timing-function: cubic-bezier(.17, .67, .83, .67);
            transition: .4s;
          }
          .ngxcarouselPoint li.active {
              background: #6b6b6b;
              transform: scale(1.2);
          }
        `
      },
      load: 2,
      touch: true,
      easing: 'ease'
    }
  }
}
  28. 这些设置取自 ngx-carousal 官方网站，除了我们创建了 carousalTileItems 变量，其中包含客户信息的 JSON 对象，我们在 home.component.html 中使用 ngFor 循环遍历它。
  29. 我们需要实现的最后一步是创建一个 home 组件的路由。右键单击 app 文件夹，选择“新建文件”选项。输入名称 app-routing.module.ts，然后按 Enter。编辑此文件并粘贴以下内容：
    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "./client/home/home.component";

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  30. 在第一个路由路径中，我们定义了当输入默认 URL 而没有路径时，将其重定向到 home 路由。创建更多页面时，我们会继续更新它。
  31. 在 TERMINAL 中输入命令：ng serve -o 并查看页面。您应该会看到一个功能完整的页面，如下所示：

  32. 太棒了，这一部分就到这里。我们将继续开发以添加更多页面。
© . All rights reserved.