From c6c3eba1e9ef75ef4bff34a3411d287f5bd950a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com> Date: Tue, 26 Aug 2025 11:57:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E9=83=A8=E5=88=86?= =?UTF-8?q?=E6=98=BE=E7=A4=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ProductSummary.vue | 39 +++++++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/src/views/ProductSummary.vue b/src/views/ProductSummary.vue index 32c29cf..e1dea2b 100644 --- a/src/views/ProductSummary.vue +++ b/src/views/ProductSummary.vue @@ -32,7 +32,7 @@ -
+
{ margin-top: auto; /* 推到卡片底部 */ padding-top: 12px; /* 添加顶部间距 */ border-top: 1px solid #f0f0f0; /* 可选:添加分隔线 */ + min-height: 70px; /* 确保有足够高度 */ } .small-image { @@ -267,9 +268,9 @@ onMounted(() => { display: flex; flex-direction: column; justify-content: space-between; - height: 60px; - flex-grow: 1; + flex: 1; min-width: 0; + padding-right: 8px; /* 为详情链接留出空间 */ } .product-name { @@ -282,8 +283,8 @@ onMounted(() => { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - margin-bottom: 0; - width: 200px; + margin-bottom: 8px; + word-break: break-word; /* 允许长单词换行 */ } .product-price { @@ -293,6 +294,18 @@ onMounted(() => { display: flex; align-items: center; gap: 4px; + margin-top: auto; /* 推到底部 */ +} + +.link { + color: #409eff; + font-size: 14px; + cursor: pointer; + text-decoration: none; + flex-shrink: 0; + align-self: flex-start; + margin-top: 4px; + white-space: nowrap; } /* 修改部分结束 */ @@ -343,6 +356,7 @@ onMounted(() => { /* 响应式调整 */ .product-details { gap: 10px; + min-height: 60px; } .small-image { @@ -351,16 +365,21 @@ onMounted(() => { } .product-info { - height: 50px; + padding-right: 6px; } .product-name { font-size: 14px; + margin-bottom: 6px; } .product-price { font-size: 16px; } + + .link { + font-size: 12px; + } } @media (max-width: 480px) { @@ -381,6 +400,7 @@ onMounted(() => { /* 响应式调整 */ .product-details { gap: 8px; + min-height: 55px; } .small-image { @@ -389,15 +409,20 @@ onMounted(() => { } .product-info { - height: 45px; + padding-right: 4px; } .product-name { font-size: 13px; + margin-bottom: 4px; } .product-price { font-size: 15px; } + + .link { + font-size: 11px; + } } \ No newline at end of file