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

<template>
    <view class="coupon-section">
        <view class="coupon-tags">
            <view class="tag" v-for="item in couponList" v-text="item.couponTitle" :key="item.couponId"></view>
        </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%;
        .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;
            max-width: 250rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

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

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