fix: 修复loading
This commit is contained in:
parent
e0141f1cf2
commit
c92aef2d25
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="spinner-inside" :style="{
|
||||||
|
width: size + 110 + 'px',
|
||||||
|
}">
|
||||||
|
<view :style="{ backgroundColor:color }" class="bounce1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="bounce2"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="bounce3"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'bounce',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside > view {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
|
||||||
|
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||||
|
/* Prevent first frame from flickering when animation starts */
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .bounce1 {
|
||||||
|
-webkit-animation-delay: -0.32s;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .bounce2 {
|
||||||
|
-webkit-animation-delay: -0.16s;
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bouncedelay {
|
||||||
|
0%, 80%, 100% { -webkit-transform: scale(0.0) }
|
||||||
|
40% { -webkit-transform: scale(1.0) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bouncedelay {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
-webkit-transform: scale(0.0);
|
||||||
|
} 40% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="spinner-inside" :style="{
|
||||||
|
width: size+20+'px',
|
||||||
|
height: size+20+'px'
|
||||||
|
}">
|
||||||
|
<view :style="{ backgroundColor:color }" class="double-bounce1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="double-bounce2"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'doubleBounce',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.double-bounce1, .double-bounce2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.6;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
-webkit-animation: bounce 2.0s infinite ease-in-out;
|
||||||
|
animation: bounce 2.0s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.double-bounce2 {
|
||||||
|
-webkit-animation-delay: -1.0s;
|
||||||
|
animation-delay: -1.0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bounce {
|
||||||
|
0%, 100% { -webkit-transform: scale(0.0) }
|
||||||
|
50% { -webkit-transform: scale(1.0) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
-webkit-transform: scale(0.0);
|
||||||
|
} 50% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="spinner-inside" :style="{
|
||||||
|
width: size+'px',
|
||||||
|
height: size+'px'
|
||||||
|
}">
|
||||||
|
<view :style="{ backgroundColor:color,width:size-10+'px',height:size-10+'px'}" class="cube1"></view>
|
||||||
|
<view :style="{ backgroundColor:color,width:size-10+'px',height:size-10+'px'}" class="cube2"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'doubleCube',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 50% auto;
|
||||||
|
position: relative;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cube1, .cube2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
-webkit-animation: cubemove 1.8s infinite ease-in-out;
|
||||||
|
animation: cubemove 1.8s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cube2 {
|
||||||
|
-webkit-animation-delay: -0.9s;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes cubemove {
|
||||||
|
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
|
||||||
|
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
|
||||||
|
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
|
||||||
|
100% { -webkit-transform: rotate(-360deg) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cubemove {
|
||||||
|
25% {
|
||||||
|
transform: translateX(42px) rotate(-90deg) scale(0.5);
|
||||||
|
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
|
||||||
|
} 50% {
|
||||||
|
transform: translateX(42px) translateY(42px) rotate(-179deg);
|
||||||
|
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
|
||||||
|
} 50.1% {
|
||||||
|
transform: translateX(42px) translateY(42px) rotate(-180deg);
|
||||||
|
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
|
||||||
|
} 75% {
|
||||||
|
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
||||||
|
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
||||||
|
} 100% {
|
||||||
|
transform: rotate(-360deg);
|
||||||
|
-webkit-transform: rotate(-360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="spinner-inside" :style="{
|
||||||
|
width: size+40+'px',
|
||||||
|
height: size+40+'px'
|
||||||
|
}">
|
||||||
|
<view :style="{ backgroundColor:color }" class="dot1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="dot2"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'doubleDot',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
-webkit-animation: rotate 2.0s infinite linear;
|
||||||
|
animation: rotate 2.0s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot1, .dot2 {
|
||||||
|
width: 60%;
|
||||||
|
height: 60%;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
background-color: #67CF22;
|
||||||
|
border-radius: 100%;
|
||||||
|
|
||||||
|
-webkit-animation: bounce 2.0s infinite ease-in-out;
|
||||||
|
animation: bounce 2.0s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot2 {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
-webkit-animation-delay: -1.0s;
|
||||||
|
animation-delay: -1.0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
|
||||||
|
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
|
||||||
|
|
||||||
|
@-webkit-keyframes bounce {
|
||||||
|
0%, 100% { -webkit-transform: scale(0.0) }
|
||||||
|
50% { -webkit-transform: scale(1.0) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
-webkit-transform: scale(0.0);
|
||||||
|
} 50% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="spinner-inside" :style="{
|
||||||
|
width: size+'px',
|
||||||
|
height: size+'px'
|
||||||
|
}">
|
||||||
|
<view class="spinner-inside-container container1">
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle2"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle3"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle4"></view>
|
||||||
|
</view>
|
||||||
|
<view class="spinner-inside-container container2">
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle2"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle3"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle4"></view>
|
||||||
|
</view>
|
||||||
|
<view class="spinner-inside-container container3">
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle2"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle3"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="circle4"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loop',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container1 > view, .container2 > view, .container3 > view {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
|
||||||
|
animation: bouncedelay 1.2s infinite ease-in-out;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .spinner-inside-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container2 {
|
||||||
|
-webkit-transform: rotateZ(45deg);
|
||||||
|
transform: rotateZ(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container3 {
|
||||||
|
-webkit-transform: rotateZ(90deg);
|
||||||
|
transform: rotateZ(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle1 { top: 0; left: 0; }
|
||||||
|
.circle2 { top: 0; right: 0; }
|
||||||
|
.circle3 { right: 0; bottom: 0; }
|
||||||
|
.circle4 { left: 0; bottom: 0; }
|
||||||
|
|
||||||
|
.container2 .circle1 {
|
||||||
|
-webkit-animation-delay: -1.1s;
|
||||||
|
animation-delay: -1.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container3 .circle1 {
|
||||||
|
-webkit-animation-delay: -1.0s;
|
||||||
|
animation-delay: -1.0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container1 .circle2 {
|
||||||
|
-webkit-animation-delay: -0.9s;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container2 .circle2 {
|
||||||
|
-webkit-animation-delay: -0.8s;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container3 .circle2 {
|
||||||
|
-webkit-animation-delay: -0.7s;
|
||||||
|
animation-delay: -0.7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container1 .circle3 {
|
||||||
|
-webkit-animation-delay: -0.6s;
|
||||||
|
animation-delay: -0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container2 .circle3 {
|
||||||
|
-webkit-animation-delay: -0.5s;
|
||||||
|
animation-delay: -0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container3 .circle3 {
|
||||||
|
-webkit-animation-delay: -0.4s;
|
||||||
|
animation-delay: -0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container1 .circle4 {
|
||||||
|
-webkit-animation-delay: -0.3s;
|
||||||
|
animation-delay: -0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container2 .circle4 {
|
||||||
|
-webkit-animation-delay: -0.2s;
|
||||||
|
animation-delay: -0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container3 .circle4 {
|
||||||
|
-webkit-animation-delay: -0.1s;
|
||||||
|
animation-delay: -0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bouncedelay {
|
||||||
|
0%, 80%, 100% { -webkit-transform: scale(0.0) }
|
||||||
|
40% { -webkit-transform: scale(1.0) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bouncedelay {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
-webkit-transform: scale(0.0);
|
||||||
|
} 40% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view :style="{
|
||||||
|
backgroundColor: color,
|
||||||
|
width: size+20+'px',
|
||||||
|
height: size+20+'px' }" class="spinner-inside"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'rotatePlane',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
|
||||||
|
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
|
||||||
|
animation: rotateplane 1.2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes rotateplane {
|
||||||
|
0% { -webkit-transform: perspective(120px) }
|
||||||
|
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
||||||
|
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotateplane {
|
||||||
|
0% {
|
||||||
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||||
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
|
||||||
|
} 50% {
|
||||||
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||||
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
||||||
|
} 100% {
|
||||||
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||||
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view :style="{
|
||||||
|
backgroundColor: color,
|
||||||
|
width: size+40+'px',
|
||||||
|
height: size+40+'px' }" class="spinner-inside"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'scaleOut',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
-webkit-animation: scaleout 1.0s infinite ease-in-out;
|
||||||
|
animation: scaleout 1.0s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes scaleout {
|
||||||
|
0% { -webkit-transform: scale(0.0) }
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scaleout {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
-webkit-transform: scale(0.0);
|
||||||
|
} 100% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
-webkit-transform: scale(1.0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="spinner-inside" :style="{
|
||||||
|
width: size+20+'px',
|
||||||
|
height: size+20+'px'
|
||||||
|
}">
|
||||||
|
<view :style="{ backgroundColor:color }" class="rect1"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="rect2"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="rect3"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="rect4"></view>
|
||||||
|
<view :style="{ backgroundColor:color }" class="rect5"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'shrinkRect',
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
size: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.spinner-inside {
|
||||||
|
margin: 25px auto;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside > view {
|
||||||
|
height: 100%;
|
||||||
|
width: 12%;
|
||||||
|
margin: 0 2px;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
|
||||||
|
animation: stretchdelay 1.2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .rect2 {
|
||||||
|
-webkit-animation-delay: -1.1s;
|
||||||
|
animation-delay: -1.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .rect3 {
|
||||||
|
-webkit-animation-delay: -1.0s;
|
||||||
|
animation-delay: -1.0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .rect4 {
|
||||||
|
-webkit-animation-delay: -0.9s;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-inside .rect5 {
|
||||||
|
-webkit-animation-delay: -0.8s;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes stretchdelay {
|
||||||
|
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
|
||||||
|
20% { -webkit-transform: scaleY(1.0) }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes stretchdelay {
|
||||||
|
0%, 40%, 100% {
|
||||||
|
transform: scaleY(0.4);
|
||||||
|
-webkit-transform: scaleY(0.4);
|
||||||
|
} 20% {
|
||||||
|
transform: scaleY(1.0);
|
||||||
|
-webkit-transform: scaleY(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<transition name="fade">
|
||||||
|
<!-- #endif -->
|
||||||
|
<view class="mask" v-show="isActive" :class="{ 'full-screen': isFullScreen }" :style="{ backgroundColor }">
|
||||||
|
<view class="spinner" :style="{ transform:`translate(-50%, -${translateY}%)`}">
|
||||||
|
<slot>
|
||||||
|
<!-- ==========在这里改成选择的那一个========== -->
|
||||||
|
<shrinkRect :color="color" :size="size" />
|
||||||
|
<!-- ==========在这里改成选择的那一个========== -->
|
||||||
|
</slot>
|
||||||
|
<view v-if="text.length" :style="{ color:textColor }">
|
||||||
|
{{ text }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
</transition>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ==========在这里选一个你要的其他去掉也行==========
|
||||||
|
// import loop from './loaders/loop.vue'
|
||||||
|
// import bounce from './loaders/bounce.vue'
|
||||||
|
// import doubleBounce from './loaders/double-bounce.vue'
|
||||||
|
// import doubleCube from './loaders/double-cube.vue'
|
||||||
|
// import doubleDot from './loaders/double-dot.vue'
|
||||||
|
// import rotatePlane from './loaders/rotate-plane.vue'
|
||||||
|
// import scaleOut from './loaders/scale-out.vue'
|
||||||
|
import shrinkRect from './loaders/shrink-rect.vue'
|
||||||
|
// ==========在这里选一个你要的其他去掉也行==========
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ourLoading',
|
||||||
|
components: {
|
||||||
|
// ==========在这里选择一个==========
|
||||||
|
// loop,
|
||||||
|
// bounce,
|
||||||
|
// doubleBounce,
|
||||||
|
// doubleCube,
|
||||||
|
// doubleDot,
|
||||||
|
// rotatePlane,
|
||||||
|
// scaleOut,
|
||||||
|
shrinkRect
|
||||||
|
// ==========在这里选择一个==========
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
active: Boolean,
|
||||||
|
translateY: {
|
||||||
|
type: Number,
|
||||||
|
default: 50
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#06193a'
|
||||||
|
},
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#06193a'
|
||||||
|
},
|
||||||
|
isFullScreen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'rgba(255, 255, 255, .9)'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 60
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isActive: this.active || false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
active(value) {
|
||||||
|
this.isActive = value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.mask {
|
||||||
|
position: absolute;
|
||||||
|
width: 60%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 3000;
|
||||||
|
transition: opacity .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-screen {
|
||||||
|
position: fixed;
|
||||||
|
width: 60%;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifdef H5 */
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
3
main.js
3
main.js
|
|
@ -7,6 +7,9 @@ import uView from '@/uni_modules/uview-ui'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import request from '@/config/request.js'
|
import request from '@/config/request.js'
|
||||||
|
|
||||||
|
import ourLoading from '@/components/our-loading/our-loading.vue'
|
||||||
|
Vue.component('ourLoading', ourLoading)
|
||||||
|
|
||||||
Vue.use(uView)
|
Vue.use(uView)
|
||||||
Vue.use(request)
|
Vue.use(request)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -81,13 +81,6 @@
|
||||||
{
|
{
|
||||||
"navigationBarTitleText" : ""
|
"navigationBarTitleText" : ""
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"path" : "pages/index/indexs/indexs",
|
|
||||||
"style" :
|
|
||||||
{
|
|
||||||
"navigationBarTitleText" : ""
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// "tabBar": {
|
// "tabBar": {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
<ourLoading isFullScreen :active="loading" text="" textColor="#06193a"/>
|
||||||
|
|
||||||
<!-- 首页数据 -->
|
<!-- 首页数据 -->
|
||||||
<view class="content-wrap" v-if="Sindex == 1">
|
<view class="content-wrap" v-if="Sindex == 1">
|
||||||
<homeData :dataListsNew="dataListsNew" :deviceList="deviceList" :Activedevice="Activedevice" @deviceGet="deviceGet" @pageDetail="pageDetail"></homeData>
|
<homeData :dataListsNew="dataListsNew" :deviceList="deviceList" :Activedevice="Activedevice" @deviceGet="deviceGet" @pageDetail="pageDetail"></homeData>
|
||||||
|
|
@ -71,6 +73,8 @@
|
||||||
SleepDatas:{}
|
SleepDatas:{}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
loading: true,
|
||||||
|
|
||||||
name: '',
|
name: '',
|
||||||
name1: '',
|
name1: '',
|
||||||
name2: '',
|
name2: '',
|
||||||
|
|
@ -104,8 +108,8 @@
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
var avaudiosession = plus.ios.import("AVAudioSession");
|
var avaudiosession = plus.ios.import("AVAudioSession");
|
||||||
var avaudio = avaudiosession.sharedInstance();
|
var avaudio = avaudiosession.sharedInstance();
|
||||||
avaudio.requestRecordPermission(()=>{
|
avaudio.requestRecordPermission(() => {
|
||||||
console.log('申请麦克风权限');
|
console.log('申请麦克风权限');
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
// #endif
|
// #endif
|
||||||
|
|
@ -198,6 +202,10 @@
|
||||||
delete this.dataListsNew.ECGData.data_msg.list;
|
delete this.dataListsNew.ECGData.data_msg.list;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false;
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
this.urlLink = `/hybrid/html/ai.html?data=${JSON.stringify(this.dataListsNew)}&user=${JSON.stringify(this.getUserInfo)}&token=${store.getters['api/getApiToken']}&deviceId=${this.getActiceDevice.device_id}`;
|
this.urlLink = `/hybrid/html/ai.html?data=${JSON.stringify(this.dataListsNew)}&user=${JSON.stringify(this.getUserInfo)}&token=${store.getters['api/getApiToken']}&deviceId=${this.getActiceDevice.device_id}`;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
@ -327,6 +335,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.content-header {
|
.content-header {
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
|
|
||||||
var isReady=false;var onReadyCallbacks=[];
|
var isReady=false;var onReadyCallbacks=[];
|
||||||
var isServiceReady=false;var onServiceReadyCallbacks=[];
|
var isServiceReady=false;var onServiceReadyCallbacks=[];
|
||||||
var __uniConfig = {"pages":["pages/index/blank","pages/index/index","pages/login/login","pages/index/detail","pages/login/forget","pages/login/register","pages/device/device","pages/my/my","pages/login/explain","pages/index/echarts","pages/only_test/only_test","pages/only_test/ot1","pages/only_test/ot2","pages/only_test/ot3","pages/only_test/ot5","pages/index/indexs/indexs"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"中鼎云医","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8","navigationStyle":"custom"},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"中鼎云医","compilerVersion":"4.15","entryPagePath":"pages/index/blank","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
|
var __uniConfig = {"pages":["pages/index/blank","pages/index/index","pages/login/login","pages/index/detail","pages/login/forget","pages/login/register","pages/device/device","pages/my/my","pages/login/explain","pages/index/echarts","pages/only_test/only_test","pages/only_test/ot1","pages/only_test/ot2","pages/only_test/ot3","pages/only_test/ot5"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"中鼎云医","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8","navigationStyle":"custom"},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"中鼎云医","compilerVersion":"4.15","entryPagePath":"pages/index/blank","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
|
||||||
var __uniRoutes = [{"path":"/pages/index/blank","meta":{"isQuit":true},"window":{}},{"path":"/pages/index/index","meta":{},"window":{}},{"path":"/pages/login/login","meta":{},"window":{}},{"path":"/pages/index/detail","meta":{},"window":{}},{"path":"/pages/login/forget","meta":{},"window":{}},{"path":"/pages/login/register","meta":{},"window":{}},{"path":"/pages/device/device","meta":{},"window":{}},{"path":"/pages/my/my","meta":{},"window":{}},{"path":"/pages/login/explain","meta":{},"window":{}},{"path":"/pages/index/echarts","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/only_test","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot1","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot2","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot3","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot5","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/index/indexs/indexs","meta":{},"window":{"navigationBarTitleText":""}}];
|
var __uniRoutes = [{"path":"/pages/index/blank","meta":{"isQuit":true},"window":{}},{"path":"/pages/index/index","meta":{},"window":{}},{"path":"/pages/login/login","meta":{},"window":{}},{"path":"/pages/index/detail","meta":{},"window":{}},{"path":"/pages/login/forget","meta":{},"window":{}},{"path":"/pages/login/register","meta":{},"window":{}},{"path":"/pages/device/device","meta":{},"window":{}},{"path":"/pages/my/my","meta":{},"window":{}},{"path":"/pages/login/explain","meta":{},"window":{}},{"path":"/pages/index/echarts","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/only_test","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot1","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot2","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot3","meta":{},"window":{"navigationBarTitleText":""}},{"path":"/pages/only_test/ot5","meta":{},"window":{"navigationBarTitleText":""}}];
|
||||||
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
__uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||||
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
__uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
|
||||||
service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});
|
service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue