caimei-applets-store/pages/views/coupon/components/coupon-desc-entry/coupon-desc-entry.vue

<template>
    <view class="coupon-desc-entry">
        <view
            class="entry-item"
            :class="'entry' + item.id"
            v-for="item in entryList"
            :key="item.id"
            @click="$emit('click', item)"
        >
            <view class="text" v-text="item.name"></view>
            <view class="control">点击查看</view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'coupon-desc-entry',
    props: {
        couponTipStr: {
            type: String,
            default: ''
        }
    },
    computed: {
        entryList() {
            const result = [
                {
                    id: 1,
                    name: '好友邀请券福利'
                },
                {
                    id: 2,
                    name: '好友消费券福利'
                },
                {
                    id: 3,
                    name: '分享券福利'
                }
            ]
            return result.filter(item => this.couponTipStr.indexOf(item.id.toString()) > -1)
        }
    }
}
</script>

<style lang="scss" scoped>
$bg-entry-1: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-entry-01.png');
$bg-entry-2: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-entry-02.png');
$bg-entry-3: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-entry-03.png');

$width: 702rpx;
$height: 136rpx;

.coupon-desc-entry {
    padding: 0 24rpx;
    .entry-item {
        @extend .cm-flex-center;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        padding-left: 32rpx;
        width: $width;
        height: $height;
        margin: 24rpx 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: $width $height;

        &.entry1 {
            background-image: $bg-entry-1;
            .text {
                color: #ee6531;
            }
        }

        &.entry2 {
            background-image: $bg-entry-2;
            .text {
                color: #4197ef;
            }
        }

        &.entry3 {
            background-image: $bg-entry-3;
            .text {
                color: #ff445e;
            }
        }

        .text {
            margin-bottom: 10rpx;
            font-size: 46rpx;
            font-weight: bold;
        }

        .control {
            @extend .cm-flex-center;
            width: 160rpx;
            height: 40rpx;
            background: linear-gradient(90deg, #ff903b 0%, #fc2744 100%);
            border-radius: 20rpx;
            font-size: 24rpx;
            color: #fff;

            &::after {
                content: '';
                display: block;
                margin-left: 12rpx;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10rpx 0 10rpx 16rpx;
                border-color: transparent transparent transparent #fff;
            }
        }
    }
}
</style>