63 lines
4.0 KiB
Vue
63 lines
4.0 KiB
Vue
<template>
|
|
<div ref="skeletonRatio" class="h-fit">
|
|
<content-loader :width="skeletonSize.width" class="bg-white" height="100vh">
|
|
<rect :width="skeletonSize.width" height="5" rx="3" ry="3" x="0" y="0"/>
|
|
<rect :width="skeletonSize.width" height="5" rx="3" ry="3" x="0" y="84"/>
|
|
<rect :width="5" height="85" rx="3" ry="3" x="0" y="0"/>
|
|
<rect :width="5" :x="skeletonSize.width-5" height="85" rx="3" ry="3" y="0"/>
|
|
<rect :width="2" :x="skeletonSize.width/2" height="60" rx="3" ry="3" y="15"/>
|
|
<rect :width="skeletonSize.width/2-20" :x="10" height="20" rx="10" ry="10" y="15"/>
|
|
<rect :width="skeletonSize.width/2-20" :x="skeletonSize.width/2 + 10" height="20" rx="10" ry="10" y="15"/>
|
|
<rect :width="skeletonSize.width/2-40" :x="20" height="10" rx="5" ry="5" y="40"/>
|
|
<rect :width="skeletonSize.width/2-40" :x="skeletonSize.width/2 + 20" height="10" rx="5" ry="5" y="40"/>
|
|
<rect :width="skeletonSize.width/2-30" :x="15" height="18" rx="10" ry="10" y="60"/>
|
|
<rect :width="skeletonSize.width/2-30" :x="skeletonSize.width/2 + 15" height="18" rx="10" ry="10" y="60"/>
|
|
<circle :cx="skeletonSize.width/4-skeletonSize.width/8" cy="145" r="20"/>
|
|
<circle :cx="skeletonSize.width/4+skeletonSize.width/8" cy="145" r="20"/>
|
|
<circle :cx="skeletonSize.width/2+ skeletonSize.width/8" cy="145" r="20"/>
|
|
<circle :cx="skeletonSize.width - skeletonSize.width/8" cy="145" r="20"/>
|
|
<rect :width="50" :x="skeletonSize.width/4-skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
|
<rect :width="50" :x="skeletonSize.width/4+skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
|
<rect :width="50" :x="skeletonSize.width/2+ skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
|
<rect :width="50" :x="skeletonSize.width - skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
|
|
<rect :width="skeletonSize.width - 45" :x="45" height="20" rx="3" ry="3" y="230"/>
|
|
<rect :width="skeletonSize.width" :x="0" height="80" rx="3" ry="3" y="260"/>
|
|
<rect :width="skeletonSize.width/2 - 5" :x="0" height="50" rx="3" ry="3" y="360"/>
|
|
<rect :width="skeletonSize.width/2 - 5" :x="skeletonSize.width/2 + 5" height="50" rx="3" ry="3" y="360"/>
|
|
<rect :width="skeletonSize.width" :x="0" height="170" rx="3" ry="3" y="440"/>
|
|
<!-- <rect height="20" rx="3" ry="3" width="100" x="0" y="0"/>
|
|
<rect :width="skeletonSize.width/4 + 40" :x="skeletonSize.width/2" height="20" rx="3" ry="3" y="0"/>
|
|
<rect height="20" rx="3" ry="3" width="80" x="0" y="30"/>
|
|
<rect :x="skeletonSize.width - 40" height="40" rx="12" ry="12" width="40" y="0"/>
|
|
<rect :width="skeletonSize.width" :x="0" :y="skeletonSize.height-5" height="2" rx="12" ry="12"/>-->
|
|
<!-- <circle :cx="skeletonSize.width - 20" :cy="skeletonSize.height/2 - 10" r="20" />-->
|
|
<!-- <rect :x="10" y="20" rx="3" ry="3" :width="skeletonSize.width - 20" height="150"/>
|
|
<circle :cx="skeletonSize.width/2" cy="170" r="15" />
|
|
<rect :x="skeletonSize.width/2 - skeletonSize.width/3 -10" y="190" rx="3" ry="3" :width="skeletonSize.width/3 + skeletonSize.width/3 + 20" height="20"/>
|
|
<rect :x="skeletonSize.width/2 - skeletonSize.width/3 +20" y="220" rx="3" ry="3" :width="skeletonSize.width/3 + skeletonSize.width/3 - 40" height="20"/>-->
|
|
<!-- <rect x="90" y="0" rx="3" ry="3" width="80" height="20" />
|
|
<rect x="180" y="0" rx="3" ry="3" width="80" height="20" />
|
|
<rect x="270" y="0" rx="3" ry="3" width="80" height="20" ♥/>-->
|
|
</content-loader>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
import {reactive, ref, watch} from "vue";
|
|
import {useElementSize} from "@vueuse/core";
|
|
import {ContentLoader} from "vue-content-loader";
|
|
|
|
const skeletonRatio = ref(null)
|
|
const skeletonSize = reactive(
|
|
useElementSize(skeletonRatio, {width: 0, height: 0}, {box: 'border-box'})
|
|
)
|
|
/*watch(skeletonSize, () => {
|
|
console.log(skeletonSize)
|
|
})*/
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |