diff --git a/pages/module/detail/DetailCardCompontent.vue b/pages/module/detail/DetailCardCompontent.vue index b6e9e7d..197a98a 100644 --- a/pages/module/detail/DetailCardCompontent.vue +++ b/pages/module/detail/DetailCardCompontent.vue @@ -26,8 +26,5 @@ const props = defineProps({ diff --git a/pages/module/detail/DetailCardGoodsContentList.vue b/pages/module/detail/DetailCardGoodsContentList.vue index a6c08d5..087bfbf 100644 --- a/pages/module/detail/DetailCardGoodsContentList.vue +++ b/pages/module/detail/DetailCardGoodsContentList.vue @@ -7,6 +7,7 @@ :key="`${item.commodityId}-${index}`" > + diff --git a/pages/module/detail/styles/DetailCardCompontent.scss b/pages/module/detail/styles/DetailCardCompontent.scss new file mode 100644 index 0000000..6231b9e --- /dev/null +++ b/pages/module/detail/styles/DetailCardCompontent.scss @@ -0,0 +1,4 @@ +.container { + width: 100%; + padding: 12px 0; +} diff --git a/pages/module/detail/styles/DetailCardGoodsContentList.scss b/pages/module/detail/styles/DetailCardGoodsContentList.scss new file mode 100644 index 0000000..37c8b31 --- /dev/null +++ b/pages/module/detail/styles/DetailCardGoodsContentList.scss @@ -0,0 +1,138 @@ +.container { + margin: 6px 0 0; + + .container-scroll { + display: flex; + flex-direction: row; + overflow-x: auto; + overflow-y: hidden; + margin: 4px 0; + + .mk-card-item { + position: relative; + + display: flex; + flex-direction: column; + align-items: start; + width: 188px; + background-color: #ffffff; + border-radius: 10px; + margin-right: 8px; + padding-bottom: 12px; + + .card-badge { + position: absolute; + top: 8px; + left: 8px; + background: #ffe7b2; + color: #b97a00; + font-size: 12px; + padding: 2px 8px; + border-radius: 4px; + z-index: 2; + } + + .card-img { + width: 188px; + height: 114px; + border-radius: 10px; + object-fit: cover; /* 确保图片不变形,保持比例裁剪 */ + flex-shrink: 0; /* 防止图片被压缩 */ + } + + .card-content { + box-sizing: border-box; + padding: 10px 12px 0 12px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + width: 100%; + flex: 1; /* 让内容区域占据剩余空间 */ + overflow: hidden; /* 防止内容溢出 */ + } + + .card-title-column { + display: flex; + align-items: start; + flex-direction: column; + width: 100%; + } + + .card-title { + font-size: 16px; + font-weight: bold; + color: #222; + width: 100%; + /* 限制标题最多显示两行 */ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.4; + max-height: 2.8em; /* 2行的高度 */ + } + + .card-tags { + display: flex; + flex-direction: row; + align-items: start; + padding: 6px 0; + } + + .card-tag { + color: #ff6600; + font-size: 10px; + border-radius: 4px; + padding: 0 6px; + margin-left: 2px; + border: 1px solid #ff6600; + } + + .card-desc { + font-size: 13px; + color: #888; + margin-top: 2px; + } + + .card-bottom-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 8px; + width: 100%; + } + + .card-price-row { + .card-price-fu { + color: #ff6600; + font-size: 11px; + font-weight: normal; + } + + .card-price { + color: #ff6600; + font-size: 16px; + font-weight: bold; + } + .card-unit { + font-size: 11px; + color: #888; + font-weight: normal; + margin-left: 2px; + } + } + + .card-btn { + background: #ff6600; + color: #fff; + font-size: 15px; + border-radius: 20px; + padding: 0 18px; + height: 32px; + line-height: 32px; + } + } + } +}