国际站-HEROES
  1. Components
  2. DashboardComponent

File

src/app/layout/dashboard/dashboard.component.ts

Implements

OnInit

Metadata

selector app-dashboard
styleUrls ./dashboard.component.less
templateUrl ./dashboard.component.html

Index

Properties
Methods

Constructor

constructor(router: Router)
Defined in src/app/layout/dashboard/dashboard.component.ts:11
Parameters :
Name Type Optional
router Router No

Methods

ngOnInit
ngOnInit()
Defined in src/app/layout/dashboard/dashboard.component.ts:17
Returns : void

Properties

Public path
Type : string
Defined in src/app/layout/dashboard/dashboard.component.ts:11
 
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  public path: string;

  constructor(private router: Router) {
    this.path = this.router.url;
  }

  ngOnInit(): void {
  }

}
Copy
<nz-layout>
  <nz-header>
    <a class="logo" routerLink="/dashboard"></a>
    <p class="welcome">
      <i nz-icon [nzType]="'smile'" [nzTheme]="'outline'" [nzTheme]="'twotone'"></i> :
      Sans la liberté de blâmer, il n'est point d'éloge flatteur - 若批评不自由，则赞美无意义。
    </p>
  </nz-header>
  <nz-content>
    <nz-breadcrumb>
      <nz-breadcrumb-item><a routerLink="/dashboard">首页</a></nz-breadcrumb-item>
      <nz-breadcrumb-item>仪表盘</nz-breadcrumb-item>
    </nz-breadcrumb>
    <div class="inner-content">
      <div nz-row [nzGutter]="24">
        <div nz-col>
          <nz-card nzHoverable [nzCover]="coverTemplate1" routerLink="/html-builder/page-editor"
            [nzBodyStyle]="{'textAlign':'center'}">
            <nz-card-meta nzTitle="HTML构建工具 v2.0" nzDescription="开发中....勿进！"></nz-card-meta>
          </nz-card>
          <ng-template #coverTemplate1>
            <svg t="1620379504913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1623" width="200" height="200">
              <path
                d="M235.6736 86.272h551.5264c17.408 0 33.3824 9.4208 41.8304 24.6272l102.9632 185.6a157.98272 157.98272 0 0 1 15.9744 80.2816c-5.0176 79.0016-69.5808 143.0528-148.6336 147.456-63.8976 3.584-120.1152-30.8736-148.1728-82.7904-26.7264 49.4592-79.0016 83.0464-139.1104 83.0464-60.5696 0-113.1008-34.048-139.6224-84.0704-27.8016 52.3776-84.1216 87.2448-148.2752 83.8656-79.5136-4.2496-144.384-68.7104-149.0432-148.1728-1.4336-24.4736 2.6624-47.8208 11.2128-68.9152l107.3664-195.9936a47.81056 47.81056 0 0 1 41.984-24.9344z"
                fill="#FFD05C" p-id="1624"></path>
              <path
                d="M877.9264 336.5376H145.152v476.0576c0 73.5232 59.5968 133.12 133.12 133.12h466.5344c73.5232 0 133.12-59.5968 133.12-133.12V336.5376z"
                fill="#FFD05C" p-id="1625"></path>
              <path
                d="M145.152 497.664c22.8864 15.4112 49.9712 25.0368 79.0016 26.5728 64.1536 3.4304 120.5248-31.488 148.2752-83.8144 26.5216 50.0224 79.104 84.0704 139.6224 84.0704 60.1088 0 112.384-33.5872 139.1104-83.0464 28.0064 51.9168 84.2752 86.3232 148.1728 82.7904 28.8768-1.5872 55.808-11.2128 78.592-26.5216V336.5376H145.152V497.664zM636.672 945.4592H386.4064v-204.8512c0-41.1648 33.3824-74.5472 74.5472-74.5472h101.1712c41.1648 0 74.5472 33.3824 74.5472 74.5472v204.8512z"
                fill="#FCA235" p-id="1626"></path>
            </svg>
          </ng-template>
        </div>
        <div nz-col>
          <nz-card nzHoverable [nzCover]="coverTemplate2" routerLink="/picture-manager"
            [nzBodyStyle]="{'textAlign':'center'}">
            <nz-card-meta nzTitle="图片管理 v1.0" nzDescription="图片搜索、上传、剪切。"></nz-card-meta>
          </nz-card>
          <ng-template #coverTemplate2>
            <svg t="1620379461986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1483" width="200" height="200">
              <path
                d="M800.6144 930.7648H230.0416c-73.5232 0-133.12-59.5968-133.12-133.12V226.304c0-73.5232 59.5968-133.12 133.12-133.12h570.5728c73.5232 0 133.12 59.5968 133.12 133.12v571.2896c0 73.5232-59.5968 133.1712-133.12 133.1712z"
                fill="#FFAC3E" p-id="1484"></path>
              <path
                d="M933.7344 451.1232l-352 218.4192a46.45376 46.45376 0 0 1-57.2928-6.5536l-114.5344-114.0736a46.49984 46.49984 0 0 0-65.1264-0.4608l-247.8592 240.0768v12.8c0 71.4752 57.9072 129.3824 129.3824 129.3824h578.048c71.4752 0 129.3824-57.9072 129.3824-129.3824v-350.208z"
                fill="#FF7C0E" p-id="1485"></path>
              <path d="M337.3056 335.7184m-68.864 0a68.864 68.864 0 1 0 137.728 0 68.864 68.864 0 1 0-137.728 0Z"
                fill="#FFFFFF" p-id="1486"></path>
            </svg>
          </ng-template>
        </div>
      </div>
    </div>
  </nz-content>
  <nz-footer>
    Lmr Design ©2020 Implement By Angular
  </nz-footer>
</nz-layout>
Copy

./dashboard.component.less 

.logo {
  width: 120px;
  height: 100%;
  background-image: url(https://int.mycht.cn/heroes/assets/sticky-logo.png);
  background-repeat: no-repeat;
  margin: 0 31px 0 0;
  float: left;
}

[nz-menu] {
  line-height: 64px;
}

nz-card {
  padding: 0px 48px;
}

nz-breadcrumb {
  margin: 16px 0;
}

nz-content {
  padding: 0 50px;
}

nz-footer {
  text-align: center;
}

.inner-content {
  background: #fff;
  padding: 24px;
  min-height: 80vh;
}

.welcome {
  color: #fff;
  font-size: large;

  [nz-icon] {
    font-size: 24px;
    vertical-align: sub;
    margin-left: 12px;
  }
}

nz-card {
  background-color: lightseagreen;
  border-radius: 8px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""