add

src/app/app-routing.module.ts

@@ -10,7 +10,11 @@ const routes: Routes = [
     path: 'tab4',
     loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
   },
-  
+  {
+    path: 'login',
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
+  }
+
 ];
 @NgModule({
   imports: [

src/app/login/login-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginPage } from './login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LoginPageRoutingModule {}

src/app/login/login.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginPageRoutingModule } from './login-routing.module';
+
+import { LoginPage } from './login.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LoginPageRoutingModule
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule {}

src/app/login/login.page.html

@@ -0,0 +1,26 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title style="font-size:30px">登录</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card>
+    <ion-card-content>
+      <ion-item>
+        <ion-label position="floating">用户名</ion-label>
+        <ion-input type="text"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label position="floating">密码</ion-label>
+        <ion-input type="password"></ion-input>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+</ion-content>
+
+
+

src/app/login/login.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+})
+export class LoginPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/tab1/tab1.page.html

@@ -118,27 +118,29 @@
           <ion-col>
             <ion-card>
               <ion-card-header>
-                <ion-icon name="logo"></ion-icon>
-                <ion-label>空间设计</ion-label>
+                <ion-label>
+                  <ion-icon name="send-outline"></ion-icon>
+                  装前必看
+                </ion-label>
               </ion-card-header>
               <ion-card-content>
                 <ion-grid>
                   <ion-row>
-                    <!-- 客厅怎么装card -->
+                    <!-- 装修全流程card -->
                     <ion-col>
                       <ion-card>
-                        <ion-img src="assets/images/living_room.jpg"></ion-img>
+                        <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 -->
+                    <!-- 全屋定制card -->
                     <ion-col>
                       <ion-card>
-                        <ion-img src="assets/images/living_room.jpg"></ion-img>
+                        <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>
@@ -152,27 +154,29 @@
           <ion-col>
             <ion-card>
               <ion-card-header>
-                <ion-icon name="logo"></ion-icon>
-                <ion-label>家具家电</ion-label>
+                <ion-label>
+                  <ion-icon name="desktop-outline"></ion-icon>
+                  家具家电
+                </ion-label>
               </ion-card-header>
               <ion-card-content>
                 <ion-grid>
                   <ion-row>
-                    <!-- 客厅怎么装card -->
+                    <!-- 橱柜怎么选card -->
                     <ion-col>
                       <ion-card>
-                        <ion-img src="assets/images/living_room.jpg"></ion-img>
+                        <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 -->
+                    <!-- 沙发怎么选card -->
                     <ion-col>
                       <ion-card>
-                        <ion-img src="assets/images/living_room.jpg"></ion-img>
+                        <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>
@@ -186,27 +190,29 @@
           <ion-col>
             <ion-card>
               <ion-card-header>
-                <ion-icon name="logo"></ion-icon>
-                <ion-label>家居软装</ion-label>
+                <ion-label>
+                  <ion-icon name="bed-outline"></ion-icon>
+                  家居软装
+                </ion-label>
               </ion-card-header>
               <ion-card-content>
                 <ion-grid>
                   <ion-row>
-                    <!-- 客厅怎么装card -->
+                    <!-- 窗帘怎么选card -->
                     <ion-col>
                       <ion-card>
-                        <ion-img src="assets/images/living_room.jpg"></ion-img>
+                        <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 -->
+                    <!-- 收纳怎么做card -->
                     <ion-col>
                       <ion-card>
-                        <ion-img src="assets/images/living_room.jpg"></ion-img>
+                        <ion-img src="https://pic1.zhimg.com/v2-430eceee402f2cdf87312f13d8238d3c_r.jpg"></ion-img>
                         <ion-card-header>
-                          卧室怎么装
+                          收纳怎么做
                         </ion-card-header>
                       </ion-card>
                     </ion-col>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,4 @@
+ion-card {
+    margin: 10px;
+    left: 5px;
+  }

src/app/tab2/tab2.page.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="light">
     <ion-title>装修</ion-title>
   </ion-toolbar>
 </ion-header>
@@ -30,9 +30,8 @@
     <div *ngIf="selectedSegment === 'company'">
       <!-- 装修公司详情页 -->
       <ion-card *ngFor="let company of companies">
-        <ion-card-header>
-          公司名称: {{ company.name }}
-        </ion-card-header>
+        <ion-card-header><ion-card-title> {{ company.name }}</ion-card-title>
+      </ion-card-header>
         <ion-card-content>
           <ion-item>
             <ion-label>星级评分:</ion-label>
@@ -67,10 +66,10 @@
                 </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-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>
@@ -179,10 +178,10 @@
           </ion-card>
   
           <!-- 底部按钮 -->
-          <ion-button expand="full" color="primary">电话</ion-button>
-          <ion-button expand="full" color="primary">预约</ion-button>
-          <ion-button expand="full" color="primary">咨询</ion-button>
-          <ion-button expand="full" color="primary">查看案例</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" color="tertiary">查看案例</ion-button>
   
         </ion-card-content>
       </ion-card>

