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

README.md

@@ -170,30 +170,99 @@
 
 ### 创作页面的产品结构
 - 首页
+   - 顶部搜索栏
    - 导航栏
       - 发现
       - 视频
       - 搜索
-   - 功能栏
-      - 轮播图
-      - 案例设计
-      - 一键寻宝
-      - 装修百科
-      - 买好货
-      - 关注
-      - 推荐
-      - 家居
-      - 设计师
-      - 附近
-   - 内容流
-      > 展示以视频为主的装修案例内容。
-
-      - 图片
-      - 标题
-      - 点赞数
-      - 评论数
-      - 用户信息
-      - 标签
+   - 功能模块
+      - 案例设计按钮
+         - logo
+         - 案例设计
+      - 免费设计按钮
+         - logo
+         - 免费设计
+      - 装修施工按钮
+         - logo
+         - 装修施工
+      - 软装搭配按钮
+         - logo
+         - 软装搭配
+      - 户型诊断按钮
+         - logo
+         - 户型诊断
+      - 全屋定制按钮
+         - logo
+         - 全屋定制
+      - 干货百科按钮
+         - logo
+         - 干货百科
+      - 风格测试按钮
+         - logo
+         - 风格测试
+      - 设计我家按钮
+         - logo
+         - 设计我家
+      - 智能预算按钮
+         - logo
+         - 智能预算
+   - 装修锦囊块
+      - 装修锦囊
+      - 装修锦囊卡片
+         - 空间设计块
+            - logo和空间设计
+            - 客厅怎么装card
+               - 图片
+               - 客厅怎么装
+            - 卧室怎么装card
+               - 图片
+               - 卧室怎么装
+         - 装前必看块
+            - logo和装前必看
+            - 装修全流程card
+               - 图片
+               - 装修全流
+            - 全屋定制card
+               - 图片
+               - 全屋定制
+         - 家具家电块
+            - logo和家具家电
+            - 橱柜怎么选card
+               - 图片
+               - 橱柜怎么选
+            - 沙发怎么选card
+               - 图片
+               - 沙发怎么选
+         - 家居软装块
+            - logo和家居软装
+            - 窗帘怎么选card
+               - 图片
+               - 窗帘怎么选
+            - 收纳怎么做card
+               - 图片
+               - 收纳怎么做
+   - 案例块
+      - 功能栏
+         - 一键寻宝
+         - 装修百科
+         - 买好货
+         - 关注
+         - 案例
+         - 家居
+         - 原创
+         - 设计师
+         - 流程
+         - 施工
+         - 建材
+         - 家具家电
+      - 内容流
+         > 展示以视频为主的装修案例内容。
+         - 图片视频
+         - 标题
+         - 点赞数
+         - 评论数
+         - 用户信息
+         - 标签
    - 底部导航栏
       - 首页
       - 装修

src/app/tab2/tab2.page.html

@@ -29,9 +29,9 @@
     <!-- 装修公司详情页 -->
     <div *ngIf="selectedSegment === 'company'">
       <!-- 装修公司详情页 -->
-      <ion-card>
+      <ion-card *ngFor="let company of companies">
         <ion-card-header>
-          公司名称
+          公司名称: {{ company.name }}
         </ion-card-header>
         <ion-card-content>
           <ion-item>
@@ -58,62 +58,21 @@
                   <ion-text>{{ company.services }}</ion-text>
                 </ion-item>
                 <ion-item>
-                  <ion-label>优势:</ion-label>
+                  <ion-label>公司优势:</ion-label>
                   <ion-text>{{ company.advantages }}</ion-text>
                 </ion-item>
                 <ion-item>
-                  <ion-label>案例:</ion-label>
+                  <ion-label>公司案例:</ion-label>
                   <ion-text>{{ company.cases }}</ion-text>
                 </ion-item>
               </ion-list>
+            <!-- 底部按钮 -->
+            <ion-button expand="full">电话</ion-button>
+            <ion-button expand="full">预约</ion-button>
+            <ion-button expand="full">咨询</ion-button>
+            <ion-button expand="full">查看案例</ion-button>
             </ion-card-content>
           </ion-card>
