课堂监控项目策划书 1 rok temu
rodzic
commit
ef477f9cab

+ 37 - 51
ballfire/src/app/tab4/tab4.page.html

@@ -6,72 +6,58 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
- 
+
   <!-- 用户登录状态 -->
   <ion-card>
     <!-- 未登录 -->
-     @if(!currentUser?.id){
-        <ion-content>
-          <ion-card class="login-card">
-              <ion-card-header>
-                  <ion-card-title>请登录</ion-card-title>
-                  <ion-card-subtitle>暂无信息</ion-card-subtitle>
-                  <ion-card-content>欢迎来到“智养人生”!在这里,我们为您提供科学、全面的健康管理方案,帮助您实现身心的和谐与平衡。无论是饮食、运动还是心理调适,我们的专业团队将为您量身定制个性化的健康计划。让我们一起探索智慧养生的奥秘,开启健康新生活!登录后,您将踏上智养之旅,发现更好的自己。欢迎您的加入,智养人生,从此刻开始!</ion-card-content>
-              </ion-card-header>
-              <div class="image-container">
-                <img src="https://app.fmode.cn/dev/jxnu/202226701019/logo.png" alt="健康主题图片" class="responsive-image">
-            </div>
-          </ion-card>
+    @if(!currentUser?.id){
+      <ion-content>
+        <ion-card class="login-card">
+          <ion-card-header>
+            <ion-card-title>欢迎来到篮球火!</ion-card-title>
+            <ion-card-subtitle>在这里,我们为您提供专业的篮球训练和健康管理方案,帮助您提升技能和身体素质。无论是技术指导、战术分析还是身体训练,我们的团队将为您量身定制个性化的训练计划。让我们一起在篮球的世界中成长,迎接挑战,超越自我!</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            登录后,您将能够记录您的训练数据,获取专业建议,参与社区互动,享受更好的篮球体验!欢迎您的加入,篮球火,从此刻开始!
+          </ion-card-content>
+          <ion-card-content>
+            <img src="assets/tab1.img/商标.jpg" alt="商标" class="responsive-image" />
+          </ion-card-content>
+        </ion-card>
       </ion-content>
-      }
-        <!-- 已登录 -->
-     @if(currentUser?.id){
+    }
+    <!-- 已登录 -->
+    @if(currentUser?.id){
       <ion-card-header class="card-header">
         <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
         <div class="user-info">
-            <ion-card-title>账号:{{currentUser?.get("username")}}</ion-card-title>
-            <ion-card-subtitle>
-                姓名: {{currentUser?.get("realname") || "-"}} 
-                性别: {{currentUser?.get("gender") || "-"}} 
-                年龄: {{currentUser?.get("age") || "-"}}
-            </ion-card-subtitle>
+          <ion-card-title>账号:{{currentUser?.get("username")}}</ion-card-title>
+          <ion-card-subtitle>
+            姓名: {{currentUser?.get("realname") || "-"}}
+            性别: {{currentUser?.get("gender") || "-"}}
+            年龄: {{currentUser?.get("age") || "-"}}
+            
+          </ion-card-subtitle>
         </div>
-    </ion-card-header>
-      }
-      <ion-card-content>
+      </ion-card-header>
+    }
+    <ion-card-content>
       @if(!currentUser?.id){
         <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
         <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
       }
-     @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
-    }
+      @if(currentUser?.id){
+        <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
+        <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
+      }
     </ion-card-content>
   </ion-card>
+
   @if(currentUser?.id){
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>个性头像生成器</ion-card-title>
-        <ion-card-subtitle>点击创建个性化头像</ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-button expand="block" (click)="goToAvatar()" color="success">前往生成</ion-button>
-      </ion-card-content>
+    <ion-card class="memo-card">
+      <h2 class="memo-title">训练备忘录</h2>
+      <p class="memo-description">记录下您每次训练时的心得体会,及时做出改变加强训练</p>
     </ion-card>
   }
-  @if(currentUser?.id){
-  <ion-card class="memo-card">
-    <h2 class="memo-title">健康备忘录</h2>
-    <p class="memo-description">写下您问诊的医生名或者心动的科普知识,便于您下次查找(点击标签可删除)</p>
-
-    <h2 class="memo-title">收藏夹</h2>
-    <ul class="tag-list">
-        @for(tag of editTags; track tag;){
-            <li class="tag-item">{{tag}}</li>
-        }
-    </ul>
-  </ion-card>
-  }
 
-</ion-content>
+</ion-content>

+ 11 - 10
ballfire/src/app/tab4/tab4.page.scss

