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 request from '@/config/request.js'
|
||||
|
||||
import ourLoading from '@/components/our-loading/our-loading.vue'
|
||||
Vue.component('ourLoading', ourLoading)
|
||||
|
||||
Vue.use(uView)
|
||||
Vue.use(request)
|
||||
|
||||
|
|
|
|||
|
|
@ -81,13 +81,6 @@
|
|||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/index/indexs/indexs",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
}
|
||||
],
|
||||
// "tabBar": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<ourLoading isFullScreen :active="loading" text="" textColor="#06193a"/>
|
||||
|
||||
<!-- 首页数据 -->
|
||||
<view class="content-wrap" v-if="Sindex == 1">
|
||||
<homeData :dataListsNew="dataListsNew" :deviceList="deviceList" :Activedevice="Activedevice" @deviceGet="deviceGet" @pageDetail="pageDetail"></homeData>
|
||||
|
|
@ -71,6 +73,8 @@
|
|||
SleepDatas:{}
|
||||
},
|
||||
|
||||
loading: true,
|
||||
|
||||
name: '',
|
||||
name1: '',
|
||||
name2: '',
|
||||
|
|
@ -104,8 +108,8 @@
|
|||
setTimeout(() => {
|
||||
var avaudiosession = plus.ios.import("AVAudioSession");
|
||||
var avaudio = avaudiosession.sharedInstance();
|
||||
avaudio.requestRecordPermission(()=>{
|
||||
console.log('申请麦克风权限');
|
||||
avaudio.requestRecordPermission(() => {
|
||||
console.log('申请麦克风权限');
|
||||
});
|
||||
}, 1000);
|
||||
// #endif
|
||||
|
|
@ -198,6 +202,10 @@
|
|||
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}`;
|
||||
}
|
||||
);
|
||||
|
|
@ -327,6 +335,7 @@
|
|||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: 30rpx;
|
||||
z-index: -1;
|
||||
}
|
||||
.content-header {
|
||||
margin-bottom: 30rpx;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
|
||||
var isReady=false;var onReadyCallbacks=[];
|
||||
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 __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 __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":""}}];
|
||||
__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()})}});
|
||||
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