修改步骤条样式

src/components/ReviewManagementDetailSideBar.vue

@@ -16,20 +16,25 @@
             :class="['nav_item', {'active_item':store.state.evaluationManageStepData.currentActiveStepName == stepItm.stepName}]"
             @click="HandleChangeStep(stepItm)"
           >
-            <div class="step_header_title">
-              <i  v-if="stepItm.isFinish" class="hjx-dui iconfont"></i>
-              <span v-else class="step_num">{{ stepItm.stepNum }}</span>
-              <span class="step_title">{{stepItm.title}}</span>
-            </div>
+            <div class="step_box">
 
-            <div class="step_bottom" >
-              <div class="step_guide_line">
-                <div class="dashed_line"></div>
+              <div class="step_header_title">
+                <i  v-if="stepItm.isFinish" class="hjx-dui iconfont"></i>
+                <span v-else class="step_num">{{ stepItm.stepNum }}</span>
+                <span class="step_title">{{stepItm.title}}</span>
               </div>
-              <div class="step_content">
-                  {{ stepItm.desc }}
+
+              <div class="step_bottom" >
+                <div class="step_guide_line">
+                  <div class="dashed_line"></div>
+                </div>
+                <div class="step_content">
+                    {{ stepItm.desc }}
+                </div>
               </div>
+
             </div>
+            
           </li>
 
         </template>
@@ -240,6 +245,7 @@ onMounted(()=>{
       gap:10px;
 
       overflow-y: auto;
+      padding-bottom: 12px;
 
       .nav_item {
         position: relative;
@@ -275,17 +281,13 @@ onMounted(()=>{
             font-size: 12px;
           }
         }
-
         .step_bottom{
-          flex:1 1;
-          padding:0 8px;
-          position: relative;
           .step_guide_line{
             position: absolute;
-            top:-4px;
+            top:26px;
             left:8px;
             width: 26px;
-            height: calc(100% + 18px);
+            height: calc(100% - 26px + 10px + 7px );
 
             display: flex;
             flex-direction: column;
@@ -306,18 +308,19 @@ onMounted(()=>{
         }
 
         &.active_item {
-          border-radius: 8px 0 0 8px;
-          background: rgba(46,100,250,0.1);
-          box-shadow: inset 1px -1px 0px 0px #2E64FA;
-
+          .step_box{
+            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_guide_line{
-            top:0px;
-            height: calc(100% + 14px);
+            top:30px;
+            height: calc(100% - 30px + 10px + 7px);
           }
           .step_num{
             background-color: white;
@@ -326,21 +329,13 @@ onMounted(()=>{
         }
         &:last-child{
           flex:1 1;
+          .step_guide_line{
+            height: calc(100% - 30px);
+          }
         }
       }
     }
   }
 
-  // /* 右侧内容区样式 */
-  // .content_right {
-  //   background-color: white;
-  //   margin:20px 20px  20px 0;
-
-  //   flex: 1;
-  //   display: flex;
-  //   flex-direction: column;
-  //   overflow: hidden;
-  // }
-// }
 
 </style>

src/components/questionnaireCard/QuestionnaireCard.vue

@@ -188,10 +188,17 @@ watch(()=>props.scrollAimDom,(newDom)=>{
 
 <style lang="scss" scoped>
 
+.questionnaire_list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,minmax(325px,1fr));
+    gap: 20px;
+    list-style: none;
+    padding: 0;
+}
+
 
 /* 单个卡片样式 */
 .card_item {
-    width: 325px; /* 固定宽度以匹配图片比例 */
     background: #F8FAFE;
     border: 1px solid #EBEEF5;
     border-radius: 10px;
@@ -225,7 +232,6 @@ watch(()=>props.scrollAimDom,(newDom)=>{
             font-weight: 600;
             color: #333;
             line-height: 1;
-            // max-width: 240px;
         }
     }
 

src/styles/page.scss

@@ -47,13 +47,3 @@
 }
 
 
-
-.questionnaire_list {
-    display: flex;
-    align-items: flex-start;
-    align-content: flex-start;
-    flex-wrap: wrap;
-    gap: 20px;
-    list-style: none;
-    padding: 0;
-}