caimei-applets-hehe/components/cm-module/cm-empty/cm-empty.vue

<template>
    <view class="cm-empty" :style="[offsetValue]">
        <image :src="image" mode="widthFix"></image> <text>{{ message }}</text>
    </view>
</template>

<script>
export default {
    name: 'cm-empty',
    props: {
        message: {
            type: String,
            default: ''
        },
        image: {
            type: String,
            default: ''
        },
        offset: {
            type: [String, Number],
            default: 0
        }
    },
    computed: {
        offsetValue() {
            if (typeof this.offset === 'string') {
                return {
                    transform: `translateY(${this.offset})`
                }
            }else{
                return {
                    transform: `translateY(${this.offset}%)`
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    image {
        width: 50%;
    }
    text {
        font-size: 26rpx;
        color: #999999;
    }
}
</style>