feat:add images

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/standalone"]
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "@ionic/angular/common",
+    "@ionic/angular/standalone"
+  ],
+  "liveServer.settings.port": 5501
 }

package-lock.json

@@ -25,6 +25,7 @@
         "ionicons": "^7.0.0",
         "parse": "^5.2.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.1.4",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
       },
@@ -15561,6 +15562,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "ionicons": "^7.0.0",
     "parse": "^5.2.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },

src/app/tab1/tab1.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar color="primary">
-    <ion-title>页面功能区域</ion-title>
+    <ion-title>首页</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -26,66 +26,82 @@
       户外
     </ion-segment-button>
   </ion-segment>
+ <!-- 内容推荐 -->
+ <ion-card style="max-width: 100%;  height: 70px;"> 
+  <!-- Swiper轮播图 手动创建 -->
+<!-- Slider main container -->
 
-  <!-- 内容推荐 -->
-  <ion-card>
-    <ion-card-header>
-      个性推荐
-    </ion-card-header>
-    <ion-card-content>
-      <!-- 这里放个性推荐的内容 -->
-    </ion-card-content>
-  </ion-card>
+<div #slide1Comp class="swiper">
+<!-- Additional required wrapper -->
+<div class="swiper-wrapper">
+<!-- Slides -->
+<div class="swiper-slide"> <ion-img src="assets/image/111.jpg"></ion-img></div>
+<div class="swiper-slide"><ion-img src="assets/image/lb2.jpg"></ion-img></div>
+<div class="swiper-slide"><ion-img src="assets/image/lb3.jpg"></ion-img></div>
+</div>
+<!-- If we need pagination -->
+<div class="swiper-pagination"></div>
 
-  <ion-row>
-    <!-- 放大的四个框 -->
-    <ion-col size="6">
-      <ion-card>
-        <ion-card-header>
-          热门电影
-        </ion-card-header>
-        <ion-card-content>
-          <!-- 这里放热门电影的内容 -->
-          <ion-img src="assets/movie.jpg"></ion-img>
-        </ion-card-content>
-      </ion-card>
-    </ion-col>
+<!-- If we need navigation buttons -->
+<div class="swiper-button-prev"></div>
+<div class="swiper-button-next"></div>
 
-    <ion-col size="6">
-      <ion-card>
-        <ion-card-header>
-          国内即将上映
-        </ion-card-header>
-        <ion-card-content>
-          <!-- 这里放国内即将上映的内容 -->
-          <ion-img src="assets/upcoming.jpg"></ion-img>
-        </ion-card-content>
-      </ion-card>
-    </ion-col>
+<!-- If we need scrollbar -->
+<div class="swiper-scrollbar"></div>
+</div>
+  <ion-card-content>
+    
+    <!-- 这里放个性推荐的内容 -->
+  </ion-card-content>
+</ion-card>
+<ion-row>
+  <!-- 放大的四个框 -->
+  <ion-col size="6">
+    <ion-card>
+      <ion-card-header>
+        实时热门电影
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 这里放热门电影的内容 -->
+        <ion-img src="assets/image/movie.jpg"></ion-img>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
 
-    <ion-col size="6">
-      <ion-card>
-        <ion-card-header>
-          全球值得期待
-        </ion-card-header>
-        <ion-card-content>
-          <!-- 这里放全球值得期待的内容 -->
-          <ion-img src="assets/global.jpg"></ion-img>
-        </ion-card-content>
-      </ion-card>
-    </ion-col>
+  <ion-col size="6">
+    <ion-card>
+      <ion-card-header>
+        国内即将上映
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 这里放国内即将上映的内容 -->
+        <ion-img src="assets/image/upcoming.jpg"></ion-img>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
 
-    <ion-col size="6">
-      <ion-card>
-        <ion-card-header>
-          新游戏发布
-        </ion-card-header>
-        <ion-card-content>
-          <!-- 这里放新游戏发布的内容 -->
-          <ion-img src="assets/games.jpg"></ion-img>
-        </ion-card-content>
-      </ion-card>
-    </ion-col>
-  </ion-row>
-</ion-content>
+  <ion-col size="6">
+    <ion-card>
+      <ion-card-header>
+        全球值得期待
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 这里放全球值得期待的内容 -->
+        <ion-img src="assets/image/global.jpg"></ion-img>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
 
