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>
|
<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>
|
</template>
|
||||||
<script lang="ts">
|
<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({
|
export default Vue.extend({
|
||||||
mixins: [requestMixin()],
|
components: {
|
||||||
|
// DpiImage,
|
||||||
|
// UpInfo,
|
||||||
|
VIcon,
|
||||||
|
VLoading,
|
||||||
|
VEmpty,
|
||||||
|
VButton,
|
||||||
|
},
|
||||||
|
mixins: [requestMixin(), cssVariableMixin(compactRankListCssVars)],
|
||||||
props: {
|
props: {
|
||||||
parseJson: {
|
parseJson: {
|
||||||
type: Function,
|
type: Function,
|
||||||
@ -16,8 +41,16 @@ export default Vue.extend({
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'common';
|
@import 'common';
|
||||||
|
@import './rank-list';
|
||||||
|
|
||||||
.bangumi-compact-rank-list {
|
.fresh-home-compact-rank-list {
|
||||||
@include v-stretch();
|
@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>
|
</style>
|
||||||
|
|||||||
@ -163,12 +163,13 @@ export default Vue.extend({
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'common';
|
@import 'common';
|
||||||
|
@import './rank-list';
|
||||||
|
|
||||||
.fresh-home-rank-list {
|
.fresh-home-rank-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 400px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: var(--panel-width);
|
||||||
min-height: var(--panel-height);
|
min-height: var(--panel-height);
|
||||||
height: var(--panel-height);
|
height: var(--panel-height);
|
||||||
padding: var(--padding);
|
padding: var(--padding);
|
||||||
@ -374,34 +375,6 @@ export default Vue.extend({
|
|||||||
color: var(--foreground-color);
|
color: var(--foreground-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& &-loading-container {
|
@include rank-list-common();
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</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
|
dynamic?: string
|
||||||
}
|
}
|
||||||
export const rankListCssVars = {
|
export const rankListCssVars = {
|
||||||
|
panelWidth: 400,
|
||||||
panelHeight: 608,
|
panelHeight: 608,
|
||||||
padding: 12,
|
padding: 12,
|
||||||
rankItemHeight: 110,
|
rankItemHeight: 110,
|
||||||
@ -23,3 +24,8 @@ export const rankListCssVars = {
|
|||||||
thirdCoverHeight: 90,
|
thirdCoverHeight: 90,
|
||||||
thirdCoverWidth: 139,
|
thirdCoverWidth: 139,
|
||||||
}
|
}
|
||||||
|
export const compactRankListCssVars = {
|
||||||
|
panelWidth: 400,
|
||||||
|
panelHeight: 608,
|
||||||
|
padding: 12,
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user