mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add loading indicator
This commit is contained in:
parent
2982028501
commit
ab0981ff9c
@ -1,11 +1,36 @@
|
||||
<template>
|
||||
<div class="bangumi-compact-rank-list">compact rank list</div>
|
||||
<div class="fresh-home-compact-rank-list" :class="{ loading, loaded }">
|
||||
<div v-if="!loaded" class="fresh-home-compact-rank-list-loading-container">
|
||||
<VLoading v-if="loading" />
|
||||
<div
|
||||
v-if="(error || items.length === 0) && !loading"
|
||||
class="fresh-home-compact-rank-list-empty"
|
||||
>
|
||||
<VEmpty />
|
||||
<VButton class="fresh-home-compact-rank-list-refresh-button" round @click="reload">
|
||||
<VIcon icon="mdi-refresh" />
|
||||
刷新
|
||||
</VButton>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="loaded"> content </template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { requestMixin } from '../../../../mixin'
|
||||
import { VIcon, VLoading, VEmpty, VButton } from '@/ui'
|
||||
import { cssVariableMixin, requestMixin } from '../../../../mixin'
|
||||
import { compactRankListCssVars } from './rank-list'
|
||||
|
||||
export default Vue.extend({
|
||||
mixins: [requestMixin()],
|
||||
components: {
|
||||
// DpiImage,
|
||||
// UpInfo,
|
||||
VIcon,
|
||||
VLoading,
|
||||
VEmpty,
|
||||
VButton,
|
||||
},
|
||||
mixins: [requestMixin(), cssVariableMixin(compactRankListCssVars)],
|
||||
props: {
|
||||
parseJson: {
|
||||
type: Function,
|
||||
@ -16,8 +41,16 @@ export default Vue.extend({
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import 'common';
|
||||
@import './rank-list';
|
||||
|
||||
.bangumi-compact-rank-list {
|
||||
.fresh-home-compact-rank-list {
|
||||
@include v-stretch();
|
||||
width: var(--panel-width);
|
||||
height: var(--panel-height);
|
||||
min-height: var(--panel-height);
|
||||
padding: var(--padding);
|
||||
margin: calc(0px - var(--padding));
|
||||
|
||||
@include rank-list-common();
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -163,12 +163,13 @@ export default Vue.extend({
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import 'common';
|
||||
@import './rank-list';
|
||||
|
||||
.fresh-home-rank-list {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
width: 400px;
|
||||
overflow: hidden;
|
||||
width: var(--panel-width);
|
||||
min-height: var(--panel-height);
|
||||
height: var(--panel-height);
|
||||
padding: var(--padding);
|
||||
@ -374,34 +375,6 @@ export default Vue.extend({
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
}
|
||||
& &-loading-container {
|
||||
@include v-center();
|
||||
justify-content: center;
|
||||
padding: var(--padding);
|
||||
border-radius: var(--home-card-radius);
|
||||
border: 2px dashed #8884;
|
||||
height: 100%;
|
||||
}
|
||||
& &-empty {
|
||||
@include v-center(12px);
|
||||
justify-content: center;
|
||||
.be-button {
|
||||
padding: 4px 10px 4px 6px !important;
|
||||
&:hover .be-icon {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
.be-icon {
|
||||
margin-right: 6px;
|
||||
transition: 0.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
@include no-scrollbar();
|
||||
.animation {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
@include rank-list-common();
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
@mixin rank-list-common {
|
||||
& &-loading-container {
|
||||
@include v-center();
|
||||
justify-content: center;
|
||||
padding: var(--padding);
|
||||
border-radius: var(--home-card-radius);
|
||||
border: 2px dashed #8884;
|
||||
height: 100%;
|
||||
}
|
||||
& &-empty {
|
||||
@include v-center(12px);
|
||||
justify-content: center;
|
||||
.be-button {
|
||||
padding: 4px 10px 4px 6px !important;
|
||||
&:hover .be-icon {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
.be-icon {
|
||||
margin-right: 6px;
|
||||
transition: 0.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
@include no-scrollbar();
|
||||
.animation {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,7 @@ export interface RankListCard {
|
||||
dynamic?: string
|
||||
}
|
||||
export const rankListCssVars = {
|
||||
panelWidth: 400,
|
||||
panelHeight: 608,
|
||||
padding: 12,
|
||||
rankItemHeight: 110,
|
||||
@ -23,3 +24,8 @@ export const rankListCssVars = {
|
||||
thirdCoverHeight: 90,
|
||||
thirdCoverWidth: 139,
|
||||
}
|
||||
export const compactRankListCssVars = {
|
||||
panelWidth: 400,
|
||||
panelHeight: 608,
|
||||
padding: 12,
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user