本文展示了一个智能食材管理系统的移动端原型设计。页面采用iOS风格包含状态栏、欢迎语、核心数据统计库存总数42件、临期食材5件、新鲜度评分仪表盘当前85分和3x3网格展示的冰箱空间状态。底部导航栏提供首页、食材库、食谱、购物清单和个人中心五个功能入口。设计使用HTMLCSSJavaScript实现采用Tailwind CSS框架并集成了ECharts数据可视化图表。页面整体布局简洁美观交互元素清晰展示了智能食材管理系统的核心功能模块。原型首页食材库购物清单今日推荐代码实现来感受下墨刀AI的代码实力index.html!DOCTYPE html html langzh-CN head meta charsetutf-8/ meta contentwidthdevice-width, initial-scale1.0 nameviewport/ title智鲜管家 - 首页/title script srchttps://modao.cc/agent-py/static/source/js/tailwindcss.3.4.3.js/script script srchttps://modao.cc/agent-py/static/source/js/iconify-icon.min.1.0.7.js/script script srchttps://modao.cc/agent-py/static/source/js/echarts.min.5.4.3.js/script style body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; background-color: #F2F2F7; } .ios-card { background: white; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .tab-active { color: #2A6DFF; } /style /head body classflex justify-center items-center min-h-screen !-- 模拟手机容器 -- div classw-[375px] h-[812px] bg-white relative overflow-hidden flex flex-col shadow-2xl rounded-[40px] border-[8px] border-black !-- 状态栏 -- div classh-11 w-full flex justify-between px-8 items-center text-sm font-semibold span9:41/span div classflex gap-1.5 iconify-icon classtext-black iconmdi:signal/iconify-icon iconify-icon classtext-black iconmdi:wifi/iconify-icon iconify-icon classtext-black iconmdi:battery/iconify-icon /div /div !-- 内容滚动区 -- div classflex-1 overflow-y-auto px-5 pb-24 !-- 欢迎语 -- div classmt-4 mb-6 h1 classtext-2xl font-bold text-gray-900早安主人/h1 p classtext-gray-500 text-sm今天是 2026年3月31日/p /div !-- 核心数据 -- div classgrid grid-cols-2 gap-4 mb-6 div classios-card p-4 flex flex-col span classtext-gray-400 text-xs font-medium mb-1库存总数/span div classflex items-end gap-1 span classtext-3xl font-bold text-[#2A6DFF]42/span span classtext-gray-400 text-sm pb-1件/span /div /div div classios-card p-4 flex flex-col border-l-4 border-red-500 span classtext-gray-400 text-xs font-medium mb-1即将过期/span div classflex items-end gap-1 span classtext-3xl font-bold text-red-5005/span span classtext-gray-400 text-sm pb-1件/span /div /div /div !-- 新鲜度评分 -- div classios-card p-5 mb-6 h3 classtext-sm font-bold text-gray-800 mb-2全屋新鲜度评分/h3 div classw-full h-40 idhealthChart/div p classtext-center text-xs text-gray-400 mt-2 italic“冰箱环境优良请尽快处理临期食材”/p /div !-- 冰箱状态图 -- div classios-card p-5 div classflex justify-between items-center mb-4 h3 classtext-sm font-bold text-gray-800实时空间状态/h3 span classtext-[#2A6DFF] text-xs font-medium查看详情/span /div div classgrid grid-cols-3 gap-3 !-- 3x3 Grid -- div classaspect-square bg-blue-50 rounded-lg flex items-center justify-center border border-blue-100 iconify-icon classtext-orange-400 text-2xl iconfluent:food-carrot-24-filled/iconify-icon /div div classaspect-square bg-blue-50 rounded-lg flex items-center justify-center border border-blue-100 iconify-icon classtext-red-400 text-2xl iconfluent:food-apple-24-filled/iconify-icon /div div classaspect-square bg-gray-50 rounded-lg flex items-center justify-center border border-gray-100 opacity-30 iconify-icon classtext-gray-400 text-xl iconmdi:plus/iconify-icon /div div classaspect-square bg-blue-50 rounded-lg flex items-center justify-center border border-blue-100 iconify-icon classtext-yellow-500 text-2xl iconfluent:food-egg-24-filled/iconify-icon /div div classaspect-square bg-blue-50 rounded-lg flex items-center justify-center border border-blue-100 relative iconify-icon classtext-red-700 text-2xl iconfluent:food-meat-24-filled/iconify-icon div classabsolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white/div /div div classaspect-square bg-blue-50 rounded-lg flex items-center justify-center border border-blue-100 iconify-icon classtext-pink-400 text-2xl iconfluent:food-cake-24-filled/iconify-icon /div div classaspect-square bg-gray-50 rounded-lg flex items-center justify-center border border-gray-100 opacity-30 iconify-icon classtext-gray-400 text-xl iconmdi:plus/iconify-icon /div div classaspect-square bg-blue-50 rounded-lg flex items-center justify-center border border-blue-100 iconify-icon classtext-blue-400 text-2xl iconfluent:drink-bottle-24-filled/iconify-icon /div div classaspect-square bg-gray-50 rounded-lg flex items-center justify-center border border-gray-100 opacity-30 iconify-icon classtext-gray-400 text-xl iconmdi:plus/iconify-icon /div /div /div /div !-- 底部导航 -- div classabsolute bottom-0 left-0 right-0 h-20 bg-white/80 backdrop-blur-md border-t border-gray-100 px-6 flex justify-between items-center pb-4 a classflex flex-col items-center tab-active hrefindex.html iconify-icon classtext-2xl iconsolar:home-2-bold/iconify-icon span classtext-[10px] mt-1 font-bold首页/span /a a classflex flex-col items-center text-gray-400 hrefstorage.html iconify-icon classtext-2xl iconsolar:fridge-bold/iconify-icon span classtext-[10px] mt-1食材库/span /a a classflex flex-col items-center text-gray-400 hrefrecipes.html iconify-icon classtext-2xl iconsolar:chef-hat-bold/iconify-icon span classtext-[10px] mt-1食谱/span /a a classflex flex-col items-center text-gray-400 hrefshopping.html iconify-icon classtext-2xl iconsolar:cart-large-bold/iconify-icon span classtext-[10px] mt-1清单/span /a div classflex flex-col items-center text-gray-400 iconify-icon classtext-2xl iconsolar:user-bold/iconify-icon span classtext-[10px] mt-1我的/span /div /div /div script // 初始化新鲜度图表 const chart echarts.init(document.getElementById(healthChart)); const option { series: [{ type: gauge, startAngle: 180, endAngle: 0, min: 0, max: 100, splitNumber: 8, axisLine: { lineStyle: { width: 10, color: [ [0.3, #FF4D4F], [0.7, #FFA940], [1, #2A6DFF] ] } }, pointer: { icon: path://M12.8,0.7l12,40.1H0.7L12.8,0.7z, length: 12%, width: 10, offsetCenter: [0, -40%], itemStyle: { color: auto } }, axisTick: { distance: -15, length: 8, lineStyle: { color: #fff, width: 2 } }, splitLine: { distance: -20, length: 15, lineStyle: { color: #fff, width: 4 } }, axisLabel: { distance: -20, color: #999, fontSize: 10 }, anchor: { show: true, showAbove: true, size: 15, itemStyle: { color: #2A6DFF } }, title: { show: false }, detail: { valueAnimation: true, fontSize: 32, fontWeight: bold, offsetCenter: [0, 20%], formatter: {value}, color: #2A6DFF }, data: [{ value: 85 }] }] }; chart.setOption(option); /script /body /html