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

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,36 +148,29 @@
</script>
<style lang="scss" scoped>
.scroll-box {
.coupon-box {
display: flex;
justify-content: space-between;
.card-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
font-size: 24rpx;
line-height: 50rpx;
.card-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
&.vertical {
width: 50rpx;
height: 140rpx;
margin: auto 20rpx auto 0;
.btn-text {
font-size: 24rpx;
line-height: 50rpx;
&.vertical {
width: 50rpx;
height: 140rpx;
margin: auto 20rpx auto 0;
.btn-text {
font-size: 24rpx;
text-align: center;
writing-mode: vertical-lr;
}
}
}
.coupon-item {
&:nth-of-type(1) {
margin-left: 0 !important;
}
text-align: center;
writing-mode: vertical-lr;
}
}
}
.coupon-item {
&:nth-of-type(1) {
margin-left: 0 !important;
}
}
</style>