diff --git a/2-参考资料/2-食品添加剂分类.md b/2-参考资料/2-食品添加剂分类.md
index 8ef1d32..461025e 100644
--- a/2-参考资料/2-食品添加剂分类.md
+++ b/2-参考资料/2-食品添加剂分类.md
@@ -44,21 +44,21 @@ JECFA 分类标准
 
 一、分类体系及定义
 ‌A类（安全性较高）‌
+‌A1类‌：毒理学资料完善，已制定正式每日允许摄入量（ADI值），允许按标准使用‌。
+‌A2类‌：毒理学资料不完善，但已制定暂定ADI值，允许暂时使用‌。
 
-‌A1类‌：毒理学资料完善，已制定正式每日允许摄入量（ADI值），允许按标准使用‌12。
-‌A2类‌：毒理学资料不完善，但已制定暂定ADI值，允许暂时使用‌12。
 ‌B类（安全性待评估）‌
+‌B1类‌：JECFA曾评估但资料不足，未制定ADI值‌。
+‌B2类‌：未经过JECFA安全性评价‌。
 
-‌B1类‌：JECFA曾评估但资料不足，未制定ADI值‌12。
-‌B2类‌：未经过JECFA安全性评价‌12。
 ‌C类（限制或禁用）‌
+‌C1类‌：经评估认为在食品中使用不安全，原则上禁止使用‌。
+‌C2类‌：仅限特定食品中严格限制使用‌。
 
-‌C1类‌：经评估认为在食品中使用不安全，原则上禁止使用‌12。
-‌C2类‌：仅限特定食品中严格限制使用‌12。
 二、安全性排序
-从高到低依次为：‌A1 > A2 > B1 > B2 > C2 > C1‌‌34。
+从高到低依次为：‌A1 > A2 > B1 > B2 > C2 > C1‌‌。
 
 三、典型示例
 ‌A1类‌：常见防腐剂苯甲酸钠（正式ADI值0-5 mg/kg体重）‌15。
-‌C1类‌：部分工业用着色剂因致癌性被禁用‌23。
+‌C1类‌：部分工业用着色剂因致癌性被禁用‌。
 注：该分类为国际通用标准，具体应用需结合各国法规（如中国GB 2760-2024）调整‌67。
\ No newline at end of file
diff --git a/3-工作日志/3.5-工作日志-搜索结果页重构-v3.0.md b/3-工作日志/3.5-工作日志-搜索结果页重构-v3.0.md
new file mode 100644
index 0000000..5bd8bc0
--- /dev/null
+++ b/3-工作日志/3.5-工作日志-搜索结果页重构-v3.0.md
@@ -0,0 +1,56 @@
+# 搜索结果页重构日志 (v3.0)
+
+**版本:** 3.0
+**日期:** 2025-07-26
+**负责人:** DevOps 工程师
+
+## 1. 概述
+
+本次更新对搜索结果页面进行了全面的重构，旨在提升代码的可维护性、可扩展性和用户体验。所有相关的旧版组件和视图均已废弃，并由全新的 v3.0 版本取代。
+
+## 2. 主要变更
+
+### 2.1. 视图层 (View)
+
+- **删除旧视图**:
+  - `SearchResultView-搜索结果页.vue`
+  - `SearchResultView-搜索结果页-2.0.backup.vue`
+- **新增新视图**:
+  - `SearchResultView-搜索结果页3.0.vue`
+- **路由更新**:
+  - `/search-result` 路由已指向新的 `SearchResultView-搜索结果页3.0.vue`。
+
+### 2.2. 组件层 (Component)
+
+- **目录结构调整**:
+  - 旧的 `shihuashishuo-ui/src/components/SearchResult/` 目录已被删除。
+  - 所有新组件均迁移至 `shihuashishuo-ui/src/components/SearchResult-搜索结果/`，并采用更清晰的中文命名。
+- **组件重构**:
+  - 删除了所有旧的搜索结果相关卡片和列表组件。
+  - 新增了以下组件，对不同类型的结果进行了更精细的拆分：
+    - `AllResultsList-所有结果列表.vue`
+    - `AdditiveCard-食品添加剂卡片.vue`
+    - `AdditiveList-食品添加剂列表.vue`
+    - `ArticleCard-资讯卡片.vue`
+    - `ArticleList-文章列表.vue`
+    - `MaterialCard-原料卡片.vue`
+    - `MaterialList-原料列表.vue`
+    - `PrepackagedCard-预包装食品卡片.vue`
+    - `PrepackagedList-预包装食品列表.vue`
+    - `RecipeCard-菜谱卡片-v2.vue`
+    - `RecipeList-菜谱列表.vue`
+
+### 2.3. 静态资源 (Assets)
+
+- **CSS 样式**:
+  - `shihuashishuo-ui/src/assets/main.css` 文件已更新，以适应新版页面的视觉风格。
+- **图片资源**:
+  - 新增 `shihuashishuo-ui/src/assets/images/` 目录，用于存放页面所需的图片。
+
+### 2.4. 参考资料
+
+- `2-参考资料/2-食品添加剂分类.md` 文档内容已更新。
+
+## 3. 结论
+
+此次重构为搜索结果模块带来了更清晰的代码结构和更灵活的组件设计，为未来的功能迭代奠定了坚实的基础。
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/assets/images/breakfast.jpg b/shihuashishuo-ui/src/assets/images/breakfast.jpg
new file mode 100644
index 0000000..16c5bb9
Binary files /dev/null and b/shihuashishuo-ui/src/assets/images/breakfast.jpg differ
diff --git a/shihuashishuo-ui/src/assets/images/desserts.jpg b/shihuashishuo-ui/src/assets/images/desserts.jpg
new file mode 100644
index 0000000..c85cd01
Binary files /dev/null and b/shihuashishuo-ui/src/assets/images/desserts.jpg differ
diff --git a/shihuashishuo-ui/src/assets/images/tomatoes.png b/shihuashishuo-ui/src/assets/images/tomatoes.png
new file mode 100644
index 0000000..9a8d6dd
Binary files /dev/null and b/shihuashishuo-ui/src/assets/images/tomatoes.png differ
diff --git a/shihuashishuo-ui/src/assets/main.css b/shihuashishuo-ui/src/assets/main.css
index 6e6be6d..acab721 100644
--- a/shihuashishuo-ui/src/assets/main.css
+++ b/shihuashishuo-ui/src/assets/main.css
@@ -16,8 +16,8 @@
   height: 100vh; /* Use viewport height to fill the screen */
   
   /* Add a border to clearly visualize the phone screen */
-  border: 1px solid #ccc;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  border: 1px solid #ccc; /* Default border for mobile view */
+  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Default shadow for mobile view */
 
   /* Ensure content inside scrolls if it overflows, not the whole page */
   display: flex;
@@ -35,12 +35,13 @@ a {
 }
 
 /* Media Query for iPad Air and Pro */
-@media (min-width: 768px) and (max-width: 1024px) {
+/* Media Query for tablets and desktops */
+@media (min-width: 429px) {
   #app {
-    max-width: 700px; /* Wider container for tablets */
-    height: 90vh; /* Adjust height to be less than full screen */
-    margin: 5vh auto; /* Center vertically */
-    border-radius: 20px; /* Add rounded corners for a card-like feel */
-    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Enhance shadow */
+    /* On larger screens, behave like a web page, not a phone emulator */
+    max-width: none; /* Allow the app to fill the full screen width */
+    border: none;
+    box-shadow: none;
+    height: 100vh; /* Ensure it still fills the screen vertically */
   }
 }
diff --git a/shihuashishuo-ui/src/components/SearchResult/AdditiveCard.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/AdditiveCard-食品添加剂卡片.vue
similarity index 89%
rename from shihuashishuo-ui/src/components/SearchResult/AdditiveCard.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/AdditiveCard-食品添加剂卡片.vue
index 676d8b2..7cb46d4 100644
--- a/shihuashishuo-ui/src/components/SearchResult/AdditiveCard.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/AdditiveCard-食品添加剂卡片.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="result-item additive-card">
-    <div class="product-image-placeholder"><span>添加剂图片</span></div>
+    <img :src="item.imageUrl" alt="添加剂图片" class="product-image">
     <div class="additive-details">
       <h4 class="additive-title">
         <span class="category-tag">[添加剂]</span>
+              
         <span class="brand"></span>
         <span class="product-name">{{ item.name }}</span>
       </h4>
