fix: 更新档口营养秤导航页 index.html

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
zhangyan
2026-06-12 09:11:54 +08:00
co-authored by Claude Opus 4.6
parent 269a632ae7
commit 5762fcfcc8
@@ -37,37 +37,36 @@
color: rgba(255, 255, 255, 0.85);
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100% - 44px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 24px;
padding: 24px 32px;
height: calc(100% - 44px);
align-content: start;
overflow-y: auto;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 480px;
padding: 24px 28px;
gap: 12px;
padding: 24px 20px;
background: #1a2b4a;
border-radius: 14px;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
border: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border-color: rgba(74, 144, 217, 0.3);
}
.card__icon { font-size: 28px; width: 40px; text-align: center; flex-shrink: 0; }
.card__info { flex: 1; }
.card__title { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.card__desc { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.card__arrow { font-size: 18px; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.card__icon { font-size: 32px; }
.card__title { font-size: 14px; font-weight: 600; color: #fff; }
.card__desc { font-size: 11px; color: rgba(255, 255, 255, 0.45); line-height: 1.4; }
</style>
</head>
<body>
@@ -80,67 +79,43 @@
<div class="main-content">
<a class="card" href="01-meal-start.html">
<span class="card__icon">&#x1F37D;&#xFE0F;</span>
<div class="card__info">
<div class="card__title">开餐界面</div>
<div class="card__desc">开餐操作、今日菜品概览与就餐引导</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">开餐界面</div>
<div class="card__desc">开餐操作、今日菜品概览与就餐引导</div>
</a>
<a class="card" href="02-dish-display.html">
<span class="card__icon">&#x1F4CB;</span>
<div class="card__info">
<div class="card__title">餐品展示界面</div>
<div class="card__desc">菜品详情、营养成分与热量展示</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">餐品展示界面</div>
<div class="card__desc">菜品详情、营养成分与热量展示</div>
</a>
<a class="card" href="03-meal-pickup.html">
<span class="card__icon">&#x1F9FE;</span>
<div class="card__info">
<div class="card__title">取餐界面(单屏)</div>
<div class="card__desc">取餐确认、订单生成与营养报告</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">取餐界面(单屏)</div>
<div class="card__desc">取餐确认、订单生成与营养报告</div>
</a>
<a class="card" href="03-meal-pickup-dual-large.html">
<span class="card__icon">&#x1F5A5;&#xFE0F;</span>
<div class="card__info">
<div class="card__title">取餐界面(双屏·大屏 1280×720)</div>
<div class="card__desc">大屏取餐信息展示、用户信息与取餐记录</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">取餐界面(双屏·大屏)</div>
<div class="card__desc">大屏取餐信息展示、用户信息与取餐记录</div>
</a>
<a class="card" href="03-meal-pickup-dual-small.html">
<span class="card__icon">&#x1F4CA;</span>
<div class="card__info">
<div class="card__title">取餐界面(双屏·小屏 480×320</div>
<div class="card__desc">小屏营养摄入柱状图与推荐热量展示</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">取餐界面(双屏·小屏)</div>
<div class="card__desc">小屏营养摄入柱状图与推荐热量展示</div>
</a>
<a class="card" href="04-settings.html">
<span class="card__icon">&#x2699;&#xFE0F;</span>
<div class="card__info">
<div class="card__title">设置界面</div>
<div class="card__desc">环境切换、设备参数配置</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">设置界面</div>
<div class="card__desc">环境切换、设备参数配置</div>
</a>
<a class="card" href="05-dish-sampling.html">
<span class="card__icon">&#x1F4F8;</span>
<div class="card__info">
<div class="card__title">餐品采样界面</div>
<div class="card__desc">菜品拍照采集、营养数据录入与 AI 识别匹配</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">餐品采样界面</div>
<div class="card__desc">菜品拍照采集、营养数据录入与 AI 识别匹配</div>
</a>
<a class="card" href="06-sampling-history.html">
<span class="card__icon">&#x1F4DD;</span>
<div class="card__info">
<div class="card__title">采样历史</div>
<div class="card__desc">历史采样记录查看、采集图片管理</div>
</div>
<span class="card__arrow">&#x203A;</span>
<div class="card__title">采样历史</div>
<div class="card__desc">历史采样记录查看、采集图片管理</div>
</a>
</div>