diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 3f0b004..f07cbfd 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -35,6 +35,13 @@ + + + + {{ $lang('components-diy.diy-category-item.consultNow') }} + + + @@ -2500,6 +2507,99 @@ export default { } } } + + .footer-wrap { + display: flex; + justify-content: flex-end; + margin-top: 10rpx; + } + } + + &.single-column { + flex-direction: column; + padding: 0 20rpx 0 8rpx; + gap: 20rpx; + + .goods-item { + width: calc(100% + 20rpx); + flex-direction: row; + align-items: flex-start; + background: #fff; + border-radius: 12rpx; + margin-bottom: 0; + padding: 20rpx; + box-sizing: border-box; + height: 220rpx; + + .goods-img { + width: 180rpx; + height: 180rpx; + padding-top: 0; + margin-right: 14rpx; + border-radius: 12rpx; + flex-shrink: 0; + + image { + border-radius: 12rpx; + } + } + + .info-wrap { + flex: 1; + padding: 0; + display: flex; + flex-direction: column; + height: 100%; + } + + .name-wrap { + .goods-name { + font-size: 28rpx; + color: #333; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + line-height: 1.4; + margin-top: 0; + white-space: normal; + text-overflow: clip; + } + } + + .price-wrap { + margin-top: 8rpx; + display: flex; + align-items: baseline; + justify-content: flex-start; + + .discount-price { + color: #FF6B35; + font-size: 32rpx; + font-weight: bold; + + .unit { + font-size: 24rpx; + } + } + } + + .footer-wrap { + display: flex; + justify-content: flex-end; + margin-top: auto; + } + } + } + + &.double-column { + .goods-item { + width: calc(50% - 10rpx); + flex-direction: column; + background: #fff; + border-radius: 12rpx; + margin-bottom: 20rpx; + } } } }