-          <!-- 服务项目 -->
-          <ion-card>
-            <ion-card-header>
-              服务项目
-            </ion-card-header>
-            <ion-card-content>
-              <ion-list>
-                <ion-item>全屋定制</ion-item>
-                <ion-item>局部改造</ion-item>
-                <ion-item>硬装</ion-item>
-                <ion-item>软装</ion-item>
-              </ion-list>
-            </ion-card-content>
-          </ion-card>
-          <!-- 案例展示 -->
-          <ion-card>
-            <ion-card-header>
-              案例展示
-            </ion-card-header>
-            <ion-card-content>
-              <!-- 展示公司完成的装修案例 -->
-            </ion-card-content>
-          </ion-card>
-          <!-- 团队介绍 -->
-          <ion-card>
-            <ion-card-header>
-              团队介绍
-            </ion-card-header>
-            <ion-card-content>
-              <!-- 展示公司设计师和施工团队的信息 -->
-            </ion-card-content>
-          </ion-card>
-          <!-- 用户评价 -->
-          <ion-card>
-            <ion-card-header>
-              用户评价
-            </ion-card-header>
-            <ion-card-content>
-              <!-- 展示用户对公司的评价 -->
-            </ion-card-content>
-          </ion-card>
-          <!-- 底部按钮 -->
-          <ion-button expand="full">电话</ion-button>
-          <ion-button expand="full">预约</ion-button>
-          <ion-button expand="full">咨询</ion-button>
-          <ion-button expand="full">查看案例</ion-button>
         </ion-card-content>
       </ion-card>
     </div>
@@ -128,20 +87,20 @@
         <!-- 设计机构详情页 -->
         <ion-card>
           <ion-card-header>
-            机构名称
+            机构名称: {{ agency.name }}
           </ion-card-header>
           <ion-card-content>
             <ion-item>
               <ion-label>星级评分:</ion-label>
-              <ion-text>{{ organization.starRating }}</ion-text>
+              <ion-text>{{ agency.starRating }}</ion-text>
             </ion-item>
             <ion-item>
               <ion-label>评价数量:</ion-label>
-              <ion-text>{{ organization.reviewCount }}</ion-text>
+              <ion-text>{{ agency.reviewCount }}</ion-text>
             </ion-item>
             <ion-item>
               <ion-label>机构简介:</ion-label>
-              <ion-text>{{ organization.description }}</ion-text>
+              <ion-text>{{ agency.description }}</ion-text>
             </ion-item>
             <!-- 机构介绍 -->
             <ion-card>
@@ -152,15 +111,15 @@
                 <ion-list>
                   <ion-item>
                     <ion-label>服务:</ion-label>
-                    <ion-text>{{ organization.services }}</ion-text>
+                    <ion-text>{{ agency.services }}</ion-text>
                   </ion-item>
                   <ion-item>
                     <ion-label>优势:</ion-label>
-                    <ion-text>{{ organization.advantages }}</ion-text>
+                    <ion-text>{{ agency.advantages }}</ion-text>
                   </ion-item>
                   <ion-item>
                     <ion-label>案例:</ion-label>
-                    <ion-text>{{ organization.cases }}</ion-text>
+                    <ion-text>{{ agency.cases }}</ion-text>
                   </ion-item>
                 </ion-list>
               </ion-card-content>
@@ -261,7 +220,14 @@
                 设计师作品
               </ion-card-header>
               <ion-card-content>
-                <!-- 展示设计师作品图片和数量 -->
+                <ion-grid>
+                  <ion-row>
+                    <ion-col size="6" *ngFor="let work of designer.works">
+                      <ion-img src="{{ work.image }}"></ion-img>
+                      <p>{{ work.description }}</p>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
               </ion-card-content>
             </ion-card>
             <!-- 用户评价 -->
@@ -270,7 +236,18 @@
                 用户评价
               </ion-card-header>
               <ion-card-content>
-                <!-- 展示用户对设计师的评价 -->
+                <ion-list>
+                  <ion-item *ngFor="let review of designer.reviews">
+                    <ion-avatar slot="start">
+                      <ion-img src="{{ review.avatar }}"></ion-img>
+                    </ion-avatar>
+                    <ion-label>
+                      <h2>{{ review.username }}</h2>
+                      <p>{{ review.comment }}</p>
+                    </ion-label>
+                    <ion-icon slot="end" name="star" [color]="review.rating >= 4 ? 'warning' : 'medium'"></ion-icon>
+                  </ion-item>
+                </ion-list>
               </ion-card-content>
             </ion-card>
             <!-- 底部按钮 -->

