882 lines
20 KiB
Vue
882 lines
20 KiB
Vue
<template>
|
||
<div class="step2-container">
|
||
<div class="main-row">
|
||
<div class="right-content">
|
||
<div>
|
||
<!-- 查询条件区：车型、车轴、齿轮箱、车轮、制动盘 -->
|
||
<div class="param-form-row">
|
||
<div class="param-form-item">
|
||
<span class="param-label">车型：</span>
|
||
<el-select
|
||
v-model="selectedCarTypeProxy"
|
||
placeholder="请选择车型"
|
||
filterable
|
||
class="param-input"
|
||
@change="onQuery"
|
||
>
|
||
<el-option-group
|
||
v-for="group in carTypeOptions"
|
||
:key="group.label"
|
||
:label="group.label"
|
||
>
|
||
<el-option
|
||
v-for="option in group.options"
|
||
:key="option.value"
|
||
:label="option.label"
|
||
:value="option.value"
|
||
/>
|
||
</el-option-group>
|
||
</el-select>
|
||
</div>
|
||
<div class="param-form-item">
|
||
<span class="param-label">车轴：</span>
|
||
<el-autocomplete
|
||
v-model="paramAxle"
|
||
:fetch-suggestions="queryAxleSuggestions"
|
||
placeholder="不限"
|
||
class="param-input"
|
||
/>
|
||
</div>
|
||
<div class="param-form-item">
|
||
<span class="param-label">齿轮箱：</span>
|
||
<el-autocomplete
|
||
v-model="paramGearbox"
|
||
:fetch-suggestions="queryGearboxSuggestions"
|
||
placeholder="不限"
|
||
class="param-input"
|
||
/>
|
||
</div>
|
||
<div class="param-form-item">
|
||
<span class="param-label">车轮：</span>
|
||
<el-autocomplete
|
||
v-model="paramWheel"
|
||
:fetch-suggestions="queryWheelSuggestions"
|
||
placeholder="不限"
|
||
class="param-input"
|
||
/>
|
||
</div>
|
||
<div class="param-form-item">
|
||
<span class="param-label">制动盘：</span>
|
||
<el-autocomplete
|
||
v-model="paramBrake"
|
||
:fetch-suggestions="queryBrakeSuggestions"
|
||
placeholder="不限"
|
||
class="param-input"
|
||
/>
|
||
</div>
|
||
<div class="param-form-btns">
|
||
<el-button type="primary" class="param-btn" @click="onQuery"
|
||
>查询</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- 查询结果卡片区 -->
|
||
<div
|
||
v-if="queryResultList.length"
|
||
class="result-card-list-wrap"
|
||
style="position: relative"
|
||
>
|
||
<el-button
|
||
v-if="selectedCompareList.length > 0"
|
||
type="warning"
|
||
class="compare-btn-float"
|
||
@click="onCompare"
|
||
circle
|
||
>
|
||
参数<br />对比
|
||
</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"
|
||
>
|
||
<!-- 表格对比区，图片放在表头下方 -->
|
||
<div class="compare-table-wrap">
|
||
<el-table :data="compareTableData" border style="width: 100%">
|
||
<el-table-column prop="param" label="差异参数" width="180" class-name="param-col" align="center" header-align="center" />
|
||
<el-table-column
|
||
v-for="item in selectedCompareList"
|
||
:key="item.code"
|
||
:label="item.code"
|
||
:prop="item.code"
|
||
align="center"
|
||
header-align="center"
|
||
>
|
||
<template #header="{ column }">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<img
|
||
v-if="
|
||
selectedCompareList.find(
|
||
(i) => i.code === column.label
|
||
)?.image
|
||
"
|
||
:src="
|
||
selectedCompareList.find(
|
||
(i) => i.code === column.label
|
||
).image
|
||
"
|
||
style="
|
||
width: 60px;
|
||
height: 40px;
|
||
object-fit: contain;
|
||
margin-top: 4px;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
"
|
||
/>
|
||
<span>{{ column.label }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<div class="btn-row">
|
||
<el-button @click="emit('prev-step')">上一步</el-button>
|
||
<el-button type="primary" @click="onNextStep">下一步</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 车型信息弹窗 -->
|
||
<car-model-dialog
|
||
v-model="carModelDialogVisible"
|
||
:car-model="selectedCarModel"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, watch, onMounted } from "vue";
|
||
import {
|
||
carTypeOptions,
|
||
allParts,
|
||
compareTableData,
|
||
} from "@/data/stepMockData";
|
||
import CarModelDialog from "@/components/CarModelDialog.vue";
|
||
import { ElMessage } from "element-plus";
|
||
|
||
const props = defineProps({
|
||
form: Object,
|
||
selectedCarType: String,
|
||
});
|
||
const emit = defineEmits(["update:form", "prev-step", "next-step"]);
|
||
|
||
const carModelDialogVisible = ref(false);
|
||
const selectedCarModel = ref(null);
|
||
|
||
// 彻底双向绑定
|
||
const selectedCarTypeProxy = computed({
|
||
get() {
|
||
return props.form?.selectedCarType ?? "";
|
||
},
|
||
set(val) {
|
||
if (props.form) {
|
||
props.form.selectedCarType = val;
|
||
emit("update:form", props.form);
|
||
}
|
||
},
|
||
});
|
||
|
||
const paramAxle = ref("");
|
||
const paramGearbox = ref("");
|
||
const paramWheel = ref("");
|
||
const paramBrake = ref("");
|
||
|
||
onMounted(() => {
|
||
// 只有已选车型才自动查询，否则等待用户选择
|
||
if (props.form.selectedCarType) {
|
||
onQuery();
|
||
}
|
||
});
|
||
|
||
function selectCarType(val) {
|
||
selectedCarTypeProxy.value = val;
|
||
}
|
||
|
||
const queryResultList = ref([]);
|
||
function onQuery() {
|
||
queryResultList.value = allParts
|
||
.filter((item) => {
|
||
// 车型过滤
|
||
if (
|
||
selectedCarTypeProxy.value &&
|
||
item.carType !== selectedCarTypeProxy.value
|
||
)
|
||
return false;
|
||
|
||
// 车轴
|
||
if (item.type === "车轴") {
|
||
if (paramAxle.value === "不限") return true;
|
||
return item.feature.includes(paramAxle.value);
|
||
}
|
||
// 齿轮箱
|
||
if (item.type === "齿轮箱") {
|
||
if (paramGearbox.value === "不限") return true;
|
||
return item.feature.includes(paramGearbox.value);
|
||
}
|
||
// 车轮
|
||
if (item.type === "车轮") {
|
||
if (paramWheel.value === "不限") return true;
|
||
return item.feature.includes(paramWheel.value);
|
||
}
|
||
// 制动盘
|
||
if (item.type === "制动盘") {
|
||
if (paramBrake.value === "不限") return true;
|
||
return item.feature.includes(paramBrake.value);
|
||
}
|
||
// 其它类型不显示
|
||
return false;
|
||
})
|
||
.map((item) => ({ ...item, selected: false }));
|
||
}
|
||
|
||
const compareDialogVisible = ref(false);
|
||
const selectedCompareList = computed(() =>
|
||
queryResultList.value.filter((i) => i.selected)
|
||
);
|
||
// compareTableData 直接从stepMockData.js导入，无需本地定义
|
||
function onCompare() {
|
||
if (selectedCompareList.value.length === 0) {
|
||
ElMessage.warning("请先选择要对比的卡片");
|
||
return;
|
||
}
|
||
compareDialogVisible.value = true;
|
||
}
|
||
|
||
function toggleSelect(item) {
|
||
// 统计已选中的数量
|
||
const selectedCount = queryResultList.value.filter((i) => i.selected).length;
|
||
if (!item.selected && selectedCount >= 3) {
|
||
ElMessage.warning("最多只能选择3个卡片进行对比");
|
||
return;
|
||
}
|
||
item.selected = !item.selected;
|
||
}
|
||
|
||
function onNextStep() {
|
||
const selected = queryResultList.value.filter((i) => i.selected);
|
||
if (selected.length !== 1) {
|
||
ElMessage.warning("请且只能选择一个卡片进入下一步");
|
||
return;
|
||
}
|
||
// 写入form
|
||
if (props.form) {
|
||
props.form.selectedCarType = selectedCarTypeProxy.value;
|
||
props.form.selectedPartInfo = {
|
||
code: selected[0].code,
|
||
label: selected[0].label,
|
||
image: selected[0].image,
|
||
type: selected[0].type,
|
||
feature: selected[0].feature,
|
||
};
|
||
emit("update:form", props.form);
|
||
}
|
||
emit("next-step");
|
||
}
|
||
|
||
// 智能模糊建议方法
|
||
function queryAxleSuggestions(queryString, cb) {
|
||
const results = allParts
|
||
.filter(
|
||
(item) =>
|
||
item.type === "车轴" &&
|
||
item.carType === selectedCarTypeProxy.value &&
|
||
item.feature.includes(queryString)
|
||
)
|
||
.map((item) => ({ value: item.feature }));
|
||
// 增加'不限'选项
|
||
cb([
|
||
{ value: "不限" },
|
||
...results.filter(
|
||
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
|
||
),
|
||
]);
|
||
}
|
||
function queryGearboxSuggestions(queryString, cb) {
|
||
const results = allParts
|
||
.filter(
|
||
(item) =>
|
||
item.type === "齿轮箱" &&
|
||
item.carType === selectedCarTypeProxy.value &&
|
||
item.feature.includes(queryString)
|
||
)
|
||
.map((item) => ({ value: item.feature }));
|
||
cb([
|
||
{ value: "不限" },
|
||
...results.filter(
|
||
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
|
||
),
|
||
]);
|
||
}
|
||
function queryWheelSuggestions(queryString, cb) {
|
||
const results = allParts
|
||
.filter(
|
||
(item) =>
|
||
item.type === "车轮" &&
|
||
item.carType === selectedCarTypeProxy.value &&
|
||
item.feature.includes(queryString)
|
||
)
|
||
.map((item) => ({ value: item.feature }));
|
||
cb([
|
||
{ value: "不限" },
|
||
...results.filter(
|
||
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
|
||
),
|
||
]);
|
||
}
|
||
function queryBrakeSuggestions(queryString, cb) {
|
||
const results = allParts
|
||
.filter(
|
||
(item) =>
|
||
item.type === "制动盘" &&
|
||
item.carType === selectedCarTypeProxy.value &&
|
||
item.feature.includes(queryString)
|
||
)
|
||
.map((item) => ({ value: item.feature }));
|
||
cb([
|
||
{ value: "不限" },
|
||
...results.filter(
|
||
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
|
||
),
|
||
]);
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.step2-container {
|
||
background: #fff;
|
||
padding: 24px;
|
||
border-radius: 8px;
|
||
}
|
||
.main-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
.right-content {
|
||
flex: 1;
|
||
}
|
||
.step {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
}
|
||
.step-left {
|
||
flex: 1;
|
||
margin-right: 10px;
|
||
}
|
||
.step-title {
|
||
font-size: 18px;
|
||
margin: 15px 0;
|
||
color: #333;
|
||
font-weight: 500;
|
||
|
||
&.active {
|
||
color: #2156f3;
|
||
}
|
||
|
||
.reference-model {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 8px;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #2156f3;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.image-box.right-align {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-start;
|
||
margin-bottom: 16px;
|
||
}
|
||
.table-title {
|
||
font-weight: bold;
|
||
margin: 16px 0 8px 0;
|
||
color: #333;
|
||
}
|
||
.tree-table-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid #bbb;
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
background: #fff;
|
||
}
|
||
.header-title {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
.header-code,
|
||
.header-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
.tab-container {
|
||
width: 100%;
|
||
}
|
||
.tab-header {
|
||
background: #f5f7fa;
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.tab-header-item {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: center;
|
||
}
|
||
.tab-header-image {
|
||
width: 200px;
|
||
height: 150px;
|
||
flex-shrink: 0;
|
||
}
|
||
.tab-header-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.tab-header-code,
|
||
.tab-header-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
.part-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
}
|
||
.model-form {
|
||
max-width: 900px;
|
||
margin-top: 16px;
|
||
}
|
||
.btn-row {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
.main-img {
|
||
width: 580px;
|
||
height: 260px;
|
||
object-fit: contain;
|
||
border-radius: 8px;
|
||
border: 1px solid #eee;
|
||
}
|
||
.custom-tab-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.tab-label-image {
|
||
width: 80px;
|
||
height: 60px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tab-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.tab-label-info {
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-label-code {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tab-label-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
:deep(.el-tabs__item) {
|
||
height: auto !important;
|
||
padding: 0 20px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__nav) {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
:deep(.el-tabs__item.is-active) {
|
||
.tab-label-code,
|
||
.tab-label-name {
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.tree-node {
|
||
transition: background 0.2s;
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
margin-bottom: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.tree-node.active {
|
||
color: #2156f3;
|
||
}
|
||
.tree-node:hover {
|
||
color: #2156f3;
|
||
}
|
||
.tab-content-flex {
|
||
display: flex;
|
||
min-height: 300px;
|
||
height: 400px;
|
||
max-height: 400px;
|
||
overflow: hidden;
|
||
}
|
||
.tab-left {
|
||
width: 260px;
|
||
border-right: 1px solid #eee;
|
||
padding-right: 16px;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
}
|
||
.tab-right {
|
||
flex: 1;
|
||
padding-left: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
}
|
||
.right-button {
|
||
margin: 15px 0 0 260px;
|
||
}
|
||
.detail-img {
|
||
width: 180px;
|
||
height: 120px;
|
||
object-fit: contain;
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.replace-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.replace-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 8px;
|
||
border: 1px solid #eee;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.replace-item.selected {
|
||
border-color: #2156f3;
|
||
}
|
||
.replace-img {
|
||
width: 80px;
|
||
height: 60px;
|
||
object-fit: contain;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
}
|
||
.no-data {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
color: #999;
|
||
font-size: 18px;
|
||
}
|
||
|
||
// 新增样式
|
||
:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
|
||
cursor: default;
|
||
color: #303133;
|
||
&:hover {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
:deep(.el-collapse-item.is-disabled .el-collapse-item__arrow) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.el-collapse-item__header) {
|
||
padding: 0;
|
||
height: auto;
|
||
}
|
||
|
||
:deep(.el-collapse-item__content) {
|
||
padding: 0;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
:deep(.el-collapse-item__wrap) {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.search-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.search-label {
|
||
font-size: 15px;
|
||
color: #666;
|
||
margin-right: 8px;
|
||
}
|
||
.car-type-text-list {
|
||
display: flex;
|
||
gap: 32px;
|
||
}
|
||
.car-type-text {
|
||
font-size: 16px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
padding: 0 4px 4px 4px;
|
||
border-bottom: 2px solid transparent;
|
||
transition: color 0.2s, border 0.2s;
|
||
}
|
||
.car-type-text.active {
|
||
color: #2156f3;
|
||
border-bottom: 2px solid #2156f3;
|
||
font-weight: 500;
|
||
}
|
||
.search-divider {
|
||
border-bottom: 1px dashed #e5e5e5;
|
||
margin: 8px 0 16px 0;
|
||
}
|
||
.param-group-title {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
margin: 12px 0 12px 0;
|
||
}
|
||
.param-form-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
gap: 24px 32px;
|
||
margin-bottom: 0;
|
||
position: relative;
|
||
}
|
||
.param-form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 0;
|
||
}
|
||
.param-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
min-width: 60px;
|
||
text-align: right;
|
||
}
|
||
.param-input {
|
||
width: 120px;
|
||
}
|
||
.param-form-btns {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-left: auto;
|
||
min-width: 200px;
|
||
}
|
||
.param-btn {
|
||
min-width: 90px;
|
||
}
|
||
.result-card-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
.result-card {
|
||
width: 220px;
|
||
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;
|
||
left: 20px;
|
||
top: 22px;
|
||
z-index: 2;
|
||
}
|
||
.result-card-checkbox {
|
||
position: static;
|
||
}
|
||
.result-card-img {
|
||
width: 100%;
|
||
height: 120px;
|
||
object-fit: contain;
|
||
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;
|
||
}
|
||
.result-card-name {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.result-card-code {
|
||
font-size: 13px;
|
||
color: #888;
|
||
}
|
||
.compare-dialog-cards {
|
||
display: flex;
|
||
gap: 32px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.compare-card {
|
||
width: 220px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
.compare-card-img {
|
||
width: 100%;
|
||
height: 120px;
|
||
object-fit: contain;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
margin-bottom: 12px;
|
||
}
|
||
.compare-card-info {
|
||
text-align: center;
|
||
}
|
||
.compare-card-name {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.compare-card-code {
|
||
font-size: 13px;
|
||
color: #888;
|
||
}
|
||
.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: 14px;
|
||
}
|
||
.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;
|
||
}
|
||
// 参数对比表格第一列背景色与表头一致
|
||
:deep(.el-table .param-col),
|
||
:deep(.el-table th.param-col) {
|
||
background: #f5f7fa !important;
|
||
}
|
||
</style> |