final

smarteat-app/deploy.ps1

@@ -18,5 +18,5 @@ obsutil chattri obs://nova-cloud/dev/jxnu/202226701038 -r -f -i=XSUWJSVMZNHLWFAI
 # 列举对象
 obsutil ls obs://nova-cloud/dev/jxnu/202226701038  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
 
-obsutil cp 三伏天“烤”验 孩子饮食如何搭配.docx obs://nova-cloud/dev/jxnu/202226701038/ -f -i XSUWJSVMZNHLWFAINRZ1 -k P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e obs.cn-south-1.myhuaweicloud.com
+obsutil cp bg.jpg obs://nova-cloud/dev/jxnu/202226701038/ -f -i XSUWJSVMZNHLWFAINRZ1 -k P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e obs.cn-south-1.myhuaweicloud.com
 obsutil ls obs://nova-cloud/dev/jxnu/202226701038 -i XSUWJSVMZNHLWFAINRZ1 -k P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e obs.cn-south-1.myhuaweicloud.com

smarteat-app/src/app/page-plans/page-plans.component.html

@@ -1,12 +1,10 @@
-<ion-header>
-  <ion-toolbar>
-    <!-- 返回按钮 -->
-    <ion-button (click)="back()" slot="start" >
-      <ion-icon name="arrow-undo-outline" ></ion-icon>
+<ion-toolbar>
+  <ion-buttons slot="start">
+    <ion-button class="back-button"(click)="back()">
+      <ion-icon name="chevron-back"></ion-icon>
     </ion-button>
-    <ion-title>饮食规划</ion-title>
-  </ion-toolbar>
-</ion-header>
+  </ion-buttons>
+</ion-toolbar>
 
 <ion-content>
   <!-- 显示加载中的状态 -->
@@ -42,7 +40,9 @@
 
   <!-- 如果没有饮食规划，显示此按钮 -->
   @if(mealPlans.length === 0){
-    <ion-button  expand="full">您还没有饮食规划</ion-button>
+    <div class="empty-message">
+      <h2>您没有饮食规划，请生成饮食规划</h2>
+    </div>
   }
   
 

smarteat-app/src/app/page-plans/page-plans.component.scss

