<template>
    <view class="coupon-section">
        <view class="coupon-tags">
            <view class="tag" v-for="item in couponList" v-text="item.name" :key="item.id"></view>
        </view>
        <view class="more"> <text>领券</text> <text class="iconfont icon-chakangengduo"></text> </view>
    </view>
</template>

<script>
export default {
    name: 'goods-coupon-list',
    data() {
        return {
            couponList: [
                {
                    id: 1,
                    name: '满300减60'
                },
                {
                    id: 2,
                    name: '满300减60'
                },
                {
                    id: 3,
                    name: '满300减60'
                },
                {
                    id: 4,
                    name: '满300减60'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-section {
    @extend .cm-flex-between;
    padding: 0 24rpx;
    background-color: #fff;
    .coupon-tags {
        width: 80%;
        .tag {
            display: inline-block;
            height: 30rpx;
            padding: 0 8rpx;
            margin-right: 8rpx;
            background: #fff3f7;
            border: 1rpx solid #ff457b;
            border-radius: 4rpx;
            color: #ff457b;
            font-size: 22rpx;

            &::before {
                content: '券 |';
                margin: 0 6rpx;
            }

            &:first-child {
                margin-left: 0;
            }
        }
    }
    .more {
        line-height: 40rpx;
        text {
            font-size: 24rpx;
            color: #ff457b;
        }
    }
}
</style>
