79 lines
1.2 KiB
Vue
79 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<view v-if="type==1" class="posi-f wh bf t0 z9999" :style="{zIndex:zix}">
|
||
|
|
<view class="animation_opactiy posi-f wh bf t0 l0"></view>
|
||
|
|
<view class="jzzc" :class="system.loadIcon?'':'f-c'">
|
||
|
|
<mg-img v-if="system.loadIcon" m='widthFix' :src="system.loadIcon"></mg-img>
|
||
|
|
<view v-else class="weui-loading"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else @touchmove.stop="" class="posi-f wh t0 z9999 skeletonbg" v-show="value"></view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
zix: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: '1'
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.skeletonbg {}
|
||
|
|
|
||
|
|
@keyframes backOpacity {
|
||
|
|
0% {
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
25% {
|
||
|
|
opacity: .2
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
opacity: 0.5
|
||
|
|
}
|
||
|
|
|
||
|
|
75% {
|
||
|
|
opacity: .2
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.animation_opactiy {
|
||
|
|
animation: backOpacity 1s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.jzzc {
|
||
|
|
width: 300rpx;
|
||
|
|
height: 300rpx;
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.weui-loading {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
}
|
||
|
|
</style>
|