+  <ion-col size="6">
+    <ion-card>
+      <ion-card-header>
+        榜单Top100
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 这里放新游戏发布的内容 -->
+        <ion-img src="assets/image/top.jpg"></ion-img>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
+</ion-row>
+</ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,29 @@
+.rslides {
+    position: relative;
+    list-style: none;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    }
+  .rslides li {
+    -webkit-backface-visibility: hidden;
+    position: absolute;
+    display: none;
+    width: 100%;
+    left: 0;
+    top: 0;
+    }
+  
+  .rslides li:first-child {
+    position: relative;
+    display: block;
+    float: left;
+    }
+  
+  .rslides img {
+       display: block;
+      height: auto;
+      float: left;
+      border: 0;
+      width: 100%;
+    }

src/app/tab1/tab1.page.ts

@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
+
 import { Router } from '@angular/router';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 
+import Swiper from 'swiper';
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -8,21 +10,42 @@ import { Router } from '@angular/router';
 })
 
 
-export class Tab1Page  {
-  constructor(private router: Router) { }
-  // goToMoviesPage() {
-  //   this.router.navigate(['/fiml']);
-  // }
-  // goToBooksPage() {
-  //   this.router.navigate(['/book']);
-  // }
-  // goToMusicPage() {
-  //   this.router.navigate(['/music']);
-  // }goToGamePage() {
-  //   this.router.navigate(['/game']);
-  // }
-  // goToOutdoorPage() {
-  //   this.router.navigate(['/outdoor']);
-  // }
+export class Tab1Page implements OnInit {
+ 
+  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
+  constructor() { }
+
+  ngOnInit() {
+    // 延迟500毫秒加载
+    setTimeout(() => {
+      this.initSwiper();
+    }, 500);
+  }
+
+  // 初始化轮播图
+  slide1:Swiper|undefined
+  initSwiper(){
+    console.log(this.slide1Comp)
+    this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
+      loop:true,
+      autoplay:{
+
+        delay:200,
+      },
+      mousewheel: {
+        forceToAxis: true,
+      },
+      pagination:{
+        el:".swiper-pagination",
+        clickable:true
+      }
+    });
+    setInterval(()=>{
+      this.slide1?.slideNext();
+    },1000)
+  }
+
 }
 
+
+

src/app/tab2/tab2.page.html

@@ -50,15 +50,14 @@
       <!-- 用户点赞信息 -->
       <ion-item>
         <ion-icon name="heart" slot="end" color="primary"style="position: absolute;  left: 8px;" (click)="toggleIconColor($event)"></ion-icon>
-        <ion-icon name="chatbox-ellipses-outline" slot="start" style="position: absolute; left: 160px;" (click)="showCommentBox()"></ion-icon>
+        <ion-icon name="chatbox-ellipses-outline" slot="start" style="position: absolute; left: 160px;" (click)="showCommentArea()"></ion-icon>
         <ion-icon name="open-outline"slot="start"style="position: absolute;  left: 290px;"></ion-icon>
       </ion-item>
-      <ion-item *ngIf="showComment">
+      <ion-item *ngIf="showCommentArea">
         <ion-input placeholder="输入评论内容" [(ngModel)]="newComment"></ion-input>
-        <ion-button (click)="addComment()">添加评论</ion-button>
+        <ion-button (click)="addComment()" style="width: 50px; height: 20px;">添加</ion-button>
       </ion-item>
     </ion-card-content>
-    
   </ion-card>
   
 

src/app/tab2/tab2.page.ts

@@ -1,28 +1,17 @@
-
-
 import { Component } from '@angular/core';
