701 lines
20 KiB
Plaintext
701 lines
20 KiB
Plaintext
.qa-exercise-container { min-height: 100vh; background: #ffffff; }
|
|
.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; }
|
|
.container { width: 100%; height: 100%; padding: 32rpx; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; gap: 24rpx; }
|
|
.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) } }
|
|
|
|
.question-scroll {
|
|
flex: 1;
|
|
height: 0;
|
|
/* padding-bottom: calc(110rpx + env(safe-area-inset-bottom)); */
|
|
/* transition: padding-bottom 0.3s ease; */
|
|
transition: margin-bottom 0.3s ease;
|
|
}
|
|
.chat-mode-scroll {
|
|
/* padding-bottom: calc(110rpx + env(safe-area-inset-bottom)); */
|
|
margin-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.chat-input-mode-scroll {
|
|
/* padding-bottom: calc(240rpx + env(safe-area-inset-bottom)); */
|
|
margin-bottom: calc(240rpx + env(safe-area-inset-bottom));
|
|
}
|
|
.loading-container { padding: 32rpx; }
|
|
|
|
.chat-sender-wrapper {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* bottom: calc(120rpx + env(safe-area-inset-bottom)); */
|
|
z-index: 100;
|
|
background: #fff;
|
|
/* padding: 16rpx 32rpx; */
|
|
border-top: 1rpx solid #f0f4f8;
|
|
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.04);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chat-sender-wrapper.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.footer-prefix {
|
|
position: absolute;
|
|
right: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.chat-icon-block {
|
|
color: var(--td-text-color-primary);
|
|
border-radius: 200rpx;
|
|
border: 2rpx solid var(--td-component-border);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.process-container { width: 100%; display: flex; gap: 16rpx; align-items: center; padding: 8rpx 0; }
|
|
.process-dot { flex: 1; height: 10rpx; border-radius: 8rpx; background: #e6eef9; transition: all 0.3s ease; border: 3rpx solid transparent; box-sizing: border-box; }
|
|
.process-dot.dot-0 { background: #d9e6f2; }
|
|
.process-dot.dot-1 { background: #c9f3e4; }
|
|
.process-dot.dot-2 { background: #7be6b2; }
|
|
.process-dot.dot-3 { background: #21cc80; }
|
|
.process-dot.current { border-color: #21cc80; transform: scaleY(1.2); }
|
|
|
|
.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; }
|
|
|
|
.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) } }
|
|
|
|
.word-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 99;
|
|
}
|
|
|
|
.image-card { position: relative; border-radius: 24rpx; overflow: hidden; height: 360rpx; box-shadow: none; }
|
|
.image { width: 100%; height: 360rpx; border-radius: 24rpx; background: #f5f5f5; }
|
|
.view-full { position: absolute; right: 16rpx; bottom: 16rpx; display: flex; align-items: center; gap: 8rpx; padding: 8rpx; border-radius: 24rpx; background: rgba(0,0,0,0.4); color: #fff; }
|
|
.question-title { font-size: 40rpx; font-weight: 700; color: #001858; line-height: 56rpx; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;}
|
|
.progress-text { font-size: 26rpx; color: #666; }
|
|
.word-item { display: inline; font-size: 40rpx; font-weight: 700; color: #001858; line-height: 56rpx; margin-right: 12rpx; }
|
|
.choice-title { font-size: 28rpx; color: #666; margin: 12rpx 0 16rpx; }
|
|
.option-list { display: flex; flex-direction: column; gap: 16rpx; }
|
|
.option-item { display: flex; align-items: center; gap: 16rpx; padding: 24rpx; border-radius: 20rpx; background: #fff; border: 2rpx solid #e6eef9; }
|
|
.option-item.selected { border-color: #21cc80; background: #eafaf2; }
|
|
.option-item.opt-correct { border-color: #21cc80; background: #eafaf2; }
|
|
.option-item.opt-incorrect { border-color: #e74c3c; background: #fdecea; }
|
|
.option-item.opt-missing { border-color: #21cc80; background: #eafaf2; }
|
|
.option-item.disabled { opacity: 0.6; }
|
|
.option-radio { width: 36rpx; height: 36rpx; min-width: 36rpx; min-height: 36rpx; max-width: 36rpx; max-height: 36rpx; flex: 0 0 36rpx; flex-shrink: 0; align-self: center; box-sizing: border-box; border-radius: 50%; border: 2rpx solid #cfd8e3; display: flex; align-items: center; justify-content: center; }
|
|
.radio-dot { width: 16rpx; height: 16rpx; border-radius: 50%; background: transparent; }
|
|
.radio-dot.on { background: #21cc80; }
|
|
.radio-dot.red { background: #e74c3c; }
|
|
.option-text { flex: 1; min-width: 0; font-size: 30rpx; color: #001858; line-height: 44rpx; }
|
|
.cloze-sentence { display: flex; flex-wrap: wrap; gap: 8rpx; align-items: baseline; }
|
|
.cloze-text { font-size: 40rpx; font-weight: 700; color: #001858; line-height: 56rpx; }
|
|
.cloze-fill { font-size: 40rpx; font-weight: 700; color: #001858; line-height: 56rpx; }
|
|
.cloze-fill.selected { color: #21cc80; border-bottom-color: #21cc80; }
|
|
|
|
.tip-row { display: flex; align-items: center; gap: 8rpx; color: #21cc80; margin: 8rpx 0 16rpx; }
|
|
.tip-text { font-size: 24rpx; color: #21cc80; }
|
|
.answer-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8rpx; }
|
|
.answer-label { font-size: 28rpx; color: #001858; font-weight: 600; }
|
|
.answer-hint { font-size: 26rpx; color: #21cc80; }
|
|
.input-card { position: relative; border-radius: 24rpx; border: 4rpx solid #21cc80; background: #ffffff; padding: 12rpx; }
|
|
.answer-input { width: 100%; min-height: 200rpx; font-size: 30rpx; color: #001858; line-height: 44rpx; }
|
|
.input-type { position: absolute; right: 16rpx; bottom: 12rpx; font-size: 22rpx; color: #999; }
|
|
|
|
.submit-row { display: flex; justify-content: center; width: 100%; margin-top: 48rpx; padding-bottom: 24rpx; }
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
border-radius: 999rpx;
|
|
background: #21cc80;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.submit-btn::after { border: none; }
|
|
.submit-btn:active { transform: translateY(8rpx); box-shadow: none; }
|
|
.submit-btn[disabled] {
|
|
background: #e5e5e5;
|
|
color: #afafaf;
|
|
box-shadow: none;
|
|
transform: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 结果详情弹窗样式 */
|
|
.qa-detail-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.45);
|
|
z-index: 999;
|
|
}
|
|
.qa-detail-modal {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
background: #fff;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
box-shadow: 0 -12rpx 36rpx rgba(0,0,0,0.12);
|
|
z-index: 1000;
|
|
transform: translateY(100%);
|
|
transition: transform 250ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.qa-detail-modal.show {
|
|
transform: translateY(0);
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 24rpx;
|
|
border-bottom: 2rpx solid #f0f4f8;
|
|
}
|
|
.modal-title {
|
|
font-size: 32rpx;
|
|
color: #001858;
|
|
font-weight: 700;
|
|
}
|
|
.modal-close {
|
|
color: #666;
|
|
}
|
|
.detail-body {
|
|
padding: 12rpx 24rpx 24rpx;
|
|
flex: 1;
|
|
min-height: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.section { margin: 12rpx 0; width: 100%; box-sizing: border-box; }
|
|
.section-title { font-size: 28rpx; color: #001858; font-weight: 600; margin-bottom: 8rpx; }
|
|
.question-text { font-size: 30rpx; color: #001858; line-height: 44rpx; }
|
|
/* New Overview Card Styles */
|
|
.overview-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
padding: 12rpx;
|
|
border-radius: 24rpx;
|
|
background: #f8f8f8;
|
|
}
|
|
.overview-card.partial { background: #fff5e6; }
|
|
.overview-card.correct { background: #eafaf2; }
|
|
.overview-card.incorrect { background: #fff7f6; }
|
|
|
|
.overview-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
background: #ddd;
|
|
}
|
|
.overview-card.partial .overview-icon { background: #ff6b00; }
|
|
.overview-card.correct .overview-icon { background: #21cc80; }
|
|
.overview-card.incorrect .overview-icon { background: #e74c3c; }
|
|
|
|
|
|
.overview-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.overview-label {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1rpx;
|
|
color: #666;
|
|
}
|
|
.overview-card.partial .overview-label { color: #ff6b00; }
|
|
.overview-card.correct .overview-label { color: #21cc80; }
|
|
.overview-card.incorrect .overview-label { color: #e74c3c; }
|
|
|
|
.overview-text {
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
color: #333;
|
|
}
|
|
.overview-card.partial .overview-text { color: #4a2b0f; }
|
|
.overview-card.correct .overview-text { color: #004d2c; }
|
|
.overview-card.incorrect .overview-text { color: #5a120c; }
|
|
|
|
.chip-list { display: flex; flex-wrap: wrap; gap: 8rpx; }
|
|
.incorrect-list { display: flex; flex-direction: column; gap: 8rpx; }
|
|
.incorrect-title { font-size: 26rpx; color: #e74c3c; font-weight: 700; margin-bottom: 4rpx; }
|
|
.incorrect-item { display: flex; flex-direction: column; gap: 4rpx; padding: 12rpx; }
|
|
.incorrect-head { display: flex; align-items: center; gap: 12rpx; flex-wrap: wrap; }
|
|
.chip { display: inline-flex; align-items: center; padding: 8rpx 16rpx; border-radius: 20rpx; font-size: 26rpx; }
|
|
.chip.correct { background: #eafaf2; color: #0b9e62; border: 2rpx solid #21cc80; }
|
|
.chip.incorrect { background: #fdecea; color: #e74c3c; }
|
|
.chip.missing { background: #eaf2ff; color: #2f80ed; border: 2rpx solid #2f80ed; }
|
|
.error-type { font-size: 24rpx; color: #e74c3c; }
|
|
.error-reason { font-size: 24rpx; color: #666; }
|
|
.info-list { display: flex; flex-direction: column; gap: 8rpx; }
|
|
.info-item { font-size: 28rpx; color: #001858; line-height: 40rpx; }
|
|
/* 你的选择高亮（参考概览卡配色） */
|
|
.info-list.your-choice.correct .info-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
background: #eafaf2;
|
|
color: #0b9e62;
|
|
border: 2rpx solid #21cc80;
|
|
}
|
|
.info-list.your-choice.incorrect .info-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
background: #fdecea;
|
|
color: #e74c3c;
|
|
border: 2rpx solid #e74c3c;
|
|
}
|
|
|
|
/* 统一的结果行样式，参考概览卡结构 */
|
|
.detail-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
padding: 16rpx;
|
|
border-radius: 16rpx;
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
.conversation-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32rpx;
|
|
padding-top: 16rpx;
|
|
}
|
|
.conversation-block.user {
|
|
--td-bg-color-secondarycontainer: #f5f5f5;
|
|
--td-spacer-2: 0rpx;
|
|
}
|
|
.conversation-block.default {
|
|
--td-spacer-2: 12rpx;
|
|
width: 85%;
|
|
background-color: #e0e0e0;
|
|
padding: 12rpx 20rpx 0 20rpx;
|
|
border-radius: 0 24rpx 24rpx 24rpx;
|
|
}
|
|
.conversation-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
.conversation-label {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #001858;
|
|
}
|
|
.conversation-segment {
|
|
display: flex;
|
|
background: #f5f7fb;
|
|
border-radius: 999rpx;
|
|
padding: 6rpx;
|
|
}
|
|
.segment-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
border-radius: 999rpx;
|
|
}
|
|
.segment-item.active {
|
|
background: #ffffff;
|
|
color: #00b578;
|
|
font-weight: 700;
|
|
}
|
|
.conversation-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
.conversation-custom-scene-input-wrapper {
|
|
min-width: 160rpx;
|
|
}
|
|
.conversation-custom-scene-input {
|
|
padding: 0rpx 15rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx dashed #00b578;
|
|
background: #f5f7fb;
|
|
font-size: 24rpx;
|
|
color: #001858;
|
|
}
|
|
.conversation-custom-scene-input-error {
|
|
border-color: #ff4d4f;
|
|
}
|
|
.custom-scene-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
.custom-scene-text {
|
|
font-size: 26rpx;
|
|
}
|
|
.tag-item {
|
|
padding: 12rpx 28rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
background: #f5f7fb;
|
|
}
|
|
.tag-item.active {
|
|
background: #e6fff4;
|
|
color: #00b578;
|
|
}
|
|
.conversation-label-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
}
|
|
.conversation-count {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.conversation-note-card {
|
|
border-radius: 24rpx;
|
|
background: #f5f7fb;
|
|
padding: 20rpx;
|
|
}
|
|
.conversation-note-input {
|
|
width: 100%;
|
|
min-height: 200rpx;
|
|
font-size: 28rpx;
|
|
color: #001858;
|
|
}
|
|
.conversation-start-row {
|
|
margin-top: 24rpx;
|
|
}
|
|
.conversation-start-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
border-radius: 999rpx;
|
|
background: #00b578;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.conversation-start-btn::after {
|
|
border: none;
|
|
}
|
|
.detail-row.correct { background: #eafaf2; }
|
|
.detail-row.incorrect { background: #fff7f6; }
|
|
.detail-row.missing { background: #eaf2ff; }
|
|
.detail-row.your-choice.correct { background: #eafaf2; }
|
|
.detail-row.your-choice.incorrect { background: #fff7f6; }
|
|
.detail-row.your-choice.partial { background: #eafaf2; }
|
|
|
|
.detail-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
background: #ccc;
|
|
}
|
|
.detail-row.correct .detail-icon { background: #21cc80; }
|
|
.detail-row.incorrect .detail-icon { background: #e74c3c; }
|
|
.detail-row.missing .detail-icon { background: #2f80ed; }
|
|
.detail-row.your-choice.correct .detail-icon { background: #21cc80; }
|
|
.detail-row.your-choice.incorrect .detail-icon { background: #e74c3c; }
|
|
.detail-row.your-choice.partial .detail-icon { background: #21cc80; }
|
|
|
|
.detail-content { display: flex; flex-direction: column; gap: 6rpx; flex: 1; }
|
|
.detail-label { font-size: 26rpx; font-weight: 700; color: #001858; }
|
|
.detail-items { display: flex; flex-wrap: wrap; gap: 12rpx; }
|
|
.detail-item { font-size: 28rpx; color: #001858; }
|
|
.detail-row.correct .detail-item { color: #0b9e62; }
|
|
.detail-row.incorrect .detail-item { color: #e74c3c; }
|
|
.detail-row.missing .detail-item { color: #2f80ed; }
|
|
.detail-row.your-choice.partial .detail-item { color: #0b9e62; }
|
|
|
|
.completion-popup-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
.completion-card {
|
|
width: 600rpx;
|
|
background: #ffffff;
|
|
border-radius: 32rpx;
|
|
padding: 48rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.completion-close {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
right: 24rpx;
|
|
padding: 12rpx;
|
|
}
|
|
|
|
.completion-trophy {
|
|
position: relative;
|
|
margin-bottom: 32rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.trophy-circle {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background: #21cc80;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 12rpx 36rpx rgba(33, 204, 128, 0.6);
|
|
}
|
|
|
|
.confetti {
|
|
position: absolute;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
/* Variation Mode Styles */
|
|
.variation-container {
|
|
width: 100%;
|
|
}
|
|
.variation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24rpx;
|
|
width: 100%;
|
|
}
|
|
.variation-item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.variation-image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
background-color: #f5f5f5;
|
|
min-height: 200rpx;
|
|
}
|
|
|
|
.variation-image-wrapper.selected {
|
|
}
|
|
|
|
.variation-border {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 24rpx;
|
|
border-width: 4rpx;
|
|
border-style: solid;
|
|
box-sizing: border-box;
|
|
pointer-events: none;
|
|
}
|
|
.variation-border.correct {
|
|
border-color: #21cc80;
|
|
}
|
|
.variation-border.incorrect {
|
|
border-color: #e34d59;
|
|
}
|
|
|
|
.selection-badge {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
right: 12rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.selection-badge.unselected {
|
|
background-color: rgba(0,0,0,0.25);
|
|
}
|
|
.selection-badge.selected {
|
|
background-color: #21cc80;
|
|
box-shadow: 0 4rpx 12rpx rgba(33, 204, 128, 0.4);
|
|
}
|
|
.selection-badge.incorrect {
|
|
background-color: #e34d59;
|
|
box-shadow: 0 4rpx 12rpx rgba(227, 77, 89, 0.3);
|
|
}
|
|
|
|
.variation-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.confetti.c1 { background: #FFD700; top: -10rpx; left: 10rpx; transform: rotate(-15deg); }
|
|
.confetti.c2 { background: #4facfe; top: 20rpx; right: -10rpx; transform: rotate(25deg); }
|
|
.confetti.c3 { background: #a18cd1; bottom: 0; left: -20rpx; transform: rotate(-45deg); }
|
|
|
|
.completion-title {
|
|
font-size: 48rpx;
|
|
font-weight: 800;
|
|
color: #001858;
|
|
margin-bottom: 16rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.completion-subtitle {
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
margin-bottom: 48rpx;
|
|
line-height: 1.5;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.completion-share-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background: #21cc80;
|
|
border-radius: 48rpx;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
box-shadow: 0 8rpx 24rpx rgba(33, 204, 128, 0.3);
|
|
}
|
|
|
|
.completion-share-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.confetti-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 9999;
|
|
pointer-events: none; /* 确保canvas不会阻挡点击事件 */
|
|
}
|
|
|
|
.type-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #f5f5f5;
|
|
border-radius: 40rpx;
|
|
padding: 8rpx;
|
|
margin-top: 12rpx;
|
|
width: fit-content;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 100;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.type-item {
|
|
padding: 12rpx 48rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.type-item.active {
|
|
background: #fff;
|
|
color: #333;
|
|
font-weight: bold;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.type-item-hover {
|
|
opacity: 0.7;
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|