@@ -1,32 +1,161 @@
+// /* 设置饮食规划页面的基本样式 */
+// ion-content {
+//   background-color: #f7f7f7; /* 背景颜色 */
+//   padding: 16px;
+//   font-family: 'Arial', sans-serif;
+// }
+
+.back-button {
+  opacity: 0.2;  /* 0 表示完全透明，1 表示完全不透明 */
+  --background: transparent;  /* 确保背景透明 */
+  --border: none;             /* 删除边框 */
+  --box-shadow: none;         /* 删除阴影 */
+}
+
+.chevron-back {
+  color: #ccc; /* 将箭头颜色设为浅灰色 */
+  font-size: 10px; /* 可根据实际情况调整箭头大小 */
+}
+
+ion-toolbar {
+  padding: 3px 5px; /* 适当减小内边距，让整体更紧凑 */
+  width: fit-content; /* 让工具栏宽度自适应内容，避免占满整行产生分割感 */
+  margin: 0 auto 0 0; /* 让工具栏靠右对齐（根据实际布局需求调整），消除左边的多余空白，减少分割感 */
+  background-color: transparent; /* 设置背景透明，减少与页面背景的分割感 */
+  box-shadow: none; /* 去除阴影 */
+  margin: 10px;
+}
+
+.empty-message {
+  display: flex;
+  justify-content: center;  /* 水平居中 */
+  align-items: center;      /* 垂直居中 */
+  height: 50%;             /* 让容器占满父容器高度 */
+  text-align: center;       /* 文本水平居中 */
+  font-size: 20px;          /* 提示信息的字体大小 */
+  background-color: #f7f3f3; /* 提示框的背景颜色 */
+  color: #f70920;           /* 提示信息的字体颜色 */
+  padding: 20px;            /* 内边距，避免文本紧贴边缘 */
+  border-radius: 10px;      /* 圆角效果 */
+  box-shadow: 0 4px 8px rgba(253, 253, 253, 0); /* 添加阴影，使其更突出 */
+}
+
+
+
+// /* 显示加载中的状态 */
+// ion-spinner {
+//   display: block;
+//   margin: 40px auto;
+// }
+
+// /* 错误消息 */
+// .error-message {
+//   text-align: center;
+//   color: #f44336; /* 错误消息为红色 */
+//   font-size: 18px;
+//   margin-top: 20px;
+// }
+
+// /* 饮食卡片样式 */
+// .diet-card {
+//   border-radius: 12px; /* 卡片圆角 */
+//   overflow: hidden; /* 防止内容溢出 */
+//   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
+//   margin-bottom: 16px;
+//   background-color: #ffffff; /* 白色背景 */
+// }
+
+// .diet-card-header {
+//   background-color: #e6f7e6; /* 淡绿色背景 */
+//   padding: 16px;
+//   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;
+//   font-size: 16px;
+//   line-height: 1.5;
+// }
+
+// /* 当没有饮食规划时，按钮样式 */
+// // ion-button {
+// //   margin-top: 20px;
+// //   background-color: #99ffcc;
+// //   color: white;
+// //   font-weight: bold;
+// //   border-radius: 8px;
+// //   padding: 12px;
+// //   transition: background-color 0.3s ease;
+// // }
+
+// // ion-button:hover {
+// //   background-color: #e53935; /* 按钮悬停时颜色变化 */
+// // }
+
+// /* 响应式布局调整 */
+// @media (max-width: 768px) {
+//   ion-header {
+//     padding: 8px;
+//   }
+
+//   ion-title {
+//     font-size: 18px;
+//   }
+
+//   .diet-card {
+//     margin: 0 auto;
+//     max-width: 90%;
+//   }
+
+//   .diet-card-header {
+//     padding: 12px;
+//   }
+
+//   .diet-card-content {
+//     padding: 12px;
+//     font-size: 14px;
+//   }
+
+//   // ion-button {
+//   //   font-size: 14px;
+//   //   padding: 10px;
+//   // }
+// }
 /* 设置饮食规划页面的基本样式 */
 ion-content {
-  background-color: #f7f7f7; /* 背景颜色 */
+  background-color: #f7f7f7;  /* 背景颜色 */
   padding: 16px;
   font-family: 'Arial', sans-serif;
 }
 
+// /* 顶部工具栏的返回按钮样式 */
+// ion-toolbar {
+//   padding: 3px 5px;  /* 缩小工具栏内边距 */
+//   width: fit-content;  /* 使工具栏宽度适应内容 */
+//   margin: 0 auto;  /* 居中对齐 */
+//   background-color: transparent;  /* 背景透明 */
+//   box-shadow: none;  /* 去除阴影 */
+// }
 
-/* 设置返回按钮的样式 */
 ion-button {
-  --background: transparent;
-  --border-radius: 50%;
-  --box-shadow: none;
-  padding: 8px;
-  font-size: 20px;
-}
-
-/* 头部标题样式 */
-ion-title {
-  font-size: 20px;
-  font-weight: bold;
-  color: #2c6e4f; /* 深绿色 */
-  background-color: #ffffff; /* 头部背景色 */
+  padding: 0;  /* 去除按钮内边距 */
 }
 
