更新动画
This commit is contained in:
parent
b9328987d0
commit
c826bd2538
|
@ -1,12 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="spin">
|
||||||
<div class="loader">
|
<div class="loader">
|
||||||
<div class="outer" />
|
<div class="outer" />
|
||||||
<div class="middle" />
|
<div class="middle" />
|
||||||
<div class="inner" />
|
<div class="inner" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.spin{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 20em;
|
||||||
|
height: 20em;
|
||||||
|
transform: scale(5);
|
||||||
|
}
|
||||||
.loader {
|
.loader {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,6 +26,7 @@ import recording from "@/components/animation/recording.vue"
|
||||||
import inputing from "@/components/animation/inputing.vue"
|
import inputing from "@/components/animation/inputing.vue"
|
||||||
import loding from "@/components/animation/loding.vue"
|
import loding from "@/components/animation/loding.vue"
|
||||||
import lodingCir from "@/components/animation/lodingCir.vue"
|
import lodingCir from "@/components/animation/lodingCir.vue"
|
||||||
|
import lodingSpin from "@/components/animation/lodingSpin.vue"
|
||||||
|
|
||||||
import IatRecorder from '@/utils/test.js'
|
import IatRecorder from '@/utils/test.js'
|
||||||
// import IatRecorder from '@/utils/larRcorder.js'
|
// import IatRecorder from '@/utils/larRcorder.js'
|
||||||
|
@ -613,7 +614,8 @@ window.addEventListener('test', (e) => {
|
||||||
<transition mode="out-in" name="fade">
|
<transition mode="out-in" name="fade">
|
||||||
<inputing v-if="nowStatus=='input'" key="input"></inputing>
|
<inputing v-if="nowStatus=='input'" key="input"></inputing>
|
||||||
<recording v-else-if="nowStatus=='record'" key="record"></recording>
|
<recording v-else-if="nowStatus=='record'" key="record"></recording>
|
||||||
<loding v-else-if="nowStatus=='loding'" key="loding"></loding>
|
<!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
|
||||||
|
<lodingSpin v-else-if="nowStatus=='loding'" key="loding"></lodingSpin>
|
||||||
<!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
|
<!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
|
||||||
</transition>
|
</transition>
|
||||||
</indexBG>
|
</indexBG>
|
||||||
|
|
Loading…
Reference in New Issue