update:更新样式

TFPower-app/src/app/tab2/tab2.page.html

@@ -125,7 +125,6 @@
                   <!-- 显示计划内容 -->
                   <ion-col size="1" class="plan-column">{{ day.get('date') }}</ion-col>
                   <ion-col size="1" class="plan-column">{{ day.get('trainingPart') }}</ion-col>
-
                   <!-- 显示每个训练项目，确保即使为空也占位 -->
                   <ion-col size="2.5" *ngFor="let task of day.get('trainingItems'); let i = index" class="plan-column">
                     <div class="task-container">
@@ -134,7 +133,6 @@
                     </div>
                   </ion-col>
                 </ion-item>
-
                 <!-- 滑动时显示的按钮，设置 side="end" 来将按钮显示在右边 -->
                 <ion-item-options side="end">
                   <ion-item-option class="edit-btn" color="primary" shape="round" (click)="editPlan(day)">编辑
@@ -146,7 +144,6 @@
             </ion-row>
           </ion-grid>
         </div>
-
       </ion-card>
       <ion-card-subtitle>
         <ion-icon name="alert-circle-outline" style="margin-right: 5px;"></ion-icon>左滑行内数据可对计划进行修改哦！
@@ -156,42 +153,43 @@
       </ion-button>
     </ion-card-content>
   </div>
-
   <!-- 问诊 -->
   <div *ngIf="selectedTab === 'consultation'" class="consult">
-
     <ion-card-content>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>健康问诊</ion-card-title>
-          <ion-card-subtitle>让健身更聪明，让健康更持久！</ion-card-subtitle>
-        </ion-card-header>
-        <ion-row>
-          <!-- 健身建议 -->
-          <ion-col class="ion-text-center">
-            <ion-img src="../../assets/images/action.png" alt="健身建议"></ion-img>
-            <ion-button shape="round" color="secondary" (click)="doPoemTask()">
-              <ion-icon name="bicycle-outline" style="margin-right:5px;"></ion-icon>生成健身动作
-            </ion-button>
-          </ion-col>
-
-          <!-- 疼痛咨询 -->
-          <ion-col class="ion-text-center">
-            <ion-img src="../../assets/images/ache.jpg" alt="疼痛咨询"></ion-img>
-            <ion-button shape="round" color="tertiary" (click)="doInqueryTask()">
-              <ion-icon name="alert-circle-outline" style="margin-right:5px;"></ion-icon>疼？点这里！
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-card>
+      <div
+        style="width: 95%; margin: auto; height: 110px; display: flex; justify-content: space-between; background-color: #ffffff; border: 1px solid #e7e7db; border-radius: 20px; overflow: hidden;"
+        (click)="doPoemTask()">
+        <!-- 左侧内容部分 -->
+        <div
+          style="display: flex; flex-direction: column; justify-content: flex-start; margin-top: 23px; margin-left: 40px; position: relative;">
+          <!-- 品牌动态提示标签 -->
+          <div
+            style="position: absolute; padding: 5px; color: #fff; background-color: #009b7d; top: -25px; left: -20px; border-radius: 7px; font-size: 12px;">
+            健身动作
+          </div>
+          <!-- 标题 -->
+          <h3>
+            一键<span style="color: #6dbdac; font-size: 30px; font-weight: bolder; font-family: SimSun;">生成</span>
+          </h3>
+          <!-- 按钮 -->
+          <div style="color: #fff;">
+            <ion-button size="small" class="lan">点击了解-></ion-button>
+          </div>
+        </div>
+        <!-- 右侧图片部分 -->
+        <div>
+          <img src="../../assets/images/action5.png" style="height: 100px; display: flex; justify-content: flex-end;"
+            alt="">
+        </div>
+      </div>
 
       <!-- 任务区域 -->
-      <ion-card>
+      <ion-card *ngIf="actionTaskVisible">
         <ion-card-header>
-          <ion-card-title>健康任务</ion-card-title>
+          <ion-card-title>动作生成</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-          <div *ngFor="let step of taskList">
+          <div *ngFor="let step of actionTaskList">
             <ion-item>
               <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
               <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
