<template>
    <view
        class="empty"
        :class="{ 'position-center': isPosition }"
        :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }"
    >
        <view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
            <view class="content_top">
                <!-- <view class="content_top btn-shaky"> -->
                <image v-if="pictrue" :src="pictrue" mode=""></image>
                <image v-else src="@/static/icon/empty.png" mode=""></image>
            </view>
            <view class="content_c">{{ content }}</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        content: {
            type: String,
            required: false,
            default: '暂时没有结果，下一秒也许就有惊喜',
        },
        bgcolor: {
            type: String,
            required: false,
            default: 'transparent',
        },
        pdTop: {
            type: String,
            required: false,
            default: '0',
        },
        mrTop: {
            type: String,
            required: false,
            default: '0',
        },
        pictrue: {
            type: String,
            required: false,
            default: '',
        },
        isPosition: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}
.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.empty {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // min-height: 100vh;
    // height: 400rpx;
    // position: relative;
    .ty_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // position: absolute;
        // left: 50%;
        // top: 0;
        // transform: translate(-50%, 0);

        .content_top {
            width: 450rpx;
            height: 322rpx;
        }
        .content_c {
            margin-top: 32rpx;
            color: #6a707c;
            font-size: 28rpx;
            width: 512rpx;
            height: 44rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #000000;
            text-align: center;
        }
    }
}
</style>
