ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Your Name
2026-06-05 15:51:48 +08:00
parent f37310ec50
commit b9d36d8d04
3 changed files with 465 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TUICallKit-Vue3/tongji/styles/game-stitch.scss
+266 -120
View File
@@ -5,8 +5,10 @@
.game-page {
height: 100vh;
height: 100dvh;
background: #f4fbf4; /* VitalMint background */
color: #161d19; /* VitalMint text color */
/* 参考稿：顶部高光的薄荷渐变背景 */
background: #e9f0e9;
background-image: radial-gradient(circle at 50% -20%, #ffffff 0%, #e9f0e9 60%, #d5dcd5 100%);
color: #171d19;
overflow: hidden;
position: relative;
display: flex;
@@ -24,68 +26,72 @@
}
.game-page .gg-glass {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1.5rpx solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.8);
}
/* ===== Header HUD ===== */
/* ===== Header / TopAppBar（参考稿玻璃顶栏） ===== */
.game-page .gg-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
border-radius: 0 0 24rpx 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 108, 73, 0.04);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1rpx solid rgba(0, 108, 73, 0.06);
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.02);
}
.game-page .gg-hud-nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
height: var(--menu-height, 64rpx);
min-height: var(--menu-height, 64rpx);
margin-bottom: 0;
}
.game-page .gg-hud-control-group {
display: flex;
align-items: center;
gap: 10rpx;
gap: 16rpx;
}
/* 玻璃圆形图标按钮 */
.game-page .gg-hud-btn {
width: var(--menu-height, 64rpx);
height: var(--menu-height, 64rpx);
width: 84rpx;
height: 84rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
border: 1rpx solid rgba(0, 108, 73, 0.08);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4rpx 12rpx rgba(0, 108, 73, 0.03);
transition: all 0.2s ease;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.15s ease;
}
.game-page .gg-hud-btn--pressed {
opacity: 0.75;
transform: scale(0.94);
background: rgba(255, 255, 255, 0.95);
}
.game-page .gg-hud-btn.is-muted {
opacity: 0.45;
opacity: 0.55;
}
.game-page .gg-hud-level-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
@@ -93,25 +99,29 @@
}
.game-page .gg-hud-level-text {
font-size: 30rpx;
font-size: 44rpx;
font-weight: 800;
color: #475569;
color: #006c4b;
line-height: 1.1;
letter-spacing: 1rpx;
letter-spacing: 2rpx;
text-shadow: 0 2rpx 6rpx rgba(0, 108, 75, 0.12);
}
.game-page .gg-hud-score {
display: flex;
align-items: baseline;
gap: 4rpx;
gap: 6rpx;
margin-top: 2rpx;
}
.game-page .gg-hud-score-val {
font-size: 44rpx;
font-weight: 900;
color: #006c49;
font-size: 68rpx;
font-weight: 800;
color: #006c4b;
font-variant-numeric: tabular-nums;
line-height: 1.2;
line-height: 1;
letter-spacing: -2rpx;
text-shadow: 0 2rpx 6rpx rgba(0, 108, 75, 0.12);
}
.game-page .gg-hud-score.is-pop .gg-hud-score-val {
@@ -119,9 +129,136 @@
}
.game-page .gg-hud-score-unit {
font-size: 26rpx;
font-size: 28rpx;
font-weight: 700;
color: #64748b;
color: #3d4a42;
}
/* ===== 信息横幅（参考稿玻璃卡 + 绿色 info 图标） ===== */
.game-page .gg-info-banner {
flex-shrink: 0;
width: 100%;
max-width: 750rpx;
margin: 0 auto 20rpx;
padding: 20rpx 24rpx;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 20rpx;
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
.game-page .gg-info-banner-icon {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #00a676, #006c4b);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8rpx 18rpx rgba(0, 108, 75, 0.28);
}
.game-page .gg-info-banner-body {
flex: 1;
min-width: 0;
}
.game-page .gg-info-banner-text {
font-size: 28rpx;
font-weight: 500;
color: #171d19;
line-height: 1.5;
}
.game-page .gg-info-banner-kw {
font-size: 32rpx;
font-weight: 800;
color: #006c4b;
letter-spacing: 1rpx;
}
/* —— 消除后：该食物的含糖 + 建议 —— */
.game-page .gg-info-banner.is-food {
gap: 18rpx;
animation: gg-info-food-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.game-page .gg-info-banner.is-food.is-low { border-color: rgba(22, 163, 74, 0.28); }
.game-page .gg-info-banner.is-food.is-mid { border-color: rgba(234, 88, 12, 0.28); }
.game-page .gg-info-banner.is-food.is-high { border-color: rgba(220, 38, 38, 0.3); }
/* 食物图标：白底 + GI 彩色描边（覆盖默认绿色渐变） */
.game-page .gg-info-banner-icon.is-food {
background: #ffffff;
box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9);
border-width: 2rpx;
border-style: solid;
}
.game-page .gg-info-banner-icon.is-food.is-low { border-color: rgba(22, 163, 74, 0.4); }
.game-page .gg-info-banner-icon.is-food.is-mid { border-color: rgba(234, 88, 12, 0.4); }
.game-page .gg-info-banner-icon.is-food.is-high { border-color: rgba(220, 38, 38, 0.45); }
.game-page .gg-info-banner-icon.is-food .food-tile-icon--goal {
width: 60rpx;
height: 60rpx;
}
.game-page .gg-info-food-head {
display: flex;
align-items: center;
gap: 14rpx;
margin-bottom: 8rpx;
}
.game-page .gg-info-food-name {
font-size: 34rpx;
font-weight: 900;
color: #171d19;
line-height: 1.2;
max-width: 320rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.game-page .gg-info-food-gi {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 4rpx 16rpx;
border-radius: 999rpx;
}
.game-page .gg-info-food-gi-text {
font-size: 24rpx;
font-weight: 800;
color: #ffffff;
letter-spacing: 1rpx;
}
.game-page .gg-info-food-gi.is-low { background: linear-gradient(135deg, #5bdda8, #00a676); box-shadow: 0 2rpx 8rpx rgba(0, 166, 118, 0.32); }
.game-page .gg-info-food-gi.is-mid { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 2rpx 8rpx rgba(217, 119, 6, 0.32); }
.game-page .gg-info-food-gi.is-high { background: linear-gradient(135deg, #f87171, #ba1a1a); box-shadow: 0 2rpx 8rpx rgba(186, 26, 26, 0.34); }
.game-page .gg-info-food-tip {
display: block;
font-size: 26rpx;
font-weight: 600;
color: #3d4a42;
line-height: 1.4;
}
.game-page .gg-info-food-tip.is-low { color: #15803d; }
.game-page .gg-info-food-tip.is-mid { color: #c2410c; }
.game-page .gg-info-food-tip.is-high { color: #b91c1c; }
@keyframes gg-info-food-in {
from { opacity: 0.35; transform: translateY(-6rpx); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== 次：上次消除（名称 + 含糖量），GI 三色编码学习卡 ===== */
@@ -545,8 +682,8 @@
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
padding: 8rpx 1rpx 0;
overflow: visible;
padding: 14rpx 20rpx 0;
}
/* gg-hint-banner 已移除，提示直接显示在棋盘食物上 */
@@ -580,17 +717,16 @@
.game-page .game-grid {
display: flex;
flex-direction: column;
border-radius: 36rpx;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 48rpx;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 20rpx 56rpx rgba(0, 108, 73, 0.14),
0 4rpx 16rpx rgba(15, 23, 42, 0.06),
inset 0 2rpx 12rpx rgba(255, 255, 255, 0.85);
border: 2rpx solid rgba(0, 108, 73, 0.12);
0 12rpx 32rpx rgba(0, 0, 0, 0.06),
inset 0 1px 2px rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.8);
box-sizing: border-box;
overflow: hidden;
overflow: visible;
flex-shrink: 0;
}
@@ -614,14 +750,17 @@
inset: 0;
width: 100%;
height: 100%;
border-radius: 0;
border-radius: 28rpx;
display: flex;
align-items: stretch;
justify-content: stretch;
background: transparent;
box-shadow: none;
border: none;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 251, 245, 0.6));
box-shadow:
0 10rpx 20rpx rgba(0, 108, 75, 0.08),
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8),
inset 0 -2rpx 6rpx rgba(0, 0, 0, 0.02);
border: 1px solid rgba(255, 255, 255, 0.9);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, opacity 0.2s;
z-index: 1;
box-sizing: border-box;
overflow: visible;
@@ -654,13 +793,13 @@
}
.game-page .game-tile.is-selected {
transform: scale(1.12);
transform: scale(1.08);
z-index: 20;
border: none;
box-shadow: none;
outline: 4rpx solid #006c49;
outline-offset: -2rpx;
border-radius: 8rpx;
border: 2px solid #00a676;
border-radius: 28rpx;
box-shadow:
0 0 20rpx rgba(0, 166, 118, 0.35),
inset 0 0 10rpx rgba(0, 166, 118, 0.12);
}
.game-page .game-tile--pressed {
@@ -863,31 +1002,39 @@
/* ===== 棋子含糖等级常驻角标（认知核心：一眼看出高/中/低糖） ===== */
.game-page .gg-tile-gi {
position: absolute;
top: 2rpx;
left: 2rpx;
z-index: 3;
min-width: 30rpx;
height: 30rpx;
padding: 0 6rpx;
top: -12rpx;
left: 50%;
transform: translateX(-50%);
z-index: 5;
min-width: 40rpx;
padding: 6rpx 16rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
font-weight: 900;
font-weight: 800;
color: #ffffff;
line-height: 1;
letter-spacing: 1rpx;
pointer-events: none;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.25);
border: 2rpx solid rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.6);
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.game-page .gg-tile-gi.is-low { background: #16a34a; }
.game-page .gg-tile-gi.is-mid { background: #e67e22; }
.game-page .gg-tile-gi.is-low {
background: linear-gradient(135deg, rgba(91, 221, 168, 0.95), rgba(0, 166, 118, 0.95));
box-shadow: 0 4rpx 12rpx rgba(0, 166, 118, 0.4), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
}
.game-page .gg-tile-gi.is-mid {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(217, 119, 6, 0.95));
box-shadow: 0 4rpx 12rpx rgba(217, 119, 6, 0.4), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
}
.game-page .gg-tile-gi.is-high {
background: #dc2626;
box-shadow: 0 2rpx 10rpx rgba(220, 38, 38, 0.45);
font-size: 22rpx;
background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(186, 26, 26, 0.95));
box-shadow: 0 4rpx 12rpx rgba(186, 26, 26, 0.4), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
}
/* ===== 点击食物的大字科普卡 ===== */
@@ -980,97 +1127,96 @@
right: 0;
bottom: 0;
z-index: 40;
border-radius: 48rpx 48rpx 0 0;
border-top: 1rpx solid rgba(0, 108, 73, 0.06);
box-shadow: 0 -4rpx 24rpx rgba(0, 108, 73, 0.04);
padding-top: 12rpx;
border-radius: 64rpx 64rpx 0 0;
border-top: 1px solid #ffffff;
box-shadow: 0 -12rpx 40rpx rgba(0, 0, 0, 0.08);
padding-top: 24rpx;
padding-left: 24rpx;
padding-right: 24rpx;
background: rgba(255, 255, 255, 0.78);
}
.game-page .gg-footer--sub .gg-booster-btn {
padding: 16rpx 0;
width: 152rpx;
border-radius: 32rpx;
background: rgba(255, 255, 255, 0.75);
border-color: rgba(0, 108, 73, 0.08);
box-shadow: 0 4rpx 12rpx rgba(0, 108, 73, 0.04);
}
.game-page .gg-footer--sub .gg-booster-label {
font-size: 24rpx;
color: #64748b;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
}
.game-page .gg-boosters {
display: flex;
justify-content: space-around;
align-items: center;
align-items: flex-start;
max-width: 750rpx;
margin: 0 auto;
}
/* 单个道具：图标卡 + 角标 + 文字 */
.game-page .gg-booster-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 22rpx 0;
width: 176rpx;
background: rgba(255, 255, 255, 0.85);
border: 1.5rpx solid rgba(0, 108, 73, 0.12);
border-radius: 40rpx;
box-shadow: 0 8rpx 20rpx rgba(0, 108, 73, 0.03), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
padding: 8rpx 0;
width: 184rpx;
background: transparent;
border: none;
transition: transform 0.2s ease;
}
.game-page .gg-booster-btn--pressed {
.game-page .gg-booster-tile {
position: relative;
width: 112rpx;
height: 112rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.85);
border: 1px solid #ffffff;
box-shadow: 0 8rpx 18rpx rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.9);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.game-page .gg-booster-btn--pressed .gg-booster-tile {
transform: scale(0.92);
background: rgba(255, 255, 255, 0.65);
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.06);
}
.game-page .gg-booster-btn.is-disabled {
opacity: 0.35;
opacity: 0.4;
filter: grayscale(100%);
pointer-events: none !important;
}
.game-page .gg-booster-count {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 52rpx;
height: 52rpx;
border-radius: 50%;
top: -12rpx;
right: -12rpx;
min-width: 50rpx;
height: 50rpx;
padding: 0 10rpx;
border-radius: 26rpx;
color: #fff;
font-size: 30rpx;
font-weight: 900;
font-size: 28rpx;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 4rpx solid #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
border: 3rpx solid #ffffff;
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.18);
text-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.2);
z-index: 2;
}
.game-page .gg-booster-count.is-green { background: #10b981; }
.game-page .gg-booster-count.is-orange { background: #f97316; }
.game-page .gg-booster-count.is-rose { background: #f43f5e; }
.game-page .gg-booster-count.is-green { background: linear-gradient(135deg, #00a676, #006c4b); box-shadow: 0 4rpx 10rpx rgba(0, 166, 118, 0.3); }
.game-page .gg-booster-count.is-orange { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4rpx 10rpx rgba(217, 119, 6, 0.3); }
.game-page .gg-booster-count.is-rose { background: linear-gradient(135deg, #ef4444, #ba1a1a); box-shadow: 0 4rpx 10rpx rgba(186, 26, 26, 0.3); }
.game-page .gg-booster-icon {
margin-bottom: 8rpx;
transition: transform 0.25s ease;
}
.game-page .gg-booster-btn--pressed .gg-booster-icon {
transform: scale(0.85);
transition: transform 0.2s ease;
}
.game-page .gg-booster-label {
margin-top: 14rpx;
font-size: 30rpx;
font-weight: 700;
color: #2b3a32;
color: #3d4a42;
letter-spacing: 1rpx;
}
/* ===== 高糖消除红色警示弹窗 ===== */