802b4ba229
- VoiceController: Map.of() -> Collections.singletonMap() 兼容 Java 8 - ExploreController: 补齐 takeoutService.roll() 缺失的 taste/priceRange/allergies 参数 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
1.8 KiB
Plaintext
94 lines
1.8 KiB
Plaintext
/*
|
|
* 模式卡片
|
|
* 水平布局：图标区 | 文字区 | 行动按钮
|
|
* 三种模式各用色条区分（无伪元素装饰）
|
|
*/
|
|
|
|
.mode-card {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--space-md);
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: transform 0.15s var(--ease-out);
|
|
}
|
|
|
|
.mode-card:active {
|
|
transform: scale(0.985);
|
|
}
|
|
|
|
/* ── 图标区 ── */
|
|
.card-icon-wrap {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-right: var(--space-md);
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 44rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── 文字区 ── */
|
|
.card-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: var(--text-body);
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* ── 行动按钮 ── */
|
|
.card-action {
|
|
flex-shrink: 0;
|
|
font-size: var(--text-body-sm);
|
|
font-weight: 500;
|
|
padding: var(--space-xs) var(--space-md);
|
|
border-radius: var(--radius-full);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ═══ 各模式专属色 ═══ */
|
|
|
|
/* 外卖 — 橙 */
|
|
.mode-card.takeout .card-icon-wrap {
|
|
background: var(--color-primary-pale);
|
|
}
|
|
.mode-card.takeout .card-action {
|
|
color: var(--color-primary);
|
|
background: var(--color-primary-pale);
|
|
}
|
|
|
|
/* 冰箱 — 绿 */
|
|
.mode-card.fridge .card-icon-wrap {
|
|
background: var(--color-green-pale);
|
|
}
|
|
.mode-card.fridge .card-action {
|
|
color: var(--color-green);
|
|
background: var(--color-green-pale);
|
|
}
|
|
|
|
/* 探店 — 紫 */
|
|
.mode-card.explore .card-icon-wrap {
|
|
background: var(--color-purple-pale);
|
|
}
|
|
.mode-card.explore .card-action {
|
|
color: var(--color-purple);
|
|
background: var(--color-purple-pale);
|
|
}
|