添加评价管理详情的侧边导航栏

src/components/ReviewManagementDetailSideBar.vue

@@ -0,0 +1,216 @@
+<template>
+    <!-- 左侧导航栏 -->
+    <div class="left_nav">
+      <div class="nav_header">
+          XXX考试考试考试考试考试
+      </div>
+      
+      <div class="back_btn">
+        <el-button class="button_refresh" @click="$router.go(-1)"><img :src="backIcon" alt="">返回</el-button>
+      </div>
+
+      <ul class="nav_list">
+        <!-- 激活状态的步骤 -->
+        <li v-for="stepItm in stepMsgs" :key="stepItm.setpNum" 
+          :class="['nav_item', {'active_item':currentActiveStep == stepItm.stepNum}]"
+          @click="HandleChangeStep(stepItm.stepNum)"
+        >
+          <div class="step_header_title">
+            <span class="step_num">{{ stepItm.stepNum }}</span>
+            <span class="step_title">{{stepItm.title}}</span>
+          </div>
+
+          <div class="step_bottom" >
+            <div class="step_guide_line">
+              <div class="dashed_line"></div>
+            </div>
+            <div class="step_content">
+                {{ stepItm.desc }}
+            </div>
+          </div>
+
+          
+        </li>
+      </ul>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import backIcon from '@/assets/icon/left_back_arrow_.png'
+
+const currentActiveStep = ref(1)
+const stepMsgs = ref([
+  {
+    stepNum:1,
+    title:'评价数据',
+    desc:'评价覆盖的年级、班级、对应科目基础信息'
+  },
+  {
+    stepNum:2,
+    title:'授课关系',
+    desc:'年级、班级、科目匹配对应的任课教师'
+  },
+  {
+    stepNum:3,
+    title:'问卷模版',
+    desc:'为不同科目选定适配的评价问卷模板'
+  },
+  {
+    stepNum:4,
+    title:'评价账号',
+    desc:'批量生成对应数量的学生评价登录账号'
+  },
+  {
+    stepNum:5,
+    title:'参数设置',
+    desc:'统一配置本次评价任务的评分分值规则'
+  },
+  {
+    stepNum:6,
+    title:'评价进度',
+    desc:'实时查看学生完成评价的填报进度'
+  },
+  {
+    stepNum:7,
+    title:'生成分析',
+    desc:'汇总数据并生成、发布评价分析报告'
+  },
+])
+
+const HandleChangeStep=(currentStep)=>{
+  currentActiveStep.value = currentStep
+}
+</script>
+
+
+
+<style lang="scss" scoped>
+  /* 左侧导航样式 */
+  .left_nav {
+    width: 160px;
+    font-size: 16px;
+    background-color: white;
+    height: 100vh;
+
+
+    .nav_header {
+      padding: 20px;
+      background-color: #2E64FA;
+      color:white;
+      font-weight: 600;
+    }
+
+    .back_btn {
+      padding: 12px;
+      .button_refresh{
+        width: 100%;
+        img{
+          width: 20px;
+          height: 20px;
+          margin-right: 5px;
+        }
+      }
+    }
+
+
+
+    .nav_list {
+      height: calc(100% - 88px - 60px);
+      display: flex;
+      flex-direction: column;
+      gap:10px;
+
+      overflow-y: auto;
+
+      .nav_item {
+        position: relative;
+        cursor: pointer;
+         
+        .step_header_title{
+          display: flex;
+          align-items: center;
+          padding:3px 8px;
+          border-radius: 10px 0 0 0;
+
+          .step_num{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            margin:0 5px;
+            width: 16px;
+            height: 16px;
+            line-height: 1;
+            border-radius: 50%;
+            background-color: #B0B2B7;
+            color: white;
+            font-weight: 600;
+            font-size: 12px;
+          }
+        }
+
+        .step_bottom{
+          padding:0 8px;
+          position: relative;
+          .step_guide_line{
+            position: absolute;
+            left:8px;
+            width: 26px;
+            height: calc(100% + 10px);
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          
+            .dashed_line {
+              flex: 1;
+              width: 0;
+              border-left: 1px dashed #B0B2B7;
+              min-height: 30px;
+            }
+          }
+
+          .step_content {
+            padding:5px 10px 5px 30px;
+            font-size: 12px;
+            color: #999999;
+          }
+
+
+        }
+
+        &.active_item {
+
+          border-radius: 8px 0 0 8px;
+          background: rgba(46,100,250,0.1);
+          box-shadow: inset 1px -1px 0px 0px #2E64FA;
+
+          .step_header_title{
+
+            background-color: #2E64FA;
+            color: white;
+          }
+          .step_num{
+            background-color: white;
+            color: #2E64FA;
+          }
+        }
+      }
+    }
+  }
+
+  // /* 右侧内容区样式 */
+  // .content_right {
+  //   background-color: white;
+  //   margin:20px 20px  20px 0;
+
+  //   flex: 1;
+  //   display: flex;
+  //   flex-direction: column;
+  //   overflow: hidden;
+  // }
+// }
+
+</style>

