.container { padding: 0; background-color: #F5F7FA; display: flex; flex-direction: column; align-items: center; } /* 加载中样式 */ .loading-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80vh; } .loading-spinner { width: 60rpx; height: 60rpx; border: 6rpx solid #f3f3f3; border-top: 6rpx solid #1A7CFF; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20rpx; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* PDF 文件卡片 - 复用 .card 基础样式 */ .pdf-card:active { background: #f8f8f8; transform: scale(0.98); } .pdf-card .title-content::before { background: linear-gradient(180deg, #E74C3C 0%, #EC7063 100%); } .pdf-card-content { display: flex; align-items: center; } .file-icon { margin-right: 30rpx; margin-left: 26rpx; } .pdf-icon { width: 88rpx; height: 100rpx; background: #E74C3C; border-radius: 8rpx; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 28rpx; position: relative; } .pdf-icon:after { content: ''; position: absolute; top: 0; right: 0; border-width: 16rpx; border-style: solid; border-color: #FFFFFF #FFFFFF transparent transparent; border-radius: 0 0 0 4rpx; } .file-info { flex: 1; display: flex; flex-direction: column; } .file-name { font-size: 32rpx; color: #333333; font-weight: 500; margin-bottom: 8rpx; word-break: break-all; } .file-size { font-size: 24rpx; color: #999999; } /* 操作按钮样式 */ .action-buttons { width: 100%; display: flex; justify-content: space-between; margin-bottom: 60rpx; } .action-btn { flex: 1; height: 88rpx; display: flex; align-items: center; justify-content: center; border-radius: 44rpx; margin: 0 15rpx; padding: 0; line-height: 1; } .preview-btn { background: #1A7CFF; color: white; } .download-btn { background: #FFFFFF; color: #333333; border: 1px solid #DDDDDD; } .btn-icon { width: 32rpx; height: 32rpx; margin-right: 10rpx; } .preview-icon { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xIDEycy00LTggMTEtOCAxMSA4IDExIDgtNCA4LTExIDgtMTEtOC0xMS04eiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiPjwvY2lyY2xlPjwvc3ZnPg=='); background-size: contain; background-repeat: no-repeat; } .download-icon { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMDEtMiAySDVhMiAyIDAgMDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg=='); background-size: contain; background-repeat: no-repeat; } /* 说明区域样式 */ .instructions { width: 100%; padding: 30rpx; background: #FFFFFF; border-radius: 16rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); } .instruction-title { font-size: 32rpx; color: #333333; font-weight: 500; margin-bottom: 30rpx; } .instruction-item { display: flex; align-items: flex-start; margin-bottom: 20rpx; } .instruction-number { width: 40rpx; height: 40rpx; background: #EBF3FF; color: #1A7CFF; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24rpx; margin-right: 16rpx; flex-shrink: 0; } .instruction-text { font-size: 28rpx; color: #666666; line-height: 40rpx; } /* 材料区域样式 */ .material-section { background: #fff; height: 500rpx; position: relative; padding: 20rpx 0; } .material-title { font-size: 28rpx; font-weight: bold; color: #333; padding: 0 30rpx; margin-bottom: 16rpx; } .material-swiper { height: calc(100% - 80rpx); width: 100%; } .material-item { padding: 0 30rpx; position: relative; } .material-content { height: 100%; position: relative; padding: 0 30rpx; box-sizing: border-box; } .material-text { font-size: 26rpx; color: #333; line-height: 1.6; margin-bottom: 20rpx; } .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-scroll { flex: 1; overflow: hidden; height: calc(100vh - 120rpx); /* 减去底部按钮区域的高度 */ padding-bottom: 160rpx; /* 添加较大的底部内边距,避免内容被遮挡 */ } .question-container { background: #fff; margin-top: 20rpx; padding: 30rpx; padding-bottom: 180rpx; /* 增加底部内边距,确保按钮不会遮挡内容 */ } .question-title { font-size: 32rpx; font-weight: bold; margin-bottom: 40rpx; } .options-list { margin-bottom: 40rpx; } .option-item { padding: 24rpx; margin-bottom: 20rpx; background: #f8f8f8; border-radius: 8rpx; position: relative; border: 1rpx solid transparent; transition: all 0.2s; } /* 自定义单选框样式 */ .option-item radio { position: absolute; /* right: 24rpx; */ top: 50%; transform: translateY(-50%); } /* 自定义多选框样式 */ .option-item checkbox { position: absolute; /* right: 24rpx; */ top: 50%; transform: translateY(-50%); } /* 选中样式 */ .option-item.selected { background: #e6f3ff; border: 1rpx solid #007aff; } /* 添加底部按钮固定样式 */ .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); z-index: 100; /* 确保按钮区域在最上层 */ } .button-container { display: flex; justify-content: space-between; padding: 0; } /* 适配 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)); } } .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 { display: inline-block; width: 90%; margin-right: 20rpx; padding: 20rpx; background: #f8f8f8; border-radius: 8rpx; box-sizing: border-box; position: relative; } .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 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .loading-spinner { width: 40rpx; height: 40rpx; border: 4rpx solid #f3f3f3; border-top: 4rpx solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 试卷信息 */ .paper-info { padding: 30rpx; background: #fff; } .paper-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; } .paper-description { font-size: 28rpx; color: #666; line-height: 1.5; } .pdf-container { flex: 1; background: #fff; margin: 20rpx 0; } .no-pdf { height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: 28rpx; } .footer { padding: 30rpx; background: #fff; box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); } .download-button { width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; background: #3498db; color: #fff; border-radius: 44rpx; font-size: 32rpx; } .download-button[disabled] { background: #ccc; color: #fff; } /* 适配底部安全区域 */ .footer { padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); } /* 材料区域样式 */ .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; } .question-scroll.no-material { height: calc(100vh - 200rpx - 120rpx); /* 减去试卷信息和底部按钮的高度 */ } .question-container { background: #fff; margin-top: 20rpx; padding: 30rpx; padding-bottom: 120rpx; } .question-header { display: flex; justify-content: space-between; margin-bottom: 15rpx; } .question-type { font-size: 28rpx; color: #007aff; font-weight: bold; } .question-progress { font-size: 28rpx; color: #999; } .question-score { font-size: 26rpx; color: #ff6b6b; margin-bottom: 20rpx; } .question-title { font-size: 32rpx; font-weight: bold; margin-bottom: 40rpx; line-height: 1.6; } .options-list { margin-bottom: 40rpx; } .option-item { padding: 24rpx; margin-bottom: 20rpx; background: #f8f8f8; border-radius: 8rpx; } .option-label { display: inline-block; width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; background: #e6e6e6; border-radius: 50%; font-size: 24rpx; margin-right: 20rpx; color: #666; } .option-content { display: inline; font-size: 28rpx; color: #333; } /* 底部按钮区域 */ .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%; /* height: 60rpx; line-height: 60rpx; */ 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: 140rpx; /* 与按钮区域高度相近 */ width: 100%; } /* 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; } /* Modify the answer input style */ .answer-input { width: 100%; min-height: 300rpx; margin-top: 20rpx; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 8rpx; font-size: 28rpx; color: #333; background: #fff; box-sizing: border-box; line-height: 1.6; } .pdf-viewer { flex: 1; width: 100%; } .page-container { padding: 20rpx; background-color: #F5F7FA; } /* 答案提交区域 */ .submit-answer-section { margin-top: 40rpx; background-color: #fff; border-radius: 12rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .section-title { position: relative; margin-bottom: 32rpx; display: flex; align-items: center; flex-direction: row; } .need-audit { color:#e67308; } .no-audit { color:#0b6e1b } .approved { color:#0b6e1b; } .title-content { font-size: 32rpx; font-weight: 600; color: #333333; padding-left: 24rpx; position: relative; flex: 1; } /* 左侧装饰条 */ .title-content::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8rpx; height: 32rpx; background: linear-gradient(180deg, #1890FF 0%, #3AA5FF 100%); border-radius: 4rpx; } /* 针对不同卡片的标题样式定制 */ .answer-card .title-content::before { background: linear-gradient(180deg, #1890FF 0%, #3AA5FF 100%); } .review-card .title-content::before { background: linear-gradient(180deg, #52C41A 0%, #73D13D 100%); } .instruction-card .title-content::before { background: linear-gradient(180deg, #FAAD14 0%, #FFC53D 100%); } .description-card .title-content::before { background: linear-gradient(180deg, #722ED1 0%, #9254DE 100%); } .description-content { font-size: 28rpx; color: #333333; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } .upload-area { margin: 20rpx 0; } .upload-section { margin-top: 24rpx; } /* 加号图标样式 */ .plus-icon { font-size: 48rpx; color: #999; line-height: 1; margin-bottom: 8rpx; font-weight: 300; } /* 上传文字样式 */ .upload-text { font-size: 24rpx; color: #999; } /* 图片展示区域 */ .uploaded-images, .temp-images { display: flex; flex-wrap: wrap; gap: 20rpx; margin-top: 16rpx; } .image-item { position: relative; width: 200rpx; height: 200rpx; } .image-item image { width: 100%; height: 100%; border-radius: 8rpx; object-fit: cover; } .delete-btn { position: absolute; top: -16rpx; right: -16rpx; width: 32rpx; height: 32rpx; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24rpx; } /* 提交按钮样式 */ .submit-btn { width: 100%; background: #1890FF; color: #FFFFFF; border-radius: 8rpx; font-size: 32rpx; margin-top: 32rpx; } .resubmit-btn { width: 100%; background: #FFFFFF; color: #1890FF; border: 2rpx solid #1890FF; border-radius: 8rpx; font-size: 32rpx; margin-top: 32rpx; } /* 老师批复区域 */ .teacher-feedback-section { margin-top: 40rpx; background-color: #fff; border-radius: 12rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .feedback-content { background-color: #f9f9f9; border-radius: 8rpx; padding: 20rpx; } .feedback-text { font-size: 28rpx; color: #333; line-height: 1.6; margin-bottom: 20rpx; } .feedback-images { display: flex; flex-wrap: wrap; gap: 16rpx; justify-content: flex-start; } .review-image { width: calc((100% - 32rpx) / 3); max-width: 220rpx; height: 160rpx; object-fit: contain; margin-bottom: 16rpx; } /* 使用说明区域 - 放在最下方 */ .instructions { margin-top: 40rpx; margin-bottom: 30rpx; background-color: #fff; border-radius: 12rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .instruction-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .instruction-item { display: flex; align-items: center; margin-bottom: 16rpx; } .instruction-number { width: 40rpx; height: 40rpx; background-color: #3a86ff; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24rpx; margin-right: 20rpx; } .instruction-text { font-size: 28rpx; color: #666; line-height: 1.4; } /* 首先添加页面滚动样式 */ .page-scroll { height: 100vh; background-color: #F5F7FA; } /* 确保内容区域和卡片样式正确 */ .content-area { width: 100%; margin-bottom: 10px; } /* .review-status { padding: 20rpx; text-align: center; } */ /* .status-pending { color: #faad14; font-size: 28rpx; } */ /* .status-completed { color: #52c41a; font-size: 28rpx; } */ /* 卡片基础样式 */ .card { background: #FFFFFF; border-radius: 16rpx; padding: 32rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); margin-bottom: 10px; } /* 卡片标题样式 */ .card-title-row { display: flex; align-items: center; margin-bottom: 24rpx; } .card-title { font-size: 32rpx; font-weight: 500; color: #333333; } /* 上传区域样式 */ .upload-section { margin-top: 24rpx; } .upload-btn { width: 30%; height: 200rpx; background: #f5f5f5; border: 2rpx dashed #d9d9d9; border-radius: 8rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 图片展示区域 */ .uploaded-images, .temp-images { display: flex; flex-wrap: wrap; gap: 20rpx; margin-top: 16rpx; } .image-item { position: relative; width: 200rpx; height: 200rpx; } .image-item image { width: 100%; height: 100%; border-radius: 8rpx; object-fit: cover; } /* 删除按钮样式 */ .delete-btn { position: absolute; top: -16rpx; right: -16rpx; width: 32rpx; height: 32rpx; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24rpx; } /* 状态提示文字样式 */ /* .status-pending { color: #FAAD14; font-size: 28rpx; } */ /* .status-completed { color: #52C41A; font-size: 28rpx; } */ /* 图片容器样式 */ .images-container { display: flex; flex-wrap: wrap; gap: 20rpx; margin: 20rpx 0; } /* 图片项样式 */ .image-item { width: 31%; height: 200rpx; position: relative; } .image-item image { width: 100%; height: 100%; border-radius: 8rpx; object-fit: cover; } /* 加号图标样式 */ .plus-icon { font-size: 48rpx; color: #999; line-height: 1; margin-bottom: 8rpx; font-weight: 300; } /* 上传文字样式 */ .upload-text { font-size: 24rpx; color: #999; } /* 删除按钮样式 */ .delete-btn { position: absolute; top: -16rpx; right: -16rpx; width: 32rpx; height: 32rpx; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24rpx; } /* 批复状态样式 */ .review-status { text-align: center; margin-bottom: 24rpx; } .status-pending { color: #FAAD14; font-size: 28rpx; } .status-completed { color: #52C41A; font-size: 28rpx; } /* 批复时间样式 */ .review-time { font-size: 24rpx; color: #999999; margin: 16rpx 0; } /* 批复文字内容样式 */ .review-comment { font-size: 28rpx; color: #333333; line-height: 1.6; padding: 16rpx; background: #F8F8F8; border-radius: 8rpx; margin: 16rpx 0; } /* 批复图片区域样式 */ .review-images { display: flex; flex-wrap: wrap; gap: 16rpx; justify-content: flex-start; } .review-image { width: calc((100% - 32rpx) / 3); max-width: 220rpx; height: 160rpx; object-fit: contain; margin-bottom: 16rpx; }