diff --git a/pages/goods/components/GoodInfo/styles/index.scss b/pages/goods/components/GoodInfo/styles/index.scss index 271933e..978e97b 100644 --- a/pages/goods/components/GoodInfo/styles/index.scss +++ b/pages/goods/components/GoodInfo/styles/index.scss @@ -61,8 +61,8 @@ margin-top: 12px; .facilities-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; + flex-wrap: wrap; gap: 8px; .facility-item { diff --git a/pages/goods/index.vue b/pages/goods/index.vue index 0149e9e..295f3c5 100644 --- a/pages/goods/index.vue +++ b/pages/goods/index.vue @@ -15,9 +15,31 @@ - + + + + + + + {{ moduleItem.moduleTitle }} + + {{ moduleItem.moduleContent }} + + + - + diff --git a/pages/goods/styles/index.scss b/pages/goods/styles/index.scss index d73d2cd..128ea5f 100644 --- a/pages/goods/styles/index.scss +++ b/pages/goods/styles/index.scss @@ -15,6 +15,50 @@ $button-hover-color: darken($button-color, 8%); flex-shrink: 0; } + // 使用须知样式 + .use-notice { + margin-bottom: 16px; + + .module-item { + display: flex; + align-items: flex-start; + flex-direction: column; + border-bottom: 1px solid #666; + padding: 12px 0; + + .module-icon { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 8px; + flex-shrink: 0; + + image { + width: 20px; + height: 20px; + object-fit: cover; + background-color: #f55726; + margin-right: 8px; + } + + .module-title { + font-size: 14px; + color: #333; + text-align: center; + word-wrap: break-word; + } + } + + .module-desc { + flex: 1; + font-size: 12px; + color: #666; + line-height: 1.5; + margin-top: 4px; + } + } + } + .content-wrapper { flex: 1; height: 0; // 关键:让flex子项能够正确计算高度