bixi/src/app/routes/home/home.component.html

企业级中后台前端解决方案

<div class="card-wrapper solution">
  <div class="bg-placeholder"></div>
  <div class="fix-size">
    <div class="flex-item left">
      <div class="desc">
        <h1 data-aos="fade-up" data-aos-once="true">{{ 'app.home.slogan.title' | translate }}</h1>
        <p data-aos="fade-up" data-aos-delay="150" data-aos-once="true">{{ 'app.home.slogan' | i18n }}</p>
        <div class="btn-group">
          <a routerLink="/docs/getting-started/{{ i18n.zone }}">{{ 'app.home.start' | translate }}</a>
          <a class="active" [href]="proRef" target="_blank">{{ 'app.home.pro' | translate  }}</a>
        </div>
      </div>
    </div>
    <div class="flex-item right">
      <img data-aos="zoom-in" data-aos-delay="0" src="./assets/img/solution-组件.svg" alt="组件" />
    </div>
  </div>
</div>

<div class="card-wrapper introduce" data-aos="zoom-in" data-aos-delay="0">
  <div class="fix-size">
    <ng-container *ngFor="let item of introduceList">
      <ng-container *ngIf="item.href; else routeTpl">
        <a [href]="item.href" target="_blank" class="introduce-item">
          <img alt="BIXI" [src]="item.src" />
          <h1>{{ item.title | translate }}</h1>
          <p>{{ item.desc | translate }}</p>
        </a>
      </ng-container>
      <ng-template #routeTpl>
        <a [routerLink]="item.route" class="introduce-item">
          <img alt="BIXI" [src]="item.src" />
          <h1>{{ item.title | translate }}</h1>
          <p>{{ item.desc | translate }}</p>
        </a>
      </ng-template>
    </ng-container>
  </div>
</div>

<div class="card-wrapper feature">
  <div class="bg-placeholder"></div>
  <dl class="fix-size">
    <dt data-aos="zoom-in" data-aos-delay="0">{{ 'app.home.feature.six' | translate }}</dt>
    <dd [class]="item.cls" *ngFor="let item of featureList">
      <div data-aos="zoom-in" data-aos-delay="0">
        <i class="color-block"></i>
        <img [alt]="item.alt | translate" [src]="item.src"/>
        <h1>{{ item.title | translate }}</h1>
        <p>{{ item.desc | translate }}</p>
      </div>
    </dd>
  </dl>
</div>

<div class="card-wrapper consumer">
  <dl class="fix-size">
    <dt data-aos="zoom-in" data-aos-delay="0">{{ 'app.home.feature.numerous.users' | translate }}</dt>
    <dd *ngFor="let item of consumerList"><img data-aos="zoom-in" data-aos-delay="0" [alt]="item.alt" [src]="item.src" /></dd>
  </dl>
</div>
<app-footer></app-footer>