FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
ameliabooking
/
v3
/
src
/
views
/
public
/
Parts
/
Skeletons
Edit File: CustomerInfoSkeleton.vue
<template> <el-skeleton v-show="loading" animated class="am-skeleton-ci"> <template #template> <div v-for="(item) in new Array(10)" :key="item" class="am-skeleton-ci__inner" > <el-skeleton-item class="am-skeleton-ci__label" variant="text" /> <el-skeleton-item class="am-skeleton-ci__input" variant="text" /> </div> </template> </el-skeleton> </template> <script setup> // * Import from Vue import { computed } from "vue"; // * Import from Store import { useStore } from "vuex"; const store = useStore() let bookableType = computed(() => store.getters['bookableType/getType']) let loading = computed(() => { if (bookableType.value === 'event') { return store.getters['getLoading'] } return store.getters['booking/getLoading'] }) </script> <style lang="scss"> .amelia-v2-booking #amelia-container { .am-skeleton-ci { &__inner { display: inline-flex; flex-direction: column; width: calc(50% - 8px); margin-bottom: 24px; &:nth-child(odd) { margin-right: 8px; } &:nth-child(even) { margin-left: 8px; } } &__label { height: 20px; width: 65%; margin-bottom: 6px; } &__input { height: 40px; width: 100%; } } } </style>
Save
Back