@@ -218,16 +216,8 @@
       </ion-card>
 
       <!-- 诊断结果 -->
-      <ion-card *ngIf="shareData.diagResult">
-        <ion-card-header>
-          <ion-card-title>{{ shareData.diagResult.title }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <h2>{{ shareData.diagResult.desc }}</h2>
-          <fm-markdown-preview class="content-style" [content]=shareData.diagResult.content>
-          </fm-markdown-preview>
-        </ion-card-content>
-      </ion-card>
+
+
       <!-- AI教练互动 -->
       <ion-card id="coaches">
         <ion-card-header>
@@ -240,7 +230,7 @@
               <ion-thumbnail slot="start">
                 <img [src]="coach.get('avater') || '../../assets/images/coach1.jpg'" [alt]="coach.get('name')" />
               </ion-thumbnail>
-              <div class="coach-info" style="width: 100px;">
+              <div class="coach-info" style="width: 120px;">
                 <h3>{{ coach.get('name') }}({{ coach.get('age') }}岁)</h3>
                 <p>擅长领域：{{ coach.get('specialize')}}</p>
                 <p>WiseFitness俱乐部</p>
@@ -255,6 +245,66 @@
           </ion-list>
         </ion-card-content>
       </ion-card>
+      <div
+        style="width: 95%; margin: auto; height: 110px; display: flex; justify-content: space-between; background-color: #ffffff; border: 1px solid #e7e7db; border-radius: 20px; overflow: hidden;"
+        (click)="doInqueryTask()">
+
+        <!-- 左侧内容部分 -->
+        <div
+          style="display: flex; flex-direction: column; justify-content: flex-start; margin-top: 23px; margin-left: 40px; position: relative;">
+
+          <!-- 品牌动态提示标签 -->
+          <div
+            style="position: absolute; padding: 5px; color: #fff; background-color: #009b7d; top: -25px; left: -20px; border-radius: 7px; font-size: 12px;">
+            身体疼痛
+          </div>
+
+          <!-- 标题 -->
+          <h3>
+            一键<span style="color: #6dbdac; font-size: 30px; font-weight: bolder; font-family: SimSun;">诊断</span>
+          </h3>
+
+          <!-- 按钮 -->
+          <div style="color: #fff;">
+            <ion-button size="small" class="lan">点击诊断-></ion-button>
+          </div>
+        </div>
+
+        <!-- 右侧图片部分 -->
+        <div>
+          <img src="../../assets/images/battle1.png" style="height: 100px; display: flex; justify-content: flex-end;"
+            alt="">
+        </div>
+      </div>
+      <ion-card *ngIf="healthTaskVisible">
+        <ion-card-header>
+          <ion-card-title>医疗诊断</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <div *ngFor="let step of healthTaskList">
+            <ion-item>
+              <ion-icon *ngIf="step.progress === 0 && !step.error" name="radio-button-off-outline"></ion-icon>
+              <ion-icon *ngIf="step.progress !== 0 && step.progress !== 1" name="reload-outline"></ion-icon>
+              <ion-icon *ngIf="step.progress === 1" name="checkmark-circle-outline"></ion-icon>
+              <ion-icon *ngIf="step.error" name="close-circle-outline"></ion-icon>
+              {{ step.title }}
+              <span *ngIf="step.progress">{{ step.progress * 100 | number:'2.0-0' }}%</span>
+              <span *ngIf="step.error" style="color:red;">{{ step.error }}</span>
+            </ion-item>
+          </div>
+        </ion-card-content>
+      </ion-card>
+      <ion-card *ngIf="shareData.diagResult">
+        <ion-card-header>
+          <ion-card-title>{{ shareData.diagResult.title }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <h2>{{ shareData.diagResult.desc }}</h2>
+          <fm-markdown-preview class="content-style" [content]=shareData.diagResult.content>
+          </fm-markdown-preview>
+        </ion-card-content>
+      </ion-card>
+
     </ion-card-content>
   </div>
 </ion-content>

TFPower-app/src/app/tab2/tab2.page.scss

@@ -26,7 +26,7 @@ ion-segment-button.md::part(native) {
 }
 
 .segment-button-checked.md::part(native) {
-  color: #08a391;
+  color: #009b7d;
   font-size: 20px;
 }
 
@@ -138,6 +138,7 @@ ion-content {
 .consult ion-item {
   margin-bottom: 12px; /* 增加医生卡片之间的间距 */
   padding: 12px; /* 调整卡片内边距 */
+  padding-right: 4px;
   border-radius: 8px; /* 圆角设计 */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
   background-color: #ffffff; /* 卡片背景色 */
@@ -151,6 +152,35 @@ ion-content {
   width: 60px; /* 缩略图宽度 */
   height: 60px; /* 缩略图高度 */
 }
+.consult .lan {
+  --background: #009b7d;
+  --background-hover: #9ce0be;
+  --background-activated: #88f4be;
+  --background-focused: #88f4be;
+
+  --color: #ffffff;
+
+  --border-radius: 10px;
+  --border-color: #28a169;
+  --border-style: solid;
+  --border-width: 1px;
+
+  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+  --ripple-color: deeppink;
+  --padding-left: 10px;
+  --padding-right: 10px;
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+
+  /* 例如给 .lan 这个类应用背景色 */
+  // background-color: var(--background);
+  // color: var(--color);
+  // border-radius: var(--border-radius);
+  // box-shadow: var(--box-shadow);
+  // padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+  // border: var(--border-width) var(--border-style) var(--border-color);
+}
 
 .consult .coach-info {
   margin-left: 12px; /* 缩略图与文字的间距 */
@@ -171,7 +201,7 @@ ion-content {
   color: rgb(22, 16, 16);
 }
 .consult .coach-info p {
-  margin: 4px 0;
+  margin: 2px 0;
   font-size: 12px;
   color: #666; /* 字体颜色 */
 }

TFPower-app/src/app/tab2/tab2.page.ts

@@ -65,6 +65,8 @@ export class Tab2Page implements OnInit {
   coachList: any[] = [];
   planUser: any[] = [];
   currentUser: CloudUser | undefined
+  actionTaskVisible = false;
+  healthTaskVisible = false;
   constructor(private router: Router, private modalCtrl: ModalController, private cdr: ChangeDetectorRef, private alertController: AlertController) {
     addIcons({ alertCircleOutline, sunny, checkmarkCircle, calendar, helpCircle, trash, create, logoGitlab, bicycleOutline, infiniteOutline });
     this.currentUser = new CloudUser();
@@ -297,7 +299,8 @@ export class Tab2Page implements OnInit {
     await alert.present();
   }
   //任务链
-  taskList: AgentTaskStep[] = []
+  actionTaskList: AgentTaskStep[] = []
+  healthTaskList: AgentTaskStep[] = []
   //一个等待一秒的函数  每经过一秒
   wait(duration: number = 1000) {
     return new Promise(resolve => {
@@ -309,14 +312,15 @@ export class Tab2Page implements OnInit {
   shareData: any = {}
   // 任务：完成故事意境描述及图像绘制
   doPoemTask() {
-
+    this.actionTaskVisible = true;
     let task1 = TaskPoemPictureDesc({ shareData: this.shareData, modalCtrl: this.modalCtrl });
     let task2 = TaskPoemPictureCreate({ shareData: this.shareData, modalCtrl: this.modalCtrl });
     let PoemTaskList = [task1, task2]
-    this.taskList = PoemTaskList
+    this.actionTaskList = PoemTaskList
     startTask(PoemTaskList)
   }
   doInqueryTask() {
+    this.healthTaskVisible = true;
     let task1 = TaskInqueryUserStory({ shareData: this.shareData, modalCtrl: this.modalCtrl });
     let task2 = TaskInqueryDoctorQuestion({ shareData: this.shareData, modalCtrl: this.modalCtrl });
     let task3 = TaskInqueryUserAnswer({ shareData: this.shareData, modalCtrl: this.modalCtrl });
@@ -325,7 +329,7 @@ export class Tab2Page implements OnInit {
       task1, task2, task3
     ]
     // 传递给显示组件
-    this.taskList = InquireServiceTaskList
+    this.healthTaskList = InquireServiceTaskList
     // 开始执行任务
     startTask(InquireServiceTaskList)
   }