更新
This commit is contained in:
Your Name
@@ -124,39 +124,122 @@
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* ===== 次：上次消除（名称 + 含糖量） ===== */
|
||||
/* ===== 次：上次消除（名称 + 含糖量），GI 三色编码学习卡 ===== */
|
||||
.game-page .gg-hud-last-food {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
margin: 0 auto 14rpx;
|
||||
padding: 16rpx 18rpx;
|
||||
border-radius: 22rpx;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
padding: 16rpx 18rpx 18rpx;
|
||||
border-radius: 26rpx;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1rpx solid rgba(0, 108, 73, 0.1);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 108, 73, 0.06);
|
||||
box-shadow: 0 6rpx 20rpx rgba(0, 108, 73, 0.07);
|
||||
}
|
||||
|
||||
/* 头部：标题 + GI 状态胶囊 */
|
||||
.game-page .gg-hud-last-food-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-kicker {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #475569;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
border-radius: 18rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
color: #64748b;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.3;
|
||||
padding-left: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-kicker::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 3rpx;
|
||||
background: #006c49;
|
||||
}
|
||||
|
||||
/* 头部 GI 胶囊 */
|
||||
.game-page .gg-hud-last-food-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 5rpx 16rpx 5rpx 12rpx;
|
||||
border-radius: 999rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
border: 1rpx solid transparent;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-chip-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-chip-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-chip.is-low {
|
||||
background: rgba(22, 163, 74, 0.12);
|
||||
border-color: rgba(22, 163, 74, 0.22);
|
||||
}
|
||||
.game-page .gg-hud-last-food-chip.is-low .gg-hud-last-food-chip-dot { background: #16a34a; }
|
||||
.game-page .gg-hud-last-food-chip.is-low .gg-hud-last-food-chip-text { color: #15803d; }
|
||||
|
||||
.game-page .gg-hud-last-food-chip.is-mid {
|
||||
background: rgba(234, 88, 12, 0.12);
|
||||
border-color: rgba(234, 88, 12, 0.22);
|
||||
}
|
||||
.game-page .gg-hud-last-food-chip.is-mid .gg-hud-last-food-chip-dot { background: #ea580c; }
|
||||
.game-page .gg-hud-last-food-chip.is-mid .gg-hud-last-food-chip-text { color: #c2410c; }
|
||||
|
||||
.game-page .gg-hud-last-food-chip.is-high {
|
||||
background: rgba(220, 38, 38, 0.12);
|
||||
border-color: rgba(220, 38, 38, 0.24);
|
||||
}
|
||||
.game-page .gg-hud-last-food-chip.is-high .gg-hud-last-food-chip-dot { background: #dc2626; }
|
||||
.game-page .gg-hud-last-food-chip.is-high .gg-hud-last-food-chip-text { color: #b91c1c; }
|
||||
|
||||
/* 主卡：左侧 GI 强调条 + 图标 + 文案 */
|
||||
.game-page .gg-hud-last-food-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 16rpx 18rpx 16rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
background: #f8fafc;
|
||||
border: 1rpx solid rgba(0, 108, 73, 0.08);
|
||||
animation: gg-last-food-in 0.22s ease-out;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
animation: gg-last-food-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
/* 左侧强调条（GI 三色） */
|
||||
.game-page .gg-hud-last-food-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -166,35 +249,44 @@
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-card.is-high {
|
||||
background: rgba(254, 242, 242, 0.9);
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
background: linear-gradient(90deg, rgba(254, 226, 226, 0.85) 0%, rgba(254, 242, 242, 0.6) 60%);
|
||||
border-color: rgba(220, 38, 38, 0.18);
|
||||
}
|
||||
.game-page .gg-hud-last-food-card.is-high::before { background: #dc2626; }
|
||||
|
||||
.game-page .gg-hud-last-food-card.is-mid {
|
||||
background: rgba(255, 251, 235, 0.95);
|
||||
border-color: rgba(234, 88, 12, 0.18);
|
||||
background: linear-gradient(90deg, rgba(255, 237, 213, 0.85) 0%, rgba(255, 251, 235, 0.6) 60%);
|
||||
border-color: rgba(234, 88, 12, 0.16);
|
||||
}
|
||||
.game-page .gg-hud-last-food-card.is-mid::before { background: #ea580c; }
|
||||
|
||||
.game-page .gg-hud-last-food-card.is-low {
|
||||
background: rgba(240, 253, 244, 0.95);
|
||||
border-color: rgba(22, 163, 74, 0.15);
|
||||
background: linear-gradient(90deg, rgba(220, 252, 231, 0.85) 0%, rgba(240, 253, 244, 0.6) 60%);
|
||||
border-color: rgba(22, 163, 74, 0.16);
|
||||
}
|
||||
.game-page .gg-hud-last-food-card.is-low::before { background: #16a34a; }
|
||||
|
||||
/* 图标：白底 + GI 彩色描边环 */
|
||||
.game-page .gg-hud-last-food-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.06);
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 3rpx 10rpx rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-icon.is-low { border-color: rgba(22, 163, 74, 0.35); }
|
||||
.game-page .gg-hud-last-food-icon.is-mid { border-color: rgba(234, 88, 12, 0.35); }
|
||||
.game-page .gg-hud-last-food-icon.is-high { border-color: rgba(220, 38, 38, 0.4); }
|
||||
|
||||
.game-page .gg-hud-last-food-icon .food-tile-icon--goal {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
width: 62rpx;
|
||||
height: 62rpx;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-body {
|
||||
@@ -206,10 +298,10 @@
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
font-size: 36rpx;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
line-height: 1.25;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -217,42 +309,61 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8rpx 12rpx;
|
||||
gap: 8rpx 14rpx;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-sugar-label {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #475569;
|
||||
/* 含糖等级徽标：GI 三色实底 + 白字（保证对比度） */
|
||||
.game-page .gg-hud-last-food-gi {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 5rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-gi {
|
||||
.game-page .gg-hud-last-food-gi-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 8rpx;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-gi.is-low { background: #16a34a; box-shadow: 0 2rpx 8rpx rgba(22, 163, 74, 0.3); }
|
||||
.game-page .gg-hud-last-food-gi.is-mid { background: #ea580c; box-shadow: 0 2rpx 8rpx rgba(234, 88, 12, 0.3); }
|
||||
.game-page .gg-hud-last-food-gi.is-high { background: #dc2626; box-shadow: 0 2rpx 8rpx rgba(220, 38, 38, 0.32); }
|
||||
|
||||
.game-page .gg-hud-last-food-sugar-hint {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
color: #475569;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-card.is-high .gg-hud-last-food-sugar-hint {
|
||||
color: #991b1b;
|
||||
.game-page .gg-hud-last-food-card.is-high .gg-hud-last-food-sugar-hint { color: #b91c1c; }
|
||||
.game-page .gg-hud-last-food-card.is-mid .gg-hud-last-food-sugar-hint { color: #c2410c; }
|
||||
.game-page .gg-hud-last-food-card.is-low .gg-hud-last-food-sugar-hint { color: #15803d; }
|
||||
|
||||
/* 空态占位 */
|
||||
.game-page .gg-hud-last-food-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 18rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f8fafc;
|
||||
border: 1rpx dashed rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-placeholder {
|
||||
padding: 12rpx 4rpx;
|
||||
.game-page .gg-hud-last-food-placeholder-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.game-page .gg-hud-last-food-placeholder text {
|
||||
font-size: 28rpx;
|
||||
font-size: 27rpx;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
line-height: 1.45;
|
||||
@@ -435,7 +546,7 @@
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 8rpx 16rpx 0;
|
||||
padding: 8rpx 1rpx 0;
|
||||
}
|
||||
|
||||
/* gg-hint-banner 已移除，提示直接显示在棋盘食物上 */
|
||||
@@ -772,7 +883,7 @@
|
||||
}
|
||||
|
||||
.game-page .gg-tile-gi.is-low { background: #16a34a; }
|
||||
.game-page .gg-tile-gi.is-mid { background: #ea580c; }
|
||||
.game-page .gg-tile-gi.is-mid { background: #e67e22; }
|
||||
.game-page .gg-tile-gi.is-high {
|
||||
background: #dc2626;
|
||||
box-shadow: 0 2rpx 10rpx rgba(220, 38, 38, 0.45);
|
||||
|
||||
Reference in New Issue
Block a user