1525 lines
25 KiB
Plaintext
1525 lines
25 KiB
Plaintext
.assessment-container {
|
|
/* min-height: 100vh; */
|
|
/* background-color: #f5f5f5; */
|
|
/* background-color: #fef6e4; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* 顶部图片区域 */
|
|
.image-section {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.assessment-image {
|
|
display: block;
|
|
width: 60%;
|
|
height: auto;
|
|
margin: 40rpx auto 0;
|
|
border-radius: 30rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
transition: width 500ms ease, height 500ms ease, margin 500ms ease, border-radius 500ms ease;
|
|
}
|
|
|
|
.assessment-image.small {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin: 20rpx auto 0; /* 缩小时减少上边距，视觉更紧凑 */
|
|
}
|
|
|
|
/* 中间例句区域 */
|
|
.sentence-section {
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: calc(100vh - 500rpx);
|
|
padding-bottom: calc(0px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.sentence-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.arrow-btn {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f3d2c1;
|
|
border-radius: 50%;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.arrow-btn:active {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.arrow-btn.disabled {
|
|
background: #f3d2c1;
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.arrow-btn.disabled t-icon {
|
|
color: #999999;
|
|
}
|
|
|
|
.sentence-content {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.sentence-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
/* margin-top: 30rpx; */
|
|
padding: 24rpx 0;
|
|
border-bottom: 4rpx solid #f5f5f5;
|
|
}
|
|
|
|
.sentence-content-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 10rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.word-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.sentence-text {
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.sentence-ipa {
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.word-zh {
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 26rpx;
|
|
padding-top: 12rpx;
|
|
}
|
|
|
|
.page-indicator {
|
|
margin-top: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.microphone-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.audio-control {
|
|
width: 80%;
|
|
padding: 12rpx 16rpx;
|
|
/* background: #ffffff; */
|
|
border-radius: 16rpx;
|
|
/* box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); */
|
|
border: 6rpx solid #000;
|
|
}
|
|
|
|
.audio-title {
|
|
font-size: 28rpx;
|
|
color: #181818;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.audio-player {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
/* gap: 24rpx; */
|
|
}
|
|
|
|
.play-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
/* background: #f0f0f0; */
|
|
border: 6rpx solid #000;
|
|
}
|
|
|
|
.progress-slider {
|
|
flex: 1;
|
|
--td-slider-bar-height: 8rpx;
|
|
--td-slider-dot-size: 32rpx;
|
|
}
|
|
|
|
.countdown {
|
|
font-size: 32rpx;
|
|
color: #ff3b30;
|
|
font-weight: bold;
|
|
margin-top: 16rpx;
|
|
animation: fadeInOut 1s infinite;
|
|
}
|
|
|
|
@keyframes fadeInOut {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
.microphone {
|
|
transition: all 0.3s ease;
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.microphone.recording {
|
|
background: transparent;
|
|
/* transform: scale(1.1); */
|
|
/* background: #ff3b30 !important; */
|
|
/* box-shadow: 0 4rpx 16rpx rgba(255, 59, 48, 0.3); */
|
|
/* animation: pulse 1.5s infinite; */
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1.1);
|
|
}
|
|
50% {
|
|
transform: scale(1.8);
|
|
}
|
|
100% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
/* 底部评分结果区域 */
|
|
.score-section {
|
|
padding: 24rpx 16rpx;
|
|
background: #ffffff;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
transition: all 0.3s ease-in-out;
|
|
max-height: 20vh;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.score-section.expanded {
|
|
transform: translateY(0);
|
|
height: 80vh;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.score-section::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 16rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60rpx;
|
|
height: 6rpx;
|
|
background: #e0e0e0;
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
.expanded .score-section::after {
|
|
display: none;
|
|
}
|
|
|
|
.mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 99;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.expanded + .mask {
|
|
opacity: 1;
|
|
}
|
|
|
|
.score-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20rpx 40rpx;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.score-image-container {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.expanded .score-overview {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.total-score {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.circle-progress {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
background: #f0f0f0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.circle-canvas {
|
|
position: absolute;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.circle-progress::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.circle-progress::after{
|
|
content: "";
|
|
position: absolute;
|
|
inset: 8rpx;
|
|
background: #ffffff;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.total-score-value {
|
|
font-size: 28rpx;
|
|
color: #001858;
|
|
font-weight: bold;
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: 28rpx;
|
|
}
|
|
|
|
.total-score-label {
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 4rpx;
|
|
line-height: 22rpx;
|
|
}
|
|
|
|
.score-details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.score-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.score-label {
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.score-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.score-value {
|
|
font-size: 24rpx;
|
|
color: #001858;
|
|
font-weight: bold;
|
|
width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.score-item .no-score-text {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #001858;
|
|
border-radius: 3rpx;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.no-score {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.no-score-text {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 单词评分列表样式 */
|
|
.match-tag-legend {
|
|
/* margin-top: 40rpx; */
|
|
padding: 16rpx 0;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.legend-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.legend-title {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.legend-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.color-box {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.legend-text {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.word-scores-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
height: calc(100vh - 420rpx);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.word-score-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
padding: 16rpx;
|
|
border-bottom: 1rpx solid #e0e0e0;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.word-score-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.word-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.phone-infos {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.phone-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 4rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
}
|
|
|
|
.phone-text {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.phone-score {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.word-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.word-score-details {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.word-score-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.word-score-label {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.word-score-value {
|
|
font-size: 22rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
}
|
|
|
|
.t-sticky {
|
|
position: sticky !important;
|
|
top: 0;
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
/* 高亮遮罩与单词浮层 */
|
|
.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;
|
|
/* pointer-events: none; */
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
.highlight-area.show { display: block; opacity: 1; }
|
|
.overlay-word {
|
|
position: fixed;
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
opacity: 0;
|
|
transition: opacity 500ms ease;
|
|
}
|
|
.overlay-word .overlay-text { color: #ffffff; }
|
|
.overlay-word.show { opacity: 1; }
|
|
.overlay-word.show .overlay-text { font-weight: 600; }
|
|
.overlay-word.zoom { transform-origin: center center; transition: transform 500ms ease; }
|
|
|
|
.page-loading-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: transparent;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.recording-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: transparent;
|
|
z-index: 99;
|
|
}
|
|
|
|
.bottom-button {
|
|
padding: 20rpx;
|
|
border-radius: 50%;
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
|
|
/* ul 动画按钮样式 */
|
|
.ul {
|
|
position: relative;
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
background: transparent;
|
|
}
|
|
|
|
.ul .dot1,
|
|
.ul .dot2,
|
|
.ul .dot3 {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #666;
|
|
border-radius: 50%;
|
|
border: none;
|
|
transition: 0.6s;
|
|
}
|
|
|
|
.ul .dot1 { left: 10%; z-index: 2; }
|
|
.ul .dot2 { left: 50%; transition: .6s; }
|
|
.ul .dot3 { left: 90%; z-index: 2; }
|
|
|
|
.ul.active .dot1,
|
|
.ul.active .dot3 {
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 0;
|
|
width: 8rpx;
|
|
height: 48rpx;
|
|
border-radius: 8rpx;
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.ul.active .dot1 {
|
|
transform: translate(-50%, -50%) rotate(405deg);
|
|
}
|
|
|
|
.ul.active .dot3 {
|
|
transform: translate(-50%, -50%) rotate(-405deg);
|
|
}
|
|
|
|
.ul.active .dot2 {
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
background: #f5f5f5;
|
|
border: 4rpx solid #e0e0e0;
|
|
}
|
|
|
|
.bottom-button-img-wrap {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.trans-button {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.trans-button.left-half {
|
|
left: 20rpx;
|
|
clip-path: inset(0 50% 0 0);
|
|
}
|
|
|
|
.trans-button.right-half {
|
|
right: 20rpx;
|
|
clip-path: inset(0 0 0 50%);
|
|
}
|
|
|
|
.trans-button.trans-active {
|
|
color: #0096fa;
|
|
z-index: 1;
|
|
}
|
|
|
|
.trans-button.trans-deactive {
|
|
color: #666;
|
|
}
|
|
|
|
.bottom-button.more-open {
|
|
color: #0096fa;
|
|
}
|
|
|
|
/* .bottom-button-img-wrap {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
} */
|
|
|
|
/* 词典样式 */
|
|
.dictionary {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.dictionary-content {
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
}
|
|
|
|
.dictionary-pos {
|
|
display: inline;
|
|
color: #33272a;
|
|
}
|
|
|
|
.dictionary-tran {
|
|
display: inline;
|
|
padding-left: 16rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dictionary-tran-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dictionary-list {
|
|
padding: 16rpx 0;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.word-sent-zh {
|
|
color:#909090;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.word-info {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.word-exam {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 16rpx;
|
|
padding: 10rpx 15rpx;
|
|
background: #e3f2fd;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.word-similar {
|
|
font-size: 26rpx;
|
|
color: #001858;
|
|
padding: 8rpx 16rpx;
|
|
background: #fff3e0;
|
|
border-radius: 30rpx;
|
|
display: inline-block;
|
|
margin-right: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.sentence-wrapper.selected {
|
|
border-bottom: 2rpx solid #001858;
|
|
}
|
|
|
|
.sentence-wrapper.selected .sentence-text {
|
|
color: #001858;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 评分弹窗头部新增播放按钮样式 */
|
|
.score-modal-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.score-modal-play {
|
|
flex-shrink: 0;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.score-modal-close {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
right: 16rpx;
|
|
color: #666;
|
|
}
|
|
|
|
/* 弹窗内部的滚动与布局优化 */
|
|
.score-modal-content .score-container {
|
|
/* max-height: calc(86vh - 120rpx); */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.score-modal-content {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
z-index: 999;
|
|
transform: translateY(100%);
|
|
transition: transform 0ms ease-out;
|
|
}
|
|
|
|
.score-modal-content.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.score-modal-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
z-index: 998;
|
|
}
|
|
|
|
.score-modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.score-overview {
|
|
/* padding-top: 40rpx; */
|
|
}
|
|
|
|
.score-circles {
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.circle-item {
|
|
/* flex: 1; */
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.circle-item .circle-progress::before {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
.circle-progress::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.score-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.score-label {
|
|
font-size: 22rpx;
|
|
color: #666666;
|
|
width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.score-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.score-value {
|
|
font-size: 24rpx;
|
|
color: #001858;
|
|
font-weight: bold;
|
|
width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.score-item .no-score-text {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 6rpx;
|
|
background: #f0f0f0;
|
|
border-radius: 3rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #001858;
|
|
border-radius: 3rpx;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.no-score {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.no-score-text {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.legend-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.legend-title {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.legend-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.color-box {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.legend-text {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.word-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.word-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.word-score-details {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.word-score-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.word-score-label {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.word-score-value {
|
|
font-size: 22rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/* 弹窗整体样式 */
|
|
.word-popup {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
border-top-left-radius: 12rpx;
|
|
border-top-right-radius: 12rpx;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s ease;
|
|
z-index: 100;
|
|
overflow-y: scroll;
|
|
min-height: 600rpx;
|
|
/* height: 100%; */
|
|
}
|
|
|
|
.word-popup.expanded {
|
|
height: 100vh;
|
|
border-top-left-radius: 0rpx;
|
|
border-top-right-radius: 0rpx;
|
|
}
|
|
|
|
/* 弹窗头部 */
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.t-sticky {
|
|
position: sticky !important;
|
|
top: 0;
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
.word-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.word-source {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* 频率标签容器 */
|
|
.frequency-tags {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
min-height: 48rpx; /* 确保即使没有标签也有最小高度 */
|
|
}
|
|
|
|
/* 关闭按钮 */
|
|
.close-btn {
|
|
flex-shrink: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.more-btn {
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
/* 发音区域 */
|
|
.pronounce {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.pron-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
font-size: 24rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.pron-item-text {
|
|
padding-right: 8rpx;
|
|
}
|
|
|
|
.sound-btn {
|
|
background: transparent;
|
|
border: none;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
/* 基础词性释义 */
|
|
.word-meanings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* 扩展内容区域 */
|
|
.extended-content {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.bottom-mask {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: #fff;
|
|
z-index: 99;
|
|
}
|
|
|
|
/* 遮罩层样式 */
|
|
.word-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 99;
|
|
}
|
|
|
|
.tab-bar {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.tab {
|
|
padding: 10rpx 20rpx;
|
|
margin-right: 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.tab.active {
|
|
color: #007AFF;
|
|
border-bottom: 2rpx solid #007AFF;
|
|
}
|
|
|
|
.syllabus-title, .example-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
display: block;
|
|
}
|
|
|
|
.syllabus-stats {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.progress-item {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.progress {
|
|
height: 10rpx;
|
|
background: #eee;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.example-sentence {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 真题例句样式 */
|
|
.exam-sents {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.exam-sent {
|
|
padding: 10rpx 0;
|
|
border-bottom: 1rpx solid #e0e0e0;
|
|
}
|
|
|
|
.exam-sent-en {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.exam-sent-zh {
|
|
font-size: 28rpx;
|
|
color: #909090;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.exam-sent-source {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
text-align: right;
|
|
}
|
|
|
|
.no-exam-sents {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #909090;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
/* 同义词样式 */
|
|
.syno {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.syno-title {
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.syno-list {
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #e0e0e0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.syno-pos {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.syno-tran {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin: 12rpx 0;
|
|
display: inline;
|
|
vertical-align: middle;
|
|
padding-left: 16rpx;
|
|
}
|
|
|
|
.syno-item {
|
|
display: inline-block;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
/* 相关单词样式 */
|
|
.rel-word {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.rel-word-title {
|
|
font-size: 32rpx;
|
|
line-height: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.rel-word-list {
|
|
padding: 20rpx;
|
|
background: #f9f9f9;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.rel-word-pos {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.rel-word-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15rpx 0;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.rel-word-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rel-word-tran {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.rel-word-word {
|
|
font-size: 28rpx;
|
|
color: #001858;
|
|
font-weight: 500;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
/* 区分单词样式 */
|
|
.discriminate {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.discriminate-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.discriminate-list {
|
|
padding: 20rpx;
|
|
background: #f9f9f9;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.discriminate-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15rpx 0;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.discriminate-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.discriminate-tran {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.button-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.bottom-button-area {
|
|
position: fixed;
|
|
bottom: calc(0px + constant(safe-area-inset-bottom));
|
|
bottom: calc(0px + env(safe-area-inset-bottom));
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
background: #ffffff;
|
|
border-top: 1rpx solid #e0e0e0;
|
|
min-height: 100rpx;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* 浮动更多功能区 */
|
|
.bottom-more-area {
|
|
position: fixed;
|
|
bottom: calc(150rpx + env(safe-area-inset-bottom));
|
|
right: 0;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
z-index: 101;
|
|
}
|
|
.bottom-more-area .more-items {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
gap: 24rpx;
|
|
padding: 0 24rpx;
|
|
}
|
|
.bottom-more-area .more-item {
|
|
pointer-events: auto;
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
border-radius: 12rpx;
|
|
padding: 8rpx 16rpx;
|
|
box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.06);
|
|
transform: translateY(60rpx);
|
|
font-size: 28rpx;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes bubbleUp {
|
|
0% { transform: translateY(60rpx) scale(0.9); opacity: 0; }
|
|
60% { transform: translateY(-6rpx) scale(1.02); opacity: 1; }
|
|
100% { transform: translateY(0) scale(1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes bubbleDown {
|
|
0% { transform: translateY(0) scale(1); opacity: 1; }
|
|
40% { transform: translateY(-6rpx) scale(0.98); opacity: 0.8; }
|
|
100% { transform: translateY(60rpx) scale(0.9); opacity: 0; }
|
|
}
|
|
|
|
.bottom-more-area.open .more-item:nth-child(1) { animation: bubbleUp 380ms ease forwards; }
|
|
.bottom-more-area.open .more-item:nth-child(2) { animation: bubbleUp 380ms ease forwards 120ms; }
|
|
.bottom-more-area.open .more-item:nth-child(3) { animation: bubbleUp 380ms ease forwards 240ms; }
|
|
|
|
.bottom-more-area.close .more-item:nth-child(1) { animation: bubbleDown 320ms ease forwards; }
|
|
.bottom-more-area.close .more-item:nth-child(2) { animation: bubbleDown 320ms ease forwards 120ms; }
|
|
.bottom-more-area.close .more-item:nth-child(3) { animation: bubbleDown 320ms ease forwards 240ms; }
|
|
|
|
/* 防止关闭时因移除 open 类导致回到基态引起闪烁 */
|
|
.bottom-more-area.close .more-item {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.t-cell {
|
|
padding: var(--td-cell-vertical-padding,16rpx) var(--td-cell-horizontal-padding,0) !important;
|
|
}
|
|
|
|
.no-related-words {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #909090;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.no-word {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #909090;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
/* mic 动效容器，跟随底部按钮位置 */
|
|
.mic-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
/* 仅在 isRecording 时显示的动效，居中覆盖在按钮上方 */
|
|
.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; /* 原为 4px 4px */
|
|
}
|
|
.mic::before {
|
|
width: 72rpx; /* 原为 60rpx */
|
|
height: 72rpx; /* 原为 60rpx */
|
|
background-color: #1a084e;
|
|
}
|
|
.mic::after {
|
|
width: 48rpx; /* 原为 40rpx */
|
|
height: 48rpx; /* 原为 40rpx */
|
|
background-color: #2f1e5f;
|
|
animation: mic-circle-size 0.8s linear infinite alternate;
|
|
}
|
|
|
|
.mic-shadow {
|
|
width: 72rpx; /* 原为 60rpx */
|
|
height: 72rpx; /* 原为 60rpx */
|
|
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; }
|
|
}
|
|
|
|
.loading-shimmer {
|
|
/* transition: all 0.3s ease; */
|
|
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;
|
|
}
|
|
}
|
|
.bottom-button.disabled,
|
|
.mic-wrap.disabled,
|
|
.bottom-button-img-wrap.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|