tab1

src/app/tab1/close-friends/close-friends.component.html

@@ -0,0 +1,28 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>亲密关系</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item class="partner">
+      <ion-label>伴侣</ion-label>
+    </ion-item>
+    <ion-item class="children">
+      <ion-label>儿女</ion-label>
+    </ion-item>
+    <ion-item class="grandchildren">
+      <ion-label>孙子</ion-label>
+
+      </ion-item>
+    <ion-item class="old-friends">
+      <ion-label>老朋友</ion-label>
+    </ion-item>
+  </ion-list>
+  <div class="circles">
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+  </div>
+</ion-content>

src/app/tab1/close-friends/close-friends.component.scss

@@ -0,0 +1,63 @@
+ion-item {
+    font-size: 24px;
+    transition: transform 0.3s;
+  
+    ion-label {
+      font-size: 30px;
+    }
+  
+    &.partner {
+      background-color: #FFD700; /* 金色 */
+    }
+  
+    &.children {
+      background-color: #FF69B4; /* 粉色 */
+    }
+  
+    &.grandchildren {
+      background-color: #87CEEB; /* 天蓝色 */
+    }
+  
+    &.old-friends {
+      background-color: #32CD32; /* 青绿色 */
+    }
+  
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+  
+  .circles {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    
+    .circle {
+      width: 20px;
+      height: 20px;
+      background-color: #000;
+      border-radius: 50%;
+      margin: 0 10px;
+      animation: pulse 2s infinite;
+    }
+  
+    .circle:nth-child(2) {
+      animation-delay: 0.4s;
+    }
+  
+    .circle:nth-child(3) {
+      animation-delay: 0.8s;
+    }
+  }
+  
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.5);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }

src/app/tab1/close-friends/close-friends.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CloseFriendsComponent } from './close-friends.component';
+
+describe('CloseFriendsComponent', () => {
+  let component: CloseFriendsComponent;
+  let fixture: ComponentFixture<CloseFriendsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CloseFriendsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CloseFriendsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tab1/close-friends/close-friends.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-close-friends',
+  templateUrl: './close-friends.component.html',
+  styleUrls: ['./close-friends.component.scss'],
+})
+export class CloseFriendsComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() {}
+}

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

@@ -1,11 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Tab1Page } from './tab1.page';
+import { CloseFriendsComponent } from './close-friends/close-friends.component'; // 确保路径正确
 
 const routes: Routes = [
   {
     path: '',
     component: Tab1Page,
+  },
+  {
+    path: 'close-friends',
+    component: CloseFriendsComponent
   }
 ];
 
@@ -13,4 +18,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab1PageRoutingModule {}
+export class Tab1PageRoutingModule {}

src/app/tab1/tab1.module.ts

@@ -6,6 +6,7 @@ import { Tab1Page } from './tab1.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
 import { Tab1PageRoutingModule } from './tab1-routing.module';
+import { CloseFriendsComponent } from './close-friends/close-friends.component';
 
 @NgModule({
   imports: [
@@ -13,8 +14,9 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
     CommonModule,
     FormsModule,
     ExploreContainerComponentModule,
-    Tab1PageRoutingModule
+    Tab1PageRoutingModule,
+
   ],
-  declarations: [Tab1Page]
+  declarations: [Tab1Page,CloseFriendsComponent]
 })
 export class Tab1PageModule {}

src/app/tab1/tab1.page.ts

@@ -30,7 +30,7 @@ export class Tab1Page {
   }
 
   goToCloseFriends() {
-    this.router.navigate(['/tab1/close-friends']);
+    this.router.navigate(['/tabs/tab1/close-friends']);
   }
 
   goToNewFriends() {

src/app/tab2/tab2.page.ts

@@ -14,8 +14,8 @@ export class Tab2Page {
     this.router.navigate(['/game']); // 导航到游戏页面，假设游戏页面路由为 '/game' 
   }
 
-  watchVideo() { 
-    this.router.navigate(['/video']); // 导航到视频页面，假设视频页面路由为 '/video' 
+  watchVideo() {
+    window.open('https://www.douyin.com/?recommend=1', '_blank'); // 在新标签页中打开指定网站
   }
 
   goToFriend() { 

src/app/tab3/news/news.component.html

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>新闻</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let news of newsList" class="news-item">
+      <ion-thumbnail slot="start">
+        <img [src]="news.image" />
+      </ion-thumbnail>
+      <ion-label>
+        <h2>{{ news.title }}</h2>
+        <p>{{ news.summary }}</p>
+        <p class="date">{{ news.date | date:'shortDate' }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/tab3/news/news.component.scss

@@ -0,0 +1,34 @@
+ion-item.news-item {
+    --background: #fff;
+    --ion-item-background: #fff;
+    margin: 10px 0;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  
+    ion-thumbnail {
+      border-radius: 10px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  
+    ion-label {
+      h2 {
+        font-size: 20px;
+        font-weight: bold;
+        margin: 0;
+        color: #333;
+      }
+      p {
+        margin: 5px 0;
+        color: #666;
+        &.date {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }

src/app/tab3/news/news.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewsComponent } from './news.component';
+
+describe('NewsComponent', () => {
+  let component: NewsComponent;
+  let fixture: ComponentFixture<NewsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/tab3/news/news.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-news',
+  templateUrl: './news.component.html',
+  styleUrls: ['./news.component.scss'],
+})
+export class NewsComponent implements OnInit {
+  newsList = [
+    {
+      title: '重大新闻标题1',
+      summary: '这是新闻摘要1。这是一个简短的新闻描述。',
+      image: 'assets/news1.jpg',
+      date: new Date(),
+    },
+    {
+      title: '重大新闻标题2',
+      summary: '这是新闻摘要2。这是一个简短的新闻描述。',
+      image: 'assets/news2.jpg',
+      date: new Date(),
+    },
+    {
+      title: '重大新闻标题3',
+      summary: '这是新闻摘要3。这是一个简短的新闻描述。',
+      image: 'assets/news3.jpg',
+      date: new Date(),
+    },
+    // Add more news items as needed
+  ];
+
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -1,11 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { Tab3Page } from './tab3.page';
+import { NewsComponent } from './news/news.component'; // 更新路径
 
 const routes: Routes = [
   {
     path: '',
     component: Tab3Page,
+    children: [
+      {
+        path: 'news',
+        component: NewsComponent
+      }
+    ]
   }
 ];
 
@@ -13,4 +20,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab3PageRoutingModule {}
+export class Tab3PageRoutingModule {}

src/app/tab3/tab3.module.ts

@@ -6,6 +6,7 @@ import { Tab3Page } from './tab3.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
 import { Tab3PageRoutingModule } from './tab3-routing.module';
+import { NewsComponent } from './news/news.component';
 
 @NgModule({
   imports: [
@@ -15,6 +16,6 @@ import { Tab3PageRoutingModule } from './tab3-routing.module';
     ExploreContainerComponentModule,
     Tab3PageRoutingModule
   ],
-  declarations: [Tab3Page]
+  declarations: [Tab3Page,NewsComponent]
 })
 export class Tab3PageModule {}

src/app/tab3/tab3.page.ts

@@ -10,7 +10,7 @@ export class Tab3Page {
   constructor(private router: Router) {}
 
   goToNews() {
-    this.router.navigate(['/news']);
+    this.router.navigate(['/tabs/tab3/news']); // 跳转到新闻页面
   }
 
   goToInterest() {