/* 引入 objective_question 的基础样式并进行调整 */ .container { width: 100%; height: 100vh; display: flex; flex-direction: column; background: #F6F7F9; overflow: hidden; padding:0; } /* 材料区域样式 */ .material-section { background: #fff; position: relative; will-change: height; transform: translateZ(0); margin: 24rpx; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); } /* .material-header { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 32rpx 16rpx; border-bottom: 1rpx solid #EBEDF0; } */ .material-title { font-size: 28rpx; color: #333; font-weight: 500; } .material-swiper { height: calc(100% - 70rpx); /* 减去header和tabs的高度 */ } .material-content { width: 100%; height: 100%; padding: 24rpx 32rpx; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; /* 禁止水平滚动 */ } .material-subtitle { font-size: 28rpx; font-weight: 500; color: #1D2129; margin-bottom: 20rpx; width: 100%; word-wrap: break-word; /* 允许长单词换行 */ } .material-text { font-size: 28rpx; line-height: 1.7; color: #4E5969; width: 100%; word-wrap: break-word; /* 允许长单词换行 */ } /* 拖动手柄样式 */ .resize-handle { position: absolute; bottom: -20rpx; left: 50%; transform: translateX(-50%); width: 120rpx; height: 40rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; z-index: 100; } .resize-line { width: 100%; height: 32rpx; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .resize-dots { width: 48rpx; height: 4rpx; background: #C9CDD4; border-radius: 2rpx; } /* 题目区域样式 */ .question-section { background: #fff; margin: 24rpx; margin-top: 0; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; } .question-header { padding: 24rpx 32rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #EBEDF0; } /* 题目滑动容器(参考客观题页面) */ .question-swiper { flex: 1; width: 100%; height: 100%; z-index: 1; } .question-item { width: 100%; height: 100%; } .question-page { display: flex; flex-direction: column; width: 100%; height: 100%; } .question-content { flex: 1; width: 100%; height: 100%; } .question-container { width: 100%; padding: 20rpx 20rpx; box-sizing: border-box; } .problem-content { font-size: 30rpx; color: #1D2129; line-height: 1.7; } /* 答题区域样式 */ .answer-area { background: #F8F9FA; border-radius: 8rpx; padding: 20rpx; } .answer-input { width: 100%; min-height: 200rpx; font-size: 28rpx; line-height: 1.6; color: #333; } /* 底部工具栏样式 */ .footer { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); padding: 16rpx 32rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); box-shadow: 0 -1rpx 0 #EBEDF0; } .footer-content { height: 88rpx; display: flex; align-items: center; justify-content: space-between; } .timer { display: flex; align-items: center; font-size: 28rpx; color: #4E5969; background: #F7F8FA; padding: 8rpx 20rpx; border-radius: 24rpx; } .timer-icon { width: 32rpx; height: 32rpx; margin-right: 8rpx; } .submit-btn { padding: 16rpx 40rpx; background: linear-gradient(135deg, #3B8CFF 0%, #1A7CFF 100%); color: #fff; border-radius: 32rpx; font-size: 28rpx; font-weight: 500; box-shadow: 0 4rpx 8rpx rgba(26, 124, 255, 0.2); } /* 材料区域样式 */ .material-section { background: #fff; height: 500rpx; position: relative; padding: 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); } /* 添加底部按钮固定样式 */ .button-container { display: flex; justify-content: space-between; padding: 0; } /* 适配 iPhone X 等机型 */ @supports (padding-bottom: constant(safe-area-inset-bottom)) { .footer { padding-bottom: calc(constant(safe-area-inset-bottom)); } } @supports (padding-bottom: env(safe-area-inset-bottom)) { .footer { padding-bottom: calc(env(safe-area-inset-bottom)); } } .prev-button, .next-button { width: 45%; /* height: 88rpx; line-height: 88rpx; */ border-radius: 44rpx; font-size: 32rpx; } .prev-button { background: #f5f5f5; color: #666; } .next-button { background: #007aff; color: #fff; } .prev-button[disabled], .next-button[disabled] { opacity: 0.5; } /* 添加以下样式,其他样式保持不变 */ .material-scroll { width: 100%; white-space: nowrap; margin-top: 20rpx; } .material-item { width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; /* 防止内容溢出 */ } .material-item.active { background: #e6f3ff; border: 2rpx solid #007aff; } /* 添加图片相关样式 */ .material-image-wrapper { width: 100%; margin: 20rpx 0; } .material-image { width: 100%; border-radius: 8rpx; } /* 添加以下样式 */ .question-scroll.no-material { height: calc(100vh - 200rpx - 120rpx); /* 减去试卷信息和底部按钮的高度 */ } .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F6F7F9; } .loading-spinner { width: 64rpx; height: 64rpx; border: 6rpx solid #E5E6EB; border-top: 6rpx solid #1A7CFF; margin-bottom: 24rpx; } .loading text { font-size: 28rpx; color: #86909C; } /* 试卷信息 */ .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; } /* Add these new styles */ .paper-difficulty { font-size: 24rpx; color: #666; margin-top: 10rpx; } .total-score { margin-left: 20rpx; font-size: 28rpx; color: #333; } .material-type { font-size: 24rpx; color: #666; margin: 10rpx 0; padding: 4rpx 12rpx; background: #f5f5f5; border-radius: 4rpx; display: inline-block; } .question-description { margin: 20rpx 0; font-size: 28rpx; color: #666; line-height: 1.6; } /* 答题卡弹窗样式 */ .popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; } .popup-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } .popup-content { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 24rpx 24rpx 0 0; padding: 32rpx; padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); } .popup-header { margin-bottom: 32rpx; } .popup-header text { font-size: 32rpx; font-weight: 600; color: #1D2129; } .popup-close { font-size: 40rpx; color: #999; padding: 10rpx; } .answer-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20rpx; padding: 20rpx 0; } .answer-card-item { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #F5F7FA; border-radius: 8rpx; font-size: 28rpx; color: #333; } .answer-card-item.active { background: #1A7CFF; color: #fff; } /* 上传选项样式 */ .upload-options { padding: 30rpx 0; } .upload-btn { width: 100%; height: 96rpx; line-height: 96rpx; text-align: center; background: #F7F8FA; border: none; font-size: 30rpx; color: #1D2129; margin-bottom: 24rpx; padding: 0; border-radius: 12rpx; transition: all 0.3s ease; } .upload-btn::after { border: none; } .upload-btn:active { background: #EBEDF0; transform: scale(0.98); } /* 修改切换按钮容器样式 */ .tabs-container { width: 100%; background: #fff !important; padding: 0 24rpx; box-sizing: border-box; border-bottom: 1rpx solid #F2F3F5; } .tabs-content { display: flex; flex-wrap: nowrap; width: fit-content; min-width: 100%; padding: 0; background: #fff !important; } .tab-item { flex-shrink: 0; padding: 20rpx 32rpx; font-size: 28rpx; color: #666666; position: relative; text-align: center; transition: all 0.3s ease; } .tab-item.active { font-weight: 500; } .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24rpx; height: 3rpx; border-radius: 2rpx; } /* 修改材料标签选中状态样式 */ .material-section .tab-item.active { color: #FF4D6A; /* 粉色 */ font-weight: 500; } .material-section .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24rpx; height: 3rpx; background: #FF4D6A; /* 粉色下划线 */ border-radius: 2rpx; } /* 修改问题标签选中状态样式 */ .question-section .tab-item.active { color: #1A7CFF; /* 蓝色 */ font-weight: 500; } .question-section .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24rpx; height: 3rpx; background: #1A7CFF; /* 蓝色下划线 */ border-radius: 2rpx; } /* 用户提交图片区域样式 */ .submitted-images { margin: 24rpx; background: #FFFFFF; border-radius: 12rpx; padding: 30rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } .section-header { display: flex; align-items: center; margin-bottom: 20rpx; } .section-title { font-size: 32rpx; color: #1A7CFF; font-weight: bold; margin-right: 16rpx; } .image-count { font-size: 28rpx; color: #999999; } .image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; } .image-item { position: relative; width: 160rpx; height: 160rpx; border-radius: 8rpx; overflow: hidden; background: #f5f5f5; display: flex; align-items: center; justify-content: center; } .preview-image { width: 100%; height: 100%; object-fit: contain; } .image-delete { position: absolute; top: 10rpx; right: 10rpx; width: 40rpx; height: 40rpx; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .delete-icon { color: #FFFFFF; font-size: 32rpx; line-height: 1; } /* 老师点评区域样式 */ .teacher-feedback { background: #f9f9f9; border-radius: 12rpx; padding: 24rpx; margin-top: 24rpx; } .feedback-content { margin-top: 20rpx; } .feedback-content image { width: 100%; border-radius: 8rpx; margin-top: 20rpx; } /* 提交答案区域样式 */ .answer-container { background: #fff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03); } .answer-textarea { width: 100%; height: 200rpx; font-size: 28rpx; line-height: 1.5; margin-bottom: 24rpx; } .image-upload-container { margin-top: 24rpx; } .image-list { display: flex; flex-wrap: wrap; gap: 16rpx; justify-content: flex-start; } .image-item, .upload-btn { width: calc((100% - 32rpx) / 3); max-width: 220rpx; height: 160rpx; margin-bottom: 16rpx; } .preview-image { width: 100%; height: 100%; object-fit: contain; } .delete-btn { position: absolute; top: 8rpx; right: 8rpx; width: 40rpx; height: 40rpx; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .delete-icon { color: #fff; font-size: 32rpx; line-height: 1; } .upload-btn { width: 160rpx; height: 160rpx; border: 2rpx dashed #ddd; border-radius: 8rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f5f5f5; } .upload-icon { font-size: 48rpx; color: #999; margin-bottom: 8rpx; } .upload-text { font-size: 24rpx; color: #999; } .image-tip { font-size: 24rpx; color: #999; margin-top: 16rpx; } /* 主swiper样式 */ .main-swiper { height: calc(100vh - 25rpx); } .content-screen { height: 100%; display: flex; flex-direction: column; } /* 提交按钮样式 */ .submit-btn-container { margin-top: 40rpx; padding: 0 24rpx; } /* 每题:重答(左) + 提交(右) 一行两键 */ .submit-btn-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24rpx; } .btn-resubmit { flex: 1; text-align: center; background: #ffb84d; color: #fff; border-radius: 12rpx; font-size: 32rpx; font-weight: 400; border: none; margin: 0; transition: all 0.2s ease; } .btn-resubmit::after { border: none; } .btn-resubmit:active { background: #ff9900; transform: scale(0.98); } .btn-submit-one { flex: 1; text-align: center; background: #007AFF; color: #fff; border-radius: 12rpx; font-size: 32rpx; font-weight: 400; border: none; margin: 0; transition: all 0.2s ease; } .btn-submit-one::after { border: none; } .btn-submit-one:active { background: #0062CC; transform: scale(0.98); } .btn-submit-one.btn-submit-disabled, .btn-submit-one[disabled] { background: #E5E5EA; color: #8E8E93; } .btn-submit-one[disabled]:active { background: #E5E5EA; transform: none; } .submit-btn { width: 100%; /* height: 88rpx; line-height: 88rpx; */ text-align: center; background: #007AFF; color: #fff; border-radius: 12rpx; font-size: 32rpx; font-weight: 400; border: none; transition: all 0.2s ease; } .submit-btn::after { border: none; } .submit-btn:active { background: #0062CC; transform: scale(0.98); } .submit-btn[disabled] { background: #E5E5EA; color: #8E8E93; opacity: 1; } .card { background: #f5f7fa; /* 更深一点的灰色 */ border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); margin-bottom: 32rpx; padding: 32rpx; } .card-title { font-size: 32rpx; color: #f13271; font-weight: bold; margin-right: 16rpx; } .question-card { background: #f0f4fa; /* 比 .card 再深一点的蓝灰色 */ } .answer-card { background: #f6f2ff; /* 淡紫色,区分我的答案 */ } .teacher-card { background: #f9f6ef; /* 淡黄色,区分老师批复 */ } /* 老师批复顺延在答案下方(与答案同一滚动区域) */ .teacher-feedback-inline { margin-top: 24rpx; } /* 解析:回答完成且审批通过后展示 */ .explanation-inline { margin-top: 24rpx; } .explanation-card { background: #e8f4fd; } .explanation-content { font-size: 28rpx; color: #333; line-height: 1.6; } .section-header { display: flex; align-items: center; margin-bottom: 20rpx; } .section-title { font-size: 32rpx; color: #1A7CFF; font-weight: bold; margin-right: 16rpx; } .resubmit-btn { width: 100%; text-align: center; background: #ffb84d; color: #fff; border-radius: 12rpx; font-size: 32rpx; font-weight: 400; border: none; margin-top: 16rpx; transition: all 0.2s ease; } .resubmit-btn::after { border: none; } .resubmit-btn:active { background: #ff9900; transform: scale(0.98); } /* 统一提交全部按钮 */ .submit-all-bar { flex-shrink: 0; padding: 24rpx 32rpx 32rpx; padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); background: #fff; border-top: 1rpx solid #EBEDF0; } /* 老师批复放在提交按钮下方 */ .teacher-feedback-below-bar { padding: 24rpx 32rpx 48rpx; padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); background: #fff; } .submit-all-btn { width: 100%; text-align: center; background: #007AFF; color: #fff; border-radius: 12rpx; font-size: 32rpx; font-weight: 400; border: none; } .submit-all-btn::after { border: none; } .submit-all-btn:active { background: #0062CC; transform: scale(0.98); } .card-title-row { display: flex !important; align-items: center !important; justify-content: space-between !important; } .review-tip { font-size: 24rpx; padding: 4rpx 12rpx; border-radius: 4rpx; } .review-tip.need { background-color: #FFF7E6; color: #FA8C16; } .review-tip.no-need { background-color: #F6FFED; color: #52C41A; } /* .review-tip.approved { background-color: #E6F7FF; color: #1890FF; } */ .feedback-images { display: flex; flex-wrap: wrap; gap: 16rpx; justify-content: flex-start; } .feedback-images image { width: calc((100% - 32rpx) / 3); max-width: 220rpx; height: 160rpx; object-fit: contain; margin-bottom: 16rpx; } .review-time { font-size: 24rpx; color: #999; } /* ========== 双层布局样式(与客观题页面一致) ========== */ /* 试题详情:背景层资料 + 前置问题面板 */ .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, .question-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; } .section-title-underline { width: 48rpx; height: 6rpx; background: #e74c3c; margin-top: 8rpx; border-radius: 2rpx; } /* 多材料 tab 切换样式 */ .material-tabs-scroll { width: 100%; white-space: nowrap; } .material-tabs-inner { display: inline-flex; flex-wrap: nowrap; gap: 16rpx; padding: 0 28rpx; } .material-tab { display: inline-flex; flex-direction: column; align-items: center; padding: 12rpx 24rpx 8rpx; font-size: 28rpx; color: #666; flex-shrink: 0; } .material-tab.active { color: #333; font-weight: 500; } .material-tab.active .material-tab-underline { display: block; } .material-tab-underline { display: none; 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-swiper { width: 100%; background: #fff; } .material-placeholder { height: 600rpx; width: 100%; } /* 区块通用 */ .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; } /* 前置层:问题面板 */ .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: #F6F7F9; 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: #F6F7F9; padding: 12rpx 0; } .panel-drag-bar { width: 80rpx; height: 8rpx; background: #d0d0d0; border-radius: 4rpx; } /* 区块标题 */ .section-head { margin-bottom: 20rpx; } /* 问题区块 */ .section-question { padding: 16rpx 28rpx 0; flex: 1; min-height: 0; display: flex; flex-direction: column; } .question-content-swiper { flex: 1; min-height: 0; width: 100%; height: 0; /* max-height: 50vh; */ } .content-swiper-item { width: 100%; min-height: 0; } /* 题目内容可滚动区域 */ .question-body-scroll { height: 100%; width: 100%; } .bottom-spacing { height: 24rpx; width: 100%; }