-
{{ filteredProducts[item.index].commodityName }}
+
{{ filteredProducts[item.index].commodityName }}
- {{ filteredProducts[item.index].score }} {{ priceLabel }}
+ {{ filteredProducts[item.index].score }} {{ priceLabel }}
- 库存 {{ filteredProducts[item.index].count }}
+ {{ stockText(filteredProducts[item.index].count) }}
@@ -77,7 +92,7 @@ const handleSelect = (commodityId: string, commodityName: string) => {
.product-list {
flex: 1;
overflow-y: auto;
- padding: 6px 8px 12px;
+ padding: 8px 8px 14px;
min-height: 0;
}
@@ -87,14 +102,16 @@ const handleSelect = (commodityId: string, commodityName: string) => {
.prod-item {
display: grid;
- grid-template-columns: 40px minmax(0, 1fr);
+ grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
- padding: 8px 10px;
- margin: 2px 0;
+ height: 72px;
+ padding: 9px 10px;
+ margin: 3px 0;
border-radius: var(--radius-sm);
cursor: pointer;
border: 1px solid transparent;
transition: .12s;
+ overflow: hidden;
}
.prod-item:hover {
@@ -106,31 +123,57 @@ const handleSelect = (commodityId: string, commodityName: string) => {
border-color: var(--accent-border);
}
-.prod-item img {
- width: 40px;
- height: 40px;
+.thumb {
+ position: relative;
+ width: 42px;
+ height: 42px;
+ align-self: center;
+ overflow: hidden;
border-radius: var(--radius-sm);
- object-fit: cover;
background: var(--field);
border: 1px solid var(--line);
}
+.thumb-fallback {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ color: var(--muted-2);
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.thumb img {
+ position: relative;
+ z-index: 1;
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: var(--radius-sm);
+ object-fit: cover;
+}
+
.pinfo {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
- gap: 4px;
+ gap: 5px;
+ overflow: hidden;
}
.pname {
font-size: 12.5px;
font-weight: 500;
color: var(--text-strong);
- white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- line-height: 1.3;
+ line-height: 1.35;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ word-break: break-word;
}
.pmeta {
@@ -138,6 +181,22 @@ const handleSelect = (commodityId: string, commodityName: string) => {
color: var(--muted);
display: flex;
gap: 6px;
- flex-wrap: wrap;
+ min-width: 0;
+ flex-wrap: nowrap;
+ overflow: hidden;
+}
+
+.pmeta .chip {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.pmeta .chip-score {
+ flex: 0 1 auto;
+}
+
+.pmeta .chip-stock {
+ flex: 0 1 auto;
}
diff --git a/frontend/src/components/product/ProductSearch.vue b/frontend/src/components/product/ProductSearch.vue
index 323b89a..1bc6aa6 100644
--- a/frontend/src/components/product/ProductSearch.vue
+++ b/frontend/src/components/product/ProductSearch.vue
@@ -1,9 +1,14 @@