【功能优化】装修页面优惠券,如果每行两个优惠券,则让优惠券居中,而不是分散在两边

pull/80/head
卢越 2024-08-15 14:51:15 +08:00
parent c8a95ef3ec
commit ea8ea9e744
1 changed files with 31 additions and 28 deletions

View File

@ -1,7 +1,7 @@
<!-- 装修营销组件优惠券 -->
<template>
<scroll-view class="scroll-box" scroll-x scroll-anchoring :style="[bgStyle, { marginLeft: `${data.space}px` }]">
<view class="coupon-box ss-flex">
<view class="coupon-box ss-flex" :style="columns === 2 ? couponBoxStyleTwo : couponBoxStyleNormal">
<view class="coupon-item" :style="[couponBg, { marginLeft: `${data.space}px` }]"
v-for="(item, index) in couponList" :key="index">
<su-coupon :size="SIZE_LIST[columns - 1]" :textColor="data.textColor" background="" :couponId="item.id"
@ -63,6 +63,16 @@
background: button.bgColor,
color: button.color,
};
//
const couponBoxStyleNormal = {
'display': 'flex',
'justify-content': 'space-between'
};
//
const couponBoxStyleTwo = {
'display': 'flex',
'justify-content': 'space-around'
};
//
const bgStyle = computed(() => {
// props.styles
@ -138,11 +148,6 @@
</script>
<style lang="scss" scoped>
.scroll-box {
.coupon-box {
display: flex;
justify-content: space-between;
.card-btn {
width: 140rpx;
height: 50rpx;
@ -168,6 +173,4 @@
margin-left: 0 !important;
}
}
}
}
</style>