优化

src/views/order/intention/Step2.vue

@@ -29,42 +29,93 @@
             </div>
             <div class="param-form-item">
               <span class="param-label">车轴：</span>
-              <el-input v-model="paramAxle" placeholder="不限" class="param-input" />
+              <el-input
+                v-model="paramAxle"
+                placeholder="不限"
+                class="param-input"
+              />
             </div>
             <div class="param-form-item">
               <span class="param-label">齿轮箱：</span>
-              <el-input v-model="paramGearbox" placeholder="不限" class="param-input" />
+              <el-input
+                v-model="paramGearbox"
+                placeholder="不限"
+                class="param-input"
+              />
             </div>
             <div class="param-form-item">
               <span class="param-label">车轮：</span>
-              <el-input v-model="paramWheel" placeholder="不限" class="param-input" />
+              <el-input
+                v-model="paramWheel"
+                placeholder="不限"
+                class="param-input"
+              />
             </div>
             <div class="param-form-item">
               <span class="param-label">制动盘：</span>
-              <el-input v-model="paramBrake" placeholder="不限" class="param-input" />
+              <el-input
+                v-model="paramBrake"
+                placeholder="不限"
+                class="param-input"
+              />
             </div>
             <div class="param-form-btns">
-              <el-button class="param-btn" @click="onQuery">查询</el-button>
+              <el-button type="primary" class="param-btn" @click="onQuery"
-              <el-button class="param-btn" type="primary" @click="onCompare">参数对比</el-button>
+                >查询</el-button
+              >
             </div>
           </div>
           <!-- 查询结果卡片区 -->
-          <div v-if="queryResultList.length" class="result-card-list">
+          <div
-            <el-card v-for="item in queryResultList" :key="item.code" class="result-card">
+            v-if="queryResultList.length"
-              <div class="result-card-checkbox-wrap">
+            class="result-card-list-wrap"
-                <el-checkbox v-model="item.selected" class="result-card-checkbox" @click.stop />
+            style="position: relative"
-              </div>
+          >
-              <img :src="item.image" class="result-card-img" />
+            <el-button
-              <div class="result-card-info">
+              v-if="selectedCompareList.length > 0"
-                <div class="result-card-name">{{ item.label }}</div>
+              type="warning"
-                <div class="result-card-code">{{ item.code }}</div>
+              class="compare-btn-float"
-              </div>
+              @click="onCompare"
-            </el-card>
+              circle
+            >
+              参数对比
+            </el-button>
+            <div class="result-card-list">
+              <el-card
+                v-for="item in queryResultList"
+                :key="item.code"
+                class="result-card"
+                :class="{ active: item.selected }"
+                @click="toggleSelect(item)"
+              >
+                <div class="result-card-checkbox-wrap" @click.stop>
+                  <el-checkbox
+                    v-model="item.selected"
+                    class="result-card-checkbox"
+                  />
+                </div>
+                <img :src="item.image" class="result-card-img" @click.stop="toggleSelect(item)" />
+                <div class="result-card-info">
+                  <div class="result-card-name">{{ item.label }}</div>
+                  <div class="result-card-code">{{ item.code }}</div>
+                </div>
+              </el-card>
+            </div>
           </div>
           <!-- 参数对比弹窗 -->
-          <el-dialog v-model="compareDialogVisible" title="参数对比" width="60%" top="40px" :close-on-click-modal="false">
+          <el-dialog
+            v-model="compareDialogVisible"
+            title="参数对比"
+            width="60%"
+            top="40px"
+            :close-on-click-modal="false"
+          >
             <div class="compare-dialog-cards">
-              <el-card v-for="item in selectedCompareList" :key="item.code" class="compare-card">
+              <el-card
+                v-for="item in selectedCompareList"
+                :key="item.code"
+                class="compare-card"
+              >
                 <img :src="item.image" class="compare-card-img" />
                 <div class="compare-card-info">
                   <div class="compare-card-name">{{ item.label }}</div>
