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

src/app/creator/creator.page.html

@@ -1,13 +1,85 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>creator</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title>创作者中心</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<!-- <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">creator</ion-title>
     </ion-toolbar>
   </ion-header>
+</ion-content> -->
+
+
+<ion-content>
+  <div class="creator-info">
+    <div class="profile">
+      <ion-avatar>
+        <img src="avatar.jpg"> <!-- 头像图片 -->
+      </ion-avatar>
+      <ion-label class="nickname">0105</ion-label> <!-- 昵称 -->
+    </div>
+    <div class="stats">
+      <ion-label class="label-icon"><ion-icon name="thumbs-up-outline"></ion-icon> 点赞数：300</ion-label>
+      <ion-label class="label-icon"><ion-icon name="eye-outline"></ion-icon> 浏览量：6000</ion-label>
+      <ion-label class="label-icon"><ion-icon name="star-outline"></ion-icon> 最佳作品点赞数：150</ion-label>
+      <ion-label class="label-icon"><ion-icon name="cash-outline"></ion-icon> 收入：2000元</ion-label>
+    </div>
+</div>
+
+  <div class="best-works">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>最佳作品</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 最佳作品列表 -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="exclusive-services">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>专属服务</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-label>专属服务内容：</ion-label>
+        <ion-label>1. 学创作</ion-label>
+        <ion-label>2. 任务中心</ion-label>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="tools-resources">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>创作工具和资源</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 创作工具和资源列表 -->
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="community-interaction">
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>创作者社区和互动</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-button expand="block" fill="clear" (click)="goToCommunity()">
+          <ion-icon name="people-outline"></ion-icon>
+          创作者社区
+        </ion-button>
+      </ion-card-content>
+    </ion-card>
+  </div>
 </ion-content>
+
+

src/app/creator/creator.page.scss

