caimei-applets-store/pages/views/share-buy/components/share-buy-group-message/share-buy-group-message.vue

<template>
    <view class="group-message">
        <view class="message"> <slot name="head"></slot> </view>
        <view class="countdown">
            <!-- 时 -->
            <text class="hh" v-text="countDownTime.ddhh"></text>:
            <!-- 分 -->
            <text class="mm" v-text="countDownTime.mm">48</text>:
            <!-- 秒 -->
            <text class="ss" v-text="countDownTime.ss">33</text> <text class="end-tip" v-if="hasEndTip">后结束</text>
        </view>
        <view class="control"> <slot name="foot"></slot> </view>
    </view>
</template>

<script>
export default {
    name: 'share-buy-group-message',
    props: {
        countDownTime: {
            type: Object,
            default: () => ({
                ddhh: '72',
                dd: '03',
                hh: '23',
                mm: '59',
                ss: '59'
            })
        },
        hasEndTip:{
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="scss" scoped>
.group-message {
    @extend .cm-flex-center;
    flex-direction: column;
    padding: 40rpx 0;
    background-color: #fff;

    .countdown {
        margin: 32rpx 0;
        font-size: 26rpx;
        color: #ff457b;

        .hh,
        .mm,
        .ss {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            text-align: center;
            color: #ffffff;
            background-color: #ff457b;
        }

        text {
            display: inline-block;
            margin: 0 8rpx;
            line-height: 48rpx;
        }

        .end-tip {
            font-size: 30rpx;
            color: #333;
        }
    }
}
</style>