tab2

src/app/tab2/tab2.page.html

@@ -33,18 +33,19 @@
         <ion-card-header><ion-card-title> {{ company.name }}</ion-card-title>
       </ion-card-header>
         <ion-card-content>
-          <ion-item>
             <ion-label>星级评分:</ion-label>
             <ion-text>{{ company.starRating }}</ion-text>
-          </ion-item>
-          <ion-item>
             <ion-label>评价数量:</ion-label>
             <ion-text>{{ company.reviewCount }}</ion-text>
-          </ion-item>
-          <ion-item>
-            <ion-label>公司简介:</ion-label>
-            <ion-text>{{ company.description }}</ion-text>
-          </ion-item>
+          <!-- 公司简介 -->
+          <ion-card class="company-card">
+            <ion-card-header>
+              公司简介:
+            </ion-card-header>
+            <ion-card-content>
+              <ion-text [innerHTML]="formatHtmlContent(company.description)"></ion-text>
+            </ion-card-content>
+          </ion-card>
           <!-- 公司服务 -->
           <ion-card class="company-card">
             <ion-card-header>
@@ -91,36 +92,38 @@
           <ion-card-subtitle>星级评分: {{ designCompany.starRating }} | 评价数量: {{ designCompany.reviewCount }}</ion-card-subtitle>
         </ion-card-header>
         <ion-card-content>
-          <ion-item lines="none">
-            <ion-label>机构简介:</ion-label>
-            <ion-text>{{ designCompany.description }}</ion-text>
-          </ion-item>
-  
+          <!-- 机构简介 -->
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              机构简介:
+            </ion-card-header>
+            <ion-card-content>
+                <ion-text [innerHTML]="formatHtmlContent(designCompany.description )"></ion-text>
+            </ion-card-content>
+          </ion-card>
           <!-- 机构介绍 -->
-          <ion-card class="info-card">
-            <ion-card-header>
-              机构介绍
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              机构服务:
             </ion-card-header>
             <ion-card-content>
-              <ion-item>
-                <ion-label>服务:</ion-label>
-                <ion-text>{{ designCompany.services }}</ion-text>
-              </ion-item>
-              <ion-item>
-                <ion-label>优势:</ion-label>
-                <ion-text>{{ designCompany.advantages }}</ion-text>
-              </ion-item>
-              <ion-item>
-                <ion-label>案例:</ion-label>
-                <ion-text>{{ designCompany.cases }}</ion-text>
-              </ion-item>
+                <ion-text [innerHTML]="formatHtmlContent(designCompany.services )"></ion-text>
             </ion-card-content>
           </ion-card>
   
+          <!-- 机构介绍 -->
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              机构优势:
+            </ion-card-header>
+            <ion-card-content>
+                <ion-text [innerHTML]="formatHtmlContent(designCompany.advantages )"></ion-text>
+            </ion-card-content>
+          </ion-card>
           <!-- 设计师团队 -->
-          <ion-card class="team-card">
-            <ion-card-header>
-              设计师团队
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              设计师团队:
             </ion-card-header>
             <ion-card-content>
               <ion-item *ngFor="let designer of designCompany.designers" lines="none">
@@ -128,31 +131,35 @@
                   <img [src]="designer.avatar" alt="设计师头像">
                 </ion-avatar>
                 <ion-label>{{ designer.name }}</ion-label>
-                <ion-text>{{ designer.style }}</ion-text>
-                <ion-text>{{ designer.serviceArea }}</ion-text>
-                <ion-text>{{ designer.price }}</ion-text>
+                <ion-label>{{ designer.style }}</ion-label>
+                <ion-label>{{ designer.serviceArea }}</ion-label>
+                <ion-label>{{ designer.price }}</ion-label>
               </ion-item>
             </ion-card-content>
           </ion-card>
   
           <!-- 案例展示 -->
-          <ion-card class="case-card">
-            <ion-card-header>
-              案例展示
-            </ion-card-header>
-            <ion-card-content>
-              <ion-item *ngFor="let case of designCompany.cases" lines="none">
-                <img [src]="case.image" alt="案例图片">
-                <ion-label>{{ case.description }}</ion-label>
-                <ion-text>{{ case.style }}</ion-text>
-              </ion-item>
-            </ion-card-content>
-          </ion-card>
+<ion-card class="ant-card">
+  <ion-card-header class="ant-card">
+    案例展示:
+  </ion-card-header>
+  <ion-card-content>
+    <ion-item *ngFor="let case of designCompany.cases" lines="none">
+      <div class="case-container">
+        <img [src]="case.image" alt="案例图片" class="case-image">
+        <div class="case-details">
+          <ion-label>{{ case.description }}</ion-label>
+          <ion-text>设计风格：{{ case.style }}</ion-text>
+        </div>
+      </div>
+    </ion-item>
+  </ion-card-content>
+</ion-card>
   
           <!-- 设计理念 -->
-          <ion-card class="concept-card">
-            <ion-card-header>
-              设计理念
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              设计理念:
             </ion-card-header>
             <ion-card-content>
               <ion-text>{{ designCompany.designConcept }}</ion-text>
@@ -160,28 +167,32 @@
           </ion-card>
   
           <!-- 服务流程 -->
-          <ion-card class="process-card">
-            <ion-card-header>
-              服务流程
+          <ion-card class="ant-card">
+            <ion-card-header class="ant-card">
+              服务流程:
             </ion-card-header>
             <ion-card-content>
-              <ion-text>{{ designCompany.serviceProcess }}</ion-text>
+              <ion-text [innerHTML]="formatHtmlContent(designCompany.serviceProcess)"></ion-text>
             </ion-card-content>
           </ion-card>
   
           <!-- 用户评价 -->