src/app/tab2/tab2.page.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 export class Tab2Page {
   companies = [
     {
-      name: '装修公司A',
+      name: '和美空间设计',
       starRating: 4.7,
       reviewCount: 150,
       description: '装修公司A的简介',
@@ -18,7 +18,7 @@ export class Tab2Page {
       cases: '装修公司A的案例'
     },
     {
-      name: '装修公司B',
+      name: '灵感装修工程',
       starRating: 4.5,
       reviewCount: 120,
       description: '装修公司B的简介',
@@ -27,7 +27,34 @@ export class Tab2Page {
       cases: '装修公司B的案例'
     },
     {
-      name: '装修公司C',
+      name: '璞心设计工作室',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司C的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    },
+    {
+      name: '悦居室内设计',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司C的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    },
+    {
+      name: '彩虹装饰工程',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司C的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    },
+    {
+      name: '素雅装饰设计',
       starRating: 4.5,
       reviewCount: 120,
       description: '装修公司C的简介',
@@ -41,7 +68,7 @@ export class Tab2Page {
   
   designCompanies = [
     {
-      name: '设计机构X',
+      name: '源境设计工作室',
       starRating: 4.8,
       reviewCount: 200,
       description: '设计机构X的简介',
@@ -77,7 +104,136 @@ export class Tab2Page {
       ]
     },
     {
-      name: '设计机构Y',
+      name: '创意天地设计',
+      starRating: 4.5,
+      reviewCount: 150,
+      description: '设计机构Y的简介',
+      services: '建筑设计、室内设计',
+      advantages: '专业团队、精细施工',
+      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
+        },
+        // 添加更多用户评价
+      ]
+    },
+    {
+      name: '艺境空间设计',
+      starRating: 4.5,
+      reviewCount: 150,
+      description: '设计机构Y的简介',
+      services: '建筑设计、室内设计',
+      advantages: '专业团队、精细施工',
+      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
+        },
+        // 添加更多用户评价
+      ]
+    },
+    {
+      name: '星辰创意设计室',
+      starRating: 4.5,
+      reviewCount: 150,
+      description: '设计机构Y的简介',
+      services: '建筑设计、室内设计',
+      advantages: '专业团队、精细施工',
+      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
+        },
+        // 添加更多用户评价
+      ]
+    },
+    {
+      name: '创意空间探索所',
       starRating: 4.5,
       reviewCount: 150,
       description: '设计机构Y的简介',
@@ -125,26 +281,59 @@ export class Tab2Page {
   
   designers = [
     {
-      username: '设计师A',
+      username: '李宛如',
       avatar: 'assets/designer1.jpg',
-      bio: '设计师A的简介',
+      bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
       portfolioImage: 'assets/portfolio1.jpg',
-      portfolioCount: 10,
-      style: '现代风格',
+      portfolioCount: 50,
+      style: '现代简约、北欧风格',
       serviceArea: '北京',
-      price: '100-200元/平米',
+      price: '平均每平米价格为1000元',
       rating: 4.8
     },
     {
-      username: '设计师B',
+      username: '张晨光',
       avatar: 'assets/designer2.jpg',
-      bio: '设计师B的简介',
+      bio: '张晨光是一位充满创意和热情的室内设计师，擅长将空间与艺术相融合，为客户打造独特、舒适的家居环境。',
       portfolioImage: 'assets/portfolio2.jpg',
-      portfolioCount: 8,
-      style: '简约风格',
+      portfolioCount: 80,
+      style: '现代简约、工业风格',
       serviceArea: '上海',
-      price: '150-250元/平米',
+      price: '平均每平米价格为1500元',
+      rating: 4.6
+    },
+    {
+      username: '王梦洁',
+      avatar: 'assets/designer2.jpg',
+      bio: '王梦洁是一位注重细节和品质的室内设计师，擅长通过色彩和材质搭配打造温馨、时尚的居住空间。',
+      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioCount: 60,
+      style: '北欧风格、现代简约',
+      serviceArea: '广州',
+      price: '平均每平米价格为1200元',
+      rating: 4.5
+    },
+    {
+      username: '刘阳光',
+      avatar: 'assets/designer2.jpg',
+      bio: '刘阳光是一位富有创意和想象力的室内设计师，致力于为客户打造个性化、独特的空间体验。',
+      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioCount: 45,
+      style: '中式风格、现代简约',
+      serviceArea: '成都',
+      price: '平均每平米价格为1000元',
       rating: 4.6
+    },
+    {
+      username: '陈思慧',
+      avatar: 'assets/designer2.jpg',
+      bio: ' 陈思慧是一位充满激情和创意的室内设计师，专注于打造具有个性和温暖感的居家空间，致力于为客户提供高品质的设计服务。',
+      portfolioImage: 'assets/portfolio2.jpg',
+      portfolioCount: 70,
+      style: '现代简约、地中海风格',
+      serviceArea: '广州',
+      price: '平均每平米价格为1300元',
+      rating: 4.8
     }
     // 添加更多设计师信息
   ];

src/app/tab4/tab4.page.html

@@ -21,10 +21,10 @@
       <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 style="margin-left:15px;margin-top:15px;font-size:20px">登录/注册</ion-label>
+      <ion-card-content>
+        <p (click)="openLoginPage()" style="margin-left:10px;margin-top:15px;font-size:20px">登录/注册</p>
+      </ion-card-content>
     </ion-card-content>
-      
-    
 
   <ion-card>
     <ion-card-content>
@@ -71,14 +71,21 @@
   
   
     <ion-card-content style="justify-content: space-around">
-      <p (click)="showContent('发布')">发布</p>
-      <p (click)="showContent('收藏')">收藏</p>
-      <p (click)="showContent('点赞')">点赞</p>
-      <p (click)="showContent('浏览')">浏览</p>
+    <p (click)="showContent('发布')" [ngClass]="{'selected': selectedContent === '发布'}">发布</p>
+    <p (click)="showContent('收藏')" [ngClass]="{'selected': selectedContent === '收藏'}">收藏</p>
+    <p (click)="showContent('点赞')" [ngClass]="{'selected': selectedContent === '点赞'}">点赞</p>
+    <p (click)="showContent('浏览')" [ngClass]="{'selected': selectedContent === '浏览'}">浏览</p>
     </ion-card-content>
   
 
-  <div class="content-area">
-    {{ selectedContent }}
-  </div>
+  <ion-row>
+    <ion-col size="6" *ngFor="let work of selectedWorks">
+      <ion-card>
+        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.7362eff54c56e870c18a2126b26d9c23?rik=9if10ySst3TtbQ&riu=http%3a%2f%2fimg.zx123.cn%2fResources%2fzx123cn%2fuploadfile%2f2015%2f0910%2f20150910100439_21337.jpg&ehk=43EDk7VLby%2bA3dLs%2fPIIxej3Cs60UwiZ7rHB7eJ3zYk%3d&risl=&pid=ImgRaw&r=0" alt="作品图片">
+        <ion-card-content>
+          {{ work.description }}
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
 </ion-content>

src/app/tab4/tab4.page.scss

@@ -35,6 +35,6 @@ ion-segment {
 p {
   font-size: 20px; /* 设置文字大小为20px */
 }
-p:active {
-  color: blue; /* 点击后文本颜色变为蓝色 */
+p.selected {
+    color: blue; /* 设置选中文本颜色为蓝色 */
 }

src/app/tab4/tab4.page.ts

@@ -8,17 +8,57 @@ import { NavController } from '@ionic/angular';
 })
 export class Tab4Page implements OnInit {
 
-  constructor(private navCtrl: NavController) {this.selectedContent = '发布';}
-  selectedContent: string = '';
+  constructor(private navCtrl: NavController) {}//this.selectedContent = '发布';
+  selectedContent: string = '发布';
+
+  publishedWorks: any[] = [
+    {description: '这是发布作品1的描述' },
+    {description: '这是发布作品2的描述' },
+    // 其他发布作品信息
+  ];
+
+  collectedWorks: any[] = [
+    {description: '这是收藏作品1的描述' },
+    {description: '这是收藏作品2的描述' },
+    // 其他收藏作品信息
+  ];
+
+  likedWorks: any[] = [
+    {description: '这是点赞作品1的描述' },
+    {description: '这是点赞作品2的描述' },
+    // 其他点赞作品信息
+  ];
+
+  viewedWorks: any[] = [
+    {description: '这是浏览作品1的描述' },
+    {description: '这是浏览作品2的描述' },
+    // 其他浏览作品信息
+  ];
+
+  selectedWorks: any[] = [];
 
   showContent(content: string) {
-    if (content === '收藏') {
-      this.selectedContent = '一个作品都没有';
-    } else {
-      this.selectedContent = content;
+    this.selectedContent = content;
+    switch(content) {
+      case '发布':
+        this.selectedWorks = this.publishedWorks;
+        break;
+      case '收藏':
+        this.selectedWorks = this.collectedWorks;
+        break;
+      case '点赞':
+        this.selectedWorks = this.likedWorks;
+        break;
+      case '浏览':
+        this.selectedWorks = this.viewedWorks;
+        break;
+      default:
+        this.selectedWorks = [];
     }
   }
 
+
+
   openFeedbackPage() {
     // 打开反馈页面
   }
@@ -28,7 +68,12 @@ export class Tab4Page implements OnInit {
     // 打开设置页面
   }
 
+  openLoginPage() {
+    this.navCtrl.navigateForward('/login');
+  }
+
   ngOnInit() {
+    this.showContent(this.selectedContent);
   }
 
 }

src/app/tabs/tabs.page.html

@@ -2,22 +2,22 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+      <ion-icon aria-hidden="true" name="planet-outline"></ion-icon>
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-icon aria-hidden="true" name="brush-outline"></ion-icon>
       <ion-label>装修</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
+      <ion-icon aria-hidden="true" name="chatbubbles-outline"></ion-icon>
       <ion-label>消息</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab4" href="/tabs/tab4">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>