分数等级

src/views/ResultView.vue

@@ -39,7 +39,18 @@ const nameMapping = {
 // 计算属性：根据评分等级返回对应的样式类
 const gradeClass = computed(() => {
   if (!grade.value) return ''
-
+  switch (grade.value) {
+    case '优秀':
+      return 'badge-success'   // 绿色
+    case '合格':
+      return 'badge-primary'   // 蓝色
+    case '良':
+      return 'badge-warning'   // 黄色/橙色
+    case '不合格':
+      return 'badge-danger'    // 红色
+    default:
+      return 'badge-secondary' // 灰色，兜底
+  }
   // 假设不合格的等级是 '不合格' 或 'D'，其他都是合格
   const isUnqualified = grade.value === '不合格'
 
@@ -142,11 +153,13 @@ onBeforeUnmount(() => {
     <NavBarPage title="考试" type="home" />
     <div style="height: 46px"></div>
     <div class="score">
-      <span v-if="grade" :class="['badge', gradeClass]">{{ grade }}</span>
+      <!-- <span v-if="grade" :class="['badge', gradeClass]">{{ grade }}</span> -->
       <span class="score-title">最终得分</span>
       <p class="score-num">
-        <span style="margin-right: 0.2rem;">{{ score }}</span>分
+        <span class="score-tit" style="margin-right: 0.2rem;">{{ score }}</span>分
+        <span v-if="grade" :class="['badge', gradeClass]">{{ grade }}</span>
       </p>
+
     </div>
     <div style="height: 9.06rem; visibility: hidden"></div>
     <div class="content">
@@ -171,7 +184,7 @@ onBeforeUnmount(() => {
             <span>{{ item.reason }}</span>
           </p>
           <p>
-            <span>标准回答：</span>
+            <span>话术建议：</span>
             <span>{{ item.standard_answer }}</span>
           </p>
         </div>
@@ -250,7 +263,7 @@ body {
     color: rgba(64, 149, 229, 1);
     font-size: 1rem;
 
-    span {
+    .score-tit {
       display: block;
       width: 5.06rem;
       height: 3.31rem;
@@ -259,33 +272,53 @@ body {
       text-align: center;
       font-family: Times New Roman-regular;
     }
-  }
 
-  .badge {
-    position: absolute;
-    /* 在 .score 内部悬浮 */
-    left: 0.5rem;
-    top: 0.5rem;
-    // background: #f5222d;
-    // color: #fff;
-    font-size: 1rem;
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.3rem;
-    white-space: nowrap;
-  }
+    .badge {
+      font-size: 0.7rem;
+      padding: 0.3rem;
+      border-radius: 0.3rem;
+      margin-left: 0.3rem;
+      margin-bottom: 0.2rem;
+    }
 
-  /* 不合格：红色 */
-  .badge-danger {
-    color: #fff;
-    background: #f5222d;
+    /* 不合格：红色 */
+    .badge-danger {
+      color: #fff;
+      background: #f5222d;
 
-  }
+    }
 
-  /* 合格：绿色 */
-  .badge-warning {
+    // 良：橙色
+    .badge-warning {
       color: #fff;
-  background-color: #28a745;
+      background-color: #fe832f;
+    }
+
+    /* 合格：蓝色 */
+    .badge-primary {
+      color: #fff;
+      background-color: #2c8bff;
+    }
+
+    /* 优秀：绿色 */
+    .badge-success {
+      color: #fff;
+      background-color: #28a745;
+    }
   }
+
+  // .badge {
+  //   position: absolute;
+  //   /* 在 .score 内部悬浮 */
+  //   // left: 0.5rem;
+  //   // top: 0.5rem;
+  //   // background: #f5222d;
+  //   // color: #fff;
+  //   // font-size: 1rem;
+  //   // padding: 0.2rem 0.4rem;
+  //   // border-radius: 0.3rem;
+  //   // white-space: nowrap;
+  // }
 }
 
 .content {