75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view class="skeleton-main">
|
||
|
|
<template v-if="props.show">
|
||
|
|
<view class="fade-in">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<view class="skeleton sk-w-100 sk-h-35"></view>
|
||
|
|
<view class="skeleton-info flex-column">
|
||
|
|
<view class="skeleton sk-w-70 sk-h-4"></view>
|
||
|
|
<view class="flex-row u-m-t-32">
|
||
|
|
<view class="skeleton sk-w-8 sk-h-2 u-m-r-12"></view>
|
||
|
|
<view class="skeleton sk-w-8 sk-h-2 u-m-r-12"></view>
|
||
|
|
<view class="skeleton sk-w-8 sk-h-2 u-m-r-12"></view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-row flex-between u-m-t-32">
|
||
|
|
<view class="skeleton sk-w-30 sk-h-2 "></view>
|
||
|
|
<view class="skeleton sk-w-8 sk-h-2 "></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="skeleton-info">
|
||
|
|
<view class="skeleton sk-w-80 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-40 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-60 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-20 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-90 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-40 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-60 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-60 sk-h-2 u-m-b-12"></view>
|
||
|
|
<view class="skeleton sk-w-60 sk-h-2 "></view>
|
||
|
|
</view>
|
||
|
|
<view class="skeleton-footer">
|
||
|
|
<view class="skeleton sk-w-10 sk-h-5 u-m-r-32"></view>
|
||
|
|
<view class="skeleton sk-w-10 sk-h-5 u-m-r-32"></view>
|
||
|
|
<view class="skeleton sk-w-70 sk-h-6 u-m-l-auto" style="border-radius: 50rpx;"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
const props = defineProps({
|
||
|
|
show: Boolean
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.skeleton-main {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: #f7f7f7;
|
||
|
|
|
||
|
|
.skeleton-info {
|
||
|
|
width: 100vw;
|
||
|
|
min-height: 30vw;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 16rpx;
|
||
|
|
padding: 32rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.skeleton-footer {
|
||
|
|
width: 100vw;
|
||
|
|
height: 98rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 0 32rpx;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|