<template>
    <view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
        <view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
            <view class="content_top btn-shaky">
                <image v-if="pictrue" :src="pictrue" mode="" class="empty-image"></image>
                <image v-else src="@/static/icon/empty.png" mode="" class="empty-image"></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: '80',
        },
        mrTop: {
            type: String,
            required: false,
            default: '20',
        },
        pictrue: {
            type: String,
            required: false,
            default: '',
        },
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
// 使用类选择器代替标签选择器
.empty-image {
    width: 100%;
    height: 100%;
}
.empty {
    width: 100%;
    min-height: 100vh;
    position: relative;
    .ty_content {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .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>
