APPmy/src/app/tab1/tab1.page.html

<!-- tab1.page.html -->
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      首页
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <!-- 顶部搜索栏 -->
  <div class="searchbar">
    <div class="searchbar-wrapper">
        <div class="searchbar-left">
            <div class="search-icon-wrapper">
                <span class="search-icon searchbar-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                        </path>
                    </svg>
                </span>
            </div>
        </div>

        <div class="searchbar-center">
            <div class="searchbar-input-spacer"></div>

            <input type="text" class="searchbar-input" maxlength="2048" name="q" autocapitalize="off" autocomplete="off" title="Search" role="combobox" placeholder="Search">
        </div>

        <div class="searchbar-right">
            <svg class="voice-search" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path fill="#4285f4" d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
                </path>
                <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
                <path fill="#fbbc05" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
                </path>
                <path fill="#ea4335" d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
                </path>
            </svg>
        </div>
    </div>
</div>

  <!-- 导航栏 -->
  <ion-toolbar>
    <ion-segment [(ngModel)]="selectedSegment">
      <ion-segment-button value="explore">
        发现
      </ion-segment-button>
      <ion-segment-button value="video">
        视频
      </ion-segment-button>
    </ion-segment>
    
  </ion-toolbar>

  <!-- 功能模块 -->
  <ion-segment scrollable [(ngModel)]="selectedSegment">
    <ion-segment-button value="case">
      <ion-icon name="albums"></ion-icon>
      案例设计
    </ion-segment-button>
    <ion-segment-button value="design" (click)="goto3D()">
      <ion-icon name="brush"></ion-icon>
      设计我家
    </ion-segment-button>
    <ion-segment-button value="decoration">
      <ion-icon name="construct"></ion-icon>
      装修施工
    </ion-segment-button>
    <ion-segment-button value="soft">
      <ion-icon name="bed"></ion-icon>
      软装搭配
    </ion-segment-button>
    <ion-segment-button value="diagnosis">
      <ion-icon name="medkit"></ion-icon>
      户型诊断
    </ion-segment-button>
    <ion-segment-button value="customization">
      <ion-icon name="bonfire"></ion-icon>
      全屋定制
    </ion-segment-button>
    <ion-segment-button value="encyclopedia">
      <ion-icon name="library"></ion-icon>
      干货百科
    </ion-segment-button>
    <ion-segment-button value="style">
      <ion-icon name="heart-circle"></ion-icon>
      风格测试
    </ion-segment-button>
    <ion-segment-button (click)="goto3D()">
      <ion-icon name="home"></ion-icon>
      设计我家
    </ion-segment-button>
    <ion-segment-button value="budget">
      <ion-icon name="calculator"></ion-icon>
      智能预算
    </ion-segment-button>
  </ion-segment>

  <!-- 根据selectedSegment展示不同内容 -->

  <!-- 发现页 -->
  <div *ngIf="selectedSegment === 'explore'">
    <!-- 装修锦囊块 -->
    <ion-card class="card__content">
      <ion-card-header class="price">
        装修锦囊
      </ion-card-header>
      <ion-card-content>
        <!-- 装修锦囊卡片 -->
        <ion-grid>
          <ion-row>
            <!-- 空间设计块 -->
            <ion-col>
              <ion-card class="card">
                <ion-card-header class="card-title">
                  <ion-label>
                    <ion-icon name="dice-outline"></ion-icon>
                    空间设计
                  </ion-label>
                </ion-card-header>
                <ion-card-content>
                  <ion-grid>
                    <ion-row>
                      <!-- 客厅怎么装card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg"></ion-img>
                          <ion-card-header>
                            客厅怎么装
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                      <!-- 卧室怎么装card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://bjcache.leju.com/zxjiaju/zx_pic/20141120/e6/2e/e2e6920b5532429d94ee61bd1630f9c3.jpg"></ion-img>
                          <ion-card-header>
                            卧室怎么装
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                    </ion-row>
        
                  </ion-grid>
                  
                </ion-card-content>
              </ion-card>
            </ion-col>
            <!-- 装前必看块 -->
            <ion-col>
              <ion-card class="card">
                <ion-card-header class="card-title">
                  <ion-label>
                    <ion-icon name="send-outline"></ion-icon>
                    装前必看
                  </ion-label>
                </ion-card-header>
                <ion-card-content>
                  <ion-grid>
                    <ion-row>
                      <!-- 装修全流程card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://pic1.zhimg.com/v2-423645f54387fd0ea9be83687b58cc35_720w.jpg?source=172ae18b"></ion-img>
                          <ion-card-header>
                            装修全流程
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                      <!-- 全屋定制card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://img.zcool.cn/community/0115365dda0240a8012053c0a2c04c.jpg@1280w_1l_2o_100sh.jpg"></ion-img>
                          <ion-card-header>
                            全屋定制
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                    </ion-row>
        
                  </ion-grid>
                </ion-card-content>
              </ion-card>
            </ion-col>
            <!-- 家具家电块 -->
            <ion-col>
              <ion-card class="card">
                <ion-card-header class="card-title">
                  <ion-label>
                    <ion-icon name="desktop-outline"></ion-icon>
                    家具家电
                  </ion-label>
                </ion-card-header>
                <ion-card-content>
                  <ion-grid>
                    <ion-row>
                      <!-- 橱柜怎么选card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://pic1.zhimg.com/v2-160f6e66e25daba826ecbef5ec4eef91_720w.jpg?source=172ae18b"></ion-img>
                          <ion-card-header>
                            橱柜怎么选
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                      <!-- 沙发怎么选card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://www.qszs.com/uploads/allimg/180322/6-1P322104631.jpg"></ion-img>
                          <ion-card-header>
                            沙发怎么选
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                    </ion-row>
        
                  </ion-grid>
                </ion-card-content>
              </ion-card>
            </ion-col>
            <!-- 家居软装块 -->
            <ion-col>
              <ion-card class="card">
                <ion-card-header class="card-title">
                  <ion-label>
                    <ion-icon name="bed-outline"></ion-icon>
                    家居软装
                  </ion-label>
                </ion-card-header>
                <ion-card-content>
                  <ion-grid>
                    <ion-row>
                      <!-- 窗帘怎么选card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="http://www.wzy99.com/UploadFiles/FCK/2017-10/6364376207453191332635836.jpg"></ion-img>
                          <ion-card-header>
                            窗帘怎么选
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                      <!-- 收纳怎么做card -->
                      <ion-col size="12">
                        <ion-card>
                          <ion-img src="https://pic1.zhimg.com/v2-430eceee402f2cdf87312f13d8238d3c_r.jpg"></ion-img>
                          <ion-card-header>
                            收纳怎么做
                          </ion-card-header>
                        </ion-card>
                      </ion-col>
                    </ion-row>
        
                  </ion-grid>
                </ion-card-content>
              </ion-card>
            </ion-col>
            
          </ion-row>
        </ion-grid>
        
      </ion-card-content>
    </ion-card>

  </div>

  <!-- 视频页 -->
  <div *ngIf="selectedSegment === 'video'">
    <!-- 视频内容 -->
    <ion-grid>
      <ion-row>
        <ion-col size="12" size-md="6" size-lg="4" *ngFor="let video of videos">
          <ion-card>
            <video width="100%" controls>
              <source [src]="video.videoUrl" type="video/mp4">
              Your browser does not support the video tag.
            </video>
            <ion-card-header>
              <ion-card-title class="title0">{{video.title}}</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              {{video.description}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 案例设计页 -->
  <div *ngIf="selectedSegment === 'case'" style="margin-top: 10px;" >
    <!-- 案例设计内容 -->
    <div class="carousel-container" style="margin-top: 40px;">
      <div class="carousel">
          <div class="card0">
            <img src="assets\img\card1.jpg" alt="">
          </div>
          <div class="card0">           
            <img src="assets\img\card2.jpg" alt="">
          </div>
          <div class="card0">
            <img src="assets\img\card3.jpg" alt="">

          </div>
          <div class="card0">
            <img src="assets\img\card4.jpg" alt="">

          </div>
          <div class="card0">
            <img src="assets\img\card5.jpg" alt="">

          </div>
          <div class="card0">
            <img src="assets\img\card6.jpg" alt="">

          </div>
          <div class="card0">
            <img src="assets\img\card7.jpg" alt="">

          </div>
          <div class="card0">
            <img src="assets\img\card8.jpg" alt="">

          </div>
          <div class="card0" style="justify-content: center;">
            <img src="assets\img\card9.jpg" alt="">

          </div>
          <div class="card0">
            <img src="assets\img\card10.jpg" alt="">

          </div>
      </div>
    </div>
    <div class="card9" style="margin: -10px auto; display: flex;" *ngFor="let item of caseList">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z">

        </path>
        
      </svg>
      <img src={{item.img}} alt="">
      <div class="card9__content">
        <p class="card9__title">{{item.title}}</p>
        <p class="card9__description">
          {{item.description}}
        </p>
      </div>
    </div>
    
  </div>

  <!-- 设计我家页 -->
  <div *ngIf="selectedSegment === 'design'">
    <!-- 免费设计内容 -->
    <img src="example3.jpg" alt="Example 2">
  </div>

  <!-- 装修施工页 -->
  <div *ngIf="selectedSegment === 'decoration'">
    <!-- 装修施工内容 -->
    <ion-segment style="margin-top: 10px;" [(ngModel)]="selectedCategory">
      <ion-segment-button value="company">
        装修公司
      </ion-segment-button>
      <ion-segment-button value="designers">
        设计师
      </ion-segment-button>
      <ion-segment-button value="package">
        装修套餐
      </ion-segment-button>
      <ion-segment-button value="materials">
        家居建材
      </ion-segment-button>
    </ion-segment>

    <!-- 装修公司页内容 -->
    <div *ngIf="selectedCategory === 'company'">
      <ion-segment scrollable [(ngModel)]="selectedCompanyCategory">
        <ion-segment-button value="one-stop" class="fit">
          一站式整装
        </ion-segment-button>
        <ion-segment-button value="chain-brand" class="fit">
          连锁品牌
        </ion-segment-button>
        <ion-segment-button value="alliance" class="fit">
          联盟商家
        </ion-segment-button>
        <ion-segment-button value="top-listed" class="fit">
          上榜商家
        </ion-segment-button>
        <ion-segment-button value="10-year-warranty" class="fit">
          水电质保10年以上
        </ion-segment-button>
      </ion-segment>

      <!-- 装修公司内容部分 -->
      <div *ngIf="selectedCompanyCategory === 'one-stop'">
        <!-- 一站式整装内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedCompanyCategory === 'chain-brand'">
        <!-- 连锁品牌内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedCompanyCategory === 'alliance'">
        <!-- 联盟商家内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedCompanyCategory === 'top-listed'">
        <!-- 上榜商家内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedCompanyCategory === '10-year-warranty'">
        <!-- 水电质保10年以上内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <!-- 设计师页内容 -->
    <div *ngIf="selectedCategory === 'designers'">
      
      <ion-segment scrollable [(ngModel)]="selectedDesignerCategory">
        <ion-segment-button value="full-design">
          全案设计
        </ion-segment-button>
        <ion-segment-button value="100-300">
          100-300/m
        </ion-segment-button>
        <ion-segment-button value="retro-modern-simple">
          复古现代简约
        </ion-segment-button>
        <ion-segment-button value="preferred-designer">
          优选设计师
        </ion-segment-button>
        <ion-segment-button value="top-listed-designer">
          上榜设计师
        </ion-segment-button>
        <ion-segment-button value="video-call">
          可面聊
        </ion-segment-button>
        <ion-segment-button value="construction">
          可施工
        </ion-segment-button>
      </ion-segment>

      <!-- 设计师内容部分 -->
      <div *ngIf="selectedDesignerCategory === 'full-design'">
        <!-- 全案设计内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedDesignerCategory === '100-300'">
        <!-- 100-300/m内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedDesignerCategory === 'retro-modern-simple'">
        <!-- 复古现代简约内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedDesignerCategory === 'preferred-designer'">
        <!-- 优选设计师内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedDesignerCategory === 'top-listed-designer'">
        <!-- 上榜设计师内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedDesignerCategory === 'video-call'">
        <!-- 可面聊内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedDesignerCategory === 'construction'">
        <!-- 可施工内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <!-- 装修套餐页内容 -->
    <div *ngIf="selectedCategory === 'package'">
      
      <ion-segment scrollable [(ngModel)]="selectedPackageCategory">
        <ion-segment-button value="top-listed-package">
          上榜套餐
        </ion-segment-button>
        <ion-segment-button value="1000-1200">
          1000-1200元/m
        </ion-segment-button>
        <ion-segment-button value="nordic-style">
          北欧风
        </ion-segment-button>
        <ion-segment-button value="modern-simple-style">
          现代简约风
        </ion-segment-button>
      </ion-segment>

      <!-- 装修套餐内容部分 -->
      <div *ngIf="selectedPackageCategory === 'top-listed-package'">
        <!-- 上榜套餐内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedPackageCategory === '1000-1200'">
        <!-- 1000-1200元/m内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedPackageCategory === 'nordic-style'">
        <!-- 北欧风内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedPackageCategory === 'modern-simple-style'">
        <!-- 现代简约风内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <!-- 家居建材页内容 -->
    <div *ngIf="selectedCategory === 'materials'">
      
      <ion-segment scrollable [(ngModel)]="selectedMaterialsCategory">
        <ion-segment-button value="decoration-materials">
          装修建材
        </ion-segment-button>
        <ion-segment-button value="whole-house-customization">
          全屋定制
        </ion-segment-button>
        <ion-segment-button value="finished-furniture">
          成品家私
        </ion-segment-button>
        <ion-segment-button value="kitchen-bathroom-appliances">
          厨卫电器
        </ion-segment-button>
        <ion-segment-button value="home-appliances">
          家用电器
        </ion-segment-button>
      </ion-segment>

      <!-- 家居建材内容部分 -->
      <div *ngIf="selectedMaterialsCategory === 'decoration-materials'">
        <!-- 装修建材内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedMaterialsCategory === 'whole-house-customization'">
        <!-- 全屋定制内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedMaterialsCategory === 'finished-furniture'">
        <!-- 成品家私内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedMaterialsCategory === 'kitchen-bathroom-appliances'">
        <!-- 厨卫电器内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
      <div *ngIf="selectedMaterialsCategory === 'home-appliances'">
        <!-- 家用电器内容 -->
        <ion-list style="margin-top: 10px;">
          <ion-item *ngFor="let item of onestopList">
            <ion-thumbnail slot="start" >
              <img [src]="item.image">
            </ion-thumbnail>
            <ion-label>
              <h2>
                {{item.title}}
              </h2>
              <p style="color: red;">
                {{item.score}}分 {{item.price}}万元/套
              </p>
              <p>
                {{item.locate}} 近期服务{{item.people}}人
              </p>
              <ion-chip>
                {{item.tag1}}
              </ion-chip>
              <ion-chip>
                {{item.tag2}}
              </ion-chip>

            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>
  </div>

  <!-- 软装搭配页 -->
  <div *ngIf="selectedSegment === 'soft'">
    <!-- 软装搭配内容 -->
    <div class="notification" style="margin: 10px auto; display: flex;" *ngFor="let item of styleList">
      <div class="notiglow"></div>
      <div class="notiborderglow"></div>
      <div class="notititle">{{item.style}}</div>
      <img src={{item.img}} alt="">
    </div>
    
  </div>

  <!-- 户型诊断页 -->
  <div *ngIf="selectedSegment === 'diagnosis'">
    <!-- 户型诊断内容 -->
    <img src="example3.jpg" alt="Example 5">
  </div>

  <!-- 全屋定制页 -->
  <div *ngIf="selectedSegment === 'customization'">
    <!-- 全屋定制内容 -->
        <!-- Swiper轮播图 手动创建 -->
    <!-- Slider main container -->
    <button (click)="slide1?.slideNext()">next</button>
    <div #slide1Comp class="swiper">
      <!-- Additional required wrapper其他必需的包装器 -->
      <!-- 分页 -->
      <div class="swiper-wrapper">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-280px, 0px, 0px);">
          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7" style="width: 110px; margin-right: 30px;">
            Slide 8
          </div>
          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8" style="width: 110px; margin-right: 30px;">
            Slide 9
          </div>
          <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="9" style="width: 110px; margin-right: 30px;">
            Slide 10
          </div>
          <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 110px; margin-right: 30px;">
            Slide 1
          </div>
          <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 110px; margin-right: 30px;">
            Slide 2
          </div>
          <div class="swiper-slide" data-swiper-slide-index="2" style="width: 110px; margin-right: 30px;">
            Slide 3
          </div>
          <div class="swiper-slide" data-swiper-slide-index="3" style="width: 110px; margin-right: 30px;">
            Slide 4
          </div>
          <div class="swiper-slide" data-swiper-slide-index="4" style="width: 110px; margin-right: 30px;">
            Slide 5
          </div>
          <div class="swiper-slide" data-swiper-slide-index="5" style="width: 110px; margin-right: 30px;">
            Slide 6
          </div>
          <div class="swiper-slide" data-swiper-slide-index="6" style="width: 110px; margin-right: 30px;">
            Slide 7
          </div>
          <div class="swiper-slide" data-swiper-slide-index="7" style="width: 110px; margin-right: 30px;">
            Slide 8
          </div>
          <div class="swiper-slide" data-swiper-slide-index="8" style="width: 110px; margin-right: 30px;">
            Slide 9
          </div>
          <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="9" style="width: 110px; margin-right: 30px;">
            Slide 10
          </div>
          <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 110px; margin-right: 30px;">
            Slide 1
          </div>
          <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1" style="width: 110px; margin-right: 30px;">
            Slide 2
          </div>
          <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 110px; margin-right: 30px;">
            Slide 3
          </div>
        </div>
        <div class="swiper-pagination"></div>

        <!-- If we need pagination分页按钮 -->
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
          <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span>
          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span>
          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 9"></span>
          <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 10"></span>
        </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        <div class="swiper-pagination">
          <div class="swiper-wrapper">
            <!-- Slides幻灯片 -->
            <div class="swiper-slide">
              <img src="assets\img\ChineseStyle.png">
            </div>
            <div class="swiper-slide">
              <img src="assets\img\NorthernEuropeStyle.png">
            </div>
            <div class="swiper-slide">
              <img src="assets\img\WoodStyle.png">
            </div>
          </div>
        </div>
      </div>
    </div>

    <img src="example3.jpg" alt="Example 6">
  </div>

  <!-- 干货百科页 -->
  <div *ngIf="selectedSegment === 'encyclopedia'">
    <!-- 干货百科内容 -->
    <img src="example3.jpg" alt="Example 7">
  </div>

  <!-- 风格测试页 -->
  <div *ngIf="selectedSegment === 'style'">
    <!-- 风格测试内容 -->
    <div class="flex items-center gap-2">
      <button
        class="relative inline-flex items-center justify-center gap-2 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white hover:bg-[#F5F5F5] h-9 rounded-md px-3 group"
      >
        <svg
          class="lucide lucide-arrow-left"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          viewBox="0 0 24 24"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="m12 19-7-7 7-7"></path>
          <path d="M19 12H5"></path>
        </svg>
        <span class="origin-left scale-0 transition-transform group-hover:scale-100"
          >Back</span
        >
      </button>
      <button
        class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#06B6D4] h-9 rounded-md px-3"
      >
        <svg
          class="lucide lucide-rocket text-cyan-500 dark:text-cyan-400"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="#06B6D4"
          fill="none"
          viewBox="0 0 24 24"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
          ></path>
          <path
            d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
          ></path>
          <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
          <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
        </svg>
        Dashboard
      </button>
      <button
        class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#60A5FA] h-9 rounded-md px-3"
      >
        <svg
          class="lucide lucide-newspaper text-blue-400 dark:text-blue-600"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="#60A5FA"
          fill="none"
          viewBox="0 0 24 24"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"
          ></path>
          <path d="M18 14h-8"></path>
          <path d="M15 18h-5"></path>
          <path d="M10 6h8v4h-8V6Z"></path>
        </svg>
        Articles
      </button>
      <button
        class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FACC14] h-9 rounded-md px-3"
      >
        <svg
          class="lucide lucide-sticky-note text-yellow-400 dark:text-yellow-600"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="#FACC14"
          fill="none"
          viewBox="0 0 24 24"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"
          ></path>
          <path d="M15 3v6h6"></path>
        </svg>
        Notes
      </button>
      <button
        class="cursor-pointer bg-white relative inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#F5F5F5] hover:text-[#FB923C] h-9 rounded-md px-3"
      >
        <svg
          class="lucide lucide-star text-orange-400 dark:text-orange-600"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="#FB923C"
          fill="#FB923C"
          viewBox="0 0 24 24"
          height="22"
          width="22"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polygon
            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
          ></polygon>
        </svg>
        Reviews
      </button>
    </div>
    
    <img src="example3.jpg" alt="Example 8">
  </div>

  <!-- 智能预算页 -->
  <div *ngIf="selectedSegment === 'budget'">
    <!-- 智能预算内容 -->
    <img src=".jpg" alt="Example 10">
  </div>

  
</ion-content>