caimei-applets-store/pages/views/goods/components/goods-coupon-list/goods-coupon-list.vue

<template>
    <view class="coupon-section">
        <view class="coupon-tags">
            <template v-for="(item, index) in couponList">
                <view class="tag" v-if="index < 2" :key="item.couponId">
                    <view class="coupon-label" v-text="item.couponTitle"></view>
                </view>
            </template>
        </view>
        <view class="more" @click="$emit('click')">
            <text>领券</text>
            <text class="iconfont icon-chakangengduo"></text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'goods-coupon-list',
    props: {
        couponList: {
            type: [Object, Array],
            default: null
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-section {
    @extend .cm-flex-between;
    padding: 0 24rpx;
    background-color: #fff;
    .coupon-tags {
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        .tag {
            display: inline-block;
            height: 30rpx;
            padding: 0 8rpx;
            margin-right: 8rpx;
            background: #fff3f7;
            border: 1rpx solid #ff457b;
            border-radius: 4rpx;
            vertical-align: middle;

            .coupon-label {
                font-size: 22rpx;
                max-width: 230rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #ff457b;

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

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