New paper

newwisefitnessapp/src/app/tab1/tab1.page.html

@@ -6,56 +6,84 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="page-content">
   <div class="swiper-container">
-    <div class="swiper-slide">
-      <ion-card>
-        <img src="path-to-fitnes-result-image" alt="Fitness Result">
-        <ion-card-header>
-          <ion-card-title>真实用户健身成果</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          曾经的我体重超标，行动不便。WisefitnessApp为我量身定制计划，坚持数月，成功蜕变！
-        </ion-card-content>
-      </ion-card>
-    </div>
+    <div class="swiper-wrapper">
+      <div class="swiper-slide">
+        <ion-card class="card-style">
+          <div class="card-content-wrapper">
+            <div class="text-content">
+              <ion-card-header>
+                <ion-card-title>真实用户健身成果</ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+                曾经的我体重超标，行动不便。WisefitnessApp为我量身定制计划，坚持数月，成功蜕变！
+              </ion-card-content>
+            </div>
+            <div class="image-content">
+              <img src="assets/change2.jpg" alt="Fitness Result" class="card-image">
+            </div>
+          </div>
+        </ion-card>
+      </div>
 
-    <div class="swiper-slide">
-      <ion-card>
-        <ion-img src="path-to-fitness-plan-image"></ion-img>
-        <ion-card-header>
-          <ion-card-title>个性化健身计划生成</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          根据您的独特情况，精准定制专属健身计划
-        </ion-card-content>
-      </ion-card>
-    </div>
+      <div class="swiper-slide">
+        <ion-card class="card-style">
+          <div class="card-content-wrapper">
+            <div class="text-content">
+              <ion-card-header>
+                <ion-card-title>个性化健身计划生成</ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+                根据您的独特情况，精准定制专属健身计划
+              </ion-card-content>
+            </div>
+            <div class="image-content">
+              <ion-img src="path-to-fitness-plan-image"></ion-img>
+            </div>
+          </div>
+        </ion-card>
+      </div>
 
-    <div class="swiper-slide">
-      <ion-card>
-        <img src="path-to-diet-plan-image" alt="Diet Plan">
-        <ion-card-header>
-          <ion-card-title>个性化饮食计划生成</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          为您打造科学合理的饮食规划，助力健身目标达成
-        </ion-card-content>
-      </ion-card>
-    </div>
+      <div class="swiper-slide">
+        <ion-card class="card-style">
+          <div class="card-content-wrapper">
+            <div class="text-content">
+              <ion-card-header>
+                <ion-card-title>个性化饮食计划生成</ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+                为您打造科学合理的饮食规划，助力健身目标达成
+              </ion-card-content>
+            </div>
+            <div class="image-content">
+              <img src="path-to-diet-plan-image" alt="Diet Plan" class="card-image">
+            </div>
+          </div>
+        </ion-card>
+      </div>
 
-    <div class="swiper-slide">
-      <ion-card>
-        <img src="path-to-coupon-image" alt="Coupon">
-        <ion-card-header>
-          <ion-card-title>限时优惠！</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          新用户注册即享健身课程半价优惠，开启智慧健身之旅！
-        </ion-card-content>
-      </ion-card>
+      <div class="swiper-slide">
+        <ion-card class="card-style">
+          <div class="card-content-wrapper">
+            <div class="text-content">
+              <ion-card-header>
+                <ion-card-title>限时优惠！</ion-card-title>
+              </ion-card-header>
+              <ion-card-content>
+                新用户注册即享健身课程半价优惠，开启智慧健身之旅！
+              </ion-card-content>
+            </div>
+            <div class="image-content">
+              <img src="path-to-coupon-image" alt="Coupon" class="card-image">
+            </div>
+          </div>
+        </ion-card>
+      </div>
     </div>
   </div>
+
+  <!-- 用户推荐区域 -->
   <ion-list>
     <ion-item *ngFor="let user of users">
       <ion-avatar slot="start">
@@ -68,8 +96,10 @@
     </ion-item>
     <ion-button fill="outline" slot="end" (click)="goToReviews()">查看更多推荐</ion-button>
   </ion-list>
+
   <ion-button expand="block" color="success" (click)="goToPlanCreation()">立即定制我的健身计划</ion-button>
   <ion-button expand="block" fill="outline" (click)="goToLogin()">登录/注册</ion-button>
+
   <ion-grid>
     <ion-row>
       <ion-col size="4">
@@ -100,6 +130,7 @@
       </ion-col>
     </ion-row>
   </ion-grid>
+
   <ion-footer>
     <ion-toolbar>
       <ion-label>© 20XX WisefitnessApp. All rights reserved.</ion-label>
@@ -109,5 +140,4 @@
       </ion-buttons>
     </ion-toolbar>
   </ion-footer>
-
 </ion-content>

newwisefitnessapp/src/app/tab1/tab1.page.scss

