区域样式

src/views/targetImprove/practice/knowledgeGraph/region.vue

@@ -3,13 +3,13 @@
     <!-- 薄弱补强区 -->
     <div class="region_section weak">
       <div class="region_header">
-        <span class="region_icon">
-          <img :src="require('@/assets/knowledgeGraph/buqiang.png')" alt="薄弱补强区" />
-        </span>
-        <div class="region_header_text">
+        <div class="region_header_main">
+          <span class="region_icon">
+            <img :src="require('@/assets/knowledgeGraph/buqiang.png')" alt="薄弱补强区" style="width: 32px; height: auto; display: block;" />
+          </span>
           <span class="region_title">薄弱补强区</span>
-          <span class="region_desc">得分率＜60% ｜ 优先补齐短板</span>
         </div>
+        <span class="region_desc">得分率＜60% ｜ 优先补齐短板</span>
       </div>
       <div class="knowledge_rows" ref="weakRowsBox">
         <div
@@ -21,7 +21,7 @@
           :class="{ selected: isKnowledgeSelected(item), highlighted: isKnowledgeSelected(item) }"
         >
           <div class="row_left">
-            <span class="kp_name">{{ item.knowledgeName }}</span>
+            <span class="kp_name" :title="item.knowledgeName">{{ item.knowledgeName }}</span>
             <div class="kp_meta">
               <span class="kp_score">得分率：{{ getScoreRate(item) }}%</span>
               <span class="kp_freq_tag">考频：{{ getExamFreq(item) }}</span>
@@ -42,13 +42,13 @@
     <!-- 能力提升区 -->
     <div class="region_section good">
       <div class="region_header">
-        <span class="region_icon">
-          <img :src="require('@/assets/knowledgeGraph/tisheng.png')" alt="能力提升区" />
-        </span>
-        <div class="region_header_text">
+        <div class="region_header_main">
+          <span class="region_icon">
+            <img :src="require('@/assets/knowledgeGraph/tisheng.png')" alt="能力提升区" style="width: 32px; height: auto; display: block;" />
+          </span>
           <span class="region_title">能力提升区</span>
-          <span class="region_desc">60%≤得分率＜85% ｜ 强化练习提升</span>
         </div>
+        <span class="region_desc">60%≤得分率＜85% ｜ 强化练习提升</span>
       </div>
       <div class="knowledge_rows" ref="goodRowsBox">
         <div
@@ -60,7 +60,7 @@
           :class="{ selected: isKnowledgeSelected(item), highlighted: isKnowledgeSelected(item) }"
         >
           <div class="row_left">
-            <span class="kp_name">{{ item.knowledgeName }}</span>
+            <span class="kp_name" :title="item.knowledgeName">{{ item.knowledgeName }}</span>
             <div class="kp_meta">
               <span class="kp_score">得分率：{{ getScoreRate(item) }}%</span>
               <span class="kp_freq_tag">考频：{{ getExamFreq(item) }}</span>
@@ -81,13 +81,13 @@
     <!-- 扎实巩固区 -->
     <div class="region_section excellent">
       <div class="region_header">
-        <span class="region_icon">
-          <img :src="require('@/assets/knowledgeGraph/gonggu.png')" alt="扎实巩固区" />
-        </span>
-        <div class="region_header_text">
+        <div class="region_header_main">
+          <span class="region_icon">
+            <img :src="require('@/assets/knowledgeGraph/gonggu.png')" alt="扎实巩固区" style="width: 32px; height: auto; display: block;" />
+          </span>
           <span class="region_title">扎实巩固区</span>
-          <span class="region_desc">得分率＞85% ｜ 定期练习巩固</span>
         </div>
+        <span class="region_desc">得分率＞85% ｜ 定期练习巩固</span>
       </div>
       <div class="knowledge_rows" ref="excellentRowsBox">
         <div
@@ -99,7 +99,7 @@
           :class="{ selected: isKnowledgeSelected(item), highlighted: isKnowledgeSelected(item) }"
         >
           <div class="row_left">
-            <span class="kp_name">{{ item.knowledgeName }}</span>
+            <span class="kp_name" :title="item.knowledgeName">{{ item.knowledgeName }}</span>
             <div class="kp_meta">
               <span class="kp_score">得分率：{{ getScoreRate(item) }}%</span>
               <span class="kp_freq_tag">考频：{{ getExamFreq(item) }}</span>
