caimei-applets-store/pages/views/coupon/coupon-description.vue

<template>
    <view class="coupon-description" :class="'entry-' + entryType">
        <view class="title" v-text="description.title"></view>
        <view class="description">
            <view class="tip" v-text="description.tip"></view>
            <view class="content" v-text="description.content"></view>
        </view>
    </view>
</template>

<script>
import description from './config/description.js'
export default {
    data() {
        return {
            entryType: 1,
            descriptionList: description
        }
    },
    computed: {
        description() {
            return this.descriptionList[this.entryType - 1]
        }
    },
    onLoad(options) {
        this.entryType = options.entryType
    }
}
</script>

<style lang="scss" scoped>
$bg-coupon-desc-01: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-01.png');
$bg-coupon-desc-02: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-02.png');
$bg-coupon-desc-03: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-03.png');
.coupon-description {
    background-size: 750rpx 497rpx;

    .title {
        font-size: 60rpx;
        font-weight: bold;
        padding-top: 68rpx;
        text-align: center;
        @include ellipsis(1);
    }

    .description {
        @extend .cm-flex-center;
        flex-direction: column;
        justify-content: flex-start;
        width: 702rpx;

        margin: 0 24rpx;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 702rpx 610rpx;

        .tip {
            width: 360rpx;
            height: 64rpx;
            font-size: 34rpx;
            font-weight: bold;
            line-height: 60rpx;

            text-align: center;
            @include ellipsis(1);
        }

        .content {
            width: 622rpx;
            margin-top: 48rpx;
            box-sizing: border-box;
            padding: 24rpx;
            background: #fef8f3;
            border-radius: 24rpx;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 64rpx;
            text-align: justify;
            text-indent: 2em;
        }
    }

    &.entry-1 {
        background: linear-gradient(180deg, #f9ddc2 0%, rgba(255, 255, 255, 0) 100%) no-repeat;

        .title {
            color: #ee6531;
        }

        .description {
            background-image: $bg-coupon-desc-01;
            height: 610rpx;

            .tip {
                margin-top: 126rpx;
                color: #765334;
            }
            .content {
                height: 333rpx;
                color: #ee6531;
            }
        }
    }
    &.entry-2 {
        background: linear-gradient(180deg, #d9f2fd 0%, rgba(255, 255, 255, 0) 100%) no-repeat;

        .title {
            color: #4197ef;
        }

        .description {
            background-image: $bg-coupon-desc-02;
            height: 628rpx;

            .tip {
                margin-top: 114rpx;
                color: #fff;
            }

            .content {
                height: 376rpx;
                color: #4197ef;
            }
        }
    }
    &.entry-3 {
        background: linear-gradient(180deg, #ffd1d1 0%, rgba(255, 255, 255, 0) 100%) no-repeat;

        .title {
            color: #FF445E;
        }

        .description {
            height: 611rpx;
            background-image: $bg-coupon-desc-03;
            
            .tip {
                margin-top: 126rpx;
                color: #765334;
            }

            .content {
                height: 333rpx;
                color: #fd314d;
            }
        }
    }
}
</style>