diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue
index 52352ca..44a003c 100644
--- a/components-diy/diy-category-item.vue
+++ b/components-diy/diy-category-item.vue
@@ -228,7 +228,35 @@
{{ item.label_name }}
-
+
+
+
+ {{ isEnEnv ? item.en_goods_name : item.goods_name }}
+
+
+
+
+
+ {{ $lang('common.currencySymbol') }}
+ {{
+ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}
+ .{{
+ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}
+
+
+
+ {{ $lang('common.currencySymbol') }}
+ {{ showMarketPrice(item) }}
+
+
+
+ {{ $lang('components-diy.diy-category-item.buyNow') }}
+
+
+
+
+
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
@@ -264,37 +292,6 @@
{{ $lang('components-diy.diy-category-item.consultNow') }}
-
-
-
@@ -323,7 +320,35 @@
:lazy-load="true" show-menu-by-longpress />
{{ item.label_name }}
-
+
+
+
+ {{ isEnEnv ? item.en_goods_name : item.goods_name }}
+
+
+
+
+
+ {{ $lang('common.currencySymbol') }}
+ {{
+ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}
+ .{{
+ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}
+
+
+
+ {{ $lang('common.currencySymbol') }}
+ {{ showMarketPrice(item) }}
+
+
+
+ {{ $lang('components-diy.diy-category-item.buyNow') }}
+
+
+
+
+
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
@@ -358,7 +383,7 @@
{{ $lang('components-diy.diy-category-item.consultNow') }}
-
+
{{ $lang('components-diy.diy-category-item.buyNow') }}
@@ -391,9 +416,6 @@
-
- {{ $lang('components-diy.diy-category-item.buyNow') }}
-
@@ -1794,30 +1816,143 @@ export default {
}
}*/
- &[data-template='3'] .goods-item {
- flex-direction: column;
+ // ===================== 模板3 商品分类样式 (卡片式布局: 图片顶部 + 名称上行 + 价格和按钮下行) =====================
+ &[data-template='3'] {
+ // 模板3 的商品列表容器: 灰色背景让卡片有层次
+ background: #f4f6fa;
- .info-wrap {
- width: 100%;
- margin-top: var(--diy-category-item-info-wrap-margin-top, 12rpx);
+ // 重置 double-column 的影响, 强制单列布局
+ .goods-item {
+ display: block;
+ flex-direction: column;
+ align-items: stretch;
+ width: 100% !important;
+ max-width: 100%;
+ background: #fff;
+ border-radius: 12rpx;
+ overflow: hidden;
+ margin: 0 0 20rpx;
+ padding: 0;
+ box-sizing: border-box;
}
+ // 强制取消 single-column 的 row 布局(防止同时应用)
+ &.single-column .goods-item,
+ &.double-column .goods-item {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ // 图片: 占满卡片宽度, 自适应高度(类似 banner)
.goods-img {
width: 100%;
- height: auto;
+ height: 0;
+ padding-top: 50%;
+ position: relative;
margin-right: 0;
line-height: 1;
+ border-radius: 0;
+ overflow: hidden;
image {
- border-radius: 8rpx;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ transform: none;
+ border-radius: 0;
}
}
- .select-sku {
+ // 信息区域: 上下结构 (名称一行 + 价格+按钮一行)
+ .info-wrap {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-top: 0;
+ padding: 24rpx;
+ box-sizing: border-box;
+ }
+
+ // 商品名称: 单行省略
+ .name-wrap {
+ width: 100%;
+
+ .goods-name {
+ font-size: 28rpx;
+ line-height: 1.4;
+ margin-top: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #333;
+ }
+ }
+
+ // 底部行: 价格在左, 按钮在右
+ .info-bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 12rpx;
+ }
+
+ // 价格区域: 包含当前价格 + 删除线价格(同行)
+ .price-wrap {
+ display: flex;
+ align-items: baseline;
+ flex: 1;
+ min-width: 0;
+ flex-wrap: wrap;
+
+ .discount-price {
+ display: inline-flex;
+ align-items: baseline;
+ font-weight: bold;
+ line-height: 1;
+ font-size: 30rpx;
+ color: var(--price-color, #FF6B35);
+
+ .unit {
+ font-size: 22rpx;
+ margin-right: 2rpx;
+ color: var(--price-color, #FF6B35);
+ }
+
+ .price {
+ font-size: 30rpx;
+ color: var(--price-color, #FF6B35);
+ }
+ }
+
+ // 删除线价格: 在当前价格右边
+ .delete-price {
+ margin-left: 16rpx;
+ display: inline-flex;
+ align-items: baseline;
+ text-decoration: line-through;
+ font-size: 24rpx;
+ color: #999;
+
+ .unit {
+ margin-right: 2rpx;
+ }
+ }
+ }
+
+ // 立即购买按钮: 在底部行右侧
+ .buy-now-btn {
+ flex-shrink: 0;
+ margin-left: 20rpx;
+ width: 160rpx;
+ height: 56rpx;
+ line-height: 56rpx;
+ text-align: center;
+ font-size: 26rpx;
font-weight: bold;
- width: 128rpx;
- height: 52rpx !important;
- line-height: 52rpx !important;
+ color: #fff;
+ border-radius: 28rpx;
}
}
}