@@ -0,0 +1,23 @@
+.creator-info {
+  //background-image: url('../assets/img/paint.png'); /* 背景图片路径 */
+  background-size: cover;
+  background-position: center;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.profile {
+  /* 个人信息样式 */
+}
+
+.stats {
+  /* 统计信息样式 */
+}
+
+.nickname {
+  color: black; /* 昵称文字颜色 */
+}
+
+.label-icon {
+  color: black; /* 图标和文字颜色 */
+}

src/app/creator/creator.page.ts

@@ -7,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CreatorPage implements OnInit {
 
+  goToCommunity(){
+    
+  }
   constructor() { }
 
   ngOnInit() {

src/app/tab2/tab2.page.html

@@ -74,10 +74,10 @@
             </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-button expand="full" fill="clear">电话</ion-button>
+          <ion-button expand="full" fill="clear">预约</ion-button>
+          <ion-button expand="full" fill="clear">咨询</ion-button>
+          <ion-button expand="full" fill="clear">查看案例</ion-button>
         </ion-card-content>
       </ion-card>
     </div>
@@ -195,62 +195,65 @@
 </ion-card>
   
           <!-- 底部按钮 -->
-          <ion-button expand="full" color="tertiary">电话</ion-button>
-          <ion-button expand="full" color="tertiary">预约</ion-button>
-          <ion-button expand="full" color="tertiary">咨询</ion-button>
-          <ion-button expand="full" color="tertiary">查看案例</ion-button>
+          <ion-button expand="full" fill="clear">电话</ion-button>
+          <ion-button expand="full" fill="clear">预约</ion-button>
+          <ion-button expand="full" fill="clear">咨询</ion-button>
+          <ion-button expand="full" fill="clear">查看案例</ion-button>
   
         </ion-card-content>
       </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 *ngIf="selectedSegment === 'designer'">
+    <ion-card *ngFor="let designer of designers" class="Designer-card">
+      <!-- 头部 -->
+      <ion-card-header class="header">
+        <div class="avatar-container">
+          <ion-avatar class="avatar">
+            <img [src]="designer.avatar" alt="Designer Avatar">
+          </ion-avatar>
+        </div>
+        <div class="name-container">
+          <ion-card-title class="title">{{ designer.username }}</ion-card-title>
+          <ion-button fill="clear" slot="end">关注</ion-button>
+        </div>
+      </ion-card-header>
+      <ion-card-content>
+        <p>{{ designer.bio }}</p>
+      </ion-card-content>
+  
+      <!-- 内容 -->
+      <ion-card-content class="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="clear">咨询</ion-button>
+      <ion-button expand="full" fill="clear">电话</ion-button>
+      <ion-button expand="full" fill="clear">在线预约</ion-button>
+      <ion-button expand="full" fill="clear">查看案例</ion-button>
+    </ion-card>
+  </div>
 </div>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -4,11 +4,15 @@
     color: rgb(52, 160, 255); /* 增大字号至1.2em（根据需要调整大小） */
   }
   .company-card {
-    background-color: #e0ffd2; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+    background-color: #e9fff9; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
     color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
   }
   .Company-card {
-    background-color: #f9ffdb; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+    background-color: #dbf1ff; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+    color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
+  }
+  .Designer-card {
+    background-color: #dbf1ff; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
     color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
   }
   .info-item {
@@ -20,11 +24,11 @@
   color: rgb(52, 160, 255);
 }
 .Angency-card {
-  background-color: #f9ffdb; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  background-color: #dbf1ff; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
   color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
 }
 .ant-card {
-  background-color: #e0ffd2; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
+  background-color: #e9fff9; /* 设置ion-card的背景颜色为灰色（根据需要调整颜色） */
   color: rgb(0, 0, 0); /* 设置文本颜色为黑色 */
 }
 .review-details {
@@ -35,4 +39,50 @@
 .case-details {
   display: flex;
   flex-direction: column;
+}
+
+.Designer-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.name-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px; /* 调整头像和名字之间的间距 */
+}
+
+.title {
+  margin-top: 10px; /* 调整名字和关注按钮之间的间距 */
+}
+/* 在现有的CSS样式基础上添加以下样式来改变关注按钮的样式 */
+ion-button {
+  font-size: 16px; /* 修改按钮字体大小 */
+  padding: 5px 5px; /* 修改按钮内边距 */
+  background-color: #c1daff; /* 修改按钮背景颜色 */
+  color: #ffffff; /* 修改按钮文字颜色 */
+  border-radius: 10px; /* 添加圆角 */
+  border: 1px solid #fffbea; /* 添加边框 */
+}
+
+ion-button:hover {
+  background-color: #ffd4f0; /* 鼠标悬停时修改背景颜色 */
+  color: #000000; /* 鼠标悬停时修改文字颜色 */
+}
+.custom-button {
+  font-size: 20px; /* 修改按钮内文字的字体大小 */
 }

src/app/tab2/tab2.page.ts

@@ -73,17 +73,17 @@ export class Tab2Page {
       starRating: 4.8,
       reviewCount: 1123,
       description: 'Creativa Studio是一家享誉业界的设计机构，致力于为客户提供创新、个性化的设计解决方案。我们拥有一支充满激情和创造力的设计团队，致力于将客户的梦想转化为现实。',
-      services: '室内设计： 我们提供室内设计服务，涵盖住宅、商业空间、办公室等各类项目。无论是现代简约风格、北欧清新风格还是工业风格，我们都能满足客户的不同需求。\n建筑设计： 我们拥有资深的建筑设计师团队，为客户提供创新的建筑设计方案，致力于打造具有美学和功能性的建筑作品。\n景观设计： 我们注重自然与人文的融合，为客户打造独特的景观设计方案，让空间焕发生机与活力。',
-      advantages: '多样化风格结合： Artistic Designs擅长结合不同风格，如现代、北欧、工业等，创造独特的设计方案，满足客户多样化的需求。\n创意设计： 我们注重创意与实用性的结合，致力于为客户打造个性化、高品质的设计作品。',
+      services: '1、室内设计： 我们提供室内设计服务，涵盖住宅、商业空间、办公室等各类项目。无论是现代简约风格、北欧清新风格还是工业风格，我们都能满足客户的不同需求。\n2、建筑设计： 我们拥有资深的建筑设计师团队，为客户提供创新的建筑设计方案，致力于打造具有美学和功能性的建筑作品。\n3、景观设计： 我们注重自然与人文的融合，为客户打造独特的景观设计方案，让空间焕发生机与活力。',
+      advantages: '1、多样化风格结合： Artistic Designs擅长结合不同风格，如现代、北欧、工业等，创造独特的设计方案，满足客户多样化的需求。\n2、创意设计： 我们注重创意与实用性的结合，致力于为客户打造个性化、高品质的设计作品。',
       cases: [
         {
-          image: 'https://img.zcool.cn/community/019ff85a03f99fa80121985c79061b.jpg@1280w_1l_2o_100sh.jpg',
-          description: '这是一处别墅室内设计案例，注重空间利用和光线的运用。',
+          image: 'https://img.zcool.cn/community/012df759db4424a80121ae0cfa98b4.jpg@2o.jpg',
+          description: '书房以明亮的白色为主色调，搭配原木色家具，营造出清新自然的氛围。书桌靠窗设置，充分利用自然光线，让阅读更加舒适愉悦。',
           style: '现代简约'
         },
         {
-          image: 'https://img.zcool.cn/community/01928b5c9736cea801214168667881.jpg@1280w_1l_2o_100sh.jpg',
-          description: ' 这是一家咖啡厅的室内设计案例，营造出温馨舒适的氛围。',
+          image: 'https://img.zcool.cn/community/014590609b367b11013f4720d94472.jpg@2o.jpg',
+          description: '餐厅采用简约现代的设计风格，黑白灰为基调，搭配金属元素，展现出时尚大气的氛围。灯光设计独特，营造出温馨就餐氛围。',
           style: '北欧风格'
         },
         // 添加更多案例
@@ -106,193 +106,194 @@ export class Tab2Page {
         // 添加更多设计师
       ],
       designConcept: ' Creativa Studio秉承“创意无限，设计无限”的理念，致力于为客户提供独一无二的设计方案。',
-      serviceProcess: '初步沟通与需求确认\n方案设计与初步呈现\n修改与确认设计方案\n施工图绘制与施工管理\n完工验收与售后服务',
+      serviceProcess: '1、初步沟通与需求确认\n2、方案设计与初步呈现\n3、修改与确认设计方案\n4、施工图绘制与施工管理\n5、完工验收与售后服务',
       userReviews: [
         {
           text: 'Creativa Studio的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
-          image: 'review1.jpg',
+          image: 'https://gemjia-file.oss-cn-shenzhen.aliyuncs.com/website/upfile/admin/44/20190708/65797f4a688edd4a78e3b3363c3a8c24.jpg',
           starRating: 4.7
         },
         {
           text: '感谢Creativa Studio的团队，他们的设计让我们的商铺焕然一新，效果超出预期',
-          image: 'review1.jpg',
+          image: 'https://img.zcool.cn/community/01ee8b5a1ceffba8012171329f3d3f.jpg@2o.jpg',
           starRating: 4.4
         },
         // 添加更多用户评价
       ]
     },
     {
-      name: '创意天地设计',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
-      services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
+      name: 'Innovative Interiors',
+      starRating: 4.6,
+      reviewCount: 1325,
+      description: 'Innovative Interiors是一家专注于室内设计的设计机构，致力于为客户创造独特而具有个性的空间。我们的设计团队充满创意和激情，致力于提供高品质的设计服务，满足客户的需求。',
+      services: '1、住宅设计： 我们提供个性化的住宅室内设计服务，包括客厅、卧室、厨房等空间的设计与装饰。\n2、家具定制：根据客户需求定制家具，包括衣柜、书桌、沙发等，注重设计与实用性的结合。\n3、软装设计：提供软装搭配方案，包括窗帘、地毯、灯具等，打造舒适、温馨的居家氛围。\n4、空间规划：通过合理的空间规划，最大限度地发挥空间功能，创造舒适宜居的生活空间。',
+      advantages: '1、定制化设计： 我们注重每位客户的个性化需求，提供定制化的设计方案，让每个空间都独具特色。/n细致关注： 我们关注细节，注重空间的功能性和美学结合，确保每个项目都达到最佳效果。',
       cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
-        },
-        // 添加更多案例
-      ],
-      designers: [
-        {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
-        },
-        {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
-        },
-        // 添加更多设计师
-      ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
-      userReviews: [
-        {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          image: 'https://img.zcool.cn/community/016aca5e8fddd6a80120a895c355eb.jpg@2o.jpg',
+          description: '办公室设计，注重开放性与舒适性。',
+          style: '现代简约'
         },
-        // 添加更多用户评价
-      ]
-    },
-    {
-      name: '艺境空间设计',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
-      services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
-      cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
+          image: 'https://img95.699pic.com/photo/50114/3329.jpg_wh860.jpg',
+          description: '欧式风格餐厅设计，典雅奢华。',
+          style: '欧式典雅'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/01452a5e0af4ada80120a89566284b.jpg@1280w_1l_2o_100sh.jpg',
+          name: '张婷婷',
+          style: '现代风格',
+          serviceArea: '北京',
+          price: '￥1800/m²'
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/013c875df24a1da801219cce17fe87.jpg@1280w_1l_2o_100sh.jpg',
+          name: '王伟华',
+          style: '欧式风格',
+          serviceArea: '上海',
+          price: '￥2000/m²'
+        },
+        {
+          avatar: 'https://www.manpingou.com/uploads/allimg/201020/25-201020163940313.jpg',
+          name: '李小龙',
+          style: '工业风格',
+          serviceArea: '广州',
+          price: '￥2200/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: 'Innovative Interiors致力于打造舒适、实用且具有美感的空间，让客户的生活更加美好。',
+      serviceProcess: '1、初步沟通与需求确认：了解客户需求与喜好\n2、方案设计与初步呈现：提供初步设计方案与效果图\n3、修改与确认设计方案：根据客户反馈进行修改与确认\n4、施工图绘制与施工管理：提供施工图纸并进行施工管理\n5、完工验收与售后服务：最终验收并提供售后服务支持',
       userReviews: [
         {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: 'Innovative Interiors的设计团队非常专业，为我们打造了一个完美的家居空间，非常满意！',
+          image: 'https://img.zcool.cn/community/01c84258147090a84a0d304f329639.jpg@1280w_1l_2o_100sh.jpg',
+          starRating: 4.8
+        },
+        {
+          text: '感谢Innovative Interiors的团队，他们的设计让我们的商铺焕然一新，效果超出预期！',
+          image: 'https://ts1.cn.mm.bing.net/th/id/R-C.ac838c75a6a3416482513299da4346bc?rik=gvbYAv1XbB2XNg&riu=http%3a%2f%2fwww.zswcn.com%2fuploadfile%2f2013%2f1017%2f20131017025942120.jpg&ehk=mTYVkUZc1kLunRB8kuQx9bXevex%2fCtbNNuH7bfV2NwU%3d&risl=&pid=ImgRaw&r=0',
+          starRating: 4.5
         },
         // 添加更多用户评价
       ]
     },
     {
-      name: '星辰创意设计室',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
-      services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
+      name: 'Elegance Design Studio',
+      starRating: 4.9,
+      reviewCount: 2156,
+      description: 'Elegance Design Studio是一家专业的室内设计机构，致力于为客户打造精致、优雅的空间设计。我们拥有经验丰富的设计团队，注重细节和创新，为客户提供个性化的设计方案。',
+      services: '1、住宅设计： 提供个性化的住宅室内设计服务，打造舒适、温馨的家居空间。\n2、商业空间设计： 设计各类商业空间，包括办公室、餐厅、零售店等，注重品牌形象与用户体验。\n3、家具定制：根据客户需求定制家具，打造与空间风格相匹配的定制家具，提升空间整体美感。\n4、软装设计：提供软装搭配方案，包括窗帘、地毯、灯具等，让空间更具层次感和舒适度。\n5、空间规划：通过科学的空间规划，最大限度地优化空间利用，创造功能性与美感兼具的空间。',
+      advantages: '1、精致设计： 我们注重每一个细节，致力于打造精致、优雅的空间设计，让每个项目都展现独特魅力。\n2、个性定制： 我们重视与客户的沟通，根据客户的需求和喜好量身定制设计方案，确保每个空间都反映客户的个性和品味。\n3、多样化风格： 我们设计团队擅长多种风格，包括现代、欧式、北欧等，能够满足不同客户的审美需求。\n4、专业团队： 我们拥有经验丰富的设计师团队，具备专业知识和创意思维，为每个项目带来独特的设计视角。',
       cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
+          image: 'https://img.zcool.cn/community/01dc705cb2d3daa801214168c34e39.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: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/01688c5d1333e3a80121552915a3e2.jpg@1280w_1l_2o_100sh.jpg',
+          name: '李佳琪',
+          style: '现代风格',
+          serviceArea: '北京',
+          price: '2000/m²'
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.5J5WEFL0whOMIbqS3f1aoAHaHa?pid=ImgDet&w=474&h=474&rs=1',
+          name: '张瑞雪',
+          style: '欧式风格',
+          serviceArea: '上海',
+          price: '2200/m²'
+        },
+        {
+          avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.hu6HhnXclfSti-sHmig8ZgHaHa?pid=ImgDet&w=474&h=474&rs=1',
+          name: '王明阳',
+          style: '北欧风格',
+          serviceArea: '广州',
+          price: '1800/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: 'Elegance Design Studio致力于打造精致、优雅的空间设计，让客户的生活更加舒适与美好。',
+      serviceProcess: '1、初步沟通与需求确认\n2、方案设计与初步呈现\n3、修改与确认设计方案\n4、施工图绘制与施工管理\n5、完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: 'Elegance Design Studio的设计团队非常专业，他们的设计让我的家焕然一新，完美呈现了我的梦想家园！',
+          image: 'https://img.zcool.cn/community/01e3e65dbfe034a801209e1f01473b.jpg@1280w_1l_2o_100sh.jpg',
+          starRating: 4.9
+        },
+        {
+          text: '感谢Elegance Design Studio的团队，他们的设计让我们的办公空间焕发新生，提升了工作效率！',
+          image: 'https://img.zcool.cn/community/016aca5e8fddd6a80120a895c355eb.jpg@2o.jpg',
+          starRating: 4.7
         },
         // 添加更多用户评价
       ]
     },
     {
-      name: '创意空间探索所',
-      starRating: 4.5,
-      reviewCount: 150,
-      description: '设计机构Y的简介',
+      name: 'Harmony Interiors',
+      starRating: 4.7,
+      reviewCount: 1789,
+      description: 'Harmony Interiors是一家专业的室内设计公司，致力于为客户打造和谐、舒适的空间环境。我们拥有一支充满创意和经验丰富的设计团队，致力于提供个性化的设计方案，满足客户的需求。',
       services: '建筑设计、室内设计',
-      advantages: '专业团队、精细施工',
+      advantages: '个性化定制： 我们注重与客户的沟通，根据客户的需求和喜好，定制独特的设计方案，确保每个空间都体现客户的个性和品味。\n空间规划： 我们擅长科学的空间规划，最大限度地优化空间利用，创造舒适、实用的居住环境。\n细致关注： 我们注重细节，从家具搭配到装饰品选择，精心打造每一个细节，让空间更具品质感和温暖感。',
       cases: [
         {
-          image: 'case2.jpg',
-          description: '案例描述2',
-          style: '现代简约风格'
+          image: 'https://img.zcool.cn/community/012afe5c9db5eaa801214168b80415.jpg@1280w_1l_2o_100sh.jpg',
+          description: '客厅采用灰色调为主色调，搭配舒适的沙发和简约的家具，营造出现代时尚的氛围。',
+          style: '现代简约'
+        },
+        {
+          image: 'https://img.zcool.cn/community/0153075ab2f6e3a80121820766bd30.jpg@1280w_1l_2o_100sh.jpg',
+          description: '餐厅采用暖色调，搭配精美的餐桌椅和吊灯，展现出欧式典雅的氛围。',
+          style: '欧式风格'
         },
         // 添加更多案例
       ],
       designers: [
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/01b9995bfb6c99a80121ab5d8bd1dd.jpg@1280w_1l_2o_100sh.jpg',
+          name: '张晓宇',
+          style: '现代风格',
+          serviceArea: '北京',
+          price: '￥2100/m²'
         },
         {
-          avatar: 'designer2.jpg',
-          name: '设计师B',
-          style: '简约风格',
-          serviceArea: '城市B',
-          price: '$$'
+          avatar: 'https://img.zcool.cn/community/012d365e8166a3a801216518d9a3eb.jpg@1280w_1l_2o_100sh.jpg',
+          name: '李阳',
+          style: '北欧风格',
+          serviceArea: '广州',
+          price: '￥1900/m²'
         },
         // 添加更多设计师
       ],
