mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改加载样式

Browse Source
This commit is contained in:
MTrun 2022-02-16 15:54:23 +08:00
parent b32e06e03b
commit c968853092
4 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/assets/images/tips/loadingSvg.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="84" cy="50" r="10" fill="#d4ecc9">
<animate attributeName="r" repeatCount="indefinite" dur="0.25s" calcMode="spline" keyTimes="0;1" values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="fill" repeatCount="indefinite" dur="1s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#d4ecc9;#82d5ab;#51d6a9;#95d8b4;#d4ecc9" begin="0s"></animate>
</circle><circle cx="16" cy="50" r="10" fill="#d4ecc9">
<animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
</circle><circle cx="50" cy="50" r="10" fill="#95d8b4">
<animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"></animate>
</circle><circle cx="84" cy="50" r="10" fill="#51d6a9">
<animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s"></animate>
</circle><circle cx="16" cy="50" r="10" fill="#82d5ab">
<animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s"></animate>
</circle>
<!-- [ldio] generated by https://loading.io/ --></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
src/components/LoadingComponent/Skeleton.vue
View File

@ -1,5 +1,6 @@
<template>
<div>
<!-- 骨架图 -->
<Skeleton :repeat="3" :show="true"/>
</div>
</template>

15
src/components/LoadingComponent/index.vue
View File

@ -1,5 +1,14 @@
<template>
<div>
<n-spin size="medium" />
<!-- svg加载图 -->
<div class="go-loading-svg go-flex-center">
<img src="~@/assets/images/tips/loadingSvg.svg" alt="" />
</div>
</template>
</template>
<style lang="scss" scoped>
@include go('loading-svg') {
width: 100%;
img {
height: 50px;
}
}
</style>

10
src/views/chart/ContentDetails/index.vue
View File

@ -76,9 +76,9 @@
</template>
<script setup lang="ts">
import { shallowRef, ref, toRefs, watch, computed, reactive } from 'vue'
import { ref, toRefs, watch, computed } from 'vue'
import { icon } from '@/plugins'
import { loadAsyncComponent, loadSkeletonAsyncComponent } from '@/utils'
import { loadAsyncComponent } from '@/utils'
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@ -91,9 +91,9 @@ const chartEditStoreStore = useChartEditStoreStore()
const { ConstructIcon, FlashIcon, DesktopOutlineIcon } = icon.ionicons5
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
const CanvasPage = loadSkeletonAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
const ChartSetting = loadSkeletonAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
const ChartBehind = loadSkeletonAsyncComponent(() => import('./components/ChartBehind/index.vue'))
const CanvasPage = loadAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
const ChartBehind = loadAsyncComponent(() => import('./components/ChartBehind/index.vue'))
const collapsed = ref<boolean>(getDetails.value)