update:loginpage

smarteat-app/src/app/image-popup/image1-popup/image1-popup.component.html

@@ -1,23 +1,53 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>内容详情</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="close()">关闭</ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button (click)="close()">
+      <ion-icon name="arrow-back" class="back-arrow-icon"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
 
 <ion-content>
-  <!-- 显示解析后的文本 -->
-   @if(content){
-    <div>
-    <h3>文档内容</h3>
-    <div [innerHTML]="content.text"></div>
-
-    <!-- 显示解析出的图片 -->
-    <div *ngFor="let image of content.images">
-      <img [src]="image" alt="Image" width="300px"/>
+  <section class="content">
+
+    <h2>中国居民平衡膳食宝塔</h2>
+    <div class="title-line"></div>
+    <p class="source">来源：2022中国居民平衡膳食宝塔</p>
+    <div class="image-container">
+      <img src="https://app.fmode.cn/dev/jxnu/202226701038/ssbt2022.jpg" alt="中国居民平衡膳食宝塔">
     </div>
-  </div>
-}
+    <p>中国居民平衡膳食宝塔（Chinese Food Guide Pagoda，以下简称“宝塔”）是根据《中国居民膳食指南（2022）》的准则和核心推荐，把平衡膳食原则转化为各类食物的数量和所占比例的图形化表示。</p>
+    <p>中国居民平衡膳食宝塔形象化的组合，遵循了平衡膳食的原则，体现了在营养上比较理想的基本食物构成。宝塔共分5层，各层面积大小不同，体现了5大类食物和食物量的多少。5大类食物包括谷薯类、蔬菜水果、畜禽鱼蛋奶类、大豆和坚果类以及烹调用油盐。食物量是根据不同能量需要量水平设计，宝塔旁边的文字注释，标明了在1600~2400kcal能量需要量水平时，一段时间内成年人每人每天各类食物摄入量的建议值范围。</p>
+
+    <h3>第一层：谷薯类食物</h3>
+    <p>谷薯类是膳食能量的主要来源（碳水化合物提供总能量的50%~65%），也是多种微量营养素和膳食纤维的良好来源。膳食指南中推荐2岁以上健康人群的膳食应做到食物多样、合理搭配。谷类为主是合理膳食的重要特征。</p>
+    <p>在1600~2400kcal能量需要量水平下的一段时间内，建议成年人每人每天摄入谷类200~300g，其中包含全谷物和杂豆类50~150g；另外，薯类50~100g，从能量角度，相当于15~35g大米。</p>
+    <p>谷类、薯类和杂豆类是碳水化合物的主要来源。谷类包括小麦、稻米、玉米、高粱等及其制品，如米饭、馒头、烙饼、面包、饼干、麦片等。全谷物保留了天然谷物的全部成分，是理想膳食模式的重要组成，也是膳食纤维和其他营养素的来源。杂豆包括大豆以外的其他干豆类，如红小豆、绿豆、芸豆等。</p>
+    <p>薯类包括马铃薯、红薯等，可替代部分主食。</p>
+
+    <h3>第二层：蔬菜水果</h3>
+    <p>蔬菜水果是膳食指南中鼓励多摄入的两类食物。在1600~2400kcal能量需要量水平下，推荐成年人每天蔬菜摄入量至少达到300g，水果200~350g。蔬菜水果是膳食纤维、微量营养素和植物化学物的良好来源。</p>
+    <p>蔬菜包括嫩茎、叶、花菜类、根菜类、鲜豆类、茄果瓜菜类、葱蒜类、菌藻类及水生蔬菜类等。深色蔬菜是指深绿色、深黄色、紫色、红色等有颜色的蔬菜，每类蔬菜提供的营养素略有不同，深色蔬菜一般富含维生素、植物化学物和膳食纤维，推荐每天占总体蔬菜摄入量的1/2以上。</p>
+    <p>水果多种多样，包括仁果、浆果、核果、柑橘类、瓜果及热带水果等。推荐吃新鲜水果，在鲜果供应不足时可选择一些含糖量低的干果制品和纯果汁。</p>
+
+    <h3>第三层：鱼、禽、肉、蛋等动物性食物</h3>
+    <p>鱼、禽、肉、蛋等动物性食物是膳食指南推荐适量食用的食物。在1600~2400kcal能量需要量水平下，推荐每天鱼、禽、肉、蛋摄入量共计120~200g。</p>
+    <p>新鲜的动物性食物是优质蛋白质、脂肪和脂溶性维生素的良好来源，建议每天畜禽肉的摄入量为40~75g，少吃加工类肉制品。目前我国汉族居民的肉类摄入以猪肉为主，且增长趋势明显。猪肉含脂肪较高，应尽量选择瘦肉或禽肉。</p>
+    <p>常见的水产品包括鱼、虾、蟹和贝类，此类食物富含优质蛋白质、脂类、维生素和矿物质，推荐每天摄入量为40~75g，有条件可以优先选择。</p>
+    <p>蛋类包括鸡蛋、鸭蛋、鹅蛋、鹌鹑蛋、鸽子蛋及其加工制品，蛋类的营养价值较高，推荐每天1个鸡蛋（相当于50g左右），吃鸡蛋不能丢弃蛋黄，蛋黄含有丰富的营养成分，如胆碱、卵磷脂、胆固醇、维生素A、叶黄素、锌、B族维生素等，无论对多大年龄人群都具有健康益处。</p>
+
+    <h3>第四层：奶类、大豆和坚果</h3>
+    <p>奶类和豆类是鼓励多摄入的食物。奶类、大豆和坚果是蛋白质和钙的良好来源，营养素密度高。在1600~2400kcal能量需要量水平下，推荐每天应摄入至少相当于鲜奶300g的奶类及奶制品。</p>
+    <p>大豆包括黄豆、黑豆、青豆，其常见的制品如豆腐、豆浆、豆腐干及千张等。坚果包括花生、葵花子、核桃、杏仁、榛子等，部分坚果的营养价值与大豆相似，富含必需脂肪酸和必需氨基酸。推荐大豆和坚果摄入量共为25~35g，其他豆制品摄入量需按蛋白质含量与大豆进行折算。</p>
+    <p>坚果无论作为菜肴还是零食，都是食物多样化的良好选择，建议每周摄入70g左右（相当于每天10g左右）。</p>
+
+    <h3>第五层：烹调油和盐</h3>
+    <p>油盐作为烹饪调料必不可少，但建议尽量少用。推荐成年人平均每天烹调油不超过25~30g，食盐摄入量不超过5g。</p>
+    <p>在1600~2400kcal能量需要量水平下脂肪的摄入量为36~80g。其他食物中也含有脂肪，在满足平衡膳食模式中其他食物建议量的前提下，烹调油需要限量。烹调油包括各种动植物油，植物油如花生油、大豆油、菜籽油、葵花籽油等，动物油如猪油、牛油、黄油等。烹调油也要多样化，应经常更换种类，以满足人体对各种脂肪酸的需要。</p>
+    <p>我国居民食盐用量普遍较高，盐与高血压关系密切，限制食盐摄入量是我国长期行动目标。除了少用食盐外，也需要控制隐形高盐食品的摄入量。</p>
+
+    <h3>身体活动和饮水</h3>
+    <p>身体活动是能量平衡和保持身体健康的重要手段。运动或身体活动能有效地消耗能量，保持精神和机体代谢的活跃性。鼓励养成天天运动的习惯，坚持每天多做一些消耗能量的活动。推荐成年人每天进行至少相当于快步走6000步以上的身体活动，每周最好进行150分钟中等强度的运动，如骑车、跑步、庭院或农田的劳动等。</p>
+    <p>一般而言，低身体活动水平的能量消耗通常占总能量消耗的1/3左右，而高身体活动水平者可高达1/2。加强和保持能量平衡，需要通过不断摸索，关注体重变化，找到食物摄入量和运动消耗量之间的平衡点。</p>
+
+  </section>
 </ion-content>

smarteat-app/src/app/image-popup/image1-popup/image1-popup.component.scss