@@ -45,17 +46,13 @@ defineProps({
   gap: 15px;
 }
 
-.product-image-placeholder {
+.product-image {
   width: 80px;
   height: 80px;
+  object-fit: cover;
   background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #aaa;
-  font-size: 12px;
   flex-shrink: 0;
-  border-radius: 8px;
+  border-radius: 12px;
 }
 
 .additive-details {
@@ -120,12 +117,12 @@ defineProps({
 .safety-level-1 { color: #07C160; font-weight: bold; }
 .safety-level-2 { color: #90ee90; font-weight: bold; }
 .safety-level-3 { color: #1E90FF; font-weight: bold; }
-.safety-level-4 { color: #ffe600; font-weight: bold; }
+.safety-level-4 { color: #f2d025; font-weight: bold; }
 .safety-level-5 { color: #FF7F50; font-weight: bold; }
 .safety-level-6 { color: #ff0000; font-weight: bold; }
 
 @media (max-width: 380px) {
-  .product-image-placeholder {
+  .product-image {
     width: 60px;
     height: 60px;
   }
@@ -147,7 +144,7 @@ defineProps({
   }
 }
 @media (max-width: 380px) {
-  .product-image-placeholder {
+  .product-image {
     width: 60px;
     height: 60px;
   }
diff --git a/shihuashishuo-ui/src/components/SearchResult/AdditiveList.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/AdditiveList-食品添加剂列表.vue
similarity index 84%
rename from shihuashishuo-ui/src/components/SearchResult/AdditiveList.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/AdditiveList-食品添加剂列表.vue
index 9e50e10..bce5933 100644
--- a/shihuashishuo-ui/src/components/SearchResult/AdditiveList.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/AdditiveList-食品添加剂列表.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import AdditiveCard from './AdditiveCard.vue';
+import AdditiveCard from './AdditiveCard-食品添加剂卡片.vue';
 
 const props = defineProps({
   items: {
@@ -29,6 +29,6 @@ const onItemClick = (item: any) => {
 
 <style scoped>
 .list-container {
-  /* Styles for the list container if needed */
+  padding: 0 20px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult/AllResultsList.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/AllResultsList-所有结果列表.vue
similarity index 75%
rename from shihuashishuo-ui/src/components/SearchResult/AllResultsList.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/AllResultsList-所有结果列表.vue
index 6d2a180..9f5c979 100644
--- a/shihuashishuo-ui/src/components/SearchResult/AllResultsList.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/AllResultsList-所有结果列表.vue
@@ -14,10 +14,11 @@
 import { defineAsyncComponent } from 'vue';
 
 // Dynamically import card components for code splitting
-const PrepackagedCard = defineAsyncComponent(() => import('./PrepackagedCard.vue'));
-const AdditiveCard = defineAsyncComponent(() => import('./AdditiveCard.vue'));
-const MaterialCard = defineAsyncComponent(() => import('./MaterialCard.vue'));
-const SummaryCard = defineAsyncComponent(() => import('./SummaryCard.vue'));
+const PrepackagedCard = defineAsyncComponent(() => import('./PrepackagedCard-预包装食品卡片.vue'));
+const AdditiveCard = defineAsyncComponent(() => import('./AdditiveCard-食品添加剂卡片.vue'));
+const MaterialCard = defineAsyncComponent(() => import('./MaterialCard-原料卡片.vue'));
+const RecipeCardV2 = defineAsyncComponent(() => import('./RecipeCard-菜谱卡片-v2.vue'));
+const ArticleCard = defineAsyncComponent(() => import('./ArticleCard-资讯卡片.vue'));
 
 const props = defineProps({
   items: {
@@ -33,8 +34,8 @@ const cardMap: { [key: string]: any } = {
   prepackaged: PrepackagedCard,
   additive: AdditiveCard,
   material: MaterialCard,
-  recipe: SummaryCard,
-  article: SummaryCard,
+  recipe: RecipeCardV2,
+  article: ArticleCard,
 };
 
 const getCardComponent = (category: string) => {
@@ -48,6 +49,6 @@ const onItemClick = (item: any) => {
 
 <style scoped>
 .list-container {
-  /* Styles for the list container if needed */
+  padding: 0 20px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult-搜索结果/ArticleCard-资讯卡片.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/ArticleCard-资讯卡片.vue
new file mode 100644
index 0000000..106dc2f
--- /dev/null
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/ArticleCard-资讯卡片.vue
@@ -0,0 +1,173 @@
+&lt;!-- Force reload to fix display issue --&gt;
+<template>
+  <div class="result-item article-card">
+    <div class="image-container">
+      <img :src="item.imageUrl" alt="资讯媒体" class="product-image">
+      <div v-if="item.mediaType === 'video'" class="video-icon-overlay">
+        <span class="video-icon"></span>
+      </div>
+    </div>
+    <div class="article-details">
+      <h4 class="article-title">
+        <span class="category-tag">[资讯]</span>
+        <span class="product-name">{{ item.title }}</span>
+      </h4>
+      <p class="article-summary">{{ item.summary }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+</script>
+
+<style scoped>
+.result-item {
+  padding: 15px 0;
+  border-bottom: 1px solid #e5e7eb;
+  cursor: pointer;
+}
+
+.article-card {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.image-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+}
+
+.product-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-color: #f0f0f0;
+  border-radius: 12px;
+}
+
+.video-icon-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+.video-icon-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+.video-icon {
+  width: 32px;
+  height: 32px;
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 50%;
+  position: relative;
+}
+
+.video-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin-left: 1px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 11px solid white;
+}
+
+.article-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-grow: 1;
+}
+
+.article-title {
+  font-size: 14px !important;
+  font-weight: bold;
+  color: #333;
+  margin: 0;
+}
+
+.article-title .category-tag {
+  font-weight: normal;
+  color: #9ca3af;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.article-summary {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.video-icon {
+  width: 32px;
+  height: 32px;
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 50%;
+  position: relative;
+}
+
+.video-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin-left: 1px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 11px solid white;
+}
+
+@media (max-width: 380px) {
+  .image-container {
+    width: 60px;
+    height: 60px;
+  }
+  .article-card {
+    gap: 12px;
+  }
+  .article-details {
+    gap: 5px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult/RecipeList.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/ArticleList-文章列表.vue
similarity index 81%
rename from shihuashishuo-ui/src/components/SearchResult/RecipeList.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/ArticleList-文章列表.vue
index cb7f961..e75f27c 100644
--- a/shihuashishuo-ui/src/components/SearchResult/RecipeList.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/ArticleList-文章列表.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="list-container">
-    <SummaryCard
+    <ArticleCard
       v-for="item in items"
       :key="item.id"
       :item="item"
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import SummaryCard from './SummaryCard.vue';
+import ArticleCard from './ArticleCard-资讯卡片.vue';
 
 const props = defineProps({
   items: {
@@ -29,6 +29,6 @@ const onItemClick = (item: any) => {
 
 <style scoped>
 .list-container {
-  /* Styles for the list container if needed */
+  padding: 0 20px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult/MaterialCard.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/MaterialCard-原料卡片.vue
similarity index 67%
rename from shihuashishuo-ui/src/components/SearchResult/MaterialCard.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/MaterialCard-原料卡片.vue
index ea3c4ea..e5353b7 100644
--- a/shihuashishuo-ui/src/components/SearchResult/MaterialCard.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/MaterialCard-原料卡片.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="result-item material-card">
-    <div class="product-image-placeholder"><span>食材图片</span></div>
+    <img :src="item.imageUrl" alt="食材图片" class="product-image">
     <div class="material-details">
       <h4 class="material-title">
         <span class="category-tag">[食材]</span>
@@ -11,7 +11,7 @@
         <span>分类: {{ item.family }}</span>
       </div>
       <div class="product-info-row nutrient-tags-container">
-        <span v-for="tag in item.nutrientTags" :key="tag.text" class="nutrient-tag" :class="tag.class">{{ tag.text }}</span>
+        <span v-for="tag in item.nutrientTags" :key="tag.text" class="nutrient-tag" :style="getTagStyle(tag.text)">{{ tag.text }}</span>
       </div>
     </div>
   </div>
@@ -25,6 +25,26 @@ defineProps({
     default: () => ({ nutrientTags: [] })
   }
 });
+
+const colorPalette = [
+  { backgroundColor: '#eefbf3', color: '#41ae7c' }, // Soft Green
+  { backgroundColor: '#eef6fc', color: '#5dade2' }, // Soft Blue
+  { backgroundColor: '#fdeeee', color: '#e67e7e' }, // Soft Red
+  { backgroundColor: '#fef8e9', color: '#f3c567' }, // Soft Amber
+  { backgroundColor: '#f4f4f4', color: '#a6a6a6' }, // Soft Stone
+  { backgroundColor: '#fdeef5', color: '#e58dbb' }, // Soft Pink
+  { backgroundColor: '#eaf8fe', color: '#6ecce9' }, // Soft Sky
+];
+
+const getTagStyle = (tagText: string) => {
+  if (!tagText) return colorPalette[0];
+  let hash = 0;
+  for (let i = 0; i < tagText.length; i++) {
+    hash += tagText.charCodeAt(i);
+  }
+  const index = hash % colorPalette.length;
+  return colorPalette[index];
+};
 </script>
 
 <style scoped>
@@ -44,17 +64,13 @@ defineProps({
   gap: 15px;
 }
 
-.product-image-placeholder {
+.product-image {
   width: 80px;
   height: 80px;
+  object-fit: cover;
   background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #aaa;
-  font-size: 12px;
   flex-shrink: 0;
-  border-radius: 8px;
+  border-radius: 12px;
 }
 
 .material-details {
@@ -107,44 +123,8 @@ defineProps({
   white-space: nowrap;
 }
 
-.nutrient-tag.tomato {
-  background-color: #fef2f2;
-  color: #b91c1c;
-}
-
-.nutrient-tag.antioxidant {
-  background-color: #eff6ff;
-  color: #1d4ed8;
-}
-
-.nutrient-tag.umami {
-  background-color: #f5f5f4;
-  color: #57534e;
-}
-
-.nutrient-tag.high-sodium {
-  background-color: #fffbeb;
 @media (max-width: 380px) {
-  .product-image-placeholder {
-    width: 60px;
-    height: 60px;
-  }
-  .material-card {
-    gap: 12px;
-  }
-  .material-details {
-    gap: 5px;
-  }
-  .product-info-row {
-    font-size: 11px;
-    gap: 15px;
-  }
-}
-  color: #b45309;
-}
-
-@media (max-width: 380px) {
-  .product-image-placeholder {
+  .product-image {
     width: 60px;
     height: 60px;
   }
diff --git a/shihuashishuo-ui/src/components/SearchResult/MaterialList.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/MaterialList-原料列表.vue
similarity index 84%
rename from shihuashishuo-ui/src/components/SearchResult/MaterialList.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/MaterialList-原料列表.vue
index b5dad83..ba45dd1 100644
--- a/shihuashishuo-ui/src/components/SearchResult/MaterialList.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/MaterialList-原料列表.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import MaterialCard from './MaterialCard.vue';
+import MaterialCard from './MaterialCard-原料卡片.vue';
 
 const props = defineProps({
   items: {
@@ -29,6 +29,6 @@ const onItemClick = (item: any) => {
 
 <style scoped>
 .list-container {
-  /* Styles for the list container if needed */
+  padding: 0 20px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult/PrepackagedCard.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/PrepackagedCard-预包装食品卡片.vue
similarity index 80%
rename from shihuashishuo-ui/src/components/SearchResult/PrepackagedCard.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/PrepackagedCard-预包装食品卡片.vue
index 11e8bbc..18810ea 100644
--- a/shihuashishuo-ui/src/components/SearchResult/PrepackagedCard.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/PrepackagedCard-预包装食品卡片.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="result-item product-card">
-    <div class="product-image-placeholder"><span>商品图片</span></div>
+    <img :src="item.imageUrl" alt="商品图片" class="product-image">
     <div class="product-details">
       <h4 class="product-title">
-        <span class="category-tag">[{{ item.category || '预包装' }}]</span>
+        <span class="category-tag">[预包装]</span>
         <span class="brand">{{ item.brand }}</span>
         <span class="product-name">{{ item.name }}</span>
       </h4>
@@ -50,17 +50,13 @@ defineProps({
   gap: 15px;
 }
 
-.product-image-placeholder {
+.product-image {
   width: 80px;
   height: 80px;
+  object-fit: cover;
   background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #aaa;
-  font-size: 12px;
   flex-shrink: 0;
-  border-radius: 8px;
+  border-radius: 12px;
 }
 
 .product-details {
@@ -115,7 +111,7 @@ defineProps({
   font-size: 11px;
   font-weight: bold;
   white-space: nowrap;
-  margin-left: auto;
+  /* margin-left: auto; */ /* Removed for clean left alignment */
 }
 
 .product-info-row .count {
@@ -134,31 +130,11 @@ defineProps({
 .safety-level-1 { color: #07C160; font-weight: bold; }
 .safety-level-2 { color: #90ee90; font-weight: bold; }
 .safety-level-3 { color: #1E90FF; font-weight: bold; }
-.prepackaged-safety-4, .safety-level-4 { color: #FF7F50; font-weight: bold; }
+.prepackaged-safety-4, .safety-level-4 { color: #f2d025; font-weight: bold; }
 .prepackaged-safety-5, .safety-level-5 { color: #ff0000; font-weight: bold; }
 
 @media (max-width: 380px) {
-  .product-image-placeholder {
-    width: 60px;
-    height: 60px;
-  }
-  .product-card {
-    gap: 12px;
-  }
-  .product-details {
-    gap: 5px;
-  }
-  .product-info-row,
-  .product-info-row.risk-info {
-    font-size: 11px;
-    gap: 15px;
-  }
-  .calories {
-    font-size: 10px;
-  }
-}
-@media (max-width: 380px) {
-  .product-image-placeholder {
+  .product-image {
     width: 60px;
     height: 60px;
   }
diff --git a/shihuashishuo-ui/src/components/SearchResult/PrepackagedList.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/PrepackagedList-预包装食品列表.vue
similarity index 83%
rename from shihuashishuo-ui/src/components/SearchResult/PrepackagedList.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/PrepackagedList-预包装食品列表.vue
index d4ef305..7e74031 100644
--- a/shihuashishuo-ui/src/components/SearchResult/PrepackagedList.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/PrepackagedList-预包装食品列表.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import PrepackagedCard from './PrepackagedCard.vue';
+import PrepackagedCard from './PrepackagedCard-预包装食品卡片.vue';
 
 const props = defineProps({
   items: {
@@ -29,6 +29,6 @@ const onItemClick = (item: any) => {
 
 <style scoped>
 .list-container {
-  /* Styles for the list container if needed */
+  padding: 0 20px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult-搜索结果/RecipeCard-菜谱卡片-v2.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/RecipeCard-菜谱卡片-v2.vue
new file mode 100644
index 0000000..9c7af2f
--- /dev/null
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/RecipeCard-菜谱卡片-v2.vue
@@ -0,0 +1,139 @@
+&lt;!-- Force reload to fix display issue --&gt;
+<template>
+  <div class="result-item recipe-card">
+    <div class="image-container">
+      <img :src="item.imageUrl" alt="食谱媒体" class="product-image">
+      <div v-if="item.mediaType === 'video'" class="video-icon-overlay">
+        <span class="video-icon"></span>
+      </div>
+    </div>
+    <div class="recipe-details">
+      <h4 class="recipe-title">
+        <span class="category-tag">[食谱]</span>
+        <span class="product-name">{{ item.title }}</span>
+      </h4>
+      <p class="recipe-summary">{{ item.summary }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+</script>
+
+<style scoped>
+.result-item {
+  padding: 15px 0;
+  border-bottom: 1px solid #e5e7eb;
+  cursor: pointer;
+}
+
+.recipe-card {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.image-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+}
+
+.product-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background-color: #f0f0f0;
+  border-radius: 12px;
+}
+
+.video-icon-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+.video-icon {
+  width: 32px;
+  height: 32px;
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 50%;
+  position: relative;
+}
+
+.video-icon::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin-left: 1px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 11px solid white;
+}
+
+.recipe-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-grow: 1;
+}
+
+.recipe-title {
+  font-size: 14px !important;
+  font-weight: bold;
+  color: #333;
+  margin: 0;
+}
+
+.recipe-title .category-tag {
+  font-weight: normal;
+  color: #9ca3af;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.recipe-summary {
+  font-size: 12px;
+  color: #666;
+  margin: 0;
+  line-height: 1.5;
+  /* Clamp the text to 2 lines */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 380px) {
+  .image-container {
+    width: 60px;
+    height: 60px;
+  }
+  .recipe-card {
+    gap: 12px;
+  }
+  .recipe-details {
+    gap: 5px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult/ArticleList.vue b/shihuashishuo-ui/src/components/SearchResult-搜索结果/RecipeList-菜谱列表.vue
similarity index 81%
rename from shihuashishuo-ui/src/components/SearchResult/ArticleList.vue
rename to shihuashishuo-ui/src/components/SearchResult-搜索结果/RecipeList-菜谱列表.vue
index cb7f961..f3d9eba 100644
--- a/shihuashishuo-ui/src/components/SearchResult/ArticleList.vue
+++ b/shihuashishuo-ui/src/components/SearchResult-搜索结果/RecipeList-菜谱列表.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="list-container">
-    <SummaryCard
+    <RecipeCardV2
       v-for="item in items"
       :key="item.id"
       :item="item"
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import SummaryCard from './SummaryCard.vue';
+import RecipeCardV2 from './RecipeCard-菜谱卡片-v2.vue';
 
 const props = defineProps({
   items: {
@@ -29,6 +29,6 @@ const onItemClick = (item: any) => {
 
 <style scoped>
 .list-container {
-  /* Styles for the list container if needed */
+  padding: 0 20px;
 }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/components/SearchResult/SummaryCard.vue b/shihuashishuo-ui/src/components/SearchResult/SummaryCard.vue
deleted file mode 100644
index 4e898b9..0000000
--- a/shihuashishuo-ui/src/components/SearchResult/SummaryCard.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="result-item">
-    <h4>[{{ item.category }}] {{ item.title }}</h4>
-    <p class="article-summary">{{ item.summary }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-    default: () => ({})
-  }
-});
-</script>
-
-<style scoped>
-.result-item {
-  padding: 15px 0;
-  border-bottom: 1px solid #e5e7eb;
-  cursor: pointer;
-}
-.result-item h4 {
-  font-size: 16px;
-  margin-bottom: 5px;
-}
-.result-item p {
-  font-size: 14px;
-  color: #6b7280;
-}
-.article-summary {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/router/index.ts b/shihuashishuo-ui/src/router/index.ts
index 1b5a89b..6ac520b 100644
--- a/shihuashishuo-ui/src/router/index.ts
+++ b/shihuashishuo-ui/src/router/index.ts
@@ -94,7 +94,7 @@ const router = createRouter({
     {
       path: '/search-result',
       name: 'search-result',
-      component: () => import('../views/核心体验页/SearchResultView-搜索结果页.vue'),
+      component: () => import('../views/核心体验页/SearchResultView-搜索结果页3.0.vue'),
     },
     {
       path: '/result/:id',
diff --git a/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页-2.0.backup.vue b/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页-2.0.backup.vue
deleted file mode 100644
index b16615b..0000000
--- a/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页-2.0.backup.vue
+++ /dev/null
@@ -1,909 +0,0 @@
-<template>
-  <div class="search-result-view">
-    <header class="top-bar">
-      <button class="back-btn" @click="goBack">&lt;</button>
-      <div class="search-bar-container">
-        <input type="text" v-model="searchQuery" @keyup.enter="performSearch" placeholder="食品 /成分 /食物 /菜谱 /问题" />
-        <div class="separator"></div>
-        <div class="search-button" @click="performSearch">搜索</div>
-      </div>
-    </header>
-
-    <div class="tabs">
-      <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        :class="{ active: activeTab === tab.id }"
-        @click="activeTab = tab.id"
-      >
-        {{ tab.name }}
-      </button>
-    </div>
-
-    <div class="filters-bar">
-      <button class="filter-toggle-btn" @click="openFilterPanel">
-        <span>{{ activeFilterName }}</span>
-        <span class="arrow"></span>
-      </button>
-    </div>
-
-    <!-- Filter Panel Overlay -->
-    <div v-if="isPanelOpen" class="filter-panel-overlay" @click.self="cancelFilters">
-      <div class="filter-panel">
-        <div class="filter-group">
-          <h4>排序方式</h4>
-          <div class="tags">
-            <button
-              v-for="filter in filters"
-              :key="filter.id"
-              :class="{ active: tempActiveFilter === filter.id }"
-              @click="tempActiveFilter = filter.id"
-            >
-              {{ filter.name }}
-            </button>
-          </div>
-        </div>
-
-        <div class="filter-group">
-          <h4>顺序</h4>
-          <div class="tags">
-            <button :class="{ active: tempSortOrder === 'desc' }" @click="tempSortOrder = 'desc'">从高到低</button>
-            <button :class="{ active: tempSortOrder === 'asc' }" @click="tempSortOrder = 'asc'">从低到高</button>
-          </div>
-        </div>
-
-        <div class="panel-actions">
-          <button class="btn-cancel" @click="cancelFilters">取消</button>
-          <button class="btn-confirm" @click="confirmFilters">确认</button>
-        </div>
-      </div>
-    </div>
-
-    <main class="results-list">
-      <div v-if="activeTab === 'additive'" class="safety-level-description">
-        安全等级划分参照 JECFA：‌A1 > A2 > B1 > B2 > C2 > C1‌‌。
-      </div>
-      <!-- Prepackaged Food Results -->
-      <!-- Example for Level 1 -->
-      <div v-if="activeTab === 'all' || activeTab === 'prepackaged'" class="result-item product-card">
-        <div class="product-image-placeholder"><span>商品图片</span></div>
-        <div class="product-details">
-          <h4 class="product-title">
-            <span class="category-tag">[预包装]</span>
-            <span class="brand">某品牌</span>
-            <span class="product-name">有机纯牛奶</span>
-          </h4>
-          <div class="product-info-row">
-            <span>安全评级 <span class="safety-level-1">1 级 (最安全)</span></span>
-            <span>营养评级 <span class="score-high">高</span></span>
-          </div>
-          <div class="product-info-row risk-info">
-            <span>添加剂 <span class="count additive-count">0</span></span>
-            <span>高风险成分 <span class="count risk-count">0</span></span>
-            <span class="calories">热量 270千卡/100g</span>
-          </div>
-        </div>
-      </div>
-      <!-- Example for Level 2 -->
-      <div v-if="activeTab === 'all' || activeTab === 'prepackaged'" class="result-item product-card">
-        <div class="product-image-placeholder"><span>商品图片</span></div>
-        <div class="product-details">
-          <h4 class="product-title">
-            <span class="category-tag">[预包装]</span>
-            <span class="brand">某品牌</span>
-            <span class="product-name">全麦面包</span>
-          </h4>
-          <div class="product-info-row">
-            <span>安全评级 <span class="safety-level-2">2 级 (较安全)</span></span>
-            <span>营养评级 <span class="score-mid">中</span></span>
-          </div>
-          <div class="product-info-row risk-info">
-            <span>添加剂 <span class="count additive-count">2</span></span>
-            <span>高风险成分 <span class="count risk-count">0</span></span>
-            <span class="calories">热量 350千卡/100g</span>
-          </div>
-        </div>
-      </div>
-      <!-- Example for Level 3 -->
-      <div v-if="activeTab === 'all' || activeTab === 'prepackaged'" class="result-item product-card">
-        <div class="product-image-placeholder"><span>商品图片</span></div>
-        <div class="product-details">
-          <h4 class="product-title">
-            <span class="category-tag">[预包装]</span>
-            <span class="brand">某品牌</span>
-            <span class="product-name">番茄酱</span>
-          </h4>
-          <div class="product-info-row">
-            <span>安全评级 <span class="safety-level-3">3 级 (一般安全)</span></span>
-            <span>营养评级 <span class="score-mid">中</span></span>
-          </div>
-          <div class="product-info-row risk-info">
-            <span>添加剂 <span class="count additive-count">5</span></span>
-            <span>高风险成分 <span class="count risk-count">1</span></span>
-            <span class="calories">热量 420千卡/100g</span>
-          </div>
-        </div>
-      </div>
-      <!-- Example for Level 4 -->
-      <div v-if="activeTab === 'all' || activeTab === 'prepackaged'" class="result-item product-card">
-        <div class="product-image-placeholder"><span>商品图片</span></div>
-        <div class="product-details">
-          <h4 class="product-title">
-            <span class="category-tag">[预包装]</span>
-            <span class="brand">子弟</span>
-            <span class="product-name">薯片 (蜂蜜黄油味)</span>
-          </h4>
-          <div class="product-info-row">
-            <span>安全评级 <span class="prepackaged-safety-4">4 级 (需警惕)</span></span>
-            <span>营养评级 <span class="score-low">低</span></span>
-          </div>
-          <div class="product-info-row risk-info">
-            <span>添加剂 <span class="count additive-count">8</span></span>
-            <span>高风险成分 <span class="count risk-count">2</span></span>
-            <span class="calories">热量 519千卡/100g</span>
-          </div>
-        </div>
-      </div>
-      <!-- Example for Level 5 -->
-      <div v-if="activeTab === 'all' || activeTab === 'prepackaged'" class="result-item product-card">
-        <div class="product-image-placeholder"><span>商品图片</span></div>
-        <div class="product-details">
-          <h4 class="product-title">
-            <span class="category-tag">[预包装]</span>
-            <span class="brand">某品牌</span>
-            <span class="product-name">辣条</span>
-          </h4>
-          <div class="product-info-row">
-            <span>安全评级 <span class="prepackaged-safety-5">5 级 (风险较高)</span></span>
-            <span>营养评级 <span class="score-low">低</span></span>
-          </div>
-          <div class="product-info-row risk-info">
-            <span>添加剂 <span class="count additive-count">15</span></span>
-            <span>高风险成分 <span class="count risk-count">4</span></span>
-            <span class="calories">热量 600千卡/100g</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Additive Results - New Card Design -->
-      <!-- Additive Results - V3 Preview with 6 Levels -->
-      <div v-if="activeTab === 'all' || activeTab === 'additive'" class="result-item additive-card">
-        <div class="product-image-placeholder"><span>添加剂图片</span></div>
-        <div class="additive-details">
-          <h4 class="additive-title">
-            <span class="category-tag">[添加剂]</span>
-            <span class="brand"></span>
-            <span class="product-name">维生素 C (抗坏血酸)</span>
-          </h4>
-          <div class="additive-info-row">
-            <span>安全等级: <span class="safety-level-1">A1 最高安全等级</span></span>
-            <span class="function-tag">抗氧化剂</span>
-          </div>
-          <div class="additive-info-row">
-            <span class="health-risk-warning">一般认为安全，但极高剂量可能导致肠胃不适。</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'additive'" class="result-item additive-card">
-        <div class="product-image-placeholder"><span>添加剂图片</span></div>
-        <div class="additive-details">
-          <h4 class="additive-title">
-            <span class="category-tag">[添加剂]</span>
-            <span class="brand"></span>
-            <span class="product-name">苯甲酸钠</span>
-          </h4>
-          <div class="additive-info-row">
-            <span>安全等级: <span class="safety-level-2">A2 较安全</span></span>
-            <span class="function-tag">防腐剂</span>
-          </div>
-          <div class="additive-info-row">
-            <span class="health-risk-warning">在特定条件下可能与维生素C反应生成微量苯，长期过量摄入有潜在风险。</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'additive'" class="result-item additive-card">
-        <div class="product-image-placeholder"><span>添加剂图片</span></div>
-        <div class="additive-details">
-          <h4 class="additive-title">
-            <span class="category-tag">[添加剂]</span>
-            <span class="brand"></span>
-            <span class="product-name">诱惑红</span>
-          </h4>
-          <div class="additive-info-row">
-            <span>安全等级: <span class="safety-level-3">B1 需警惕</span></span>
-            <span class="function-tag">色素</span>
-          </div>
-          <div class="additive-info-row">
-            <span class="health-risk-warning">可能引起儿童多动症等过敏反应，在多国被限制或禁止使用。</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'additive'" class="result-item additive-card">
-        <div class="product-image-placeholder"><span>添加剂图片</span></div>
-        <div class="additive-details">
-          <h4 class="additive-title">
-            <span class="category-tag">[添加剂]</span>
-            <span class="brand"></span>
-            <span class="product-name">糖醇类甜味剂</span>
-          </h4>
-          <div class="additive-info-row">
-            <span>安全等级: <span class="safety-level-4">B2 风险未知</span></span>
-            <span class="function-tag">新型甜味剂</span>
-          </div>
-          <div class="additive-info-row">
-            <span class="health-risk-warning">长期摄入对健康的影响尚不完全明确，部分人群可能出现肠胃不适。</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'additive'" class="result-item additive-card">
-        <div class="product-image-placeholder"><span>添加剂图片</span></div>
-        <div class="additive-details">
-          <h4 class="additive-title">
-            <span class="category-tag">[添加剂]</span>
-            <span class="brand"></span>
-            <span class="product-name">黄原胶 (特定场景)</span>
-          </h4>
-          <div class="additive-info-row">
-            <span>安全等级: <span class="safety-level-5">C2 严格限制</span></span>
-            <span class="function-tag">增稠剂</span>
-          </div>
-          <div class="additive-info-row">
-            <span class="health-risk-warning">仅限在特定食品（如婴幼儿食品）中严格限量使用。</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'additive'" class="result-item additive-card">
-        <div class="product-image-placeholder"><span>添加剂图片</span></div>
-        <div class="additive-details">
-          <h4 class="additive-title">
-            <span class="category-tag">[添加剂]</span>
-            <span class="brand"></span>
-            <span class="product-name">苏丹红</span>
-          </h4>
-          <div class="additive-info-row">
-            <span>安全等级: <span class="safety-level-6">C1 禁止使用</span></span>
-            <span class="function-tag">工业染料</span>
-          </div>
-          <div class="additive-info-row">
-            <span class="health-risk-warning">具有潜在致癌性，严禁在食品中添加。</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Food Material Results - New Card Design -->
-      <div v-if="activeTab === 'all' || activeTab === 'material'" class="result-item material-card">
-        <div class="product-image-placeholder"><span>食材图片</span></div>
-        <div class="material-details">
-          <h4 class="material-title">
-            <span class="category-tag">[食材]</span>
-            <span class="brand"></span>
-            <span class="product-name">西兰花</span>
-          </h4>
-          <div class="product-info-row">
-            <span>分类: 十字花科蔬菜</span>
-          </div>
-          <div class="product-info-row nutrient-tags-container">
-            <span class="nutrient-tag">富含维生素C</span>
-            <span class="nutrient-tag">高膳食纤维</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'material'" class="result-item material-card">
-        <div class="product-image-placeholder"><span>食材图片</span></div>
-        <div class="material-details">
-          <h4 class="material-title">
-            <span class="category-tag">[食材]</span>
-            <span class="brand"></span>
-            <span class="product-name">番茄</span>
-          </h4>
-          <div class="product-info-row">
-            <span>分类: 茄科植物</span>
-          </div>
-          <div class="product-info-row nutrient-tags-container">
-            <span class="nutrient-tag tomato">富含番茄红素</span>
-            <span class="nutrient-tag antioxidant">抗氧化</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="activeTab === 'all' || activeTab === 'material'" class="result-item material-card">
-        <div class="product-image-placeholder"><span>食材图片</span></div>
-        <div class="material-details">
-          <h4 class="material-title">
-            <span class="category-tag">[食材]</span>
-            <span class="brand"></span>
-            <span class="product-name">酱油</span>
-          </h4>
-          <div class="product-info-row">
-            <span>分类: 传统酿造调味品</span>
-          </div>
-          <div class="product-info-row nutrient-tags-container">
-            <span class="nutrient-tag umami">提鲜</span>
-            <span class="nutrient-tag high-sodium">高钠</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Recipe Results -->
-      <div v-if="activeTab === 'all' || activeTab === 'recipe'" class="result-item">
-        <h4>[食谱] 自制健康牛奶小面包</h4>
-        <p class="article-summary">一个简单易学的食谱，使用最少的添加剂，为家人制作美味又健康的面包。</p>
-      </div>
-
-      <!-- Article Results (Renamed to "资讯") -->
-      <div v-if="activeTab === 'all' || activeTab === 'article'" class="result-item">
-        <h4>牛奶过敏的宝宝应该怎么办？</h4>
-        <p class="article-summary">本文将详细介绍牛奶过敏的症状、原因以及应对方法...</p>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-
-const route = useRoute();
-const router = useRouter();
-const searchQuery = ref('');
-const activeTab = ref('all');
-
-// Filter and Sort State
-const filters = ref([
-  { id: 'comprehensive', name: '综合' },
-  { id: 'safety', name: '安全评级' },
-  { id: 'nutrition', name: '营养评级' },
-  { id: 'latest', name: '最新发布' },
-  { id: 'protein', name: '蛋白质' },
-  { id: 'fat', name: '脂肪' },
-  { id: 'carbs', name: '碳水化合物' },
-]);
-const activeFilter = ref('comprehensive');
-const sortOrder = ref('desc'); // 'desc' or 'asc'
-
-// Panel State
-const isPanelOpen = ref(false);
-const tempActiveFilter = ref(activeFilter.value);
-const tempSortOrder = ref(sortOrder.value);
-
-const activeFilterName = computed(() => {
-  const found = filters.value.find(f => f.id === activeFilter.value);
-  return found ? found.name : '综合';
-});
-
-const openFilterPanel = () => {
-  tempActiveFilter.value = activeFilter.value;
-  tempSortOrder.value = sortOrder.value;
-  isPanelOpen.value = true;
-};
-
-const cancelFilters = () => {
-  isPanelOpen.value = false;
-};
-
-const confirmFilters = () => {
-  activeFilter.value = tempActiveFilter.value;
-  sortOrder.value = tempSortOrder.value;
-  isPanelOpen.value = false;
-  // Here you would typically re-fetch data with new filters
-};
-
-const tabs = ref([
-  { id: 'all', name: '全部' },
-  { id: 'prepackaged', name: '预包装' },
-  { id: 'additive', name: '添加剂' },
-  { id: 'material', name: '食材' },
-  { id: 'recipe', name: '食谱' },
-  { id: 'article', name: '资讯' },
-]);
-
-onMounted(() => {
-  searchQuery.value = (route.query.q as string) || '';
-});
-
-const goBack = () => {
-  router.push({ name: 'home' });
-};
-
-const performSearch = () => {
-  // In a real app, this would re-trigger the search
-  console.log('Searching for:', searchQuery.value);
-};
-
-const goToResult = (id: string) => {
-  router.push({ name: 'result', params: { id } });
-};
-</script>
-
-<style scoped>
-.search-result-view {
-  /* The padding is no longer needed here as the results-list is positioned absolutely. */
-}
-.top-bar {
-  display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: #fff;
-  border-bottom: 1px solid #e5e7eb;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  max-width: 428px;
-  margin: 0 auto;
-  z-index: 10;
-}
-.back-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  font-weight: bold;
-  cursor: pointer;
-  padding-right: 10px;
-  color: #333;
-}
-.search-bar-container {
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  border-radius: 25px;
-  padding: 8px 15px;
-  border: 1px solid #07C160;
-  flex-grow: 1;
-}
-
-.search-bar-container input {
-  border: none;
-  outline: none;
-  background: transparent;
-  flex-grow: 1;
-  width: 0;
-  font-size: 14px;
-  color: #333;
-}
-
-.separator {
-  width: 1px;
-  height: 16px;
-  background-color: #e0e0e0;
-  margin: 0 12px;
-}
-
-.search-button {
-  color: #07C160;
-  font-weight: bold;
-  font-size: 15px;
-  cursor: pointer;
-}
-
-.tabs {
-  display: flex;
-  justify-content: space-around;
-  padding: 10px 0;
-  background-color: #fff;
-  border-bottom: 1px solid #e5e7eb;
-  position: fixed;
-  top: 57px; /* Position below top-bar */
-  left: 0;
-  right: 0;
-  max-width: 428px;
-  margin: 0 auto;
-  z-index: 9;
-}
-.tabs button {
-  background: none;
-  border: none;
-  font-size: 16px;
-  color: #6b7280;
-  cursor: pointer;
-  padding-bottom: 5px;
-  border-bottom: 2px solid transparent;
-}
-.tabs button.active {
-  color: #22c55e;
-  border-bottom-color: #22c55e;
-}
-
-.filters-bar {
-  display: flex;
-  padding: 8px 15px;
-  background-color: #fff;
-  border-bottom: 1px solid #e5e7eb;
-  position: fixed;
-  top: 101px;
-  left: 0;
-  right: 0;
-  max-width: 428px;
-  margin: 0 auto;
-  z-index: 8;
-}
-
-.filter-toggle-btn {
-  background: none;
-  border: none;
-  font-size: 14px;
-  color: #333;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.filter-toggle-btn .arrow {
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #666;
-  margin-left: 8px;
-}
-
-.filter-panel-overlay {
-  position: fixed;
-  top: 142px; /* Position below the header bars */
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 99;
-}
-
-.filter-panel {
-  background-color: #fff;
-  padding: 20px 15px;
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
-}
-
-.filter-group {
-  margin-bottom: 25px;
-}
-
-.filter-group h4 {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 15px;
-  text-align: left;
-}
-
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.tags button {
-  background-color: #f7f7f7;
-  border: 1px solid #f7f7f7;
-  color: #333;
-  padding: 6px 14px;
-  border-radius: 16px;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.tags button.active {
-  background-color: #e8f8f1;
-  border-color: #07c160;
-  color: #07c160;
-}
-
-.panel-actions {
-  display: flex;
-  gap: 15px;
-  margin-top: 10px;
-  padding-top: 20px;
-  border-top: 1px solid #f0f0f0;
-}
-
-.panel-actions button {
-  flex-grow: 1;
-  padding: 12px;
-  border-radius: 25px;
-  font-size: 16px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.btn-cancel {
-  background-color: #f7f7f7;
-  border: 1px solid #f7f7f7;
-  color: #333;
-}
-
-.btn-confirm {
-  background-color: #07c160;
-  border: 1px solid #07c160;
-  color: #fff;
-}
-
-.results-list {
-  position: absolute;
-  top: 142px; /* Position right below the filters-bar */
-  bottom: 0;
-  left: 0;
-  right: 0;
-  max-width: 428px; /* Ensures consistency with the fixed headers */
-  margin: 0 auto;
-  overflow-y: auto; /* Enables vertical scrolling for the list */
-  padding: 0 20px;
-}
-.result-item {
-  padding: 15px 0;
-  border-bottom: 1px solid #e5e7eb;
-  cursor: pointer;
-}
-.result-item h4 {
-  font-size: 16px;
-  margin-bottom: 5px;
-}
-.result-item p {
-  font-size: 14px;
-  color: #6b7280;
-}
-.article-summary {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.score-high { color: #22c55e; }
-.score-mid { color: orange; }
-.score-low { color: #ef4444; }
-
-.product-card {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.product-image-placeholder {
-  width: 80px;
-  height: 80px;
-  background-color: #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #aaa;
-  font-size: 12px;
-  flex-shrink: 0;
-  border-radius: 8px;
-}
-
-.product-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex-grow: 1;
-}
-
-.result-item h4.product-title {
-  font-size: 14px !important; /* Force size with high specificity and !important */
-  font-weight: bold;
-  color: #333;
-  margin: 0;
-}
-
-.product-info-row {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 12px;
-  color: #666;
-  gap: 20px;
-}
-
-.product-info-row.risk-info {
-  justify-content: flex-start; /* Align items to the start */
-  gap: 20px; /* Increase gap for risk info */
-}
-
-.product-info-row span {
-  white-space: nowrap;
-}
-
-.product-title .category-tag,
-.additive-title .category-tag,
-.material-title .category-tag {
-  font-weight: normal;
-  color: #9ca3af; /* Gray-400 */
-  display: inline-block;
-  margin-right: 8px; /* Reset margin slightly as min-width handles spacing */
-}
-
-.product-title .brand {
-  font-weight: normal;
-  color: #666;
-}
-
-.calories {
-  background-color: #f3f4f6; /* Gray-100 */
-  color: #4b5563; /* Gray-600 */
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: bold;
-  white-space: nowrap;
-}
-
-.product-info-row .count {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.additive-count {
-  color: #FF7F50; /* Yellow for additives */
-}
-
-.risk-count {
-  color: #ff0000; /* Red for high-risk */
-}
-
-/* 6-Level Additive Safety Rating Styles */
-.safety-level-1 { color: #07C160; font-weight: bold; }   /* A1: 最安全 - 微信绿 */
-.safety-level-2 { color: #90ee90; font-weight: bold; }   /* A2: 较安全 - 浅绿色 */
-.safety-level-3 { color: #1E90FF; font-weight: bold; }   /* B1: 需警惕 - 蓝色 */
-.safety-level-4 { color: #ffe600; font-weight: bold; }   /* B2: 风险未知 - 金色 */
-.safety-level-5 { color: #FF7F50; font-weight: bold; }   /* C2: 严格限制 - 橙色 */
-.safety-level-6 { color: #ff0000; font-weight: bold; }   /* C1: 禁止使用 - 深红色 */
-
-/* Prepackaged Food Specific Safety Rating Styles */
-.prepackaged-safety-4 { color: #FF7F50; font-weight: bold; }
-.prepackaged-safety-5 { color: #ff0000; font-weight: bold; }
-
-/* Material Card Specific Styles */
-.material-card {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.material-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex-grow: 1;
-}
-
-.result-item h4.material-title {
-  font-size: 14px !important;
-  font-weight: bold;
-  color: #333;
-  margin: 0;
-}
-
-/* .material-family and .material-nutrients styles are no longer needed in this form */
-/* They are replaced by reusing .product-info-row and the specific .nutrient-tag styles */
-
-.nutrient-tag {
-  background-color: #f0fdf4; /* Green-50 */
-  color: #15803d;      /* Green-700 */
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: bold;
-  white-space: nowrap;
-}
-
-.nutrient-tags-container {
-  gap: 8px;
-}
-
-
-/* Additive Card Specific Styles V2 */
-.additive-card {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.additive-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex-grow: 1;
-}
-
-.result-item h4.additive-title {
-  font-size: 14px !important;
-  font-weight: bold;
-  color: #333;
-  margin: 0;
-}
-
-.additive-title .brand,
-.material-title .brand {
-  /* This is a placeholder to match the structure of product-title */
-  /* It can be empty, but its presence helps in aligning items if needed */
-  font-weight: normal;
-  color: #666;
-  display: inline-block;
-  min-width: 0; /* No minimum width needed */
-  margin-right: 0; /* Remove extra margin for the placeholder */
-}
-
-.health-risk-warning {
-  font-size: 12px;
-  color: #666; /* Matching the color of other info text */
-  line-height: 1.4;
-  white-space: normal; /* Allow text to wrap */
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /* Show max 2 lines */
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.additive-info-row {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 12px;
-  color: #666;
-  gap: 20px;
-}
-
-.function-tag {
-  background-color: #eef2ff; /* Indigo-50 */
-  color: #4338ca;      /* Indigo-700 */
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: bold;
-  white-space: nowrap;
-}
-
-@media (max-width: 380px) {
-  .product-image-placeholder {
-    width: 60px;
-    height: 60px;
-  }
-  .product-card,
-  .additive-card {
-    gap: 12px;
-  }
-  .product-details,
-  .additive-details {
-    gap: 5px;
-  }
-  .product-info-row,
-  .product-info-row.risk-info,
-  .additive-info-row {
-    font-size: 11px;
-    gap: 15px;
-  }
-  .calories,
-  .function-tag {
-    font-size: 10px;
-  }
-  .health-risk-warning {
-    font-size: 12px;
-  }
-}
-
-
-.safety-level-description {
-  position: sticky;
-  top: 0;
-  background-color: #fff;
-  padding: 10px 0; /* Use padding on Y-axis only to avoid affecting horizontal alignment */
-  margin: 0 -20px 10px -20px; /* Use negative margin to extend the background to the edges */
-  padding-left: 20px; /* Re-apply left padding */
-  padding-right: 20px; /* Re-apply right padding */
-  border-bottom: 1px solid #e5e7eb;
-  z-index: 1; /* Ensure it stays above the scrolling content */
-  font-size: 16px;
-  color: #6b7280;
-  transform: scale(0.85);
-  transform-origin: left;
-  white-space: nowrap;
-}
-
-
-</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue b/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页-3.0.backup.vue
similarity index 62%
rename from shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue
rename to shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页-3.0.backup.vue
index a2355d1..7fa16be 100644
--- a/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue
+++ b/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页-3.0.backup.vue
@@ -1,7 +1,10 @@
+<!-- Force reload to fix display issue and update image sources -->
 <template>
   <div class="search-result-view">
     <header class="top-bar">
-      <button class="back-btn" @click="goBack"><</button>
+      <button class="back-btn" @click="goBack">
+        <img src="@/assets/back-arrow-icon.svg" alt="Back" />
+      </button>
       <div class="search-bar-container">
         <input type="text" v-model="searchQuery" @keyup.enter="performSearch" placeholder="食品 /成分 /食物 /菜谱 /问题" />
         <div class="separator"></div>
@@ -25,43 +28,48 @@
         <span>{{ activeFilterName }}</span>
         <span class="arrow"></span>
       </button>
-    </div>
-
-    <!-- Filter Panel Overlay -->
-    <div v-if="isPanelOpen" class="filter-panel-overlay" @click.self="cancelFilters">
-      <div class="filter-panel">
-        <div class="filter-group">
-          <h4>排序方式</h4>
-          <div class="tags">
-            <button
-              v-for="filter in filters"
-              :key="filter.id"
-              :class="{ active: tempActiveFilter === filter.id }"
-              @click="tempActiveFilter = filter.id"
-            >
-              {{ filter.name }}
-            </button>
+      <!-- Filter Panel Overlay - Moved inside filters-bar -->
+      <div v-if="isPanelOpen" class="filter-panel-overlay" @click.self="cancelFilters">
+        <div class="filter-panel">
+          <div class="filter-group">
+            <h4>排序方式</h4>
+            <div class="tags">
+              <button
+                v-for="filter in filters"
+                :key="filter.id"
+                :class="{ active: tempActiveFilter === filter.id }"
+                @click="tempActiveFilter = filter.id"
+              >
+                {{ filter.name }}
+              </button>
+            </div>
           </div>
-        </div>
 
-        <div class="filter-group">
-          <h4>顺序</h4>
-          <div class="tags">
-            <button :class="{ active: tempSortOrder === 'desc' }" @click="tempSortOrder = 'desc'">从高到低</button>
-            <button :class="{ active: tempSortOrder === 'asc' }" @click="tempSortOrder = 'asc'">从低到高</button>
+          <div class="filter-group">
+            <h4>顺序</h4>
+            <div class="tags">
+              <button :class="{ active: tempSortOrder === 'desc' }" @click="tempSortOrder = 'desc'">从高到低</button>
+              <button :class="{ active: tempSortOrder === 'asc' }" @click="tempSortOrder = 'asc'">从低到高</button>
+            </div>
           </div>
-        </div>
 
-        <div class="panel-actions">
-          <button class="btn-cancel" @click="cancelFilters">取消</button>
-          <button class="btn-confirm" @click="confirmFilters">确认</button>
+          <div class="panel-actions">
+            <button class="btn-cancel" @click="cancelFilters">取消</button>
+            <button class="btn-confirm" @click="confirmFilters">确认</button>
+          </div>
         </div>
       </div>
     </div>
 
     <main class="results-list">
       <div v-if="activeTab === 'additive'" class="safety-level-description">
-        安全等级划分参照 JECFA：‌A1 > A2 > B1 > B2 > C2 > C1‌‌。
+        安全等级：
+        <span class="safety-level-1">A1</span> >
+        <span class="safety-level-2">A2</span> >
+        <span class="safety-level-3">B1</span> >
+        <span class="safety-level-4">B2</span> >
+        <span class="safety-level-5">C2</span> >
+        <span class="safety-level-6">C1</span>
       </div>
       <!-- Dynamic component for rendering lists -->
       <component
@@ -78,13 +86,21 @@ import { ref, computed, onMounted } from 'vue';
 import type { Component } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+// Cache buster, updated to force reload and show new images
+const cacheBuster = '2025-07-26T07:52:30.000Z'; // Force reload to fix sticky header background
+
 // Import list components
-import PrepackagedList from '@/components/SearchResult/PrepackagedList.vue';
-import AdditiveList from '@/components/SearchResult/AdditiveList.vue';
-import MaterialList from '@/components/SearchResult/MaterialList.vue';
-import RecipeList from '@/components/SearchResult/RecipeList.vue';
-import ArticleList from '@/components/SearchResult/ArticleList.vue';
-import AllResultsList from '@/components/SearchResult/AllResultsList.vue';
+import PrepackagedList from '@/components/SearchResult-搜索结果/PrepackagedList-预包装食品列表.vue';
+import AdditiveList from '@/components/SearchResult-搜索结果/AdditiveList-食品添加剂列表.vue';
+import MaterialList from '@/components/SearchResult-搜索结果/MaterialList-原料列表.vue';
+import RecipeList from '@/components/SearchResult-搜索结果/RecipeList-菜谱列表.vue';
+import ArticleList from '@/components/SearchResult-搜索结果/ArticleList-文章列表.vue';
+import AllResultsList from '@/components/SearchResult-搜索结果/AllResultsList-所有结果列表.vue';
+
+// Import local images
+import breakfastImage from '@/assets/images/breakfast.jpg';
+import dessertsImage from '@/assets/images/desserts.jpg';
+import tomatoesImage from '@/assets/images/tomatoes.png';
 
 const route = useRoute();
 const router = useRouter();
@@ -94,30 +110,32 @@ const activeTab = ref('all');
 // Mock Data
 const mockData = {
   prepackaged: [
-    { id: 'p1', category: 'prepackaged', brand: '某品牌', name: '有机纯牛奶', safetyLevel: 1, safetyLevelText: '1 级 (最安全)', nutritionLevel: '高', nutritionLevelClass: 'score-high', additiveCount: 0, riskCount: 0, calories: 270 },
-    { id: 'p2', category: 'prepackaged', brand: '某品牌', name: '全麦面包', safetyLevel: 2, safetyLevelText: '2 级 (较安全)', nutritionLevel: '中', nutritionLevelClass: 'score-mid', additiveCount: 2, riskCount: 0, calories: 350 },
-    { id: 'p3', category: 'prepackaged', brand: '某品牌', name: '番茄酱', safetyLevel: 3, safetyLevelText: '3 级 (一般安全)', nutritionLevel: '中', nutritionLevelClass: 'score-mid', additiveCount: 5, riskCount: 1, calories: 420 },
-    { id: 'p4', category: 'prepackaged', brand: '子弟', name: '薯片 (蜂蜜黄油味)', safetyLevel: 4, safetyLevelText: '4 级 (需警惕)', nutritionLevel: '低', nutritionLevelClass: 'score-low', additiveCount: 8, riskCount: 2, calories: 519 },
-    { id: 'p5', category: 'prepackaged', brand: '某品牌', name: '辣条', safetyLevel: 5, safetyLevelText: '5 级 (风险较高)', nutritionLevel: '低', nutritionLevelClass: 'score-low', additiveCount: 15, riskCount: 4, calories: 600 },
+    { id: 'p1', category: 'prepackaged', brand: '某品牌', name: '有机纯牛奶', safetyLevel: 1, safetyLevelText: '1 级 (最安全)', nutritionLevel: '高', nutritionLevelClass: 'score-high', additiveCount: 0, riskCount: 0, calories: 270, imageUrl: breakfastImage },
+    { id: 'p2', category: 'prepackaged', brand: '某品牌', name: '全麦面包', safetyLevel: 2, safetyLevelText: '2 级 (较安全)', nutritionLevel: '中', nutritionLevelClass: 'score-mid', additiveCount: 2, riskCount: 0, calories: 350, imageUrl: breakfastImage },
+    { id: 'p3', category: 'prepackaged', brand: '某品牌', name: '番茄酱', safetyLevel: 3, safetyLevelText: '3 级 (一般安全)', nutritionLevel: '中', nutritionLevelClass: 'score-mid', additiveCount: 5, riskCount: 1, calories: 420, imageUrl: tomatoesImage },
+    { id: 'p4', category: 'prepackaged', brand: '子弟', name: '薯片 (蜂蜜黄油味)', safetyLevel: 4, safetyLevelText: '4 级 (需警惕)', nutritionLevel: '低', nutritionLevelClass: 'score-low', additiveCount: 8, riskCount: 2, calories: 519, imageUrl: breakfastImage },
+    { id: 'p5', category: 'prepackaged', brand: '某品牌', name: '辣条', safetyLevel: 5, safetyLevelText: '5 级 (风险较高)', nutritionLevel: '低', nutritionLevelClass: 'score-low', additiveCount: 15, riskCount: 4, calories: 600, imageUrl: dessertsImage },
   ],
   additive: [
-    { id: 'a1', category: 'additive', name: '维生素 C (抗坏血酸)', safetyLevel: 1, safetyLevelText: 'A1 最高安全等级', functionTag: '抗氧化剂', riskWarning: '一般认为安全，但极高剂量可能导致肠胃不适。' },
-    { id: 'a2', category: 'additive', name: '苯甲酸钠', safetyLevel: 2, safetyLevelText: 'A2 较安全', functionTag: '防腐剂', riskWarning: '在特定条件下可能与维生素C反应生成微量苯，长期过量摄入有潜在风险。' },
-    { id: 'a3', category: 'additive', name: '诱惑红', safetyLevel: 3, safetyLevelText: 'B1 需警惕', functionTag: '色素', riskWarning: '可能引起儿童多动症等过敏反应，在多国被限制或禁止使用。' },
-    { id: 'a4', category: 'additive', name: '糖醇类甜味剂', safetyLevel: 4, safetyLevelText: 'B2 风险未知', functionTag: '新型甜味剂', riskWarning: '长期摄入对健康的影响尚不完全明确，部分人群可能出现肠胃不适。' },
-    { id: 'a5', category: 'additive', name: '黄原胶 (特定场景)', safetyLevel: 5, safetyLevelText: 'C2 严格限制', functionTag: '增稠剂', riskWarning: '仅限在特定食品（如婴幼儿食品）中严格限量使用。' },
-    { id: 'a6', category: 'additive', name: '苏丹红', safetyLevel: 6, safetyLevelText: 'C1 禁止使用', functionTag: '工业染料', riskWarning: '具有潜在致癌性，严禁在食品中添加。' },
+    { id: 'a1', category: 'additive', name: '维生素 C (抗坏血酸)', safetyLevel: 1, safetyLevelText: 'A1 最高安全等级', functionTag: '抗氧化剂', riskWarning: '一般认为安全，但极高剂量可能导致肠胃不适。', imageUrl: breakfastImage },
+    { id: 'a2', category: 'additive', name: '苯甲酸钠', safetyLevel: 2, safetyLevelText: 'A2 较安全', functionTag: '防腐剂', riskWarning: '在特定条件下可能与维生素C反应生成微量苯，长期过量摄入有潜在风险。', imageUrl: dessertsImage },
+    { id: 'a3', category: 'additive', name: '诱惑红', safetyLevel: 3, safetyLevelText: 'B1 需警惕', functionTag: '色素', riskWarning: '可能引起儿童多动症等过敏反应，在多国被限制或禁止使用。', imageUrl: dessertsImage },
+    { id: 'a4', category: 'additive', name: '糖醇类甜味剂', safetyLevel: 4, safetyLevelText: 'B2 风险未知', functionTag: '新型甜味剂', riskWarning: '长期摄入对健康的影响尚不完全明确，部分人群可能出现肠胃不适。', imageUrl: dessertsImage },
+    { id: 'a5', category: 'additive', name: '黄原胶 (特定场景)', safetyLevel: 5, safetyLevelText: 'C2 严格限制', functionTag: '增稠剂', riskWarning: '仅限在特定食品（如婴幼儿食品）中严格限量使用。', imageUrl: dessertsImage },
+    { id: 'a6', category: 'additive', name: '苏丹红', safetyLevel: 6, safetyLevelText: 'C1 禁止使用', functionTag: '工业染料', riskWarning: '具有潜在致癌性，严禁在食品中添加。', imageUrl: dessertsImage },
   ],
   material: [
-      { id: 'm1', category: 'material', name: '西兰花', family: '十字花科蔬菜', nutrientTags: [{text: '富含维生素C'}, {text: '高膳食纤维'}] },
-      { id: 'm2', category: 'material', name: '番茄', family: '茄科植物', nutrientTags: [{text: '富含番茄红素', class: 'tomato'}, {text: '抗氧化', class: 'antioxidant'}] },
-      { id: 'm3', category: 'material', name: '酱油', family: '传统酿造调味品', nutrientTags: [{text: '提鲜', class: 'umami'}, {text: '高钠', class: 'high-sodium'}] },
+      { id: 'm1', category: 'material', name: '西兰花', family: '十字花科蔬菜', nutrientTags: [{text: '富含维生素C'}, {text: '高膳食纤维'}], imageUrl: breakfastImage },
+      { id: 'm2', category: 'material', name: '番茄', family: '茄科植物', nutrientTags: [{text: '富含番茄红素', class: 'tomato'}, {text: '抗氧化', class: 'antioxidant'}], imageUrl: tomatoesImage },
+      { id: 'm3', category: 'material', name: '酱油', family: '传统酿造调味品', nutrientTags: [{text: '提鲜', class: 'umami'}, {text: '高钠', class: 'high-sodium'}], imageUrl: dessertsImage },
   ],
   recipe: [
-      { id: 'r1', category: 'recipe', title: '自制健康牛奶小面包', summary: '一个简单易学的食谱，使用最少的添加剂，为家人制作美味又健康的面包。' }
+      { id: 'r1', category: 'recipe', title: '丰盛的全麦贝果早餐', summary: '一个简单易学的食谱，使用最少的添加剂，为家人制作美味又健康的面包。', mediaType: 'image', imageUrl: breakfastImage },
+      { id: 'r2', category: 'recipe', title: '一分钟学会做番茄炒蛋', summary: '看视频，轻松掌握这道国民家常菜的精髓，厨房新手也能零失败。', mediaType: 'video', imageUrl: tomatoesImage }
   ],
   article: [
-      { id: 'ar1', category: 'article', title: '牛奶过敏的宝宝应该怎么办？', summary: '本文将详细介绍牛奶过敏的症状、原因以及应对方法...' }
+      { id: 'ar1', category: 'article', title: '牛奶过敏的宝宝应该怎么办？', summary: '本文将详细介绍牛奶过敏的症状、原因以及应对方法...', mediaType: 'image', imageUrl: breakfastImage },
+      { id: 'ar2', category: 'article', title: '如何科学地给宝宝添加辅食', summary: '辅食添加的顺序、种类、注意事项，专家视频为您一次讲清。', mediaType: 'video', imageUrl: breakfastImage }
   ]
 };
 
@@ -227,30 +245,34 @@ const goToResult = (item: any) => {
 <style scoped>
 /* Keep only layout and container styles */
 .search-result-view {
-  /* The padding is no longer needed here as the results-list is positioned absolutely. */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+  position: relative; /* Restore positioning context */
 }
 .top-bar {
   display: flex;
   align-items: center;
-  padding: 10px 20px;
+  padding: 15px 12px 12px;
   background-color: #fff;
   border-bottom: 1px solid #e5e7eb;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  max-width: 428px;
-  margin: 0 auto;
+  /* position: fixed; Removed */
   z-index: 10;
 }
 .back-btn {
-  background: none;
+  width: 24px;
+  height: 24px;
   border: none;
-  font-size: 24px;
-  font-weight: bold;
+  background: none;
+  padding: 0;
   cursor: pointer;
-  padding-right: 10px;
-  color: #333;
+  margin-right: 8px; /* Add some space to the search bar */
+}
+
+.back-btn img {
+  width: 100%;
+  height: 100%;
 }
 .search-bar-container {
   display: flex;
@@ -292,18 +314,13 @@ const goToResult = (item: any) => {
   padding: 10px 0;
   background-color: #fff;
   border-bottom: 1px solid #e5e7eb;
-  position: fixed;
-  top: 57px; /* Position below top-bar */
-  left: 0;
-  right: 0;
-  max-width: 428px;
-  margin: 0 auto;
+  /* position: fixed; Removed */
   z-index: 9;
 }
 .tabs button {
   background: none;
   border: none;
-  font-size: 16px;
+  font-size: 15px;
   color: #6b7280;
   cursor: pointer;
   padding-bottom: 5px;
@@ -319,13 +336,8 @@ const goToResult = (item: any) => {
   padding: 8px 15px;
   background-color: #fff;
   border-bottom: 1px solid #e5e7eb;
-  position: fixed;
-  top: 101px;
-  left: 0;
-  right: 0;
-  max-width: 428px;
-  margin: 0 auto;
   z-index: 8;
+  position: relative; /* Become a positioning context for the panel */
 }
 
 .filter-toggle-btn {
@@ -348,13 +360,13 @@ const goToResult = (item: any) => {
 }
 
 .filter-panel-overlay {
-  position: fixed;
-  top: 142px; /* Position below the header bars */
+  position: absolute; /* Changed from fixed to be contained within the view */
+  top: 100%; /* Position right below the filters-bar */
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 99;
+  z-index: 100;
 }
 
 .filter-panel {
@@ -401,17 +413,19 @@ const goToResult = (item: any) => {
 
 .panel-actions {
   display: flex;
-  gap: 15px;
+  justify-content: center;
+  gap: 22px;
   margin-top: 10px;
-  padding-top: 20px;
+  padding-top: 15px;
   border-top: 1px solid #f0f0f0;
 }
 
 .panel-actions button {
-  flex-grow: 1;
-  padding: 12px;
+  flex-grow: 0;
+  width: 100px;
+  padding: 8px;
   border-radius: 25px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
   cursor: pointer;
 }
@@ -429,31 +443,29 @@ const goToResult = (item: any) => {
 }
 
 .results-list {
-  position: absolute;
-  top: 142px; /* Position right below the filters-bar */
-  bottom: 0;
-  left: 0;
-  right: 0;
-  max-width: 428px; /* Ensures consistency with the fixed headers */
-  margin: 0 auto;
-  overflow-y: auto; /* Enables vertical scrolling for the list */
-  padding: 0 20px;
+  flex-grow: 1; /* Allow this container to grow and fill available space */
+  overflow-y: auto; /* Enable scrolling ONLY for this container */
+  padding: 0; /* Remove padding from the container */
+  min-height: 0; /* Fix for flexbox overflow issue, preventing parent scrolling */
 }
 
 .safety-level-description {
   position: sticky;
   top: 0;
   background-color: #fff;
-  padding: 10px 0;
-  margin: 0 -20px 10px -20px;
-  padding-left: 20px;
-  padding-right: 20px;
+  padding: 10px 20px; /* Add horizontal padding */
+  margin-bottom: 10px; /* Add margin to separate from the list */
   border-bottom: 1px solid #e5e7eb;
   z-index: 1;
-  font-size: 16px;
+  font-size: 13px;
   color: #6b7280;
-  transform: scale(0.85);
-  transform-origin: left;
   white-space: nowrap;
 }
+/* Safety Level Colors */
+.safety-level-1 { color: #07C160; font-weight: bold; }
+.safety-level-2 { color: #90ee90; font-weight: bold; }
+.safety-level-3 { color: #1E90FF; font-weight: bold; }
+.safety-level-4 { color: #f2d025; font-weight: bold; }
+.safety-level-5 { color: #FF7F50; font-weight: bold; }
+.safety-level-6 { color: #ff0000; font-weight: bold; }
 </style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页3.0.vue b/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页3.0.vue
new file mode 100644
index 0000000..7fa16be
--- /dev/null
+++ b/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页3.0.vue
@@ -0,0 +1,471 @@
+<!-- Force reload to fix display issue and update image sources -->
+<template>
+  <div class="search-result-view">
+    <header class="top-bar">
+      <button class="back-btn" @click="goBack">
+        <img src="@/assets/back-arrow-icon.svg" alt="Back" />
+      </button>
+      <div class="search-bar-container">
+        <input type="text" v-model="searchQuery" @keyup.enter="performSearch" placeholder="食品 /成分 /食物 /菜谱 /问题" />
+        <div class="separator"></div>
+        <div class="search-button" @click="performSearch">搜索</div>
+      </div>
+    </header>
+
+    <div class="tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="{ active: activeTab === tab.id }"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.name }}
+      </button>
+    </div>
+
+    <div class="filters-bar">
+      <button class="filter-toggle-btn" @click="openFilterPanel">
+        <span>{{ activeFilterName }}</span>
+        <span class="arrow"></span>
+      </button>
+      <!-- Filter Panel Overlay - Moved inside filters-bar -->
+      <div v-if="isPanelOpen" class="filter-panel-overlay" @click.self="cancelFilters">
+        <div class="filter-panel">
+          <div class="filter-group">
+            <h4>排序方式</h4>
+            <div class="tags">
+              <button
+                v-for="filter in filters"
+                :key="filter.id"
+                :class="{ active: tempActiveFilter === filter.id }"
+                @click="tempActiveFilter = filter.id"
+              >
+                {{ filter.name }}
+              </button>
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <h4>顺序</h4>
+            <div class="tags">
+              <button :class="{ active: tempSortOrder === 'desc' }" @click="tempSortOrder = 'desc'">从高到低</button>
+              <button :class="{ active: tempSortOrder === 'asc' }" @click="tempSortOrder = 'asc'">从低到高</button>
+            </div>
+          </div>
+
+          <div class="panel-actions">
+            <button class="btn-cancel" @click="cancelFilters">取消</button>
+            <button class="btn-confirm" @click="confirmFilters">确认</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <main class="results-list">
+      <div v-if="activeTab === 'additive'" class="safety-level-description">
+        安全等级：
+        <span class="safety-level-1">A1</span> >
+        <span class="safety-level-2">A2</span> >
+        <span class="safety-level-3">B1</span> >
+        <span class="safety-level-4">B2</span> >
+        <span class="safety-level-5">C2</span> >
+        <span class="safety-level-6">C1</span>
+      </div>
+      <!-- Dynamic component for rendering lists -->
+      <component
+        :is="componentMap[activeTab]"
+        :items="filteredResults"
+        @item-click="goToResult"
+      />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import type { Component } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+// Cache buster, updated to force reload and show new images
+const cacheBuster = '2025-07-26T07:52:30.000Z'; // Force reload to fix sticky header background
+
+// Import list components
+import PrepackagedList from '@/components/SearchResult-搜索结果/PrepackagedList-预包装食品列表.vue';
+import AdditiveList from '@/components/SearchResult-搜索结果/AdditiveList-食品添加剂列表.vue';
+import MaterialList from '@/components/SearchResult-搜索结果/MaterialList-原料列表.vue';
+import RecipeList from '@/components/SearchResult-搜索结果/RecipeList-菜谱列表.vue';
+import ArticleList from '@/components/SearchResult-搜索结果/ArticleList-文章列表.vue';
+import AllResultsList from '@/components/SearchResult-搜索结果/AllResultsList-所有结果列表.vue';
+
+// Import local images
+import breakfastImage from '@/assets/images/breakfast.jpg';
+import dessertsImage from '@/assets/images/desserts.jpg';
+import tomatoesImage from '@/assets/images/tomatoes.png';
+
+const route = useRoute();
+const router = useRouter();
+const searchQuery = ref('');
+const activeTab = ref('all');
+
+// Mock Data
+const mockData = {
+  prepackaged: [
+    { id: 'p1', category: 'prepackaged', brand: '某品牌', name: '有机纯牛奶', safetyLevel: 1, safetyLevelText: '1 级 (最安全)', nutritionLevel: '高', nutritionLevelClass: 'score-high', additiveCount: 0, riskCount: 0, calories: 270, imageUrl: breakfastImage },
+    { id: 'p2', category: 'prepackaged', brand: '某品牌', name: '全麦面包', safetyLevel: 2, safetyLevelText: '2 级 (较安全)', nutritionLevel: '中', nutritionLevelClass: 'score-mid', additiveCount: 2, riskCount: 0, calories: 350, imageUrl: breakfastImage },
+    { id: 'p3', category: 'prepackaged', brand: '某品牌', name: '番茄酱', safetyLevel: 3, safetyLevelText: '3 级 (一般安全)', nutritionLevel: '中', nutritionLevelClass: 'score-mid', additiveCount: 5, riskCount: 1, calories: 420, imageUrl: tomatoesImage },
+    { id: 'p4', category: 'prepackaged', brand: '子弟', name: '薯片 (蜂蜜黄油味)', safetyLevel: 4, safetyLevelText: '4 级 (需警惕)', nutritionLevel: '低', nutritionLevelClass: 'score-low', additiveCount: 8, riskCount: 2, calories: 519, imageUrl: breakfastImage },
+    { id: 'p5', category: 'prepackaged', brand: '某品牌', name: '辣条', safetyLevel: 5, safetyLevelText: '5 级 (风险较高)', nutritionLevel: '低', nutritionLevelClass: 'score-low', additiveCount: 15, riskCount: 4, calories: 600, imageUrl: dessertsImage },
+  ],
+  additive: [
+    { id: 'a1', category: 'additive', name: '维生素 C (抗坏血酸)', safetyLevel: 1, safetyLevelText: 'A1 最高安全等级', functionTag: '抗氧化剂', riskWarning: '一般认为安全，但极高剂量可能导致肠胃不适。', imageUrl: breakfastImage },
+    { id: 'a2', category: 'additive', name: '苯甲酸钠', safetyLevel: 2, safetyLevelText: 'A2 较安全', functionTag: '防腐剂', riskWarning: '在特定条件下可能与维生素C反应生成微量苯，长期过量摄入有潜在风险。', imageUrl: dessertsImage },
+    { id: 'a3', category: 'additive', name: '诱惑红', safetyLevel: 3, safetyLevelText: 'B1 需警惕', functionTag: '色素', riskWarning: '可能引起儿童多动症等过敏反应，在多国被限制或禁止使用。', imageUrl: dessertsImage },
+    { id: 'a4', category: 'additive', name: '糖醇类甜味剂', safetyLevel: 4, safetyLevelText: 'B2 风险未知', functionTag: '新型甜味剂', riskWarning: '长期摄入对健康的影响尚不完全明确，部分人群可能出现肠胃不适。', imageUrl: dessertsImage },
+    { id: 'a5', category: 'additive', name: '黄原胶 (特定场景)', safetyLevel: 5, safetyLevelText: 'C2 严格限制', functionTag: '增稠剂', riskWarning: '仅限在特定食品（如婴幼儿食品）中严格限量使用。', imageUrl: dessertsImage },
+    { id: 'a6', category: 'additive', name: '苏丹红', safetyLevel: 6, safetyLevelText: 'C1 禁止使用', functionTag: '工业染料', riskWarning: '具有潜在致癌性，严禁在食品中添加。', imageUrl: dessertsImage },
+  ],
+  material: [
+      { id: 'm1', category: 'material', name: '西兰花', family: '十字花科蔬菜', nutrientTags: [{text: '富含维生素C'}, {text: '高膳食纤维'}], imageUrl: breakfastImage },
+      { id: 'm2', category: 'material', name: '番茄', family: '茄科植物', nutrientTags: [{text: '富含番茄红素', class: 'tomato'}, {text: '抗氧化', class: 'antioxidant'}], imageUrl: tomatoesImage },
+      { id: 'm3', category: 'material', name: '酱油', family: '传统酿造调味品', nutrientTags: [{text: '提鲜', class: 'umami'}, {text: '高钠', class: 'high-sodium'}], imageUrl: dessertsImage },
+  ],
+  recipe: [
+      { id: 'r1', category: 'recipe', title: '丰盛的全麦贝果早餐', summary: '一个简单易学的食谱，使用最少的添加剂，为家人制作美味又健康的面包。', mediaType: 'image', imageUrl: breakfastImage },
+      { id: 'r2', category: 'recipe', title: '一分钟学会做番茄炒蛋', summary: '看视频，轻松掌握这道国民家常菜的精髓，厨房新手也能零失败。', mediaType: 'video', imageUrl: tomatoesImage }
+  ],
+  article: [
+      { id: 'ar1', category: 'article', title: '牛奶过敏的宝宝应该怎么办？', summary: '本文将详细介绍牛奶过敏的症状、原因以及应对方法...', mediaType: 'image', imageUrl: breakfastImage },
+      { id: 'ar2', category: 'article', title: '如何科学地给宝宝添加辅食', summary: '辅食添加的顺序、种类、注意事项，专家视频为您一次讲清。', mediaType: 'video', imageUrl: breakfastImage }
+  ]
+};
+
+// Component Mapping
+const componentMap: Record<string, Component> = {
+  all: AllResultsList,
+  prepackaged: PrepackagedList,
+  additive: AdditiveList,
+  material: MaterialList,
+  recipe: RecipeList,
+  article: ArticleList,
+};
+
+const filteredResults = computed(() => {
+  switch (activeTab.value) {
+    case 'prepackaged':
+      return mockData.prepackaged;
+    case 'additive':
+      return mockData.additive;
+    case 'material':
+      return mockData.material;
+    case 'recipe':
+      return mockData.recipe;
+    case 'article':
+      return mockData.article;
+    case 'all':
+      return [
+        ...mockData.prepackaged,
+        ...mockData.additive,
+        ...mockData.material,
+        ...mockData.recipe,
+        ...mockData.article
+      ];
+    default:
+      return [];
+  }
+});
+
+
+// Filter and Sort State
+const filters = ref([
+  { id: 'comprehensive', name: '综合' },
+  { id: 'safety', name: '安全评级' },
+  { id: 'nutrition', name: '营养评级' },
+  { id: 'latest', name: '最新发布' },
+  { id: 'protein', name: '蛋白质' },
+  { id: 'fat', name: '脂肪' },
+  { id: 'carbs', name: '碳水化合物' },
+]);
+const activeFilter = ref('comprehensive');
+const sortOrder = ref('desc'); // 'desc' or 'asc'
+
+// Panel State
+const isPanelOpen = ref(false);
+const tempActiveFilter = ref(activeFilter.value);
+const tempSortOrder = ref(sortOrder.value);
+
+const activeFilterName = computed(() => {
+  const found = filters.value.find(f => f.id === activeFilter.value);
+  return found ? found.name : '综合';
+});
+
+const openFilterPanel = () => {
+  tempActiveFilter.value = activeFilter.value;
+  tempSortOrder.value = sortOrder.value;
+  isPanelOpen.value = true;
+};
+
+const cancelFilters = () => {
+  isPanelOpen.value = false;
+};
+
+const confirmFilters = () => {
+  activeFilter.value = tempActiveFilter.value;
+  sortOrder.value = tempSortOrder.value;
+  isPanelOpen.value = false;
+  // Here you would typically re-fetch data with new filters
+};
+
+const tabs = ref([
+  { id: 'all', name: '全部' },
+  { id: 'prepackaged', name: '预包装' },
+  { id: 'additive', name: '添加剂' },
+  { id: 'material', name: '食材' },
+  { id: 'recipe', name: '食谱' },
+  { id: 'article', name: '资讯' },
+]);
+
+onMounted(() => {
+  searchQuery.value = (route.query.q as string) || '';
+});
+
+const goBack = () => {
+  router.push({ name: 'home' });
+};
+
+const performSearch = () => {
+  // In a real app, this would re-trigger the search
+  console.log('Searching for:', searchQuery.value);
+};
+
+const goToResult = (item: any) => {
+  router.push({ name: 'result', params: { id: item.id } });
+};
+</script>
+
+<style scoped>
+/* Keep only layout and container styles */
+.search-result-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+  position: relative; /* Restore positioning context */
+}
+.top-bar {
+  display: flex;
+  align-items: center;
+  padding: 15px 12px 12px;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  /* position: fixed; Removed */
+  z-index: 10;
+}
+.back-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  margin-right: 8px; /* Add some space to the search bar */
+}
+
+.back-btn img {
+  width: 100%;
+  height: 100%;
+}
+.search-bar-container {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 25px;
+  padding: 8px 15px;
+  border: 1px solid #07C160;
+  flex-grow: 1;
+}
+
+.search-bar-container input {
+  border: none;
+  outline: none;
+  background: transparent;
+  flex-grow: 1;
+  width: 0;
+  font-size: 14px;
+  color: #333;
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background-color: #e0e0e0;
+  margin: 0 12px;
+}
+
+.search-button {
+  color: #07C160;
+  font-weight: bold;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px 0;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  /* position: fixed; Removed */
+  z-index: 9;
+}
+.tabs button {
+  background: none;
+  border: none;
+  font-size: 15px;
+  color: #6b7280;
+  cursor: pointer;
+  padding-bottom: 5px;
+  border-bottom: 2px solid transparent;
+}
+.tabs button.active {
+  color: #22c55e;
+  border-bottom-color: #22c55e;
+}
+
+.filters-bar {
+  display: flex;
+  padding: 8px 15px;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  z-index: 8;
+  position: relative; /* Become a positioning context for the panel */
+}
+
+.filter-toggle-btn {
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.filter-toggle-btn .arrow {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #666;
+  margin-left: 8px;
+}
+
+.filter-panel-overlay {
+  position: absolute; /* Changed from fixed to be contained within the view */
+  top: 100%; /* Position right below the filters-bar */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+
+.filter-panel {
+  background-color: #fff;
+  padding: 20px 15px;
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+.filter-group {
+  margin-bottom: 25px;
+}
+
+.filter-group h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 15px;
+  text-align: left;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.tags button {
+  background-color: #f7f7f7;
+  border: 1px solid #f7f7f7;
+  color: #333;
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tags button.active {
+  background-color: #e8f8f1;
+  border-color: #07c160;
+  color: #07c160;
+}
+
+.panel-actions {
+  display: flex;
+  justify-content: center;
+  gap: 22px;
+  margin-top: 10px;
+  padding-top: 15px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.panel-actions button {
+  flex-grow: 0;
+  width: 100px;
+  padding: 8px;
+  border-radius: 25px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.btn-cancel {
+  background-color: #f7f7f7;
+  border: 1px solid #f7f7f7;
+  color: #333;
+}
+
+.btn-confirm {
+  background-color: #07c160;
+  border: 1px solid #07c160;
+  color: #fff;
+}
+
+.results-list {
+  flex-grow: 1; /* Allow this container to grow and fill available space */
+  overflow-y: auto; /* Enable scrolling ONLY for this container */
+  padding: 0; /* Remove padding from the container */
+  min-height: 0; /* Fix for flexbox overflow issue, preventing parent scrolling */
+}
+
+.safety-level-description {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  padding: 10px 20px; /* Add horizontal padding */
+  margin-bottom: 10px; /* Add margin to separate from the list */
+  border-bottom: 1px solid #e5e7eb;
+  z-index: 1;
+  font-size: 13px;
+  color: #6b7280;
+  white-space: nowrap;
+}
+/* Safety Level Colors */
+.safety-level-1 { color: #07C160; font-weight: bold; }
+.safety-level-2 { color: #90ee90; font-weight: bold; }
+.safety-level-3 { color: #1E90FF; font-weight: bold; }
+.safety-level-4 { color: #f2d025; font-weight: bold; }
+.safety-level-5 { color: #FF7F50; font-weight: bold; }
+.safety-level-6 { color: #ff0000; font-weight: bold; }
+</style>
\ No newline at end of file