-
+import Parse from "parse";
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss']
 })
 export class Tab2Page {
-
   showComment: boolean = false;
   newComment: string = '';
 
   constructor() {}
-  
-  showCommentBox() {
-    this.showComment = !this.showComment;
-  }
-
-  addComment() {
-    // 添加评论的逻辑
-  }
 
-  toggleIconColor(event: { target: any; }) {
+  toggleIconColor(event: any) {
     const icon = event.target;
     if (icon.getAttribute('color') === 'danger') {
       icon.setAttribute('color', 'primary');
@@ -30,7 +19,13 @@ export class Tab2Page {
       icon.setAttribute('color', 'danger');
     }
   }
-}
-
+  showCommentArea(){
+    console.log("showCommentArea")
+    this.showComment=true
+  }
 
+  addComment() {
+    // 添加评论的逻辑
+  }
+}
 

src/index.html

@@ -13,7 +13,7 @@
   <meta name="msapplication-tap-highlight" content="no" />
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
-
+  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

src/modules/album/album.page.html

@@ -1,5 +1,11 @@
-<ion-header>
+
+
+
+<ion-header [translucent]="true">
   <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button> <!-- 返回上一级按钮 -->
+    </ion-buttons>
     <ion-title>我的相册</ion-title>
   </ion-toolbar>
 </ion-header>

src/modules/favorites/favorites.service.ts

@@ -9,39 +9,41 @@ export class FavoritesService {
   }
   private favoriteItems = [
     {
-      title: '商品1',
-      description: '这是商品1的描述',
-      imageUrl: 'assets/images/product1.jpg'
+      title: '哆啦A梦',
+      description: '这哆啦A梦电影讲述了一只来自未来的机器猫哆啦A梦和他的主人野比世修在各种冒险中学习成长，展现了友情、家庭和勇气的故事。',
+      imageUrl: 'assets/image/Doraemon.png'
     },
     {
-      title: '商品2',
-      description: '这是商品2的描述',
-      imageUrl: 'assets/images/product2.jpg'
+      title: '疯狂动物城',
+      description: '《疯狂动物城》是一部讲述动物城市中兔子警官朱迪和狐狸小偷尼克合作揭露阴谋的动画片，探讨了种族歧视、友谊和勇气的主题。',
+      imageUrl: 'assets/image/FengKuangDongWuCheng.jpg'
     },
     {
-        title: '商品2',
-        description: '这是商品2的描述',
-        imageUrl: 'assets/images/product2.jpg'
+        title: '《红楼梦》',
+        description: '《红楼梦》是一部中国古典长篇小说，描绘了贾宝玉、林黛玉等人物在贾府内外的爱恨情仇和家族沉浮，反映了封建社会的荣辱兴衰。',
+        imageUrl: 'assets/image/HongLouMeng.webp'
       },
       {
-        title: '商品2',
-        description: '这是商品2的描述',
-        imageUrl: 'assets/images/product2.jpg'
+        title: '《西游记》',
+        description: '《西游记》是一部中国古典神魔小说，讲述了孙悟空等人物取经西天，历经千辛万苦，战胜妖魔鬼怪，修炼成正果的故事。',
+        imageUrl: 'assets/image/XiYouJi.webp'
       },
       {
-        title: '商品2',
-        description: '这是商品2的描述',
-        imageUrl: 'assets/images/product2.jpg'
+        title: '穿过月亮的旅行',
+        description: '《穿过月亮的旅行》是一部奇幻冒险电影，讲述了一段穿越时空、探索未知的神秘旅程，充满惊喜与感动的故事。',
+        imageUrl: 'assets/image/upcoming.jpg'
       },
       {
-        title: '商品2',
-        description: '这是商品2的描述',
-        imageUrl: 'assets/images/product2.jpg'
+        title: '侏罗纪世界',
+        description: '《侏罗纪世界》是一部科幻冒险电影，讲述了恐龙主题公园中因科学实验失控而引发的灾难与逃生故事。',
+        imageUrl: 'assets/image/ZhuLouJiShiJi.jpg'
       },
       {
-        title: '商品2',
-        description: '这是商品2的描述',
-        imageUrl: 'assets/images/product2.jpg'
+        title: '《水浒传》',
+        description: '《水浒传》是一部中国古典长篇小说，描绘了108位好汉义气相助，抗击贪官污吏的英雄壮举，展现了忠义、仁爱和正义的主题。',
+        imageUrl: 'assets/image/ShuiHuZhuan.webp'
+        
+        
       },
   ];
 

src/modules/feiwu/book-detail/book-detail.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true">
   <ion-card >
-    <ion-img src="{{book?.get('iamge')}}" ></ion-img>
+    <img src="{{book?.get('iamge')}}" style="width:100%;height: 500px; "/>
   </ion-card>
 
   <ion-card>

src/modules/feiwu/book/book.page.html

@@ -15,7 +15,8 @@
     <ion-card *ngFor="let book of books">
       <ion-card-header >
        
-        <ion-img src="{{book.get('iamge')}}" ></ion-img>
+        
+        <img src="{{book.get('iamge')}}" style="height: 300px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);"/>
         
         <ion-card>
           <ion-card-header style="display: flex; align-items: left;">

src/modules/feiwu/film-detail/film-detail.page.html

@@ -9,7 +9,10 @@
 
 <ion-content [fullscreen]="true">
   <ion-card >
-    <ion-img src="{{film?.get('image')}}"  ></ion-img>
+    
+    
+    <img src="{{film?.get('image')}}" style="width:100%;height: 500px; "/>
+        
   </ion-card>
 
   <ion-card>

src/modules/feiwu/fiml/fiml.page.html

@@ -18,7 +18,7 @@
     <ion-card *ngFor="let film of films" >
       <ion-card-header >
        
-        <ion-img src="{{film.get('image')}}" ></ion-img>
+        <img src="{{film.get('image')}}" style="height: 300px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);"/>
         
         <ion-card>
           <ion-card-header style="display: flex; align-items: left;">

src/modules/feiwu/game-detail/game-detail.page.html

@@ -9,7 +9,8 @@
 
 <ion-content [fullscreen]="true">
   <ion-card >
-    <ion-img src="{{game?.get('image')}}" style="justify-content: center;" ></ion-img>
+   
+    <img src="{{game?.get('image')}}"style="width:100%;height: 500px; "/>
   </ion-card>
 
   <ion-card>

src/modules/feiwu/game/game.page.html

@@ -17,7 +17,8 @@
     <ion-card *ngFor="let game of games" >
       <ion-card-header >
        
-        <ion-img src="{{game.get('image')}}" ></ion-img>
+        
+        <img src="{{game.get('image')}}" style="height: 300px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);"/>
         
         <ion-card>
           <ion-card-header style="display: flex; align-items: left;">

src/modules/feiwu/outdoor-detail/outdoor-detail.page.html

@@ -9,7 +9,7 @@
 
 <ion-content [fullscreen]="true">
   <ion-card >
-    <ion-img src="{{outdoor?.get('image')}}"  ></ion-img>
+    <img src="{{outdoor?.get('image')}}" style="width:100%;height: 500px; "/>
   </ion-card>
 
   <ion-card>

src/modules/feiwu/outdoor/outdoor.page.html

@@ -16,9 +16,7 @@
   <ion-list>
     <ion-card *ngFor="let outdoor of outdoors" >
       <ion-card-header >
-       
-        <ion-img src="{{outdoor.get('image')}}" ></ion-img>
-        
+        <img src="{{outdoor.get('image')}}" style="height: 300px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);"/>
         <ion-card>
           <ion-card-header style="display: flex; align-items: left;">
             <div style="display: flex; align-items: center;">

src/theme/variables.scss

@@ -22,9 +22,9 @@
 	--ion-color-tertiary-shade: #542ae0;
 	--ion-color-tertiary-tint: #7045ff;
 
-	--ion-color-success: #2dd55b;
+	--ion-color-success: hsl(136, 71%, 73%);
 	--ion-color-success-rgb: 45,213,91;
-	--ion-color-success-contrast: #000000;
+	--ion-color-success-contrast: #79d6ac;
 	--ion-color-success-contrast-rgb: 0,0,0;
 	--ion-color-success-shade: #28bb50;
 	--ion-color-success-tint: #42d96b;