diff --git a/public/index.html b/public/index.html index 5d1c4fb..31a68a8 100644 --- a/public/index.html +++ b/public/index.html @@ -58,11 +58,13 @@ .deals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .deal-card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; } .deal-card:active { transform: scale(0.98); } - .deal-img { width: 100%; height: 90px; background: #f3f4f6; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 32px; } - .deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } + .deal-img { width: 100%; height: 100px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; } + .deal-img img { width: 100%; height: 100%; object-fit: cover; } + .deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; height: 2.8em; } .deal-price { color: #ef4444; font-weight: 700; font-size: 16px; } - .deal-price span { font-size: 12px; } - .deal-tag { display: inline-block; background: #fef2f2; color: #ef4444; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; } + .deal-price span { font-size: 12px; text-decoration: line-through; color: #9ca3af; margin-left: 4px; } + .deal-tag { display: inline-block; background: linear-gradient(135deg, #ef4444, #f97316); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; } + .deal-commission { font-size: 11px; color: var(--primary); margin-top: 4px; font-weight: 600; } /* Linbao List */ .linbao-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } @@ -79,7 +81,8 @@ .product-item { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; cursor: pointer; transition: background 0.15s; } .product-item:last-child { border-bottom: none; } .product-item:active { background: #f9fafb; } - .product-img { width: 72px; height: 72px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; } + .product-img { width: 72px; height: 72px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; overflow: hidden; } + .product-img img { width: 100%; height: 100%; object-fit: cover; } .product-info { flex: 1; min-width: 0; } .product-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-shop { font-size: 11px; color: var(--text-light); margin-bottom: 6px; } @@ -137,15 +140,15 @@