94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<view class="empty">
|
|
<view class="empty-box">
|
|
<!-- loading 状态使用 uni-app 原生 loading -->
|
|
<view v-if="type === 'loading'" class="loading-wrap">
|
|
<view class="loading-spinner"></view>
|
|
</view>
|
|
<!-- 空状态使用内联 SVG -->
|
|
<view v-else class="empty-icon">
|
|
<view class="icon-box">📭</view>
|
|
</view>
|
|
<text class="empty-text">{{ content }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
type?: 'loading' | 'task' | 'learn' | 'network' | 'search';
|
|
content?: string;
|
|
}>(),
|
|
{
|
|
type: 'task',
|
|
content: '暂无数据',
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.empty {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.empty-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.loading-wrap {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.loading-spinner {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border: 4rpx solid #e5e5e5;
|
|
border-top-color: #0ea5e9;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
border-radius: 24rpx;
|
|
|
|
.icon-box {
|
|
font-size: 56rpx;
|
|
}
|
|
}
|
|
|
|
.empty-text {
|
|
margin-top: 16rpx;
|
|
font-family: $font-special;
|
|
font-size: 20rpx;
|
|
color: #94a3b8;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|