Merge branch 'master' of http://git.fmode.cn:3000/0225273/APPmy

src/app/feedback/feedback.page.html

@@ -11,7 +11,7 @@
   <ion-list lines="none">
   <ion-item *ngFor="let message of chatMessages" [class.sender]="message.sender === 'customer'">
     <ion-avatar slot="start">
-      <ion-img [src]="'Assets/img/' + message.avatar"></ion-img>
+      <ion-img [src]="'D:\workspace\APPmy\asset\img' + message.avatar"></ion-img>
     </ion-avatar>
     <ion-label>{{ message.text }}</ion-label>
   </ion-item>

src/app/tab1/tab1.page.html

@@ -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>
 

src/app/tab1/tab1.page.scss

@@ -1,13 +1,13 @@
-ion-card {
-  margin: 10px;
-  padding: 15px;
-  border-radius: 10px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
+// ion-card {
+//   margin: 10px;
+//   padding: 15px;
+//   border-radius: 10px;
+//   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+// }
 
 ion-card-header {
   ion-card-title {
-    font-size: 1.2em;
+    font-size: 2.4em;
     font-weight: bold;
   }
 }

src/app/tab1/tab1.page.ts

@@ -6,18 +6,14 @@ import { Component } from '@angular/core';
   styleUrls: ['tab1.page.scss']
 })
 export class Tab1Page {
-  selectedSegment: string = 'company';
 
-  activeTab:string = 'explore';
-  changeTab(event:any){
-    this.activeTab = event.detail.value
-  }
+  selectedSegment: string = 'explore';
 
   constructor() {}
 
-  // segmentChanged(event: CustomEvent) {
-  //   this.selectedSegment = event.detail.value;
-  // }
+  segmentChanged(event: CustomEvent) {
+    this.selectedSegment = event.detail.value;
+  }
 
   // 在此处定义和初始化数据
   contentList = [
@@ -27,4 +23,9 @@ export class Tab1Page {
   ];
   
 
+
+
+
 }
+
+

src/app/tab2/tab2.page.html

@@ -45,33 +45,38 @@
             <ion-label>公司简介:</ion-label>
             <ion-text>{{ company.description }}</ion-text>
           </ion-item>
-          <!-- 公司介绍 -->
-          <ion-card>
+          <!-- 公司服务 -->
+          <ion-card class="concept-card">
+            <ion-card-header>
+              公司服务:
+            </ion-card-header>
+            <ion-card-content>
+              <ion-text [innerHTML]="formatHtmlContent(company.services)"></ion-text>
+            </ion-card-content>
+          </ion-card>
+          <!-- 公司优势 -->
+          <ion-card class="concept-card">
+            <ion-card-header>
+              公司优势:
+            </ion-card-header>
+            <ion-card-content>
+              <ion-text [innerHTML]="formatHtmlContent(company.advantages)"></ion-text>
+            </ion-card-content>
+          </ion-card>
+          <!-- 公司案例 -->
+          <ion-card class="concept-card">
             <ion-card-header>
-              公司介绍
+              公司案例:
             </ion-card-header>
             <ion-card-content>
-              <ion-list>
-                <ion-item>
-                  <ion-label>公司服务:</ion-label>
-                  <ion-text [innerHTML]="formatHtmlContent(company.services)"></ion-text>
-                </ion-item>
-                <ion-item>
-                  <ion-label>公司优势:</ion-label>
-                  <ion-text [innerHTML]="formatHtmlContent(company.advantages)"></ion-text>
-                </ion-item>
-                <ion-item>
-                  <ion-label>公司案例:</ion-label>
-                  <ion-text [innerHTML]="formatHtmlContent(company.cases)"></ion-text>
-                </ion-item>
-              </ion-list>
-            <!-- 底部按钮 -->
+              <ion-text>{{ company.cases }}</ion-text>
+            </ion-card-content>
+          </ion-card>
+          <!-- 底部按钮 -->
           <ion-button expand="full" color="secondary">电话</ion-button>
           <ion-button expand="full" color="secondary">预约</ion-button>
           <ion-button expand="full" color="secondary">咨询</ion-button>
           <ion-button expand="full" color="secondary">查看案例</ion-button>
-            </ion-card-content>
-          </ion-card>
         </ion-card-content>
       </ion-card>
     </div>
@@ -189,52 +194,51 @@
   </div>
 
     <!-- 设计师详情页 -->
-    <div *ngIf="selectedSegment === 'designer'">
-      <!-- 设计师详情页 -->
-      <ion-card *ngFor="let designer of designers">
-        <!-- 头部 -->
-        <ion-card-header>
-          <ion-avatar>
-            <img src="{{ designer.avatar }}" alt="Designer Avatar">
-          </ion-avatar>
-          <ion-card-title>{{ designer.username }}</ion-card-title>
-          <ion-button fill="outline" slot="end">关注</ion-button>
-        </ion-card-header>
-        <ion-card-content>
-          <p>{{ designer.bio }}</p>
-        </ion-card-content>
-    
-        <!-- 内容 -->
-        <ion-card-content>
-          <ion-img [src]="designer.portfolioImage" alt="Designer Portfolio"></ion-img>
-          <ion-item>
-            <ion-label>作品数量:</ion-label>
-            <ion-text>{{ designer.portfolioCount }}</ion-text>
-          </ion-item>
-          <ion-item>
-            <ion-label>擅长风格:</ion-label>
-            <ion-text>{{ designer.style }}</ion-text>
-          </ion-item>
-          <ion-item>
-            <ion-label>服务地区:</ion-label>
-            <ion-text>{{ designer.serviceArea }}</ion-text>
-          </ion-item>
-          <ion-item>
-            <ion-label>价格:</ion-label>
-            <ion-text>{{ designer.price }}</ion-text>
-          </ion-item>
-          <ion-item>
-            <ion-label>用户评价:</ion-label>
-            <ion-text>{{ designer.rating }}</ion-text>
-          </ion-item>
-        </ion-card-content>
-    
-        <!-- 底部 -->
-          <ion-button expand="full" fill="outline">咨询</ion-button>
-          <ion-button expand="full" fill="outline">电话</ion-button>
-          <ion-button expand="full" fill="outline">在线预约</ion-button>
-          <ion-button expand="full" fill="outline">查看案例</ion-button>
-      </ion-card>
-    </div>
-  </div>
+<div *ngIf="selectedSegment === 'designer'">
+  <ion-card *ngFor="let designer of designers">
+    <!-- 头部 -->
+    <ion-card-header>
+      <ion-avatar>
+        <img [src]="designer.avatar" alt="Designer Avatar">
+      </ion-avatar>
+      <ion-card-title>{{ designer.username }}</ion-card-title>
+      <ion-button fill="outline" slot="end">关注</ion-button>
+    </ion-card-header>
+    <ion-card-content>
+      <p>{{ designer.bio }}</p>
+    </ion-card-content>
+
+    <!-- 内容 -->
+    <ion-card-content>
+      <ion-img [src]="designer.portfolioImage" alt="Designer Portfolio"></ion-img>
+      <ion-item>
+        <ion-label>作品数量:</ion-label>
+        <ion-text>{{ designer.portfolioCount }}</ion-text>
+      </ion-item>
+      <ion-item>
+        <ion-label>擅长风格:</ion-label>
+        <ion-text>{{ designer.style }}</ion-text>
+      </ion-item>
+      <ion-item>
+        <ion-label>服务地区:</ion-label>
+        <ion-text>{{ designer.serviceArea }}</ion-text>
+      </ion-item>
+      <ion-item>
+        <ion-label>价格:</ion-label>
+        <ion-text>{{ designer.price }}</ion-text>
+      </ion-item>
+      <ion-item>
+        <ion-label>用户评价:</ion-label>
+        <ion-text>{{ designer.rating }}</ion-text>
+      </ion-item>
+    </ion-card-content>
+
+    <!-- 底部 -->
+    <ion-button expand="full" fill="outline">咨询</ion-button>
+    <ion-button expand="full" fill="outline">电话</ion-button>
+    <ion-button expand="full" fill="outline">在线预约</ion-button>
+    <ion-button expand="full" fill="outline">查看案例</ion-button>
+  </ion-card>
+</div>
+</div>
 </ion-content>

src/app/tab2/tab2.page.ts

@@ -84,6 +84,13 @@ export class Tab2Page {
         // 添加更多案例
       ],
       designers: [
+        {
+          avatar: 'designer1.jpg',
+          name: '设计师A',
+          style: '现代风格',
+          serviceArea: '城市A',
+          price: '1'
+        },
         {
           avatar: 'designer1.jpg',
           name: '设计师A',
@@ -283,9 +290,9 @@ export class Tab2Page {
   designers = [
     {
       username: '李宛如',
-      avatar: 'assets/designer1.jpg',
+      avatar: 'Assets\img\designer1.jpg',
       bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
-      portfolioImage: 'assets/portfolio1.jpg',
+      portfolioImage: 'Assets\img\designer1.jpg',
       portfolioCount: 50,
       style: '现代简约、北欧风格',
       serviceArea: '北京',

src/app/tab4/tab4.page.html

@@ -1,10 +1,10 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>我的</ion-title>
+    <!-- <ion-title>我的</ion-title> -->
     <ion-buttons slot="end">
       <ion-button (click)="openFeedbackPage()">
         <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
-        <p (click)="openFeedbackPage()" style="margin-left:10px;margin-top:15px;font-size:20px">反馈</p>
+        <ion-label>反馈</ion-label>
       </ion-button>
       
       <ion-button (click)="openSettingsPage()">