You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.2 KiB
73 lines
1.2 KiB
<template>
|
|
<view class="dashboard-loading">
|
|
<view class="loading-content">
|
|
<view class="loading-icon">
|
|
<uni-icons type="spinner-cycle" size="32" color="#29d3b4" class="rotating"></uni-icons>
|
|
</view>
|
|
<text class="loading-text">{{ text }}</text>
|
|
<text v-if="subText" class="loading-subtext">{{ subText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DashboardLoading',
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: '数据加载中...'
|
|
},
|
|
subText: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
background-color: #181A20;
|
|
}
|
|
|
|
.loading-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-icon {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.rotating {
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 16px;
|
|
color: #29d3b4;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.loading-subtext {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|