From a45d393cee0bbaafe0959efbd1bdc62b8a719aa9 Mon Sep 17 00:00:00 2001 From: lsy Date: Sat, 5 Apr 2025 13:34:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=80=E6=9C=89index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/graduation/src/pages/cuisine/index.astro | 432 +++++- web/graduation/src/pages/travel/index.astro | 1442 ++++++++++++++++-- 2 files changed, 1692 insertions(+), 182 deletions(-) diff --git a/web/graduation/src/pages/cuisine/index.astro b/web/graduation/src/pages/cuisine/index.astro index 5be03d5..243b7a5 100644 --- a/web/graduation/src/pages/cuisine/index.astro +++ b/web/graduation/src/pages/cuisine/index.astro @@ -244,9 +244,185 @@ if (queryParams) queryParams = '?' + queryParams.substring(1);
+ +
+ + + +
+ + {/* 保留当前的其他筛选参数 */} + {categoryParam && } + {cityParam && } + {tasteParam && } + {tagParam && } + {ingredientParam && } + +
+
+ + +
+
+
+
+

美食筛选

+ +
+ +
+ +
+

+ + + + 菜系 +

+
+ {categories.slice(0, 8).map((category) => { + const isSelected = categoryParam && categoryParam.toLowerCase() === category.name.toLowerCase(); + return ( +
+
+ {category.name} +
+ ); + })} +
+
+ + +
+

+ + + + + 地域特色 +

+
+ {citys.slice(0, 10).map((city) => { + const isSelected = cityParam && cityParam.toLowerCase() === city.name.toLowerCase(); + return ( +
+
+ {city.name} +
+ ); + })} +
+
+ + +
+

+ + + + 味道特点 +

+
+ {tastes.slice(0, 8).map((taste) => { + const isSelected = tasteParam && tasteParam.toLowerCase() === taste.name.toLowerCase(); + return ( +
+
+ {taste.name} +
+ ); + })} +
+
+ + +
+

+ + + + 食谱标签 +

+
+ {allTags.slice(0, 15).map((tag, i) => { + const isSelected = tagParam && tagParam.toLowerCase() === tag.name.toLowerCase(); + // 为标签生成不同的颜色 + const colors = ['amber', 'red', 'green', 'orange', 'amber', 'red']; + const colorClasses = { + 'amber': 'border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 bg-amber-50/50 dark:bg-amber-900/20', + 'red': 'border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 bg-red-50/50 dark:bg-red-900/20', + 'green': 'border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 bg-green-50/50 dark:bg-green-900/20', + 'orange': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300 bg-orange-50/50 dark:bg-orange-900/20' + }; + const color = colors[i % colors.length] as keyof typeof colorClasses; + const selectedClass = isSelected ? 'ring-2 ring-amber-500 dark:ring-amber-400 shadow-md' : ''; + + return ( +
+ {tag.name} +
+ ); + })} +
+
+ + +
+

+ + + + 主要食材 +

+
+ {topIngredients.slice(0, 15).map((ingredient) => { + const isSelected = ingredientParam && ingredientParam.split(',').some(ing => ing.toLowerCase() === ingredient.name.toLowerCase()); + return ( +
+
+ {ingredient.name} +
+ ); + })} +
+
+ + +
+ + +
+
+
+
+
-
+