app-govern/components/Cn-empty/Cn-empty.vue

<template>
    <view class="empty" :style="{ paddingTop: paddingTop + 'rpx' }">
        <image :src="img" mode="aspectFill" class="empty-img"></image>
        <view class="empty-text">{{ msg }}</view>
    </view>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            default: '暂无数据',
        },
        img: {
            type: String,
            default: '/static/empty.png',
        },
        paddingTop: {
            type: Number,
            default: 70,
        },
    },
    data() {
        return {}
    },
}
</script>

<style>
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, 0);
}

.empty-text {
    margin-top: 30rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    line-height: 32rpx;
}

.empty-img {
    width: 244rpx;
    height: 320rpx;
}
</style>