更新切换步骤背景图

src/store/modules/target.js

@@ -1,7 +1,8 @@
 // store变量
 let state = {
+  subjectList:JSON.parse(localStorage.getItem('student_subjectList') || '[]'),//顶部筛选的科目列表
   subjectCode:'',//顶部筛选的科目
-
+  
 };
 // 同步
 let mutations = {
@@ -10,6 +11,13 @@ let mutations = {
     state.subjectCode = data;
   },
 
+  // 设置科目列表，同时写入localStorage
+  SetSubjectList(state, list) {
+    state.subjectList = list
+    // 存入本地存储
+    localStorage.setItem('student_subjectList', JSON.stringify(list))
+  },
+
 
 };
 // 异步

src/styles/common.scss

@@ -10618,4 +10618,99 @@ body {
 
 .line_height_20 {
   line-height: 2.0;
+}
+
+//目标步骤切换
+.target_step
+{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10px 20px;
+  height: 78px;
+
+  .step_item
+  {
+    width: 260px;
+    height: 50px;
+    border-radius: 10px 10px 10px 10px;
+    border: 1px solid #DCDFE6;
+    line-height: 50px;
+
+    font-weight: 550;
+    font-size: 16px;
+    color: #333333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+    cursor: pointer;
+    .span_number
+    {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      border-radius: 50%;
+      border: 1px solid #2E64FA;
+      background: #EBF0FF;
+
+      font-weight: 550;
+      font-size: 16px;
+      color: #2E64FA;
+    }
+
+  }
+
+  .step_item_cur
+  {
+   
+    border-radius: 10px 10px 10px 10px;
+    border: 1px solid #2E64FA;
+    line-height: 50px;
+    background: #2E64FA10;
+    font-weight: 550;
+    font-size: 16px;
+    color: #2E64FA;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+    cursor: pointer;
+    .span_number
+    {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      border-radius: 50%;
+      border: 1px solid #2E64FA;
+      background: #2E64FA;
+
+      font-weight: 550;
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+
+  .step_line
+  {
+    // min-width:200px;
+    width:calc(50% - 390px);
+    height:20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 2%;
+    font-weight: 550;
+    font-size: 16px;
+    color: #2E64FA;
+    letter-spacing: 0.1em;
+    overflow: hidden;
+    background-image: url("../assets/bg/line_bg.png");
+    background-repeat: no-repeat;
+    background-size:80% 20px;
+    background-position: 50% 50%;
+
+  }
 }

src/views/targetImprove/components/TargetSubject.vue

@@ -23,7 +23,6 @@ export default {
           list:[],
         },
       ],
-      allMenuList:[],//总菜单
     };
   },
   watch: {
@@ -40,20 +39,29 @@ export default {
     // 获取头部数据
     GetHeaderData()
     {
-       
-        this.$api.target.getTargetHeaderData().then(res => {
-          if(res.code == 200)
-          {
-            console.log("打印顶部筛选数据",res.data);
-            this.filtersData[0].list = (res.data.subjectData || []).map(item => {
-                return {
-                    label: item.subjectName,   // 后端显示文本，例如 "化学"
-                    value: item.subjectCode // 
+        if(this.$store.state.target.subjectList.length > 0)
+        {
+          this.filtersData[0].list = this.$store.state.target.subjectList;
+          
+        }
+        else
+        {
+            this.$api.target.getTargetHeaderData().then(res => {
+                if(res.code == 200)
+                {
+                    console.log("打印顶部筛选数据",res.data);
+                    let list=(res.data.subjectData || []).map(item => {
+                        return {
+                            label: item.subjectName,   // 后端显示文本，例如 "化学"
+                            value: item.subjectCode // 
+                        }
+                    });
+                    this.$store.commit('target/SetSubjectList', list)
+                    this.filtersData[0].list = list;
                 }
-            })
-
-          }
-        });
+            });
+        }
+        
     },
     
     // 筛选组件回调

src/views/targetImprove/consolidate/index.vue

@@ -7,7 +7,7 @@
 </template>
 <script>
 import TargetSubject from "@/views/targetImprove/components/TargetSubject.vue"//顶部筛选科目组件
-
+import { mapState } from 'vuex'
 export default {
   components: {
     TargetSubject,
@@ -19,7 +19,16 @@ export default {
     }
   },
   computed:{
-
+    ...mapState('target', ['subjectCode'])
+  },
+  watch:{
+    // 监听顶部的subjectCode变化
+    subjectCode(newVal, oldVal){
+      console.log('科目编码改变了', newVal, oldVal)
+      // ========= 业务逻辑写这里 =========
+      // 例如：切换科目，重置步骤、重新请求知识点图谱数据
+      
+    }
   },
   mounted() 
   {

src/views/targetImprove/practice/index.vue

@@ -6,13 +6,11 @@
         <div class="span_number">1</div>选择练习知识点 
       </div>
       <div class="step_line">
-        ------------------------------
       </div>
       <div class="step_item" :class="stepIndex==2?'step_item_cur':''" @click="ChangeStep(2)">
         <div class="span_number">2</div>知识点练习作答 
       </div>
       <div class="step_line">
-        ------------------------------
       </div>
       <div class="step_item" :class="stepIndex==3?'step_item_cur':''" @click="ChangeStep(3)">
         <div class="span_number">3</div>查看练习结果 
@@ -49,7 +47,7 @@ export default {
     ...mapState('target', ['subjectCode'])
   },
   watch:{
-    // 监听store里面subjectCode变化
+    // 监听顶部的subjectCode变化
     subjectCode(newVal, oldVal){
       console.log('科目编码改变了', newVal, oldVal)
       // ========= 业务逻辑写这里 =========
@@ -74,95 +72,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.target_step
-{
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 10px 20px;
-  height: 78px;
 
-  .step_item
-  {
-    width: 260px;
-    height: 50px;
-    border-radius: 10px 10px 10px 10px;
-    border: 1px solid #DCDFE6;
-    line-height: 50px;
-
-    font-weight: 550;
-    font-size: 16px;
-    color: #333333;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 14px;
-    cursor: pointer;
-    .span_number
-    {
-      width: 30px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      border-radius: 50%;
-      border: 1px solid #2E64FA;
-      background: #EBF0FF;
-
-      font-weight: 550;
-      font-size: 16px;
-      color: #2E64FA;
-    }
-
-  }
-
-  .step_item_cur
-  {
-   
-    border-radius: 10px 10px 10px 10px;
-    border: 1px solid #2E64FA;
-    line-height: 50px;
-    background: #2E64FA10;
-    font-weight: 550;
-    font-size: 16px;
-    color: #2E64FA;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 14px;
-    cursor: pointer;
-    .span_number
-    {
-      width: 30px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      border-radius: 50%;
-      border: 1px solid #2E64FA;
-      background: #2E64FA;
-
-      font-weight: 550;
-      font-size: 16px;
-      color: #fff;
-    }
-  }
-
-  .step_line
-  {
-    // min-width:200px;
-    width:calc(50% - 390px);
-    height:10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    line-height: 10px;
-    font-weight: 550;
-    font-size: 16px;
-    color: #2E64FA;
-    letter-spacing: 0.1em;
-    overflow: hidden;
-    padding: 0 10px;
-    padding-top: 5px;
-
-  }
-}
 </style>