-/* 显示加载中的状态 */
-ion-spinner {
-  display: block;
-  margin: 40px auto;
+.chevron-back {
+  color: #aaa; /* 设置箭头颜色为浅灰色 */
+  font-size: 24px;  /* 设置箭头大小 */
 }
 
 /* 错误消息 */
@@ -69,48 +198,3 @@ ion-spinner {
   font-size: 16px;
   line-height: 1.5;
 }
-
-/* 当没有饮食规划时，按钮样式 */
-ion-button {
-  margin-top: 20px;
-  background-color: #99ffcc;
-  color: white;
-  font-weight: bold;
-  border-radius: 8px;
-  padding: 12px;
-  transition: background-color 0.3s ease;
-}
-
-ion-button:hover {
-  background-color: #e53935; /* 按钮悬停时颜色变化 */
-}
-
-/* 响应式布局调整 */
-@media (max-width: 768px) {
-  ion-header {
-    padding: 8px;
-  }
-
-  ion-title {
-    font-size: 18px;
-  }
-
-  .diet-card {
-    margin: 0 auto;
-    max-width: 90%;
-  }
-
-  .diet-card-header {
-    padding: 12px;
-  }
-
-  .diet-card-content {
-    padding: 12px;
-    font-size: 14px;
-  }
-
-  ion-button {
-    font-size: 14px;
-    padding: 10px;
-  }
-}

smarteat-app/src/app/page-plans/page-plans.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonSpinner, IonText, IonTitle, IonToolbar, LoadingController, ModalController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { arrowUndoOutline } from 'ionicons/icons';
+import { arrowUndoOutline, chevronBack, leafOutline, arrowBack } from 'ionicons/icons';
 import { CloudSeMealPlan } from 'src/lib/cloudplans';
 import { CloudUser } from 'src/lib/ncloud';
 import { CommonModule } from '@angular/common';  // 导入 CommonModule
@@ -26,7 +26,7 @@ interface MealPlan {
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, IonCardHeader, IonCard, 
     IonButton, IonIcon,  IonSpinner, IonText, IonCardTitle, IonCardContent,
-    CommonModule  
+    CommonModule,IonButtons,IonLabel
   ]
 })
 export class PagePlansComponent implements OnInit {
@@ -42,7 +42,7 @@ export class PagePlansComponent implements OnInit {
   cloudSeUser: CloudSeUser;  // 引入CloudSeUser实例
   
   constructor(private loadingController: LoadingController, private modalCtrl: ModalController) {
-    addIcons({ arrowUndoOutline });
+    addIcons({arrowBack,leafOutline,arrowUndoOutline,chevronBack});
     this.currentUser=new CloudUser();
     this.cloudSeUser = new CloudSeUser();  // 实例化CloudSeUser
   }

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

@@ -1,4 +1,5 @@
-<ion-toolbar>
+<ion-content [fullscreen]="true" class="bg-color">
+<ion-toolbar style="margin-top: 5px;">
       <ion-searchbar 
         class="custom-searchbar" 
         placeholder="搜索食物、食谱" 
@@ -8,14 +9,14 @@
         (ionCancel)="searchQuery = ''" 
         (ionSearch)="search()">
       </ion-searchbar>
-      <ion-buttons slot="end">
-        <ion-button (click)="search()">搜索
-          <ion-icon slot="icon-only" name="search"></ion-icon>
+      <ion-buttons slot="end" class="search-button" >
+        <ion-button (click)="search()" class="search-button">
+          <ion-label style="color: black;">搜索</ion-label>
         </ion-button>
       </ion-buttons>
 </ion-toolbar>
 
-<ion-content [fullscreen]="true">
+<!-- <ion-content [fullscreen]="true"> -->
  <!-- 轮播图区域 -->
 <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
   <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">

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

@@ -4,6 +4,10 @@ ion-content {
   --background: #fffafa;
 }
 
+.search-button{
+  background-color: #fff ,!important;
+  color:#333,!important;
+}
 /* 搜索框圆角样式 */
 .custom-searchbar {
   --border-radius: 25px; /* 设置圆角 */

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, 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 { albumsOutline, checkmarkCircleOutline, documentOutline, leafOutline, scanOutline, storefrontOutline, search } from 'ionicons/icons';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar, IonGrid, IonCardTitle, IonSearchbar, IonProgressBar, IonButtons, IonLabel,  } 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';
@@ -26,7 +26,7 @@ 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, IonProgressBar,IonButtons
+    IonCardHeader, IonCardTitle, IonSearchbar, IonProgressBar,IonButtons,IonLabel
   ],
 })
 export class Tab1Page implements OnInit {
@@ -79,7 +79,7 @@ export class Tab1Page implements OnInit {
   
 
   constructor(private router: Router, private modalCtrl: ModalController, private mealService: MealService,) {
-    addIcons({ scanOutline, documentOutline, storefrontOutline, albumsOutline, leafOutline, checkmarkCircleOutline});
+    addIcons({search,leafOutline,checkmarkCircleOutline,storefrontOutline,albumsOutline,scanOutline,documentOutline});
     this.cloudSeUser = new CloudSeUser();
     this.cloudSeMealPlan = new CloudSeMealPlan();
     this.currentUser=new CloudUser()

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

@@ -16,20 +16,10 @@
       placeholder="请选择规划天数"
       interface="popover"
       required>
-        <ion-select-option value="1">1天</ion-select-option>
-        <ion-select-option value="2">2天</ion-select-option>
         <ion-select-option value="3">3天</ion-select-option>
-        <ion-select-option value="4">4天</ion-select-option>
         <ion-select-option value="5">5天</ion-select-option>
-        <ion-select-option value="6">6天</ion-select-option>
-        <ion-select-option value="7">7天</ion-select-option>
-        <ion-select-option value="8">8天</ion-select-option>
-        <ion-select-option value="9">9天</ion-select-option>
-        <ion-select-option value="10">10天</ion-select-option>
-        <ion-select-option value="11">11天</ion-select-option>
-        <ion-select-option value="12">12天</ion-select-option>
-        <ion-select-option value="13">13天</ion-select-option>
-        <ion-select-option value="14">14天</ion-select-option>
+        <ion-select-option value="7">一周</ion-select-option>
+        <ion-select-option value="14">两周</ion-select-option>
       </ion-select>
     </div>
   </div>

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

@@ -1,9 +1,3 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>我的</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
   <!-- 用户信息 -->
   <ion-item lines="none" class="user-info">
@@ -38,57 +32,44 @@
     </div>
   </ion-item>
   
-  <!-- 我的饮食计划 -->
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>我的饮食规划</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-item>
-          <ion-label></ion-label>
-          <ion-button (click)="goToplans()" expand="block" color="secondary">
-            查看详情
-          </ion-button>
-        </ion-item>
-      </ion-card-content>
-    </ion-card>
+<!-- 我的饮食计划 -->
+<ion-card class="custom-card">
+  <!-- 饮食规划按钮 -->
+  <ion-item button (click)="goToplans()" class="tight-button">
+    <ion-icon slot="start" name="leaf-outline"></ion-icon>
+    <ion-label>饮食规划</ion-label>
+  </ion-item>
+  
+  <!-- 历史记录按钮 -->
+  <ion-item button class="tight-button">
+    <ion-icon slot="start" name="time"></ion-icon>
+    <ion-label>历史记录</ion-label>
+  </ion-item>
 
+<!-- 收藏按钮 -->
+  <ion-item button class="tight-button">
+    <ion-icon slot="start" name="heart-outline"></ion-icon>
+    <ion-label>收藏</ion-label>
+  </ion-item>
+</ion-card>
 
-  <!-- 我的历史记录 -->
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>历史记录</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-item>
-          <ion-label></ion-label>
-          <ion-button expand="block" color="tertiary">
-            查看详情
-          </ion-button>
-        </ion-item>
-      </ion-card-content>
-    </ion-card>
-  
 
- 
-    <ion-item button >
-      <ion-icon slot="start" name="heart-outline"></ion-icon>
-      <ion-label>收藏</ion-label>
-    </ion-item>
   
 
+ <ion-card class="custom-card">
+
   <!-- 帮助与反馈按钮 -->
 
-    <ion-item button >
+    <ion-item button class="tight-button">
       <ion-icon slot="start" name="help-circle-outline"></ion-icon>
       <ion-label>帮助与反馈</ion-label>
     </ion-item>
 
   <!-- 设置按钮 -->
 
-    <ion-item button >
+    <ion-item button class="tight-button">
       <ion-icon slot="start" name="settings-outline"></ion-icon>
       <ion-label>设置</ion-label>
     </ion-item>
-
+</ion-card>
 </ion-content>

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

@@ -1,24 +1,64 @@
-ion-header {
-  color: #333; /* 中文字的颜色 */
-  font-weight: bold; /* 按钮字体加粗 */
-  box-shadow: none;
+ion-content {
+  background-image: url('https://app.fmode.cn/dev/jxnu/202226701038/bg.jpg');
+  background-size: cover; /* 使背景图像覆盖整个区域 */
+  background-position: center; /* 将背景图像居中 */
+  background-repeat: no-repeat; /* 不重复背景图像 */
 }
 
-ion-toolbar {
-  --background: #99ffcc; /* 设置工具栏背景色 */
+ion-avatar {
+  width: 80px;   /* 设置宽度 */
+  height: 80px;  /* 设置高度 */
 }
 
-ion-title {
-  // font-size: 1.8em;
-  font-weight: bold;
-  color: white; /* 设置标题文字颜色 */
+ion-avatar img {
+  border-radius: 10px;   /* 去掉圆角，使图片变为方形 */
+  width: 100%;        /* 确保图片占满整个头像区域 */
+  height: 100%;       /* 确保图片占满整个头像区域 */
+  object-fit: cover;  /* 确保图片按比例填充并覆盖头像区域 */
 }
 
-/* 页面背景和基础样式 */
-ion-content {
-  --background: #f2f2f2;
+.user-info ion-label {
+  margin-bottom: 50px;  /* 设置 `ion-label` 的下边距 */
+}
+
+/* 设置 ion-card 上下的内边距 */
+.custom-card {
+  padding-top: 0px !important;    /* 调整卡片顶部内边距 */
+  padding-bottom: 5px !important; /* 调整卡片底部内边距 */
+  margin-top: 5px !important;     /* 可选：设置与其他部分的间距 */
+  margin-bottom: 5px !important;  /* 可选：设置与其他部分的间距 */
+}
+
+/* 样式调整：去除按钮边框，保持按钮紧密 */
+/* 去除按钮的边框和内边距，确保按钮紧密连接 */
+.tight-button {
+  --padding-start: 0px;       /* 去掉按钮的左右内边距 */
+  --padding-end: 0px;
+  margin-top: 5px !important;   /* 设置按钮的顶部外边距 */
+  margin-bottom: 10px !important; /* 设置按钮的底部外边距 */
+  --border-width: 0;           /* 去除按钮的边框 */
+  --border-color: transparent !important;
+  --border-radius: 0;          /* 去除圆角，保持直角 */
+  --background: transparent;  /* 背景透明 */
+  --inner-border-width: 0;     /* 去除按钮内部的边框 */
+  font-size: 14px !important;               /* 调整字体大小 */
+  height: 50px !important;                 /* 调整按钮的高度 */
 }
 
+
+/* 为紧邻的按钮之间添加分隔线，增加透明度 */
+ion-item + ion-item {
+  border-top: 1px solid rgba(204, 204, 204, 0.5);  /* 增加透明度的分隔线 */
+}
+
+
+
+
+// /* 页面背景和基础样式 */
+// ion-content {
+//   --background: #f2f2f2;
+// }
+
 /* 用户信息区 */
 .user-info {
   display: flex;

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

@@ -9,7 +9,7 @@ import { ModalController } from '@ionic/angular/standalone';
 import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 import { PagePlansComponent } from '../page-plans/page-plans.component';
 import { addIcons } from 'ionicons';
-import { heartOutline, helpCircleOutline, settingsOutline } from 'ionicons/icons';
+import { heartOutline, helpCircleOutline, leafOutline, settingsOutline, time } from 'ionicons/icons';
 
 interface UserInfo {
   name: string;
@@ -37,7 +37,7 @@ export class Tab3Page implements OnInit {
   };
 
   constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
-    addIcons({settingsOutline, helpCircleOutline, heartOutline})
+    addIcons({settingsOutline, helpCircleOutline, heartOutline,time,leafOutline})
     this.currentUser=new CloudUser();
   }
   

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

@@ -1 +1,6 @@
-
+/* src/global.scss */
+ion-tab-bar {
+    --background: #ffffff; /* 设置底部导航栏背景为白色 */
+    --border-color: #dcdcdc; /* 可选：设置边框颜色，默认是浅灰色 */
+  }
+  

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

@@ -1,5 +1,4 @@
-
-    <ion-buttons slot="start">
+  <ion-buttons slot="start">
       <ion-button class="back-button"(click)="dismissModal()">
         <ion-icon name="chevron-back"></ion-icon>
       </ion-button>
@@ -63,4 +62,4 @@
       </ion-row>
     </ion-card-content>
   </ion-card>
-</ion-content>
+</ion-content>

smarteat-app/src/theme/variables.scss

@@ -10,4 +10,10 @@
     display: flex; /* 使用 flexbox 布局 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
+  }
+
+  .bg-color{
+  background-image: url('https://app.fmode.cn/dev/jxnu/202226701038/bg.jpg'); /* 背景图片路径 */
+  background-size: cover; /* 背景图片覆盖整个区域 */
+  background-repeat: no-repeat; /* 禁止重复 */
   }