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">
      <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 value="home">
      <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>{{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'">
    <!-- 案例设计内容 -->
    <div class="carousel-container">
      <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">
            <img src="assets\img\card9.jpg" alt="">

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

          </div>
      </div>
  </div>
    <img src="example2.jpg" alt="Example 1">
  </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'">
        <!-- 连锁品牌内容 -->
      </div>
      <div *ngIf="selectedCompanyCategory === 'alliance'">
        <!-- 联盟商家内容 -->
      </div>
      <div *ngIf="selectedCompanyCategory === 'top-listed'">
        <!-- 上榜商家内容 -->
      </div>
      <div *ngIf="selectedCompanyCategory === '10-year-warranty'">
        <!-- 水电质保10年以上内容 -->
      </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'">
        <!-- 全案设计内容 -->
      </div>
      <div *ngIf="selectedDesignerCategory === '100-300'">
        <!-- 100-300/m内容 -->
      </div>
      <div *ngIf="selectedDesignerCategory === 'retro-modern-simple'">
        <!-- 复古现代简约内容 -->
      </div>
      <div *ngIf="selectedDesignerCategory === 'preferred-designer'">
        <!-- 优选设计师内容 -->
      </div>
      <div *ngIf="selectedDesignerCategory === 'top-listed-designer'">
        <!-- 上榜设计师内容 -->
      </div>
      <div *ngIf="selectedDesignerCategory === 'video-call'">
        <!-- 可面聊内容 -->
      </div>
      <div *ngIf="selectedDesignerCategory === 'construction'">
        <!-- 可施工内容 -->
      </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'">
        <!-- 上榜套餐内容 -->
      </div>
      <div *ngIf="selectedPackageCategory === '1000-1200'">
        <!-- 1000-1200元/m内容 -->
      </div>
      <div *ngIf="selectedPackageCategory === 'nordic-style'">
        <!-- 北欧风内容 -->
      </div>
      <div *ngIf="selectedPackageCategory === 'modern-simple-style'">
        <!-- 现代简约风内容 -->
      </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'">
        <!-- 装修建材内容 -->
      </div>
      <div *ngIf="selectedMaterialsCategory === 'whole-house-customization'">
        <!-- 全屋定制内容 -->
      </div>
      <div *ngIf="selectedMaterialsCategory === 'finished-furniture'">
        <!-- 成品家私内容 -->
      </div>
      <div *ngIf="selectedMaterialsCategory === 'kitchen-bathroom-appliances'">
        <!-- 厨卫电器内容 -->
      </div>
      <div *ngIf="selectedMaterialsCategory === 'home-appliances'">
        <!-- 家用电器内容 -->
      </div>
    </div>

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

  <!-- 软装搭配页 -->
  <div *ngIf="selectedSegment === 'soft'">
    <!-- 软装搭配内容 -->
    <img src="example3.jpg" alt="Example 4">
  </div>

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

  <!-- 全屋定制页 -->
  <div *ngIf="selectedSegment === 'customization'">
    <!-- 全屋定制内容 -->
    <img src="example3.jpg" alt="Example 6">
  </div>

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

  <!-- 风格测试页 -->
  <div *ngIf="selectedSegment === 'style'">
    <!-- 风格测试内容 -->
    <img src="example3.jpg" alt="Example 8">
  </div>

  <!-- 设计我家页 -->
  <div *ngIf="selectedSegment === 'home'">
    <!-- 设计我家内容 -->
    <!-- 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 9">
  </div>

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

  
</ion-content>