TRA-APP/src/app/jingdian/jingdian.page.html

<ion-content [fullscreen]="true" class="jingdianbody">
  <ion-button  (click)="cancel()">
    <ion-icon slot="start" name="chevron-back-circle"></ion-icon>
    
  </ion-button>
  <ion-header>
    <ion-toolbar>
      <ion-segment [(ngModel)]="selectedSegment">
        <ion-segment-button value="featured">
          精选
        </ion-segment-button>
        <ion-segment-button value="domestic">
          国内游
        </ion-segment-button>
        <ion-segment-button value="international">
          国外游
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
    <div *ngIf="selectedSegment === 'featured'">
      <!-- 显示精选内容区域 -->
      <ion-grid>
        <ion-row>
          <ion-col size="6">
            <ion-card>
              <ion-card-header>
                跟团游
              </ion-card-header>
              <ion-card-content>
                这里是跟团游的内容
              </ion-card-content>
            </ion-card>
          </ion-col>
          <ion-col size="6">
            <ion-card>
              <ion-card-header>
                自由行
              </ion-card-header>
              <ion-card-content>
                这里是自由行的内容
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
    
      <ion-card>
        <ion-card-header>
          国内游
        </ion-card-header>
        <ion-card-content>
          这里是国内游的实例展示
        </ion-card-content>
      </ion-card>
    
      <ion-card>
        <ion-card-header>
          出境游
        </ion-card-header>
        <ion-card-content>
          这里是出境游的实例展示
        </ion-card-content>
      </ion-card>
    
      <ion-card>
        <ion-card-header>
          特价抢购
        </ion-card-header>
        <ion-card-content>
          这里是特价抢购的内容
        </ion-card-content>
      </ion-card>
    </div>
  
    <div *ngIf="selectedSegment === 'domestic'">
      <!-- 显示国内游内容区域 -->
      <ion-card>
        <ion-card-header>
          当季精选
        </ion-card-header>
        <ion-card-content>
          <div class="destination-container">
            <ion-card class="destination-card">
              <img src="./assets/slide2.jpg" class="destination-image">
              <div class="destination-content">
                <ion-card-header>
                  <ion-card-title class="destination-title">新疆</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  <p class="destination-description">探访我的阿勒泰</p>
                </ion-card-content>
              </div>
            </ion-card>
      
            <ion-card class="destination-card">
              <img src="./assets/slide2.jpg" class="destination-image">
              <div class="destination-content">
                <ion-card-header>
                  <ion-card-title class="destination-title">新疆</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  <p class="destination-description">探访我的阿勒泰</p>
                </ion-card-content>
              </div>
            </ion-card>
            
            <ion-card class="destination-card">
              <img src="./assets/slide2.jpg" class="destination-image">
              <div class="destination-content">
                <ion-card-header>
                  <ion-card-title class="destination-title">新疆</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  <p class="destination-description">探访我的阿勒泰</p>
                </ion-card-content>
              </div>
            </ion-card>
          </div>
        </ion-card-content>
      </ion-card>
    
      <!-- 国内必打卡路线板块 -->
      <ion-card>
        <ion-card-header>
          国内必打卡路线
        </ion-card-header>
        <ion-card-content>
          <ion-grid>
            <ion-row>
              <ion-col size="4" >
                <ion-card>
                  <ion-card-header>
                    <!-- {{ item.title }} -->
                  </ion-card-header>
                  <ion-card-content>
                    <!-- {{ item.description }} -->
                    <br>
                    <!-- 价格：{{ item.price }}起 -->
                  </ion-card-content>
                </ion-card>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card>
    
      <!-- 探索全国好处板块 -->
      <ion-card>
        <ion-card-header>
          探索全国好处
        </ion-card-header>
        <ion-card-content>
          <ion-grid>
            <ion-row>
              <ion-col size="4" >
                <ion-card>
                  <ion-card-header>
                    <!-- {{ item.title }} -->
                  </ion-card-header>
                  <ion-card-content>
                    <!-- 卡片内容 -->
                  </ion-card-content>
                </ion-card>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-content>
      </ion-card>
    </div>
  
    <div *ngIf="selectedSegment === 'international'">
      <!-- 显示国外游内容区域 -->
      
    </div>
    
  
  </ion-content>


  
</ion-content>