|
@@ -14,7 +14,7 @@
|
|
|
|
|
|
<!-- 导航栏 -->
|
|
|
<ion-toolbar>
|
|
|
- <ion-segment>
|
|
|
+ <ion-segment [(ngModel)]="selectedSegment">
|
|
|
<ion-segment-button value="explore">
|
|
|
发现
|
|
|
</ion-segment-button>
|
|
@@ -22,10 +22,11 @@
|
|
|
视频
|
|
|
</ion-segment-button>
|
|
|
</ion-segment>
|
|
|
+
|
|
|
</ion-toolbar>
|
|
|
|
|
|
<!-- 功能模块 -->
|
|
|
- <ion-segment scrollable>
|
|
|
+ <ion-segment scrollable [(ngModel)]="selectedSegment">
|
|
|
<ion-segment-button value="case">
|
|
|
<ion-icon name="albums"></ion-icon>
|
|
|
案例设计
|
|
@@ -68,180 +69,252 @@
|
|
|
</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>
|
|
|
+ <!-- 根据selectedSegment展示不同内容 -->
|
|
|
+
|
|
|
+ <!-- 发现页 -->
|
|
|
+ <div *ngIf="selectedSegment === 'explore'">
|
|
|
+ <!-- 装修锦囊块 -->
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频页 -->
|
|
|
+ <div *ngIf="selectedSegment === 'video'">
|
|
|
+ <!-- 视频内容 -->
|
|
|
+ <img src="assets\img\customer-avatar.jpg" alt="Example 0">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 案例设计页 -->
|
|
|
+ <div *ngIf="selectedSegment === 'case'">
|
|
|
+ <!-- 案例设计内容 -->
|
|
|
+ <img src="example2.jpg" alt="Example 1">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 免费设计页 -->
|
|
|
+ <div *ngIf="selectedSegment === 'design'">
|
|
|
+ <!-- 免费设计内容 -->
|
|
|
+ <img src="example3.jpg" alt="Example 2">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 装修施工页 -->
|
|
|
+ <div *ngIf="selectedSegment === 'decoration'">
|
|
|
+ <!-- 装修施工内容 -->
|
|
|
+ <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'">
|
|
|
+ <!-- 设计我家内容 -->
|
|
|
+ <img src="example3.jpg" alt="Example 9">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 智能预算页 -->
|
|
|
+ <div *ngIf="selectedSegment === 'budget'">
|
|
|
+ <!-- 智能预算内容 -->
|
|
|
+ <img src=".jpg" alt="Example 10">
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
</ion-content>
|
|
|
|