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;
+ }
+ }
+ }
+}