Browse Source

智能判分考试左侧菜单选中的菜单和二级菜单样式优化调整

dengshaobo 1 week ago
parent
commit
bf59c26a7e
1 changed files with 31 additions and 19 deletions
  1. 31 19
      src/views/exam/components/stepItem.vue

+ 31 - 19
src/views/exam/components/stepItem.vue

@@ -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 {