init

components/customer-skeleton/customer-skeleton.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="skeleton animated">
+		<div class="skeleton-row" v-for="(item, index) in rowList" :style="item.style || {}" :key="index">
+			<div class="skeleton-row-item" v-for="(colItem, colIndex) in item.colItems"
+				:class="[colItem.childRowItems ? 'no-height' : '']" :key="colIndex" :style="colItem.style">
+				<template v-if="colItem.childRowItems">
+					<div class="skeleton-row-item" v-for="(childRowItem, childRowIndex) in colItem.childRowItems"
+						:key="childRowIndex" :style="childRowItem.style || {}"></div>
+				</template>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'Skeleton',
+		props: {
+			rowList: {
+				type: Array,
+				default: () => []
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.skeleton {
+		width: 100%;
+		--color: #F6F6F6;
+
+		&.animated {
+			animation: blink 1.2s ease-in-out infinite;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+	}
+
+	.skeleton-row {
+		display: flex;
+		width: 100%;
+		align-content: space-between;
+	}
+
+	.skeleton-row-item {
+		height: 26px;
+		border-radius: 12rpx;
+		display: inline-block;
+
+		&:not(.no-height) {
+			background: var(--color);
+		}
+
+		&.no-height {
+			height: auto;
+		}
+	}
+
+	@keyframes blink {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0.6;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+</style>