@@ -0,0 +1,99 @@
+.swiper-container {
+  width: 100%;
+  height: 300px; /* 适当设置轮播图高度 */
+}
+
+.swiper-slide {
+  display: flex;
+  justify-content: center;  /* 居中内容 */
+    /* 垂直居中 */
+}
+.card-content-wrapper {
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: space-between; /* 两边对齐 */
+}
+
+.text-content {
+  flex: 0 0 30%; /* 文字部分占 30% 宽度 */
+  padding: 10px;
+}
+
+.image-content {
+  flex: 0 0 70%; /* 图片部分占 70% 宽度 */
+}
+
+ion-card {
+  width: 100%;  /* 控制卡片宽度 */
+   /* 居中显示 */
+   
+}
+.card-image {
+  height: auto;  /* 保持图片比例 */
+  max-height: 250px;  /* 限制图片最大高度 */
+}
+.swiper-pagination {
+  position: absolute;
+  bottom: 10px; /* 分页器的位置 */
+  left: 50%;
+  transform: translateX(-50%);
+}
+.page-content {
+  background: linear-gradient(#135, #5cb85c, #20c997) !important; /* 绿色到蓝色的渐变背景 */
+  
+}
+
+
+.card-style {
+  border-radius: 10px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.card-image {
+  width: 100%;
+  height: auto;
+  border-bottom: 2px solid #ddd;
+}
+
+ion-card-header {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+ion-card-title {
+  font-weight: bold;
+}
+.large-avatar {
+  width: 100px; /* 将头像宽度设置为 80px */
+  height: 100px; /* 将头像高度设置为 80px */
+}
+
+.large-avatar img {
+  width: 100%; /* 图片宽度占满头像 */
+  height: 100%; /* 图片高度占满头像 */
+  object-fit: cover; /* 保证图片填充整个头像区域，且保持图片的比例 */
+}
+ion-button {
+  margin-top: 15px;
+}
+
+ion-button.success {
+  background-color: #28a745;
+  color: white;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
+ion-button.outline {
+  border: 1px solid #28a745;
+  color: #28a745;
+  border-radius: 5px;
+}
+
+ion-footer {
+  
+  color: white;
+  font-size: 10px;
+}

newwisefitnessapp/src/app/tab1/tab1.page.ts

@@ -4,6 +4,7 @@ import { addIcons } from 'ionicons';
 import { analyticsOutline, personCircleOutline, chatbubblesOutline, barbellOutline, ellipse, square } from 'ionicons/icons';
 import Swiper from 'swiper';
 import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab1',
@@ -11,6 +12,7 @@ import { Router } from '@angular/router';
   styleUrls: ['tab1.page.scss'],
   standalone: true,
   imports: [
+    CommonModule,
     IonImg,
     IonContent,
     IonHeader,
@@ -36,7 +38,7 @@ import { Router } from '@angular/router';
 export class Tab1Page implements OnInit {
   users = [
     {
-      avatarUrl: 'path-to-user-avatar-1',
+      avatarUrl: '../assets/beautiful.jpg',
       name: '小敏',
       recommendation: '作为上班族，以前没时间去健身房，WisefitnessApp让我在家就能轻松锻炼，还能获取个性化饮食建议，健康生活触手可及！'
     },
@@ -46,12 +48,19 @@ export class Tab1Page implements OnInit {
   constructor(private router: Router) { }
 
   ngOnInit() {
-    // 初始化Swiper
-    const swiper = new Swiper('.swiper-container', {
-      pagination: { el: '.swiper-pagination', clickable: true },
-      autoplay: { delay: 5000 }
+    // 初始化 Swiper
+    new Swiper('.swiper-container', {
+      loop: true,  // 开启循环
+      pagination: {
+        el: '.swiper-pagination',  // 分页器
+        clickable: true
+      },
+      autoplay: {
+        delay: 5000  // 自动切换时间间隔
+      }
     });
 
+
     // 添加图标
     addIcons({
       analyticsOutline,

newwisefitnessapp/src/global.scss

@@ -11,6 +11,8 @@
 
 /* Core CSS required for Ionic components to work properly */
 @import "@ionic/angular/css/core.css";
+@import 'swiper/swiper-bundle.css';
+
 
 /* Basic CSS for apps built with Ionic */
 @import "@ionic/angular/css/normalize.css";

node_modules/.package-lock.json

@@ -464,6 +464,7 @@
           "url": "http://opencollective.com/swiper"
         }
       ],
+      "license": "MIT",
       "engines": {
         "node": ">= 4.7.0"
       }

package-lock.json

@@ -479,6 +479,7 @@
           "url": "http://opencollective.com/swiper"
         }
       ],
+      "license": "MIT",
       "engines": {
         "node": ">= 4.7.0"
       }

wisefitness-app/src/index.html

@@ -8,14 +8,15 @@
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport"
+    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
   <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 </head>
 
@@ -23,4 +24,4 @@
   <app-root></app-root>
 </body>
 
-</html>
+</html>