@@ -75,19 +126,29 @@
             <div class="compare-table-wrap">
               <el-table :data="compareTableData" border style="width: 100%">
                 <el-table-column prop="param" label="差异参数" width="180" />
-                <el-table-column v-for="item in selectedCompareList" :key="item.code" :label="item.code" :prop="item.code" />
+                <el-table-column
+                  v-for="item in selectedCompareList"
+                  :key="item.code"
+                  :label="item.code"
+                  :prop="item.code"
+                />
               </el-table>
             </div>
           </el-dialog>
         </div>
         <div class="btn-row">
           <el-button @click="emit('prev-step')">上一步</el-button>
-          <el-button type="primary" @click="emit('next-step')">下一步</el-button>
+          <el-button type="primary" @click="emit('next-step')"
+            >下一步</el-button
+          >
         </div>
       </div>
     </div>
     <!-- 车型信息弹窗 -->
-    <car-model-dialog v-model="carModelDialogVisible" :car-model="selectedCarModel" />
+    <car-model-dialog
+      v-model="carModelDialogVisible"
+      :car-model="selectedCarModel"
+    />
   </div>
 </template>
 
@@ -118,10 +179,17 @@ const selectedCarTypeProxy = computed({
   },
 });
 
-const paramAxle = ref("");
+const paramAxle = ref("不限");
-const paramGearbox = ref("");
+const paramGearbox = ref("不限");
-const paramWheel = ref("");
+const paramWheel = ref("不限");
-const paramBrake = ref("");
+const paramBrake = ref("不限");
+
+onMounted(() => {
+  if (!props.form.selectedCarType) {
+    selectedCarTypeProxy.value = "其他";
+  }
+  onQuery(); // 首次自动查询，展示卡片
+});
 
 function selectCarType(val) {
   selectedCarTypeProxy.value = val;
@@ -153,7 +221,9 @@ function onQuery() {
 }
 
 const compareDialogVisible = ref(false);
-const selectedCompareList = computed(() => queryResultList.value.filter(i => i.selected));
+const selectedCompareList = computed(() =>
+  queryResultList.value.filter((i) => i.selected)
+);
 const compareTableData = ref([
   {
     param: "动车组联轴节",
@@ -193,6 +263,10 @@ function onCompare() {
   }
   compareDialogVisible.value = true;
 }
+
+function toggleSelect(item) {
+  item.selected = !item.selected;
+}
 </script>
 
 <style scoped lang="scss">
@@ -579,6 +653,20 @@ function onCompare() {
   position: relative;
   padding-top: 16px;
   box-sizing: border-box;
+  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
+  cursor: pointer;
+  border: 1px solid #eee;
+}
+.result-card:hover {
+  box-shadow: 0 4px 16px rgba(33, 86, 243, 0.12);
+  transform: translateY(-4px) scale(1.03);
+  border-color: #2156f3;
+}
+.result-card.active {
+  box-shadow: 0 6px 20px rgba(33, 86, 243, 0.18);
+  border-color: #2156f3;
+  background: #f5f8ff;
+  transform: scale(1.04);
 }
 .result-card-checkbox-wrap {
   position: absolute;
@@ -596,6 +684,11 @@ function onCompare() {
   border-radius: 4px;
   border: 1px solid #eee;
   margin-bottom: 12px;
+  transition: transform 0.2s;
+}
+.result-card:hover .result-card-img,
+.result-card.active .result-card-img {
+  transform: scale(1.08);
 }
 .result-card-info {
   text-align: left;
@@ -644,4 +737,32 @@ function onCompare() {
 .compare-table-wrap {
   margin-top: 16px;
 }
+.compare-btn-float {
+  position: absolute;
+  right: 20px;
+  top: 170px;
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(33, 86, 243, 0.12);
+  transition: box-shadow 0.2s, background 0.2s;
+  font-size: 12px;
+}
+.compare-btn-float:hover {
+  background: #ffe9c6;
+  color: #999;
+  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.18);
+}
+.result-card-list-wrap {
+  position: relative;
+}
+.result-card-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
+  border-color: #2156f3 !important;
+  background-color: #2156f3 !important;
+}
 </style>