655 lines
12 KiB
Plaintext
Executable File
655 lines
12 KiB
Plaintext
Executable File
/* result.wxss - 结果展示页面样式（扁平化设计） */
|
||
|
||
.result-container {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
min-height: 100vh;
|
||
position: relative;
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1; /* 占据剩余空间 */
|
||
}
|
||
|
||
/* 图片显示 */
|
||
.result-image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
object-fit: cover; /* 确保图片正确填充容器 */
|
||
}
|
||
|
||
.glow-effect {
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 122, 255, 0.3);
|
||
}
|
||
|
||
/* 图片卡片容器 */
|
||
.image-card-container {
|
||
opacity: 0;
|
||
z-index: 100;
|
||
flex: 1; /* 占据剩余空间 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
@keyframes processingFloat {
|
||
0%, 100% { transform: translateY(0); opacity: 0.3; }
|
||
50% { transform: translateY(-20rpx); opacity: 0.8; }
|
||
}
|
||
|
||
/* 通用气泡容器 */
|
||
.bubbles-container {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 50;
|
||
}
|
||
|
||
/* 通用气泡项 */
|
||
.bubble-item {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.8s ease;
|
||
}
|
||
|
||
/* 卡片气泡容器 */
|
||
.card-bubbles-relative {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.card-bubbles-relative .bubble-item.fade-out {
|
||
animation: cardBubbleBlink 2.2s infinite linear,
|
||
fadeBubble .5s forwards ease-in-out !important;
|
||
}
|
||
|
||
@keyframes fadeBubble {
|
||
to {
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
}
|
||
}
|
||
|
||
@keyframes showBubble {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.bubble-interactive {
|
||
position: absolute;
|
||
display: flex;
|
||
border-radius: 16rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
animation: showBubble .8s forwards ease-in-out,
|
||
bubbleJump 2s ease-in-out infinite !important;
|
||
}
|
||
|
||
.bubble-interactive:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
@keyframes bubbleJump {
|
||
0%, 100% { transform: translateY(0) scale(1); }
|
||
50% { transform: translateY(-10rpx) scale(1.05); }
|
||
}
|
||
|
||
/* 位置1：左侧最上方 */
|
||
.card-bubble-1 {
|
||
left: -100rpx;
|
||
top: 20rpx;
|
||
animation: showCardBubble .4s forwards linear, cardBubbleBlink 2s ease-in-out infinite;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
/* 位置5：左侧中下方 */
|
||
.card-bubble-2 {
|
||
left: -100rpx;
|
||
top: 200rpx;
|
||
animation: showCardBubble .4s forwards linear, cardBubbleBlink 2s ease-in-out infinite;
|
||
animation-delay: 0.4s;
|
||
}
|
||
|
||
/* 位置4：右侧中上方 */
|
||
.card-bubble-3 {
|
||
right: -100rpx;
|
||
top: 110rpx;
|
||
animation: showCardBubble .4s forwards linear, cardBubbleBlink 2s ease-in-out infinite;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
/* 位置8：右侧最下方 */
|
||
.card-bubble-4 {
|
||
right: -100rpx;
|
||
top: 290rpx;
|
||
animation: showCardBubble .4s forwards linear, cardBubbleBlink 2s ease-in-out infinite;
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
/* 位置1：左侧最上方 */
|
||
.result-bubble-1 {
|
||
left: -80rpx;
|
||
top: -25rpx;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
/* 位置5：左侧中下方 */
|
||
.result-bubble-2 {
|
||
left: -80rpx;
|
||
top: 170rpx;
|
||
animation-delay: 0.4s;
|
||
}
|
||
|
||
/* 位置4：右侧中上方 */
|
||
.result-bubble-3 {
|
||
right: -80rpx;
|
||
top: 80rpx;
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
/* 位置8：右侧最下方 */
|
||
.result-bubble-4 {
|
||
right: -80rpx;
|
||
top: 268rpx;
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
/* 卡片气泡 */
|
||
.card-bubble {
|
||
opacity: 0;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(0, 122, 255, 0.6);
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.4);
|
||
}
|
||
|
||
@keyframes showCardBubble {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
}
|
||
to {
|
||
opacity: 0.3;
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
|
||
@keyframes cardBubbleBlink {
|
||
0%, 100% {
|
||
opacity: 0.3;
|
||
transform: scale(0.8);
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.2);
|
||
}
|
||
50% {
|
||
opacity: 0.9;
|
||
transform: scale(1.1);
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.6);
|
||
}
|
||
}
|
||
|
||
/* 结果气泡 */
|
||
.result-bubbles {
|
||
z-index: 50;
|
||
}
|
||
|
||
.bubble-interactive {
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.result-bubble {
|
||
background: #007AFF;
|
||
color: #ffffff;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
|
||
}
|
||
|
||
.result-bubble:active {
|
||
transform: scale(0.9);
|
||
background: #0056CC;
|
||
}
|
||
|
||
.bubble-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
word-break: break-all;
|
||
padding: 8rpx 16rpx;
|
||
}
|
||
|
||
/* 结果显示区域 */
|
||
.result-display-area {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #ffffff;
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
height: 60vh;
|
||
max-height: 60vh;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
padding: 0; /* 确保没有内边距影响布局 */
|
||
box-sizing: border-box; /* 确保padding不会增加元素的总高度 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
z-index: 1000; /* 确保显示在其他元素之上 */
|
||
}
|
||
|
||
.display-header {
|
||
padding: 32rpx 32rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
flex-shrink: 0; /* 防止在flex布局中被压缩 */
|
||
}
|
||
|
||
.display-tabs {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.tab-btn {
|
||
flex: 1;
|
||
background: none;
|
||
border: none;
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background-color: #007AFF;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.tab-word {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.display-content {
|
||
flex: 1; /* 占据剩余空间 */
|
||
height: auto; /* 让flexbox自动计算高度 */
|
||
max-height: none; /* 移除最大高度限制 */
|
||
box-sizing: border-box; /* 确保padding不会增加元素的总高度 */
|
||
overflow-y: auto; /* 确保内容溢出时可以滚动 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.loading-content {
|
||
text-align: center;
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.loading-bar {
|
||
width: 200rpx;
|
||
height: 4rpx;
|
||
background-color: #e5e5e5;
|
||
border-radius: 2rpx;
|
||
margin: 0 auto 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.loading-bar::after {
|
||
content: '';
|
||
display: block;
|
||
width: 50%;
|
||
height: 100%;
|
||
background-color: #007AFF;
|
||
border-radius: 2rpx;
|
||
animation: loading 1.5s infinite ease-in-out;
|
||
}
|
||
|
||
@keyframes loading {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(200%); }
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 1.6;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.content-area {
|
||
height: 100%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
flex: 1; /* 占据剩余空间 */
|
||
overflow-y: auto; /* 确保内容溢出时可以滚动 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.display-actions {
|
||
padding: 16rpx 32rpx 32rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
flex-shrink: 0; /* 防止在flex布局中被压缩 */
|
||
}
|
||
|
||
.action-btn-secondary {
|
||
width: 100%;
|
||
background: #f8f8f8;
|
||
color: #333333;
|
||
border: none;
|
||
padding: 24rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.action-btn-secondary:active {
|
||
background-color: #e8e8e8;
|
||
}
|
||
|
||
/* 加载状态提示 */
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: #ffffff;
|
||
padding: 40rpx;
|
||
border-radius: 16rpx;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.processing-overlay {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: #ffffff;
|
||
padding: 40rpx;
|
||
border-radius: 16rpx;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.processing-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.processing-progress {
|
||
width: 300rpx;
|
||
height: 6rpx;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 3rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background-color: #007AFF;
|
||
border-radius: 3rpx;
|
||
animation: progress 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes progress {
|
||
0% { width: 0%; }
|
||
50% { width: 70%; }
|
||
100% { width: 100%; }
|
||
}
|
||
|
||
/* 单词详情样式 */
|
||
.word-detail-container {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.dict-item {
|
||
margin-bottom: 40rpx;
|
||
border-radius: 16rpx;
|
||
width: 100%; /* 确保宽度正确 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.word-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
}
|
||
|
||
.word-header-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex_start;
|
||
}
|
||
|
||
.word-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #212529;
|
||
}
|
||
|
||
.frequency-tags {
|
||
display: inline-block;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 4rpx 12rpx;
|
||
font-size: 20rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.level-tag {
|
||
background-color: #007AFF;
|
||
color: white;
|
||
}
|
||
|
||
.spoken-tag {
|
||
background-color: #28a745;
|
||
color: white;
|
||
}
|
||
|
||
.written-tag {
|
||
background-color: #ffc107;
|
||
color: #212529;
|
||
}
|
||
|
||
.pronunciations {
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.ipa {
|
||
font-family: arial, helvetica, sans-serif;
|
||
font-size: 24rpx;
|
||
color: #495057;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.ipa-audio {
|
||
padding: 12rpx;
|
||
}
|
||
|
||
.audio-btn {
|
||
background-color: #007AFF;
|
||
color: white;
|
||
border: none;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 20rpx;
|
||
margin-left: 10rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.audio-btn.small {
|
||
padding: 4rpx 12rpx;
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.audio-btn:active {
|
||
background-color: #0056CC;
|
||
}
|
||
|
||
.senses-container {
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.sense-item {
|
||
margin-bottom: 20rpx;
|
||
padding: 15rpx;
|
||
background-color: white;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.signpost {
|
||
padding: 10rpx;
|
||
background-color: #e9ecef;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 15rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.signpost-en {
|
||
font-weight: bold;
|
||
color: #495057;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.signpost-cn {
|
||
color: #6c757d;
|
||
}
|
||
|
||
.definitions {
|
||
padding: 10rpx 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.definition-en {
|
||
font-size: 28rpx;
|
||
color: #212529;
|
||
margin-bottom: 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
.definition-cn {
|
||
font-size: 26rpx;
|
||
color: #6c757d;
|
||
display: block;
|
||
}
|
||
|
||
.examples-section {
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.examples-toggle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
background-color: #f8f9fa;
|
||
border-radius: 8rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle-icon {
|
||
font-size: 24rpx;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.examples-list {
|
||
margin-top: 15rpx;
|
||
padding: 10rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.example-item {
|
||
padding: 10rpx 0;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
}
|
||
|
||
.example-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.example-en {
|
||
font-size: 26rpx;
|
||
color: #212529;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.example-cn {
|
||
font-size: 24rpx;
|
||
color: #6c757d;
|
||
display: block;
|
||
}
|
||
|
||
.toggle-tip {
|
||
font-size: 22rpx;
|
||
color: #007AFF;
|
||
font-style: italic;
|
||
}
|
||
|
||
.word-collapse {
|
||
--td-cell-vertical-padding: 8rpx;
|
||
--td-cell-horizontal-padding: 0rpx;
|
||
--td-collapse-horizontal-padding: 0rpx;
|
||
--td-collapse-content-padding: 8rpx;
|
||
--td-text-color-disabled: rgba(0,0,0,.9);
|
||
}
|
||
|
||
.word-collapse-content-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
padding: 0 6rpx;
|
||
} |