91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<template>
|
|
<view>
|
|
<view v-if="loading" class="container-loading">
|
|
<view class="loading-box">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</view>
|
|
</view>
|
|
<view v-else :style="{paddingTop: statusBarHeight +'px'}" class="pad-zy30">
|
|
<slot name="content"></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"container-subgroup",
|
|
data() {
|
|
return {
|
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
|
loading:true,
|
|
exist:''
|
|
};
|
|
},
|
|
// 执行顺序 第一
|
|
beforeCreate(){
|
|
// 检测是否登录过期或是否登录
|
|
if(uni.getStorageSync('phone_active')){
|
|
this.$toolAll.tools.overdue();
|
|
}
|
|
this.exist = uni.getStorageSync('token');
|
|
this.exist ? this.loading = false : this.loading = true;
|
|
},
|
|
// 执行顺序 第二
|
|
created(){
|
|
|
|
},
|
|
// 执行顺序 第三
|
|
beforeMount(){
|
|
|
|
},
|
|
// 执行顺序 第四
|
|
mounted(){
|
|
setTimeout(()=>{
|
|
this.loading = false;
|
|
},500)
|
|
},
|
|
// 组件更新前
|
|
beforeUpdate(){
|
|
|
|
},
|
|
// 组件更新后
|
|
updated(){
|
|
|
|
},
|
|
// 组件销毁前：实例销毁之前调用。在这一步，实例仍然完全可用
|
|
beforeDestroy(){
|
|
|
|
},
|
|
// 销毁所有实例
|
|
destroyed(){
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container-loading {position: fixed;top: 0;left: 0;bottom: 0;right: 0;display: flex;justify-content: center;align-items: center;}
|
|
.container-loading .loading-box {width: 80rpx;display: flex;flex-wrap: wrap;animation: rotate 3s linear infinite;}
|
|
@keyframes rotate{
|
|
to{transform: rotateZ(360deg);}
|
|
}
|
|
.container-loading .loading-box span {width: 32rpx;height: 32rpx;background-color: #000000;margin: 4rpx;animation: scale 1.5s linear infinite;}
|
|
@keyframes scale{
|
|
50%{transform: scale(1);}
|
|
}
|
|
.container-loading .loading-box span:nth-child(1){border-radius: 50% 50% 0 50%;transform-origin: bottom right;}
|
|
.container-loading .loading-box span:nth-child(2){border-radius: 50% 50% 50% 0;transform-origin: bottom left;animation-delay: .5s;}
|
|
.container-loading .loading-box span:nth-child(3){border-radius: 50% 0 50% 50%;transform-origin: top right;animation-delay: 1.5s;}
|
|
.container-loading .loading-box span:nth-child(4){border-radius: 0 50% 50% 50%;transform-origin: top left;animation-delay: 1s;}
|
|
scroll-view ::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
}
|
|
</style>
|