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>

  <!-- 顶部搜索栏 -->
  <ion-searchbar></ion-searchbar>

  <!-- 导航栏 -->
  <ion-toolbar>
    <ion-segment>
      <ion-segment-button value="explore">
        发现
      </ion-segment-button>
      <ion-segment-button value="video">
        视频
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

  <!-- 功能模块 -->
  <ion-segment scrollable>
    <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>

  <!-- 装修锦囊块 -->
  <ion-card>
    <ion-card-header>
      装修锦囊
    </ion-card-header>
    <ion-card-content>
      <!-- 装修锦囊卡片 -->
      <ion-grid>
        <ion-row>
          <!-- 空间设计块 -->
          <ion-col>
            <ion-card>
              <ion-card-header>
                <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>
              <ion-card-header>
                <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>
              <ion-card-header>
                <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>
              <ion-card-header>
                <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>
  <!-- 内容流 -->
  <ion-list>
    <ion-item *ngFor="let item of contentList">
      <ion-thumbnail>
        <img [src]="item.image">
      </ion-thumbnail>
      <ion-label>
        <h2>{{item.title}}</h2>
        <p>{{item.user}} - {{item.likes}} Likes</p>
        <p>{{item.comments}} Comments</p>
        <p>{{item.tags}}</p>
      </ion-label>
    </ion-item>
  </ion-list>
  
</ion-content>