Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(DIY分类页): 优化商品卡样式与H5主题适配

Browse Source 
1.  修复H5端rpx单位CSS变量无法解析问题，添加rpx转px转换工具函数并更新缓存key
2.  给diy-category-item组件添加scoped样式，重构商品卡样式为CSS变量可配置形式
3.  补充多套预设的分类页商品卡样式token到style_color配置中
This commit is contained in:
ZF Sun
2026-07-07 10:56:59 +08:00
parent 83a5f358e2
commit 3713cd2cf6
3 changed files with 584 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
common/js/style_color.js
View File

@@ -88,6 +88,55 @@ export default {
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 8 preset 一致) =====
...{
// 拼团
@@ -233,6 +282,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -378,6 +476,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -523,6 +670,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -668,6 +864,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -813,6 +1058,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -958,6 +1252,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团
@@ -1103,6 +1446,55 @@ export default {
diy_category_item_consult_now_white_space:'nowrap', // 咨询/AI按钮空白处理(独立可调)
diy_category_item_consult_now_display: 'inline-block',// 咨询/AI按钮显示模式(独立可调)
},
// ===== DIY 分类页 - 商品卡 字号 / 布局 token(全 8 preset 一致, 远端可覆写) =====
// SCSS 中通过 var(--diy-category-item-xxx, fallback) 引用
...{
// .goods-name
diy_category_item_goods_name_line_height:1.3, // 商品名行高
diy_category_item_goods_name_margin_top: '20rpx', // 商品名上外边距
// .discount-price
diy_category_item_discount_price_weight: 'bold', // 折后价字重
diy_category_item_discount_price_line_height: 1, // 折后价行高
diy_category_item_discount_price_margin_top: '16rpx', // 折后价上外边距(template2)
// .pro-info
diy_category_item_pro_info_margin_top: '16rpx', // 价格信息区上外边距(template2)
// .delete-price
diy_category_item_delete_price_size: '24rpx', // 删除价字号(替代 $font-size-tag)
diy_category_item_delete_price_line_height: 1, // 删除价行高
diy_category_item_delete_price_text_decoration:'line-through',// 删除价文本装饰
// .member-price-tag
diy_category_item_member_price_tag_width: '60rpx', // 会员/促销价标宽度
diy_category_item_member_price_tag_height: '28rpx', // 会员/促销价标高度(template2)
diy_category_item_member_price_tag_line_height: 1, // 会员/促销价标行高
diy_category_item_member_price_tag_margin_left: '6rpx', // 会员/促销价标左外边距
// .info-wrap
diy_category_item_info_wrap_padding: '0 20rpx', // 信息区内边距
diy_category_item_info_wrap_margin_top: '12rpx', // 信息区上外边距(template3)
// .footer-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_footer_wrap_display: 'flex', // 底栏 display
diy_category_item_footer_wrap_justify_content: 'space-between',// 底栏 justify-content
diy_category_item_footer_wrap_align_items: 'normal', // 底栏 align-items(原渲染未设, 保持 normal)
diy_category_item_footer_wrap_margin_top: 0, // 底栏上外边距(原渲染未设, 保持 0)
// .price-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_price_wrap_display: 'block', // 价栏 display(原渲染无定义, 保持 block)
diy_category_item_price_wrap_align_items: 'normal', // 价栏 align-items(原渲染未设)
diy_category_item_price_wrap_flex_wrap: 'nowrap', // 价栏 flex-wrap(原渲染未设)
diy_category_item_price_wrap_justify_content: 'normal', // 价栏 justify-content(原渲染未设)
diy_category_item_price_wrap_margin_top: 0, // 价栏上外边距(原渲染未设, 保持 0)
// .name-wrap(原文件无 SCSS 定义, 默认值保持原渲染的 block 布局, 远端可覆写)
diy_category_item_name_wrap_display: 'block', // 名称栏 display(原渲染无定义, 保持 block)
diy_category_item_name_wrap_flex: 'auto', // 名称栏 flex(原渲染未设)
diy_category_item_name_wrap_overflow: 'visible', // 名称栏 overflow(原渲染未设)
// .consult-now-btn-wrap(默认与原渲染一致, 远端可覆写)
diy_category_item_consult_now_wrap_display: 'flex', // 咨询按钮容器 display
diy_category_item_consult_now_wrap_justify_content:'flex-end',// 咨询按钮容器 justify-content
diy_category_item_consult_now_wrap_margin_top: 'auto', // 咨询按钮容器 margin-top
diy_category_item_consult_now_wrap_padding_top: '10rpx', // 咨询按钮容器 padding-top
// 全局工具类覆盖(本文件 scoped 限定)
diy_category_item_color_tip_color: '#909399', // .color-tip 文字色(替代 $color-tip)
diy_category_item_price_font_weight: 500, // .price-font 字重
},
// ===== 营销 token(本次统一, 全 9 preset 一致) =====
...{
// 拼团