@@ -1,5 +1,5 @@
 .custom-toolbar {
-    --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
+    --background: rgba(173, 216, 230, 0.8); /* 偏蓝色背景 */
     display: flex; /* 使用 Flexbox 布局 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
@@ -13,12 +13,11 @@
     text-align: center; /* 文字居中对齐 */
     margin: 0; /* 去掉默认外边距 */
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
-    /* 添加其他美化效果 */
     font-family: "微软雅黑"; /* 自定义字体 */
 }
 
 ion-card {
-    background-color: #e0f7fa; /* 浅蓝色背景,给人以清新和健康的感觉 */
+    background-color: #b2ebf2; /* 偏蓝色背景,给人以清新和健康的感觉 */
     border-radius: 10px; /* 圆角边框 */
     padding: 20px; /* 内边距 */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
@@ -27,7 +26,7 @@ ion-card {
 ion-card-title {
     font-size: 1.5em; /* 标题字体大小 */
     font-weight: bold; /* 加粗 */
-    color: #00796b; /* 深绿色字,象征健康 */
+    color: #00796b; /* 深绿色字���,象征健康 */
     margin: 0; /* 去掉默认的外边距 */
 }
 
@@ -38,11 +37,12 @@ ion-card-subtitle {
 }
 
 ion-card:hover {
-    background-color: #b2ebf2; /* 悬停时的背景色变化 */
+    background-color: #80deea; /* 悬停时的背景色变化 */
     transition: background-color 0.3s; /* 背景色变化的过渡效果 */
 }
+
 .memo-card {
-    background-color: #e0f7fa; /* 浅蓝色背景,给人以清新和健康的感觉 */
+    background-color: #b2ebf2; /* 偏蓝色背景 */
     border-radius: 10px; /* 圆角边框 */
     padding: 20px; /* 内边距 */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
@@ -67,8 +67,8 @@ ion-card:hover {
 }
 
 .tag-item {
-    background-color: #b2ebf2; /* 标签背景色 */
-    color: #00796b; /* 标签字体颜色 */
+    background-color: #80deea; /* 标签背景色 */
+    color: #87CEFA; /* 标签字体颜色 */
     border-radius: 5px; /* 标签圆角 */
     padding: 10px; /* 标签内边距 */
     margin: 5px 0; /* 标签外边距 */
@@ -77,8 +77,9 @@ ion-card:hover {
 }
 
 .tag-item:hover {
-    background-color: #80deea; /* 悬停时的背景色变化 */
+    background-color: #4dd0e1; /* 悬停时的背景色变化 */
 }
+
 .card-header {
     display: flex; /* 使用 Flexbox 布局 */
     align-items: center; /* 垂直居中对齐 */
@@ -122,4 +123,4 @@ ion-content {
     max-width: 80%; /* 最大宽度为容器宽度 */
     height: auto; /* 高度自动 */
     border-radius: 8px; /* 可选:添加圆角效果 */
-}
+}

+ 38 - 29
ballfire/src/app/tab4/tab4.page.ts

@@ -1,7 +1,5 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController } from '@ionic/angular/standalone';
-
-
 import { Router } from '@angular/router';
 import { openUserLoginModal } from '../../lib/user/modal-user-login/modal-user-login.component';
 import { CloudUser } from '../../lib/ncloud';
@@ -13,60 +11,71 @@ import { openUserEditModal } from '../../lib/user/modal-user-edit/modal-user-edi
   styleUrls: ['tab4.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
-    IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,
   ],
 })
 export class Tab4Page {
-  goToCollection(){
+  goToCollection() {
     console.log("goToCollection");
   }
 
-  goToAvatar(){
-    console.log(['route'])
-    this.router.navigate(['/tabs/picture'])
+  goToAvatar() {
+    console.log(['route']);
+    this.router.navigate(['/tabs/picture']);
   }
 
-  currentUser:CloudUser|undefined
+  currentUser: CloudUser | undefined;
+
   constructor(
     private router: Router,
-    private modalCtrl:ModalController) {
+    private modalCtrl: ModalController
+  ) {
     this.currentUser = new CloudUser();
   }
-  async login(){
+
+  async login() {
     // 弹出登录窗口
     let user = await openUserLoginModal(this.modalCtrl);
-    if(user?.id){
-      this.currentUser = user
+    if (user?.id) {
+      this.currentUser = user;
     }
   }
-  async signup(){
+
+  async signup() {
     // 弹出注册窗口
-    let user = await openUserLoginModal(this.modalCtrl,"signup");
-    if(user?.id){
-      this.currentUser = user
+    let user = await openUserLoginModal(this.modalCtrl, "signup");
+    if (user?.id) {
+      this.currentUser = user;
     }
   }
-  logout(){
+
+  logout() {
     this.currentUser?.logout();
   }
 
-  editUser(){
-    openUserEditModal(this.modalCtrl)
+  async editUser() {
+    // 打开编辑用户信息的模态窗口,并传递当前用户信息
+    await openUserEditModal(this.modalCtrl, {
+      height: this.currentUser?.get("height"),
+      weight: this.currentUser?.get("weight"),
+      playingYears: this.currentUser?.get("playingYears")
+    });
   }
+  
 
-  editTags:Array<String>=[]
-   async setTagsValue(ev:any){
+  editTags: Array<String> = [];
+
+  async setTagsValue(ev: any) {
     let currentUser = new CloudUser();
-    let userPrompt = ``
-    if(!currentUser?.id){
+    let userPrompt = ``;
+    if (!currentUser?.id) {
       console.log("用户未登录,请登录后重试");
       let user = await openUserLoginModal(this.modalCtrl);
-      if(!user?.id){
-        return
+      if (!user?.id) {
+        return;
       }
       currentUser = user;
     }
-  //console.log("setTagsValue",ev);
-  this.editTags=ev;
-}
-}
+    this.editTags = ev;
+  }
+}

BIN
ballfire/src/assets/tab1.img/商标.jpg


BIN
ballfire/src/assets/tab4.img/头像.png


+ 1 - 1
ballfire/src/lib/user/modal-user-edit/modal-user-edit.component.ts

@@ -49,7 +49,7 @@ export class ModalUserEditComponent  implements OnInit {
   }
 }
 
-export async function openUserEditModal(modalCtrl:ModalController):Promise<CloudUser|null>{
+export async function openUserEditModal(modalCtrl: ModalController, p0?: { height: any; weight: any; playingYears: any; }):Promise<CloudUser|null>{
   const modal = await modalCtrl.create({
     component: ModalUserEditComponent,
     breakpoints:[0.7,1.0],