步骤二数据补充

src/views/order/intention/Step2.vue

@@ -169,7 +169,9 @@
                     />
                   </div>
                   <img
-                    :src="item.image"
+                    :src="
+                      item.image ? item.image : '/images/cars/nopicture.jpg'
+                    "
                     class="result-card-img"
                     :alt="item.name"
                     @click.stop="toggleSelect(item)"
@@ -266,7 +268,7 @@
             </div>
           </el-dialog>
         </div>
-        <div class="btn-row">
+        <div class="btn-row" v-if="showResults">
           <el-button @click="emit('prev-step')">上一步</el-button>
           <el-button type="primary" @click="onNextStep">下一步</el-button>
         </div>
@@ -283,7 +285,7 @@ import {
   allFields,
   mockData,
   fieldValueMap,
-} from "@/data/stepMockData";
+} from "@/data/step2MockData";
 import CarModelDialog from "@/components/CarModelDialog.vue";
 import { ElMessage, ElEmpty } from "element-plus";
 
@@ -1401,7 +1403,6 @@ function onNextStep() {
   font-size: 18px;
 }
 
-// 新增样式
 :deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
   cursor: default;
   color: #303133;
@@ -1502,8 +1503,7 @@ function onNextStep() {
 .result-card-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
+  gap: 30px;
-  margin-top: 24px;
 }
 .result-card {
   width: 220px;
@@ -1595,28 +1595,35 @@ function onNextStep() {
   margin-top: 16px;
 }
 .compare-btn-float {
-  position: absolute;
+  /* 关键修改：相对于滚动容器固定定位 */
+  position: sticky;
+  top: 20px; /* 距离滚动容器顶部的距离 */
   right: 20px;
-  top: 170px;
   z-index: 10;
-  width: 48px;
+  width: 52px;
-  height: 48px;
+  height: 52px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0;
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(33, 86, 243, 0.12);
+  box-shadow: 0 3px 15px rgba(33, 86, 243, 0.15);
-  transition: box-shadow 0.2s, background 0.2s;
+  transition: all 0.25s ease;
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 1.3;
+  margin-left: auto; /* 右对齐 */
 }
+
 .compare-btn-float:hover {
-  background: #ffe9c6;
+  background: #fff3cd;
-  color: #999;
+  color: #d39e00;
-  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.18);
+  box-shadow: 0 5px 20px rgba(255, 153, 0, 0.2);
+  transform: translateY(-2px);
 }
 .result-card-list-wrap {
   position: relative;
+  padding-right: 20px;
 }
 .result-card-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
   border-color: #2156f3 !important;
@@ -1780,12 +1787,31 @@ function onNextStep() {
 }
 
 .results-section {
-  overflow: hidden;
+  max-height: 300px;
-  padding: 0 10px;
+  overflow-y: auto;
+  /* 添加内边距避免内容紧贴滚动条 */
+  padding: 0 10px 20px;
+  scrollbar-width: thin;
+  scrollbar-color: #ccc #f5f5f5;
 }
 
-.results-table {
+/* 滚动条美化（针对WebKit浏览器） */
-  width: 100%;
+.results-section::-webkit-scrollbar {
+  width: 6px;
+}
+
+.results-section::-webkit-scrollbar-track {
+  background: #f5f5f5;
+  border-radius: 3px;
+}
+
+.results-section::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 3px;
+}
+
+.results-section::-webkit-scrollbar-thumb:hover {
+  background-color: #aaa;
 }
 
 .no-results {