nova-live/projects/live-app/src/moduls/tabs/home/home.component.html

<ion-content class="content">
  <div class="header">
    <div class="top">
      <ion-segment
        [scrollable]="true"
        (ionChange)="segmentChanged($event)"
        layout="icon-bottom"
        [value]="currentValue"
        mode="md"
      >
        @for (item of options; track $index) {
        <ion-segment-button (click)="getRoom(item?.value)" [value]="item?.value" class="tabs">
          <ion-label>{{ item?.label }}</ion-label>
        </ion-segment-button>
        }
      </ion-segment>
      <div class="more">
        <img (click)="isOpen = true" src="/img/more.png" alt="" />
        <img src="/img/search.png" alt="" (click)="search()" />
      </div>
    </div>
  </div>
  <div class="banner">
    <!-- <swiper-container (swiper)="onSwiper($event)" class="swiper" [delay]="1000" [speed]="500" [loop]="true">
      @for (item of banner; track $index) {
      <swiper-slide>
        <img [src]="item?.get('image')" alt="" />
      </swiper-slide>
      }
    </swiper-container> -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        @for (item of banner; track $index) {
        <div class="swiper-slide">
          <img [src]="item?.get('image')" alt="" />
        </div>
        }
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div class="room-list">
    @for (item of roomList; track $index) {
    <div
      class="list-row"
      (click)="toUrl('user/profile/' + item.uid)"
      [style.background-image]="'url(' + item?.cover + ')'"
    >
      <div class="title-tag">在线聊天</div>
      <div class="live-tag">
        <!-- <span></span>  -->
        <img src="/img/live.gif" alt="" />
        在线
      </div>
      <div class="room-footer">
        <div class="user">
          {{
            item?.nickname ||
              item?.mobile
          }}
        </div>
        <div class="desc">{{ item?.title }}</div>
        <div class="city-block">
          <div class="row-li">
            <ion-icon name="location-outline"></ion-icon>
            江西
          </div>
          <div class="row-li" style="margin-left: 4px">
            <img
              src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png"
              alt=""
            />
            {{item.birthdate}}
          </div>
        </div>
      </div>
    </div>
    }
  </div>
</ion-content>
<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="isOpen"
  (didDismiss)="onDidDismiss($event)"
>
  <ng-template>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="cancel('cancel')">取消</ion-button>
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="cancel('confirm', currentValue)">确认</ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-picker>
      <ion-picker-column
        [value]="currentValue"
        (ionChange)="onIonChange($event)"
      >
        @for (item of options; track $index) {
        <ion-picker-column-option value="{{ item?.value }}">{{
          item?.label
        }}</ion-picker-column-option>
        }
      </ion-picker-column>
    </ion-picker>
  </ng-template>
</ion-modal>