tab4

src/app/tab1/tab1.page.html

@@ -14,7 +14,7 @@
 
   <!-- 导航栏 -->
   <ion-toolbar>
-    <ion-segment value="explore">
+    <ion-segment>
       <ion-segment-button value="explore">
         发现
       </ion-segment-button>
@@ -26,7 +26,7 @@
 
   <!-- 功能模块 -->
   <ion-segment scrollable>
-    <ion-segment-button value="example">
+    <ion-segment-button value="case">
       <ion-icon name="albums"></ion-icon>
       案例设计
     </ion-segment-button>
@@ -34,35 +34,35 @@
       <ion-icon name="brush"></ion-icon>
       免费设计
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="decoration">
       <ion-icon name="construct"></ion-icon>
       装修施工
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="soft">
       <ion-icon name="bed"></ion-icon>
       软装搭配
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="diagnosis">
       <ion-icon name="medkit"></ion-icon>
       户型诊断
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="customization">
       <ion-icon name="bonfire"></ion-icon>
       全屋定制
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="encyclopedia">
       <ion-icon name="library"></ion-icon>
       干货百科
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="style">
       <ion-icon name="heart-circle"></ion-icon>
       风格测试
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="home">
       <ion-icon name="home"></ion-icon>
       设计我家
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="budget">
       <ion-icon name="calculator"></ion-icon>
       智能预算
     </ion-segment-button>
@@ -127,7 +127,7 @@
                 <ion-grid>
                   <ion-row>
                     <!-- 装修全流程card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://pic1.zhimg.com/v2-423645f54387fd0ea9be83687b58cc35_720w.jpg?source=172ae18b"></ion-img>
                         <ion-card-header>
@@ -136,7 +136,7 @@
                       </ion-card>
                     </ion-col>
                     <!-- 全屋定制card -->
-                    <ion-col>
+                    <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>
@@ -163,7 +163,7 @@
                 <ion-grid>
                   <ion-row>
                     <!-- 橱柜怎么选card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://pic1.zhimg.com/v2-160f6e66e25daba826ecbef5ec4eef91_720w.jpg?source=172ae18b"></ion-img>
                         <ion-card-header>
@@ -172,7 +172,7 @@
                       </ion-card>
                     </ion-col>
                     <!-- 沙发怎么选card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://www.qszs.com/uploads/allimg/180322/6-1P322104631.jpg"></ion-img>
                         <ion-card-header>
@@ -199,7 +199,7 @@
                 <ion-grid>
                   <ion-row>
                     <!-- 窗帘怎么选card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="http://www.wzy99.com/UploadFiles/FCK/2017-10/6364376207453191332635836.jpg"></ion-img>
                         <ion-card-header>
@@ -208,7 +208,7 @@
                       </ion-card>
                     </ion-col>
                     <!-- 收纳怎么做card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://pic1.zhimg.com/v2-430eceee402f2cdf87312f13d8238d3c_r.jpg"></ion-img>
                         <ion-card-header>
@@ -228,4 +228,23 @@
       
     </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>
+
+
+
+

src/app/tab1/tab1.page.scss

@@ -1,4 +1,30 @@
 ion-card {
-    margin: 10px;
-    left: 5px;
-  }
+  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-weight: bold;
+  }
+}
+
+ion-thumbnail {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+
+h2 {
+  font-size: 1.2em;
+  margin-bottom: 5px;
+}
+
+p {
+  font-size: 0.9em;
+  color: #777;
+  margin-bottom: 3px;
+}

src/app/tab1/tab1.page.ts

@@ -8,16 +8,21 @@ import { Component } from '@angular/core';
 export class Tab1Page {
   selectedSegment: string = 'company';
 
+  activeTab:string = 'explore';
+  changeTab(event:any){
+    this.activeTab = event.detail.value
+  }
 
   constructor() {}
 
-  segmentChanged(event: CustomEvent) {
-    this.selectedSegment = event.detail.value;
-  }
+  // segmentChanged(event: CustomEvent) {
+  //   this.selectedSegment = event.detail.value;
+  // }
 
+  // 在此处定义和初始化数据
   contentList = [
-    { image: 'assets/images/image1.jpg', title: '示例标题1', user: '用户A', likes: 10, comments: 5, tags: '标签1, 标签2' },
-    { image: 'assets/images/image2.jpg', title: '示例标题2', user: '用户B', likes: 20, comments: 8, tags: '标签3, 标签4' },
+    { image: 'assets/images/example1.jpghttps://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg', title: '示例标题1', user: '用户A', likes: 10, comments: 5, tags: '标签1, 标签2' },
+    { image: 'https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg', title: '示例标题2', user: '用户B', likes: 20, comments: 8, tags: '标签3, 标签4' },
     // 添加更多示例数据
   ];
   

src/app/tab2/tab2.page.html

@@ -54,15 +54,15 @@
               <ion-list>
                 <ion-item>
                   <ion-label>公司服务:</ion-label>
-                  <ion-text>{{ company.services }}</ion-text>
+                  <ion-text [innerHTML]="formatHtmlContent(company.services)"></ion-text>
                 </ion-item>
                 <ion-item>
                   <ion-label>公司优势:</ion-label>
-                  <ion-text>{{ company.advantages }}</ion-text>
+                  <ion-text [innerHTML]="formatHtmlContent(company.advantages)"></ion-text>
                 </ion-item>
                 <ion-item>
                   <ion-label>公司案例:</ion-label>
-                  <ion-text>{{ company.cases }}</ion-text>
+                  <ion-text [innerHTML]="formatHtmlContent(company.cases)"></ion-text>
                 </ion-item>
               </ion-list>
             <!-- 底部按钮 -->

src/app/tab2/tab2.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-tab2',
@@ -12,10 +13,10 @@ export class Tab2Page {
       name: '和美空间设计',
       starRating: 4.7,
       reviewCount: 150,
-      description: '装修公司A的简介',
-      services: '全方位装修服务',
-      advantages: '专业团队、高品质材料',
-      cases: '装修公司A的案例'
+      description: '华美装饰设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
+      services: '室内装修设计\n定制家具设计\n空间规划布局\n装饰材料供应',
+      advantages: '专业团队：拥有经验丰富的设计师和施工团队，保证项目质量\n创意设计：注重细节，根据客户需求量身定制设计方案\n优质材料：选用优质装饰材料，确保装修质量和耐久性\n贴心服务：全程跟踪服务，提供周到的售后服务，保障客户满意度。',
+      cases: '客厅装修案例：现代简约风格，打造温馨舒适的家居空间。\n卧室装修案例：北欧风格，简约清新，注重自然光线的利用。\n餐厅装修案例：中式风格，传统与现代相结合，展现东方韵味。'
     },
     {
       name: '灵感装修工程',
@@ -339,8 +340,12 @@ export class Tab2Page {
   ];
   selectedDesignerSegment: string = 'designer';
 
-  constructor() {}
+  constructor(private sanitizer: DomSanitizer) {}
 
+  formatHtmlContent(content: string): SafeHtml {
+    const formattedContent = content.replace(/\n/g, '<br>');
+    return this.sanitizer.bypassSecurityTrustHtml(formattedContent);
+  }
   segmentChanged(event: CustomEvent) {
     this.selectedSegment = event.detail.value;
   }