refactor(DIY分类页): 优化商品卡样式与H5主题适配
1. 修复H5端rpx单位CSS变量无法解析问题，添加rpx转px转换工具函数并更新缓存key 2. 给diy-category-item组件添加scoped样式，重构商品卡样式为CSS变量可配置形式 3. 补充多套预设的分类页商品卡样式token到style_color配置中
This commit is contained in:
@@ -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 一致) =====
|
||||
...{
|
||||
// 拼团
|
||||
|
||||
@@ -750,7 +750,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.small {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
@@ -864,132 +864,160 @@ export default {
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 100%;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
position: absolute !important;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.goods-tag {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8rpx 16rpx;
|
||||
position: absolute;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: var(--diy-category-item-goods-tag-size, 22rpx);
|
||||
}
|
||||
|
||||
.goods-tag-img {
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: var(--diy-category-item-goods-name-size, 28rpx);
|
||||
line-height: 1.3;
|
||||
margin-top: 20rpx;
|
||||
white-space: nowrap;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.lineheight-clear {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
color: var(--price-color);
|
||||
.name-wrap {
|
||||
display: var(--diy-category-item-name-wrap-display, block);
|
||||
flex: var(--diy-category-item-name-wrap-flex, auto);
|
||||
overflow: var(--diy-category-item-name-wrap-overflow, visible);
|
||||
}
|
||||
|
||||
.price {
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 100%;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
align-items: center;
|
||||
|
||||
.block-wrap {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.sale {
|
||||
font-size: $font-size-tag !important;
|
||||
image {
|
||||
width: 100%;
|
||||
position: absolute !important;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
|
||||
// display: inline-block;
|
||||
// margin-left: 6rpx;
|
||||
// float: right;
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
.goods-tag {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag !important;
|
||||
padding: 8rpx 16rpx;
|
||||
position: absolute;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: var(--diy-category-item-goods-tag-size, 22rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
.goods-tag-img {
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: var(--diy-category-item-info-wrap-padding, 0 20rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: var(--diy-category-item-goods-name-size, 28rpx);
|
||||
line-height: var(--diy-category-item-goods-name-line-height, 1.3);
|
||||
margin-top: var(--diy-category-item-goods-name-margin-top, 20rpx);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.lineheight-clear {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
display: var(--diy-category-item-price-wrap-display, flex);
|
||||
align-items: var(--diy-category-item-price-wrap-align-items, baseline);
|
||||
flex-wrap: var(--diy-category-item-price-wrap-flex-wrap, wrap);
|
||||
justify-content: var(--diy-category-item-price-wrap-justify-content, space-between);
|
||||
margin-top: var(--diy-category-item-price-wrap-margin-top, 8rpx);
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: var(--diy-category-item-discount-price-weight, bold);
|
||||
line-height: var(--diy-category-item-discount-price-line-height, 1);
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
align-items: center;
|
||||
|
||||
.block-wrap {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.sale {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
|
||||
// display: inline-block;
|
||||
// margin-left: 6rpx;
|
||||
// float: right;
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: var(--diy-category-item-delete-price-line-height, 1);
|
||||
font-size: var(--diy-category-item-delete-price-size, $font-size-tag) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: var(--diy-category-item-member-price-tag-width, 60rpx);
|
||||
line-height: var(--diy-category-item-member-price-tag-line-height, 1);
|
||||
margin-left: var(--diy-category-item-member-price-tag-margin-left, 6rpx);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
display: var(--diy-category-item-footer-wrap-display, flex);
|
||||
justify-content: var(--diy-category-item-footer-wrap-justify-content, space-between);
|
||||
align-items: var(--diy-category-item-footer-wrap-align-items, normal);
|
||||
margin-top: var(--diy-category-item-footer-wrap-margin-top, 0);
|
||||
}
|
||||
|
||||
.consult-now-btn-wrap {
|
||||
display: var(--diy-category-item-consult-now-wrap-display, flex);
|
||||
justify-content: var(--diy-category-item-consult-now-wrap-justify-content, flex-end);
|
||||
margin-top: var(--diy-category-item-consult-now-wrap-margin-top, auto);
|
||||
padding-top: var(--diy-category-item-consult-now-wrap-padding-top, 10rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.sell-out {
|
||||
position: absolute;
|
||||
@@ -1109,8 +1137,8 @@ export default {
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
font-size: var(--diy-category-item-goods-name-size, $font-size-base);
|
||||
line-height: var(--diy-category-item-goods-name-line-height, 1.3);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
@@ -1125,9 +1153,9 @@ export default {
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-top: 16rpx;
|
||||
font-weight: var(--diy-category-item-discount-price-weight, bold);
|
||||
line-height: var(--diy-category-item-discount-price-line-height, 1);
|
||||
margin-top: var(--diy-category-item-discount-price-margin-top, 16rpx);
|
||||
color: var(--price-color);
|
||||
|
||||
.unit {
|
||||
@@ -1137,10 +1165,10 @@ export default {
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: 16rpx;
|
||||
margin-top: var(--diy-category-item-pro-info-margin-top, 16rpx);
|
||||
|
||||
.delete-price {
|
||||
text-decoration: line-through;
|
||||
text-decoration: var(--diy-category-item-delete-price-text-decoration, line-through);
|
||||
flex: 1;
|
||||
|
||||
.unit {
|
||||
@@ -1159,10 +1187,10 @@ export default {
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
height: 28rpx;
|
||||
width: var(--diy-category-item-member-price-tag-width, 60rpx);
|
||||
line-height: var(--diy-category-item-member-price-tag-line-height, 1);
|
||||
margin-left: var(--diy-category-item-member-price-tag-margin-left, 6rpx);
|
||||
height: var(--diy-category-item-member-price-tag-height, 28rpx);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
@@ -1264,7 +1292,7 @@ export default {
|
||||
|
||||
.info-wrap {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
margin-top: var(--diy-category-item-info-wrap-margin-top, 12rpx);
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
@@ -1403,10 +1431,10 @@ export default {
|
||||
}
|
||||
|
||||
.consult-now-btn-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: auto;
|
||||
padding-top: 10rpx;
|
||||
display: var(--diy-category-item-consult-now-wrap-display, flex);
|
||||
justify-content: var(--diy-category-item-consult-now-wrap-justify-content, flex-end);
|
||||
margin-top: var(--diy-category-item-consult-now-wrap-margin-top, auto);
|
||||
padding-top: var(--diy-category-item-consult-now-wrap-padding-top, 10rpx);
|
||||
}
|
||||
|
||||
.consult-now-btn {
|
||||
@@ -1425,4 +1453,13 @@ export default {
|
||||
display: var(--diy-category-item-consult-now-display, inline-block);
|
||||
}
|
||||
|
||||
.font-size-activity-tag {
|
||||
font-size: var(--diy-category-item-delete-price-size, $font-size-activity-tag) !important;
|
||||
}
|
||||
.color-tip {
|
||||
color: var(--diy-category-item-color-tip-color, $color-tip) !important;
|
||||
}
|
||||
.price-font {
|
||||
font-weight: var(--diy-category-item-price-font-weight, 500) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -430,7 +430,31 @@ const store = new Vuex.Store({
|
||||
let theme = this.state.themeStyle;
|
||||
if (!theme?.main_color || !theme?.aux_color) return;
|
||||
try {
|
||||
const cacheKey = (typeof theme === 'object' ? JSON.stringify(theme) : String(theme)) + '|' + (this.state.tabBarHeight || '');
|
||||
// H5 端 CSS 变量值若是 rpx 字符串,浏览器原生无法解析
|
||||
// (uni-app PostCSS 只在静态 SCSS 中把 rpx 编译成 px,JS 运行时
|
||||
// setProperty('--xxx','20rpx') 写入后 var() 解析失败)
|
||||
// 这里把 token 值里的 rpx 串转成 px,其它值原样保留。
|
||||
// 仅 #ifdef H5 生效;小程序原生支持 rpx,不需要转换。
|
||||
const rpxToPx = (() => {
|
||||
let pxPerRpx = 0;
|
||||
try {
|
||||
if (typeof window !== 'undefined' && window.innerWidth) {
|
||||
pxPerRpx = window.innerWidth / 750;
|
||||
}
|
||||
} catch (e) { /* 非 H5 环境,保持原值 */ }
|
||||
return (v) => {
|
||||
if (pxPerRpx <= 0) return v;
|
||||
if (typeof v !== 'string') return v;
|
||||
if (v.indexOf('rpx') === -1) return v;
|
||||
return v.replace(/(-?\d+(?:\.\d+)?)rpx\b/gi, (m, n) => {
|
||||
return (parseFloat(n) * pxPerRpx) + 'px';
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
const cacheKey = (typeof theme === 'object' ? JSON.stringify(theme) : String(theme))
|
||||
+ '|' + (this.state.tabBarHeight || '')
|
||||
+ '|' + (typeof window !== 'undefined' ? (window.innerWidth || 0) : 0);
|
||||
if (_themeColorCache && _themeColorCacheKey === cacheKey) {
|
||||
if (this.state.themeColor !== _themeColorCache) {
|
||||
this.commit('setThemeColor', _themeColorCache);
|
||||
@@ -443,10 +467,10 @@ const store = new Vuex.Store({
|
||||
let data = theme[key];
|
||||
if (typeof (data) == "object") {
|
||||
Object.keys(data).forEach(k => {
|
||||
themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
|
||||
themeColor += '--' + k.replace(/_/g, "-") + ':' + rpxToPx(data[k]) + ';';
|
||||
});
|
||||
} else if (typeof (key) == "string" && key) {
|
||||
themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
|
||||
themeColor += '--' + key.replace(/_/g, "-") + ':' + rpxToPx(data) + ';';
|
||||
}
|
||||
});
|
||||
for (let i = 9; i >= 5; i--) {
|
||||
|
||||
Reference in New Issue
Block a user