tab4

src/app/app-routing.module.ts

@@ -1,20 +1,24 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'tab4',
-    loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'tab4',
+    loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
+  },
  {
+    path: 'login',
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
   }
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

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/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>