1527 lines
29 KiB
Plaintext
1527 lines
29 KiB
Plaintext
.container {
|
||
height: 100vh;
|
||
width: 100% !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background: #F5F7FA;
|
||
overflow: hidden;
|
||
touch-action: none;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 材料区域样式 */
|
||
.material-section {
|
||
position: relative;
|
||
width: auto;
|
||
margin: 10px;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
border: 1px solid #eee;
|
||
will-change: height;
|
||
transform: translateZ(0);
|
||
-webkit-transform: translateZ(0);
|
||
}
|
||
|
||
/* 拖动时禁用过渡效果 */
|
||
.material-section.resizing {
|
||
transition: none !important;
|
||
}
|
||
|
||
.material-title {
|
||
padding: 20rpx 30rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
/* 拖动手柄样式 */
|
||
.resize-handle {
|
||
position: absolute;
|
||
bottom: -12rpx;
|
||
/* 调整手柄位置，让它位于材料区域下方 */
|
||
left: 0;
|
||
right: 0;
|
||
height: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
z-index: 10;
|
||
touch-action: none;
|
||
cursor: ns-resize;
|
||
}
|
||
|
||
.resize-line {
|
||
width: 60rpx;
|
||
height: 4rpx;
|
||
background: #D8D8D8;
|
||
border-radius: 2rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.resize-dots {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: radial-gradient(circle, #999 2rpx, transparent 2rpx) 0 0 / 8rpx 8rpx;
|
||
}
|
||
|
||
.resizing {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
/* 调整材料内容区域 */
|
||
.material-swiper {
|
||
height: calc(100% - 40rpx);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 内容区域优化 */
|
||
.material-content {
|
||
height: 100%;
|
||
padding: 20rpx 30rpx;
|
||
width: 92%;
|
||
transform: translateZ(0);
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior: none;
|
||
touch-action: pan-y;
|
||
}
|
||
|
||
.material-text {
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
/* 富文本中的段落样式 */
|
||
.material-text p {
|
||
display: inline;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 富文本中的图片样式 */
|
||
.material-text img {
|
||
display: inline-block !important;
|
||
vertical-align: middle !important;
|
||
max-height: 40rpx !important;
|
||
width: auto !important;
|
||
margin: 0 4rpx !important;
|
||
}
|
||
|
||
/* 如果需要某些图片单独成行显示 */
|
||
.material-text img.block {
|
||
display: block !important;
|
||
max-height: none !important;
|
||
max-width: 100% !important;
|
||
margin: 20rpx 0 !important;
|
||
}
|
||
|
||
/* 修改富文本中图片的样式 */
|
||
.material-text rich-text {
|
||
width: 100%;
|
||
display: inline;
|
||
}
|
||
|
||
/* 富文本图片样式 */
|
||
.rich-text-img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
/* 当图片需要单独占一行时的样式 */
|
||
.rich-text-img.block {
|
||
display: block;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.material-index {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 材料指示点 */
|
||
.material-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 40rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: #ddd;
|
||
margin: 0 8rpx;
|
||
}
|
||
|
||
.dot.active {
|
||
background: #007aff;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
/* 题目内容样式 */
|
||
.question-container {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin: 0 20rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
width: calc(100% - 40rpx);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.question-header {
|
||
margin-bottom: 20rpx;
|
||
/* 减小底部间距 */
|
||
}
|
||
|
||
.question-type {
|
||
color: #666;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.question-content {
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
padding: 20rpx;
|
||
width: 100% !important;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0; /* 防止 flex 子元素溢出 */
|
||
}
|
||
|
||
/* 当没有材料时的样式 */
|
||
.question-content.no-material {
|
||
height: calc(100vh - 67px);
|
||
/* 只减去底部工具栏高度 */
|
||
}
|
||
|
||
/* 修改选项列表样式 */
|
||
.options-list {
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 富文本通用样式 */
|
||
rich-text {
|
||
width: 100%;
|
||
display: inline;
|
||
}
|
||
|
||
/* 富文本内容样式覆盖 */
|
||
rich-text .p {
|
||
display: inline;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
rich-text .img {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
max-height: 32rpx;
|
||
width: auto;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
/* 如果图片需要单独成行显示时的样式 */
|
||
rich-text .img.block {
|
||
display: block;
|
||
max-height: none;
|
||
max-width: 100%;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
rich-text .strong,
|
||
rich-text .b {
|
||
font-weight: bold;
|
||
}
|
||
|
||
rich-text .em,
|
||
rich-text .i {
|
||
font-style: italic;
|
||
}
|
||
|
||
rich-text .u {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 选项基础样式 */
|
||
.option-item {
|
||
margin: 20rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 30rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #E5E5E5;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
transition: all 0.2s ease;
|
||
/* 添加过渡效果 */
|
||
}
|
||
|
||
/* 正确答案样式 */
|
||
.option-correct {
|
||
background: #F6FFF1 !important;
|
||
border: 2rpx solid #52C41A !important;
|
||
}
|
||
|
||
/* 错误答案样式 */
|
||
.option-wrong {
|
||
background: #FFF1F0 !important;
|
||
border: 2rpx solid #FF4D4F !important;
|
||
}
|
||
|
||
/* 选项内容样式 */
|
||
.option-content {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.option-letter {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
min-width: 40rpx;
|
||
}
|
||
|
||
/* 答案图标样式 */
|
||
.answer-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 选项文字样式 */
|
||
.option-text {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
/* 正确答案文字颜色 */
|
||
.option-correct .option-letter,
|
||
.option-correct .option-text {
|
||
color: #52C41A;
|
||
}
|
||
|
||
/* 错误答案文字颜色 */
|
||
.option-wrong .option-letter,
|
||
.option-wrong .option-text {
|
||
color: #FF4D4F;
|
||
}
|
||
|
||
/* 统一的选中样式 */
|
||
.option-selected {
|
||
background: #E3F0FF !important;
|
||
border: 2rpx solid #1A7CFF !important;
|
||
}
|
||
|
||
.option-selected .option-label,
|
||
.option-selected .option-content,
|
||
.option-selected .separator {
|
||
color: #1A7CFF !important;
|
||
}
|
||
|
||
/* 选项标签样式 */
|
||
.option-label {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-right: 20rpx;
|
||
min-width: 40rpx;
|
||
text-align: center;
|
||
line-height: 1;
|
||
/* 设置为1，确保文字垂直居中 */
|
||
height: 32rpx;
|
||
/* 设置与字体大小相同的高度 */
|
||
display: flex;
|
||
align-items: center;
|
||
/* 垂直居中对齐 */
|
||
justify-content: center;
|
||
/* 水平居中对齐 */
|
||
}
|
||
|
||
/* 分隔符样式 */
|
||
.separator {
|
||
color: #E5E5E5;
|
||
margin: 0 20rpx;
|
||
font-weight: normal;
|
||
}
|
||
|
||
/* 添加底部按钮固定样式 */
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
z-index: 100;
|
||
}
|
||
|
||
.footer-content {
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
/* 左右两侧分布 */
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.timer {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.question-card-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 120rpx;
|
||
/* 确保有足够的宽度 */
|
||
}
|
||
|
||
.card-icon {
|
||
width: 48rpx;
|
||
/* 增大图标尺寸 */
|
||
height: 48rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.card-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
/* 防止文字换行 */
|
||
}
|
||
|
||
/* 试卷信息 */
|
||
.paper-info {
|
||
background: #fff;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.paper-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.paper-meta {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.question-count {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
/* 材料区域样式 */
|
||
.material-section {
|
||
background: #fff;
|
||
height: 400rpx;
|
||
position: relative;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.material-subtitle {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.material-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.material-image-wrapper {
|
||
width: 100%;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.material-image {
|
||
width: 100%;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
/* 题目区域样式 */
|
||
.question-scroll {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
background: #ececec;
|
||
height: calc(100vh - 120rpx);
|
||
/* 调整高度 */
|
||
padding-bottom: 160rpx;
|
||
}
|
||
|
||
.question-scroll.no-material {
|
||
/* height: calc(100vh - 200rpx - 120rpx); */
|
||
}
|
||
|
||
/* 底部按钮区域 */
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
padding: 20rpx 30rpx;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.button-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0;
|
||
}
|
||
|
||
.prev-button,
|
||
.next-button,
|
||
.submit-button {
|
||
width: 45%;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.prev-button {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.next-button {
|
||
background: #007aff;
|
||
color: #fff;
|
||
}
|
||
|
||
.submit-button {
|
||
background: #ff6b6b;
|
||
color: #fff;
|
||
}
|
||
|
||
.prev-button[disabled],
|
||
.next-button[disabled],
|
||
.submit-button[disabled] {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 适配 iPhone X 等机型 */
|
||
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
|
||
.footer {
|
||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||
}
|
||
}
|
||
|
||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||
.footer {
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
}
|
||
}
|
||
|
||
/* 底部留白区域，确保可以滚动到底部 */
|
||
.bottom-space {
|
||
height: 136rpx;
|
||
/* 与底部按钮组高度一致 */
|
||
width: 100%;
|
||
}
|
||
|
||
/* 题目滑动容器 */
|
||
.question-swiper {
|
||
flex: 1;
|
||
height: calc(100vh - 120rpx - 136rpx);
|
||
/* 减去顶部和底部按钮的高度 */
|
||
width: 100% !important;
|
||
box-sizing: border-box;
|
||
z-index: 1;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
/* swiper-item 样式 */
|
||
.question-swiper swiper-item {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 确保题目页垂直布局占满剩余空间，避免被遮挡 */
|
||
.question-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100% !important;
|
||
height: 100%;
|
||
min-height: calc(100vh - 120rpx - 136rpx);
|
||
padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
min-width: 0; /* 防止 flex 子元素溢出 */
|
||
}
|
||
|
||
/* 题目内容包裹器（用于组件） */
|
||
.question-content-wrapper {
|
||
width: 100% !important;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.question-content-wrapper.has-material {
|
||
/* 有材料时的高度由内联样式控制 */
|
||
}
|
||
|
||
.question-content-wrapper.no-material {
|
||
height: calc(100vh - 120rpx - 136rpx);
|
||
}
|
||
|
||
/* 确保组件内部元素有宽度 */
|
||
.question-content-wrapper question-display {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* scroll-view 样式 */
|
||
.question-page scroll-view {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 加载状态样式 */
|
||
.loading-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
z-index: 999;
|
||
}
|
||
|
||
.loading-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #FFFFFF;
|
||
padding: 40rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: relative;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.spinner-circle {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 6rpx solid #f0f0f0;
|
||
border-top: 6rpx solid #1890ff;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/* 拖动时的状态 */
|
||
.resizing .material-section {
|
||
transition: none !important;
|
||
}
|
||
|
||
/* 添加 mp-html 相关样式 */
|
||
.mp-html {
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 暂停遮罩层样式 */
|
||
.pause-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1500;
|
||
/* 确保高于其他内容 */
|
||
}
|
||
|
||
.pause-mask.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
/* 显示时恢复点击事件 */
|
||
}
|
||
|
||
.pause-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
transform: translateY(20rpx);
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.pause-mask.show .pause-content {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
|
||
.pause-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.pause-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.pause-time {
|
||
font-size: 60rpx;
|
||
color: #1A7CFF;
|
||
margin-bottom: 40rpx;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.pause-tip {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 状态指示点样式 */
|
||
.question-status {
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
gap: 40rpx;
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-radius: 50%;
|
||
background: #F5F5F5;
|
||
/* 未答题 */
|
||
}
|
||
|
||
.status-dot.answered {
|
||
background: #E3F0FF;
|
||
border: 2rpx solid #1A7CFF;
|
||
}
|
||
|
||
.status-dot.current {
|
||
background: #1A7CFF;
|
||
}
|
||
|
||
.status-item text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 答案解析样式 */
|
||
.explanation-section {
|
||
margin: 30rpx 20rpx;
|
||
padding: 20rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 8rpx;
|
||
border-left: 6rpx solid #3f7ee8;
|
||
}
|
||
|
||
.explanation-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.explanation-content {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 用户选择的选项样式 */
|
||
.option-item.user-selected {
|
||
background: #FFF3F3;
|
||
border: 2rpx solid #FF4D4F;
|
||
}
|
||
|
||
.option-item.user-selected .option-label,
|
||
.option-item.user-selected .option-content,
|
||
.option-item.user-selected .separator {
|
||
color: #FF4D4F;
|
||
}
|
||
|
||
/* 答案解析样式优化 */
|
||
.answer-analysis {
|
||
margin: 30rpx 20rpx;
|
||
padding: 20rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 8rpx;
|
||
border-left: 6rpx solid #3f7ee8;
|
||
margin-bottom: 160rpx;
|
||
/* 为底部按钮留出空间 */
|
||
}
|
||
|
||
.analysis-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.analysis-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
.correct-answer {
|
||
font-size: 28rpx;
|
||
color: #52C41A;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.analysis-content {
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.analysis-content image {
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
display: block;
|
||
margin: 20rpx auto;
|
||
}
|
||
|
||
/* 底部留白区域 */
|
||
.bottom-spacing {
|
||
display: none;
|
||
}
|
||
|
||
/* 整体预览页面样式 */
|
||
.result-overview {
|
||
min-height: 100vh;
|
||
background: #F5F7FA;
|
||
/* padding: 30rpx; */
|
||
position: relative;
|
||
/* padding-bottom: calc(128rpx + env(safe-area-inset-bottom)); */
|
||
}
|
||
|
||
/* 确保加载状态在预览页面中正确显示 */
|
||
.result-overview .loading-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(245, 247, 250, 0.9);
|
||
}
|
||
|
||
/* 成绩展示区域 */
|
||
.score-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40rpx 0;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin: 20rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.score-main {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.score-desc {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.qualified {
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.unqualified {
|
||
color: #FF5722;
|
||
}
|
||
|
||
/* 统计区域 */
|
||
.stats-section {
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
/* margin-bottom: 30rpx; */
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.stats-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.stats-value {
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.stats-label {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.stats-divider {
|
||
width: 2rpx;
|
||
height: 60rpx;
|
||
background: #EEEEEE;
|
||
}
|
||
|
||
/* 题目列表区域 */
|
||
.questions-list {
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.list-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.correct-count {
|
||
font-size: 28rpx;
|
||
color: #52C41A;
|
||
}
|
||
|
||
.question-items {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.question-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.question-index {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
margin-bottom: 8rpx;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.question-index:active {
|
||
transform: scale(0.95);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 可以添加一个指示当前题目的样式 */
|
||
.question-index.current {
|
||
box-shadow: 0 0 0 4rpx rgba(26, 124, 255, 0.2);
|
||
}
|
||
|
||
.question-result {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.question-result.correct {
|
||
color: #52C41A;
|
||
}
|
||
|
||
.question-result.wrong {
|
||
color: #FF4D4F;
|
||
}
|
||
|
||
.result-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.bottom-button {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100rpx;
|
||
background: #1A7CFF;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 修改图例样式 */
|
||
.status-legend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.legend-circle {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid transparent;
|
||
position: relative;
|
||
}
|
||
|
||
/* 正确图例 */
|
||
.legend-circle.correct {
|
||
border: 2px solid #52C41A;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 错误图例 */
|
||
.legend-circle.wrong {
|
||
border: 2px solid #FF4D4F;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 未答图例 */
|
||
.legend-circle.unanswered {
|
||
border: 2px solid #D9D9D9;
|
||
background: #fff;
|
||
}
|
||
|
||
.legend-item text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
/* 题号空心圆+圆弧 */
|
||
.circle-index {
|
||
position: relative;
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.circle-bg {
|
||
position: absolute;
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #D9D9D9;
|
||
background: #fff;
|
||
z-index: 1;
|
||
}
|
||
|
||
.circle-arc {
|
||
position: absolute;
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #D9D9D9;
|
||
/* 默认灰色边框 */
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 正确答案的边框样式 - 完整的绿色圆 */
|
||
.arc-correct {
|
||
border-color: #52C41A !important;
|
||
}
|
||
|
||
/* 错误答案的边框样式 - 完整的红色圆 */
|
||
.arc-wrong {
|
||
border-color: #FF4D4F !important;
|
||
}
|
||
|
||
/* 未答题的边框样式 - 完整的灰色圆 */
|
||
.arc-unanswered {
|
||
border-color: #D9D9D9 !important;
|
||
}
|
||
|
||
.circle-text {
|
||
position: relative;
|
||
z-index: 3;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
width: 100%;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
/* 底部按钮组 */
|
||
.bottom-btns {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20rpx 30rpx;
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
background: #fff;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
z-index: 100;
|
||
}
|
||
|
||
.btn-outline, .btn-blue {
|
||
flex: 1;
|
||
/* height: 88rpx;
|
||
line-height: 88rpx; */
|
||
text-align: center;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-outline {
|
||
background: #fff;
|
||
color: #333;
|
||
border: 2rpx solid #ddd;
|
||
}
|
||
|
||
.btn-blue {
|
||
background: #007AFF;
|
||
color: #fff;
|
||
}
|
||
|
||
/* Add padding to the bottom of the content to prevent overlap with fixed buttons */
|
||
.result-overview {
|
||
padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
/* 确保表格不会溢出 */
|
||
.material-content table,
|
||
.question-container table,
|
||
.analysis-content table {
|
||
max-width: 100% !important;
|
||
width: auto !important;
|
||
margin: 20rpx auto;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
/* 确保所有富文本内容中的图片都正确缩放 */
|
||
mp-html {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* mp-html 中的图片样式 */
|
||
mp-html img {
|
||
max-width: 100% !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
display: block !important;
|
||
margin: 20rpx auto !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 行内图片样式 */
|
||
mp-html img.inline {
|
||
display: inline-block !important;
|
||
vertical-align: middle !important;
|
||
max-height: 1.5em !important;
|
||
width: auto !important;
|
||
margin: 0 4rpx !important;
|
||
}
|
||
|
||
/* 图片容器样式 */
|
||
mp-html .img-container {
|
||
width: 100% !important;
|
||
margin: 20rpx auto !important;
|
||
text-align: center !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
/* 图片加载占位样式 */
|
||
mp-html .img-loading {
|
||
width: 100% !important;
|
||
height: 200rpx !important;
|
||
background: #f5f5f5 !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin: 20rpx auto !important;
|
||
}
|
||
|
||
/* 图片加载失败样式 */
|
||
mp-html .img-error {
|
||
width: 100% !important;
|
||
height: 200rpx !important;
|
||
background: #f5f5f5 !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin: 20rpx auto !important;
|
||
color: #999 !important;
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
/* mp-html 中的表格样式 */
|
||
mp-html table {
|
||
max-width: 100% !important;
|
||
width: auto !important;
|
||
margin: 20rpx auto !important;
|
||
border-collapse: collapse !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
mp-html td,
|
||
mp-html th {
|
||
padding: 10rpx !important;
|
||
border: 1px solid #ddd !important;
|
||
word-break: break-all !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* mp-html 中的段落样式 */
|
||
mp-html p {
|
||
margin: 20rpx 0 !important;
|
||
line-height: 1.6 !important;
|
||
box-sizing: border-box !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* mp-html 中的列表样式 */
|
||
mp-html ul,
|
||
mp-html ol {
|
||
padding-left: 40rpx !important;
|
||
margin: 20rpx 0 !important;
|
||
box-sizing: border-box !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
mp-html li {
|
||
margin: 10rpx 0 !important;
|
||
line-height: 1.6 !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* mp-html 中的代码块样式 */
|
||
mp-html pre {
|
||
max-width: 100% !important;
|
||
overflow-x: auto !important;
|
||
background: #f5f5f5 !important;
|
||
padding: 20rpx !important;
|
||
border-radius: 8rpx !important;
|
||
margin: 20rpx 0 !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* mp-html 中的行内元素样式 */
|
||
mp-html span,
|
||
mp-html a,
|
||
mp-html strong,
|
||
mp-html em {
|
||
word-wrap: break-word !important;
|
||
word-break: break-word !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* 确保所有 mp-html 中的元素都不会溢出 */
|
||
mp-html view,
|
||
mp-html text,
|
||
mp-html div {
|
||
max-width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
word-wrap: break-word !important;
|
||
}
|
||
|
||
/* 确保所有容器都不会被内容撑开 */
|
||
.material-section,
|
||
.question-container,
|
||
.answer-analysis {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
overflow-x: hidden !important;
|
||
}
|
||
|
||
/* ========== 双层布局样式（与答题页一致） ========== */
|
||
|
||
/* 试题详情：背景层资料 + 前置问题面板 */
|
||
.detail-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 背景层：资料标题固定 + 下方内容可滚动 */
|
||
.layer-back {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 0;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 资料标题固定 */
|
||
.material-title-fixed {
|
||
flex-shrink: 0;
|
||
padding: 24rpx 28rpx 16rpx;
|
||
background: #fff;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.material-title-fixed .section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
}
|
||
|
||
.material-title-fixed .section-title-underline {
|
||
width: 48rpx;
|
||
height: 6rpx;
|
||
background: #e74c3c;
|
||
margin-top: 8rpx;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.material-scroll-below-title {
|
||
flex: 1;
|
||
min-height: 0;
|
||
width: 100%;
|
||
background: #fff;
|
||
}
|
||
|
||
.material-placeholder {
|
||
height: 600rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 前置层：问题面板 */
|
||
.movable-area {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.movable-panel.question-panel-wrap {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 拖拽条 */
|
||
.panel-drag-handle {
|
||
width: 100%;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
background: #fff;
|
||
padding: 12rpx 0;
|
||
}
|
||
|
||
.panel-drag-bar {
|
||
width: 80rpx;
|
||
height: 8rpx;
|
||
background: #d0d0d0;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
/* 区块通用 */
|
||
.section {
|
||
background: #fff;
|
||
padding: 0 28rpx 32rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
/* 资料区块 */
|
||
.section-material {
|
||
padding-top: 24rpx;
|
||
}
|
||
|
||
.material-body {
|
||
padding: 8rpx 0 40rpx;
|
||
min-height: 760rpx;
|
||
}
|
||
|
||
.material-rich {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* 区块标题 */
|
||
.section-head {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
}
|
||
|
||
.section-title-underline {
|
||
width: 48rpx;
|
||
height: 6rpx;
|
||
background: #e74c3c;
|
||
margin-top: 8rpx;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
/* 问题区块 */
|
||
.section-question {
|
||
padding-top: 16rpx;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.question-content-swiper {
|
||
flex: 1;
|
||
min-height: 60vh;
|
||
width: 100%;
|
||
height: 0;
|
||
}
|
||
|
||
.content-swiper-item {
|
||
width: 100%;
|
||
min-height: 800rpx;
|
||
}
|
||
|
||
.question-body {
|
||
padding: 8rpx 0 24rpx;
|
||
height: 100%;
|
||
min-height: 280rpx;
|
||
box-sizing: border-box;
|
||
} |