文章目录[隐藏]
实操指南：美化商品列表与详情页的7个视觉技巧
引言：视觉设计在电商中的重要性
在当今数字化的商业环境中，商品列表与详情页的视觉呈现直接影响着用户的购买决策。研究表明，精心设计的商品页面可以将转化率提升高达80%。对于基于WordPress的电商网站来说，视觉优化不仅是美学问题，更是技术实现与用户体验的完美结合。
本指南专为WordPress开发者和行业新人设计，将深入探讨7个实用的视觉技巧，通过代码示例和实操步骤，帮助您打造既美观又高效的电商页面。无论您使用的是WooCommerce、Easy Digital Downloads还是其他电商插件，这些技巧都能显著提升您的网站视觉吸引力。
技巧一：响应式网格布局优化
为什么响应式网格布局至关重要
在移动设备流量占比超过50%的今天，响应式设计不再是可选项，而是必需品。一个优秀的网格布局能够确保商品在不同设备上都能以最佳方式呈现，提升用户体验并降低跳出率。
WordPress实现方法
对于WordPress电商网站，我们可以通过CSS Grid和Flexbox结合的方式创建灵活的网格布局。以下是一个基于WooCommerce的实用代码示例：
/* 商品列表网格布局 */
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 30px;
margin: 0;
padding: 0;
}
/* 针对不同屏幕尺寸的调整 */
@media (max-width: 768px) {
.products {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 20px;
}
}
@media (max-width: 480px) {
.products {
grid-template-columns: 1fr;
grid-gap: 15px;
}
}
/* 单个商品卡片样式 */
.product {
position: relative;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}进阶技巧：交错网格布局
对于希望创建更动态视觉效果的高级用户，可以尝试交错网格布局：
// 在主题的functions.php中添加自定义类
add_filter('post_class', 'custom_product_class');
function custom_product_class($classes) {
if (is_shop() || is_product_category()) {
global $wp_query;
if (0 == $wp_query->current_post % 3) {
$classes[] = 'product-tall';
} elseif (1 == $wp_query->current_post % 3) {
$classes[] = 'product-wide';
}
}
return $classes;
}技巧二：高质量图片与懒加载技术
图片优化的重要性
商品图片是电商网站的灵魂，但大尺寸图片会严重影响页面加载速度。研究表明，页面加载时间每增加1秒，转化率就会下降7%。
WordPress图片优化方案
-
智能图片尺寸调整：
// 在主题的functions.php中添加自定义图片尺寸 add_action('after_setup_theme', 'custom_image_sizes'); function custom_image_sizes() { add_image_size('product-thumbnail', 300, 300, true); add_image_size('product-medium', 600, 600, true); add_image_size('product-large', 1200, 1200, false); } // 在商品列表中使用合适的图片尺寸 add_filter('woocommerce_product_get_image', 'custom_product_image', 10, 5); function custom_product_image($image, $product, $size, $attr, $placeholder) { if (is_shop() || is_product_category()) { $image_id = $product->get_image_id(); if ($image_id) { return wp_get_attachment_image($image_id, 'product-thumbnail', false, $attr); } } return $image; } -
懒加载实现：
// 使用Intersection Observer API实现懒加载 document.addEventListener('DOMContentLoaded', function() { const productImages = document.querySelectorAll('.product img[data-src]'); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.getAttribute('data-src'); img.removeAttribute('data-src'); observer.unobserve(img); } }); }, { rootMargin: '0px 0px 100px 0px' }); productImages.forEach(img => imageObserver.observe(img)); });
技巧三：色彩与品牌一致性
建立视觉识别系统
色彩是品牌识别的重要组成部分。一致的色彩方案能够提升品牌专业度，并帮助用户建立认知关联。
WordPress主题定制方法
-
创建全局色彩变量：
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --accent-color: #e74c3c; --text-primary: #333333; --text-secondary: #666666; --background-light: #f8f9fa; --border-color: #e0e0e0; } /* 应用色彩变量 */ .product { border: 1px solid var(--border-color); } .product-title { color: var(--text-primary); } .price { color: var(--accent-color); } .add-to-cart-button { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .add-to-cart-button:hover { background-color: #2980b9; /* 主色变体 */ } -
动态色彩主题支持：
// 创建主题定制器选项 add_action('customize_register', 'product_theme_customizer'); function product_theme_customizer($wp_customize) { // 添加主色设置 $wp_customize->add_setting('primary_color', array( 'default' => '#3498db', 'transport' => 'refresh', )); $wp_customize->add_control(new WP_Customize_Color_Control( $wp_customize, 'primary_color', array( 'label' => __('主色调', 'text-domain'), 'section' => 'colors', 'settings' => 'primary_color' ) )); } // 输出动态CSS add_action('wp_head', 'dynamic_product_styles'); function dynamic_product_styles() { $primary_color = get_theme_mod('primary_color', '#3498db'); ?> <style type="text/css"> :root { --primary-color: <?php echo esc_attr($primary_color); ?>; } .add-to-cart-button { background-color: <?php echo esc_attr($primary_color); ?>; } </style> <?php }
技巧四：微交互与动画效果
微交互的价值
微交互能够提供即时反馈，增强用户参与感，并引导用户完成关键操作。适当的动画效果可以使页面更加生动，但需注意不要过度使用。
实现优雅的交互效果
-
悬停效果增强：
/* 商品卡片悬停效果 */ .product { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .product:hover .product-image { transform: scale(1.05); } .product:hover .product-actions { opacity: 1; transform: translateY(0); } /* 隐藏的操作按钮 */ .product-actions { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); padding: 15px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; display: flex; justify-content: space-between; } /* 加载动画 */ @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .product-image.loading { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200px 100%; animation: shimmer 1.5s infinite; } -
AJAX购物车交互：
// 增强的AJAX添加到购物车功能 document.addEventListener('DOMContentLoaded', function() { const addToCartButtons = document.querySelectorAll('.add_to_cart_button'); addToCartButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const originalText = this.innerHTML; const productId = this.getAttribute('data-product_id'); // 显示加载状态 this.innerHTML = '<span class="spinner"></span>添加中...'; this.classList.add('loading'); // 发送AJAX请求 fetch('/wp-admin/admin-ajax.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `action=add_to_cart&product_id=${productId}` }) .then(response => response.json()) .then(data => { if (data.success) { // 成功反馈 this.innerHTML = '<span class="checkmark">✓</span>已添加'; this.classList.remove('loading'); this.classList.add('success'); // 更新购物车图标 updateCartCount(data.cart_count); // 3秒后恢复原状 setTimeout(() => { this.innerHTML = originalText; this.classList.remove('success'); }, 3000); } }) .catch(error => { console.error('Error:', error); this.innerHTML = '添加失败'; setTimeout(() => { this.innerHTML = originalText; this.classList.remove('loading'); }, 2000); }); }); }); function updateCartCount(count) { const cartCount = document.querySelector('.cart-count'); if (cartCount) { // 添加动画效果 cartCount.style.transform = 'scale(1.5)'; setTimeout(() => { cartCount.textContent = count; cartCount.style.transform = 'scale(1)'; }, 150); } } });
技巧五：排版与信息层次结构
创建清晰的视觉层次
良好的排版能够引导用户的视线流动，突出重要信息，提高内容的可读性和可扫描性。
WordPress排版优化策略
-
响应式字体系统：
/* 创建响应式字体比例 */ :root { --font-scale: 1.2; --base-size: 1rem; --size-300: calc(var(--base-size) / var(--font-scale)); --size-400: var(--base-size); --size-500: calc(var(--base-size) * var(--font-scale)); --size-600: calc(var(--size-500) * var(--font-scale)); --size-700: calc(var(--size-600) * var(--font-scale)); } /* 应用字体大小 */ .product-title { font-size: var(--size-600); line-height: 1.2; font-weight: 600; margin-bottom: 0.5rem; } .product-price { font-size: var(--size-500); font-weight: 700; color: var(--accent-color); } .product-excerpt { font-size: var(--size-400); line-height: 1.6; color: var(--text-secondary); margin-bottom: 1rem; } /* 响应式调整 */ @media (max-width: 768px) { :root { --base-size: 0.9rem; } } -
商品详情页内容层次：
// 重排商品详情页元素 add_action('woocommerce_single_product_summary', 'custom_product_layout', 5); function custom_product_layout() { // 移除默认的元素位置 remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5); remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10); remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20); // 重新添加元素，创建更好的层次结构 add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5); add_action('woocommerce_single_product_summary', 'custom_product_rating_display', 7); add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10); add_action('woocommerce_single_product_summary', 'custom_highlight_badges', 12); add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 15); add_action('woocommerce_single_product_summary', 'custom_product_meta_info', 18); } // 自定义评分显示 function custom_product_rating_display() { global $product; if ($product->get_average_rating() > 0) { echo '<div class="product-rating-summary">'; echo wc_get_rating_html($product->get_average_rating()); echo '<span class="rating-count">(' . $product->get_rating_count() . '条评价)</span>'; echo '</div>'; } } // 产品亮点徽章 function custom_highlight_badges() { global $product; $badges = array(); if ($product->is_on_sale()) { $badges[] = '<span class="product-badge sale">促销</span>'; } if ($product->is_featured()) { $badges[] = '<span class="product-badge featured">精选</span>'; } if ($product->is_in_stock()) { $badges[] = '<span class="product-badge in-stock">有货</span>'; } else { $badges[] = '<span class="product-badge out-of-stock">缺货</span>'; } if (!empty($badges)) { echo '<div class="product-badges">' . implode('', $badges) . '</div>'; } }
技巧六：空白与间距的合理运用
空白的设计哲学
空白（负空间）不是浪费的空间，而是设计中的重要元素。合理的空白使用能够提高可读性，突出重要内容，并创造优雅的视觉体验。
实施系统化的间距方案
-
创建间距比例系统：
/* 基于8px基准的间距比例 */ :root { --space-unit: 8px; --space-xxs: calc(var(--space-unit) * 0.5); /* 4px */ --space-xs: calc(var(--space-unit) * 1); /* 8px */ --space-sm: calc(var(--space-unit) * 1.5); /* 12px */ --space-md: calc(var(--space-unit) * 2); /* 16px */ --space-lg: calc(var(--space-unit) * 3); /* 24px */ --space-xl: calc(var(--space-unit) * 4); /* 32px */ --space-xxl: calc(var(--space-unit) * 6); /* 48px */ } /* 应用间距系统 */ .product { padding: var(--space-lg); margin-bottom: var(--space-xl); } .product-image { margin-bottom: var(--space-md); } .product-title { margin-bottom: var(--space-sm); } .product-price { margin-bottom: var(--space-lg); } .product-actions { margin-top: var(--space-md); gap: var(--space-sm); } /* 商品详情页间距优化 */ .woocommerce-product-details { padding: var(--space-xl) 0; } .product-gallery { margin-right: var(--space-xxl); } .summary.entry-summary { padding: var(--space-lg); } -
移动端间距优化：
@media (max-width: 768px) { :root { --space-unit: 6px; } .product { padding: var(--space-md); margin-bottom: var(--space-lg); } .product-gallery { margin-right: 0; margin-bottom: var(--space-xl); } }
技巧七：无障碍与用户体验优化
无障碍设计的重要性
无障碍设计不仅有助于残障用户，还能改善所有用户的体验。遵循WCAG（Web内容无障碍指南）标准可以扩大受众范围，并可能提升SEO表现。
WordPress无障碍优化实践
- 键盘导航与焦点样式：
/* 改进的焦点样式 */
.product:focus-within {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
}
.add-to-cart-button:focus {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
background-color: #2980b9;
}
/* 高对比度模式支持 */
@media (prefers-contrast: high) {
.product {
border: 2px solid #000;
}
.product-title {
color: #000;
}
}
/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;
}
.product:hover {
transform: none;
}}
2. **屏幕阅读器优化与语义化HTML**：// 增强商品卡片的语义化结构
add_action('woocommerce_before_shop_loop_item', 'custom_product_card_wrapper_start', 5);
function custom_product_card_wrapper_start() {
echo '<article class="product-card" role="article" aria-labelledby="product-title-' . get_the_ID() . '">';}
add_action('woocommerce_after_shop_loop_item', 'custom_product_card_wrapper_end', 20);
function custom_product_card_wrapper_end() {
echo '</article>';}
// 为商品图片添加详细的alt文本
add_filter('wp_get_attachment_image_attributes', 'enhance_product_image_attributes', 10, 3);
function enhance_product_image_attributes($attr, $attachment, $size) {
if (is_shop() || is_product_category() || is_product()) {
global $product;
if ($product && !empty($attr['alt'])) {
// 如果alt文本为空，使用产品标题
if (empty($attr['alt'])) {
$attr['alt'] = $product->get_name();
}
// 为商品列表图片添加描述性文本
if ($size === 'product-thumbnail') {
$price = $product->get_price_html();
$attr['alt'] = $product->get_name() . ' - ' . strip_tags($price);
}
}
}
return $attr;}
// 添加屏幕阅读器专用文本
add_action('woocommerce_after_shop_loop_item_title', 'add_screen_reader_product_info', 5);
function add_screen_reader_product_info() {
global $product;
echo '<span class="screen-reader-text">';
// 商品状态信息
if (!$product->is_in_stock()) {
echo '当前缺货。';
} elseif ($product->is_on_backorder()) {
echo '可预订。';
}
// 商品类型
if ($product->is_type('variable')) {
echo '多规格商品，请选择具体选项查看价格。';
}
echo '</span>';}
3. **颜色对比度与可读性验证**：/ 自动颜色对比度检测与修正 /
.product-title {
color: #333;
/* 确保与背景的对比度至少达到4.5:1 */
background-color: #fff;}
.product-price {
color: #d32f2f; /* 使用深色红色确保可读性 */
font-weight: bold;}
/ 为色盲用户提供额外视觉提示 /
.product-badge.sale {
background-color: #ff4444;
color: white;
position: relative;}
.product-badge.sale::after {
content: "SALE";
/* 为色盲用户添加纹理模式 */
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 2px,
rgba(255,255,255,0.3) 2px,
rgba(255,255,255,0.3) 4px
);}
/ 表单元素无障碍优化 /
.product-quantity input[type="number"] {
min-height: 44px; /* 最小触摸目标尺寸 */
min-width: 44px;
font-size: 16px; /* 防止iOS自动缩放 */}
/ 错误状态的高可见性提示 /
.product-error {
border: 2px solid #d32f2f;
background-color: #ffebee;
color: #b71c1c;
padding: var(--space-md);
margin: var(--space-md) 0;}
.product-error:focus {
outline: 3px solid #d32f2f;
outline-offset: 2px;}
## 综合实战：创建完整的商品展示组件
### 整合所有技巧的完整示例
现在让我们将所有技巧整合到一个完整的商品展示组件中：
<?php
/**
- 自定义商品卡片模板
- 整合所有视觉优化技巧
*/
function custom_product_card($product_id = null) {
if (!$product_id) {
global $product;
} else {
$product = wc_get_product($product_id);
}
if (!$product) return;
$product_id = $product->get_id();
$product_name = $product->get_name();
$product_url = get_permalink($product_id);
$product_price = $product->get_price_html();
$product_image = $product->get_image('product-thumbnail', array(
'alt' => $product_name . ' - ' . strip_tags($product_price),
'loading' => 'lazy',
'data-src' => wp_get_attachment_image_url($product->get_image_id(), 'product-thumbnail')
));
$average_rating = $product->get_average_rating();
$review_count = $product->get_review_count();
?>
<article class="product-card" role="article" aria-labelledby="product-title-<?php echo esc_attr($product_id); ?>">
<div class="product-card__inner">
<!-- 商品图片区域 -->
<div class="product-card__image">
<a href="<?php echo esc_url($product_url); ?>" class="product-card__image-link">
<?php echo $product_image; ?>
<!-- 商品徽章 -->
<div class="product-card__badges">
<?php if ($product->is_on_sale()) : ?>
<span class="product-badge product-badge--sale" aria-label="促销商品">促销</span>
<?php endif; ?>
<?php if ($product->is_featured()) : ?>
<span class="product-badge product-badge--featured" aria-label="精选商品">精选</span>
<?php endif; ?>
<?php if (!$product->is_in_stock()) : ?>
<span class="product-badge product-badge--out-of-stock" aria-label="暂时缺货">缺货</span>
<?php endif; ?>
</div>
</a>
<!-- 快速操作按钮 -->
<div class="product-card__actions">
<button class="product-action product-action--wishlist"
aria-label="添加到愿望单"
data-product-id="<?php echo esc_attr($product_id); ?>">
<svg width="20" height="20" aria-hidden="true" focusable="false">
<use xlink:href="#icon-heart"></use>
</svg>
</button>
<button class="product-action product-action--quick-view"
aria-label="快速预览"
data-product-id="<?php echo esc_attr($product_id); ?>">
<svg width="20" height="20" aria-hidden="true" focusable="false">
<use xlink:href="#icon-eye"></use>
</svg>
</button>
</div>
</div>
<!-- 商品信息区域 -->
<div class="product-card__content">
<h3 class="product-card__title" id="product-title-<?php echo esc_attr($product_id); ?>">
<a href="<?php echo esc_url($product_url); ?>">
<?php echo esc_html($product_name); ?>
</a>
</h3>
<!-- 商品评分 -->
<?php if ($average_rating > 0) : ?>
<div class="product-card__rating" aria-label="评分：<?php echo esc_attr($average_rating); ?>星，基于<?php echo esc_attr($review_count); ?>条评价">
<div class="star-rating" role="img">
<span style="width:<?php echo esc_attr(($average_rating / 5) * 100); ?>%">
评分：<?php echo esc_html($average_rating); ?>星，基于<?php echo esc_html($review_count); ?>条评价
</span>
</div>
<span class="product-card__review-count">
(<?php echo esc_html($review_count); ?>)
</span>
</div>
<?php endif; ?>
<!-- 商品价格 -->
<div class="product-card__price">
<?php echo $product_price; ?>
</div>
<!-- 商品属性摘要 -->
<?php if ($product->is_type('simple')) : ?>
<div class="product-card__excerpt">
<?php echo wp_trim_words($product->get_short_description(), 15); ?>
</div>
<?php endif; ?>
<!-- 添加到购物车按钮 -->
<div class="product-card__cart">
<?php
echo apply_filters('woocommerce_loop_add_to_cart_link',
sprintf('<a href="%s" data-quantity="1" class="%s" %s aria-label="将%s添加到购物车">%s</a>',
esc_url($product->add_to_cart_url()),
esc_attr(implode(' ', array_filter(array(
'button',
'product-card__add-to-cart',
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports('ajax_add_to_cart') ? 'ajax_add_to_cart' : ''
)))),
wc_implode_html_attributes(array(
'data-product_id' => $product->get_id(),
'data-product_sku' => $product->get_sku(),
'aria-label' => $product->add_to_cart_description(),
'rel' => 'nofollow',
)),
esc_attr($product->get_name()),
esc_html($product->add_to_cart_text())
),
$product);
?>
</div>
</div>
</div>
<!-- 屏幕阅读器专用信息 -->
<div class="screen-reader-text">
<p>商品：<?php echo esc_html($product_name); ?></p>
<p>价格：<?php echo strip_tags($product_price); ?></p>
<?php if ($average_rating > 0) : ?>
<p>评分：<?php echo esc_html($average_rating); ?>星，基于<?php echo esc_html($review_count); ?>条评价</p>
<?php endif; ?>
<?php if (!$product->is_in_stock()) : ?>
<p>状态：暂时缺货</p>
<?php endif; ?>
</div>
</article>
<?php}
### 配套CSS样式
/ 完整商品卡片样式 /
.product-card {
--card-padding: var(--space-lg);
--card-radius: 12px;
--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--card-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.15);
position: relative;
background: var(--background-light);
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
display: flex;
flex-direction: column;}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--card-shadow-hover);}
.product-card__inner {
display: flex;
flex-direction: column;
height: 100%;}
/ 图片区域 /
.product-card__image {
position: relative;
padding-top: 100%; /* 1:1宽高比 */
overflow: hidden;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);}
.product-card__image-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;}
.product-card__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;}
.product-card:hover .product-card__image img {
transform: scale(1.05);}
/ 徽章样式 /
.product-card__badges {
position: absolute;
top: var(--space-sm);
left: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
z-index: 2;}
.product-badge {
padding: var(--space-xxs) var(--space-sm);
border-radius: 4px;
font-size: var(--size-300);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1;}
.product-badge--sale {
background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
color: white;
animation: pulse 2s infinite;}
.product-badge--featured {
background: linear-gradient(135deg, var(--primary-color), #3498db);
color: white;}
.product-badge--out-of-stock {
background: var(--text-secondary);
color: white;}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.8; }
100% { opacity: 1; }}
/ 快速操作按钮 /
.product-card__actions {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-xs);
opacity: 0;
transform: translateX(10px);
transition: all 0.3s ease;
z-index: 2;}
.product-card:hover .product-card__actions {
opacity: 1;
transform: translateX(0);}
.product-action {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;}
.product-action:hover {
background: var(--primary-color);
transform: scale(1.1);}
.product-action:hover svg {
fill: white;}
.product-action svg {
width: 20px;
height: 20px;
fill: var(--text-secondary);
transition: fill 0.2s ease;}
/ 内容区域 /
.product-card__content {
padding: var(--space-lg);
flex-grow: 1;
display: flex;
flex-direction: column;}
.product-card__title {
font-size: var(--size-500);
font-weight: 600;
line-height: 1.3;
margin: 0 0 var(--space-sm) 0;}
.product-card__title a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.2s ease;}
.product-card__title a:hover {
color: var(--primary-color);}
/ 评分样式 /
.product-card__rating {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-bottom: var(--space-sm);}
.star-rating {
position: relative;
height: 1em;
width: 5.4em;
font-size: var(--size-400);
line-height: 1;}
.star-rating::before {
content: "★★★★★";
color: var(--border-color);}
.star-rating span {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: hidden;}
.star-rating span::before {
content: "★★★★★";
color: #ffc107;}
.product-card__review-count {
font-size: var(--size-300);
color: var(--text-secondary);}
/ 价格样式 /
.product-card__price {
font-size: var(--size-600);
font-weight: 700;
color: var(--accent-color);
margin-bottom: var(--space-md);}
.product-card__price del {
font-size: var(--size-400);
color: var(--text-secondary);
margin-right: var(--space-xs);}
.product-card__price ins {
text-decoration: none;}
/ 商品描述 /
.product-card__excerpt {
font-size: var(--size-400);
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
flex-grow: 1;}
/ 购物车按钮 /
.product-card__cart {
margin-top: auto;}
.product-card__add-to-cart {
width: 100%;
padding: var(--space-md) var(--space-lg);
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
font-size: var(--size-400);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);}
.product-card__add-to-cart:hover {
background: #2980b9;
transform: translateY(-2px);}
.product-card__add-to-cart:disabled {
background: var(--text-secondary);
cursor: not-allowed;
transform: none;}
.product-card__add-to-cart.loading::after {
content: "";
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;}
@keyframes spin {
to { transform: rotate(360deg); }}
/ 响应式调整 /
@media (max-width: 768px
