|
|
@@ -1,16 +1,9 @@
|
|
|
<template>
|
|
|
<div class="step_exam_item">
|
|
|
<div class="left_line"></div>
|
|
|
- <div
|
|
|
- class="step_item"
|
|
|
- v-for="(item, index) in menuList"
|
|
|
- :key="index"
|
|
|
- :class="{ active: index === activeIndex, success: item.status === 1 }"
|
|
|
-
|
|
|
- >
|
|
|
+ <div class="step_item" v-for="(item, index) in menuList" :key="index" :class="activeIndex==index?(activeIndex==2?'active_score':'active'):''">
|
|
|
<div class="step_title" @click="MenuChange(index, item)">
|
|
|
<div class="num_box">
|
|
|
- <!-- 假设 el-icon-success 是全局注册的组件或 CSS 类 -->
|
|
|
<span v-if="item.status === 1" class="el-icon-success"></span>
|
|
|
<span v-else class="step_num">{{ index + 1 }}</span>
|
|
|
</div>
|
|
|
@@ -116,19 +109,21 @@ const menuList = computed(() => {
|
|
|
return list
|
|
|
})
|
|
|
|
|
|
-// 6. 激活的菜单索引
|
|
|
+// 6. 激活的菜单索引 只有三种情况
|
|
|
const activeIndex = computed(() => {
|
|
|
const currentPath = route.path
|
|
|
-
|
|
|
- // 特殊处理 scanStudentHome 页面
|
|
|
- if (currentPath.includes('scanStudentHome')) {
|
|
|
- const stepActiveIndex = menuList.value.findIndex(item => item.name === '扫描学生')
|
|
|
- return stepActiveIndex !== -1 ? stepActiveIndex : stepOnIndex.value
|
|
|
+ if(currentPath=='/exam/question')
|
|
|
+ {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ else if(currentPath=='/exam/scanList')
|
|
|
+ {
|
|
|
+ return 1
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ return 2
|
|
|
}
|
|
|
-
|
|
|
- // 根据路由路径找到匹配的菜单项索引
|
|
|
- const pathMatchIndex = menuList.value.findIndex(item => currentPath.includes(item.path))
|
|
|
- return pathMatchIndex !== -1 ? pathMatchIndex : stepOnIndex.value
|
|
|
})
|
|
|
|
|
|
// --- 方法 ---
|
|
|
@@ -291,7 +286,9 @@ onMounted(() => {
|
|
|
|
|
|
.menu_item_active
|
|
|
{
|
|
|
- color: #2e64fa;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #2e64fa;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
}
|
|
|
}
|
|
|
&.success {
|
|
|
@@ -304,6 +301,8 @@ onMounted(() => {
|
|
|
border-color: #2e64fa;
|
|
|
background-color: rgba(46, 100, 250, 0.1);
|
|
|
box-shadow: inset 1px -1px 0px 1.5px #2e64fa;
|
|
|
+
|
|
|
+ // background-color: red;
|
|
|
.step_title {
|
|
|
background-color: #2e64fa;
|
|
|
color: #fff;
|
|
|
@@ -318,6 +317,19 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .active_score
|
|
|
+ {
|
|
|
+
|
|
|
+ .step_title {
|
|
|
+ color:#2E64FA;
|
|
|
+ }
|
|
|
+ .step_num {
|
|
|
+ background-color: #B0B2B7;
|
|
|
+ color: #2e64fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
/* 小屏幕笔记本的样式 常见分辨率:1366x768 */
|
|
|
@media (max-height: 768px) {
|
|
|
.step_item {
|