-      designConcept: '设计理念描述',
-      serviceProcess: '服务流程描述',
+      designConcept: 'Harmony Interiors致力于创造和谐、舒适的空间环境，让客户享受高品质的生活体验。',
+      serviceProcess: '1、初步沟通与需求确认\n2、方案设计与初步呈现\n3、修改与确认设计方案\n4、施工图绘制与施工管理\n5、完工验收与售后服务',
       userReviews: [
         {
-          text: '用户评价2',
-          image: 'review2.jpg',
-          starRating: 4
+          text: 'Harmony Interiors的设计团队非常专业，他们的设计让我感受到家的温暖，完美诠释了我的生活理念！',
+          image: 'https://img.zcool.cn/community/0174f25549315c0000019ae93c7e22.jpg@1280w_1l_2o_100sh.jpg',
+          starRating: 4.5
+        },
+        {
+          text: '我对Harmony Interiors的服务感到非常满意，他们的设计让我的家焕然一新，每一处细节都体现出他们的用心和专业！',
+          image: 'https://ts1.cn.mm.bing.net/th/id/R-C.1aa6c9960ce2f889a282282d67df1b95?rik=OQtw39kJ5ZDxUA&riu=http%3a%2f%2fimage.bao315.com%2fupload%2fimage%2f202007%2f02%2f6c305847-0c07-4e52-b742-e6206eb91579.jpg&ehk=eX87SnzPqNCeC51NTr%2bOmcJaF4vOqgtAhVE679WYnPI%3d&risl=&pid=ImgRaw&r=0',
+          starRating: 4.7
         },
         // 添加更多用户评价
       ]
