<section class="searchContent">
  <!-- 搜索框区域 -->
  <!-- <i (click)="clear(searchText)">
    <img src="assets/images/indexIcons/clear.png" alt="" srcset="">
  </i> -->
  <SearchBar [(ngModel)]="searchText"
    [showCancelButton]="false"
    [placeholder]="'热销产品'"
    [cancelText]="'取消'"
    [showCancelButton]="true"
    (onSubmit)="submit(searchText)"
    (onClear)="clear(searchText)"
    class="indexSearchBar"
  ></SearchBar>
  <i [routerLink]="'/news'">
    <img src="assets/images/indexIcons/news.png" alt="" srcset="">
  </i>
</section>
<section style="margin-top:-85px;">
  <!-- banner图 -->
  <WingBlank *ngIf="bannerLists.data.length>0">
    <Carousel [infinite]="true"
              [vertical]="false"
              [selectedIndex]="1"
    >
      <CarouselSlide *ngFor="let item of bannerLists.data">
        <div style="display: inline-block; width: 100%;border-radius:10px;overflow:hidden" [ngStyle]="{'height': bannerLists.imgHeight}">
          <img src="{{item}}" style=" pointer-events: none; width: 100%;"/>
        </div>
      </CarouselSlide>
    </Carousel>
  </WingBlank>
</section>
<section class="featureContent">
  <!-- 模块导航 -->
  <ul>
    <li *ngFor="let item of featureLists" (click)="featureSelect(item)">
      <div>
        <img [src]="'./assets/images/indexIcons/'+item.icon + '.png'" alt="" srcset="">
      </div>
      <div>{{item.name}}</div>
    </li>
  </ul>
</section>
<section class="noticeContent" [routerLink]="'/importantAnnouncement'">
  <!-- 公告 -->
  <div>
    <img src="assets/images/indexIcons/notice.png" alt="" srcset="">
    <span>银盾公告</span>
  </div>
 <div>
  <i class="iconfont icon-fanhui"></i>
 </div>
</section>
<section class="hotProductLists" *ngIf="hotProductLists.length>0">
  <!-- 热销产品 -->
  <h4>热销产品</h4>
  <ul>
    <li *ngFor="let item of hotProductLists">
      <div>
        <h5>{{item.planName}}</h5>
        <p *ngFor="let label of item.labels"  class="strengths"><span>.</span><span>{{label}}</span></p>
      </div>
      <div class="minPrice">只需{{item.price}}元起</div>
    </li>
  </ul>
</section>
<section class="onlineProductLists">
  <!-- 互联网产品 -->
  <div>
    <h4>互联网产品</h4>
    <div class="viewMore" [routerLink]="'/product'">
      <span>更多</span>
      <i class="iconfont icon-fanhui"></i>
    </div>
  </div>
  <ul>
    <li *ngFor="let item of onlineProductLists">
      <h5>{{item.planName}}</h5>
      <p *ngFor="let label of item.labels"  class="strengths">{{label}}</p>
    </li>
  </ul>
</section>

<!-- 未开放模块弹窗 -->
<Modal [(ngModel)]="this.state.modal1" [transparent]="true" [closable]="true" (onClose)="onClose('modal1')">
  <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
    此模块暂未开放，敬请期待。
  </div>
</Modal>