52 lines
938 B
Vue
52 lines
938 B
Vue
<template>
|
|
<view class="empty-container">
|
|
<view class="empty-icon">{{ icon }}</view>
|
|
<text class="empty-text">{{ text }}</text>
|
|
<text class="empty-desc" v-if="description">{{ description }}</text>
|
|
<slot name="action"></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
icon?: string
|
|
text?: string
|
|
description?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
icon: '📦',
|
|
text: '暂无数据',
|
|
description: ''
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.empty-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 60rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 24rpx;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: $uni-text-color-grey;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 24rpx;
|
|
color: $uni-text-color-placeholder;
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
</style>
|