更改字体

src/components/MyList.vue

@@ -3,6 +3,7 @@
 	const props = defineProps({
 		loading: { default: false, type: Boolean },
 		finish: { default: false, type: Boolean },
+		empty: { default: false, type: Boolean },
 		pel: { default: () => {}, type: Function }
 	})
 	const emit = defineEmits(['load'])
@@ -23,12 +24,13 @@
 	})
 </script>
 <template>
-	<div class="my-list" ref="el">
+	<div class="my-list" ref="el" :class="{ empty: !loading && empty }">
 		<slot></slot>
 		<div class="footer">
 			<p v-show="!loading" class="placeholder" ref="placeholder"></p>
-			<span class="loading" v-show="loading">Loading...</span>
-			<span class="nomore" v-show="finish">No more</span>
+			<span class="loading" v-if="loading">Loading...</span>
+			<span class="empty" v-else-if="empty">Nothing Here</span>
+			<span class="nomore" v-else-if="finish">No more</span>
 		</div>
 	</div>
 </template>
@@ -40,12 +42,28 @@
 		> .footer {
 			width: 100%;
 			font-size: 3rem;
-			color: #000;
+			color: #a1a1a1;
 			text-align: center;
 			margin: var(--my-list-footer-margin, 0);
 			> .placeholder {
 				height: 1px;
 			}
+			> .empty {
+				font-size: 4rem;
+			}
+		}
+		&.empty {
+			> .footer {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				height: 100%;
+				padding: 0;
+				margin: 0;
+				> .empty {
+					margin-bottom: 5rem;
+				}
+			}
 		}
 	}
 </style>