-
练习简介
-
- 练习涵盖C++基础语法、面向对象编程、数据结构等核心内容，旨在全面评估学生对C++编程语言的掌握程度和实际应用能力。
-
+
+ {{ practice.description || '该练习包含' + practice.questionCount + '道题目，涵盖了相关知识点。' }}
-
-
@@ -909,184 +909,8 @@
-
-
-
-
-
-
-
-
-
-
-
{{ currentExamDetail.title }}
-
-
-
-
-
-
-
-
-
-
- {{ question.content }}
-
-
-
-
-
-
-
-
-
-
{{ option.text }}
-
-
![]()
-
-
-
-
-
-
-
-
-
-
-
答案解析：
-
- 这道题考查的是危险化学品安全管理的相关知识点，根据相关法规要求，危险化学品生产企业应当提供完整的安全技术说明书和应急处理措施。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ currentExamDetail.score }}
-
-
-
得分
-
-
-
-
-
- {{ currentDetailType === 'exam' ? '交卷时间：' : '练习时间：' }}
- {{ currentDetailType === 'exam' ? (currentExamDetail as any).examDate :
- (currentExamDetail as any).practiceDate }}
-
-
- {{ currentDetailType === 'exam' ? '考试时长：' : '练习时长：' }}
- {{ currentExamDetail.duration }}分钟
-
-
- {{ currentDetailType === 'exam' ? '考试题量：' : '练习题量：' }}
- {{ currentExamDetail.totalQuestions }}题
-
-
-
-
-
-
-
-
{{ currentExamDetail.correctCount }}
-
答对题数
-
-
-
{{ currentExamDetail.wrongCount }}
-
答错题数
-
-
-
{{ currentExamDetail.totalQuestions - currentExamDetail.correctCount -
- currentExamDetail.wrongCount }}
-
答对题数
-
-
-
-
-
-
-
答题卡
-
-
-
-
单选 (10)
-
-
- {{ String(i).padStart(2, '0') }}
-
-
-
-
-
-
-
多选 (10)
-
-
- {{ String(i).padStart(2, '0') }}
-
-
-
-
-
-
-
-
-
- 答对
-
-
-
- 答错
-
-
-
-
-
-
-
-
-
-
-
+
@@ -1097,6 +921,7 @@ import { useMessage, NModal, NUpload, NInput, NForm, NFormItem, NButton } from '
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'
import SafeAvatar from '@/components/common/SafeAvatar.vue'
+import ExamDetail from '../components/ExamDetail.vue';
const { t, locale } = useI18n()
@@ -2438,7 +2263,9 @@ const getFileIcon = () => {
}
}
-// 已移除未使用的新建文件夹函数，避免构建时报未使用错误
+const createNewFolder = () => {
+ message.info('新建文件夹功能开发中...')
+}
const renameFile = (fileId: number) => {
message.info(`重命名文件 ${fileId}`)
@@ -2664,10 +2491,10 @@ onMounted(() => {
/* 主要内容区域 */
.profile-content {
- width: 80vw;
+ /* width: 80vw; */
/* 调整为80vw */
- min-height: calc(100vh - 6.4vh);
- margin: 2.08vh auto 0 auto;
+ min-height: 1415px;
+ margin: 3vh auto 0 auto;
/* 距离顶部40px转换为vh */
position: relative;
background: #f6f6f6;
@@ -2677,15 +2504,14 @@ onMounted(() => {
.block_14 {
position: relative;
width: 13.4vw;
- /* 20vw缩小33% = 20vw * 0.67 = 13.4vw */
- min-height: calc(100vh - 6.4vh);
+ height: auto;
background: #ffffff;
/* 改为白色背景 */
- border-right: 0.05vw solid rgba(232, 232, 232, 1);
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
+ margin-bottom: 30px;
/* 内容居中 */
}
@@ -2740,12 +2566,12 @@ onMounted(() => {
/* 分割线 */
.menu-divider {
- width: 10vw;
+ width: 11vw;
/* 与菜单项宽度一致 */
height: 0.05vh;
/* 1px转换为vh */
background: #E6E6E6;
- margin: 1.5vh 0;
+ margin: 0;
/* 上下间距 */
}
@@ -2758,20 +2584,20 @@ onMounted(() => {
.image-text_24,
.image-text_25,
.image-text_26 {
- width: 10vw;
+ width: 11vw;
/* 进一步缩小菜单项宽度，适应新的导航栏宽度 */
height: auto;
/* 自适应高度 */
min-height: 3vh;
/* 设置最小高度，让盒子更大 */
- margin: 1.5vh 0;
+ margin: 1.5vh;
/* 减小间距：从2.34vh减少到1.5vh */
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: left;
/* 菜单项内容居中 */
cursor: pointer;
- padding: 1.2vh 0.5vw;
+ padding: 1.5vh 0 1.5vh 1.8vw;
/* 增加上下内边距，让盒子更高 */
border-radius: 0.31vw;
/* 6px转换为vw */
@@ -2830,7 +2656,7 @@ onMounted(() => {
.text-group_24,
.text-group_25,
.text-group_26 {
- font-size: 1.04vw;
+ font-size: 16px;
/* 20px转换为vw */
color: rgba(102, 102, 102, 1);
/* 默认灰色 */
@@ -2869,15 +2695,15 @@ onMounted(() => {
/* 右侧课程列表区域 */
.group_5 {
- width: 60vw;
+ width: 65vw;
/* 保持60vw宽度 */
min-height: calc(100vh - 6.4vh);
- padding: 2.08vh 2.08vw;
+ padding: 2.08vh 1.9vw;
/* 40px转换为vh和vw */
background: rgba(255, 255, 255, 1);
overflow-y: auto;
margin-left: 1.56vw;
- /* 30px转换为vw：30/1920*100 = 1.56vw */
+ margin-bottom: 30px;
}
/* 课程筛选标签 */
@@ -2886,7 +2712,7 @@ onMounted(() => {
height: 2.08vh;
/* 40px转换为vh */
align-items: center;
- margin-bottom: 1.67vh;
+ margin: 10px 0 20px 0;
/* 32px转换为vh */
gap: 2.81vw;
/* 54px转换为vw：54/1920*100 = 2.81vw */
@@ -2968,36 +2794,45 @@ onMounted(() => {
/* 课程缩略图区域 */
.block_4 {
- width: 10.42vw;
- /* 200px转换为vw */
margin-right: 1.04vw;
- /* 20px转换为vw */
}
.box_3 {
- width: 10.42vw;
+ width: 202px;
/* 200px转换为vw */
- height: 15.63vh;
+ height: 156px;
/* 大幅增加高度到300px转换为vh，让图片展示到外部盒子高度 */
position: relative;
- border-radius: 0.42vw;
+ border-radius: 5px;
/* 8px转换为vw */
overflow: hidden;
}
.thumbnail_4 {
width: 100%;
- height: 100%;
+ height: 156px;
object-fit: cover;
}
/* 状态标签 */
+.status-image-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 10;
+}
+
+.status-image {
+ width: 66px;
+ height: 22px;
+}
+
.status-text {
position: absolute;
top: 26vh;
/* 12px转换为vh */
- left: 0.63vw;
- /* 12px转换为vw */
+ right: 0.63vw;
+ /* 调整到右侧 */
padding: 0.21vh 0.63vw;
/* 4px 12px转换 */
border-radius: 0.21vw;
@@ -3033,11 +2868,11 @@ onMounted(() => {
}
.text_16 {
- font-size: 0.94vw;
+ font-size: 18px;
/* 18px转换为vw */
- color: rgba(51, 51, 51, 1);
+ color: #000000;
font-family: 'Microsoft YaHei', Arial, sans-serif;
- font-weight: 500;
+ font-weight: 600;
flex: 1;
}
@@ -3050,16 +2885,16 @@ onMounted(() => {
.text_17 {
font-size: 0.73vw;
/* 14px转换为vw */
- color: rgba(250, 173, 20, 1);
+ color: #999999;
font-family: 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
}
/* 讲师信息 */
.text_18 {
- font-size: 0.73vw;
+ font-size: 14px;
/* 14px转换为vw */
- color: rgba(102, 102, 102, 1);
+ color: #999;
font-family: 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
margin-bottom: 0.42vh;
@@ -3068,13 +2903,14 @@ onMounted(() => {
/* 课程描述 */
.text_19 {
- font-size: 0.73vw;
+ font-size: 14px;
/* 14px转换为vw */
- color: rgba(102, 102, 102, 1);
+ color: #999;
font-family: 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
line-height: 1.5;
- margin-bottom: 0.83vh;
+ margin-top: 5px;
+ margin-bottom: 22px;
/* 16px转换为vh */
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -3085,7 +2921,7 @@ onMounted(() => {
/* 课程统计信息 */
.group_7 {
align-items: center;
- gap: 1.04vw;
+ gap: 5px;
/* 20px转换为vw */
}
@@ -3100,19 +2936,20 @@ onMounted(() => {
.text_20,
.text_21,
.text_22 {
- font-size: 0.73vw;
+ font-size: 14px;
/* 14px转换为vw */
- color: rgba(102, 102, 102, 1);
+ color: #999;
font-family: 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
+ margin-right: 10px;
}
/* 操作按钮 */
.text-wrapper_2 {
- background: rgba(2, 134, 206, 1);
- border-radius: 0.31vw;
+ background: #0288D1;
+ border-radius: 5px;
/* 6px转换为vw */
- padding: 0.42vh 0.83vw;
+ padding: 6px 22px;
/* 8px 16px转换 */
cursor: pointer;
transition: background-color 0.3s ease;
@@ -3124,9 +2961,9 @@ onMounted(() => {
}
.text_23 {
- font-size: 0.73vw;
+ font-size: 14px;
/* 14px转换为vw */
- color: rgba(255, 255, 255, 1);
+ color: white;
font-family: 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
@@ -3151,16 +2988,15 @@ onMounted(() => {
}
.pagination-item {
- min-width: 2.08vw;
- /* 40px转换为vw */
- height: 2.08vh;
- /* 40px转换为vh */
+ min-width: 38px;
+ height: 38px;
+ background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.73vw;
/* 14px转换为vw */
- color: rgba(102, 102, 102, 1);
+ color: #666666;
font-family: 'Microsoft YaHei', Arial, sans-serif;
cursor: pointer;
border-radius: 0.21vw;
@@ -3168,7 +3004,6 @@ onMounted(() => {
transition: all 0.3s ease;
padding: 0.52vh 0.83vw;
/* 10px 16px转换 */
- background: rgba(255, 255, 255, 1);
border: 0.05vw solid rgba(232, 232, 232, 1);
}
@@ -3178,16 +3013,15 @@ onMounted(() => {
}
.pagination-item.active {
- background: rgba(2, 134, 206, 1);
+ background: #0088D1;
color: rgba(255, 255, 255, 1);
- border-color: rgba(2, 134, 206, 1);
+ border-color: #0088D1;
}
.pagination-item.disabled {
color: rgba(204, 204, 204, 1);
cursor: not-allowed;
border-color: rgba(232, 232, 232, 1);
- background: rgba(248, 248, 248, 1);
}
.pagination-item.disabled:hover {
@@ -3198,7 +3032,7 @@ onMounted(() => {
.nav-button {
min-width: 3.65vw;
- /* 70px转换为vw，导航按钮稍宽一些 */
+ border: none;
}
.page-number {
@@ -3751,8 +3585,7 @@ onMounted(() => {
.exam-card {
background: #ffffff;
- border: 1px solid #e8e8e8;
- border-radius: 8px;
+ border: 1.5px solid #D8D8D8;
padding: 20px;
position: relative;
min-height: 280px;
@@ -3768,30 +3601,36 @@ onMounted(() => {
.exam-title {
font-size: 16px;
- font-weight: 600;
color: #333;
- margin-bottom: 16px;
+ margin-bottom: 10px;
line-height: 1.4;
+ border-bottom: 1.5px solid #E6E6E6;
+ padding-bottom: 10px;
}
.exam-score-badge {
position: absolute;
- top: 15px;
- right: 15px;
- background: #fff2e8;
- border: 1px solid #ffb366;
+ top: 11px;
+ right: 18px;
+ background: white;
+ border: 1px solid #FF6F0F;
border-radius: 4px;
- padding: 4px 8px;
+ padding: 0 11px;
}
.score-text {
- font-size: 14px;
+ font-size: 20px;
font-weight: bold;
- color: #ff8c00;
+ color: #FF6F0F;
+}
+
+.score-text span {
+ margin-left: 2px;
+ font-size: 10px;
}
.exam-details {
- margin-bottom: 16px;
+ margin-bottom: 5px;
}
.exam-meta-item {
@@ -3801,25 +3640,25 @@ onMounted(() => {
}
.meta-label {
- color: #666;
+ color: #999;
min-width: 70px;
}
.meta-value {
- color: #333;
+ color: #999;
font-weight: 500;
}
.exam-description {
- font-size: 13px;
- color: #666;
- line-height: 1.5;
+ padding: 8px 10px;
+ font-size: 12px;
+ color: #497087;
margin-bottom: auto;
flex: 1;
overflow: hidden;
- display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
+ background-color: #F5F8FB;
}
.exam-footer {
@@ -3828,7 +3667,6 @@ onMounted(() => {
align-items: center;
margin-top: auto;
padding-top: 16px;
- border-top: 1px solid #f0f0f0;
flex-shrink: 0;
}
@@ -3838,17 +3676,17 @@ onMounted(() => {
}
.exam-status-text {
- font-size: 14px;
- color: #666;
+ font-size: 12px;
+ color: #999;
}
.exam-action-right {
display: flex;
+ gap: 10px;
}
.action-btn {
padding: 6px 16px;
- border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
@@ -3858,9 +3696,9 @@ onMounted(() => {
}
.upcoming-btn {
- background: #f5f5f5;
- color: #999;
- border: 1px solid #e8e8e8;
+ background: #F5F8FB;
+ color: #999999;
+ border: none;
}
.upcoming-btn:hover {
@@ -3868,7 +3706,7 @@ onMounted(() => {
}
.ongoing-btn {
- background: #1890ff;
+ background: #0288D1;
color: white;
}
@@ -3877,12 +3715,12 @@ onMounted(() => {
}
.finished-btn {
- background: #52c41a;
+ background: #0288D1;
color: white;
}
.finished-btn:hover {
- background: #73d13d;
+ background: #01579B;
}
.files-container {
@@ -3907,8 +3745,8 @@ onMounted(() => {
}
.files-icon {
- width: 15px;
- height: 15px;
+ width: 15px;
+ height: 15px;
}
.course-name {
@@ -4095,9 +3933,9 @@ onMounted(() => {
.text_12,
.text_13,
.text_14 {
- font-size: 2.5vw;
+ font-size: 2.16px;
/* 手机端调整字体大小 */
- padding: 0.8vh 0;
+ padding: 10px 0;
/* 保持无左右内边距 */
}
@@ -4365,7 +4203,7 @@ onMounted(() => {
.text_16 {
font-size: 0.83vw;
- /* 16px转换为vw */
+
}
.text_19 {
@@ -4537,24 +4375,28 @@ onMounted(() => {
/* 考试详情页面样式 */
.exam-detail-overlay {
position: fixed;
- top: 0;
+ top: 60px;
+ /* 留出导航栏的空间 */
left: 0;
width: 100%;
- height: 100%;
+ height: calc(100% - 60px);
+ /* 减去导航栏的高度 */
background: #f5f5f5;
- z-index: 1000;
+ z-index: 999;
+ /* 降低z-index，确保导航栏可见 */
overflow-y: auto;
}
.exam-detail-container {
- max-width: 1200px;
margin: 0 auto;
background: #f5f5f5;
min-height: 100vh;
}
.exam-detail-header {
- padding: 16px 24px;
+ margin: auto;
+ width: 1420px;
+ padding: 24px 0;
background: #f5f5f5;
}
@@ -4609,9 +4451,11 @@ onMounted(() => {
}
.exam-detail-content {
+ margin: auto;
+ max-width: 1420px;
display: flex;
gap: 24px;
- padding: 24px;
+ padding: 0;
background: #f5f5f5;
}
@@ -4944,12 +4788,28 @@ onMounted(() => {
}
.stat-label {
- color: #666;
+ font-size: 10px;
+ color: #497087;
}
.stat-value {
+ margin-left: 20px;
color: #333;
font-weight: 500;
+ font-size: 18px;
+}
+
+.stat-value span {
+ margin-left: 2px;
+ font-size: 10px;
+}
+
+.stat-value.correct {
+ color: #3F76ED;
+}
+
+.stat-value.wrong {
+ color: #FE2E2F;
}
.answer-stats {
@@ -5179,7 +5039,7 @@ onMounted(() => {
width: 100%;
}
-.practice-grid {
+.exam-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
@@ -5213,16 +5073,16 @@ onMounted(() => {
.practice-score-badge {
position: absolute;
- top: 15px;
- right: 15px;
- background: #fff2e8;
- border: 1px solid #ffb366;
+ top: 11px;
+ right: 18px;
+ background: white;
+ border: 1px solid #FF6F0F;
border-radius: 4px;
- padding: 4px 8px;
+ padding: 0 11px;
}
.practice-details {
- margin-bottom: 16px;
+ margin-bottom: 10px;
}
.practice-meta-item {
@@ -5246,12 +5106,19 @@ onMounted(() => {
.practice-stats {
display: flex;
gap: 16px;
- margin-bottom: 16px;
- padding: 12px;
- background: #f8f9fa;
- border-radius: 6px;
+ height: 54px;
+ background: #F5F8FB;
+ align-items: center;
+ justify-content: space-evenly;
}
+.divider {
+ width: 1px;
+ height: 20px;
+ background: #EBEBEB;
+}
+
+
.stats-item {
display: flex;
flex-direction: column;
+ 
+ C.安全标签
+ 
+ 
+ 
+
+ 危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装（包括外包装件）上粘贴，或者拴挂与包装内危险化学品相符的化学品（ ）和安全技术说明书。
+
+ 
+ B.应急处理措施
+ 
+ 
+ 
+ 
+ 答对
+ 
+ 答错
+ 
+