src/layout/components/AppMain.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <SiderBar v-if="menuItems?.length  > 0" :menuItems="menuItems" />
+    <component :menuItems="menuItems" :is="finalSideBar"></component>
     <!-- <el-main class="main_container"> -->
     <router-view></router-view>
     <!-- </el-main> -->
@@ -9,34 +9,48 @@
 
 <script>
 import SiderBar from './SiderBar.vue'
+import ReviewManagementDetailSideBar from '@/components/ReviewManagementDetailSideBar.vue'
 export default {
   components: {
-    SiderBar
+    SiderBar,
+    ReviewManagementDetailSideBar
   },
   props:{
     menuItems:Array
+  },
+  computed: {
+    finalSideBar() {
+      return this.$route.path.startsWith('/main/reviewManagementDetail') ? 
+              ReviewManagementDetailSideBar : 
+              (this.menuItems?.length  > 0 ?  SiderBar : null)
+    }
   }
 }
 </script>
 
 <style scoped>
 .container {
-  position: relative;
-  box-sizing: border-box;
-  max-width: 100vw;
-  width: 100vw;
-  display: flex;
-  justify-content: flex-start;
-  height: calc(100vh - 65px);
+    /* border:solid blue 2px; */
 
-.main_container {
-  position: relative;
-  flex: 1 1;
-  padding: 20px;
-  background: #F0F4FB;
-  height: calc(100vh - 65px);
-  overflow:auto;
-}
+    flex: 1 1;
+    position: relative;
+    box-sizing: border-box;
+    max-width: 100vw;
+    width: 100vw;
+    display: flex;
+    justify-content: flex-start;
+    height: calc(100vh - 60px);
+
+  .main_container {
+    /* border:solid blue 2px; */
+
+    position: relative;
+    flex: 1 1;
+    padding: 20px;
+    background: #F0F4FB;
+    height: calc(100vh - 60px);
+    overflow:auto;
+  }
 }
 
 </style>

src/layout/components/header.vue

@@ -189,6 +189,7 @@ const confirmPassWord = async (formEl: FormInstance | undefined) => {
  
 <style lang="scss" scoped>
 .head_content {
+  flex-shrink: 0;
   height: 60px;
   padding: 0 20px;
   display: flex;

src/layout/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="layout">
-    <Header :horizontalNavList="horizontalNavList"/>
+    <Header 
+      v-if="!route.path.startsWith('/main/reviewManagementDetail')" 
+      :horizontalNavList="horizontalNavList"/>
     <AppMain :menuItems="menuList" />
   </div>
 </template>

src/styles/common.scss

@@ -21,12 +21,15 @@ a{
 
 //页面最高层级  统一最底层背景色 #F0F4FB
 .layout {
+  display: flex;
+  flex-direction: column;
+
   position: relative;
   box-sizing: border-box;
   width: 100vw;
   height: 100vh;
   margin: 0 auto;
-  padding-bottom: 30px;
+  // padding-bottom: 30px;
   background-color: #f0f4fb;
 }
 

src/views/reviewManagement/ReviewManagementDetail.vue

@@ -1,19 +1,39 @@
 <template>
     <div class="main_container">
-
-        <div class="page_item">
-            问卷评价详情
-
-        </div>
-
-    </div>
+      <!-- 右侧主要内容区 -->
+      <div class="page_item content_right">
+        <Step1Component></Step1Component>
+      </div>
+  </div>
 </template>
 
 
 <script setup lang="ts">
+
+import { ref } from 'vue';
+import Step1Component from './stepComponent/Step1Component.vue';
+
 </script>
 
 
 
 <style lang="scss" scoped>
+.main_container {
+  height: 100vh !important;
+ 
+  /* 右侧内容区样式 */
+  .content_right {
+    background-color: white;
+    // margin:20px 20px  20px 0;
+
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+
+
+  }
+}
+
 </style>