自主练习步骤切换更新

src/views/targetImprove/practice/index.vue

@@ -3,13 +3,29 @@
     <div class="target_item target_filter">
       <FiltersItem :filtersData="filtersData"  @selectItem="ChangeFilters"/>
     </div>
-    <div class="target_item">
-      选择练习知识点 
+    <div class="target_item target_step">
+      
+      <div class="step_item" :class="stepIndex==1?'step_item_cur':''" @click="ChangeStep(1)">
+        <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>查看练习结果 
+      </div>
+
     </div>
     <!-- 知识点图谱 -->
-    <knowledgeGraph></knowledgeGraph>
-    <PracticeAnswer></PracticeAnswer>
-    <PracticeResults></PracticeResults>
+    <knowledgeGraph v-if="stepIndex==1"></knowledgeGraph>
+    <PracticeAnswer v-if="stepIndex==2"></PracticeAnswer>
+    <PracticeResults v-if="stepIndex==3"></PracticeResults>
   </div>
 </template>
 <script>
@@ -55,7 +71,8 @@ export default {
             
           ],
         },
-      ]
+      ],
+      stepIndex:1,//步骤
     }
   },
   computed:{
@@ -71,9 +88,103 @@ export default {
     {
       this.filtersData[e.index].value = e.value;
     },
+
+    // 步骤切换
+    ChangeStep(index)
+    {
+      this.stepIndex = index;
+    },
   }
 };
 </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:50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 50px;
+
+    font-weight: 550;
+    font-size: 16px;
+    color: #2E64FA;
+    letter-spacing: 0.1em;
+    overflow: hidden;
+  }
+}
 </style>