@@ -120,17 +120,17 @@
     <!-- 冲刺进阶区（暂时隐藏） -->
     <div class="region_section advanced" v-if="false">
       <div class="region_header">
-        <span class="region_icon">
-          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M14.5 2.5c3 0 5.5 2.5 5.5 5.5 0 1.5-.5 3-1.5 4.5l1 1-2 2-1.5-1.5c-1.5 1-3 1.5-4.5 1.5L10 20H6v-4l4.5-2.5c0-1.5.5-3 1.5-4.5L10.5 7l2-2 1 1c1.5-1 3-1.5 4.5-1.5z"
-              fill="currentColor" />
-          </svg>
-        </span>
-        <div class="region_header_text">
+        <div class="region_header_main">
+          <span class="region_icon">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 32px; height: 32px; display: block;">
+              <path
+                d="M14.5 2.5c3 0 5.5 2.5 5.5 5.5 0 1.5-.5 3-1.5 4.5l1 1-2 2-1.5-1.5c-1.5 1-3 1.5-4.5 1.5L10 20H6v-4l4.5-2.5c0-1.5.5-3 1.5-4.5L10.5 7l2-2 1 1c1.5-1 3-1.5 4.5-1.5z"
+                fill="currentColor" />
+            </svg>
+          </span>
           <span class="region_title">冲刺进阶区</span>
-          <span class="region_desc">优于同层级学生 ｜ 对标上游冲刺进阶</span>
         </div>
+        <span class="region_desc">优于同层级学生 ｜ 对标上游冲刺进阶</span>
       </div>
       <div class="knowledge_rows" ref="advancedRowsBox">
         <div
@@ -142,7 +142,7 @@
           :class="{ selected: isKnowledgeSelected(item), highlighted: isKnowledgeSelected(item) }"
         >
           <div class="row_left">
-            <span class="kp_name">{{ item.knowledgeName }}</span>
+            <span class="kp_name" :title="item.knowledgeName">{{ item.knowledgeName }}</span>
             <div class="kp_meta">
               <span class="kp_score">得分率：{{ getScoreRate(item) }}%</span>
               <span class="kp_freq_tag">考频：{{ getExamFreq(item) }}</span>
@@ -454,26 +454,28 @@ export default {
   }
 }
 
-/* 卡片头部：图标方块 + 标题 + 副标题 */
+/* 卡片头部：图标方块 + 标题（同一行） + 副标题（下一行） */
 .region_header {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 6px; /* 上一行（图标+标题） 与 下一行（描述） 的竖向间距 */
   margin-bottom: 14px;
 
+  /* 第一行容器：图标 + 标题 同一行，垂直居中 */
+  .region_header_main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
   .region_icon {
-    width: 28px;
-    height: 28px;
-    border-radius: 6px;
+    width: 32px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
-    flex: 0 0 28px;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
+    flex: 0 0 32px;
 
     img {
       width: 100%;
@@ -481,48 +483,24 @@ export default {
       object-fit: contain;
       display: block;
     }
-  }
-
-  .region_header_text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-width: 0;
-
-    .region_title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #333333;
-      line-height: 1;
-    }
-
-    .region_desc {
-      font-size: 12px;
-      color: #999999;
-      line-height: 1.2;
-      white-space: nowrap;
+    svg {
+      display: block;
     }
   }
-}
-
-.weak .region_header .region_icon {
-  background: #FFE9E9;
-  color: #EE6666;
-}
 
-.good .region_header .region_icon {
-  background: #FFF4DA;
-  color: #F0B429;
-}
-
-.excellent .region_header .region_icon {
-  background: #DEF7EA;
-  color: #3BA272;
-}
+  .region_title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 1;
+    white-space: nowrap;
+  }
 
-.advanced .region_header .region_icon {
-  background: #E5ECFF;
-  color: #2E64FA;
+  .region_desc {
+    font-size: 14px;
+    color: #666666;
+    line-height: 1.4;
+  }
 }
 
 /* 行列表容器：仍然可滚动，但视觉上隐藏滚动条 */