fix(tongji): stabilize food transitions and mixed weekly rank

This commit is contained in:
大哥大哥的大哥哥
2026-07-22 15:21:51 +08:00
parent 68b5b12b59
commit 1626b6f498
12 changed files with 970 additions and 107 deletions
@@ -46,7 +46,44 @@
.eg-nav-actions { display: flex; width: 156rpx; flex-shrink: 0; justify-content: flex-end; gap: 10rpx; }
.eg-nav-btn--small { width: 68rpx; height: 68rpx; border-radius: 22rpx; }
.eg-title-wrap { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.eg-title-wrap { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; }
.eg-title-wrap > .eg-title,
.eg-title-wrap > .eg-subtitle { transition: opacity .08s ease; }
.eg-title-wrap.is-noticing > .eg-title,
.eg-title-wrap.is-noticing > .eg-subtitle { opacity: .16; }
.eg-nav-notice {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
display: flex;
width: 100%;
min-width: 0;
box-sizing: border-box;
flex-direction: column;
align-items: center;
padding: 5rpx 8rpx;
border: 1rpx solid rgba(21,94,75,.09);
border-radius: 16rpx;
color: rgba(38,86,72,.82);
background: rgba(255,255,255,.58);
box-shadow: 0 4rpx 12rpx rgba(13,64,51,.06);
text-align: center;
transform: translate(-50%, -50%);
animation: egNavNotice 1.05s ease-out both;
pointer-events: none;
}
.eg-nav-notice-title,
.eg-nav-notice-detail {
display: block;
overflow: hidden;
max-width: 100%;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.eg-nav-notice-title { font-size: 23rpx; font-weight: 800; }
.eg-nav-notice-detail { margin-top: 2rpx; color: rgba(154,106,42,.78); font-size: 20rpx; font-weight: 700; }
.eg-title, .eg-subtitle { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
.eg-title { color: #155e4b; font-size: 40rpx; font-weight: 800; }
.eg-subtitle { margin-top: 2rpx; color: #648278; font-size: 24rpx; }
@@ -176,6 +213,7 @@
.eg-cell.is-milk { background: #edf7ff; }
.eg-cell.is-high { border-color: #ef7b45; }
.eg-food-image { width: 132rpx; height: 92rpx; margin-top: 7rpx; border-radius: 17rpx; filter: saturate(1.06) contrast(1.03); }
.eg-food-image.is-large-square { width: 136rpx; height: 102rpx; margin-top: 2rpx; filter: saturate(1.1) contrast(1.06); }
.eg-food-name { margin-top: 8rpx; color: #203d34; font-size: 29rpx; font-weight: 900; letter-spacing: 1rpx; line-height: 1.1; }
.eg-sugar-tag { position: absolute; top: 5rpx; right: 5rpx; min-width: 52rpx; padding: 4rpx 10rpx; border: 2rpx solid #fff; border-radius: 999rpx; color: #fff; box-shadow: 0 3rpx 8rpx rgba(25,55,45,.22); font-size: 23rpx; font-weight: 900; line-height: 1.25; text-align: center; }
.eg-sugar-tag.is-low { color: #316a54; border-color: rgba(255,255,255,.82); background: #dcefe6; box-shadow: 0 2rpx 5rpx rgba(32,101,75,.1); }
@@ -438,6 +476,13 @@
100% { opacity: 0; transform: translate3d(350rpx, 1205rpx, 0) scale(.3) rotate(2deg); }
}
@keyframes egNavNotice {
0% { opacity: 0; transform: translate(-50%, -42%); }
12% { opacity: .9; transform: translate(-50%, -50%); }
42% { opacity: .82; transform: translate(-50%, -50%); }
100% { opacity: 0; transform: translate(-50%, -58%); }
}
@keyframes egRewardGlow {
from { opacity: .4; transform: scale(.86); }
to { opacity: .9; transform: scale(1.12); }