480 lines
9.1 KiB
Plaintext
480 lines
9.1 KiB
Plaintext
.scene-sentence-container {
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
/* padding-bottom: calc(220rpx + env(safe-area-inset-bottom)); */
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.page-loading-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: transparent;
|
|
z-index: 1000;
|
|
}
|
|
.loading-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
/* 遮罩层样式 */
|
|
.word-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 99;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
max-width: 750rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.fade-in { animation: fadeInUp 260ms ease forwards; }
|
|
.fade-out { animation: fadeOutDown 200ms ease forwards; }
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translate3d(0, 12rpx, 0); }
|
|
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
}
|
|
@keyframes fadeOutDown {
|
|
from { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
to { opacity: 0; transform: translate3d(0, 12rpx, 0); }
|
|
}
|
|
|
|
.sentence-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.sentence-body {
|
|
flex: 1;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-bottom: calc(120rpx + env(safe-area-inset-bottom)) ;
|
|
}
|
|
.sentence-content-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
justify-content: center;
|
|
}
|
|
.sentence-word {
|
|
font-size: 40rpx;
|
|
line-height: 56rpx;
|
|
color: #001858;
|
|
font-weight: 600;
|
|
}
|
|
.sentence-en {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #001858;
|
|
line-height: 56rpx;
|
|
}
|
|
.sentence-zh {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.sentence-tips {
|
|
font-size: 24rpx;
|
|
color: #dddddd;
|
|
text-align: center;
|
|
}
|
|
/* 高亮遮罩与单词浮层 */
|
|
.highlight-area {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: calc(120rpx + env(safe-area-inset-bottom));
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 99;
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
.highlight-area.show { display: block; opacity: 1; }
|
|
.overlay-word {
|
|
position: fixed;
|
|
color: #ffffff;
|
|
font-size: 40rpx;
|
|
line-height: 56rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
opacity: 0;
|
|
transition: opacity 500ms ease;
|
|
font-weight: 600;
|
|
}
|
|
.overlay-word .overlay-text {
|
|
color: #ffffff;
|
|
}
|
|
.overlay-word.show { opacity: 1; }
|
|
.overlay-word.zoom { transform-origin: center center; transition: transform 500ms ease; }
|
|
.loading-shimmer {
|
|
animation: loading-shimmer 3s ease infinite;
|
|
}
|
|
@keyframes loading-shimmer {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
color: #ffffff;
|
|
}
|
|
15% {
|
|
transform: translate(0, -2rpx) scale(1.2);
|
|
color: #eee;
|
|
}
|
|
30%, 100% {
|
|
transform: translate(0, 0) scale(1);
|
|
color: #fff;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.recording-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: transparent;
|
|
z-index: 99;
|
|
}
|
|
.mic-wrap {
|
|
position: relative;
|
|
width: 88rpx;
|
|
}
|
|
.microphone {
|
|
transition: all 0.3s ease;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.microphone.recording {
|
|
background: transparent;
|
|
color: #fff;
|
|
}
|
|
.mic {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mic::before,
|
|
.mic::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 100%;
|
|
z-index: 2;
|
|
box-shadow: 0 0 4.8px 4.8px #1c084f;
|
|
}
|
|
|
|
.mic::before {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background-color: #1a084e;
|
|
}
|
|
|
|
.mic::after {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background-color: #2f1e5f;
|
|
animation: mic-circle-size 0.8s linear infinite alternate;
|
|
}
|
|
|
|
.mic-shadow {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 100%;
|
|
z-index: 1;
|
|
box-shadow: 3.6rpx -14.4rpx 7.2rpx 3.6rpx #823ca6,
|
|
9.6rpx -2.4rpx 14.4rpx 3.6rpx #aab3d2,
|
|
9.6rpx 7.2rpx 26.4rpx 3.6rpx #5acee3,
|
|
19.2rpx 2.4rpx 7.2rpx 3.6rpx #1b7d8f,
|
|
2.4rpx 1.2rpx 21.6rpx 3.6rpx #f30bf5;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: 0% 0%;
|
|
animation: mic-shadow-rotate 2s linear infinite;
|
|
}
|
|
|
|
@keyframes mic-circle-size {
|
|
from {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
to {
|
|
width: 57.6rpx;
|
|
height: 57.6rpx;
|
|
}
|
|
}
|
|
|
|
@keyframes mic-shadow-rotate {
|
|
from { rotate: 0deg; }
|
|
to { rotate: 360deg; }
|
|
}
|
|
|
|
.tags-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
margin-bottom: 24rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.tip-card {
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
border: 2rpx solid #e6eef9;
|
|
position: relative;
|
|
margin-bottom: 24rpx;
|
|
overflow: hidden;
|
|
}
|
|
.tip-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -60rpx;
|
|
right: -60rpx;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 50%;
|
|
background-color: #eef3fb;
|
|
opacity: 0.6;
|
|
}
|
|
.tip-title {
|
|
position: relative;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #001858;
|
|
font-weight: 600;
|
|
}
|
|
.tip-content {
|
|
position: relative;
|
|
padding: 0 24rpx;
|
|
padding-bottom: 24rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 42rpx;
|
|
z-index: 1;
|
|
}
|
|
.fluency-hack {
|
|
position: relative;
|
|
display: block;
|
|
margin-top: 16rpx;
|
|
padding: 24rpx 24rpx 28rpx;
|
|
border-top: 2rpx solid #e6eef9;
|
|
background: #eef3fb;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
}
|
|
.hack-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #001858;
|
|
font-weight: 600;
|
|
}
|
|
.hack-content {
|
|
margin-top: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10rpx;
|
|
font-size: 30rpx;
|
|
color: #001858;
|
|
font-weight: 600;
|
|
margin: 24rpx 0 12rpx;
|
|
}
|
|
.section-count {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
font-weight: 400;
|
|
}
|
|
.core-vocab {
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
padding: 12rpx;
|
|
}
|
|
|
|
.core-vocab-tag {
|
|
margin: 8rpx 12rpx 8rpx 0;
|
|
}
|
|
|
|
.collocations {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.mistake-card {
|
|
position: relative;
|
|
padding: 24rpx;
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
border: 2rpx solid #e6eef9;
|
|
margin: 12rpx 0 24rpx;
|
|
overflow: hidden;
|
|
}
|
|
.mistake-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 8rpx;
|
|
border-top-left-radius: 20rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
background: #eef3fb;
|
|
}
|
|
.mistake-title {
|
|
font-size: 28rpx;
|
|
color: #001858;
|
|
font-weight: 600;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.mistake-item {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 42rpx;
|
|
}
|
|
.scene-explain {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 40rpx;
|
|
background: #fafafa;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
box-shadow: 0 -8rpx 24rpx rgba(0,0,0,0.08);
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
.bottom-bar.show { opacity: 1; }
|
|
.bottom-btn {
|
|
padding: 20rpx;
|
|
border-radius: 50%;
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
.bottom-btn.disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
.score-btn {
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 28rpx;
|
|
background: #f5f5f5;
|
|
color: #001858;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.scanner {
|
|
position: relative;
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
pointer-events: none;
|
|
border-radius: 12rpx;
|
|
background-color: rgba(255, 255, 255, 0.35);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
}
|
|
.scanner-visible { animation: scannerFadeIn 1s 1000ms ease forwards; }
|
|
@keyframes scannerFadeIn { from { opacity: 0 } to { opacity: 1 } }
|
|
|
|
.star { position: relative; opacity: 0; transform-origin: center center; will-change: transform, opacity; }
|
|
.star::after {
|
|
content:"";
|
|
position:absolute;
|
|
width: 36rpx;
|
|
height: 40rpx;
|
|
border-radius: 8rpx;
|
|
background: linear-gradient(337deg, #DE9EFC 7.88%, #31DAFF 107.03%);
|
|
transform:rotate(45deg) skewX(22.5deg) skewY(22.5deg);
|
|
}
|
|
.star::before{
|
|
content:"";
|
|
position:absolute;
|
|
width: 36rpx;
|
|
height: 40rpx;
|
|
border-radius: 8rpx;
|
|
background: linear-gradient(78.35deg, #DE9EFC 7.88%, #31DAFF 107.03%);
|
|
transform:rotate(-45deg) skewX(22.5deg) skewY(22.5deg);
|
|
}
|
|
.scanner-visible .star { animation: starCycle 3000ms ease-in-out infinite; }
|
|
.scanner-visible .star1 { animation-delay: 1000ms; }
|
|
.scanner-visible .star2 { animation-delay: 2000ms; }
|
|
.scanner-visible .star3 { animation-delay: 3000ms; }
|
|
@keyframes starCycle {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-24rpx, -24rpx) scale(0.5);
|
|
}
|
|
34% {
|
|
opacity: 1;
|
|
transform: translate(-24rpx, -24rpx) scale(0.5);
|
|
}
|
|
67% {
|
|
opacity: 1;
|
|
transform: translate(0rpx, 0rpx) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(36rpx, 36rpx) scale(0.5);
|
|
}
|
|
}
|