-          <ion-card class="review-card">
-            <ion-card-header>
-              用户评价
-            </ion-card-header>
-            <ion-card-content>
-              <ion-item *ngFor="let review of designCompany.userReviews" lines="none">
-                <img [src]="review.image" alt="用户评价图片">
-                <ion-label>{{ review.text }}</ion-label>
-                <ion-text>星级评分: {{ review.starRating }}</ion-text>
-              </ion-item>
-            </ion-card-content>
-          </ion-card>
+<ion-card class="ant-card">
+  <ion-card-header class="ant-card">
+    用户评价:
+  </ion-card-header>
+  <ion-card-content>
+    <ion-item *ngFor="let review of designCompany.userReviews" lines="none">
+      <div class="review-container">
+        <img [src]="review.image" alt="用户评价图片">
+        <div class="review-details">
+          <ion-text>星级评分: {{ review.starRating }}</ion-text>
+          <ion-label>{{ review.text }}</ion-label>
+        </div>
+      </div>
+    </ion-item>
+  </ion-card-content>
+</ion-card>
   
           <!-- 底部按钮 -->
           <ion-button expand="full" color="tertiary">电话</ion-button>

src/app/tab2/tab2.page.scss

@@ -1,10 +1,7 @@
 
-  .company-card ion-card-header {
-    color: rgb(52, 160, 255); /* 将文字颜色设置为黑色 */
-  }
-  
   .company-card ion-card-header{
-    font-size: 1.4em; /* 增大字号至1.2em（根据需要调整大小） */
+    font-size: 1.4em;
+    color: rgb(52, 160, 255); /* 增大字号至1.2em（根据需要调整大小） */
   }
   .company-card {
     background-color: #e0ffd2; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
@@ -17,4 +14,25 @@
   .info-item {
   background-color: #f9ffdb; /* 设置info-item的背景颜色为灰色（根据需要调整颜色） */
   color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.ant-card ion-card-header{
+  font-size: 1.4em; /* 增大字号至1.2em（根据需要调整大小） */
+  color: rgb(52, 160, 255);
+}
+.Angency-card {
+  background-color: #f9ffdb; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.ant-card {
+  background-color: #e0ffd2; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+}
+.review-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.case-details {
+  display: flex;
+  flex-direction: column;
 }

src/app/tab2/tab2.page.ts

@@ -69,44 +69,54 @@ export class Tab2Page {
   
   designCompanies = [
     {
-      name: '源境设计工作室',
+      name: 'Creativa Studio',
       starRating: 4.8,
-      reviewCount: 200,
-      description: '设计机构X的简介',
-      services: '室内设计、景观设计',
-      advantages: '创新设计、高品质服务',
+      reviewCount: 1123,
+      description: 'Creativa Studio是一家享誉业界的设计机构，致力于为客户提供创新、个性化的设计解决方案。我们拥有一支充满激情和创造力的设计团队，致力于将客户的梦想转化为现实。',
+      services: '室内设计： 我们提供室内设计服务，涵盖住宅、商业空间、办公室等各类项目。无论是现代简约风格、北欧清新风格还是工业风格，我们都能满足客户的不同需求。\n建筑设计： 我们拥有资深的建筑设计师团队，为客户提供创新的建筑设计方案，致力于打造具有美学和功能性的建筑作品。\n景观设计： 我们注重自然与人文的融合，为客户打造独特的景观设计方案，让空间焕发生机与活力。',
+      advantages: '多样化风格结合： Artistic Designs擅长结合不同风格，如现代、北欧、工业等，创造独特的设计方案，满足客户多样化的需求。\n创意设计： 我们注重创意与实用性的结合，致力于为客户打造个性化、高品质的设计作品。',
       cases: [
         {
-          image: 'case1.jpg',
-          description: '案例描述1',
-          style: '现代风格'
+          image: 'https://img.zcool.cn/community/019ff85a03f99fa80121985c79061b.jpg@1280w_1l_2o_100sh.jpg',
+          description: '这是一处别墅室内设计案例，注重空间利用和光线的运用。',
+          style: '现代简约'
+        },
+        {
+          image: 'https://img.zcool.cn/community/01928b5c9736cea801214168667881.jpg@1280w_1l_2o_100sh.jpg',
+          description: ' 这是一家咖啡厅的室内设计案例，营造出温馨舒适的氛围。',
+          style: '北欧风格'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer1.jpg',
-          name: '设计师A',
+          avatar: 'https://img.zcool.cn/community/018fae5a9f4cfba801219586b6e26b.jpg@1280w_1l_2o_100sh.jpg',
+          name: '王小明',
           style: '现代风格',
-          serviceArea: '城市A',
-          price: '1'
+          serviceArea: '北京',
+          price: '￥2000/m²'
         },
         {
-          avatar: 'designer1.jpg',
-          name: '设计师A',
-          style: '现代风格',
-          serviceArea: '城市A',
-          price: '1'
+          avatar: 'https://img.zcool.cn/community/01baae5dab200fa8012163ba498eaa.jpg@2o.jpg',
+          name: '张美丽',
+          style: '北欧风格',
+          serviceArea: '上海',
+          price: '￥2200/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: ' Creativa Studio秉承“创意无限，设计无限”的理念，致力于为客户提供独一无二的设计方案。',
+      serviceProcess: '初步沟通与需求确认\n方案设计与初步呈现\n修改与确认设计方案\n施工图绘制与施工管理\n完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价1',
+          text: 'Creativa Studio的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
+          image: 'review1.jpg',
+          starRating: 4.7
+        },
+        {
+          text: '感谢Creativa Studio的团队，他们的设计让我们的商铺焕然一新，效果超出预期',
           image: 'review1.jpg',
-          starRating: 5
+          starRating: 4.4
         },
         // 添加更多用户评价
       ]