|
|
@@ -15,6 +15,168 @@ $seaweed: #4CAF50;
|
|
|
--ion-background-color: #{$ocean-foam};
|
|
|
}
|
|
|
|
|
|
+ion-content {
|
|
|
+ --overflow: hidden; // 禁止内容溢出滚动
|
|
|
+ overflow-y: hidden; // 双重保障
|
|
|
+}
|
|
|
+
|
|
|
+// ==================== 串词成文弹窗样式复用（用于“退出游戏”）====================
|
|
|
+.wizard-modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1000;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .wizard-modal-container {
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
|
+ overflow: hidden;
|
|
|
+ border: 12px solid #11b1f6;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .exit-modal-container {
|
|
|
+ max-width: 360px;
|
|
|
+}
|
|
|
+
|
|
|
+// 继续游戏前 3 秒倒计时：圆圈 + 数字，海洋主题
|
|
|
+.wizard-modal-overlay .exit-modal-countdown {
|
|
|
+ text-align: center;
|
|
|
+ padding: 16px 0 8px;
|
|
|
+
|
|
|
+ .countdown-circle {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, $ocean-foam 0%, $ocean-surface 100%);
|
|
|
+ border: 4px solid $ocean-mid;
|
|
|
+ box-shadow: 0 4px 16px rgba(2, 136, 209, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countdown-number {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ font-weight: 800;
|
|
|
+ color: $ocean-deep;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countdown-hint {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 1.15rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $ocean-mid;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .wizard-header {
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .wizard-header h3 {
|
|
|
+ margin: 0 0 16px 0;
|
|
|
+ font-size: 1.6rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .exit-modal-text {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 0 14px 0;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .wizard-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .wizard-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 14px 24px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ font-weight: 700;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ outline: none;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .wizard-btn:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ background-color: #11b1f6 !important;
|
|
|
+ color: white !important;
|
|
|
+ border-color: #11b1f6 !important;
|
|
|
+ transform: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-secondary {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #333;
|
|
|
+ border: 3px solid #e1dede;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-secondary:hover:not(:disabled) {
|
|
|
+ background-color: #e8e8e8;
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-primary {
|
|
|
+ background-color: #11b1f6;
|
|
|
+ color: white;
|
|
|
+ border: 3px solid #11b1f6;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-primary:hover:not(:disabled) {
|
|
|
+ background-color: #0fa3e0;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 4px 12px rgba(17, 177, 246, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-primary:active:not(:disabled) {
|
|
|
+ transform: scale(0.98) translateY(0);
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-highlight {
|
|
|
+ background-color: #11B1F6 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.wizard-modal-overlay .btn-highlight:hover:not(:disabled) {
|
|
|
+ background-color: #0fa3e0 !important;
|
|
|
+ box-shadow: 0 4px 12px rgba(17, 177, 246, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
// 完全套用串词成文页面的基础样式
|
|
|
.word-story-content {
|
|
|
--background: #{$ocean-foam};
|
|
|
@@ -79,9 +241,44 @@ $seaweed: #4CAF50;
|
|
|
}
|
|
|
|
|
|
&.jellyfish {
|
|
|
- top: 30%;
|
|
|
- left: 10%;
|
|
|
- animation: float 6s ease-in-out infinite;
|
|
|
+ bottom: 14%;
|
|
|
+ top: auto;
|
|
|
+ left: 50%;
|
|
|
+ right: auto;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ animation: jelly-bob 5.5s ease-in-out infinite;
|
|
|
+
|
|
|
+ .jellyfish-svg {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ opacity: 0.45;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.seaweed-1 {
|
|
|
+ bottom: 6%;
|
|
|
+ left: 18%;
|
|
|
+ animation: seaweed-sway 4.8s ease-in-out infinite;
|
|
|
+
|
|
|
+ .seaweed-svg {
|
|
|
+ width: 82px;
|
|
|
+ height: 82px;
|
|
|
+ opacity: 0.55;
|
|
|
+ transform-origin: center bottom;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.seaweed-2 {
|
|
|
+ bottom: 6%;
|
|
|
+ right: 14%;
|
|
|
+ animation: seaweed-sway 5.6s ease-in-out infinite 0.5s;
|
|
|
+
|
|
|
+ .seaweed-svg {
|
|
|
+ width: 62px;
|
|
|
+ height: 62px;
|
|
|
+ opacity: 0.38;
|
|
|
+ transform-origin: center bottom;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&.bubble-1 {
|
|
|
@@ -352,14 +549,16 @@ $seaweed: #4CAF50;
|
|
|
color: #01579B;
|
|
|
}
|
|
|
|
|
|
- &:hover {
|
|
|
- border-color: #29B6F6;
|
|
|
- background: #29B6F6;
|
|
|
- color: white;
|
|
|
- transform: translateY(-1px);
|
|
|
-
|
|
|
- .option-text {
|
|
|
+ @media (hover: hover) and (pointer: fine) {
|
|
|
+ &:hover {
|
|
|
+ border-color: #29B6F6;
|
|
|
+ background: #29B6F6;
|
|
|
color: white;
|
|
|
+ transform: translateY(-1px);
|
|
|
+
|
|
|
+ .option-text {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -367,7 +566,7 @@ $seaweed: #4CAF50;
|
|
|
transform: scale(0.96);
|
|
|
}
|
|
|
|
|
|
- &.selected {
|
|
|
+ &.wm-diff-picked {
|
|
|
background: #4FC3F7;
|
|
|
color: white;
|
|
|
border-color: #4FC3F7;
|
|
|
@@ -680,6 +879,10 @@ $seaweed: #4CAF50;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
+ // 在 ion-content 可视区域内的基础居中基础上，再向下微调一点点
|
|
|
+ transform: translateY(10%);
|
|
|
+ // 底部按钮与白色卡片下沿留白
|
|
|
+ padding-bottom: 28px;
|
|
|
|
|
|
.confetti {
|
|
|
position: absolute;
|
|
|
@@ -719,6 +922,30 @@ $seaweed: #4CAF50;
|
|
|
animation: confetti 2s ease-in-out infinite 0.9s;
|
|
|
background: #FF8A80;
|
|
|
}
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ left: 15%;
|
|
|
+ animation: confetti 2s ease-in-out infinite 1.1s;
|
|
|
+ background: #AED581;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ left: 45%;
|
|
|
+ animation: confetti 2s ease-in-out infinite 1.3s;
|
|
|
+ background: #64B5F6;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ left: 70%;
|
|
|
+ animation: confetti 2s ease-in-out infinite 1.5s;
|
|
|
+ background: #FFD54F;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(8) {
|
|
|
+ left: 90%;
|
|
|
+ animation: confetti 2s ease-in-out infinite 1.7s;
|
|
|
+ background: #E57373;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -749,29 +976,48 @@ $seaweed: #4CAF50;
|
|
|
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, transparent 50%);
|
|
|
animation: bubble 2s ease-in-out infinite;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .result-shark {
|
|
|
- width: 60%;
|
|
|
- height: 60%;
|
|
|
- object-fit: contain;
|
|
|
- z-index: 1;
|
|
|
- filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
|
|
|
- animation: jump 1s ease-in-out infinite;
|
|
|
- }
|
|
|
+ // 通关卡通胖星星（替代宝箱）
|
|
|
+ .victory-stars {
|
|
|
+ margin: 8px 0 14px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
- .treasure-chest {
|
|
|
+ .victory-stars-row {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: flex-end;
|
|
|
justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- margin: 10px 0;
|
|
|
-
|
|
|
- .treasure-text {
|
|
|
- font-size: 1.2rem;
|
|
|
- font-weight: 600;
|
|
|
- color: #FFB74D;
|
|
|
- animation: glow 1.5s ease-in-out infinite;
|
|
|
+ gap: 2px;
|
|
|
+ padding: 4px 12px 16px;
|
|
|
+ // 拱形：两侧略低、中间最高，整体呈微笑弧线
|
|
|
+ }
|
|
|
+
|
|
|
+ .cartoon-star {
|
|
|
+ width: 78px;
|
|
|
+ height: 78px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transform: rotate(var(--star-tilt, 0deg));
|
|
|
+ position: relative;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+
|
|
|
+ filter: drop-shadow(0 3px 6px rgba(30, 80, 120, 0.15));
|
|
|
+
|
|
|
+ &--arch-left {
|
|
|
+ transform: translateY(14px) rotate(var(--star-tilt, 0deg)) scale(0.92);
|
|
|
+ }
|
|
|
+ &--arch-mid {
|
|
|
+ transform: translateY(-6px) rotate(var(--star-tilt, 0deg)) scale(1.08);
|
|
|
+ }
|
|
|
+ &--arch-right {
|
|
|
+ transform: translateY(14px) rotate(var(--star-tilt, 0deg)) scale(0.92);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cartoon-star-svg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow: visible;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -785,6 +1031,20 @@ $seaweed: #4CAF50;
|
|
|
background-clip: text;
|
|
|
}
|
|
|
|
|
|
+ // 仅在“挑战成功!”时略放大字体
|
|
|
+ .result-title.result-win {
|
|
|
+ font-size: 2.25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ // “游戏结束!”时改为红色
|
|
|
+ .result-title.result-lose {
|
|
|
+ font-size: 2.25rem;
|
|
|
+ background: linear-gradient(135deg, #C62828, #E53935);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ }
|
|
|
+
|
|
|
.result-stats {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
@@ -793,22 +1053,26 @@ $seaweed: #4CAF50;
|
|
|
|
|
|
.stat-item {
|
|
|
.stat-icon {
|
|
|
- font-size: 1.2rem;
|
|
|
+ font-size: 1.9rem;
|
|
|
+ width: 1.9rem;
|
|
|
+ height: 1.9rem;
|
|
|
color: $ocean-mid;
|
|
|
- margin-bottom: 4px;
|
|
|
+ margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
- font-size: 0.8rem;
|
|
|
+ font-size: 0.95rem;
|
|
|
color: #78909C;
|
|
|
display: block;
|
|
|
- margin-bottom: 4px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
- font-size: 1.2rem;
|
|
|
- font-weight: 700;
|
|
|
+ font-size: 1.6rem;
|
|
|
+ font-weight: 800;
|
|
|
color: $ocean-deep;
|
|
|
+ line-height: 1.15;
|
|
|
|
|
|
&.ocean-number {
|
|
|
color: $ocean-mid;
|
|
|
@@ -817,32 +1081,80 @@ $seaweed: #4CAF50;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .button-group {
|
|
|
+ // 串词成文弹窗 .wizard-footer / .wizard-btn 同款（退出页：左 secondary、右 primary）
|
|
|
+ .wizard-footer--result {
|
|
|
display: flex;
|
|
|
- gap: 12px;
|
|
|
- margin-top: 20px;
|
|
|
+ gap: 16px;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: 32px;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
- .ocean-btn {
|
|
|
- --border-radius: 16px;
|
|
|
- --padding-top: 14px;
|
|
|
- --padding-bottom: 14px;
|
|
|
+ .wizard-footer--result .wizard-btn {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ padding: 17px 12px;
|
|
|
+ border-radius: 18px;
|
|
|
+ font-size: 1.4rem;
|
|
|
+ font-weight: 700;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ outline: none;
|
|
|
+ min-height: 58px;
|
|
|
height: auto;
|
|
|
- margin: 0;
|
|
|
- font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 7px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ }
|
|
|
|
|
|
- &.primary {
|
|
|
- --background: linear-gradient(135deg, $ocean-mid, $ocean-deep);
|
|
|
- --color: white;
|
|
|
- }
|
|
|
+ .wizard-footer--result .wizard-btn .wizard-btn-icon {
|
|
|
+ font-size: 1.75rem;
|
|
|
+ width: 1.75rem;
|
|
|
+ height: 1.75rem;
|
|
|
+ color: inherit;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: block; // 避免 inline 基线对齐导致 SVG 内白色矩形看起来不居中
|
|
|
+ align-self: center;
|
|
|
+ }
|
|
|
|
|
|
- &.secondary {
|
|
|
- --background: transparent;
|
|
|
- --color: $ocean-mid;
|
|
|
- --border-color: $ocean-mid;
|
|
|
- --border-width: 2px;
|
|
|
- --border-style: solid;
|
|
|
- }
|
|
|
+ .wizard-footer--result .wizard-btn.btn-secondary {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #333;
|
|
|
+ border: 3px solid #e1dede;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wizard-footer--result .wizard-btn.btn-secondary:hover:not(:disabled) {
|
|
|
+ background-color: #e8e8e8;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .wizard-footer--result .wizard-btn.btn-primary {
|
|
|
+ background-color: #11b1f6;
|
|
|
+ color: white;
|
|
|
+ border: 3px solid #11b1f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wizard-footer--result .wizard-btn.btn-primary:hover:not(:disabled) {
|
|
|
+ background-color: #0fa3e0;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 4px 12px rgba(17, 177, 246, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .wizard-footer--result .wizard-btn.btn-primary:active:not(:disabled) {
|
|
|
+ transform: scale(0.98) translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .wizard-footer--result .wizard-btn.btn-highlight {
|
|
|
+ background-color: #11b1f6 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wizard-footer--result .wizard-btn.btn-highlight:hover:not(:disabled) {
|
|
|
+ background-color: #0fa3e0 !important;
|
|
|
+ box-shadow: 0 4px 12px rgba(17, 177, 246, 0.4);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -893,6 +1205,26 @@ $seaweed: #4CAF50;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 海草摇晃（左/右轻摆 + 轻微上浮）
|
|
|
+ @keyframes seaweed-sway {
|
|
|
+ 0%, 100% {
|
|
|
+ transform: rotate(-6deg) translateY(0);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: rotate(7deg) translateY(-8px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 水母上下游动
|
|
|
+ @keyframes jelly-bob {
|
|
|
+ 0%, 100% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: translateY(-28px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
@keyframes bubbleUp {
|
|
|
0% {
|
|
|
transform: translateY(0) scale(1);
|
