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

@@ -87,7 +87,7 @@
     <!-- 如果用户未登录，显示登录按钮 -->
     @if(!currentUser?.id){
       <ion-button (click)="login()" fill="outline" color="primary" class="login-btn">
-        请登录后可见
+        请登录后查看
       </ion-button>
     }
   </ion-card-content>

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

@@ -4,7 +4,7 @@ import { CloudSeUser } from 'src/lib/cloudSeuser'; // 引入 CloudSeUser 类
 import { FmodeChatCompletion } from 'fmode-ng'; // 引入 FmodeChatCompletion
 import { addIcons } from 'ionicons';
 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,  } from '@ionic/angular/standalone'; // 导入 Ionic 组件
+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';
@@ -15,6 +15,8 @@ import { Image4PopupComponent } from '../image-popup/image4-popup/image4-popup.c
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
 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',
@@ -24,7 +26,7 @@ import { CloudSeMealPlan } from 'src/lib/cloudplans';
   imports: [
     CommonModule, IonContent, IonHeader, IonTitle, IonToolbar, 
     IonButton, IonTextarea, IonInput, IonCard, IonCardContent, IonGrid, IonRow, IonCol, IonIcon,
-    IonCardHeader, IonCardTitle, IonSearchbar, IonProgressBar
+    IonCardHeader, IonCardTitle, IonSearchbar, IonProgressBar,IonButtons
   ],
 })
 export class Tab1Page implements OnInit {
@@ -33,6 +35,10 @@ export class Tab1Page implements OnInit {
 
   userInfo: any = null; // 用户信息
   responseMsg: string = ""; // 用于存储 AI 生成的饮食建议
+  recipeMsg: string = ""; // 用于存储 AI 生成的推荐食谱
+  isLoading: boolean = false; 
+  dishName:string="";//用于存储菜品名
+  dishPhoto:string="";
   breakfast: string = "";  // 用于存储早餐
   lunch: string = "";  // 用于存储午餐
   dinner: string = "";  // 用于存储晚餐
@@ -43,6 +49,7 @@ export class Tab1Page implements OnInit {
   result: boolean = true;  // 是否成功匹配到饮食计划
   mark0:boolean=false;
   isComplete:boolean = false;
+  searchQuery: string = '';
 
   // 当前显示的幻灯片索引
   currentSlide: number = 0;
@@ -117,6 +124,32 @@ export class Tab1Page implements OnInit {
     }
   }
 
+ //搜索框功能实现
+  // 当输入发生变化时触发
+  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;
@@ -259,6 +292,18 @@ export class Tab1Page implements OnInit {
       this.router.navigate([`/tabs/tips`]);
     }
 
+    goToasy() {
+      this.router.navigate([`/tabs/asy`]);
+    }
+
+    goToasf(){
+      this.router.navigate([`/tabs/asf`]);
+    }
+
+    goToasx(){
+      this.router.navigate([`/tabs/asx`]);
+    }
+
     async login(){
       // 弹出登录窗口
       let user = await openUserLoginModal(this.modalCtrl);

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;
+
 }