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

293
components-diy/diy-category-item.vue
View File

@@ -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>