-    }
+    },
     // 添加更多设计机构信息
   ];
   selectedTab: string = 'designCompany';
@@ -300,9 +301,9 @@ export class Tab2Page {
   designers = [
     {
       username: '李宛如',
-      avatar: 'Assets\img\designer1.jpg',
+      avatar: 'https://img.zcool.cn/community/01b1ae5c598973a801213f26e9319f.jpg@1280w_1l_2o_100sh.jpg',
       bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
-      portfolioImage: 'Assets\img\designer1.jpg',
+      portfolioImage: 'https://cloud-prana.oss-cn-hangzhou.aliyuncs.com/cms/content/case/69fc1ba3dd194dfbb5c59a16f831bed4.jpg?x-oss-process=style/q80_logo',
       portfolioCount: 50,
       style: '现代简约、北欧风格',
       serviceArea: '北京',
@@ -311,9 +312,9 @@ export class Tab2Page {
     },
     {
       username: '张晨光',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.O4VqNskDVJLCYvDrg0tQ5gHaHY?pid=ImgDet&w=474&h=472&rs=1',
       bio: '张晨光是一位充满创意和热情的室内设计师，擅长将空间与艺术相融合，为客户打造独特、舒适的家居环境。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://img.zcool.cn/community/01b1c459a6cef4a8012028a90e0e3f.jpg@1280w_1l_2o_100sh.jpg',
       portfolioCount: 80,
       style: '现代简约、工业风格',
       serviceArea: '上海',
@@ -322,9 +323,9 @@ export class Tab2Page {
     },
     {
       username: '王梦洁',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.yWDWw6b1CQ-orhJ_bpI2LgHaH9?pid=ImgDet&w=474&h=509&rs=1',
       bio: '王梦洁是一位注重细节和品质的室内设计师，擅长通过色彩和材质搭配打造温馨、时尚的居住空间。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://img.zcool.cn/community/01f5f15b55ef3aa80121ade0ef573c.jpg@1280w_1l_2o_100sh.jpg',
       portfolioCount: 60,
       style: '北欧风格、现代简约',
       serviceArea: '广州',
@@ -333,9 +334,9 @@ export class Tab2Page {
     },
     {
       username: '刘阳光',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://ts1.cn.mm.bing.net/th/id/R-C.dcc590aecf35901b329f64def6269d01?rik=vNhcMlKbZc%2fceQ&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022040509%2fqsgsxvv332s.jpg&ehk=Wb73m280Fuiv%2b4Agx4xqW9jBT72APtDOqckbgdrFCpU%3d&risl=&pid=ImgRaw&r=0',
       bio: '刘阳光是一位富有创意和想象力的室内设计师，致力于为客户打造个性化、独特的空间体验。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://big.justeasy.cn/effect/202011/20201115153340_5fb0d9d4a9ae5.jpg',
       portfolioCount: 45,
       style: '中式风格、现代简约',
       serviceArea: '成都',
@@ -344,9 +345,9 @@ export class Tab2Page {
     },
     {
       username: '陈思慧',
-      avatar: 'assets/designer2.jpg',
+      avatar: 'https://ts1.cn.mm.bing.net/th/id/R-C.eef0ffc57c0c8cd07deb516a981d0891?rik=G2wdbPpZ%2f%2fTvWQ&riu=http%3a%2f%2fimg.shejidna.com%2fworksdna471d90e60df8e078447fc43f59b2617d.jpg%3fx-oss-process%3dimage%2fresize%2cw_2200%2fquality%2cq_80%2fwatermark%2calign_1%2ct_80%2cinterval_5%2csize_18%2cshadow_10%2ccolor_ffffff%2ctype_ZHJvaWRzYW5zZmFsbGJhY2s%2cimage_eXkucG5n%2ctext_QFRpYW5qaWFu&ehk=NtWVHF%2fuGRUurdCYZrlaRNeJN1uObWUUeR4w66cv9Uc%3d&risl=&pid=ImgRaw&r=0',
       bio: ' 陈思慧是一位充满激情和创意的室内设计师，专注于打造具有个性和温暖感的居家空间，致力于为客户提供高品质的设计服务。',
-      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioImage: 'https://img.zcool.cn/community/0125335c7e19dfa801213f26cea3bd.jpg@1280w_1l_2o_100sh.jpg',
       portfolioCount: 70,
       style: '现代简约、地中海风格',
       serviceArea: '广州',

src/app/tab4/tab4.page.html

@@ -53,6 +53,7 @@
 </ion-grid>
     
     <ion-card-content>
+      
     <ion-segment-button value="creators" (click)="openLogin2Page()">
       <ion-icon name="color-palette-outline"></ion-icon>
       创作者中心

src/app/tab4/tab4.page.scss

@@ -26,17 +26,6 @@ ion-segment-button {
   padding: 10px 0px; /* 设置按钮内边距，增加按钮的大小 */
 }
 
-ion-segment {
-  scrollbar-width: none; /* 隐藏滚动条（适用于部分浏览器） */
-  -ms-overflow-style: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
-  &::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条（适用于 Chrome 和 Safari） */
-  }
-  &::-ms-overflow-style {
-    display: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
-  }
-}
-
 
 p {
   font-size: 20px; /* 设置文字大小为20px */

src/modules/user/login/login.page.html

@@ -4,13 +4,13 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="centered-card">
 
+  <div class="container">
   <ion-card>
     <ion-card-header>
       <ion-card-title>登录/注册</ion-card-title>
     </ion-card-header>
-  
     <ion-card-content>
 
       <ion-list [inset]="true">
@@ -21,13 +21,18 @@
           <ion-input [(ngModel)]="password" label="密码" type="password" placeholder="请输入密码"></ion-input>
         </ion-item>
       </ion-list>
-     
+
     </ion-card-content>
   
     <ion-button (click)="login()" fill="clear">登录</ion-button>
     <ion-button (click)="register()" fill="clear">注册</ion-button>
-  </ion-card>
 
-  <!-- 新增路由返回逻辑，执行back函数 -->
+    <!-- 新增路由返回逻辑，执行back函数 -->
   <ion-button expand="block" (click)="back()">返回</ion-button>
-</ion-content>
+
+    
+  </ion-card>
+    </div>
+  </ion-content>
+
+  

src/modules/user/login/login.page.scss

@@ -0,0 +1,14 @@
+ion-card-title{
+    text-align: center;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 60vh;
+}
+.centered-card{
+    height:400px;
+}