@@ -0,0 +1,112 @@
+/* 重置默认的内外边距，让页面布局更规整 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* 设置页面整体字体为常见的无衬线字体，更清晰现代，类似今日头条风格 */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: #f4f6f8; /* 调整为更浅一点的背景色，使页面整体更柔和 */
+    color: #212529; /* 文本颜色设为深灰色，提高可读性 */
+    padding: 30px; /* 进一步增加页面整体的内边距，让文字与页面边缘有更多距离 */
+}
+
+ion-header {
+    background-color: #fff; /* 头部栏背景设为白色 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+// ion-toolbar {
+//     padding: 15px 20px; /* 适当增大工具栏内边距，使元素布局更合理 */
+// }
+
+ion-title {
+    font-size: 20px; /* 进一步增大标题字体大小，更醒目 */
+    font-weight: 500; /* 加粗一点，突出重要性 */
+}
+
+/* 针对返回按钮的图标样式调整 */
+.back-arrow-icon {
+    color: #ccc; /* 将箭头颜色设为浅灰色 */
+    font-size: 15px; /* 可根据实际情况调整箭头大小 */
+}
+
+/* 调整ion-toolbar相关样式，降低宽度并减少分割感 */
+ion-toolbar {
+    padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
+    width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
+    margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
+    background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
+    box-shadow: none; /* 去除阴影 */
+}
+
+ion-buttons ion-button {
+    --background: transparent; /* 按钮背景设为透明 */
+    --color: inherit; /* 继承父元素颜色（也就是图标设置的浅灰色） */
+    border-radius: 0; /* 去除按钮圆角 */
+    padding: 4px 8px; /* 适当减小按钮内边距，使按钮更紧凑 */
+}
+// ion-buttons ion-button {
+//     --background: #007bff; /* 按钮背景色设为今日头条常用的主题色蓝色 */
+//     --color: #fff; /* 按钮文字颜色设为白色，对比明显 */
+//     border-radius: 4px; /* 按钮圆角，更美观 */
+//     font-size: 16px; /* 增大按钮文字大小 */
+//     padding: 8px 14px; /* 适当增大按钮内边距，调整大小 */
+// }
+
+ion-content {
+    padding: 35px; /* 增大内容区域内边距，避免文字贴边 */
+    background-color: #fff; /* 为内容区域设置白色背景，与整体区分更明显 */
+    border-radius: 8px; /* 添加圆角效果，使内容区域更柔和 */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+section.content {
+    max-width: 768px; /* 限制内容宽度，避免在大屏幕上过度拉伸，类似今日头条文章排版 */
+    margin: 0 auto; /* 让内容在页面中居中显示 */
+    padding: 20px; /* 为文本内容添加内边距，加大与框的间距 */
+    border: 1px solid #e0e0e0; /* 添加一个浅灰色的边框，框住文本内容 */
+    border-radius: 6px; /* 给文本框添加圆角效果，使其更美观 */
+}
+
+h2 {
+    font-size: 24px; /* 二级标题字体进一步增大，更突出 */
+    font-weight: 600; /* 加粗，强调是重要板块标题 */
+    color:#212529; /* 标题颜色设为蓝色，和按钮颜色呼应，凸显重要性 */
+    text-align: center; /* 让 h2 标题内容在水平方向居中显示 */
+    margin-bottom: 30px; /* 适当增大下方间距，以便为图片留出合适空间 */
+}
+
+h3 {
+    font-size: 18px; /* 三级标题字体大小适当增大 */
+    font-weight: 600; /* 加粗，体现层级关系 */
+    margin-top: 20px; /* 每个三级标题上方有间距，区分不同板块 */
+    margin-bottom: 12px; /* 下方也留一点间距和正文区分 */
+    color: #333; /* 颜色比正文深一点，突出标题感 */
+}
+
+p {
+    font-size: 16px; /* 增大正文段落字体大小，便于阅读 */
+    line-height: 1.8; /* 进一步增加行高，提高阅读舒适度 */
+    margin-bottom: 18px; /* 段落之间有一定间距，条理更清晰 */
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.image-container img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px; /* 可选，圆角效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 可选，阴影效果 */
+}
+
+.title-line {
+    border-bottom: 1px solid #000; /* 实线颜色为黑色，可根据需求修改 */
+    width: 200px; /* 线的长度，可根据需求调整 */
+    margin: 10px auto 15px; /* 上下外边距，使线与标题和来源文字有合适的间距 */
+}

smarteat-app/src/app/image-popup/image1-popup/image1-popup.component.ts

@@ -1,6 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, Input } from '@angular/core';
 import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBack } from 'ionicons/icons';
 import * as mammoth from 'mammoth';
 
 @Component({
@@ -15,7 +17,9 @@ export class Image1PopupComponent {
   @Input() description: string = '';
   content: any = null;
 
-  constructor(private http: HttpClient,private modalController: ModalController) {}
+  constructor(private http: HttpClient,private modalController: ModalController) {
+    addIcons({arrowBack});
+  }
   
   ngOnInit() {this.loadAndParseWordFile();}
   

smarteat-app/src/app/image-popup/image2-popup/image2-popup.component.html

@@ -1,14 +1,30 @@
-<ion-content>
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>2图片详情</ion-title>
-      <ion-buttons slot="end">
-        <ion-button (click)="close()">关闭</ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button (click)="close()">
+      <ion-icon name="arrow-back" class="back-arrow-icon"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
 
-  <!-- 显示图片和描述 -->
-  <img [src]="imageUrl" alt="图片" style="width: 100%; height: auto;">
-  <div [innerHTML]="description"></div>
-</ion-content>
+<ion-content>
+  <section class="content">
+    <h2>蛋白质吃的越多，肌肉就会长得越多？</h2>
+    <div class="title-line"></div>
+    <p class="source">来源：科普中国 中国新闻网</p>
+    <div class="image-container">
+      <!-- 这里可根据实际情况更换与肌肉增长相关的图片 -->
+      <img src="https://app.fmode.cn/dev/jxnu/202226701038/danbaizhi.jpg" alt="肌肉增长相关图片">
+    </div>
+    <p>虽然蛋白质对肌肉的增长至关重要，但并不是唯一的决定因素。想要肌肉增长，还需要力量训练的刺激，以及均衡的营养。只靠吃大量蛋白质而不进行锻炼，或营养摄入不足，都无法有效增长肌肉。力量训练通过对肌肉施加阻力，造成肌肉纤维的微小损伤，从而促使身体启动修复机制，在修复过程中，肌肉会逐渐变得更强壮、更发达。而均衡的营养则为肌肉修复和生长提供所需的各种物质，除了蛋白质，碳水化合物、脂肪、维生素和矿物质等也都起着不可或缺的作用。例如，碳水化合物能提供训练所需的能量，维生素和矿物质参与身体的各种代谢过程，有助于维持身体的正常生理功能，从而为肌肉增长创造有利条件。</p>
+    <div class="image-container">
+      <!-- 这里可根据实际情况更换与肌肉增长相关的图片 -->
+      <img src="http://kpzg.people.com.cn/mediafile/pic/20241121/72/12049647444006346292.jpg" alt="肌肉增长相关图片">
+    </div>
+    <h3>力量训练的重要性</h3>
+    <p>力量训练是肌肉增长的核心刺激因素之一。不同的力量训练动作可以针对不同的肌肉群进行锻炼，如深蹲主要锻炼腿部肌肉，卧推针对胸部肌肉，引体向上则着重锻炼背部和手臂肌肉等。通过逐渐增加训练的重量、强度和次数，能够不断挑战肌肉的极限，使其适应更高的负荷，进而实现肌肉的增长和力量的提升。同时，合理的力量训练计划还应包括适当的休息时间，让肌肉有足够的时间进行恢复和生长，避免过度训练导致受伤或疲劳。</p>
+    <h3>营养均衡的作用</h3>
+    <p>在追求肌肉增长的过程中，营养均衡与力量训练同等重要。除了确保足够的蛋白质摄入以支持肌肉修复和合成外，碳水化合物应选择高纤维、低 GI 值（血糖生成指数）的种类，如全麦面包、糙米、燕麦等，它们能够提供持续稳定的能量，避免血糖的大幅波动，有助于维持训练强度和肌肉的恢复。优质脂肪也是必需的，例如橄榄油、鱼油、坚果中的脂肪，富含不饱和脂肪酸，对身体的激素平衡和细胞健康有益，进而促进肌肉生长。此外，各种维生素（如维生素 C、D、E 等）和矿物质（如钙、镁、锌等）的充足摄入，能够保障身体的正常代谢和生理功能，增强免疫力，减少因营养缺乏而引起的训练疲劳和受伤风险，为肌肉增长提供全方位的支持。</p>
+    <h3>休息与恢复的意义</h3>
+    <p>充足的休息和恢复对于肌肉增长同样不可忽视。在力量训练后，肌肉需要时间来修复受损的纤维并进行生长。睡眠是身体恢复的重要时段，在此期间，身体会分泌生长激素等重要的激素，促进肌肉蛋白质的合成和修复。因此，保证每晚 7 - 9 小时的高质量睡眠对于肌肉增长至关重要。此外，适当的放松和恢复手段，如按摩、拉伸、泡热水澡等，也有助于缓解肌肉疲劳，减少肌肉酸痛，促进血液循环，加快肌肉恢复的速度，为下一次训练做好准备，从而形成一个良性的肌肉增长循环。</p>
+  </section>
+</ion-content>

smarteat-app/src/app/image-popup/image2-popup/image2-popup.component.scss

@@ -0,0 +1,119 @@
+/* 重置默认的内外边距，让页面布局更规整 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* 设置页面整体字体为常见的无衬线字体，更清晰现代，类似今日头条风格 */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: #f4f6f8; /* 调整为更浅一点的背景色，使页面整体更柔和 */
+    color: #212529; /* 文本颜色设为深灰色，提高可读性 */
+    padding: 30px; /* 进一步增加页面整体的内边距，让文字与页面边缘有更多距离 */
+}
+
+ion-header {
+    background-color: #fff; /* 头部栏背景设为白色 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+// ion-toolbar {
+//     padding: 15px 20px; /* 适当增大工具栏内边距，使元素布局更合理 */
+// }
+
+ion-title {
+    font-size: 20px; /* 进一步增大标题字体大小，更醒目 */
+    font-weight: 500; /* 加粗一点，突出重要性 */
+}
+
+/* 针对返回按钮的图标样式调整 */
+.back-arrow-icon {
+    color: #ccc; /* 将箭头颜色设为浅灰色 */
+    font-size: 15px; /* 可根据实际情况调整箭头大小 */
+}
+
+/* 调整ion-toolbar相关样式，降低宽度并减少分割感 */
+ion-toolbar {
+    padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
+    width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
+    margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
+    background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
+    box-shadow: none; /* 去除阴影 */
+}
+
+ion-buttons ion-button {
+    --background: transparent; /* 按钮背景设为透明 */
+    --color: inherit; /* 继承父元素颜色（也就是图标设置的浅灰色） */
+    border-radius: 0; /* 去除按钮圆角 */
+    padding: 4px 8px; /* 适当减小按钮内边距，使按钮更紧凑 */
+}
+// ion-buttons ion-button {
+//     --background: #007bff; /* 按钮背景色设为今日头条常用的主题色蓝色 */
+//     --color: #fff; /* 按钮文字颜色设为白色，对比明显 */
+//     border-radius: 4px; /* 按钮圆角，更美观 */
+//     font-size: 16px; /* 增大按钮文字大小 */
+//     padding: 8px 14px; /* 适当增大按钮内边距，调整大小 */
+// }
+
+ion-content {
+    padding: 35px; /* 增大内容区域内边距，避免文字贴边 */
+    background-color: #fff; /* 为内容区域设置白色背景，与整体区分更明显 */
+    border-radius: 8px; /* 添加圆角效果，使内容区域更柔和 */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+section.content {
+    max-width: 768px; /* 限制内容宽度，避免在大屏幕上过度拉伸，类似今日头条文章排版 */
+    margin: 0 auto; /* 让内容在页面中居中显示 */
+    padding: 20px; /* 为文本内容添加内边距，加大与框的间距 */
+    border: 1px solid #e0e0e0; /* 添加一个浅灰色的边框，框住文本内容 */
+    border-radius: 6px; /* 给文本框添加圆角效果，使其更美观 */
+}
+
+h2 {
+    font-size: 24px; /* 二级标题字体进一步增大，更突出 */
+    font-weight: 600; /* 加粗，强调是重要板块标题 */
+    color:#212529; /* 标题颜色设为蓝色，和按钮颜色呼应，凸显重要性 */
+    text-align: center; /* 让 h2 标题内容在水平方向居中显示 */
+    margin-bottom: 30px; /* 适当增大下方间距，以便为图片留出合适空间 */
+}
+
+h3 {
+    font-size: 18px; /* 三级标题字体大小适当增大 */
+    font-weight: 600; /* 加粗，体现层级关系 */
+    margin-top: 20px; /* 每个三级标题上方有间距，区分不同板块 */
+    margin-bottom: 12px; /* 下方也留一点间距和正文区分 */
+    color: #333; /* 颜色比正文深一点，突出标题感 */
+}
+
+p {
+    font-size: 16px; /* 增大正文段落字体大小，便于阅读 */
+    line-height: 1.8; /* 进一步增加行高，提高阅读舒适度 */
+    margin-bottom: 18px; /* 段落之间有一定间距，条理更清晰 */
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.image-container img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px; /* 可选，圆角效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 可选，阴影效果 */
+}
+/* 标题下方的实线样式 */
+.title-line {
+    border-bottom: 1px solid #000; /* 实线颜色为黑色，可根据需求修改 */
+    width: 200px; /* 线的长度，可根据需求调整 */
+    margin: 10px auto 15px; /* 上下外边距，使线与标题和来源文字有合适的间距 */
+}
+
+/* 来源文字的样式 */
+.source {
+    text-align: center;
+    color: #666; /* 颜色为灰色，可根据需求修改 */
+    font-size: 14px; /* 字体大小，可根据需求调整 */
+}

smarteat-app/src/app/image-popup/image2-popup/image2-popup.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBack } from 'ionicons/icons';
 
 @Component({
   selector: 'app-image2-popup',
@@ -12,7 +14,9 @@ export class Image2PopupComponent {
   @Input() imageUrl: string = '';
   @Input() description: string = '';
 
-  constructor(private modalController: ModalController) {}
+  constructor(private modalController: ModalController) {
+    addIcons({arrowBack});
+  }
 
   ngOnInit() {}
 

smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.html

@@ -1,14 +1,99 @@
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button (click)="close()">
+      <ion-icon name="arrow-back" class="back-arrow-icon"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
 <ion-content>
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>3图片详情</ion-title>
-      <ion-buttons slot="end">
-        <ion-button (click)="close()">关闭</ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-
-  <!-- 显示图片和描述 -->
-  <img [src]="imageUrl" alt="图片" style="width: 100%; height: auto;">
-  <div [innerHTML]="description"></div>
-</ion-content>
+  <section class="content">
+
+    <h2>三伏天，幼儿饮食请注意“五要”和“五不要”！（附消食食谱）</h2>
+    <div class="title-line"></div>
+    <p class="source">来源：搜狐新闻</p>
+    <div>
+    <p>高温暑热，注意防暑</p>
+  </div>
+    <div class="image-container">
+      <img src="https://p9.itc.cn/q_70/images03/20230726/7b7b86f8e1d843b9bf72bc0d753007e6.jpeg" >
+    </div>
+    <!-- <p>高温暑热，注意防暑</p> -->
+    <p>三伏天是出现在小暑与处暑之间，是一年中气温最高且又潮湿、闷热的日子。</p>
+    <p>暑热之时幼儿会产生一系列生理反应，导致精神不振、食欲减退。伏天也是泻肚子最常发生的季节，尤其是孩子稚嫩的肠胃道，一旦遭受病菌的侵袭，可能就会泻个不停，这些问题是家长最为担心的，那么三伏天儿童如何健康饮食呢？儿童如何度过一个舒适的夏季呢？下面我们一起来看看吧。</p>
+    <div class="image-container">
+      <img src="https://p4.itc.cn/q_70/images03/20230726/ac1e6e08df134013b6329debd439aa38.gif">
+    </div>
+    <h3>幼儿夏季饮食“五要”</h3>
+    <p>01</p>
+    <p>要调整食谱</p>
+    <p>夏天气温高，出汗多，需要为幼儿增加食物的供应，增加幅度在10%-15%。为此，宜适当地让幼儿多进食一点牛奶或奶制品，多吃新鲜蔬菜。</p>
+    <p>如果孩子对吃啥都不感兴趣，建议先刺激一下他的视觉食欲，比如：凉拌蔬菜上放一点胡萝卜丝、绿色的蔬菜泥、橙色的果汁、果泥等，都是清凉诱人的菜色。</p>
+    <img src="https://p8.itc.cn/q_70/images03/20230726/03c269888ba94779a4b42a235f57cf9a.jpeg" alt="调整食谱后的菜品示例图" >
+
+    <h3>02</h3>
+    <p>要多喝白开水</p>
+    <p>鼓励孩子多喝白开水，不要等到口渴时才记得喝，补水宜少量多次。一次性大量进水，会淡化胃酸，不利消化食物和杀菌。</p>
+    <p>幼儿不宜多喝饮料，否则易患胃肠炎、消化不良、厌食症。</p>
+    <img src="https://p5.itc.cn/q_70/images03/20230726/f27b52b5e9cf4effb0f3f65eb48e33f0.jpeg" alt="喝水场景或健康饮品示例图" >
+
+    <h3>03</h3>
+    <p>要口味清淡，兼顾营养</p>
+    <p>用豆腐、牛奶、蔬果等高蛋白食物可以做各种花色粥，比如绿豆粥、红枣粥，容易入口又有营养，比白粥更能激发食欲。</p>
+    <p>其实孩子的饮食口味多受父母的影响，在做菜时应尽量兼顾孩子营养的需求，不要只注重自己的口味或者只注重孩子喜欢的食物，避免给幼儿吃口味过重、太油腻的菜肴。</p>
+    <img src="https://p9.itc.cn/q_70/images03/20230726/512cfa95d13f43558d078d9c2e3572ab.jpeg" alt="清淡营养菜品示例图" >
+
+    <h3>04</h3>
+    <p>要保证食物新鲜清洁</p>
+    <p>夏天食物特别容易变质，所以最好即买即烧即吃。这样才能更好地保护幼儿的肠胃健康。</p>
+    <p>提醒家长注意：第一，把好购买这第一道关口，选择新鲜度高的食物。第二，冰箱不是保险箱，如果食物保存时间过长，同样很容易变质。</p>
+    <img src="https://p7.itc.cn/q_70/images03/20230726/8fbaa720409642d6810d1517a7f62677.jpeg" alt="新鲜食物展示图或厨房卫生相关图" >
+
+    <h3>05</h3>
+    <p>要注意补钙</p>
+    <p>夏季是儿童佝偻病的高发期，这是因为天气炎热，食欲差，进餐量减少，从食物中摄取的钙质也相应减少，加上出汗多，钙丢失得也多。</p>
+    <p>防范的措施是要多吃含钙高的食物，如牛奶、豆制品、干果类、海产品等。</p>
+    <img src="https://p5.itc.cn/q_70/images03/20230726/324e8b4344314e64aa17ebd541e067cc.jpeg" alt="含钙高食物示例图" >
+    <div class="image-container">
+      <img src="https://p4.itc.cn/q_70/images03/20230726/ac1e6e08df134013b6329debd439aa38.gif">
+    </div>
+
+    <h3>幼儿夏季饮食“五不要”</h3>
+    <p>01</p>
+    <p>不要不吃早餐</p>
+    <p>很多幼儿在夏天喜欢睡懒觉，于是把早餐和中餐并成一顿一起吃。如果妈妈提供的晚餐或者宵夜过于丰富，同样会导致幼儿失去对早餐的“兴趣”。</p>
+    <p>但不吃早餐是非常不好的习惯，容易导致胃病，家长们还是应多变点花样让孩子爱上早餐。</p>
+    <img src="https://p3.itc.cn/q_70/images03/20230726/a80d9118c21c4adf8c55212044dacd19.jpeg" alt="健康早餐示例图" >
+
+    <h3>02</h3>
+    <p>不要多吃“垃圾食品”</p>
+    <p>垃圾食品黑名单中包含很多诱人食品，比如薯片、蛋糕、冰激凌、碳酸汽水、曲奇饼干、油炸圈饼等，夏天幼儿最爱将它们替代正餐食用。</p>
+    <p>但这些食品往往多脂、多糖、少营养，经常摄取易导致肥胖、营养失衡。家长不妨在冰箱中多放些水果、新鲜蔬菜、低脂或者无脂的酸奶、比瓶装果汁含糖度低的自制果汁，以供孩子解馋。</p>
+    <img src="https://p7.itc.cn/q_70/images03/20230726/6d5ed454da2f4632918f93242f305867.jpeg" alt="垃圾食品对比健康食品图" >
+
+    <h3>03</h3>
+    <p>不要吃得过咸</p>
+    <p>夏季出汗多，体内盐流失得快，应适当补充盐分，千万不可补盐过多，因为摄入过量的盐，会增加心脏负担，等成人以后容易得高血压。</p>
+    <p>值得注意的是，咸肉、罐装肉制品、各种薯片、薯条等食品，此类经过多道加工程序的食物含盐非常高，尽量避免多食用。</p>
+    <img src="https://p4.itc.cn/q_70/images03/20230726/baa32eb3dd8043d381a670751f6d8b3e.jpeg" alt="高盐食品示例图" >
+
+    <h3>04</h3>
+    <p>不要贪吃甜品</p>
+    <p>到了夏天，很多幼儿对甜品情有独钟，如果不加以限制，摄入的糖就会超标，导致肥胖，还容易产生龋齿。</p>
+    <p>为了孩子的健康请妈妈注意，棒冰、糖果、碳酸汽水、冰激凌等尽量少吃，即使是自制的汤水如绿豆汤、银耳汤也不要放入过多糖。</p>
+    <img src="https://p7.itc.cn/q_70/images03/20230726/18f42981d8294601aa06849cfa83e6a3.jpeg" alt="甜品相关图" >
+
+    <h3>05</h3>
+    <p>不要只吃水果餐</p>
+    <p>有些家长认为水果营养丰富，可以作为孩子的正餐，其实这是错误的。从营养学角度来说，人体多种基本营养需求碳水化合物、矿物质、蛋白质等，都不是单靠吃水果能够满足的。</p>
+    <p>长期靠“水果餐”生存，对人体的内分泌系统、消化系统、免疫系统等都将产生不利影响。大部分水果糖分充足，长期大量摄入，还会养出“小胖墩”哦！</p>
+    <img src="https://p5.itc.cn/q_70/images03/20230726/33a5e07b0fe4424c9ecc318a56b8a27b.jpeg" alt="水果餐示例图或合理膳食搭配图" >
+
+    <h3>结语</h3>
+    <p>幼儿健康成长离不开家长老师的陪伴和细心照料，幼儿身心健康才是一切发展的基础。</p>
+    <p>用心呵护幼儿，让他们不惧夏季，安全度夏，让我们一起陪伴幼儿茁壮成长。</p>
+    <div class="image-container">
+      <img src="https://p4.itc.cn/q_70/images03/20230726/ac1e6e08df134013b6329debd439aa38.gif">
+    </div>
+  </section>
+</ion-content>

smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.scss

@@ -0,0 +1,119 @@
+/* 重置默认的内外边距，让页面布局更规整 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* 设置页面整体字体为常见的无衬线字体，更清晰现代，类似今日头条风格 */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: #f4f6f8; /* 调整为更浅一点的背景色，使页面整体更柔和 */
+    color: #212529; /* 文本颜色设为深灰色，提高可读性 */
+    padding: 30px; /* 进一步增加页面整体的内边距，让文字与页面边缘有更多距离 */
+}
+
+ion-header {
+    background-color: #fff; /* 头部栏背景设为白色 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+// ion-toolbar {
+//     padding: 15px 20px; /* 适当增大工具栏内边距，使元素布局更合理 */
+// }
+
+ion-title {
+    font-size: 20px; /* 进一步增大标题字体大小，更醒目 */
+    font-weight: 500; /* 加粗一点，突出重要性 */
+}
+
+/* 针对返回按钮的图标样式调整 */
+.back-arrow-icon {
+    color: #ccc; /* 将箭头颜色设为浅灰色 */
+    font-size: 15px; /* 可根据实际情况调整箭头大小 */
+}
+
+/* 调整ion-toolbar相关样式，降低宽度并减少分割感 */
+ion-toolbar {
+    padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
+    width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
+    margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
+    background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
+    box-shadow: none; /* 去除阴影 */
+}
+
+ion-buttons ion-button {
+    --background: transparent; /* 按钮背景设为透明 */
+    --color: inherit; /* 继承父元素颜色（也就是图标设置的浅灰色） */
+    border-radius: 0; /* 去除按钮圆角 */
+    padding: 4px 8px; /* 适当减小按钮内边距，使按钮更紧凑 */
+}
+// ion-buttons ion-button {
+//     --background: #007bff; /* 按钮背景色设为今日头条常用的主题色蓝色 */
+//     --color: #fff; /* 按钮文字颜色设为白色，对比明显 */
+//     border-radius: 4px; /* 按钮圆角，更美观 */
+//     font-size: 16px; /* 增大按钮文字大小 */
+//     padding: 8px 14px; /* 适当增大按钮内边距，调整大小 */
+// }
+
+ion-content {
+    padding: 35px; /* 增大内容区域内边距，避免文字贴边 */
+    background-color: #fff; /* 为内容区域设置白色背景，与整体区分更明显 */
+    border-radius: 8px; /* 添加圆角效果，使内容区域更柔和 */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+section.content {
+    max-width: 768px; /* 限制内容宽度，避免在大屏幕上过度拉伸，类似今日头条文章排版 */
+    margin: 0 auto; /* 让内容在页面中居中显示 */
+    padding: 20px; /* 为文本内容添加内边距，加大与框的间距 */
+    border: 1px solid #e0e0e0; /* 添加一个浅灰色的边框，框住文本内容 */
+    border-radius: 6px; /* 给文本框添加圆角效果，使其更美观 */
+}
+
+h2 {
+    font-size: 24px; /* 二级标题字体进一步增大，更突出 */
+    font-weight: 600; /* 加粗，强调是重要板块标题 */
+    color:#212529; /* 标题颜色设为蓝色，和按钮颜色呼应，凸显重要性 */
+    text-align: center; /* 让 h2 标题内容在水平方向居中显示 */
+    margin-bottom: 30px; /* 适当增大下方间距，以便为图片留出合适空间 */
+}
+
+h3 {
+    font-size: 18px; /* 三级标题字体大小适当增大 */
+    font-weight: 600; /* 加粗，体现层级关系 */
+    margin-top: 20px; /* 每个三级标题上方有间距，区分不同板块 */
+    margin-bottom: 12px; /* 下方也留一点间距和正文区分 */
+    color: #333; /* 颜色比正文深一点，突出标题感 */
+}
+
+p {
+    font-size: 16px; /* 增大正文段落字体大小，便于阅读 */
+    line-height: 1.8; /* 进一步增加行高，提高阅读舒适度 */
+    margin-bottom: 18px; /* 段落之间有一定间距，条理更清晰 */
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.image-container img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px; /* 可选，圆角效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 可选，阴影效果 */
+}
+/* 标题下方的实线样式 */
+.title-line {
+    border-bottom: 1px solid #000; /* 实线颜色为黑色，可根据需求修改 */
+    width: 200px; /* 线的长度，可根据需求调整 */
+    margin: 10px auto 15px; /* 上下外边距，使线与标题和来源文字有合适的间距 */
+}
+
+/* 来源文字的样式 */
+.source {
+    text-align: center;
+    color: #666; /* 颜色为灰色，可根据需求修改 */
+    font-size: 14px; /* 字体大小，可根据需求调整 */
+}

smarteat-app/src/app/image-popup/image3-popup/image3-popup.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBack } from 'ionicons/icons';
 
 @Component({
   selector: 'app-image3-popup',
@@ -12,7 +14,9 @@ export class Image3PopupComponent {
   @Input() imageUrl: string = '';
   @Input() description: string = '';
 
-  constructor(private modalController: ModalController) {}
+  constructor(private modalController: ModalController) {
+     addIcons({arrowBack});
+  }
 
   ngOnInit() {}
 

smarteat-app/src/app/image-popup/image4-popup/image4-popup.component.html

@@ -1,14 +1,32 @@
-<ion-content>
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>4图片详情</ion-title>
-      <ion-buttons slot="end">
-        <ion-button (click)="close()">关闭</ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button (click)="close()">
+      <ion-icon name="arrow-back" class="back-arrow-icon"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
 
-  <!-- 显示图片和描述 -->
-  <img [src]="imageUrl" alt="图片" style="width: 100%; height: auto;">
-  <div [innerHTML]="description"></div>
-</ion-content>
+<ion-content>
+  <section class="content">
+    <h2>锻炼补水，喝运动饮料比喝白开水更好？</h2>
+    <div class="title-line"></div>
+    <p> 来源: 科普中国 宁夏健康 </p>
+    <p>并非如此</p>
+    <img src="https://q6.itc.cn/q_70/images03/20240908/6690a3904f2f4b6c92e9f81d21316857.jpeg" >
+    <p>如果只是进行轻度运动（如步行、慢跑）或日常活动，白开水足以满足身体的水分需求。白开水是日常补水的最佳选择。如果是长时间的有氧运动或高强度运动中出汗较多，运动饮料可能更有利于补充电解质和能量。运动饮料中含有大量的糖分和钠，普通人轻度运动并没有必要选运动饮料。</p>
+    <img src="https://www.news.cn/science/20240828/da520c9e7f9d4788b1eac0531e2accd8/20240828da520c9e7f9d4788b1eac0531e2accd8_2024082853d522ab87b149b0a5c7ffb6a819ae09.jpeg" >
+    <p>锻炼补水，要根据你在什么情况下饮用、以及你的身体需求来判断。</p>
+    <p>如果只是进行轻度运动（如步行、慢跑）或日常活动，白开水足以满足身体的水分需求。</p>
+    <p>如果是长时间的有氧运动或高强度运动中出汗较多，运动饮料则更有利于补充电解质和能量。</p>
+    <img src="https://q0.itc.cn/q_70/images03/20240908/c75090f0607d489493ff9d1e1c0876bd.png" >
+    <p>运动饮料在特定情况下（如高强度运动或长时间运动），对特定人群（如专业运动员）更为有益。</p>
+    <p>运动饮料中含有大量的糖分和钠，普通人轻度运动没必要选它。</p>
+    <img src="https://q4.itc.cn/q_70/images03/20240908/b81d7edf26c04c7fa24423053ae8fd14.png" >
+    <p>运动补水应该这样做：</p>
+    <p>开始运动前2～3个小时，补充约600毫升水。</p>
+    <p>在开始运动或进行热身运动前20～30分钟，补充240毫升的水。</p>
+    <p>运动期间，每10～20分钟喝200至300毫升水。</p>
+    <p>结束运动后不超过30分钟内补充约240毫升水。</p>
+    <img src="https://q1.itc.cn/q_70/images03/20240908/6434822316d3487aa54fc34990d2c1f1.png">
+  </section>
+</ion-content>

smarteat-app/src/app/image-popup/image4-popup/image4-popup.component.scss

@@ -0,0 +1,119 @@
+/* 重置默认的内外边距，让页面布局更规整 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* 设置页面整体字体为常见的无衬线字体，更清晰现代，类似今日头条风格 */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: #f4f6f8; /* 调整为更浅一点的背景色，使页面整体更柔和 */
+    color: #212529; /* 文本颜色设为深灰色，提高可读性 */
+    padding: 30px; /* 进一步增加页面整体的内边距，让文字与页面边缘有更多距离 */
+}
+
+ion-header {
+    background-color: #fff; /* 头部栏背景设为白色 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+// ion-toolbar {
+//     padding: 15px 20px; /* 适当增大工具栏内边距，使元素布局更合理 */
+// }
+
+ion-title {
+    font-size: 20px; /* 进一步增大标题字体大小，更醒目 */
+    font-weight: 500; /* 加粗一点，突出重要性 */
+}
+
+/* 针对返回按钮的图标样式调整 */
+.back-arrow-icon {
+    color: #ccc; /* 将箭头颜色设为浅灰色 */
+    font-size: 15px; /* 可根据实际情况调整箭头大小 */
+}
+
+/* 调整ion-toolbar相关样式，降低宽度并减少分割感 */
+ion-toolbar {
+    padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
+    width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
+    margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
+    background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
+    box-shadow: none; /* 去除阴影 */
+}
+
+ion-buttons ion-button {
+    --background: transparent; /* 按钮背景设为透明 */
+    --color: inherit; /* 继承父元素颜色（也就是图标设置的浅灰色） */
+    border-radius: 0; /* 去除按钮圆角 */
+    padding: 4px 8px; /* 适当减小按钮内边距，使按钮更紧凑 */
+}
+// ion-buttons ion-button {
+//     --background: #007bff; /* 按钮背景色设为今日头条常用的主题色蓝色 */
+//     --color: #fff; /* 按钮文字颜色设为白色，对比明显 */
+//     border-radius: 4px; /* 按钮圆角，更美观 */
+//     font-size: 16px; /* 增大按钮文字大小 */
+//     padding: 8px 14px; /* 适当增大按钮内边距，调整大小 */
+// }
+
+ion-content {
+    padding: 35px; /* 增大内容区域内边距，避免文字贴边 */
+    background-color: #fff; /* 为内容区域设置白色背景，与整体区分更明显 */
+    border-radius: 8px; /* 添加圆角效果，使内容区域更柔和 */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增强层次感 */
+}
+
+section.content {
+    max-width: 768px; /* 限制内容宽度，避免在大屏幕上过度拉伸，类似今日头条文章排版 */
+    margin: 0 auto; /* 让内容在页面中居中显示 */
+    padding: 20px; /* 为文本内容添加内边距，加大与框的间距 */
+    border: 1px solid #e0e0e0; /* 添加一个浅灰色的边框，框住文本内容 */
+    border-radius: 6px; /* 给文本框添加圆角效果，使其更美观 */
+}
+
+h2 {
+    font-size: 24px; /* 二级标题字体进一步增大，更突出 */
+    font-weight: 600; /* 加粗，强调是重要板块标题 */
+    color:#212529; /* 标题颜色设为蓝色，和按钮颜色呼应，凸显重要性 */
+    text-align: center; /* 让 h2 标题内容在水平方向居中显示 */
+    margin-bottom: 30px; /* 适当增大下方间距，以便为图片留出合适空间 */
+}
+
+h3 {
+    font-size: 18px; /* 三级标题字体大小适当增大 */
+    font-weight: 600; /* 加粗，体现层级关系 */
+    margin-top: 20px; /* 每个三级标题上方有间距，区分不同板块 */
+    margin-bottom: 12px; /* 下方也留一点间距和正文区分 */
+    color: #333; /* 颜色比正文深一点，突出标题感 */
+}
+
+p {
+    font-size: 16px; /* 增大正文段落字体大小，便于阅读 */
+    line-height: 1.8; /* 进一步增加行高，提高阅读舒适度 */
+    margin-bottom: 18px; /* 段落之间有一定间距，条理更清晰 */
+}
+
+.image-container {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.image-container img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px; /* 可选，圆角效果 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 可选，阴影效果 */
+}
+/* 标题下方的实线样式 */
+.title-line {
+    border-bottom: 1px solid #000; /* 实线颜色为黑色，可根据需求修改 */
+    width: 200px; /* 线的长度，可根据需求调整 */
+    margin: 10px auto 15px; /* 上下外边距，使线与标题和来源文字有合适的间距 */
+}
+
+/* 来源文字的样式 */
+.source {
+    text-align: center;
+    color: #666; /* 颜色为灰色，可根据需求修改 */
+    font-size: 14px; /* 字体大小，可根据需求调整 */
+}

smarteat-app/src/app/image-popup/image4-popup/image4-popup.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowBack } from 'ionicons/icons';
 
 @Component({
   selector: 'app-image4-popup',
@@ -13,7 +15,9 @@ export class Image4PopupComponent {
     @Input() imageUrl: string = '';
     @Input() description: string = '';
   
-    constructor(private modalController: ModalController) {}
+    constructor(private modalController: ModalController) {
+       addIcons({arrowBack});
+    }
   ngOnInit() {}
 
   close() {

smarteat-app/src/app/tab1/tab1.page.html

@@ -35,34 +35,64 @@
   </div>
 </div>
 
-<!-- 推荐健康建议 -->
-<ion-card>
-  <ion-card-header>
-    <ion-card-title>
-      <ion-icon slot="start" name="leaf-outline"></ion-icon>
-      健康建议
+
+<ion-card class="diet-card">
+  <ion-card-header class="diet-card-header">
+    <ion-card-title class="diet-card-title">
+      <ion-icon  name="leaf-outline"></ion-icon>
+      今日饮食内容
     </ion-card-title>
   </ion-card-header>
-
-  <ion-card-content>
-    <div>
-     @if(currentUser?.id){
-      @if(!responseMsg){
+  <ion-card-content class="diet-card-content">
+    
+    @if(currentUser?.id && result && plan){
+    <ion-card-content class="diet-card-content">
+    
+    <div><h4 class="meal-title">早餐</h4>
+    <div class="meal-details" [innerHTML]="breakfast"><!-- 今日饮食计划 --></div></div>
+    <div><h4 class="meal-title">午餐</h4>
+    <div class="meal-details" [innerHTML]="lunch"><!-- 今日饮食计划 --></div></div>
+    <div><h4 class="meal-title">晚餐</h4>
+    <div class="meal-details" [innerHTML]="dinner"><!-- 今日饮食计划 --></div></div>
+    @if(!mark0){
+      <ion-button class="green-button" (click)="check()">点击打卡</ion-button>
+    }
+    @if(mark0){
+      <ion-button><ion-icon name="checkmark-circle-outline"></ion-icon>打卡成功
+        <ion-progress-bar [value]="progress" color="primary"></ion-progress-bar>
+        <p>{{ currentDay }} / {{ planDays }} 天</p>
+      </ion-button>
+    }
+    </ion-card-content>
+    }
+    @if(currentUser?.id &&  !plan ){
+      <div class="no-plan">您还未导入饮食规划</div>
+    }
+    @if(currentUser?.id &&  plan && !result){
+      <div class="no-plan">今日无饮食规划</div>
+    }
+  </ion-card-content>
+  <ion-card-content class="diet-card-footer">
+    <div class="loading-msg">
+     @if(currentUser?.id && plan && result){
+      <h4 class="meal-title">健康建议</h4>
+      @if(!isComplete && responseMsg){
         <p>加载中...</p>
       }
-      <p>{{ responseMsg }}</p>
+      @if(isComplete){
+        <p>{{ responseMsg }}</p>
+      }
      }
     </div>
     <!-- 如果用户未登录，显示登录按钮 -->
     @if(!currentUser?.id){
-      <ion-button (click)="login()" fill="outline" color="primary">
-        请登录后使用该功能
+      <ion-button (click)="login()" fill="outline" color="primary" class="login-btn">
+        请登录后查看
       </ion-button>
     }
   </ion-card-content>
 </ion-card>
 
-
   <!-- 快速入口 -->
   <ion-grid>
     <ion-row>
@@ -98,4 +128,5 @@
       </ion-button>
     </ion-card-content>
   </ion-card>
+
 </ion-content>

smarteat-app/src/app/tab1/tab1.page.scss

@@ -1,4 +1,303 @@
-//   /* 设置轮播图区域 */
+// //   /* 设置轮播图区域 */
+// .carousel-container {
+//   position: relative;
+//   overflow: hidden;
+//   width: 100%;
+//   max-width: 600px; /* 可根据需要调整宽度 */
+//   margin: 0 auto;
+// }
+
+// //轮播图描述样式
+// .description.active {
+//   color: black;
+//   font-weight: bold;
+//   /* 确保不会隐藏描述内容 */
+//   display: block;
+//   opacity: 1; 
+//   text-align: center;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   flex-direction: column;
+// }
+
+// .carousel {
+//   display: flex;
+//   transition: transform 0.5s ease;
+// }
+
+// .slide {
+//   min-width: 100%;
+//   max-width: 100%;
+// }
+
+// .slide img {
+//   width: 100%;
+//   height: auto;
+//   border-radius: 15px;
+// }
+
+// button {
+//   position: absolute;
+//   top: 50%;
+//   transform: translateY(-50%);
+//   background: rgba(0, 0, 0, 0.5);
+//   color: #fff;
+//   border: none;
+//   padding: 10px;
+//   cursor: pointer;
+//   z-index: 10;
+// }
+
+// button.prev {
+//   left: 10px;
+// }
+
+// button.next {
+//   right: 10px;
+// }
+
+// .dots {
+//   position: absolute;
+//   bottom: 10px;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   display: flex;
+//   justify-content: center;
+// }
+
+// .dot {
+//   width: 10px;
+//   height: 10px;
+//   margin: 0 5px;
+//   background-color: rgba(255, 255, 255, 0.5);
+//   border-radius: 50%;
+//   cursor: pointer;
+// }
+
+// .dot.active {
+//   background-color: #fff;
+// }
+
+
+// /* 设置所有矩形框为圆角矩形 */
+// ion-card {
+//     border-radius: 12px; /* 卡片圆角 */
+//     overflow: hidden; /* 防止内容溢出圆角边界 */
+//     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+//     margin-bottom: 16px; /* 卡片之间的间距 */
+//   }
+  
+//   .custom-searchbar {
+//     --background: #f8f8f8;
+//     --border-radius: 10px; // 可选：调整边角圆滑度
+//     --box-shadow: none; // 可选：去掉阴影
+//   }
+
+//   ion-card-header {
+//     // background: linear-gradient(to bottom, #ccffcc, #00ffcc);
+//     // background-color: #f8f8f8; /* 设置卡片头部背景颜色 */
+//     background: linear-gradient(to right, #ccffcc, #00ffcc), linear-gradient(to bottom, #33ffcc, white);
+//     background-blend-mode: multiply; /* 混合模式，确保两个渐变效果结合 */
+//     border-top-left-radius: 12px; /* 圆角效果 */
+//     border-top-right-radius: 12px; /* 圆角效果 */
+//   }
+  
+//   ion-card-title {
+//     font-weight: bold; /* 标题加粗 */
+//     font-size: 18px;
+//     color: #333; /* 字体颜色 */
+//   }
+  
+//   ion-card-content {
+//     padding: 16px; /* 内容的内边距 */
+//     color: #555; /* 内容字体颜色 */
+//   }
+  
+//   ion-button:hover {
+//     transform: scale(1.05); /* 按钮悬停效果 */
+//   }
+
+
+//   /* 设置所有按钮的样式 */
+//   ion-button {
+//     border-radius: 12px; /* 按钮圆角 */
+//     color: #333; /* 按钮中文字的颜色 */
+//     font-weight: bold; /* 按钮字体加粗 */
+//     text-align: center; /* 确保按钮文字水平居中 */
+//     display: flex; /* 使用 flexbox 布局 */
+//     justify-content: center; /* 水平居中 */
+//     align-items: center; /* 垂直居中 */
+//   }
+  
+  
+//   /* 设置图标的间距 */
+//   ion-icon {
+//     margin-right: 8px; /* 图标与文字之间的间距 */
+//   }
+  
+//   /* 设置搜索框的样式 */
+//   ion-searchbar {
+//     border-radius: 20px; /* 搜索框圆角 */
+//     margin: 10px 0; /* 上下间距 */
+//   }
+  
+//   /* 设置页面布局 */
+//   ion-grid {
+//     padding: 0 16px; /* 网格的内边距 */
+//   }
+  
+//   ion-row {
+//     margin-bottom: 16px; /* 行间距 */
+//   }
+  
+//   ion-col {
+//     padding: 0; /* 去掉每列的默认内边距 */
+//   }
+  
+
+// /* 卡片样式 */
+// .diet-card {
+//   border-radius: 12px; /* 卡片圆角 */
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+//   margin: 20px auto; /* 设置上下外边距 */
+//   max-width: 700px; /* 限制最大宽度 */
+//   background-color: #fff; /* 卡片背景颜色 */
+//   transition: box-shadow 0.3s ease-in-out; /* 平滑的阴影变化 */
+// }
+
+// /* 卡片头部样式 */
+// .diet-card-header {
+//   background-color: #e6f7e6; /* 淡绿色背景 */
+//   padding: 16px 20px; /* 上下和左右内边距 */
+//   border-top-left-radius: 12px;
+//   border-top-right-radius: 12px;
+//   display: flex;
+//   align-items: center; /* 图标与文字垂直居中 */
+//   border-bottom: 2px solid #4caf50; /* 添加底部分隔线 */
+// }
+
+// /* 卡片标题样式 */
+// .diet-card-title {
+//   font-size: 20px;
+//   font-weight: bold;
+//   color: #2c6e4f; /* 深绿色 */
+//   display: flex;
+//   align-items: center; /* 图标与文字垂直居中 */
+//   gap: 8px; /* 图标与文字之间的间距 */
+// }
+
+// /* 卡片内容区域样式 */
+// .diet-card-content {
+//   padding: 16px; /* 内边距 */
+//   color: #555; /* 内容文字颜色 */
+// }
+
+// /* 外层框，包裹整个饮食规划内容 */
+// .diet-plan-container {
+//   border: 2px solid #4caf50; /* 边框颜色 */
+//   padding: 16px;
+//   border-radius: 8px;
+//   margin-bottom: 16px;
+// }
+
+// /* 每餐的框 */
+// .meal-box {
+//   border: 1px solid #4caf50; /* 每餐框的边框颜色 */
+//   padding: 12px;
+//   border-radius: 8px;
+//   margin-bottom: 12px; /* 每餐之间的间距 */
+// }
+
+// /* 早餐、午餐、晚餐的标题 */
+// .meal-title {
+//   font-size: 18px;
+//   font-weight: bold;
+//   margin-top: 10px; /* 减小顶部间距 */
+//   margin-bottom: 5px; /* 减小底部间距 */
+//   color: #4caf50; /* 绿色 */
+// }
+
+// /* 每餐的饮食内容 */
+// .meal-details {
+//   font-size: 16px;
+//   color: #333; /* 内容颜色 */
+//   line-height: 1.6; /* 增加行间距，使内容更易读 */
+//   margin-bottom: 20px; /* 每段内容的间距 */
+// }
+
+// /* 没有饮食规划的提示 */
+// .no-plan {
+//   font-size: 16px;
+//   color: #f44336; /* 红色 */
+//   text-align: center;
+//   padding: 8px;
+//   background-color: #f8d7da;
+//   border-radius: 8px;
+//   margin-bottom: 16px;
+// }
+
+// /* 底部内容区域 */
+// .diet-card-footer {
+//   padding: 16px;
+// }
+
+// /* 加载中消息的样式 */
+// .loading-msg p {
+//   font-size: 16px;
+//   color: #888; /* 灰色文字 */
+//   text-align: center; /* 文字居中 */
+//   margin-top: 10px;
+// }
+
+// /* 登录按钮的样式 */
+// .login-btn {
+//   margin-top: 20px; /* 与上一部分的间距 */
+//   display: block;
+//   width: 100%; /* 按钮宽度占满容器 */
+//   font-size: 16px; /* 按钮文字大小 */
+//   padding: 10px 0; /* 按钮上下内边距 */
+//   border-radius: 12px; /* 按钮圆角 */
+//   transition: background-color 0.3s ease, color 0.3s ease; /* 按钮的平滑过渡效果 */
+// }
+
+// /* 登录按钮的 hover 效果 */
+// .login-btn:hover {
+//   background-color: #3880ff; /* 蓝色背景 */
+//   color: white; /* 按钮文字变为白色 */
+// }
+
+// /* 小屏设备上的样式调整 */
+// @media (max-width: 768px) {
+//   .diet-card {
+//     max-width: 90%; /* 调整卡片最大宽度 */
+//   }
+
+//   .diet-card-header {
+//     padding: 12px 16px; /* 缩小内边距 */
+//   }
+
+//   .diet-card-content,
+//   .diet-card-footer {
+//     padding: 12px; /* 减少内边距 */
+//   }
+
+//   .meal-title {
+//     font-size: 16px; /* 调整字体大小 */
+//   }
+
+//   .meal-details {
+//     font-size: 14px; /* 调整字体大小 */
+//   }
+
+//   .login-btn {
+//     font-size: 14px; /* 调整按钮文字大小 */
+//     padding: 8px 0; /* 减小按钮内边距 */
+//   }
+// }
+
+
+/* 保持轮播图相关的样式不变 */
 .carousel-container {
   position: relative;
   overflow: hidden;
@@ -7,11 +306,9 @@
   margin: 0 auto;
 }
 
-//轮播图描述样式
 .description.active {
   color: black;
   font-weight: bold;
-  /* 确保不会隐藏描述内容 */
   display: block;
   opacity: 1; 
   text-align: center;
@@ -79,79 +376,150 @@ button.next {
   background-color: #fff;
 }
 
+/* 以下是饮食卡片部分的新增样式 */
 
 /* 设置所有矩形框为圆角矩形 */
 ion-card {
-    border-radius: 12px; /* 卡片圆角 */
-    overflow: hidden; /* 防止内容溢出圆角边界 */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
-    margin-bottom: 16px; /* 卡片之间的间距 */
-  }
-  
-  .custom-searchbar {
-    --background: #f8f8f8;
-    --border-radius: 10px; // 可选：调整边角圆滑度
-    --box-shadow: none; // 可选：去掉阴影
-  }
+  border-radius: 12px; /* 卡片圆角 */
+  overflow: hidden; /* 防止内容溢出圆角边界 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+  margin-bottom: 16px; /* 卡片之间的间距 */
+}
 
-  ion-card-header {
-    // background: linear-gradient(to bottom, #ccffcc, #00ffcc);
-    // background-color: #f8f8f8; /* 设置卡片头部背景颜色 */
-    background: linear-gradient(to right, #ccffcc, #00ffcc), linear-gradient(to bottom, #33ffcc, white);
-    background-blend-mode: multiply; /* 混合模式，确保两个渐变效果结合 */
-    border-top-left-radius: 12px; /* 圆角效果 */
-    border-top-right-radius: 12px; /* 圆角效果 */
-  }
-  
-  ion-card-title {
-    font-weight: bold; /* 标题加粗 */
-    font-size: 18px;
-    color: #333; /* 字体颜色 */
-  }
-  
-  ion-card-content {
-    padding: 16px; /* 内容的内边距 */
-    color: #555; /* 内容字体颜色 */
-  }
-  
-  ion-button:hover {
-    transform: scale(1.05); /* 按钮悬停效果 */
-  }
+ion-card-header {
+  background-color: #e6f7e6; /* 淡绿色背景 */
+  padding: 16px 20px; /* 上下和左右内边距 */
+  border-top-left-radius: 12px; /* 圆角效果 */
+  border-top-right-radius: 12px; /* 圆角效果 */
+  display: flex;
+  align-items: center; /* 图标与文字垂直居中 */
+  border-bottom: 2px solid #4caf50; /* 添加底部分隔线 */
+}
+
+ion-card-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #2c6e4f; /* 深绿色 */
+  display: flex;
+  align-items: center; /* 图标与文字垂直居中 */
+  gap: 8px; /* 图标与文字之间的间距 */
+}
 
+ion-card-content {
+  padding: 16px; /* 内容的内边距 */
+  color: #555; /* 内容字体颜色 */
+}
+
+/* 卡片悬停效果 */
+.diet-card:hover {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 增强的阴影效果 */
+  transform: translateY(-4px); /* 向上漂浮的效果 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 平滑的过渡效果 */
+}
+
+/* 设置每餐的框样式 */
+.meal-box {
+  background-color: #f7fff7; /* 淡绿色背景 */
+  border: 1px solid #4caf50; /* 每餐框的边框颜色 */
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px; /* 每餐之间的间距 */
+  transition: background-color 0.3s ease; /* 背景颜色过渡 */
+}
+
+/* 每餐框的悬停效果 */
+.meal-box:hover {
+  background-color: #e1f7e1; /* 悬停时变为更亮的绿色 */
+}
 
-  /* 设置所有按钮的样式 */
-  ion-button {
-    border-radius: 12px; /* 按钮圆角 */
-    color: #333; /* 按钮中文字的颜色 */
-    font-weight: bold; /* 按钮字体加粗 */
-    text-align: center; /* 确保按钮文字水平居中 */
-    display: flex; /* 使用 flexbox 布局 */
-    justify-content: center; /* 水平居中 */
-    align-items: center; /* 垂直居中 */
+/* 早餐、午餐、晚餐的标题 */
+.meal-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 10px; /* 减小顶部间距 */
+  margin-bottom: 5px; /* 减小底部间距 */
+  color: #4caf50; /* 绿色 */
+}
+
+/* 每餐的饮食内容 */
+.meal-details {
+  font-size: 16px;
+  color: #333; /* 内容颜色 */
+  line-height: 1.6; /* 增加行间距，使内容更易读 */
+  margin-bottom: 20px; /* 每段内容的间距 */
+}
+
+/* 没有饮食规划的提示 */
+.no-plan {
+  font-size: 16px;
+  color: #f44336; /* 红色 */
+  text-align: center;
+  padding: 8px;
+  background-color: #f8d7da;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+/* 底部内容区域 */
+.diet-card-footer {
+  padding: 16px;
+  background-color: #f0f9f0; /* 淡绿色背景 */
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  border-top: 1px solid #4caf50;
+}
+
+/* 加载中消息的样式 */
+.loading-msg p {
+  font-size: 18px;
+  color: #555;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 20px;
+}
+
+/* 登录按钮的样式 */
+.login-btn {
+  margin-top: 20px; /* 与上一部分的间距 */
+  display: block;
+  width: 100%; /* 按钮宽度占满容器 */
+  font-size: 16px; /* 按钮文字大小 */
+  padding: 10px 0; /* 按钮上下内边距 */
+  border-radius: 12px; /* 按钮圆角 */
+  transition: background-color 0.3s ease, color 0.3s ease; /* 按钮的平滑过渡效果 */
+}
+
+/* 登录按钮的 hover 效果 */
+.login-btn:hover {
+  background-color: #3880ff; /* 蓝色背景 */
+  color: white; /* 按钮文字变为白色 */
+}
+
+/* 小屏设备上的样式调整 */
+@media (max-width: 768px) {
+  .diet-card {
+    max-width: 90%; /* 调整卡片最大宽度 */
   }
-  
-  
-  /* 设置图标的间距 */
-  ion-icon {
-    margin-right: 8px; /* 图标与文字之间的间距 */
+
+  .diet-card-header {
+    padding: 12px 16px; /* 缩小内边距 */
   }
-  
-  /* 设置搜索框的样式 */
-  ion-searchbar {
-    border-radius: 20px; /* 搜索框圆角 */
-    margin: 10px 0; /* 上下间距 */
+
+  .diet-card-content,
+  .diet-card-footer {
+    padding: 12px; /* 减少内边距 */
   }
-  
-  /* 设置页面布局 */
-  ion-grid {
-    padding: 0 16px; /* 网格的内边距 */
+
+  .meal-title {
+    font-size: 16px; /* 调整字体大小 */
   }
-  
-  ion-row {
-    margin-bottom: 16px; /* 行间距 */
+
+  .meal-details {
+    font-size: 14px; /* 调整字体大小 */
   }
-  
-  ion-col {
-    padding: 0; /* 去掉每列的默认内边距 */
+
+  .login-btn {
+    font-size: 14px; /* 调整按钮文字大小 */
+    padding: 8px 0; /* 减小按钮内边距 */
   }
-  
+}

smarteat-app/src/app/tab1/tab1.page.ts

@@ -3,8 +3,8 @@ import { Router } from '@angular/router';
 import { CloudSeUser } from 'src/lib/cloudSeuser'; // 引入 CloudSeUser 类
 import { FmodeChatCompletion } from 'fmode-ng'; // 引入 FmodeChatCompletion
 import { addIcons } from 'ionicons';
-import { albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
-import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar, IonButtons } from '@ionic/angular/standalone'; // 导入 Ionic 组件
+import { albumsOutline, checkmarkCircleOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar, IonProgressBar, IonButtons,  } from '@ionic/angular/standalone'; // 导入 Ionic 组件
 import { CommonModule } from '@angular/common'; // 导入 CommonModule
 import { ImagePopupComponent } from '../image-popup/image-popup.component'; // 导入弹窗组件
 import { ModalController, NavController } from '@ionic/angular/standalone';
@@ -13,11 +13,11 @@ import { Image2PopupComponent } from '../image-popup/image2-popup/image2-popup.c
 import { Image3PopupComponent } from '../image-popup/image3-popup/image3-popup.component';
 import { Image4PopupComponent } from '../image-popup/image4-popup/image4-popup.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
-import { CloudUser } from 'src/lib/ncloud';
+import { CloudQuery, CloudUser } from 'src/lib/ncloud';
+import { CloudSeMealPlan } from 'src/lib/cloudplans';
 import { MealService } from '../meal/meal.service';
 import { MealSearchComponent } from '../meal-search/meal-search/meal-search.component';
 
-
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -26,18 +26,39 @@ import { MealSearchComponent } from '../meal-search/meal-search/meal-search.comp
   imports: [
     CommonModule, IonContent, IonHeader, IonTitle, IonToolbar, 
     IonButton, IonTextarea, IonInput, IonCard, IonCardContent, IonGrid, IonRow, IonCol, IonIcon,
-    IonCardHeader, IonCardTitle, IonSearchbar,IonButtons
+    IonCardHeader, IonCardTitle, IonSearchbar, IonProgressBar,IonButtons
   ],
 })
 export class Tab1Page implements OnInit {
   private cloudSeUser: CloudSeUser; // 引入 CloudSeUser 实例
-  searchQuery: string = '';
+  private cloudSeMealPlan: CloudSeMealPlan; // 引入 CloudSeMealPlan 实例
+
   userInfo: any = null; // 用户信息
   responseMsg: string = ""; // 用于存储 AI 生成的饮食建议
   recipeMsg: string = ""; // 用于存储 AI 生成的推荐食谱
   isLoading: boolean = false; 
   dishName:string="";//用于存储菜品名
   dishPhoto:string="";
+  breakfast: string = "";  // 用于存储早餐
+  lunch: string = "";  // 用于存储午餐
+  dinner: string = "";  // 用于存储晚餐
+  notes: string = "";  //用于存储饮食建议
+  today:string = "";//判定日期
+  currentDate = new Date();
+  plan: boolean = false;  // 用户是否有饮食计划
+  result: boolean = true;  // 是否成功匹配到饮食计划
+  mark0:boolean=false;
+  isComplete:boolean = false;
+  searchQuery: string = '';
+
+  // 当前显示的幻灯片索引
+  currentSlide: number = 0;
+  currentUser:CloudUser|undefined
+
+  currentDay: number = 0;  // 当前饮食计划是第几天
+  planDays: number = 0;  // 总饮食计划天数
+  progress: number = 0;  // 饮食计划进度
+  // currentUser: CloudUser | undefined;
 
   // 存储图片的数组
   images = [
@@ -54,47 +75,21 @@ export class Tab1Page implements OnInit {
       '<p><strong>三伏天“烤”验 孩子饮食如何搭配</strong></p>',
       '<p><strong>[辟谣]锻炼补水，喝运动饮料比喝白开水更好？</strong></p>'
   ];
-  // 当前显示的幻灯片索引
-  currentSlide: number = 0;
-  currentUser:CloudUser|undefined
+  
 
-  constructor(private router: Router, private modalCtrl: ModalController, private mealService: MealService,) {
-    addIcons({ scanOutline, documentOutline, storefrontOutline, albumsOutline, leafOutline });
+  constructor(private router: Router, private modalCtrl: ModalController,) {
+    addIcons({ scanOutline, documentOutline, storefrontOutline, albumsOutline, leafOutline, checkmarkCircleOutline});
     this.cloudSeUser = new CloudSeUser();
+    this.cloudSeMealPlan = new CloudSeMealPlan();
     this.currentUser=new CloudUser()
   }
 
-  //搜索框功能实现
-  // 当输入发生变化时触发
-  setSearchQuery(query: string) {
-    this.searchQuery = query;
-  }
-
-  // 点击搜索按钮时触发的搜索方法
-  async search() {
-    if (this.searchQuery.trim()) {
-      await this.openMealSearchModal();
-    }
-  }
-
-  // 打开弹窗并展示搜索结果
-  async openMealSearchModal() {
-    const modal = await this.modalCtrl.create({
-      component: MealSearchComponent,
-      componentProps: {
-        searchQuery: this.searchQuery,
-      },
-    });
-
-    await modal.present();
-  }
-//搜索框功能实现
-
   async ngOnInit(): Promise<void> {
     await this.loadUserData(); // 页面初始化时加载用户数据
     if (this.currentUser?.id) {
       this.goHealthTips();  // 用户已登录，立即调用生成健康建议的方法
       console.log(this.responseMsg)
+      this.getTodayDietPlan(); // 获取今日饮食计划
     }
   }
 
@@ -117,25 +112,56 @@ export class Tab1Page implements OnInit {
                 dietGroup: userData.get('dietGroup') || '',
                 avatar: userData.get('avatar') || null,
                 allergies: userData.get('allergies') || '',
+                planDays: userData.get('planDays') || null, // 获取 planDays 字段
             };
+            
+            // 检查用户是否有饮食计划
+            this.plan = this.userInfo.planDays != null && this.userInfo.planDays > 0;
+            this.planDays = this.userInfo.planDays || 0;  // 设置 planDays
         }
     } catch (error) {
         console.error('加载用户数据失败', error);
     }
   }
 
+ //搜索框功能实现
+  // 当输入发生变化时触发
+  setSearchQuery(query: string) {
+    this.searchQuery = query;
+  }
+
+  // 点击搜索按钮时触发的搜索方法
+  async search() {
+    if (this.searchQuery.trim()) {
+      await this.openMealSearchModal();
+    }
+  }
+
+  // 打开弹窗并展示搜索结果
+  async openMealSearchModal() {
+    const modal = await this.modalCtrl.create({
+      component: MealSearchComponent,
+      componentProps: {
+        searchQuery: this.searchQuery,
+      },
+    });
+
+    await modal.present();
+  }
+//搜索框功能实现
+
   // 获取健康建议
   async goHealthTips() {
+    this.isComplete = false;
     if (!this.userInfo) return;
 
-    const { height, weight, activityLevel, dietPreference, dietGroup } = this.userInfo;
+    const { height, weight, activityLevel, dietGroup ,gender} = this.userInfo;
     const newPrompt = `
-      你是一名专业的养生健康专家。根据以下用户信息，请提供今日的健康建议,字数大概在100-150字,分条列举,偏向与运动,睡眠与生活习惯等建议：
-      身高：${height} cm
-      体重：${weight} kg
-      活动水平：${activityLevel}
-      饮食偏好：${dietPreference}
-      饮食类型：${dietGroup}
+      你是一名专业的养生健康有关的专家，，专门为用户提供每日健康建议。
+      现在有一个身高${height} cm、体重${weight} kg的${gender}性用户向你咨询今日的健康建议。
+      重点是该用户是${dietGroup}饮食群体，活动水平${activityLevel}。
+      并且该用户今日的饮食规划为早餐：${this.breakfast}、午餐${this.lunch}、晚餐${this.dinner},参考饮食规划中的建议：${this.notes}。
+      请根据以上内容为该用户提供今日的健康建议。不需要再复述用户的信息，并且不需要提供饮食有关的建议，提供有关日常活动的，字数大概在100字以内。
     `;
 
     const completion = new FmodeChatCompletion([
@@ -146,9 +172,60 @@ export class Tab1Page implements OnInit {
     completion.sendCompletion().subscribe((message: any) => {
       console.log(message.content);
       this.responseMsg = message.content; // 更新健康建议
+      if (message?.complete){
+        this.isComplete = true;
+      }
     });
   }
 
+  async getTodayDietPlan() {
+    if (!this.userInfo || !this.currentUser?.id || !this.plan) {
+      this.result = false;
+      console.log("用户没有饮食计划");
+      return null;
+    }
+  
+    const currentDateStr = new Date().toISOString().split('T')[0]; // 获取今日日期（例如：2024-12-24）
+  
+    const cloudSeMealPlan = new CloudSeMealPlan();
+  
+    try {
+      // 获取当前用户的饮食计划（通过 user 外键和 day 日期进行匹配）
+      const query = new CloudQuery("seMealPlans");
+      query.equalTo("user", { "__type": "Pointer", "className": "_User", "objectId": this.currentUser.id });
+      query.equalTo("day", currentDateStr);  // 使用 today 变量匹配日期
+  
+      // 执行查询并获取第一个匹配的结果
+      const mealPlan = await query.first(); // 如果有多个匹配的计划，可以使用 `query.find()` 获取所有
+  
+      // 检查是否找到了匹配的饮食计划
+      if (mealPlan) {
+        this.breakfast = mealPlan.get("breakfast") || '暂无早餐信息';
+        this.lunch = mealPlan.get("lunch") || '暂无午餐信息';
+        this.dinner = mealPlan.get("dinner") || '暂无晚餐信息';
+        this.notes = mealPlan.get("notes") || '暂无饮食建议信息';
+        this.mark0 = mealPlan.get("mark") || false;  // 获取当前的打卡状态
+        this.currentDay = mealPlan.get("No") || 0;  // 获取当前是第几天
+        this.result = true;  // 标记成功
+
+        // 计算进度
+        this.progress = this.planDays ? this.currentDay / this.planDays : 0;
+
+        console.log("今日饮食计划: ", this.breakfast, this.lunch, this.dinner);
+        console.log("mealPlan objectId:", mealPlan.id);  // 调试：确保返回了 objectId
+        return mealPlan;  // 返回 mealPlan，以便后续更新
+      } else {
+        // 如果没有找到今日饮食计划
+        this.result = false;
+        console.log('未找到今日饮食计划');
+        return null;
+      }
+    } catch (error) {
+      console.error("获取今日饮食计划失败", error);
+      this.result = false;
+      return null;
+    }
+  }
 
   // 打开弹窗
   async openImagePopup(imageUrl: string, description: string) {
@@ -235,4 +312,37 @@ export class Tab1Page implements OnInit {
         await this.loadUserData();// 登录后加载用户信息
       }
     }
-  }
+
+    // setToday() {
+    //   const nextDay = new Date(this.currentDate);
+    //   this.today = nextDay.toISOString().split('T')[0];
+    //   }
+
+    async check() {
+    
+      // 获取当前日期
+      const currentDateStr = new Date().toISOString().split('T')[0]; // 获取今日日期（例如：2024-12-24）
+    
+      // 获取今日饮食计划
+      const mealPlan = await this.getTodayDietPlan(); // 获取当前饮食计划
+      console.log('当前 mealPlan:', mealPlan);  // 调试：检查 mealPlan 是否存在
+      if (mealPlan && mealPlan.id) {
+        // 使用 get 方法获取 objectId
+        const mealPlanId = mealPlan.id;
+        console.log('准备更新 mealPlan objectId:', mealPlanId);  // 打印 objectId
+    
+        // 更新数据库中的 mark 字段
+        try {
+          // 调用后端接口更新饮食计划
+          await this.cloudSeMealPlan.updateMealPlan({ mark: true }, mealPlanId); 
+          this.mark0 = true;
+          console.log('打卡状态已更新：', );
+        } catch (error) {
+          console.error('更新打卡状态失败', error);
+        }
+      } else {
+        console.log('未找到今日饮食规划，无法打卡');
+      }
+    }
+    
+}

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

@@ -41,8 +41,14 @@
   </div>
 
   <!-- 按钮：执行消息生成函数 -->
+  @if(!currentUser?.id){
+    <ion-button (click)="login()" fill="outline" color="primary">
+      登录
+    </ion-button>
+  }
+  @if(currentUser?.id){
   <ion-button (click)="sendMessage()" expand="block">饮食方案生成</ion-button>
-
+ }
   <!-- 展示：返回消息内容 -->
   @if(!isComplete && responseMsg!="" && !isNew){
     <!-- <div class="response-container">{{responseMsg}}</div> -->

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

@@ -3,8 +3,9 @@ import { CloudSeMealPlan } from 'src/lib/cloudplans'; // 引入封装好的 Clou
 import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 import { CloudSeUser } from 'src/lib/cloudSeuser'; // 引入 CloudSeUser 类
 
-import { IonButton, IonContent, IonHeader, IonInput, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonButton, IonContent, IonHeader, IonInput, IonSelect, IonSelectOption, IonTextarea, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
+import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 @Component({
 selector: 'app-tab2',
 templateUrl: 'tab2.page.html',
@@ -18,7 +19,9 @@ MarkdownPreviewModule,
 })
 export class Tab2Page {
 
-constructor() {}
+constructor(private modalCtrl: ModalController) {
+  this.currentUser=new CloudUser();
+}
 
 ngOnInit() {
 this.loadUserData();
@@ -29,7 +32,7 @@ planningDays: string = "";
 userPrompt: string = "";
 currentDate = new Date();
 dateOnlyString: string = '';
-
+currentUser:CloudUser|undefined
 // 用户信息
 age: number | null = null;
 gender: string = '';
@@ -95,7 +98,7 @@ if(this.responseMsg1==""){
   现在告诉你用户描述：该用户是一个年龄为${this.age}岁，身高和体重分别为${this.height}cm，${this.weight}kg的${this.gender}性。
   他的活动水平${this.activityLevel}，饮食偏好${this.dietPreference}，并且他的过敏信息为${this.allergies}。
   重点是他希望作为一位${this.dietGroup}群体的人，希望你为他或她规划以为${this.dateOnlyString}开始${this.planningDays}天的详细的饮食规划（食物内容以日常生活常见食物为主,每次规划尽量不同，要多样化）。
-  生成的结果不需要再复述用户的信息，直接以形式输出格式为（day（date类型）、breakfast（string类型）、lunch（string类型）、dinner（string类型）、notes（string类型））结构化JSON格式输出
+  生成的结果不需要再复述用户的信息，直接以形式输出格式为（day（date类型）、breakfast（string类型）、lunch（string类型）、dinner（string类型）、notes（string类型）、No（number类型，第几天））结构化JSON格式输出
   （结果不需要用\`\`\`json和\`\`\`将结果包裹，当天数大于一时，用[]括起多天的规划、并且之间用,隔开）
   `;
 }else{
@@ -106,7 +109,7 @@ if(this.responseMsg1==""){
   他的活动水平${this.activityLevel}，饮食偏好${this.dietPreference}，并且他的过敏信息为${this.allergies}。
   重点是他希望作为一位${this.dietGroup}群体的人，希望你为他或她规划以为${this.dateOnlyString}开始${this.planningDays}天的详细的饮食规划（食物内容以日常生活常见食物为主）。
   你可以在该${this.responseMsg1}饮食规划的基础上，再根据该需求${this.userPrompt}，生成新的饮食规划，以下格式不变。
-  生成的结果不需要再复述用户的信息，直接以形式输出格式为（day（date类型）、breakfast（string类型）、lunch（string类型）、dinner（string类型）、notes（string类型））结构化JSON格式输出
+  生成的结果不需要再复述用户的信息，直接以形式输出格式为（day（date类型，日期）、breakfast（string类型）、lunch（string类型）、dinner（string类型）、notes（string类型）、No（number类型，第几天））结构化JSON格式输出
   （结果不需要用\`\`\`json和\`\`\`将结果包裹，当天数大于一时，用[]括起多天的规划、并且之间用,隔开）
   `;
 
@@ -164,7 +167,8 @@ try {
       breakfast: plan.breakfast,
       lunch: plan.lunch,
       dinner: plan.dinner,
-      notes: plan.notes
+      notes: plan.notes,
+      No: Number(plan.No)
     };
   });
 
@@ -224,7 +228,8 @@ async exportMealPlan() {
           breakfast: plan.breakfast,
           lunch: plan.lunch,
           dinner: plan.dinner,
-          notes: plan.notes
+          notes: plan.notes,
+          No: Number(plan.No)
         };
       });
 
@@ -271,4 +276,13 @@ async exportMealPlan() {
   }
 }
 
+async login(){
+  // 弹出登录窗口
+  let user = await openUserLoginModal(this.modalCtrl);
+  if(user?.id){
+    this.currentUser = user
+    await this.loadUserData();// 登录后加载用户信息
+  }
+}
+
 }

smarteat-app/src/app/tab3/tab3.page.html

@@ -41,11 +41,11 @@
   <!-- 我的饮食计划 -->
     <ion-card>
       <ion-card-header>
-        <ion-card-title>我的饮食计划</ion-card-title>
+        <ion-card-title>我的饮食规划</ion-card-title>
       </ion-card-header>
       <ion-card-content>
         <ion-item>
-          <ion-label>今天的计划</ion-label>
+          <ion-label></ion-label>
           <ion-button expand="block" color="secondary">
             查看详情
           </ion-button>
@@ -61,7 +61,7 @@
       </ion-card-header>
       <ion-card-content>
         <ion-item>
-          <ion-label>最近三天记录</ion-label>
+          <ion-label></ion-label>
           <ion-button expand="block" color="tertiary">
             查看详情
           </ion-button>

smarteat-app/src/lib/user/modal-user-login/modal-user-login.component.ts

@@ -76,8 +76,6 @@ export async function openUserLoginModal(modalCtrl:ModalController,type:"login"|
     componentProps:{
       type:type
     },
-    breakpoints:[0.5,0.7],
-    initialBreakpoint:0.5
   });
   modal.present();
 
@@ -86,5 +84,6 @@ export async function openUserLoginModal(modalCtrl:ModalController,type:"login"|
   if (role === 'confirm') {
     return data;
   }
-  return null
+  return null;
+
 }

smarteat-app/src/theme/variables.scss

@@ -3,7 +3,7 @@
 
   ion-button {
     border-radius: 12px; /* 按钮圆角 */
-    --background: #33ffcc;   /* 设置背景色为 #33ffcc */
+    --background: #99ffcc;   /* 设置背景色为 #99ffcc */
     color: #333; /* 按钮中文字的颜色 */
     font-weight: bold; /* 按钮字体加粗 */
     text-align: center; /* 确保按钮文字水平居中 */