src/app/tab2/tab2.page.ts

@@ -8,23 +8,61 @@ import { Component } from '@angular/core';
 })
 export class Tab2Page {
   selectedSegment: string = 'company';
-  company = {
-    name: '公司名称',
-    starRating: 4.5,
-    reviewCount: 100,
-    description: '公司简介',
-    services: '公司服务内容',
-    advantages: '公司优势内容',
-    cases: '公司案例内容'
-  };
-  organization = {
+  companies = [
+    {
+      name: '装修公司A',
+      starRating: 4.7,
+      reviewCount: 150,
+      description: '装修公司A的简介',
+      services: '全方位装修服务',
+      advantages: '专业团队、高品质材料',
+      cases: '装修公司A的案例'
+    },
+    {
+      name: '装修公司B',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司B的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    },
+    {
+      name: '装修公司C',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司C的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    }
+    // 添加更多装修公司信息
+  ];
+  agency = {
     name: '机构名称',
-    starRating: 4.3,
-    reviewCount: 80,
+    starRating: 4.4,
+    reviewCount: 95,
     description: '机构简介',
-    services: '机构服务内容',
-    advantages: '机构优势内容',
-    cases: '机构案例内容'
+    services: '机构提供的服务',
+    advantages: '机构的优势',
+    cases: '机构的案例',
+    designers: [
+      { name: '设计师1', avatar: 'assets/designer1.jpg', specialty: '擅长风格1' },
+      { name: '设计师2', avatar: 'assets/designer2.jpg', specialty: '擅长风格2' },
+      // 添加更多设计师信息
+    ],
+    casesList: [
+      { image: 'assets/case1.jpg', description: '案例描述1' },
+      { image: 'assets/case2.jpg', description: '案例描述2' },
+      // 添加更多案例信息
+    ],
+    designPhilosophy: '设计理念内容',
+    serviceProcess: '服务流程内容',
+    reviews: [
+      { avatar: 'assets/user1.jpg', username: '用户1', comment: '评价1', rating: 5 },
+      { avatar: 'assets/user2.jpg', username: '用户2', comment: '评价2', rating: 4 },
+      // 添加更多用户评价
+    ]
   };
   designer = {
     name: '设计师姓名',
@@ -34,7 +72,16 @@ export class Tab2Page {
     serviceArea: '服务地区',
     price: '设计师价格',
     rating: '用户评价',
-    // 其他设计师信息
+    works: [
+      { image: 'assets/work1.jpg', title: '作品1', description: '作品描述1' },
+      { image: 'assets/work2.jpg', title: '作品2', description: '作品描述2' },
+      // 添加更多设计师作品
+    ],
+    reviews: [
+      { avatar: 'assets/user1.jpg', username: '用户1', comment: '评价1', rating: 5 },
+      { avatar: 'assets/user2.jpg', username: '用户2', comment: '评价2', rating: 4 },
+      // 添加更多用户评价
+    ]
   };
 
   constructor() {}

src/app/tab4/tab4.page.html

@@ -4,37 +4,81 @@
     <ion-buttons slot="end">
       <ion-button (click)="openFeedbackPage()">
         <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
+        <ion-label>反馈</ion-label>
       </ion-button>
+      
       <ion-button (click)="openSettingsPage()">
         <ion-icon name="settings-outline"></ion-icon>
+        <ion-label>设置</ion-label>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
+
 <ion-content>
-  <ion-card>
     <ion-card-content>
-      <ion-avatar>
+      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.5)">
         <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="User Avatar">
       </ion-avatar>
-      <ion-label>登录/注册</ion-label>
+      <ion-label style="margin-left:15px;margin-top:15px;font-size:20px">登录/注册</ion-label>
     </ion-card-content>
-  </ion-card>
-  <ion-segment scrollable>
-    <ion-segment-button value="followings">关注的人</ion-segment-button>
-    <ion-segment-button value="creators">创作者中心</ion-segment-button>
-    <ion-segment-button value="ai">AI焕新家</ion-segment-button>
-    <ion-segment-button value="diagnosis">户型诊断</ion-segment-button>
-    <ion-segment-button value="circles">我的圈子</ion-segment-button>
-    <ion-segment-button value="my-followings">我的关注</ion-segment-button>
-    <ion-segment-button value="my-orders">我的订单</ion-segment-button>
-    <ion-segment-button value="decor-assistant">装修助手</ion-segment-button>
-    <ion-segment-button value="apply-verification">申请认证</ion-segment-button>
+      
+    
+
+  <ion-card>
+    <ion-card-content>
+    <ion-segment scrollable>
+    <ion-segment-button value="followings">
+      <ion-icon name="people-outline"></ion-icon>
+      关注的人
+    </ion-segment-button>
+    <ion-segment-button value="creators">
+      <ion-icon name="brush-outline"></ion-icon>
+      创作者中心
+    </ion-segment-button>
+    <ion-segment-button value="ai">
+      <ion-icon name="color-wand-outline"></ion-icon>
+      AI焕新家
+    </ion-segment-button>
+    <ion-segment-button value="diagnosis">
+      <ion-icon name="map-outline"></ion-icon>
+      户型诊断
+    </ion-segment-button>
+    <ion-segment-button value="circles">
+      <ion-icon name="chatbubbles-outline"></ion-icon>
+      我的圈子
+    </ion-segment-button>
+    <ion-segment-button value="my-followings">
+      <ion-icon name="heart-outline"></ion-icon>
+      我的关注
+    </ion-segment-button>
+    <ion-segment-button value="my-orders">
+      <ion-icon name="receipt-outline"></ion-icon>
+      我的订单
+    </ion-segment-button>
+    <ion-segment-button value="decor-assistant">
+      <ion-icon name="hammer-outline"></ion-icon>
+      装修助手
+    </ion-segment-button>
+    <ion-segment-button value="apply-verification">
+      <ion-icon name="shield-checkmark-outline"></ion-icon>
+      申请认证
+    </ion-segment-button>
   </ion-segment>
+    </ion-card-content>
+  </ion-card>
+  
+  <ion-card>
+    <ion-card-content style="justify-content: space-around">
+      <p (click)="showContent('发布')">发布</p>
+      <p (click)="showContent('收藏')">收藏</p>
+      <p (click)="showContent('点赞')">点赞</p>
+      <p (click)="showContent('浏览')">浏览</p>
+    </ion-card-content>
+  </ion-card>
 
-  <ion-button>发布</ion-button>
-  <ion-button>收藏</ion-button>
-  <ion-button>点赞</ion-button>
-  <ion-button>浏览</ion-button>
+  <div class="content-area">
+    {{ selectedContent }}
+  </div>
 </ion-content>

src/app/tab4/tab4.page.scss

@@ -1,7 +1,8 @@
 ion-card {
     margin: 10px;
+    top:8px;
   }
-  
+
   ion-card-content {
     display: flex;
     align-items: center;
@@ -16,6 +17,21 @@ ion-card {
   }
   
   ion-button {
-    margin: 5px;
+    margin: 15px;
   }
-  
+
+ion-segment-button {
+  font-size: 15px; /* 设置按钮字体大小为20px，让按钮整体看起来更大 */
+  padding: 5px 20px; /* 设置按钮内边距，增加按钮的大小 */
+}
+ion-segment {
+  --padding-start: 0; /* 设置起始内边距为0，让按钮靠左对齐 */
+  --padding-end: 0; /* 设置结束内边距为0，让按钮靠右对齐 */
+  overflow-x: auto; /* 水平滚动 */
+  scrollbar-width: none; /* 隐藏滚动条（适用于部分浏览器） */
+  
+}
+
+p {
+  font-size: 20px; /* 设置文字大小为20px */
+}

src/app/tab4/tab4.page.ts

@@ -9,10 +9,16 @@ import { NavController } from '@ionic/angular';
 export class Tab4Page implements OnInit {
 
   constructor(private navCtrl: NavController) {}
+  selectedContent: string = '';
+
+  showContent(content: string) {
+    this.selectedContent = content;
+  }
 
   openFeedbackPage() {
     // 打开反馈页面
   }
+  
 
   openSettingsPage() {
     // 打开设置页面