45 lines
No EOL
821 B
Vue
45 lines
No EOL
821 B
Vue
<template>
|
|
<el-skeleton class="sk" animated>
|
|
<template #template>
|
|
<div class="sk__block" v-for="idx in 3" :key="idx">
|
|
<el-skeleton-item variant="p" class="sk__title" />
|
|
<el-skeleton-item variant="p" class="sk__text" />
|
|
<el-skeleton-item variant="p" class="sk__text" />
|
|
</div>
|
|
</template>
|
|
</el-skeleton>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sk {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
&__block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
&__title {
|
|
width: 200px;
|
|
height: 30px;
|
|
}
|
|
|
|
&__text {
|
|
width: 100%;
|
|
height: 21px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-skeleton__item) {
|
|
--el-skeleton-color: #c9ccd0 !important;
|
|
--el-skeleton-to-color: #c3c3c7 !important;
|
|
}
|
|
</style> |